refactor: remove code background

src/components/astro/comments.astro

@@ -4,10 +4,8 @@ import { common } from "~/config"
 import "~/styles/comment.css"
 ---
 
-<div class="relative z-10 my-10">
+{
-  {
+  common.comments.enabled && common.comments.twikoo.enabled && (
-    common.comments.enabled && common.comments.twikoo.enabled && (
+    <Twikoo client:only="react" />
-      <Twikoo client:only="react" />
+  )
-    )
+}
-  }
-</div>

src/components/astro/footer.astro

@@ -2,7 +2,7 @@
 const currentYear = new Date().getFullYear()
 ---
 
-<footer class="relative z-10 flex flex-wrap items-center gap-1 py-10">
+<footer class="flex flex-wrap items-center gap-1 py-10">
   <p>&copy; {currentYear}</p>
 
   {

src/components/astro/intro.astro

@@ -7,6 +7,6 @@ const lang = getLangFromUrl(Astro.url)
 const IntroContent = lang === "zh" ? IntroContentZh : IntroContentEn
 ---
 
-<div class="relative z-10 my-10">
+<div class="my-10">
   <IntroContent />
 </div>

src/components/astro/tag.astro

@@ -17,24 +17,22 @@ const filteredPosts = posts.filter((post: any) => post.data.tags?.includes(tag))
 ---
 
 <MainLayout>
-  <div class="relative z-10">
+  <div class="my-9 mt-2 text-2xl font-semibold">#{tag}</div>
-    <div class="my-9 mt-2 text-2xl font-semibold">#{tag}</div>
 
-    {
+  {
-      filteredPosts.length > 0 ? (
+    filteredPosts.length > 0 ? (
-        <ul class="space-y-4">
+      <ul class="space-y-4">
-          {filteredPosts.map((post: any) => (
+        {filteredPosts.map((post: any) => (
-            <PostList
+          <PostList
-              post={post}
+            post={post}
-              lang={lang}
+            lang={lang}
-              dateFormat="YYYY-MM-DD"
+            dateFormat="YYYY-MM-DD"
-              dateWidth="w-32"
+            dateWidth="w-32"
-            />
+          />
-          ))}
+        ))}
-        </ul>
+      </ul>
-      ) : (
+    ) : (
-        <p class="text-gray-500">{t("tag.no_posts")}</p>
+      <p class="text-gray-500">{t("tag.no_posts")}</p>
-      )
+    )
-    }
+  }
-  </div>
 </MainLayout>

src/components/react/code-background.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useState } from "react"
-
-export function CodeBackground() {
-  const charGroups = {
-    brackets: {
-      chars: ["{", "}", "(", ")", "[", "]", "<", ">"],
-      weight: 3,
-    },
-    operators: {
-      chars: ["=", "+", "-", "*", "/", "%", "=>", "&&", "||", "|", "&", "..."],
-      weight: 2,
-    },
-    punctuation: {
-      chars: [".", ";", ":", ","],
-      weight: 4,
-    },
-    keywords: {
-      chars: [
-        "const",
-        "let",
-        "var",
-        "function",
-        "if",
-        "else",
-        "return",
-        "class",
-        "import",
-        "export",
-        "from",
-        "async",
-        "await",
-        "try",
-        "catch",
-        "interface",
-        "type",
-        "extends",
-        "implements",
-      ],
-      weight: 1,
-    },
-    values: {
-      chars: ["null", "undefined", "true", "false", "void", "any", "never"],
-      weight: 1,
-    },
-  }
-
-  const [backgroundChars, setBackgroundChars] = useState<string[]>([])
-
-  useEffect(() => {
-    const getWeightedRandomChar = () => {
-      const weightedChars = Object.values(charGroups).reduce((acc, group) => {
-        const chars = Array(group.weight).fill(group.chars).flat()
-        return [...acc, ...chars]
-      }, [] as string[])
-      return weightedChars[Math.floor(Math.random() * weightedChars.length)]
-    }
-
-    const chars = new Array(2000).fill(null).map(() => getWeightedRandomChar())
-    setBackgroundChars(chars)
-  }, [])
-
-  return (
-    <div className="fixed inset-0 z-0 flex h-screen w-screen select-none flex-wrap overflow-hidden">
-      {backgroundChars.map((char, index) => (
-        <span
-          key={index}
-          className="px-1 text-sm text-transparent duration-[0.8s] hover:text-black/50 hover:duration-0 dark:hover:text-white/50"
-        >
-          {char}
-        </span>
-      ))}
-    </div>
-  )
-}

