New features for TOC

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 saicaca
+Copyright (c) 2024 saicaca
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.ja-JP.md

@@ -0,0 +1,55 @@
+# 🍥Fuwari
+
+[Astro](https://astro.build)で構築された静的ブログテンプレート
+
+[**🖥️ライブデモ (Vercel)**](https://fuwari.vercel.app)   /   [**🌏中文**](https://github.com/saicaca/fuwari/blob/main/README.zh-CN.md)   /   [**🌏日本語**](https://github.com/saicaca/fuwari/blob/main/README.ja-JP.md)   /   [**📦旧Hexoバージョン**](https://github.com/saicaca/hexo-theme-vivia)
+
+![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
+
+## ✨ 特徴
+
+- [x] [Astro](https://astro.build)及び [Tailwind CSS](https://tailwindcss.com)で構築
+- [x] スムーズなアニメーションとページ遷移
+- [x] ライト/ダークテーマ対応
+- [x] カスタマイズ可能なテーマカラーとバナー
+- [x] レスポンシブデザイン
+- [ ] コメント機能
+- [x] 検索機能
+- [ ] 目次
+
+## 🚀 使用方法
+
+1. [テンプレート](https://github.com/saicaca/fuwari/generate)から新しいリポジトリを作成するかCloneをします。
+2. ブログをローカルで編集するには、リポジトリをクローンした後、`pnpm install` と `pnpm add sharp` を実行して依存関係をインストールします。  
+   - [pnpm](https://pnpm.io)がインストールされていない場合は `npm install -g pnpm` で導入可能です。
+3. `src/config.ts`ファイルを編集する事でブログを自分好みにカスタマイズ出来ます。
+4. `pnpm new-post <filename>`で新しい記事を作成し、`src/content/posts/`.フォルダ内で編集します。
+5. 作成したブログをVercel、Netlify、GitHub Pagesなどにデプロイするには[ガイド](https://docs.astro.build/ja/guides/deploy/)に従って下さい。加えて、別途デプロイを行う前に`astro.config.mjs`を編集してサイト構成を変更する必要があります。
+
+## ⚙️ 記事のフロントマター
+
+```yaml
+---
+title: My First Blog Post
+published: 2023-09-09
+description: This is the first post of my new Astro blog.
+image: /images/cover.jpg
+tags: [Foo, Bar]
+category: Front-end
+draft: false
+---
+```
+
+## 🧞 コマンド
+
+すべてのコマンドは、ターミナルでプロジェクトのルートから実行する必要があります:
+
+| Command                             | Action                                           |
+|:------------------------------------|:-------------------------------------------------|
+| `pnpm install` AND `pnpm add sharp` | 依存関係のインストール                           |
+| `pnpm dev`                          | `localhost:4321`で開発用ローカルサーバーを起動      |
+| `pnpm build`                        | `./dist/`にビルド内容を出力          |
+| `pnpm preview`                      | デプロイ前の内容をローカルでプレビュー     |
+| `pnpm new-post <filename>`          | 新しい投稿を作成                                |
+| `pnpm astro ...`                    | `astro add`, `astro check`の様なコマンドを実行する際に使用 |
+| `pnpm astro --help`                 | Astro CLIのヘルプを表示                     |

README.md

@@ -1,19 +1,15 @@
-# Fuwari
+# 🍥Fuwari
 
-> [!WARNING]
-> This project is still very unfinished and the code is quite messy. Features may be changed or removed in the future.
+A static blog template built with [Astro](https://astro.build).
 
-Fuwari (not the final name maybe) is a static blog template built with [Astro](https://astro.build), a refactored version of [hexo-theme-vivia](https://github.com/saicaca/hexo-theme-vivia).
-
-[**🖥️Live Demo (Vercel)**](https://fuwari.vercel.app)
+[**🖥️Live Demo (Vercel)**](https://fuwari.vercel.app)   /   [**🌏中文 README**](https://github.com/saicaca/fuwari/blob/main/README.zh-CN.md)   /   [**🌏日本語 README**](https://github.com/saicaca/fuwari/blob/main/README.ja-JP.md)   /   [**📦Old Hexo Version**](https://github.com/saicaca/hexo-theme-vivia)
 
 ![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
 
 ## ✨ Features
 
-- [x] **Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)**
-- [x] **View Transitions between pages**
-  - [is not supported by Firefox and Safari yet](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility)
+- [x] Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com)
+- [x] Smooth animations and page transitions
 - [x] Light / dark mode
 - [x] Customizable theme colors & banner
 - [x] Responsive design
@@ -23,10 +19,12 @@ Fuwari (not the final name maybe) is a static blog template built with [Astro](h
 
 ## 🚀 How to Use
 
-1. [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template.
-2. Edit the config file `src/config.ts` to customize your blog.
-3. Run `npm run new-post -- <filename>` or `pnpm run new-post <filename>` to create a new post and edit it in `src/content/posts/`.
-4. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/).
+1. [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template or fork this repository.
+2. To edit your blog locally, clone your repository, run `pnpm install` AND `pnpm add sharp` to install dependencies.  
+   - Install [pnpm](https://pnpm.io) `npm install -g pnpm` if you haven't.
+3. Edit the config file `src/config.ts` to customize your blog.
+4. Run `pnpm new-post <filename>` to create a new post and edit it in `src/content/posts/`.
+5. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/). You need to edit the site configuration in `astro.config.mjs` before deployment. 
 
 ## ⚙️ Frontmatter of Posts
 
@@ -46,12 +44,12 @@ draft: false
 
 All commands are run from the root of the project, from a terminal:
 
-| Command                                                           | Action                                           |
-|:------------------------------------------------------------------|:-------------------------------------------------|
-| `npm install`                                                     | Installs dependencies                            |
-| `npm run dev`                                                     | Starts local dev server at `localhost:4321`      |
-| `npm run build`                                                   | Build your production site to `./dist/`          |
-| `npm run preview`                                                 | Preview your build locally, before deploying     |
-| `npm run astro ...`                                               | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help`                                         | Get help using the Astro CLI                     |
-| `npm run new-post -- <filename>`<br/>`pnpm run new-post <filename>` | Create a new post                                |
+| Command                             | Action                                           |
+|:------------------------------------|:-------------------------------------------------|
+| `pnpm install` AND `pnpm add sharp` | Installs dependencies                            |
+| `pnpm dev`                          | Starts local dev server at `localhost:4321`      |
+| `pnpm build`                        | Build your production site to `./dist/`          |
+| `pnpm preview`                      | Preview your build locally, before deploying     |
+| `pnpm new-post <filename>`          | Create a new post                                |
+| `pnpm astro ...`                    | Run CLI commands like `astro add`, `astro check` |
+| `pnpm astro --help`                 | Get help using the Astro CLI                     |

README.zh-CN.md

@@ -0,0 +1,55 @@
+# 🍥Fuwari
+
+基于 [Astro](https://astro.build) 开发的静态博客模板。
+
+[**🖥️在线预览（Vercel）**](https://fuwari.vercel.app)   /   [**🌏English README**](https://github.com/saicaca/fuwari)   /   [**🌏日本語 README**](https://github.com/saicaca/fuwari/blob/main/README.ja-JP.md)   /   [**📦旧 Hexo 版本**](https://github.com/saicaca/hexo-theme-vivia)
+
+![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
+
+## ✨ 功能特性
+
+- [x] 基于 Astro 和 Tailwind CSS 开发
+- [x] 流畅的动画和页面过渡
+- [x] 亮色 / 暗色模式
+- [x] 自定义主题色和横幅图片
+- [x] 响应式设计
+- [ ] 评论
+- [x] 搜索
+- [ ] 文内目录
+
+## 🚀 使用方法
+
+1. 使用此模板[生成新仓库](https://github.com/saicaca/fuwari/generate)或 Fork 此仓库
+2. 进行本地开发，Clone 新的仓库，执行 `pnpm install` 和 `pnpm add sharp` 以安装依赖  
+   - 若未安装 [pnpm](https://pnpm.io)，执行 `npm install -g pnpm`
+3. 通过配置文件 `src/config.ts` 自定义博客
+4. 执行 `pnpm new-post <filename>` 创建新文章，并在 `src/content/posts/` 目录中编辑
+5. 参考[官方指南](https://docs.astro.build/zh-cn/guides/deploy/)将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 `astro.config.mjs` 中的站点设置。
+
+## ⚙️ 文章 Frontmatter
+
+```yaml
+---
+title: My First Blog Post
+published: 2023-09-09
+description: This is the first post of my new Astro blog.
+image: /images/cover.jpg
+tags: [Foo, Bar]
+category: Front-end
+draft: false
+---
+```
+
+## 🧞 指令
+
+下列指令均需要在项目根目录执行：
+
+| Command                           | Action                            |
+|:----------------------------------|:----------------------------------|
+| `pnpm install` 并 `pnpm add sharp` | 安装依赖                              |
+| `pnpm dev`                        | 在 `localhost:4321` 启动本地开发服务器      |
+| `pnpm build`                      | 构建网站至 `./dist/`                   |
+| `pnpm preview`                    | 本地预览已构建的网站                        |
+| `pnpm new-post <filename>`        | 创建新文章                             |
+| `pnpm astro ...`                  | 执行 `astro add`, `astro check` 等指令 |
+| `pnpm astro --help`               | 显示 Astro CLI 帮助                   |

astro.config.mjs

@@ -1,5 +1,4 @@
 import tailwind from "@astrojs/tailwind"
-import yaml from "@rollup/plugin-yaml"
 import Compress from "astro-compress"
 import icon from "astro-icon"
 import { defineConfig } from "astro/config"
@@ -9,7 +8,15 @@ import rehypeKatex from "rehype-katex"
 import rehypeSlug from "rehype-slug"
 import remarkMath from "remark-math"
 import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs"
-import vue from "@astrojs/vue"
+import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs"
+import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs"
+import remarkDirective from "remark-directive" /* Handle directives */
+import remarkDirectiveRehype from 'remark-directive-rehype' /* Pass directives to rehype */
+import rehypeComponents from "rehype-components"; /* Render the custom directive content */
+import svelte from "@astrojs/svelte"
+import swup from '@swup/astro';
+import sitemap from '@astrojs/sitemap';
+import {parseDirectiveNode} from "./src/plugins/remark-directive-rehype.js";
 
 const oklchToHex = (str) => {
   const DEFAULT_HUE = 250
@@ -25,8 +32,19 @@ const oklchToHex = (str) => {
 export default defineConfig({
   site: "https://fuwari.vercel.app/",
   base: "/",
+  trailingSlash: "always",
   integrations: [
     tailwind(),
+    swup({
+      theme: false,
+      animationClass: 'transition-',
+      containers: ['main', '#toc-widget'],
+      smoothScrolling: true,
+      cache: true,
+      preload: true,
+      accessibility: true,
+      globalInstance: true,
+    }),
     icon({
       include: {
         "material-symbols": ["*"],
@@ -38,13 +56,24 @@ export default defineConfig({
     Compress({
       Image: false,
     }),
-    vue()
+    svelte(),
+    sitemap(),
   ],
   markdown: {
-    remarkPlugins: [remarkMath, remarkReadingTime],
+    remarkPlugins: [remarkMath, remarkReadingTime, remarkDirective, parseDirectiveNode],
     rehypePlugins: [
       rehypeKatex,
       rehypeSlug,
+      [rehypeComponents, {
+        components: {
+          github: GithubCardComponent,
+          note: (x, y) => AdmonitionComponent(x, y, "note"),
+          tip: (x, y) => AdmonitionComponent(x, y, "tip"),
+          important: (x, y) => AdmonitionComponent(x, y, "important"),
+          caution: (x, y) => AdmonitionComponent(x, y, "caution"),
+          warning: (x, y) => AdmonitionComponent(x, y, "warning"),
+        },
+      }],
       [
         rehypeAutolinkHeadings,
         {
@@ -70,11 +99,18 @@ export default defineConfig({
       ],
     ],
   },
-  redirects: {
-    "/": "/page/1",
-  },
   vite: {
-    plugins: [yaml()],
+    build: {
+      rollupOptions: {
+        onwarn(warning, warn) {
+          // temporarily suppress this warning
+          if (warning.message.includes("is dynamically imported by") && warning.message.includes("but also statically imported by")) {
+            return;
+          }
+          warn(warning);
+        }
+      }
+    },
     css: {
       preprocessorOptions: {
         stylus: {

package.json

@@ -13,38 +13,51 @@
     "lint": "biome check --apply ./src"
   },
   "dependencies": {
-    "@astrojs/check": "^0.3.4",
+    "@astrojs/check": "^0.5.9",
+    "@astrojs/rss": "^4.0.5",
+    "@astrojs/sitemap": "^3.1.2",
+    "@astrojs/svelte": "^5.2.0",
     "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vue": "^4.0.8",
-    "@fontsource-variable/jetbrains-mono": "^5.0.19",
-    "@fontsource/roboto": "^5.0.8",
-    "astro": "^4.1.1",
-    "astro-icon": "1.0.2",
-    "colorjs.io": "^0.4.5",
+    "@fontsource-variable/jetbrains-mono": "^5.0.20",
+    "@fontsource/roboto": "^5.0.12",
+    "@swup/astro": "^1.4.0",
+    "astro": "^4.4.15",
+    "astro-compress": "^2.2.15",
+    "astro-icon": "1.1.0",
+    "colorjs.io": "^0.5.0",
+    "hastscript": "^9.0.0",
+    "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
-    "overlayscrollbars": "^2.4.6",
+    "overlayscrollbars": "^2.6.1",
     "pagefind": "^1.0.4",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-components": "^0.3.0",
     "rehype-katex": "^7.0.0",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-directive-rehype": "^0.4.2",
     "remark-math": "^6.0.0",
-    "sharp": "^0.32.6",
-    "tailwindcss": "^3.3.7",
-    "typescript": "^5.2.2",
-    "valine": "^1.5.1",
-    "vue": "^3.4.15"
+    "sanitize-html": "^2.13.0",
+    "sharp": "^0.33.3",
+    "svelte": "^4.2.12",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@astrojs/ts-plugin": "^1.3.1",
-    "@biomejs/biome": "1.4.1",
+    "@astrojs/ts-plugin": "^1.6.0",
+    "@biomejs/biome": "1.6.1",
     "@iconify-json/fa6-brands": "^1.1.18",
     "@iconify-json/fa6-regular": "^1.1.18",
     "@iconify-json/fa6-solid": "^1.1.20",
-    "@iconify-json/material-symbols": "^1.1.69",
+    "@iconify-json/material-symbols": "^1.1.74",
+    "@iconify/svelte": "^3.1.6",
     "@rollup/plugin-yaml": "^4.1.2",
     "@tailwindcss/typography": "^0.5.10",
-    "astro-compress": "github:astro-community/AstroCompress#no-sharp",
-    "stylus": "^0.59.0"
+    "@types/markdown-it": "^14.0.0",
+    "@types/mdast": "^4.0.3",
+    "@types/sanitize-html": "^2.11.0",
+    "stylus": "^0.63.0"
   }
 }