blog_v0.0.1

* New prop setOGTypeArticle sets og:type to "article" for posts, and "website" for every other page.

* Fixed error where I declared setOGTypeArticle twice.

README.md

@@ -9,7 +9,7 @@ A static blog template built with [Astro](https://astro.build).
 [**🌏 한국어**](https://github.com/saicaca/fuwari/blob/main/README.ko.md)   /   
 [**🌏 Español**](https://github.com/saicaca/fuwari/blob/main/README.es.md)
 
-> README version: `2024-04-07`
+> README version: `2024-09-10`
 
 ![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
 
@@ -40,10 +40,11 @@ A static blog template built with [Astro](https://astro.build).
 title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
-image: /images/cover.jpg
+image: ./cover.jpg
 tags: [Foo, Bar]
 category: Front-end
 draft: false
+lang: jp      # Set only if the post's language differs from the site's language in `config.ts`
 ---
 ```
 

README.zh-CN.md

@@ -5,7 +5,7 @@
 [**🖥️在线预览（Vercel）**](https://fuwari.vercel.app)   /   
 [**📦旧 Hexo 版本**](https://github.com/saicaca/hexo-theme-vivia)
 
-> README 版本：`2024-04-07`
+> README 版本：`2024-09-10`
 
 ![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png)
 
@@ -36,10 +36,11 @@
 title: My First Blog Post
 published: 2023-09-09
 description: This is the first post of my new Astro blog.
-image: /images/cover.jpg
+image: ./cover.jpg
 tags: [Foo, Bar]
 category: Front-end
 draft: false
+lang: jp      # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
 ---
 ```
 

package.json

@@ -31,6 +31,7 @@
     "mdast-util-to-string": "^4.0.0",
     "overlayscrollbars": "^2.10.0",
     "pagefind": "^1.1.0",
+    "pnpm": "^9.11.0",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-components": "^0.3.0",

pnpm-lock.yaml

@@ -63,6 +63,9 @@ importers:
       pagefind:
         specifier: ^1.1.0
         version: 1.1.0
+      pnpm:
+        specifier: ^9.11.0
+        version: 9.11.0
       reading-time:
         specifier: ^1.5.0
         version: 1.5.0
@@ -91,7 +94,7 @@ importers:
         specifier: ^2.13.0
         version: 2.13.0
       sharp:
-        specifier: ^0.33.0
+        specifier: ^0.33.5
         version: 0.33.5
       svelte:
         specifier: ^4.2.19
@@ -889,24 +892,28 @@ packages:
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-arm64@1.8.3':
     resolution: {integrity: sha512-fed2ji8s+I/m8upWpTJGanqiJ0rnlHOK3DdxsyVLZQ8ClY6qLuPc9uehCREBifRJLl/iJyQpHIRufLDeotsPtw==}
     engines: {node: '>=14.21.3'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-linux-x64-musl@1.8.3':
     resolution: {integrity: sha512-UHrGJX7PrKMKzPGoEsooKC9jXJMa28TUSMjcIlbDnIO4EAavCoVmNQaIuUSH0Ls2mpGMwUIf+aZJv657zfWWjA==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@biomejs/cli-linux-x64@1.8.3':
     resolution: {integrity: sha512-I8G2QmuE1teISyT8ie1HXsjFRz9L1m5n83U1O6m30Kw+kPMPSKjag6QGUn+sXT8V+XWIZxFFBoTDEDZW2KPDDw==}
     engines: {node: '>=14.21.3'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@biomejs/cli-win32-arm64@1.8.3':
     resolution: {integrity: sha512-J+Hu9WvrBevfy06eU1Na0lpc7uR9tibm9maHynLIoAjLZpQU3IW+OKHUtyL8p6/3pT2Ju5t5emReeIS2SAxhkQ==}
@@ -1140,67 +1147,79 @@ packages:
     resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.0.5':
     resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.0.4':
     resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.0.4':
     resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.33.5':
     resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.33.5':
     resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.33.5':
     resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.33.5':
     resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
     resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.33.5':
     resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.33.5':
     resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -1377,46 +1396,55 @@ packages:
     resolution: {integrity: sha512-sWWgdQ1fq+XKrlda8PsMCfut8caFwZBmhYeoehJ05FdI0YZXk6ZyUjWLrIgbR/VgiGycrFKMMgp7eJ69HOF2pQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.21.1':
     resolution: {integrity: sha512-9OIiSuj5EsYQlmwhmFRA0LRO0dRRjdCVZA3hnmZe1rEwRk11Jy3ECGGq3a7RrVEZ0/pCsYWx8jG3IvcrJ6RCew==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.21.1':
     resolution: {integrity: sha512-0kuAkRK4MeIUbzQYu63NrJmfoUVicajoRAL1bpwdYIYRcs57iyIV9NLcuyDyDXE2GiZCL4uhKSYAnyWpjZkWow==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.21.1':
     resolution: {integrity: sha512-/6dYC9fZtfEY0vozpc5bx1RP4VrtEOhNQGb0HwvYNwXD1BBbwQ5cKIbUVVU7G2d5WRE90NfB922elN8ASXAJEA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.21.1':
     resolution: {integrity: sha512-ltUWy+sHeAh3YZ91NUsV4Xg3uBXAlscQe8ZOXRCVAKLsivGuJsrkawYPUEyCV3DYa9urgJugMLn8Z3Z/6CeyRQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.21.1':
     resolution: {integrity: sha512-BggMndzI7Tlv4/abrgLwa/dxNEMn2gC61DCLrTzw8LkpSKel4o+O+gtjbnkevZ18SKkeN3ihRGPuBxjaetWzWg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.21.1':
     resolution: {integrity: sha512-z/9rtlGd/OMv+gb1mNSjElasMf9yXusAxnRDrBaYB+eS1shFm6/4/xDH1SAISO5729fFKUkJ88TkGPRUh8WSAA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.21.1':
     resolution: {integrity: sha512-kXQVcWqDcDKw0S2E0TmhlTLlUgAmMVqPrJZR+KpH/1ZaZhLSl23GZpQVmawBQGVhyP5WXIsIQ/zqbDBBYmxm5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.21.1':
     resolution: {integrity: sha512-CbFv/WMQsSdl+bpX6rVbzR4kAjSSBuDgCqb1l4J68UYsQNalz5wOqLGYj4ZI0thGpyX5kc+LLZ9CL+kpqDovZA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.21.1':
     resolution: {integrity: sha512-3Q3brDgA86gHXWHklrwdREKIrIbxC0ZgU8lwpj0eEKGBQH+31uPqr0P2v11pn0tSIxHvcdOWxa4j+YvLNx1i6g==}
@@ -2983,48 +3011,56 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-gnu@1.26.0:
     resolution: {integrity: sha512-iJmZM7fUyVjH+POtdiCtExG+67TtPUTer7K/5A8DIfmPfrmeGvzfRyBltGhQz13Wi15K1lf2cPYoRaRh6vcwNA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.25.1:
     resolution: {integrity: sha512-IhxVFJoTW8wq6yLvxdPvyHv4NjzcpN1B7gjxrY3uaykQNXPHNIpChLB52+wfH+yS58zm1PL4LemUp8u9Cfp6Bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-arm64-musl@1.26.0:
     resolution: {integrity: sha512-XxoEL++tTkyuvu+wq/QS8bwyTXZv2y5XYCMcWL45b8XwkiS8eEEEej9BkMGSRwxa5J4K+LDeIhLrS23CpQyfig==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.25.1:
     resolution: {integrity: sha512-RXIaru79KrREPEd6WLXfKfIp4QzoppZvD3x7vuTKkDA64PwTzKJ2jaC43RZHRt8BmyIkRRlmywNhTRMbmkPYpA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-gnu@1.26.0:
     resolution: {integrity: sha512-1dkTfZQAYLj8MUSkd6L/+TWTG8V6Kfrzfa0T1fSlXCXQHrt1HC1/UepXHtKHDt/9yFwyoeayivxXAsApVxn6zA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.25.1:
     resolution: {integrity: sha512-TdcNqFsAENEEFr8fJWg0Y4fZ/nwuqTRsIr7W7t2wmDUlA8eSXVepeeONYcb+gtTj1RaXn/WgNLB45SFkz+XBZA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-musl@1.26.0:
     resolution: {integrity: sha512-yX3Rk9m00JGCUzuUhFEojY+jf/6zHs3XU8S8Vk+FRbnr4St7cjyMXdNjuA2LjiT8e7j8xHRCH8hyZ4H/btRE4A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.26.0:
     resolution: {integrity: sha512-X/597/cFnCogy9VItj/+7Tgu5VLbAtDF7KZDPdSw0MaL6FL940th1y3HiOzFIlziVvAtbo0RB3NAae1Oofr+Tw==}
@@ -3614,6 +3650,11 @@ packages:
   pkg-types@1.2.0:
     resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
 
+  pnpm@9.11.0:
+    resolution: {integrity: sha512-CiA/+u1aP2MkLNBkyPtYkjZsED4ygHkxj3gGLyTqjJ1QvGpHqjVnyr79gk0XDnj6J0XtHxaxMuFkNhRrdojxmw==}
+    engines: {node: '>=18.12'}
+    hasBin: true
+
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -6755,7 +6796,7 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
       vite: 5.4.2(@types/node@22.5.1)(lightningcss@1.25.1)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.3)
-      vitefu: 0.2.5(vite@5.4.2(@types/node@22.5.1)(lightningcss@1.25.1)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.3))
+      vitefu: 0.2.5(vite@5.4.2(@types/node@22.5.1)(lightningcss@1.26.0)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.6))
       which-pm: 3.0.0
       xxhash-wasm: 1.0.2
       yargs-parser: 21.1.1
@@ -9078,6 +9119,8 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
+  pnpm@9.11.0: {}
+
   possible-typed-array-names@1.0.0: {}
 
   postcss-calc@8.2.4(postcss@8.4.41):
@@ -10287,10 +10330,6 @@ snapshots:
       stylus: 0.63.0
       terser: 5.31.6
 
-  vitefu@0.2.5(vite@5.4.2(@types/node@22.5.1)(lightningcss@1.25.1)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.3)):
-    optionalDependencies:
-      vite: 5.4.2(@types/node@22.5.1)(lightningcss@1.25.1)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.3)
-
   vitefu@0.2.5(vite@5.4.2(@types/node@22.5.1)(lightningcss@1.26.0)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.6)):
     optionalDependencies:
       vite: 5.4.2(@types/node@22.5.1)(lightningcss@1.26.0)(sass@1.77.8)(stylus@0.63.0)(terser@5.31.6)

scripts/new-post.js

@@ -44,7 +44,7 @@ image: ''
 tags: []
 category: ''
 draft: false 
-language: ''
+lang: ''
 ---
 `
 

src/components/Footer.astro

@@ -4,14 +4,18 @@ import { profileConfig } from '../config'
 import { url } from '../utils/url-utils'
 ---
 
-<div class="card-base max-w-[var(--page-width)] min-h-[4.5rem] rounded-b-none mx-auto flex items-center px-6">
+<!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">-->
+<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
+<!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
+<div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6">
     <div class="transition text-50 text-sm">
         © 2024 {profileConfig.name}. All Rights Reserved. /
-        <a class="link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('rss.xml')}>RSS</a> /
-        <a class="link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a>
-        <br>
+    </div>
+    <div class="transition text-50 text-sm">
         Powered by
-        <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
-        <a class="link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
+        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/saicaca/fuwari">Fuwari</a>
     </div>
 </div>

src/components/GlobalStyles.astro

@@ -307,8 +307,8 @@ color_set({
 #content-wrapper {
     animation-delay: var(--content-delay);
 }
-#footer {
+.footer {
-    animation-delay: 400ms;
+    animation-delay: 250ms;
 }
 #banner-credit {
     animation-delay: 400ms;

src/components/Navbar.astro

@@ -19,7 +19,7 @@ let links: NavBarLink[] = navBarConfig.links.map(
   },
 )
 ---
-<div id="navbar" class="sticky top-0 z-50 onload-animation">
+<div id="navbar" class="z-50 onload-animation">
     <div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
     <div class:list={[
         className,

src/components/control/BackToTop.astro

@@ -44,14 +44,4 @@ import { Icon } from 'astro-icon/components'
 function backToTop() {
     window.scroll({ top: 0, behavior: 'smooth' });
 }
-
-function scrollFunction() {
-    let btn = document.getElementById('back-to-top-btn');
-    if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
-        btn.classList.remove('hide')
-    } else {
-        btn.classList.add('hide')
-    }
-}
-window.onscroll = scrollFunction
 </script>

src/components/misc/ImageWrapper.astro

@@ -32,10 +32,11 @@ if (isLocal) {
   let normalizedPath = path
     .normalize(path.join('../../', basePath, src))
     .replace(/\\/g, '/')
-  img = await files[normalizedPath]()
+  const file = files[normalizedPath]
-  if (!img) {
+  if (!file) {
-    console.error(`No image found for path ${normalizedPath}`)
+    console.error(`\n[ERROR] Image file not found: ${normalizedPath.replace('../../', 'src/')}`)
   }
+  img = await file()
 }
 
 const imageClass = 'w-full h-full object-cover'

src/components/widget/SideBar.astro

@@ -9,7 +9,7 @@ const className = Astro.props.class
     <div class="flex flex-col w-full gap-4 mb-4">
         <Profile></Profile>
     </div>
-    <div class="flex flex-col w-full gap-4 top-4 sticky top-4">
+    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
     </div>

src/config.ts

@@ -7,17 +7,17 @@ import type {
 import { LinkPreset } from './types/config'
 
 export const siteConfig: SiteConfig = {
-  title: 'Fuwari',
+  title: 'Amadeus',
-  subtitle: 'Demo Site',
+  subtitle: '的桜公馆',
-  lang: 'en',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
+  lang: 'zh_CN',         // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
   themeColor: {
     hue: 250,         // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
     fixed: false,     // Hide the theme color picker for visitors
   },
   banner: {
     enable: false,
-    src: 'assets/images/demo-banner.png',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
+    src: 'assets/images/demo-avatar.ong',   // Relative to the /src directory. Relative to the /public directory if it starts with '/'
-    position: 'center', // Equivalent to object-position, defaults center
+    position: 'center',      // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
     credit: {
       enable: false,         // Display the credit text of the banner image
       text: '',              // Credit text to be displayed
@@ -40,16 +40,16 @@ export const navBarConfig: NavBarConfig = {
     LinkPreset.About,
     {
       name: 'GitHub',
-      url: 'https://github.com/saicaca/fuwari',     // Internal links should not include the base path, as it is automatically added
+      url: 'https://github.com',     // Internal links should not include the base path, as it is automatically added
       external: true,                               // Show an external link icon and will open in a new tab
     },
   ],
 }
 
 export const profileConfig: ProfileConfig = {
-  avatar: 'assets/images/demo-avatar.png',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
+  avatar: 'assets/images/avatar.JPG',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
-  name: 'Lorem Ipsum',
+  name: 'ReAmadeus',
-  bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  bio: 'Amadeus的桜公馆',
   links: [
     {
       name: 'Twitter',
@@ -66,7 +66,7 @@ export const profileConfig: ProfileConfig = {
     {
       name: 'GitHub',
       icon: 'fa6-brands:github',
-      url: 'https://github.com/saicaca/fuwari',
+      url: 'https://github.com/RealmeAmadeus',
     },
   ],
 }

src/content/config.ts

@@ -9,7 +9,7 @@ const postsCollection = defineCollection({
     image: z.string().optional().default(''),
     tags: z.array(z.string()).optional().default([]),
     category: z.string().optional().default(''),
-    language: z.string().optional().default(''),
+    lang: z.string().optional().default(''),
 
     /* For internal use */
     prevTitle: z.string().default(''),

src/content/posts/windwos的技巧.md

@@ -0,0 +1,429 @@
+---
+title: windwos的技巧
+published: 2024-09-28
+description: '用于记录我使用windows过程中产生的一些疑惑和解决办法'
+image: ''
+tags: [自定义]
+category: '调戏windows'
+draft: false 
+lang: ''
+---
+
+# 计算机设置的小技巧
+
+## 禁用中文输入法的全角符号
+
+作用:不论是使用中文输入法还是英文输入法都能让符号是英文符号,在敲代码的时候不会因为全角或半角的问题而报错
+
+==勾选中文输入时使用英文标点==
+
+
+![image-20240112144954898](./assets/image-20240112144954898.png)
+
+## 反转鼠标滚轮
+
+修改鼠标滚轮方向 最后为值0代表windows方向1代表mac方向
+
+打开windows终端(管理员模式)输入以下命令
+
+```cmd
+Get-ItemProperty HKLM:\SYSTEM\CurrentControlSet\Enum\HID\*\*\Device` Parameters FlipFlopWheel -EA 0 | ForEach-Object { Set-ItemProperty $_.PSPath FlipFlopWheel 0 } //最后的值为注册表中16进位的值
+```
+
+magicmouse左右滑动方向反转
+
+![image-20240217140036606](./assets/image-20240217140036606.png)
+
+## 使用命令打开资源管理器
+
+```cmd
+Explorer.exe
+```
+
+## 系统级别隐藏文件的方法
+
+1、windows键+r，输入cmd，回车（这样就打开cmd窗口了）
+
+2、输入 attrib +h +s +a （要隐藏的文件或文件夹的路径）回车
+
+```cmd
+attrib +h +s +a （要隐藏的文件或文件夹的路径）
+```
+
+这样就把这个文件或文件夹隐藏了，即使选择查看隐藏文件，这个文件也不会显示（因为这个文件被列为系统保护隐藏文件了，普通的方式是看不到的）
+
+如果想看这个文件可以在cmd窗口输入start （文件或文件夹的路径 ）。
+
+要记住文件名和路径哦，如果忘记了文件名，可以在cmd窗口输入
+
+```cmd
+dir （文件所在的文件夹的路径） /a 
+```
+
+就能查看这个文件夹下所有的文件名了，找到你所隐藏的文件名
+
+例子：比如我想隐藏E盘里的QQ文件夹下的Test文件，那我打开cmd窗口后，输入
+
+```cmd
+attrib +h +s +a E:\QQ\Test
+```
+
+
+就能隐藏Test文件夹了，如果想再查看这个文件夹，可以输入
+
+```cmd
+start E:\QQ\Test
+```
+
+直接打开文件夹。也可以输入以下命令取消隐藏，然后按正常方式点击打开。
+
+```cmd
+attrib -h -s -a E:\QQ\Test
+```
+
+
+如果忘记Test这个文件夹的名称，可以输入
+
+```cmd
+dir E:\QQ /a
+```
+
+就可以查看QQ文件夹里所有文件了，也就能看到Test这个文件夹名了。
+
+ipconfig查看自己IP地址
+
+attrib +h +s +a C：\新建文件夹
+attrib +h +s +a E：\ha
+
+
+
+## 关于安装向导创建文件夹错误5
+
+C：/Users/Administrator/AppData/Local/Temp
+对Temp文件夹进行设置权限
+
+windows默认光标：c：/cursors
+
+系统管理员设置了系统策略禁止进行此安装怎么办：
+　　方法一：
+　　1、在安装程序的时候收到了“系统管理员设置了系统策略，禁止进行此项安装”的错误消息，这是由于Windows Installer被禁用所导致的。在【开始】菜单窗口中单击【运行】命令
+　　2、在打开框中键入【gpedit.msc】命令，单击【确定】按钮
+　　3、在左侧控制台树窗口定位到【计算机配置→管理模板→Windows 组件→Windows Installer】
+　　4、在右侧的细节窗口双击【禁用Windows Installer】项目
+　　5、弹出的属性窗口，将其改成【未配置】或【已禁用】
+
+方法二：
+　　1、在运行对话框键入【regedit】命令，单击【确定】按钮，打开 注册表 编辑器
+　　2、在左侧注册表树窗口定位到以下分支
+　　HKEY_CLASSES_ROOTInstallerProducts4080110900063D11C8EF10054038389C
+　　将这整个项删除掉
+
+方法三：
+　　1、单击【开始】菜单，单击【控制面板】命令
+　　2、在控制面板中依次打开【管理工具】——【本地安全策略】
+　　3、在左侧控制台树窗口点击【软件限制策略】项，如果出现提示“没有定义软件限制策略”
+　　4、右击【软件限制策略】项，打开的菜单选择【创建新的策略】命令
+　　5、在右侧的细节窗口双击【强制】项，将软件限制策略应用到下列用户修改为【除本地管理员以外的所有用户】，单击【确定】按钮。如果只是某个软件出现无法安装或卸载的问题，那么请下载微软提供的Windows Installer CleanUp Utility工具来清除出问题的程序的Windows Installer配置信息。
+
+## 更改win11的右键菜单
+
+变win10菜单命令： 
+```cmd
+reg.exe add “HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32” /f /ve
+```
+
+恢复win11菜单命令：
+```cmd
+reg.exe delete “HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32"
+```
+
+
+
+完成后重启资源管理器即可
+
+
+## 彻底删除文件
+
+创建一个巨大的文件覆盖磁盘空间 占据已经删除文件的空间使其无法恢复
+
+recuva这个软件可以修复已经删除的文件
+
+```cmd
+cipher /w:D:  #在D:下创建一个巨大的文件 按CTRL+C就会停止,同时删除文件
+```
+
+## 加密文件
+
+```cmd
+cipher/e C:\ #文件路径
+```
+
+```cmd
+PS C:\Users\Amdeus> cipher /e D:\file\github_for_picgo_token.txt
+
+ 正在加密 D:\file\ 中的文件
+
+github_for_picgo_token.txt [ERR]
+github_for_picgo_token.txt: 不支持该请求。
+
+1 个目录中的 0 个文件(或目录)已被加密。
+```
+
+可以导出文件证书,只有同时拿到证书和加密文件才能解密文件
+
+![image-20240310220110721](./assets/image-20240310220110721.png)
+
+或是使用命令解密
+
+```cmd
+PS C:\Users\Amdeus> cipher /d D:\file\github_for_picgo_token.txt
+
+ 正在解密 D:\file\ 中的文件
+
+
+1 个目录中的 0 个文件(或目录)已被解密。
+
+PS C:\Users\Amdeus>
+```
+
+如果我们想要加密文件夹
+
+```cmd
+PS C:\Users\Amdeus> cipher /e /s:D:\file\  #加密file这个文件夹
+PS C:\Users\Amdeus> cipher /d /s:D:\file\  #解密file文件夹
+```
+
+## 查看公网ip
+
+```cmd
+PS C:\Users\Amdeus> curl ipinfo.io
+
+
+StatusCode        : 200
+StatusDescription : OK
+Content           : {
+                      "ip": "",
+                      "city": "",
+                      "region": "",
+                      "country": "",
+                      "loc": "",
+                      "org": "",
+                      "timezone": "...
+RawContent        : HTTP/1.1 200 OK
+                    access-control-allow-origin: *
+                    x-frame-options: SAMEORIGIN
+                    x-xss-protection: 1; mode=block
+                    x-content-type-options: nosniff
+                    referrer-policy: strict-origin-when-cross-origin
+                    x-envo...
+Forms             : {}
+Headers           : {[access-control-allow-origin, *], [x-frame-options, SAMEORIGIN], [x-xss-protection, 1; mode=block]
+                    , [x-content-type-options, nosniff]...}
+Images            : {}
+InputFields       : {}
+Links             : {}
+ParsedHtml        : mshtml.HTMLDocumentClass
+RawContentLength  : 261
+
+
+
+PS C:\Users\Amdeus>
+```
+
+## 链路诊断
+
+```cmd
+PS C:\Users\Amdeus> tracert www.baidu.com
+
+通过最多 30 个跃点跟踪
+到 www.baidu.com [36.155.132.76] 的路由:
+
+  1     7 ms     8 ms     5 ms  10.9.0.1 #路由器
+  2     5 ms     3 ms     7 ms  192.168.251.1
+  3     8 ms     7 ms     8 ms  172.16.254.42
+  4    30 ms    30 ms    32 ms  172.16.254.52
+  5    21 ms    21 ms    20 ms  112.48.70.1
+  6     6 ms     *        *     112.5.175.61
+  7     *        *        *     请求超时。
+  8     *        *        *     请求超时。
+  9     *        *        *     请求超时。
+ 10     *        *        *     请求超时。
+ 11     *        *        *     请求超时。
+ 12     *        *        *     请求超时。
+ 13     *        *        *     请求超时。
+ 14     *        *        *     请求超时。
+ 15    30 ms    34 ms    29 ms  36.155.132.76
+
+跟踪完成。
+PS C:\Users\Amdeus>netsh wlan show profiles
+```
+
+## 查看计算机所连接过的wifi信息
+
+```cmd
+PS C:\Users\Amdeus> netsh wlan show profiles
+
+接口 WLAN 2 上的配置文件:
+
+
+组策略配置文件(只读)
+---------------------------------
+    <无>
+
+用户配置文件
+-------------
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+    所有用户配置文件 : 
+
+PS C:\Users\Amdeus> netsh wlan show profiles name="??" key=clear
+
+接口 WLAN 2 上的配置文件 ??:
+=======================================================================
+
+已应用: 所有用户配置文件
+
+配置文件信息
+-------------------
+    版本                   : 1
+    类型                   : 
+    名称                   : 
+    控制选项               :
+        连接模式           : 
+        网络广播           : 
+        AutoSwitch         : 
+        MAC 随机化: 禁用
+
+连接设置
+---------------------
+    SSID 数目              : 1
+    SSID 名称              :“锟斤拷”
+    网络类型               : 结构
+    无线电类型             : [ 任何无线电类型 ]
+    供应商扩展名           : 不存在
+
+安全设置
+-----------------
+    身份验证         : WPA3 - 个人
+    密码                 : CCMP
+    身份验证         : WPA2 - 个人
+    密码                 : CCMP
+    身份验证         : WPA3 - 个人
+    密码                 : GCMP
+    身份验证         : WPA2 - 个人
+    密码                 : GCMP
+    安全密钥               : 存在
+    关键内容            : ?????????? #wifi密码
+
+费用设置
+-------------
+    费用                   : 无限制
+    阻塞                : 否
+    接近流量上限        : 否
+    超出流量上限        : 否
+    漫游                : 否
+    费用来源            : 默认
+
+PS C:\Users\Amdeus>
+```
+
+## win11绕过联网激活
+
+联网界面按Shift+F10调出cmd
+
+```cmd
+oobe /bypassnro
+```
+
+电脑重启之后就会出现我没有Internet连接
+
+## 修复系统文件
+
+```cmd
+sfc /scannow #电脑自动扫描计算机中的关键文件,并对缺失的文件进行修复
+```
+
+## 自定义开机自启动程序
+
+在Windows中，可以通过多种方式设置程序在开机时自启动。以下是几种常用的方法：
+
+方法一：使用“启动”文件夹
+
+1. **打开“运行”窗口**：
+    - 按下 `Win + R` 组合键。
+2. **输入命令**：
+    - 输入 `shell:startup`，然后按 `Enter`。这将打开当前用户的“启动”文件夹。
+3. **添加程序快捷方式**：
+    - 找到你想要在开机时自启动的程序（例如，桌面上的程序），右键点击并选择“创建快捷方式”。
+    - 将该快捷方式复制到打开的“启动”文件夹中。
+
+方法二：使用任务计划程序
+
+1. **打开任务计划程序**：
+    - 在搜索框中输入“任务计划程序”，然后选择它。
+2. **创建基本任务**：
+    - 在右侧的操作窗格中，点击“创建基本任务”。
+    - 按照向导中的步骤填写任务名称和描述。
+3. **设置触发器**：
+    - 选择“当计算机启动时”作为触发器。
+4. **选择操作**：
+    - 选择“启动程序”，然后浏览找到你想要启动的程序。
+5. **完成设置**：
+    - 按照向导完成其他设置，然后点击“完成”。
+
+方法三：使用注册表（高级用户）
+
+1. **打开注册表编辑器**：
+
+    - 按下 `Win + R` 组合键，输入 `regedit`，然后按 `Enter`。
+
+2. **找到自启动路径**：
+
+    - 导航到以下路径：
+
+        ```
+         复制代码
+        HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run
+        ```
+
+3. **添加新项**：
+
+    - 在右侧窗格中，右键点击空白处，选择“新建” -> “字符串值”。
+    - 命名该值为你要自启程序的名称，并双击打开它，输入程序的完整路径。
+
+注意事项
+
+- 自启动程序可能会影响启动速度，请谨慎选择开启的程序。
+- 如果不想自启动的程序，可以再次重复上述步骤进行删除。
+
+## 移动不存在显示屏上的程序
+
+选择要移动的程序,使其焦点在该程序上.按Alt+space(空格)  再按M 然后按方向键移动程序
+
+## 自定义修改组合按键
+
+创建文件
+
+test.ahk
+
+```ahk
+Ctrl & Tab::AltTab ; 
+CapsLock::^Space ;
+
+Ctrl & Space::^+Space ;
+```
+
+
+
+AltTab改为ctrl+tab
+
+caplock改为大小写锁定
+

src/content/spec/about.md

@@ -1,8 +1,9 @@
 # About
+
 This is the demo site for [Fuwari](https://github.com/saicaca/fuwari).
 
 ::github{repo="saicaca/fuwari"}
-
+::github{repo="realmeamadeus/realmeamadeus"}
 > ### Sources of images used in this site
 > - [Unsplash](https://unsplash.com/)
 > - [星と少女](https://www.pixiv.net/artworks/108916539) by [Stella](https://www.pixiv.net/users/93273965)

src/layouts/Layout.astro

@@ -22,9 +22,10 @@ interface Props {
   banner?: string
   description?: string
   lang?: string
+  setOGTypeArticle?: boolean
 }
 
-let { title, banner, description, lang } = Astro.props
+let { title, banner, description, lang, setOGTypeArticle } = Astro.props
 
 // apply a class to the body element to decide the height of the banner, only used for initial page load
 // Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change
@@ -58,10 +59,20 @@ if (!lang) {
   lang = `${siteConfig.lang}`
 }
 const siteLang = lang.replace('_', '-')
+
+const bannerOffsetByPosition = {
+	'top': '30vh',
+	'center': '15vh',
+	'bottom': '0'
+}
+const bannerOffset = bannerOffsetByPosition[siteConfig.banner.position || 'center']
+
 ---
 
 <!DOCTYPE html>
-<html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
+<html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]"
+	  data-overlayscrollbars-initialize
+>
 	<head>
 
 		<title>{pageTitle}</title>
@@ -74,6 +85,11 @@ const siteLang = lang.replace('_', '-')
 		<meta property="og:url" content={Astro.url}>
 		<meta property="og:title" content={pageTitle}>
 		<meta property="og:description" content={description || pageTitle}>
+		{setOGTypeArticle ? (
+        <meta property="og:type" content="article" />
+        ) : (
+        <meta property="og:type" content="website" />
+        )}
 
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:url" content={Astro.url}>
@@ -117,17 +133,22 @@ const siteLang = lang.replace('_', '-')
 		<style define:vars={{ configHue }}></style>  <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
 
 	</head>
-	<body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}>
+	<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
+		  data-overlayscrollbars-initialize
+	>
 		<ConfigCarrier></ConfigCarrier>
 		<GlobalStyles>
-		<div id="banner-wrapper" class="absolute w-full transition-all duration-700">
+		{siteConfig.banner.enable && <div id="banner-wrapper" class="absolute -top-[30vh] w-full transition duration-700 overflow-hidden">
-			<ImageWrapper id="boxtest" alt="Banner image of the blog" class:list={["object-cover h-full", {"hidden": !siteConfig.banner.enable}]}
+			<ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
 						  src={siteConfig.banner.src} position={siteConfig.banner.position}
 			>
 			</ImageWrapper>
-		</div>
+		</div>}
 		<slot />
 		</GlobalStyles>
+
+		<!-- increase the page height during page transition to prevent the scrolling animation from jumping -->
+		<div id="page-height-extend" class="hidden h-[300vh]"></div>
 	</body>
 </html>
 <style is:global>
@@ -136,23 +157,35 @@ const siteLang = lang.replace('_', '-')
 		--page-width: 75rem;
 	}
 </style>
-<style is:global>
+<style is:global define:vars={{ bannerOffset }}>
 @tailwind components;
 @tailwind utilities;
 
 @layer components {
 	.enable-banner.is-home #banner-wrapper {
-		@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
+		@apply h-[var(--banner-height-home)] translate-y-[30vh]
 	}
 	.enable-banner #banner-wrapper {
-		@apply h-[var(--banner-height)]
+		@apply h-[var(--banner-height-home)]
 	}
 
-	.enable-banner.is-home #top-row {
+	.enable-banner.is-home #banner {
-		@apply h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]
+		@apply h-[var(--banner-height-home)] translate-y-0
+	}
+	.enable-banner #banner {
+		@apply h-[var(--banner-height-home)] translate-y-[var(--bannerOffset)]
+	}
+	.enable-banner.is-home #main-grid {
+		@apply translate-y-[30vh];
 	}
 	.enable-banner #top-row {
-		@apply h-[calc(var(--banner-height)_-_4.5rem)]
+		@apply h-[calc(var(--banner-height-home)_-_4.5rem)] transition-all duration-300
+	}
+	.enable-banner.is-home #sidebar-sticky {
+		@apply top-[calc(-30vh_+_1rem)]
+	}
+	.navbar-hidden {
+		@apply opacity-0 -translate-y-16
 	}
 }
 </style>
@@ -211,6 +244,8 @@ function disableAnimation() {
 }
 */
 
+const bannerEnabled = !!document.getElementById('banner-wrapper')
+
 function setClickOutsideToClose(panel: string, ignores: string[]) {
 	document.addEventListener("click", event => {
 		let panelDom = document.getElementById(panel);
@@ -270,11 +305,21 @@ function initCustomScrollbar() {
 	});
 }
 
+function showBanner() {
+	const banner = document.getElementById('banner')
+	if (!banner) {
+		console.error('Failed to find the banner element')
+		return
+	}
+	banner.classList.remove('opacity-0', 'scale-105')
+}
+
 function init() {
 	// disableAnimation()()		// TODO
 	loadTheme();
 	loadHue();
 	initCustomScrollbar();
+	showBanner();
 }
 
 /* Load settings when entering the site */
@@ -300,18 +345,50 @@ const setup = () => {
 	// Remove the delay for the first time page load
 	window.swup.hooks.on('link:click', () => {
 		document.documentElement.style.setProperty('--content-delay', '0ms')
+
+		// prevent elements from overlapping the navbar
+		if (!bannerEnabled) {
+			return
+		}
+		let threshold = window.innerHeight * 0.30 - 72 - 16
+		let navbar = document.getElementById('navbar-wrapper')
+		if (!navbar || !document.body.classList.contains('lg:is-home')) {
+			return
+		}
+		if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+			navbar.classList.add('navbar-hidden')
+		}
 	})
 	window.swup.hooks.on('content:replace', initCustomScrollbar)
 	window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => {
 		// change banner height immediately when a link is clicked
 		const bodyElement = document.querySelector('body')
 		if (pathsEqual(visit.to.url, url('/'))) {
-			bodyElement!.classList.add('is-home');
+			bodyElement!.classList.add('lg:is-home');
 		} else {
-			bodyElement!.classList.remove('is-home');
+			bodyElement!.classList.remove('lg:is-home');
+		}
+
+		// increase the page height during page transition to prevent the scrolling animation from jumping
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.remove('hidden')
+		}
+	});
+	window.swup.hooks.on('page:view', () => {
+		// hide the temp high element when the transition is done
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.remove('hidden')
+		}
+	});
+	window.swup.hooks.on('visit:end', (visit: {to: {url: string}}) => {
+		// execute 1s later
+		const heightExtend = document.getElementById('page-height-extend')
+		if (heightExtend) {
+			heightExtend.classList.add('hidden')
 		}
 	});
-
 }
 if (window?.swup?.hooks) {
 	setup()
@@ -319,6 +396,32 @@ if (window?.swup?.hooks) {
 	document.addEventListener('swup:enable', setup)
 }
 
+let backToTopBtn = document.getElementById('back-to-top-btn');
+let navbar = document.getElementById('navbar-wrapper')
+function scrollFunction() {
+	if (backToTopBtn) {
+		if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
+			backToTopBtn.classList.remove('hide')
+		} else {
+			backToTopBtn.classList.add('hide')
+		}
+	}
+
+	if (!bannerEnabled) return
+	if (navbar) {
+		let threshold = window.innerHeight * 0.30 - 72 - 16
+		if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) {
+			threshold = window.innerHeight * 0.60 - 72 - 16
+		}
+		if (document.body.scrollTop >= threshold || document.documentElement.scrollTop >= threshold) {
+			navbar.classList.add('navbar-hidden')
+		} else {
+			navbar.classList.remove('navbar-hidden')
+		}
+	}
+}
+window.onscroll = scrollFunction
+
 </script>
 
 <script>
@@ -382,14 +485,3 @@ if (window.swup) {
 	document.addEventListener("swup:enable", setup)
 }
 </script>
-
-
-<style is:global lang="stylus">
-#banner-wrapper
-	top: 0
-	opacity: 1
-.banner-closed
-	#banner-wrapper
-		top: -120px
-		opacity: 0
-</style>

src/layouts/MainGridLayout.astro

@@ -12,26 +12,32 @@ interface Props {
   banner?: string
   description?: string
   lang?: string
+  setOGTypeArticle?: boolean;
 }
 
-const { title, banner, description, lang } = Astro.props
+const { title, banner, description, lang, setOGTypeArticle } = Astro.props
 const hasBannerCredit =
   siteConfig.banner.enable && siteConfig.banner.credit.enable
 const hasBannerLink = !!siteConfig.banner.credit.url
 ---
 
-<Layout title={title} banner={banner} description={description} lang={lang}>
+<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
 <slot slot="head" name="head"></slot>
-<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
+<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" class:list={[""]}>
-    mx-auto gap-4 relative px-0 md:px-4"
+    <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
->
-    <div id="top-row" class="relative transition-all duration-700 col-span-2 grid-rows-1" class:list={[""]}>
         <Navbar></Navbar>
+    </div>
+</div>
 
+<div class="absolute w-full" class:list={[{"top-[30vh]": siteConfig.banner.enable, "top-[5.5rem]": !siteConfig.banner.enable}]}>
+    <div class="relative max-w-[var(--page-width)] mx-auto">
+        <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
+    mx-auto gap-4 px-0 md:px-4"
+        >
             <!-- Banner image credit -->
             {hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
                                    class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
-                "px-3 right-0 bottom-0 bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
+                                   "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
             >
                 <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
                 <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
@@ -41,21 +47,25 @@ const hasBannerLink = !!siteConfig.banner.credit.url
                 </Icon>
             </a>}
 
-    </div>
-    <SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
 
-    <div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
+            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
+
+            <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
+                <div id="content-wrapper" class="onload-animation">
                     <!-- the overflow-hidden here prevent long text break the layout-->
                     <!-- make id different from windows.swup global property -->
-        <main id="swup-container" class="transition-swup-fade">
                     <slot></slot>
-        </main>
+                    <div class="footer col-span-2 onload-animation hidden lg:block">
-
-    </div>
-
-    <div id="footer" class="grid-rows-3 col-span-2 mt-4 onload-animation">
                         <Footer></Footer>
                     </div>
+                </div>
+            </main>
+
+            <div class="footer col-span-2 onload-animation block lg:hidden">
+                <Footer></Footer>
+            </div>
+        </div>
         <BackToTop></BackToTop>
+    </div>
 </div>
 </Layout>

src/pages/posts/[...slug].astro

@@ -41,11 +41,11 @@ const jsonLd = {
     url: Astro.site,
   },
   datePublished: formatDateToYYYYMMDD(entry.data.published),
-  inLanguage: (entry.data.language ? entry.data.language.replace('_', '-') : siteConfig.lang.replace('_', '-')),
+  inLanguage: (entry.data.lang ? entry.data.lang.replace('_', '-') : siteConfig.lang.replace('_', '-')),
   // TODO include cover image here
 }
 ---
-<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.language}>
+<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true}>
     <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",

src/types/config.ts

@@ -13,7 +13,7 @@ export type SiteConfig = {
   banner: {
     enable: boolean
     src: string
-    position?: string
+    position?: 'top' | 'center' | 'bottom'
     credit: {
       enable: boolean
       text: string