src/layouts/base.astro

@@ -1,7 +1,6 @@
 ---
 import "~/styles/globals.css"
 import { NoiseBackground } from "~/components/react/noise-background"
-import { CodeBackground } from "~/components/react/code-background"
 import { getLangFromUrl } from "~/i18n/utils"
 import { GoogleAnalytics } from "astro-google-analytics"
 import { en, zh } from "~/config"
@@ -85,6 +84,5 @@ const config = lang === "zh" ? zh : en
   >
     <slot />
     <NoiseBackground />
-    <CodeBackground client:load />
   </body>
 </html>

src/layouts/main.astro

@@ -16,11 +16,11 @@ const openGraphImage = !ogImage ? `/og/${filename}.png` : ogImage
   needComment={needComment}
 >
   <main class="max-auto mb-10 w-full max-w-3xl">
-    <div class="relative z-10">
+    <Header />
-      <Header />
+    <Navigation />
-      <Navigation />
+    <slot />
-      <slot />
+    <div class="my-10">
+      {needComment && <Comments />}
     </div>
-    {needComment && <Comments />}
   </main>
 </BaseLayout>

src/pages/[lang]/about/index.astro

@@ -21,7 +21,7 @@ const ogImage = "https://sunguoqi.com/me.png"
   ogImage={ogImage}
   needComment={true}
 >
-  <div class="prose relative z-10 dark:prose-invert">
+  <div class="prose dark:prose-invert">
     <AboutContent />
   </div>
 </MainLayout>

src/pages/[lang]/archive/index.astro

@@ -29,21 +29,19 @@ const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a))
 ---
 
 <MainLayout>
-  <div class="relative z-10">
+  {
-    {
+    years.map((year) => (
-      years.map((year) => (
+      <div class="year-group my-8">
-        <div class="year-group my-8">
+        <h2 class="my-4 text-2xl font-bold">{year}</h2>
-          <h2 class="my-4 text-2xl font-bold">{year}</h2>
+        {postsByYear[year].map((post: any) => (
-          {postsByYear[year].map((post: any) => (
+          <PostList
-            <PostList
+            post={post}
-              post={post}
+            lang={lang}
-              lang={lang}
+            dateFormat="MM-DD"
-              dateFormat="MM-DD"
+            dateWidth="w-20"
-              dateWidth="w-20"
+          />
-            />
+        ))}
-          ))}
+      </div>
-        </div>
+    ))
-      ))
+  }
-    }
-  </div>
 </MainLayout>

src/pages/[lang]/index.astro

@@ -1,7 +1,7 @@
 ---
-import Blog from "~/components/astro/blog.astro"
 import Footer from "~/components/astro/footer.astro"
 import Intro from "~/components/astro/intro.astro"
+import RecentBlogs from "~/components/astro/recent-blogs.astro"
 import MainLayout from "~/layouts/main.astro"
 import { getLanguagePaths } from "~/utils/langs"
 
@@ -12,6 +12,6 @@ export function getStaticPaths() {
 
 <MainLayout>
   <Intro />
-  <Blog />
+  <RecentBlogs />
   <Footer />
 </MainLayout>

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

@@ -31,9 +31,7 @@ const { Content } = await render(post)
 ---
 
 <MainLayout {...post.data}>
-  <article
+  <article class="prose w-full max-w-3xl overflow-hidden dark:prose-invert">
-    class="prose relative z-10 w-full max-w-3xl overflow-hidden dark:prose-invert"
-  >
     <div class="flex flex-col gap-2">
       <h2 class="!my-0 text-3xl font-semibold">{post.data.title}</h2>
       <div class="my-3 text-gray-500 dark:text-white/80">
@@ -54,6 +52,9 @@ const { Content } = await render(post)
         ))
       }
     </div>
-    <Comments />
+
+    <div class="my-10">
+      <Comments />
+    </div>
   </article>
 </MainLayout>