diff --git a/mdsvex.config.ts b/mdsvex.config.ts
index a319feec..92957099 100644
--- a/mdsvex.config.ts
+++ b/mdsvex.config.ts
@@ -21,23 +21,18 @@ import { lex, parse as parseFence } from 'fenceparser'
 import { renderCodeToHTML, runTwoSlash, createShikiHighlighter } from 'shiki-twoslash'
 type VALUE = { [key in string | number]: VALUE } | Array<VALUE> | string | boolean | number
 
-// lightbox
-import { Lightbox } from 'svelte-lightbox'
-
 const remarkUraraFm =
   () =>
   (tree: Node<Data>, { data, filename }: { data: { fm?: Record<string, unknown> }; filename?: string }) => {
     const filepath = (filename as string).split('/src/routes')[1]
-    let { dir, name } = parse(filepath)
+    const { dir, name } = parse(filepath)
     if (!data.fm) data.fm = {}
     // Generate slug & path
     data.fm.slug = filepath
     data.fm.path = join(dir, `/${name}`.replace('/index', '').replace('.svelte', ''))
-    // Auto-set layout as article
-    if (!data.fm.layout) data.fm.layout = 'article'
     // Generate ToC
     if (data.fm.toc !== false) {
-      let [slugs, toc]: [slugs: Slugger, toc: { depth: number; title: string; slug: string }[]] = [new Slugger(), []]
+      const [slugs, toc]: [slugs: Slugger, toc: { depth: number; title: string; slug: string }[]] = [new Slugger(), []]
       visit(tree, 'heading', (node: { depth: number }) => {
         toc.push({
           depth: node.depth,
@@ -47,11 +42,6 @@ const remarkUraraFm =
       })
       data.fm.toc = toc
     }
-    // Rename
-    if (data.fm.date) data.fm.created = data.fm.date
-    if (data.fm.lastmod) data.fm.updated = data.fm.lastmod
-    if (data.fm.cover) data.fm.photo = data.fm.cover
-    if (data.fm.descr) data.fm.summary = data.fm.descr
     // Auto-read created & updated
     if (!data.fm.created || !data.fm.updated) {
       const { ctime, mtime } = statSync(new URL(`./urara${filepath}`, import.meta.url))
@@ -81,11 +71,7 @@ export default defineConfig({
     dashes: 'oldschool'
   },
   layout: {
-    article: './src/lib/components/layouts/article.svelte',
-    note: './src/lib/components/layouts/note.svelte',
-    photo: './src/lib/components/layouts/photo.svelte',
-    reply: './src/lib/components/layouts/reply.svelte',
-    _: './src/lib/components/layouts/article.svelte'
+    _: './src/lib/components/post_layout.svelte'
   },
   highlight: {
     highlighter: async (code, lang, meta) => {
diff --git a/package.json b/package.json
index 230f7f70..4871e51d 100644
--- a/package.json
+++ b/package.json
@@ -39,19 +39,20 @@
     "@sveltejs/adapter-static": "1.0.0-next.38",
     "@sveltejs/kit": "1.0.0-next.392",
     "@tailwindcss/typography": "^0.5.4",
-    "@types/node": "^18.0.6",
+    "@types/node": "^18.6.3",
     "@types/unist": "^2.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
     "autoprefixer": "^10.4.7",
     "chalk": "^5.0.1",
     "chokidar": "^3.5.3",
     "cssnano": "^5.1.12",
     "daisyui": "^2.20.0",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "fenceparser": "^2.0.0",
+    "fff-flavored-frontmatter": "~0.2.1",
     "github-slugger": "^1.4.0",
     "mdast-util-to-string": "^3.1.0",
     "mdsvex": "^0.10.6",
@@ -71,13 +72,13 @@
     "svelte-lightbox": "^0.6.6",
     "svelte-preprocess": "^4.10.7",
     "svelte-typeahead": "^4.2.4",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.1.7",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
     "unist-util-visit": "^4.1.0",
-    "unocss": "^0.44.7",
-    "vite": "^3.0.2",
+    "unocss": "^0.45.1",
+    "vite": "^3.0.4",
     "vite-plugin-pwa": "^0.12.3",
-    "workbox-window": "^6.5.3"
+    "workbox-window": "^6.5.4"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 837f721e..1f5f0cc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,19 +11,20 @@ specifiers:
   '@sveltejs/adapter-static': 1.0.0-next.38
   '@sveltejs/kit': 1.0.0-next.392
   '@tailwindcss/typography': ^0.5.4
-  '@types/node': ^18.0.6
+  '@types/node': ^18.6.3
   '@types/unist': ^2.0.6
-  '@typescript-eslint/eslint-plugin': ^5.30.7
-  '@typescript-eslint/parser': ^5.30.7
+  '@typescript-eslint/eslint-plugin': ^5.32.0
+  '@typescript-eslint/parser': ^5.32.0
   autoprefixer: ^10.4.7
   chalk: ^5.0.1
   chokidar: ^3.5.3
   cssnano: ^5.1.12
   daisyui: ^2.20.0
-  eslint: ^8.20.0
+  eslint: ^8.21.0
   eslint-config-prettier: ^8.5.0
   eslint-plugin-svelte3: ^4.0.0
   fenceparser: ^2.0.0
+  fff-flavored-frontmatter: ~0.2.1
   github-slugger: ^1.4.0
   mdast-util-to-string: ^3.1.0
   mdsvex: ^0.10.6
@@ -43,14 +44,14 @@ specifiers:
   svelte-lightbox: ^0.6.6
   svelte-preprocess: ^4.10.7
   svelte-typeahead: ^4.2.4
-  tailwindcss: ^3.1.6
+  tailwindcss: ^3.1.7
   tslib: ^2.4.0
   typescript: ^4.7.4
   unist-util-visit: ^4.1.0
-  unocss: ^0.44.7
-  vite: ^3.0.2
+  unocss: ^0.45.1
+  vite: ^3.0.4
   vite-plugin-pwa: ^0.12.3
-  workbox-window: ^6.5.3
+  workbox-window: ^6.5.4
 
 devDependencies:
   '@iconify-json/heroicons-outline': 1.1.2
@@ -61,21 +62,22 @@ devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.63
   '@sveltejs/adapter-node': 1.0.0-next.83
   '@sveltejs/adapter-static': 1.0.0-next.38
-  '@sveltejs/kit': 1.0.0-next.392_svelte@3.49.0+vite@3.0.2
-  '@tailwindcss/typography': 0.5.4_tailwindcss@3.1.6
-  '@types/node': 18.0.6
+  '@sveltejs/kit': 1.0.0-next.392_svelte@3.49.0+vite@3.0.4
+  '@tailwindcss/typography': 0.5.4_tailwindcss@3.1.8
+  '@types/node': 18.6.4
   '@types/unist': 2.0.6
-  '@typescript-eslint/eslint-plugin': 5.30.7_6wltbjakwuqm7awqswigmiuhd4
-  '@typescript-eslint/parser': 5.30.7_he2ccbldppg44uulnyq4rwocfa
+  '@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
+  '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
   autoprefixer: 10.4.7_postcss@8.4.14
   chalk: 5.0.1
   chokidar: 3.5.3
   cssnano: 5.1.12_postcss@8.4.14
   daisyui: 2.20.0_ugi4xkrfysqkt4c4y6hkyfj344
-  eslint: 8.20.0
-  eslint-config-prettier: 8.5.0_eslint@8.20.0
-  eslint-plugin-svelte3: 4.0.0_piwa6j2njmnknm35bh3wz5v52y
+  eslint: 8.21.0
+  eslint-config-prettier: 8.5.0_eslint@8.21.0
+  eslint-plugin-svelte3: 4.0.0_a7wk4ghvg4hia4trwaglu7p6cq
   fenceparser: 2.0.0
+  fff-flavored-frontmatter: 0.2.1
   github-slugger: 1.4.0
   mdast-util-to-string: 3.1.0
   mdsvex: 0.10.6_svelte@3.49.0
@@ -95,14 +97,14 @@ devDependencies:
   svelte-lightbox: 0.6.6_svelte@3.49.0
   svelte-preprocess: 4.10.7_bgntxiihuqhg5mwaa7nczjwpga
   svelte-typeahead: 4.2.4
-  tailwindcss: 3.1.6
+  tailwindcss: 3.1.8
   tslib: 2.4.0
   typescript: 4.7.4
   unist-util-visit: 4.1.0
-  unocss: 0.44.7_vite@3.0.2
-  vite: 3.0.2
-  vite-plugin-pwa: 0.12.3_vite@3.0.2
-  workbox-window: 6.5.3
+  unocss: 0.45.5_vite@3.0.4
+  vite: 3.0.4
+  vite-plugin-pwa: 0.12.3_vite@3.0.4
+  workbox-window: 6.5.4
 
 packages:
 
@@ -1280,7 +1282,7 @@ packages:
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
-      espree: 9.3.2
+      espree: 9.3.3
       globals: 13.17.0
       ignore: 5.2.0
       import-fresh: 3.3.0
@@ -1291,8 +1293,8 @@ packages:
       - supports-color
     dev: true
 
-  /@humanwhocodes/config-array/0.9.5:
-    resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
+  /@humanwhocodes/config-array/0.10.4:
+    resolution: {integrity: sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==}
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 1.2.1
@@ -1302,6 +1304,10 @@ packages:
       - supports-color
     dev: true
 
+  /@humanwhocodes/gitignore-to-minimatch/1.0.2:
+    resolution: {integrity: sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==}
+    dev: true
+
   /@humanwhocodes/object-schema/1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
@@ -1566,7 +1572,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.392_svelte@3.49.0+vite@3.0.2:
+  /@sveltejs/kit/1.0.0-next.392_svelte@3.49.0+vite@3.0.4:
     resolution: {integrity: sha512-od4rDJ/Soq0I7mda7sTbAnNKERHSDEGNa7QBpLA859xgBkwC1JnEIymYOh9dm+hMyHhB0bUoRoaur0qxKLqOOw==}
     engines: {node: '>=16.9'}
     hasBin: true
@@ -1574,17 +1580,17 @@ packages:
       svelte: ^3.44.0
       vite: ^3.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.1_svelte@3.49.0+vite@3.0.2
+      '@sveltejs/vite-plugin-svelte': 1.0.1_svelte@3.49.0+vite@3.0.4
       chokidar: 3.5.3
       sade: 1.8.1
       svelte: 3.49.0
-      vite: 3.0.2
+      vite: 3.0.4
     transitivePeerDependencies:
       - diff-match-patch
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.1_svelte@3.49.0+vite@3.0.2:
+  /@sveltejs/vite-plugin-svelte/1.0.1_svelte@3.49.0+vite@3.0.4:
     resolution: {integrity: sha512-PorCgUounn0VXcpeJu+hOweZODKmGuLHsLomwqSj+p26IwjjGffmYQfVHtiTWq+NqaUuuHWWG7vPge6UFw4Aeg==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -1602,12 +1608,12 @@ packages:
       magic-string: 0.26.2
       svelte: 3.49.0
       svelte-hmr: 0.14.12_svelte@3.49.0
-      vite: 3.0.2
+      vite: 3.0.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@tailwindcss/typography/0.5.4_tailwindcss@3.1.6:
+  /@tailwindcss/typography/0.5.4_tailwindcss@3.1.8:
     resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
@@ -1615,7 +1621,7 @@ packages:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
-      tailwindcss: 3.1.6
+      tailwindcss: 3.1.8
     dev: true
 
   /@trysound/sax/0.2.0:
@@ -1653,8 +1659,8 @@ packages:
     resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
     dev: true
 
-  /@types/node/18.0.6:
-    resolution: {integrity: sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==}
+  /@types/node/18.6.4:
+    resolution: {integrity: sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg==}
     dev: true
 
   /@types/pug/2.0.6:
@@ -1664,13 +1670,13 @@ packages:
   /@types/resolve/1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 18.0.6
+      '@types/node': 18.6.4
     dev: true
 
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.0.6
+      '@types/node': 18.6.4
     dev: true
 
   /@types/trusted-types/2.0.2:
@@ -1681,8 +1687,8 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.30.7_6wltbjakwuqm7awqswigmiuhd4:
-    resolution: {integrity: sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==}
+  /@typescript-eslint/eslint-plugin/5.32.0_iosr3hrei2tubxveewluhu5lhy:
+    resolution: {integrity: sha512-CHLuz5Uz7bHP2WgVlvoZGhf0BvFakBJKAD/43Ty0emn4wXWv5k01ND0C0fHcl/Im8Td2y/7h44E9pca9qAu2ew==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -1692,12 +1698,12 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.30.7_he2ccbldppg44uulnyq4rwocfa
-      '@typescript-eslint/scope-manager': 5.30.7
-      '@typescript-eslint/type-utils': 5.30.7_he2ccbldppg44uulnyq4rwocfa
-      '@typescript-eslint/utils': 5.30.7_he2ccbldppg44uulnyq4rwocfa
+      '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/scope-manager': 5.32.0
+      '@typescript-eslint/type-utils': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
+      '@typescript-eslint/utils': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
       debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
       functional-red-black-tree: 1.0.1
       ignore: 5.2.0
       regexpp: 3.2.0
@@ -1708,8 +1714,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.30.7_he2ccbldppg44uulnyq4rwocfa:
-    resolution: {integrity: sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==}
+  /@typescript-eslint/parser/5.32.0_qugx7qdu5zevzvxaiqyxfiwquq:
+    resolution: {integrity: sha512-IxRtsehdGV9GFQ35IGm5oKKR2OGcazUoiNBxhRV160iF9FoyuXxjY+rIqs1gfnd+4eL98OjeGnMpE7RF/NBb3A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -1718,26 +1724,26 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.30.7
-      '@typescript-eslint/types': 5.30.7
-      '@typescript-eslint/typescript-estree': 5.30.7_typescript@4.7.4
+      '@typescript-eslint/scope-manager': 5.32.0
+      '@typescript-eslint/types': 5.32.0
+      '@typescript-eslint/typescript-estree': 5.32.0_typescript@4.7.4
       debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
       typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.30.7:
-    resolution: {integrity: sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==}
+  /@typescript-eslint/scope-manager/5.32.0:
+    resolution: {integrity: sha512-KyAE+tUON0D7tNz92p1uetRqVJiiAkeluvwvZOqBmW9z2XApmk5WSMV9FrzOroAcVxJZB3GfUwVKr98Dr/OjOg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.30.7
-      '@typescript-eslint/visitor-keys': 5.30.7
+      '@typescript-eslint/types': 5.32.0
+      '@typescript-eslint/visitor-keys': 5.32.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.30.7_he2ccbldppg44uulnyq4rwocfa:
-    resolution: {integrity: sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==}
+  /@typescript-eslint/type-utils/5.32.0_qugx7qdu5zevzvxaiqyxfiwquq:
+    resolution: {integrity: sha512-0gSsIhFDduBz3QcHJIp3qRCvVYbqzHg8D6bHFsDMrm0rURYDj+skBK2zmYebdCp+4nrd9VWd13egvhYFJj/wZg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -1746,22 +1752,22 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.30.7_he2ccbldppg44uulnyq4rwocfa
+      '@typescript-eslint/utils': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
       debug: 4.3.4
-      eslint: 8.20.0
+      eslint: 8.21.0
       tsutils: 3.21.0_typescript@4.7.4
       typescript: 4.7.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.30.7:
-    resolution: {integrity: sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==}
+  /@typescript-eslint/types/5.32.0:
+    resolution: {integrity: sha512-EBUKs68DOcT/EjGfzywp+f8wG9Zw6gj6BjWu7KV/IYllqKJFPlZlLSYw/PTvVyiRw50t6wVbgv4p9uE2h6sZrQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.30.7_typescript@4.7.4:
-    resolution: {integrity: sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==}
+  /@typescript-eslint/typescript-estree/5.32.0_typescript@4.7.4:
+    resolution: {integrity: sha512-ZVAUkvPk3ITGtCLU5J4atCw9RTxK+SRc6hXqLtllC2sGSeMFWN+YwbiJR9CFrSFJ3w4SJfcWtDwNb/DmUIHdhg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -1769,8 +1775,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.30.7
-      '@typescript-eslint/visitor-keys': 5.30.7
+      '@typescript-eslint/types': 5.32.0
+      '@typescript-eslint/visitor-keys': 5.32.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -1781,29 +1787,29 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.30.7_he2ccbldppg44uulnyq4rwocfa:
-    resolution: {integrity: sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==}
+  /@typescript-eslint/utils/5.32.0_qugx7qdu5zevzvxaiqyxfiwquq:
+    resolution: {integrity: sha512-W7lYIAI5Zlc5K082dGR27Fczjb3Q57ECcXefKU/f0ajM5ToM0P+N9NmJWip8GmGu/g6QISNT+K6KYB+iSHjXCQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.30.7
-      '@typescript-eslint/types': 5.30.7
-      '@typescript-eslint/typescript-estree': 5.30.7_typescript@4.7.4
-      eslint: 8.20.0
+      '@typescript-eslint/scope-manager': 5.32.0
+      '@typescript-eslint/types': 5.32.0
+      '@typescript-eslint/typescript-estree': 5.32.0_typescript@4.7.4
+      eslint: 8.21.0
       eslint-scope: 5.1.1
-      eslint-utils: 3.0.0_eslint@8.20.0
+      eslint-utils: 3.0.0_eslint@8.21.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.30.7:
-    resolution: {integrity: sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==}
+  /@typescript-eslint/visitor-keys/5.32.0:
+    resolution: {integrity: sha512-S54xOHZgfThiZ38/ZGTgB2rqx51CMJ5MCfVT2IplK4Q7hgzGfe0nLzLCcenDnc/cSjP568hdeKfeDcBgqNHD/g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.30.7
+      '@typescript-eslint/types': 5.32.0
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -1833,139 +1839,145 @@ packages:
       - supports-color
     dev: true
 
-  /@unocss/cli/0.44.7:
-    resolution: {integrity: sha512-/FthkzWK3DT4u06rUnl5i7+fDPpp0sNH9oEz1EssrobmRIVWF7e7uGOUs8bc522uFMy8vOvxiQUn69v4RSGdGQ==}
+  /@unocss/cli/0.45.5:
+    resolution: {integrity: sha512-gB/XZ6ksS/le1r33JhLam7UtJhd2fvtbgYV2rU76DOoqIa+qCZFbrMDFyF+PJz6yCW0goYF9ybtZXND42aygZQ==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@unocss/config': 0.44.7
-      '@unocss/core': 0.44.7
-      '@unocss/preset-uno': 0.44.7
+      '@unocss/config': 0.45.5
+      '@unocss/core': 0.45.5
+      '@unocss/preset-uno': 0.45.5
       cac: 6.7.12
       chokidar: 3.5.3
       colorette: 2.0.19
       consola: 2.15.3
       fast-glob: 3.2.11
-      pathe: 0.3.2
+      pathe: 0.3.3
       perfect-debounce: 0.1.3
     dev: true
 
-  /@unocss/config/0.44.7:
-    resolution: {integrity: sha512-KSboUqIMkSLBQtVaQ2oTWSqdIBvj8Ged38h9un7Qe047jrYFHzgpCYVfmr7ZgZ2hqDYCdNc1357WgqNZO4AwiQ==}
+  /@unocss/config/0.45.5:
+    resolution: {integrity: sha512-wae2RmItmaSsXcMPb9dOzrfQlG6SDgbuUmyuXydJi7VZmj/5a/a1cRTny/J2/eP1kS5aUNgCm/FzpletH59mfw==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
       unconfig: 0.3.5
     dev: true
 
-  /@unocss/core/0.44.7:
-    resolution: {integrity: sha512-EPs3IxvPdzxEkEynAyCqyJX25IPp5RtFK3mFdgmXGvigwpgq9sxJBzQRXmYNtDeZriSyiwjYmc9yclLEJH3IiA==}
+  /@unocss/core/0.45.5:
+    resolution: {integrity: sha512-6boP8sGTRb+nE87pdjii7otO/tguIlDkFh90E6mglA0XdjHWiLCCNlgJoxgjCGCPNYUm/Nojx0bUbcokuqBZDw==}
     dev: true
 
-  /@unocss/inspector/0.44.7:
-    resolution: {integrity: sha512-uH0dla42tiKEfCpgCcDLC0FwKzrNRLqsN7R3az0B/eHSkeOuXrg7jdA9RWaNNmjnl6/ZOqevtyE5+g7JZf7E6A==}
+  /@unocss/inspector/0.45.5:
+    resolution: {integrity: sha512-OM1bmmt8Qbsdt4AvokI/HAYVrHWOYwsNyisEhgGRQiOuc6JuFx1+B1T8hyELBRZfunvfm4J6qDJ3qGqPZWFU9g==}
     dependencies:
       gzip-size: 6.0.0
       sirv: 2.0.2
     dev: true
 
-  /@unocss/preset-attributify/0.44.7:
-    resolution: {integrity: sha512-aXW06aBcrHFzf0eKLpDpNmaQ7LPz6RibCHTNhSF/IkyDPAp7HDltIGoWY2+D/C1LUO3gXahnH4Mj4dlvv7fZtg==}
+  /@unocss/preset-attributify/0.45.5:
+    resolution: {integrity: sha512-xgjsuYDB5EYqXaCa73B9Tk19y6U8482S/trf6kcbSSGLaEcXhOQMdo8xtUJPyacwoCG0ralCgWIgWeb/VQ0noQ==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/preset-icons/0.44.7:
-    resolution: {integrity: sha512-3PC8a1yjm/rV0Sq192OB+yWokccjNZlh8dsmt3NPdz7OTIRTreNvUaFlV5CHk1JSk2/CNus1VWLG1VeDHqdotg==}
+  /@unocss/preset-icons/0.45.5:
+    resolution: {integrity: sha512-msrhKKEWh5HMyQXnseKjMTe8dZZZl/URaxCtDkIhzGJHzDvTAiU7kDr6pAr3Uxw2DgDEviq159W22679JyaBHg==}
     dependencies:
       '@iconify/utils': 1.0.33
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
       ohmyfetch: 0.4.18
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini/0.44.7:
-    resolution: {integrity: sha512-EPRogHZstaRGh4244FUixaQUgfQW1lfKnbyh8ZewtL+iCN0YdDEyWuITtqA1yv9sMlJdn9nAEowA3is9ZkWtBQ==}
+  /@unocss/preset-mini/0.45.5:
+    resolution: {integrity: sha512-R8FDinKThZBTIqwuYokI8GHOTxt8x11W/dY4wyXOFXXiGW2kmL7fjhB3KNN3sfyhyp+k2g5CW40XJ13rOunODw==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/preset-tagify/0.44.7:
-    resolution: {integrity: sha512-+9K3qX1bAIU7BINXi5qTFBr828WXrXGhq3Nzys8rHgrZShPpwwlfJl26oN3cteWEDxSOlM6DZ3xSqoIMtWcQXA==}
+  /@unocss/preset-tagify/0.45.5:
+    resolution: {integrity: sha512-fRUEh8EuJUjXHvJNzbPquC6Ih51mIygFmNaBXr9W9SNQYgYF9Z9Xy/2rFD3ADaI6L52JUIEV0OZgt1E/QJpAng==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/preset-typography/0.44.7:
-    resolution: {integrity: sha512-2YAkIuClWIgi0F95VFMz0cY8wPmngpxlKE8wRNF29hZ5Qvz+MfFDe6ECypApKUDMP2+dfhAHwXu9MlN/Vgnr5A==}
+  /@unocss/preset-typography/0.45.5:
+    resolution: {integrity: sha512-4F2hRDsuE8BCA0MZIaRjClXIVQkePQsQyz+s3qw89Fndeatj+Yd5VrKEPBBz3g9062A6dUGfgWUyy4o+SAOCvA==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/preset-uno/0.44.7:
-    resolution: {integrity: sha512-JN1/hCy51RdQmDjCkVZWzFZv0XREyFIxSv/Wy3XfI3rzD42vdcTei/OraFfEhkh9/SdF9uUlIh9QQwOFZUWpyg==}
+  /@unocss/preset-uno/0.45.5:
+    resolution: {integrity: sha512-eo0do6sS1xMRaeOvxkxEjFXZoh0Pm5g1c8bb3WpNMogcp9l8t22JCkSLo5dq+dnC+nQduOzt/GJoA+XksQeEsw==}
     dependencies:
-      '@unocss/core': 0.44.7
-      '@unocss/preset-mini': 0.44.7
-      '@unocss/preset-wind': 0.44.7
+      '@unocss/core': 0.45.5
+      '@unocss/preset-mini': 0.45.5
+      '@unocss/preset-wind': 0.45.5
     dev: true
 
-  /@unocss/preset-web-fonts/0.44.7:
-    resolution: {integrity: sha512-1dI3B9LnSt9yLnvsVsiI454SMhlraRdyNU1xrBQ8Z0YBF41/it0yk4+xf2uD8o87brBgfTib4gzPdVxgqQsiqQ==}
+  /@unocss/preset-web-fonts/0.45.5:
+    resolution: {integrity: sha512-wusZRdGXpAVWbdyNP7Cd7D1hWuAEG1jch4kXzRNyjZ4Uo7ImGY42yEysjXpuNizA29i0Xe9FtT99kCqOcQwHRQ==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
       ohmyfetch: 0.4.18
     dev: true
 
-  /@unocss/preset-wind/0.44.7:
-    resolution: {integrity: sha512-mjzNwY18A/WT8cSGuxf52rYR/gy1jjDXg1xF38/Jn1Nln4jOBkKzrQTyk4c/3GJWNrHav8hE3VanD8+l7Q6W6A==}
+  /@unocss/preset-wind/0.45.5:
+    resolution: {integrity: sha512-N4kr5SG4WjqJ4hI+4Fp8QlB5u7pTtAGY1WDVPeKwh3lX2iE01BnQhL6W6ds7BjXSdGm/yUQwBCedpnAfzWqutQ==}
     dependencies:
-      '@unocss/core': 0.44.7
-      '@unocss/preset-mini': 0.44.7
+      '@unocss/core': 0.45.5
+      '@unocss/preset-mini': 0.45.5
     dev: true
 
-  /@unocss/reset/0.44.7:
-    resolution: {integrity: sha512-izmqZafDMClT1vQEGpPzfKWvyft8xkA33xC0r0iOWEiDd94+wlC+7ohSnsafyl0iwEuwPp/ONzDft5ouHrOWLA==}
+  /@unocss/reset/0.45.5:
+    resolution: {integrity: sha512-JDFRoc1H0Tk1knRGI+LljOKrKkWrF1txJ50DG3oa+azTdQaX0wDQ4isyDM6PbodydhEqYCsZcJEL/2pEiPRg8A==}
     dev: true
 
-  /@unocss/scope/0.44.7:
-    resolution: {integrity: sha512-E6kqHWfJpm3TXHj9KWs23oVEzknVAUfqbDpGYxh9JYG+hIvbYQdrBpIXNspodxQllNeQtGrtkQ8/PrHDo/3hpw==}
+  /@unocss/scope/0.45.5:
+    resolution: {integrity: sha512-+7PPbxxVp/k27YyBVSM/euKnB65KtaXA4iYHiDWRja235RnnsZ7XcSZ78o5hDuOA3dnqZU+d4rV5rt1tGy6XJA==}
     dev: true
 
-  /@unocss/transformer-compile-class/0.44.7:
-    resolution: {integrity: sha512-LwyjtdHIrgX6AREKiPmXSXjXclSUSnY/cHXSlwTqfs3Q0bkp6voFNG2CzhJF5xMoMa27ZszpvACbZG5CIZYOuA==}
+  /@unocss/transformer-attributify-jsx/0.45.5:
+    resolution: {integrity: sha512-e4l5G7ZLhSeIkHM6mo6KfXZbQDi6XFcTNQRJStXF6t2UjqABAtR/jLCUzkyK7khaLE4QxduRhCHCfR/VyYvCyg==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/transformer-directives/0.44.7:
-    resolution: {integrity: sha512-tDjFHfjpoaru/e468Nhhz+5ofdJY46mYgamF1n98RDLtH1hnKxS+PvD4mm0AxsY5NJ20hLUihzFbN0Mnuos4Ew==}
+  /@unocss/transformer-compile-class/0.45.5:
+    resolution: {integrity: sha512-R08rLO3XZyk5g1BQ01GT+0AuztVpj+g6e+B+4NeoMF3LhShA4Zg+yqn7awa2d5/1tXwpMYO4kwyBFZzQf0WzBw==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
+    dev: true
+
+  /@unocss/transformer-directives/0.45.5:
+    resolution: {integrity: sha512-k+QZetHGcSmxXMlE2UfkfnzFJ865FBxnT5EZCU/dlL1B2momDi19n2q0Hc9DnX/GjbLtrzurQFrq+Xy4gQ7HcA==}
+    dependencies:
+      '@unocss/core': 0.45.5
       css-tree: 2.1.0
     dev: true
 
-  /@unocss/transformer-variant-group/0.44.7:
-    resolution: {integrity: sha512-f5tJZ8rfpix245JgcezqjtvWC9wkc9Sdg0R/2yb3fyPBLGNonYGqAp2GViqmVo8UsFerullpKeUCmCSk8gCyFg==}
+  /@unocss/transformer-variant-group/0.45.5:
+    resolution: {integrity: sha512-Qp0g+9U//cXV7u6dojXw3tafs1saRW+nViMdfCjEKWz3TStFssI9IAhwg5wIZoYYLSSCVMfBTc96OkDvO1m9rA==}
     dependencies:
-      '@unocss/core': 0.44.7
+      '@unocss/core': 0.45.5
     dev: true
 
-  /@unocss/vite/0.44.7_vite@3.0.2:
-    resolution: {integrity: sha512-RjOB+Yv2bg/p5NOzwXDYap0fl7m+1VmIfej8Afceisy0mDL1NniGISiA0pQjOhUewPdSaBDpRXxlpoDGnYaPjw==}
+  /@unocss/vite/0.45.5_vite@3.0.4:
+    resolution: {integrity: sha512-QVNj9xDBJ46RC1D+rSFiGWywazq6z7MVszrpifCACtA8qKdWbrWuI8beEpfo3pBpf7uYFIb+Df6CU9gCD809Og==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0
     dependencies:
       '@ampproject/remapping': 2.2.0
       '@rollup/pluginutils': 4.2.1
-      '@unocss/config': 0.44.7
-      '@unocss/core': 0.44.7
-      '@unocss/inspector': 0.44.7
-      '@unocss/scope': 0.44.7
-      '@unocss/transformer-directives': 0.44.7
+      '@unocss/config': 0.45.5
+      '@unocss/core': 0.45.5
+      '@unocss/inspector': 0.45.5
+      '@unocss/scope': 0.45.5
+      '@unocss/transformer-directives': 0.45.5
       magic-string: 0.26.2
-      vite: 3.0.2
+      vite: 3.0.4
     dev: true
 
   /@vercel/nft/0.20.1:
@@ -2561,7 +2573,7 @@ packages:
       css-selector-tokenizer: 0.8.0
       postcss: 8.4.14
       postcss-js: 4.0.0_postcss@8.4.14
-      tailwindcss: 3.1.6
+      tailwindcss: 3.1.8
     transitivePeerDependencies:
       - ts-node
     dev: true
@@ -2991,22 +3003,22 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-prettier/8.5.0_eslint@8.20.0:
+  /eslint-config-prettier/8.5.0_eslint@8.21.0:
     resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.20.0
+      eslint: 8.21.0
     dev: true
 
-  /eslint-plugin-svelte3/4.0.0_piwa6j2njmnknm35bh3wz5v52y:
+  /eslint-plugin-svelte3/4.0.0_a7wk4ghvg4hia4trwaglu7p6cq:
     resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==}
     peerDependencies:
       eslint: '>=8.0.0'
       svelte: ^3.2.0
     dependencies:
-      eslint: 8.20.0
+      eslint: 8.21.0
       svelte: 3.49.0
     dev: true
 
@@ -3026,13 +3038,13 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-utils/3.0.0_eslint@8.20.0:
+  /eslint-utils/3.0.0_eslint@8.21.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
     peerDependencies:
       eslint: '>=5'
     dependencies:
-      eslint: 8.20.0
+      eslint: 8.21.0
       eslint-visitor-keys: 2.1.0
     dev: true
 
@@ -3046,13 +3058,14 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint/8.20.0:
-    resolution: {integrity: sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==}
+  /eslint/8.21.0:
+    resolution: {integrity: sha512-/XJ1+Qurf1T9G2M5IHrsjp+xrGT73RZf23xA1z5wB1ZzzEAWSZKvRwhWxTFp1rvkvCfwcvAUNAP31bhKTTGfDA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
       '@eslint/eslintrc': 1.3.0
-      '@humanwhocodes/config-array': 0.9.5
+      '@humanwhocodes/config-array': 0.10.4
+      '@humanwhocodes/gitignore-to-minimatch': 1.0.2
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
@@ -3060,16 +3073,19 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.1.1
-      eslint-utils: 3.0.0_eslint@8.20.0
+      eslint-utils: 3.0.0_eslint@8.21.0
       eslint-visitor-keys: 3.3.0
-      espree: 9.3.2
+      espree: 9.3.3
       esquery: 1.4.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
+      find-up: 5.0.0
       functional-red-black-tree: 1.0.1
       glob-parent: 6.0.2
       globals: 13.17.0
+      globby: 11.1.0
+      grapheme-splitter: 1.0.4
       ignore: 5.2.0
       import-fresh: 3.3.0
       imurmurhash: 0.1.4
@@ -3090,8 +3106,8 @@ packages:
       - supports-color
     dev: true
 
-  /espree/9.3.2:
-    resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
+  /espree/9.3.3:
+    resolution: {integrity: sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       acorn: 8.8.0
@@ -3196,6 +3212,10 @@ packages:
     resolution: {integrity: sha512-E9VwROet683ky1b3RuuLbfSaUD5lFlr5oT3dZr7eObA08zzhh+FFwacGPqsvPhW0nm175bkmpNHWwDDkFMNXMg==}
     dev: true
 
+  /fff-flavored-frontmatter/0.2.1:
+    resolution: {integrity: sha512-e67ykDJbD00kqsBYvEZWMykcKDat1UtF0Vxi5CKhBad2V+FK3JGpqg8eUEtK7jao/UkPS0iyfKvSpZ67VXWQlQ==}
+    dev: true
+
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3410,6 +3430,10 @@ packages:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
 
+  /grapheme-splitter/1.0.4:
+    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
+    dev: true
+
   /gzip-size/6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -3712,7 +3736,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 18.0.6
+      '@types/node': 18.6.4
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -4463,8 +4487,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /pathe/0.3.2:
-    resolution: {integrity: sha512-qhnmX0TOqlCvdWWTkoM83wh5J8fZ2yhbDEc9MlsnAEtEc+JCwxUKEwmd6pkY9hRe6JR1Uecbc14VcAKX2yFSTA==}
+  /pathe/0.3.3:
+    resolution: {integrity: sha512-x3nrPvG0HDSDzUiJ0WqtzhN4MD+h5B+dFJ3/qyxVuARlr4Y3aJv8gri2cZzp9Z8sGs2a+aG9gNbKngh3gme57A==}
     dev: true
 
   /perfect-debounce/0.1.3:
@@ -5611,8 +5635,8 @@ packages:
       stable: 0.1.8
     dev: true
 
-  /tailwindcss/3.1.6:
-    resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
+  /tailwindcss/3.1.8:
+    resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     dependencies:
@@ -5867,30 +5891,31 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss/0.44.7_vite@3.0.2:
-    resolution: {integrity: sha512-4XQZAZ7F5gFi30Dn4e7PdxYc2BVTBtrkXA5QzHgmBy/RqNoM5kEuQwsooEVEMl6Cp3Q+vHuQCueVffOBHUl9rQ==}
+  /unocss/0.45.5_vite@3.0.4:
+    resolution: {integrity: sha512-dHmyAnTnkoffgXHjWpJIK2iwCDK9HEWkdHrz+Wh114G/ZcX3vQWlpnvboo36oW0V37UaqbId5ajwHRHE6SNo4g==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.44.7
+      '@unocss/webpack': 0.45.5
     peerDependenciesMeta:
       '@unocss/webpack':
         optional: true
     dependencies:
-      '@unocss/cli': 0.44.7
-      '@unocss/core': 0.44.7
-      '@unocss/preset-attributify': 0.44.7
-      '@unocss/preset-icons': 0.44.7
-      '@unocss/preset-mini': 0.44.7
-      '@unocss/preset-tagify': 0.44.7
-      '@unocss/preset-typography': 0.44.7
-      '@unocss/preset-uno': 0.44.7
-      '@unocss/preset-web-fonts': 0.44.7
-      '@unocss/preset-wind': 0.44.7
-      '@unocss/reset': 0.44.7
-      '@unocss/transformer-compile-class': 0.44.7
-      '@unocss/transformer-directives': 0.44.7
-      '@unocss/transformer-variant-group': 0.44.7
-      '@unocss/vite': 0.44.7_vite@3.0.2
+      '@unocss/cli': 0.45.5
+      '@unocss/core': 0.45.5
+      '@unocss/preset-attributify': 0.45.5
+      '@unocss/preset-icons': 0.45.5
+      '@unocss/preset-mini': 0.45.5
+      '@unocss/preset-tagify': 0.45.5
+      '@unocss/preset-typography': 0.45.5
+      '@unocss/preset-uno': 0.45.5
+      '@unocss/preset-web-fonts': 0.45.5
+      '@unocss/preset-wind': 0.45.5
+      '@unocss/reset': 0.45.5
+      '@unocss/transformer-attributify-jsx': 0.45.5
+      '@unocss/transformer-compile-class': 0.45.5
+      '@unocss/transformer-directives': 0.45.5
+      '@unocss/transformer-variant-group': 0.45.5
+      '@unocss/vite': 0.45.5_vite@3.0.4
     transitivePeerDependencies:
       - supports-color
       - vite
@@ -5967,7 +5992,7 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-plugin-pwa/0.12.3_vite@3.0.2:
+  /vite-plugin-pwa/0.12.3_vite@3.0.4:
     resolution: {integrity: sha512-gmYdIVXpmBuNjzbJFPZFzxWYrX4lHqwMAlOtjmXBbxApiHjx9QPXKQPJjSpeTeosLKvVbNcKSAAhfxMda0QVNQ==}
     peerDependencies:
       vite: ^2.0.0 || ^3.0.0-0
@@ -5976,16 +6001,16 @@ packages:
       fast-glob: 3.2.11
       pretty-bytes: 6.0.0
       rollup: 2.77.0
-      vite: 3.0.2
+      vite: 3.0.4
       workbox-build: 6.5.3
-      workbox-window: 6.5.3
+      workbox-window: 6.5.4
     transitivePeerDependencies:
       - '@types/babel__core'
       - supports-color
     dev: true
 
-  /vite/3.0.2:
-    resolution: {integrity: sha512-TAqydxW/w0U5AoL5AsD9DApTvGb2iNbGs3sN4u2VdT1GFkQVUfgUldt+t08TZgi23uIauh1TUOQJALduo9GXqw==}
+  /vite/3.0.4:
+    resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -6147,6 +6172,10 @@ packages:
     resolution: {integrity: sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q==}
     dev: true
 
+  /workbox-core/6.5.4:
+    resolution: {integrity: sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==}
+    dev: true
+
   /workbox-expiration/6.5.3:
     resolution: {integrity: sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==}
     dependencies:
@@ -6224,6 +6253,13 @@ packages:
       workbox-core: 6.5.3
     dev: true
 
+  /workbox-window/6.5.4:
+    resolution: {integrity: sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==}
+    dependencies:
+      '@types/trusted-types': 2.0.2
+      workbox-core: 6.5.4
+    dev: true
+
   /worktop/0.8.0-next.14:
     resolution: {integrity: sha512-RZgqHu1w/JcUdWOE/BUEAzarrUUHh39eWkLdX8XpA6MfgLJF6X5Vl26CV7/wcm4O/UpZvHMGJUtB9eYTqDjc9g==}
     engines: {node: '>=12'}
diff --git a/src/app.d.ts b/src/app.d.ts
index 9f0754ad..9602f9ae 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,91 +1,88 @@
 /// <reference types="@sveltejs/kit" />
 
+import { FFFBase, FFFExtra } from 'fff-flavored-frontmatter'
+
 interface ImportMetaEnv extends Readonly<Record<string, string>> {
   readonly URARA_SITE_DOMAIN?: string
 }
 
 interface ImportMeta {
-  globEager<Module = { [key: string]: unknown }>(pattern: string): Record<string, Module>
+  glob<Module = { [key: string]: unknown }>(pattern: string): Record<string, Module>
   readonly env: ImportMetaEnv
 }
 
 declare global {
   namespace Urara {
     namespace Post {
-      interface Article {
-        layout: 'article'
-        /** post photo */
-        photo?: string
-        /** post photo alternative */
-        alt?: string
-        /** table of content - auto generated or set `false` to disable */
-        toc?: false | Article.Toc[]
-      }
-      namespace Article {
-        interface Toc {
-          depth?: number
-          title?: string
-          slug?: string
-          children?: Toc[]
+      type Frontmatter = Omit<FFFBase, 'created' | 'updated' | 'image' | 'audio' | 'video' | 'flags'> &
+        Pick<FFFExtra, 'in_reply_to'> & {
+          /**
+           * post type.
+           * @remarks auto-generated
+           */
+          type: 'article' | 'note' | 'photo' | 'reply' | 'audio' | 'video' | 'like' | 'repost' | 'bookmark'
+          /**
+           * post layout.
+           */
+          layout?: 'article' | 'note' | 'photo' | 'reply'
+          /**
+           * post path.
+           * @remarks auto-generated
+           */
+          path: string
+          /**
+           * post slug.
+           * @remarks auto-generated
+           */
+          slug: string
+          /**
+           * table of contents.
+           * @remarks auto-generated, article-only, set to `false` to disable
+           */
+          toc?: false | Toc[]
+          /**
+           * the created date of the post.
+           * @remarks auto-generated or set manually
+           */
+          created: string
+          /**
+           * the updated date of the post.
+           * @remarks auto-generated or set manually
+           */
+          updated: string
+          /**
+           * the featured image for article, or image for "photo" / "multi-photo" posts.
+           * @remarks currently only supports string
+           */
+          image?: string
+          /** enable some advanced features.
+           * @property hidden - deprecated, transfer to `unlisted`
+           * @property unlisted - hide this post from the homepage and feed.
+           * @property bridgy-fed - add a link to Bridgy Fed in the post. https://fed.brid.gy/
+           * @property bridgy-{target} - add a link to Bridgy in the post. https://brid.gy/publish/{target}
+           */
+          flags?: string[]
         }
-      }
-      interface Note {
-        layout: 'note'
-      }
-      interface Photo {
-        layout: 'photo'
-        /** post photo */
-        photo?: string
-        /** post photo alternative */
-        alt?: string
-      }
-      interface Reply {
-        layout: 'reply'
-        /** u-in-reply-to */
-        inReplyTo?: string | string[]
-      }
-      interface Common {
-        /** @deprecated - do not use */
-        priority?: never
-        /** @deprecated - transfer to `created` */
-        date?: string
-        /** @deprecated - transfer to `updated` */
-        lastmod?: string
-        /** @deprecated - transfer to `summary` */
-        descr?: never
-        /** @deprecated - transfer to `photo` */
-        cover?: never
-        /** post path - auto generated */
-        path?: string
-        /** post slug - auto generated */
-        slug?: string
-        /** created time - auto generated or set manually */
-        created?: string
-        /** updated time - auto generated or set manually */
-        updated?: string
-        /** published time */
-        published?: string
-        /** post title */
+      type Toc = {
+        depth: number
         title?: string
-        /** post summary */
-        summary?: string
-        /** post tags */
-        tags?: string[]
-        /** enable some advanced features.
-         * @property hidden - deprecated, transfer to `unlisted`
-         * @property unlisted - hide this post from the homepage and feed.
-         * @property bridgy-fed - add a link to Bridgy Fed in the post. https://fed.brid.gy/
-         * @property bridgy-{target} - add a link to Bridgy in the post. https://brid.gy/publish/{target}
-         */
-        flags?: string[]
+        slug?: string
+        children?: Toc[]
       }
-      type Metadata = Common & (Article | Note | Photo | Reply)
       interface Module {
-        default: { render: () => { html: string; head: string; css: { code: string } } }
-        metadata: Metadata
+        default: {
+          render: () => {
+            html: string
+            head: string
+            css: {
+              code: string
+            }
+          }
+        }
+        metadata: Frontmatter
       }
     }
-    type Post = Post.Metadata & { html?: string }
+    type Post = Post.Frontmatter & { html?: string }
     type Page = { title?: string; path: string }
   }
 }
diff --git a/src/lib/components/comments/giscus.svelte b/src/lib/components/comments/giscus.svelte
index 9de02766..23f2eab5 100644
--- a/src/lib/components/comments/giscus.svelte
+++ b/src/lib/components/comments/giscus.svelte
@@ -23,13 +23,13 @@
     }).forEach(([key, value]) => giscus.setAttribute(key, value))
     setTimeout(() => {
       const observer = new MutationObserver(() => {
-        document.getElementById('giscus-loading').remove()
+        document.getElementById('giscus-loading')!.remove()
         observer.disconnect()
       })
-      observer.observe(document.getElementById('giscus'), {
+      observer.observe(document.getElementById('giscus')!, {
         childList: true
       })
-      document.getElementById('giscus-container').appendChild(giscus)
+      document.getElementById('giscus-container')!.appendChild(giscus)
     }, 1000)
   })
 </script>
@@ -37,4 +37,4 @@
 <div id="giscus-container">
   <button id="giscus-loading" class="btn btn-lg flex mx-auto my-4 btn-ghost btn-circle loading" />
   <div id="giscus" class="giscus" />
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/comments/utterances.svelte b/src/lib/components/comments/utterances.svelte
index 8d9bd7f0..c4784aee 100644
--- a/src/lib/components/comments/utterances.svelte
+++ b/src/lib/components/comments/utterances.svelte
@@ -16,13 +16,13 @@
     }).forEach(([key, value]) => utterances.setAttribute(key, value))
     setTimeout(() => {
       const observer = new MutationObserver(() => {
-        document.getElementById('utterances-loading').remove()
+        document.getElementById('utterances-loading')!.remove()
         observer.disconnect()
       })
-      observer.observe(document.getElementById('utterances'), {
+      observer.observe(document.getElementById('utterances')!, {
         childList: true
       })
-      document.getElementById('utterances-container').appendChild(utterances)
+      document.getElementById('utterances-container')!.appendChild(utterances)
     }, 1000)
   })
 </script>
@@ -30,4 +30,4 @@
 <div id="utterances-container">
   <button id="utterances-loading" class="btn btn-lg flex mx-auto my-4 btn-ghost btn-circle loading" />
   <div id="utterances" class="utterances" />
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/comments/webmention.svelte b/src/lib/components/comments/webmention.svelte
index 942ae359..c570802f 100644
--- a/src/lib/components/comments/webmention.svelte
+++ b/src/lib/components/comments/webmention.svelte
@@ -20,9 +20,11 @@
     }
     content?: {
       html?: string
+      text?: string
     }
     rsvp?: string
     published?: string
+    'wm-received': string
     'wm-source': string
     'wm-target': string
     'wm-id': number
@@ -30,7 +32,7 @@
     'wm-private': boolean
   }
 
-  let [page, loaded, end, mentions, sortDirUp] = [0, false, false, [], config?.sortDir === 'up' ? true : false]
+  let [page, loaded, end, mentions, sortDirUp]: [number, boolean, boolean, WebmentionEntry[], boolean] = [0, false, false, [], config?.sortDir === 'up' ? true : false]
 
   const load = async () =>
     await fetch(
@@ -47,7 +49,7 @@
           ...feed,
           children: feed.children.filter(
             (entry: WebmentionEntry) =>
-              !(config?.blockList?.length > 0 && config.blockList.includes(new URL(entry['wm-source']).origin))
+              !config.blockList?.includes(new URL(entry['wm-source']).origin)
           )
         }
         if (feed.children.length > 0) mentions = [...mentions, ...feed.children]
@@ -95,7 +97,7 @@
         'mention-of': ['💬 mentioned', 'border-base-300/50', 'text-base-content', 'tooltip-base-content'],
         rsvp: [
           `📅 RSVPed ${
-            {
+            mention.rsvp && {
               yes: '✅',
               no: '❌',
               interested: '💡',
@@ -194,4 +196,4 @@
       </div>
     </form>
   {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/extra/alert.svelte b/src/lib/components/extra/alert.svelte
index 0d853275..6de23822 100644
--- a/src/lib/components/extra/alert.svelte
+++ b/src/lib/components/extra/alert.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  export let title: string = undefined
-  export let description: string = undefined
-  export let status: 'info' | 'success' | 'warning' | 'error' = undefined
+  export let title: string | undefined = undefined
+  export let description: string | undefined = undefined
+  export let status: 'info' | 'success' | 'warning' | 'error' | undefined = undefined
 </script>
 
 <div
@@ -32,4 +32,4 @@
       <slot />
     </div>
   {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/extra/profile.svelte b/src/lib/components/extra/profile.svelte
index f56dcb2e..12166973 100644
--- a/src/lib/components/extra/profile.svelte
+++ b/src/lib/components/extra/profile.svelte
@@ -19,7 +19,7 @@
     <div class="rounded-full border-2 border-white shadow-xl w-16 h-16">
       <img
         class="hover:rotate-[360deg] transition-transform duration-1000 ease-in-out m-0"
-        src={avatar ?? site.author.photo}
+        src={avatar ?? site.author.avatar}
         alt={name ?? site.author.name}
         loading="lazy"
         decoding="async" />
diff --git a/src/lib/components/footer.svelte b/src/lib/components/footer.svelte
index 34598d2e..6b36f791 100644
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { site } from '$lib/config/site'
   import { footer as footerConfig } from '$lib/config/general'
-  let className: string = undefined
+  let className: string | undefined = undefined
   export { className as class }
   export let sticky: boolean = false
   export let rounded: boolean = false
@@ -33,7 +33,7 @@
         rel="noopener external"
         target="_blank"
         class="tooltip tooltip-secondary hover:text-secondary"
-        data-tip="🌸 [γ] - Based on MDsveX & SvelteKit 🌸"
+        data-tip="🌸 [δ] - Based on MDsveX & SvelteKit 🌸"
         href="https://github.com/importantimport/urara">
         Urara
       </a>
@@ -43,4 +43,4 @@
       {/if}
     </p>
   </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/src/lib/components/head.svelte b/src/lib/components/head.svelte
index 1e928a93..033af6bd 100644
--- a/src/lib/components/head.svelte
+++ b/src/lib/components/head.svelte
@@ -3,18 +3,18 @@
   import { head } from '$lib/config/general'
   import { site } from '$lib/config/site'
   import OpenGraph from '$lib/components/head_opengraph.svelte'
-  export let post: Urara.Post = undefined
-  export let page: Urara.Page = undefined
+  export let post: Urara.Post | undefined = undefined
+  export let page: Urara.Page | undefined = undefined
 </script>
 
 <svelte:head>
   <meta name="author" content={site.author?.name} />
   {#if post}
     <link rel="canonical" href={site.protocol + site.domain + post.path} />
-    {#if post.layout === 'article'}
-      <title>{post.title ?? post.path.slice(1)} | {site.title}</title>
-    {:else if post.layout === 'note'}
-      <title>{post.path.slice(1)} | {site.title}</title>
+    {#if post.type === 'article'}
+      <title>{post.title} | {site.title}</title>
+    {:else if post.type === 'note'}
+      <title>{post.summary ?? post.path.slice(1)} | {site.title}</title>
     {/if}
     {#if post.tags}<meta name="keywords" content={post.tags.join(', ')} />{/if}
     {#if post.summary}<meta name="description" content={post.summary} />{/if}
@@ -36,4 +36,4 @@
   {/if}
 </svelte:head>
 
-<OpenGraph {post} {page} />
+<OpenGraph {post} {page} />
\ No newline at end of file
diff --git a/src/lib/components/head_opengraph.svelte b/src/lib/components/head_opengraph.svelte
index 4ed2986a..64c8f814 100644
--- a/src/lib/components/head_opengraph.svelte
+++ b/src/lib/components/head_opengraph.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { site } from '$lib/config/site'
   import { any, maskable } from '$lib/config/icon'
-  export let post: Urara.Post = undefined
-  export let page: Urara.Page = undefined
+  export let post: Urara.Post | undefined = undefined
+  export let page: Urara.Page | undefined = undefined
 </script>
 
 <svelte:head>
@@ -20,8 +20,8 @@
       {#if post.summary}
         <meta property="og:description" content={post.summary} />
       {/if}
-      {#if post.photo}
-        <meta property="og:image" content={site.protocol + site.domain + post.photo} />
+      {#if post.image}
+        <meta property="og:image" content={site.protocol + site.domain + post.image} />
         <meta name="twitter:card" content="summary_large_image" />
       {:else}
         <meta property="og:image" content={maskable['512'].src ?? any['512'].src ?? any['192'].src} />
@@ -47,4 +47,4 @@
       <meta property="og:url" content={site.protocol + site.domain} />
     {/if}
   {/if}
-</svelte:head>
+</svelte:head>
\ No newline at end of file
diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
index 37b4c5ba..125b75fe 100644
--- a/src/lib/components/header.svelte
+++ b/src/lib/components/header.svelte
@@ -53,8 +53,8 @@
 <header
   id="header"
   class:-translate-y-32={!pin && scrollY > 0}
-  class="fixed z-50 w-screen bg-base-100/30 md:bg-base-200/30 transition-all duration-500 ease-in-out border-b-2 border-transparent max-h-[4.125rem] {scrollY >
-    32 && 'backdrop-blur border-base-content/10'}">
+ class="fixed z-50 w-screen transition-all duration-500 ease-in-out border-b-2 border-transparent max-h-[4.125rem] {scrollY >
+    32 && 'backdrop-blur border-base-content/10 bg-base-100/30 md:bg-base-200/30'}">
   <div in:fly={{ x: -50, duration: 300, delay: 300 }} out:fly={{ x: -50, duration: 300 }} class="navbar">
     <div class="navbar-start">
       {#if headerConfig.nav}
@@ -122,10 +122,10 @@
   class:opacity-100={scrollY}>
   <div
     class="radial-progress text-accent transition-all duration-500 ease-in-out group-hover:text-accent-focus col-start-1 row-start-1"
-    style={`--size:4rem; --thickness: 0.25rem; --value:${percent};"`} />
+     style={`--size:4rem; --thickness: 0.25rem; --value:${percent};`} />
   <div
     class:border-transparent={percent > 95}
     class="border-4 border-base-content/10 group-hover:border-transparent col-start-1 row-start-1 rounded-full w-full h-full p-4 grid duration-500 ease-in-out">
-    <span class="i-heroicons-solid-chevron-up" />
+     <span class="i-heroicons-solid-chevron-up !w-6 !h-6" />
   </div>
 </button>
diff --git a/src/lib/components/index_post.svelte b/src/lib/components/index_post.svelte
deleted file mode 100644
index a3b82a8a..00000000
--- a/src/lib/components/index_post.svelte
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-  import Status from '$lib/components/post_status.svelte'
-  import Reply from '$lib/components/post_reply.svelte'
-  import Image from '$lib/components/prose/img.svelte'
-  export let post: Urara.Post
-  export let loading: 'eager' | 'lazy' = 'lazy'
-  export let decoding: 'async' | 'sync' | 'auto' = 'async'
-</script>
-
-{#if post.layout === 'photo'}
-  <article
-    itemscope
-    itemtype="https://schema.org/BlogPosting"
-    itemprop="blogPost"
-    class="h-entry card image-full before:!bg-transparent bg-base-100 rounded-none md:rounded-box">
-    <figure>
-      <Image
-        class="u-photo object-cover object-center h-full w-full"
-        src={post.photo}
-        alt={post.alt ?? post.photo}
-        {loading}
-        {decoding} />
-      {#if post.alt}
-        <figcaption>{@html post.alt}</figcaption>
-      {/if}
-    </figure>
-    <div class="card-body mt-auto">
-      <Status {post} index={true} />
-    </div>
-  </article>
-{:else}
-  <article
-    itemscope
-    itemtype="https://schema.org/BlogPosting"
-    itemprop="blogPost"
-    class="h-entry card bg-base-100  rounded-none md:rounded-box group {post.layout === 'article' && post.photo
-      ? 'image-full before:!rounded-none'
-      : ''}">
-    {#if post.layout === 'article' && post.photo}
-      <figure class="!block">
-        <Image
-          class="u-featured object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out"
-          src={post.photo}
-          alt={post.alt ?? post.photo}
-          {loading}
-          {decoding} />
-        {#if post.alt}
-          <figcaption>{@html post.alt}</figcaption>
-        {/if}
-      </figure>
-    {/if}
-    <div
-      class="card-body {post.layout === 'article' && post.photo
-        ? 'md:col-start-1 md:row-start-1 md:text-neutral-content md:z-20'
-        : ''}">
-      {#if post.layout === 'reply'}
-        <Reply inReplyTo={post.inReplyTo} class="-mt-4 -mx-4 mb-4" />
-      {/if}
-      <Status {post} index={true} />
-      {#if post.layout === 'article'}
-        <h1
-          itemprop="name headline"
-          class="card-title text-2xl mr-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-4 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
-          <a itemprop="url" class="u-url p-name" href={post.path}>{post.title ?? post.path.slice(1)}</a>
-        </h1>
-        {#if post.summary}
-          <p itemprop="description" class="p-summary mb-auto">{post.summary}</p>
-        {/if}
-      {/if}
-      {@html post.html}
-    </div>
-  </article>
-{/if}
diff --git a/src/lib/components/index_profile.svelte b/src/lib/components/index_profile.svelte
index 6fe6c3a5..03b2b435 100644
--- a/src/lib/components/index_profile.svelte
+++ b/src/lib/components/index_profile.svelte
@@ -4,12 +4,12 @@
 
 <div class="sticky flex flex-row gap-4 xl:flex-col top-24 card card-body items-right h-card">
   <a href={site.protocol + site.domain} class="hidden u-url" rel="me">{site.title}</a>
-  {#if site.author.photo}
-    <img class="hidden u-photo" src={site.author.photo} alt={site.author.name} decoding="async" loading="lazy" />
+  {#if site.author.avatar}
+    <img class="hidden u-photo" src={site.author.avatar} alt={site.author.name} decoding="async" loading="lazy" />
     <div class="justify-end flex-none w-32 h-32 my-auto ml-auto avatar">
       <img
         class="rounded-full shadow-xl w-32 h-32 hover:rotate-[360deg] transition-transform duration-1000 ease-in-out"
-        src={site.author.photo}
+         src={site.author.avatar}
         alt={site.author.name} />
       {#if site.author.status}
         <div class="heart absolute rounded-full w-10 h-10 bottom-0 right-0 bg-base-100 shadow-xl text-xl text-center py-1.5">
diff --git a/src/lib/components/layouts/_post.svelte b/src/lib/components/layouts/_post.svelte
deleted file mode 100644
index cbbca12f..00000000
--- a/src/lib/components/layouts/_post.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script lang="ts">
-  import { fly } from 'svelte/transition'
-  import { browser } from '$app/env'
-  import { posts as storedPosts } from '$lib/stores/posts'
-  import { title as storedTitle } from '$lib/stores/title'
-  import { post as postConfig } from '$lib/config/post'
-  import Status from '$lib/components/post_status.svelte'
-  import Pagination from '$lib/components/post_pagination.svelte'
-  import Action from '$lib/components/post_action.svelte'
-  import Comment from '$lib/components/post_comment.svelte'
-  import Footer from '$lib/components/footer.svelte'
-  import { onMount } from 'svelte'
-  import { copyCode } from '$lib/utils/copyCode'
-  export let post: Urara.Post
-
-  let index: number
-  let prev: Urara.Post
-  let next: Urara.Post
-
-  $: if (browser)
-    storedPosts.subscribe((storedPosts: Urara.Post[]) => {
-      index = storedPosts.findIndex(storedPost => storedPost.path === post.path)
-      prev = storedPosts
-        .slice(0, index)
-        .reverse()
-        .find(post => !post.flags?.includes('unlisted'))
-      next = storedPosts.slice(index + 1).find(post => !post.flags?.includes('unlisted'))
-      storedTitle.set(post.title)
-    })
-
-  onMount(() => {
-    copyCode()
-  })
-</script>
-
-<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap">
-  <div
-    in:fly={{ x: 25, duration: 300, delay: 500 }}
-    out:fly={{ x: 25, duration: 300 }}
-    class="flex-1 w-full max-w-screen-md order-first ease-out transform mx-auto xl:mr-0">
-    {#if browser}
-      <Action {post} />
-    {/if}
-  </div>
-  <div
-    in:fly={{ x: -25, duration: 300, delay: 500 }}
-    out:fly={{ x: -25, duration: 300 }}
-    class="flex-1 w-full max-w-screen-md xl:order-last ease-out transform mx-auto xl:mr-0">
-    <slot name="right" />
-  </div>
-  <div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0">
-    <div class="card bg-base-100 rounded-none md:rounded-box md:shadow-xl md:mb-8 lg:mb-16 z-10">
-      <article itemscope itemtype="https://schema.org/BlogPosting" class="h-entry">
-        {#if postConfig.bridgy}
-          <div id="bridgy" class="hidden">
-            {#each post.flags?.some( flag => flag.startsWith('bridgy') ) ? post.flags.flatMap( flag => (flag.startsWith('bridgy') ? flag.slice(7) : []) ) : [...(postConfig.bridgy.post ?? []), ...(postConfig.bridgy[post.layout] ?? [])] as target}
-              {#if target === 'fed'}
-                <a href="https://fed.brid.gy/">fed</a>
-              {:else}
-                <a href="https://brid.gy/publish/{target}">{target}</a>
-              {/if}
-            {/each}
-          </div>
-        {/if}
-        <slot name="top" />
-        <div class="card-body gap-0">
-          <div class="flex flex-col">
-            {#if $$slots.middle}
-              <slot name="middle" />
-            {:else}
-              <!-- legacy fallback -->
-              <slot name="middle-top" />
-              <Status {post} />
-              <slot name="middle-bottom" />
-            {/if}
-          </div>
-          <slot name="content" />
-          {#if post.tags}
-            <div class="divider mt-4 mb-0" />
-            <div>
-              {#each post.tags as tag}
-                <a href="/?tags={tag}" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">
-                  #{tag}
-                </a>
-              {/each}
-            </div>
-          {/if}
-        </div>
-      </article>
-      {#if (prev || next) && !post.flags?.includes('pagination-disabled') && !post.flags?.includes('unlisted')}
-        <Pagination {next} {prev} />
-      {/if}
-      {#if browser && postConfig.comment && !post.flags?.includes('comment-disabled')}
-        <Comment {post} config={postConfig.comment} />
-      {/if}
-    </div>
-    <Footer sticky={true} />
-  </div>
-</div>
diff --git a/src/lib/components/layouts/article.svelte b/src/lib/components/layouts/article.svelte
deleted file mode 100644
index d59404c7..00000000
--- a/src/lib/components/layouts/article.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts" context="module">
-  import Image from '$lib/components/prose/img.svelte'
-  import table from '$lib/components/prose/table.svelte'
-  export { Image as img, table }
-</script>
-
-<script lang="ts">
-  import { browser } from '$app/env'
-  import Head from '$lib/components/head.svelte'
-  import Post from '$lib/components/layouts/_post.svelte'
-  import Status from '$lib/components/post_status.svelte'
-  import Toc from '$lib/components/post_toc.svelte'
-
-  export let path = undefined
-  export let created = undefined
-  export let updated = undefined
-  export let published = undefined
-  export let tags = undefined
-  export let flags = undefined
-
-  export let title = undefined
-  export let summary = undefined
-  export let photo = undefined
-  export let alt = undefined
-  export let toc = undefined
-</script>
-
-<Head post={{ layout: 'article', path, created, updated, published, tags, flags, title, summary, photo, alt, toc }} />
-
-<Post post={{ layout: 'article', path, created, updated, published, tags, flags, title, summary, photo, alt, toc }}>
-  <div slot="right" class="h-full hidden xl:block">
-    {#if browser && toc?.length > 1}
-      <Toc {toc} />
-    {/if}
-  </div>
-  <div slot="middle" class="flex flex-col">
-    {#if photo}
-      <figure class="flex-col gap-2 -mx-4 mb-4 w-auto -mt-8 md:mt-0 md:mb-8 md:order-last">
-        <Image class="u-featured rounded-box w-full shadow-xl" src={photo} alt={alt ?? photo} loading="eager" decoding="auto" />
-        {#if alt}
-          <figcaption>{@html alt}</figcaption>
-        {/if}
-      </figure>
-    {/if}
-    <Status
-      post={{
-        layout: 'article',
-        path,
-        created,
-        updated,
-        published,
-        tags,
-        flags,
-        title,
-        summary,
-        photo,
-        alt,
-        toc
-      }} />
-    <h1 itemprop="name headline" class="card-title text-3xl mt-2 mb-8 p-name">{title ?? path.slice(1)}</h1>
-    {#if summary}
-      <p class="hidden p-summary">{summary}</p>
-    {/if}
-  </div>
-  <main slot="content" itemprop="articleBody" class="urara-prose prose e-content">
-    <slot />
-  </main>
-</Post>
diff --git a/src/lib/components/layouts/note.svelte b/src/lib/components/layouts/note.svelte
deleted file mode 100644
index 23862d10..00000000
--- a/src/lib/components/layouts/note.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" context="module">
-  import Image from '$lib/components/prose/img.svelte'
-  import table from '$lib/components/prose/table.svelte'
-  export { Image as img, table }
-</script>
-
-<script lang="ts">
-  import Head from '$lib/components/head.svelte'
-  import Post from '$lib/components/layouts/_post.svelte'
-
-  export let path = undefined
-  export let created = undefined
-  export let updated = undefined
-  export let published = undefined
-  export let tags = undefined
-  export let flags = undefined
-</script>
-
-<Head post={{ layout: 'note', path, created, updated, published, tags, flags }} />
-
-<Post post={{ layout: 'note', path, created, updated, published, tags, flags }}>
-  <main slot="content" itemprop="articleBody" class="urara-prose prose p-name p-content">
-    <slot />
-  </main>
-</Post>
diff --git a/src/lib/components/layouts/photo.svelte b/src/lib/components/layouts/photo.svelte
deleted file mode 100644
index ae25d356..00000000
--- a/src/lib/components/layouts/photo.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts" context="module">
-  import Image from '$lib/components/prose/img.svelte'
-  import table from '$lib/components/prose/table.svelte'
-  export { Image as img, table }
-</script>
-
-<script lang="ts">
-  import Head from '$lib/components/head.svelte'
-  import Post from '$lib/components/layouts/_post.svelte'
-
-  export let path = undefined
-  export let created = undefined
-  export let updated = undefined
-  export let published = undefined
-  export let tags = undefined
-  export let flags = undefined
-
-  export let photo = undefined
-  export let alt = undefined
-</script>
-
-<Head post={{ layout: 'photo', path, created, updated, published, tags, flags, photo, alt }} />
-
-<Post post={{ layout: 'photo', path, created, updated, published, tags, flags, photo, alt }}>
-  <figure slot="top" class="flex-col gap-2 mx-4 md:mx-0 w-auto">
-    <Image src={photo} alt={alt ?? photo} class="rounded-box w-full shadow-xl" loading="eager" decoding="auto" />
-    {#if alt}
-      <figcaption>{@html alt}</figcaption>
-    {/if}
-  </figure>
-  <main slot="content" itemprop="articleBody" class="urara-prose prose p-name p-content">
-    <slot />
-  </main>
-</Post>
diff --git a/src/lib/components/layouts/reply.svelte b/src/lib/components/layouts/reply.svelte
deleted file mode 100644
index 6917928b..00000000
--- a/src/lib/components/layouts/reply.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts" context="module">
-  import Image from '$lib/components/prose/img.svelte'
-  import table from '$lib/components/prose/table.svelte'
-  export { Image as img, table }
-</script>
-
-<script lang="ts">
-  import Head from '$lib/components/head.svelte'
-  import Post from '$lib/components/layouts/_post.svelte'
-  import Reply from '$lib/components/post_reply.svelte'
-
-  export let created = undefined
-  export let updated = undefined
-  export let published = undefined
-  export let tags = undefined
-  export let path = undefined
-  export let flags = undefined
-
-  export let inReplyTo = undefined
-</script>
-
-<Head post={{ layout: 'reply', path, created, updated, published, tags, flags, inReplyTo }} />
-
-<Post post={{ layout: 'reply', path, created, updated, published, tags, flags, inReplyTo }}>
-  <Reply {inReplyTo} slot="top" class="mt-4 mx-4" />
-  <main slot="content" itemprop="articleBody" class="urara-prose prose p-name p-content">
-    <slot />
-  </main>
-</Post>
diff --git a/src/lib/components/post_action.svelte b/src/lib/components/post_action.svelte
index 5e69c2e6..4b091014 100644
--- a/src/lib/components/post_action.svelte
+++ b/src/lib/components/post_action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let post: Urara.Post
-  const actions = import.meta.globEager('/src/lib/components/actions/*.svelte')
+  const actions = import.meta.glob<{ default: unknown }>('/src/lib/components/actions/*.svelte', { eager: true })
 </script>
 
 <div class="sticky top-24 hidden xl:flex flex-col gap-4 w-fit h-[calc(100vh-12rem)] ml-auto mr-8 my-8 justify-center">
@@ -9,4 +9,4 @@
       <svelte:component this={action.default} {post} />
     {/each}
   {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/post_card.svelte b/src/lib/components/post_card.svelte
new file mode 100644
index 00000000..facd39e7
--- /dev/null
+++ b/src/lib/components/post_card.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import { browser } from '$app/env'
+  import { post as postConfig } from '$lib/config/post'
+  import { posts as storedPosts } from '$lib/stores/posts'
+  import { title as storedTitle } from '$lib/stores/title'
+  import Reply from '$lib/components/post_reply.svelte'
+  import Status from '$lib/components/post_status.svelte'
+  import Image from '$lib/components/prose/img.svelte'
+  import Pagination from '$lib/components/post_pagination.svelte'
+  import Comment from '$lib/components/post_comment.svelte'
+  export let post: Urara.Post
+  export let preview: boolean = false
+  export let loading: 'eager' | 'lazy' = 'lazy'
+  export let decoding: 'async' | 'sync' | 'auto' = 'async'
+  // pagination
+  let index: number
+  let prev: Urara.Post | undefined = undefined
+  let next: Urara.Post | undefined = undefined
+  if (browser && !preview)
+    storedPosts.subscribe((storedPosts: Urara.Post[]) => {
+      index = storedPosts.findIndex(storedPost => storedPost.path === post.path)
+      prev = storedPosts
+        .slice(0, index)
+        .reverse()
+        .find(post => !post.flags?.includes('unlisted'))
+      next = storedPosts.slice(index + 1).find(post => !post.flags?.includes('unlisted'))
+      storedTitle.set(post.title ?? post.path.slice(1))
+    })
+</script>
+
+<svelte:element
+  this={post.type === 'article' ? 'article' : 'div'}
+  itemscope
+  itemtype="https://schema.org/BlogPosting"
+  itemprop="blogPost"
+  class:md:mb-8={!preview}
+  class:lg:mb-16={!preview}
+  class:h-entry={preview}
+  class:group={preview}
+  class:image-full={preview && post.type === 'article' && post.image}
+  class:before:!rounded-none={preview && post.image}
+  class="card bg-base-100 rounded-none md:rounded-box md:shadow-xl z-10">
+  {#if !preview && postConfig.bridgy}
+    <div id="bridgy" class="hidden">
+      {#each post.flags?.some( flag => flag.startsWith('bridgy') ) ? post.flags.flatMap( flag => (flag.startsWith('bridgy') ? flag.slice(7) : []) ) : [...(postConfig.bridgy.post ?? []), ...(postConfig.bridgy[post.type] ?? [])] as target}
+        {#if target === 'fed'}
+          <a href="https://fed.brid.gy/">fed</a>
+        {:else}
+          <a href="https://brid.gy/publish/{target}">{target}</a>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+  {#if post.in_reply_to}
+    <Reply in_reply_to={post.in_reply_to} class="mt-4 mx-4" />
+  {/if}
+  {#if post.image && preview}
+    <figure class={`!block ${post.type === 'photo' ? '' : 'p-4 md:p-0'}`}>
+      <Image
+        class={post.type === 'article'
+          ? 'u-featured object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out'
+          : 'u-photo rounded-xl md:rounded-b-none -mb-6 md:-mb-2'}
+        src={post.image}
+        alt={post.image}
+        {loading}
+        {decoding} />
+    </figure>
+  {/if}
+  <div
+    class={`card-body gap-0 ${
+      preview && post.type === 'article' && post.image ? 'md:col-start-1 md:row-start-1 md:text-neutral-content md:z-20' : ''
+    }`}>
+    <div class="flex flex-col gap-2">
+      {#if post.image && !preview}
+        <figure
+          class={`md:order-last mb-4 ${post.type === 'article' ? 'flex-col gap-2 -mx-4 -mt-8 md:mt-0' : 'flex-col -mx-8'}`}>
+          <Image
+            class={`${post.type === 'article' ? 'u-featured rounded-box shadow-xl' : 'u-photo'}`}
+            src={post.image}
+            alt={post.image}
+            {loading}
+            {decoding} />
+        </figure>
+      {/if}
+      <Status {post} {preview} />
+      {#if post.title}
+        {#if preview}
+          <h2
+            itemprop="name headline"
+            class="card-title text-2xl mr-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-4 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
+            <a itemprop="url" class="u-url p-name" href={post.path}>{post.title ?? post.path.slice(1)}</a>
+          </h2>
+        {:else}
+          <h1 itemprop="name headline" class="card-title text-3xl mb-8 p-name">{post.title ?? post.path.slice(1)}</h1>
+        {/if}
+      {/if}
+      {#if post.summary}
+        <p itemprop="description" class:hidden={!preview || post.type !== 'article'} class="p-summary mb-auto">
+          {post.summary}
+        </p>
+      {/if}
+    </div>
+    <main itemprop="articleBody" class:mt-4={post.type !== 'article'} class="urara-prose prose e-content">
+      {#if !preview}
+        <slot />
+      {:else if post.html}
+        {@html post.html}
+      {/if}
+    </main>
+    {#if !preview && post.tags}
+      <div class="divider mt-4 mb-0" />
+      <div>
+        {#each post.tags as tag}
+          <a href="/?tags={tag}" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">
+            #{tag}
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
+  {#if !preview}
+    {#if (prev || next) && !post.flags?.includes('pagination-disabled') && !post.flags?.includes('unlisted')}
+      <Pagination {next} {prev} />
+    {/if}
+    {#if browser && postConfig.comment && !post.flags?.includes('comment-disabled')}
+      <Comment {post} config={postConfig.comment} />
+    {/if}
+  {/if}
+</svelte:element>
\ No newline at end of file
diff --git a/src/lib/components/post_comment.svelte b/src/lib/components/post_comment.svelte
index 29517ed8..63e024ac 100644
--- a/src/lib/components/post_comment.svelte
+++ b/src/lib/components/post_comment.svelte
@@ -2,10 +2,13 @@
   import type { CommentConfig } from '$lib/types/post'
   import { toSnake } from '$lib/utils/case'
   export let post: Urara.Post
-  export let config: CommentConfig = undefined
-  const comments = import.meta.globEager('/src/lib/components/comments/*.svelte')
-  let currentComment: string = undefined
+  export let config: CommentConfig
+  const comments = import.meta.glob<{ default: unknown }>('/src/lib/components/comments/*.svelte', { eager: true })
+  let currentComment: string | undefined = undefined
+  let currentConfig: unknown | undefined = undefined
   currentComment = localStorage.getItem('comment') ?? toSnake(config.use[0])
+  // @ts-ignore No index signature with a parameter of type 'string' was found on type 'CommentConfig'. ts(7053)
+  $: if (currentComment) currentConfig = config[currentComment]
 </script>
 
 {#if config?.use.length > 0}
@@ -32,8 +35,8 @@
         <svelte:component
           this={comments[`/src/lib/components/comments/${currentComment}.svelte`].default}
           {post}
-          config={config?.[currentComment]} />
+          config={currentConfig} />
       {/key}
     {/if}
   </div>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/post_container.svelte b/src/lib/components/post_container.svelte
new file mode 100644
index 00000000..d01d378a
--- /dev/null
+++ b/src/lib/components/post_container.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { browser } from '$app/env'
+  import Card from '$lib/components/post_card.svelte'
+  import Head from '$lib/components/head.svelte'
+  import Toc from '$lib/components/post_toc.svelte'
+  import Action from '$lib/components/post_action.svelte'
+  import Footer from '$lib/components/footer.svelte'
+  export let post: Urara.Post
+</script>
+
+<Head {post} />
+
+<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap">
+  <div
+    in:fly={{ x: 25, duration: 300, delay: 500 }}
+    out:fly={{ x: 25, duration: 300 }}
+    class="flex-1 w-full max-w-screen-md order-first ease-out transform mx-auto xl:mr-0">
+    {#if browser}
+      <Action {post} />
+    {/if}
+  </div>
+  <div
+    in:fly={{ x: -25, duration: 300, delay: 500 }}
+    out:fly={{ x: -25, duration: 300 }}
+    class="flex-1 w-full max-w-screen-md xl:order-last ease-out transform mx-auto xl:mr-0">
+    {#if browser && post.toc}
+      <div class="h-full hidden xl:block">
+        <Toc toc={post.toc} />
+      </div>
+    {/if}
+  </div>
+  <div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0">
+    <Card {post}>
+      <slot />
+    </Card>
+    <Footer sticky={true} />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/post_layout.svelte b/src/lib/components/post_layout.svelte
new file mode 100644
index 00000000..5e9fe97b
--- /dev/null
+++ b/src/lib/components/post_layout.svelte
@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+  import Image from '$lib/components/prose/img.svelte'
+  import table from '$lib/components/prose/table.svelte'
+  export { Image as img, table }
+</script>
+
+<script lang="ts">
+  import { typeOfPost } from '$lib/utils/posts'
+  import Container from '$lib/components/post_container.svelte'
+  // auto-generated
+  export let path
+  export let slug
+  export let toc
+  // common
+  export let created
+  export let updated
+  export let published
+  export let summary
+  export let tags
+  export let flags
+  // specify
+  export let title
+  export let image
+  export let in_reply_to
+  // post
+  let fm = { path, slug, toc, created, updated, published, summary, tags, flags, title, image, in_reply_to }
+  let post = { type: typeOfPost(fm), ...fm }
+</script>
+
+<Container {post}>
+  <slot />
+</Container>
\ No newline at end of file
diff --git a/src/lib/components/post_pagination.svelte b/src/lib/components/post_pagination.svelte
index 547a6c9d..c67e1af1 100644
--- a/src/lib/components/post_pagination.svelte
+++ b/src/lib/components/post_pagination.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import Image from '$lib/components/prose/img.svelte'
-  export let prev: Urara.Post = undefined
-  export let next: Urara.Post = undefined
+  export let prev: Urara.Post | undefined = undefined
+  export let next: Urara.Post | undefined = undefined
 </script>
 
 <nav class="flex flex-col md:flex-row flex-warp justify-evenly">
   {#if prev}
     <div
       href={prev.path}
-      class:image-full={prev['photo']}
-      class:md:rounded-r-box={next && !next['photo']}
+      class:image-full={prev['image']}
+      class:md:rounded-r-box={next && !next['image']}
       class="flex-1 card group rounded-none before:!rounded-none">
-      {#if prev['photo']}
+      {#if prev['image']}
         <figure class="!block">
           <Image
             class="object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out"
-            src={prev['photo']} />
+            src={prev['image']} />
         </figure>
       {/if}
       <div class="card-body">
@@ -24,25 +24,25 @@
           rel="prev"
           href={prev.path}
           class="card-title block text-left mb-0 mr-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-3 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
-          {prev['title'] ?? prev.path.slice(1)}
+          {prev['title'] ?? prev['summary'] ?? prev.path.slice(1)}
         </a>
       </div>
     </div>
-    {#if next && !next['photo'] && !prev['photo']}
+    {#if next && !next['image'] && !prev['image']}
       <div class="flex-0 divider mx-4 md:divider-horizontal md:mx-0 md:my-4" />
     {/if}
   {/if}
   {#if next}
     <div
       href={next.path}
-      class:image-full={next['photo']}
-      class:md:rounded-l-box={prev && !prev['photo']}
+      class:image-full={next['image']}
+      class:md:rounded-l-box={prev && !prev['image']}
       class="flex-1 card group rounded-none before:!rounded-none">
-      {#if next['photo']}
+      {#if next['image']}
         <figure class="!block">
           <Image
             class="object-center h-full w-full absolute group-hover:scale-105 transition-transform duration-500 ease-in-out"
-            src={next['photo']} />
+            src={next['image']} />
         </figure>
       {/if}
       <div class="card-body">
@@ -50,10 +50,10 @@
           rel="next"
           href={next.path}
           class="card-title block text-right mb-0 ml-auto bg-[length:100%_0%] bg-[position:0_88%] underline decoration-3 decoration-transparent group-hover:decoration-primary hover:bg-[length:100%_100%] hover:text-primary-content bg-gradient-to-t from-primary to-primary bg-no-repeat transition-all ease-in-out duration-300">
-          {next['title'] ?? next.path.slice(1)}
+          {next['title'] ?? next['summary'] ?? next.path.slice(1)}
         </a>
         <span class="i-heroicons-outline-chevron-right opacity-50 group-hover:opacity-100 ml-auto" />
       </div>
     </div>
   {/if}
-</nav>
+</nav>
\ No newline at end of file
diff --git a/src/lib/components/post_reply.svelte b/src/lib/components/post_reply.svelte
index 35505455..6a1f463a 100644
--- a/src/lib/components/post_reply.svelte
+++ b/src/lib/components/post_reply.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   let className = ''
   export { className as class }
-  export let inReplyTo: Urara.Post.Reply['inReplyTo']
+  export let in_reply_to: Urara.Post['in_reply_to']
 </script>
 
 <div class="flex flex-wrap gap-2 rounded-box outline outline-neutral/10 p-4 {className}">
   <span class="flex-none font-bold uppercase opacity-30">Reply to:&nbsp;</span>
-  {#if Array.isArray(inReplyTo)}
-    {#each inReplyTo as reply}
+  {#if Array.isArray(in_reply_to)}
+    {#each in_reply_to as reply}
       <a
         href={reply}
         rel="noopener external"
@@ -19,12 +19,12 @@
     {/each}
   {:else}
     <a
-      href={inReplyTo}
+      href={in_reply_to}
       rel="noopener external"
       target="_blank"
       class="ml-auto flex-none flex rounded-badge bg-base-200 hover:bg-base-300 transition-all gap-2 px-4 u-in-reply-to">
       <span class="i-heroicons-outline-reply my-auto !w-4 !h-4" />
-      {inReplyTo}
+      {in_reply_to}
     </a>
   {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/post_status.svelte b/src/lib/components/post_status.svelte
index 719ff60c..0ac9d224 100644
--- a/src/lib/components/post_status.svelte
+++ b/src/lib/components/post_status.svelte
@@ -2,22 +2,22 @@
   import { date } from '$lib/config/general'
   import { site } from '$lib/config/site'
   export let post: Urara.Post
-  export let index: boolean = false
+  export let preview: boolean = false
   const stringPublished = new Date(post.published ?? post.created).toLocaleString(date.locales, date.options)
   const stringUpdated = new Date(post.updated ?? post.published ?? post.created).toLocaleString(date.locales, date.options)
   const jsonPublished = new Date(post.published ?? post.created).toJSON()
   const jsonUpdated = new Date(post.updated ?? post.published ?? post.created).toJSON()
 </script>
 
-<div class="flex font-semibold gap-1.5">
+<div class:md:mb-4={!preview && post.type !== 'article'} class="flex font-semibold gap-1.5">
   <a
-    class:hidden={index}
+    class:hidden={preview}
     rel="author"
     class="opacity-75 hover:opacity-100 hover:text-primary duration-500 ease-in-out p-author h-card"
     href={site.protocol + site.domain}>
     {site.author.name}
   </a>
-  <span class:hidden={index} class="opacity-50">/</span>
+  <span class:hidden={preview} class="opacity-50">/</span>
   <a href={post.path} class="swap hover:swap-active u-url u-uid">
     <time
       class="swap-off font-semibold opacity-75 duration-500 ease-in-out mr-auto dt-published"
@@ -32,4 +32,4 @@
       {stringUpdated}
     </time>
   </a>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/post_tags.svelte b/src/lib/components/post_tags.svelte
deleted file mode 100644
index 11d9fa19..00000000
--- a/src/lib/components/post_tags.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  export let tags: Urara.Post['tags']
-</script>
-
-<div>
-  {#each tags as tag}
-    <a href="/?tags={tag}" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">
-      #{tag}
-    </a>
-  {/each}
-</div>
diff --git a/src/lib/components/post_toc.svelte b/src/lib/components/post_toc.svelte
index f34710a5..fac3440c 100644
--- a/src/lib/components/post_toc.svelte
+++ b/src/lib/components/post_toc.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte'
   import Tree from '$lib/components/post_toc_tree.svelte'
-  export let toc: Urara.Post.Article.Toc[]
+  export let toc: Urara.Post.Toc[]
 
   let intersecting: string[] = []
   let intersectingArticle: boolean = true
@@ -41,7 +41,7 @@
   $: if (intersectingArticle === false) bordered = []
   $: if (bordered)
     toc.forEach(heading =>
-      bordered.includes(heading.slug)
+      bordered.includes(heading.slug!)
         ? document.getElementById(`toc-link-${heading.slug}`)?.classList.add('!border-accent')
         : document.getElementById(`toc-link-${heading.slug}`)?.classList.remove('!border-accent')
     )
@@ -57,6 +57,7 @@
       toc={toc.reduce(
         (acc, heading) => {
           let parent = acc
+          // @ts-ignore Type 'Toc | undefined' is not assignable to type 'Toc.' ts(2322)
           while (parent.depth + 1 < heading.depth) parent = parent.children.at(-1)
           parent.children = [...(parent.children ?? []), { ...heading, children: [] }]
           return acc
@@ -64,4 +65,4 @@
         { depth: toc[0].depth - 1, children: [] }
       )} />
   </nav>
-</aside>
+</aside>
\ No newline at end of file
diff --git a/src/lib/components/post_toc_tree.svelte b/src/lib/components/post_toc_tree.svelte
index 46942d0a..9dbceeec 100644
--- a/src/lib/components/post_toc_tree.svelte
+++ b/src/lib/components/post_toc_tree.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  export let toc: Urara.Post.Article.Toc
+  export let toc: Urara.Post.Toc
   const { title, slug, depth, children } = toc
 </script>
 
 {#if title}
   <span
     dir="ltr"
-    on:click={() => document.getElementById(slug).scrollIntoView({ behavior: 'smooth' })}
+    on:click={() =>
+      // @ts-ignore Object is possibly 'null'. ts(2531)
+      document.getElementById(slug).scrollIntoView({ behavior: 'smooth' })}
     id={`toc-link-${slug}`}
     class="cursor-pointer border-l-4 border-transparent transition-all hover:border-primary hover:bg-base-content hover:bg-opacity-10 active:bg-primary active:text-primary-content active:font-bold pr-4 {depth <=
     2
@@ -20,7 +22,7 @@
     {title}
   </span>
 {/if}
-{#if children.length > 0}
+{#if children}
   <ul dir="ltr" id={`toc-list-${slug ?? 'root'}`}>
     {#each children as child}
       <li id={`toc-item-${child.slug}`} class="flex flex-col">
@@ -28,4 +30,4 @@
       </li>
     {/each}
   </ul>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/prose/img.svelte b/src/lib/components/prose/img.svelte
index b81d8a70..601af8e8 100644
--- a/src/lib/components/prose/img.svelte
+++ b/src/lib/components/prose/img.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  let className = undefined
+  let className: string | undefined = undefined
   export { className as class }
   export let src: string
   export let alt: string = src
@@ -7,4 +7,4 @@
   export let decoding: 'async' | 'sync' | 'auto' = 'async'
 </script>
 
-<img {src} {alt} class="u-photo {className ?? 'rounded-lg my-2'}" {loading} {decoding} />
+<img {src} {alt} class={className ?? 'rounded-lg my-2'} {loading} {decoding} />
\ No newline at end of file
diff --git a/src/lib/config/site.ts b/src/lib/config/site.ts
index c0eb7f84..9c36dbb3 100644
--- a/src/lib/config/site.ts
+++ b/src/lib/config/site.ts
@@ -6,12 +6,11 @@ export const site: SiteConfig = {
   title: 'Seviche.cc',
   subtitle: 'Tech / Code / Random Life',
   lang: 'zh',
-  descr: 'Tech / Code / Random Life',
+  description: 'Tech / Code / Random Life',
   author: {
     name: '酸橘汁腌鱼',
-    photo: '/assets/avatar.jpg',
+    avatar: '/assets/avatar.jpg',
     status: '🖤',
-    github: 'sevichecc',
     bio: ' Code / Tech  <br> Living a Random Life '
   },
   themeColor: '#3D4451'
diff --git a/src/lib/stores/posts.ts b/src/lib/stores/posts.ts
index ad646053..a4f659f1 100644
--- a/src/lib/stores/posts.ts
+++ b/src/lib/stores/posts.ts
@@ -1,3 +1,4 @@
+import type { Writable } from 'svelte/store'
 import { writable } from 'svelte/store'
-export const posts = writable({})
-export const tags = writable({})
+export const posts: Writable<Urara.Post[]> = writable([])
+export const tags: Writable<string[]> = writable([])
diff --git a/src/lib/types/general.ts b/src/lib/types/general.ts
index 53cdb413..d57c03c0 100644
--- a/src/lib/types/general.ts
+++ b/src/lib/types/general.ts
@@ -4,8 +4,6 @@ export type ThemeConfig = {
 }[]
 
 export type HeadConfig = {
-  /** @deprecated - use `me` instead */
-  relMe?: never
   custom?: (params: { dev: boolean; post?: Urara.Post; page?: Urara.Page }) => string[]
   me?: string[]
 }
diff --git a/src/lib/types/site.ts b/src/lib/types/site.ts
index dc8966a4..27d3985a 100644
--- a/src/lib/types/site.ts
+++ b/src/lib/types/site.ts
@@ -1,3 +1,5 @@
+import type { FFFAuthor } from 'fff-flavored-frontmatter'
+
 export type SiteConfig = {
   /** @deprecated - use `description` instead */
   descr?: string
@@ -15,17 +17,9 @@ export type SiteConfig = {
   description?: string
   /** site keywords. `<meta name="keywords" content={site.keywords}>` */
   keywords?: string[]
-  author: {
-    name: string
-    photo?: string
+  author: Omit<FFFAuthor, 'url'> & {
     status?: string
     bio?: string
-    /** @deprecated - use `metadata` or `head.me` instead */
-    github?: never
-    /** @deprecated - use `metadata` or `head.me` instead */
-    twitter?: never
-    /** @deprecated - use `metadata` or `head.me` instead */
-    pgp?: never
     metadata?: (
       | {
           text: string
diff --git a/src/lib/utils/posts.ts b/src/lib/utils/posts.ts
index 357ebe2d..dab6532e 100644
--- a/src/lib/utils/posts.ts
+++ b/src/lib/utils/posts.ts
@@ -1,5 +1,7 @@
+import type { FFFFlavoredFrontmatter } from 'fff-flavored-frontmatter'
+
 interface GenPostsOptions {
-  /** import.meta.globEager<Urara.Post.Module> https://vitejs.dev/guide/features.html#glob-import */
+  /** import.meta.glob<Urara.Post.Module> https://vitejs.dev/guide/features.html#glob-import */
   modules?: { [path: string]: Urara.Post.Module }
   /** set to true to output html */
   postHtml?: boolean
@@ -13,13 +15,39 @@ type GenPostsFunction = (options?: GenPostsOptions) => Urara.Post[]
 
 type GenTagsFunction = (posts: Urara.Post[]) => string[]
 
+/**
+ * Detect Post Type
+ * @param fm - post frontmatter
+ * @returns - post type string
+ */
+export const typeOfPost = (
+  fm: FFFFlavoredFrontmatter
+): 'note' | 'article' | 'reply' | 'photo' | 'like' | 'video' | 'repost' | 'bookmark' | 'audio' =>
+  fm.title
+    ? 'article'
+    : fm.image
+    ? 'photo'
+    : fm.audio
+    ? 'audio'
+    : fm.video
+    ? 'video'
+    : fm.bookmark_of
+    ? 'bookmark'
+    : fm.like_of
+    ? 'like'
+    : fm.repost_of
+    ? 'repost'
+    : fm.in_reply_to
+    ? 'reply'
+    : 'note'
+
 /**
  * Generate Posts List
  * @param options - An optional configuration object
  * @returns - posts list
  */
 export const genPosts: GenPostsFunction = ({
-  modules = import.meta.globEager<Urara.Post.Module>('/src/routes/**/*.{md,svelte.md}'),
+  modules = import.meta.glob<Urara.Post.Module>('/src/routes/**/*.{md,svelte.md}', { eager: true }),
   postHtml = false,
   postLimit = undefined,
   filterUnlisted = false
@@ -27,14 +55,16 @@ export const genPosts: GenPostsFunction = ({
   Object.entries(modules)
     .map(([, module]) => ({
       ...module.metadata,
+      type: typeOfPost(module.metadata),
       html:
-        postHtml || ['note', 'reply'].includes(module.metadata?.layout)
+        postHtml || typeOfPost(module.metadata) !== 'article'
           ? module.default
               .render()
               .html // eslint-disable-next-line no-control-regex
               .replace(/[\u0000-\u001F]/g, '')
               .replace(/[\r\n]/g, '')
-              .match(/<main [^>]+>(.*?)<\/main>/gi)[0]
+              .match(/<main [^>]+>(.*?)<\/main>/gi)?.[0]
+              .replace(/<main [^>]+>(.*?)<\/main>/gi, '$1')
               // .replace(/( class=")(.*?)(")/gi, '')
               .replace(/( style=")(.*?)(")/gi, '')
               .replace(/(<span>)(.*?)(<\/span>)/gi, '$2')
@@ -42,7 +72,7 @@ export const genPosts: GenPostsFunction = ({
           : ''
     }))
     .filter((post, index) => (!filterUnlisted || !post.flags?.includes('unlisted')) && (!postLimit || index < postLimit))
-    .sort((a: Urara.Post, b: Urara.Post) => Date.parse(b.published ?? b.created) - Date.parse(a.published ?? a.created))
+    .sort((a, b) => Date.parse(b.published ?? b.created) - Date.parse(a.published ?? a.created))
 
 /**
  * Generate Tags List
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index 7c9a79d6..4aa99ddf 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,14 +1,15 @@
 <script lang="ts" context="module">
-  export const load = ({ url: { pathname }, error: { message }, status }) => ({ props: { status, message, pathname } })
+  import type { Load } from './__types'
+  export const load: Load = ({ url: { pathname }, error, status }) => ({ props: { pathname, error, status } })
 </script>
 
 <script lang="ts">
   import Head from '$lib/components/head.svelte'
   import Footer from '$lib/components/footer.svelte'
-  export let status: string
-  export let message: string
   export let pathname: string
-  console.error(status, pathname, message)
+  export let error: Error
+  export let status: string
+  console.error(status, error.message)
 </script>
 
 <Head page={{ title: status ?? '404', path: pathname ?? '/404' }} />
@@ -23,7 +24,7 @@
         <h1 class="opacity-20 text-6xl md:text-[12rem] -mt-2 mb-0">
           {status ?? '404'}
         </h1>
-        <h2 class="-mt-12 md:-mt-24">{message ?? 'Not found'}</h2>
+        <h2 class="-mt-12 md:-mt-24">{error.message ?? 'Not found'}</h2>
         <div class="card-actions">
           <a href="/" class="btn btn-neutral no-underline shadow-xl hover:shadow-2xl mt-8">
             <span class="i-heroicons-outline-home -ml-1 mr-2" />
@@ -34,4 +35,4 @@
     </article>
     <Footer sticky={true} class="flex-1 md:flex-initial" />
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index fdfca03a..1ee92995 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,9 +1,10 @@
 <script lang="ts" context="module">
+  import type { Load } from './__types'
   export const prerender = true
-  export const load = async ({ url, fetch }) => ({
+  export const load: Load = async ({ url, fetch }) => ({
     props: {
       path: url.pathname,
-      res: await (await fetch('/posts.json')).json()
+      res: await fetch('/posts.json').then(res => res.json())
     }
   })
 </script>
@@ -17,7 +18,6 @@
   import { registerSW } from 'virtual:pwa-register'
   import Head from '$lib/components/head_static.svelte'
   import Header from '$lib/components/header.svelte'
-  import Search from '$lib/components/header_search.svelte'
   import '../app.css'
   export let res: Urara.Post[]
   export let path: string
@@ -35,7 +35,7 @@
 </script>
 
 <Head />
-<Search />
+
 <Header {path} />
 
 {#key path}
@@ -45,4 +45,4 @@
     out:fly={{ y: -100, duration: 300 }}>
     <slot />
   </div>
-{/key}
+{/key}
\ No newline at end of file
diff --git a/src/routes/feed.json.ts b/src/routes/feed.json.ts
index 5c764b01..56237ae7 100644
--- a/src/routes/feed.json.ts
+++ b/src/routes/feed.json.ts
@@ -16,7 +16,7 @@ const render = async (posts = genPosts({ postHtml: true, postLimit: feed.limit,
     {
       name: site.author.name,
       url: site.protocol + site.domain,
-      avatar: site.author.photo
+      avatar: site.author.avatar
     }
   ],
   language: site.lang ?? 'en',
@@ -30,7 +30,7 @@ const render = async (posts = genPosts({ postHtml: true, postLimit: feed.limit,
     title: post.title,
     content_html: post.html,
     summary: post['summary'],
-    image: post['photo'],
+    image: post['image'],
     date_published: post.published ?? post.created,
     date_modified: post.updated ?? post.published ?? post.created,
     tags: post.tags,
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7ce7dbae..c1ebfac2 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -7,13 +7,14 @@
   import { title as storedTitle } from '$lib/stores/title'
   import Head from '$lib/components/head.svelte'
   import Footer from '$lib/components/footer.svelte'
-  import Post from '$lib/components/index_post.svelte'
+  import Post from '$lib/components/post_card.svelte'
+  // import Post from '$lib/components/index_post.svelte'
   import Profile from '$lib/components/index_profile.svelte'
 
   let allPosts: Urara.Post[]
   let allTags: string[]
   let loaded: boolean
-  let [posts, tags, years] = [[], [], []]
+  let [posts, tags, years]: [Urara.Post[], string[], number[]] = [[], [], []]
 
   storedTitle.set('')
 
@@ -33,7 +34,7 @@
 
   onMount(() => {
     if (browser) {
-      if ($page.url.searchParams.get('tags')) tags = $page.url.searchParams.get('tags').split(',')
+      if ($page.url.searchParams.get('tags')) tags = $page.url.searchParams.get('tags')?.split(',') ?? []
       loaded = true
     }
   })
@@ -108,7 +109,7 @@
             in:fly={{ x: index % 2 ? 100 : -100, duration: 300, delay: 500 }}
             out:fly={{ x: index % 2 ? -100 : 100, duration: 300 }}
             class="rounded-box transition-all duration-500 ease-in-out hover:z-30 hover:shadow-lg md:shadow-xl md:hover:shadow-2xl md:hover:-translate-y-0.5">
-            <Post {post} loading={index < 5 ? 'eager' : 'lazy'} decoding={index < 5 ? 'auto' : 'async'} />
+            <Post {post} preview={true} loading={index < 5 ? 'eager' : 'lazy'} decoding={index < 5 ? 'auto' : 'async'} />
           </div>
         {/each}
       </main>
@@ -122,4 +123,4 @@
       </div>
     {/key}
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/urara/2022-06-15-jellyfin/index.md b/urara/2022-06-15-jellyfin/index.md
index 43f685dc..3bb59c05 100644
--- a/urara/2022-06-15-jellyfin/index.md
+++ b/urara/2022-06-15-jellyfin/index.md
@@ -2,7 +2,7 @@
 title: VPS · Jellyfin结合Cloudreve开启线上影院
 created: 2022-06-15
 summary: 基于 Docker 和 Nginx 的信心搭建过程
-photo: /2022-06-15-jellyfin/1.jpg
+image: /2022-06-15-jellyfin/1.jpg
 tags:
   - Nginx
   - VPS
diff --git a/urara/2022-07-15-reading-6/index.md b/urara/2022-07-15-reading-6/index.md
index 96e096cc..59db73b0 100644
--- a/urara/2022-07-15-reading-6/index.md
+++ b/urara/2022-07-15-reading-6/index.md
@@ -4,7 +4,7 @@ created: 2022-07-15
 summary: Vue / 网页性能优化 / npm ……
 tags:
   - 我在看什么
-photo: /2022-07-15-reading-6/june.png
+image: /2022-07-15-reading-6/june.png
 ---
 
 ## 编程相关
diff --git a/urara/2022-07-16-reading-5/index.md b/urara/2022-07-16-reading-5/index.md
index 8ffd0333..0205fd72 100644
--- a/urara/2022-07-16-reading-5/index.md
+++ b/urara/2022-07-16-reading-5/index.md
@@ -4,7 +4,7 @@ created: 2022-07-16
 summary: Anki / JSDoc / 蘑菇 / Music-Map ……
 tags:
   - 我在看什么
-photo: /2022-07-16-reading-5/May (1).jpg
+image: /2022-07-16-reading-5/May (1).jpg
 ---
 
 ## Productivity
diff --git a/urara/2022-07-31-reading-7/index.md b/urara/2022-07-31-reading-7/index.md
index c69be5dc..4b5c8be7 100644
--- a/urara/2022-07-31-reading-7/index.md
+++ b/urara/2022-07-31-reading-7/index.md
@@ -4,7 +4,7 @@ created: 2022-07-31
 summary: eval / CSP&XSS / Commonplace Book ……
 tags:
   - 我在看什么
-photo: /2022-07-31-reading-7/july.webp
+image: /2022-07-31-reading-7/july.webp
 ---
 
 ## 前端