From 7fa06f41279b514f60c360f2f70564df615f00e9 Mon Sep 17 00:00:00 2001
From: Guoqi Sun <sun412926@gmail.com>
Date: Sun, 22 Dec 2024 23:08:42 +0800
Subject: [PATCH] refactor: remove code background

---
 src/components/astro/comments.astro           | 12 ++-
 src/components/astro/footer.astro             |  2 +-
 src/components/astro/intro.astro              |  2 +-
 .../astro/{blog.astro => recent-blogs.astro}  |  0
 src/components/astro/tag.astro                | 36 +++++----
 src/components/react/code-background.tsx      | 74 -------------------
 src/layouts/base.astro                        |  2 -
 src/layouts/main.astro                        | 10 +--
 src/pages/[lang]/about/index.astro            |  2 +-
 src/pages/[lang]/archive/index.astro          | 32 ++++----
 src/pages/[lang]/index.astro                  |  4 +-
 src/pages/[lang]/posts/[...slug].astro        |  9 ++-
 12 files changed, 52 insertions(+), 133 deletions(-)
 rename src/components/astro/{blog.astro => recent-blogs.astro} (100%)
 delete mode 100644 src/components/react/code-background.tsx

diff --git a/src/components/astro/comments.astro b/src/components/astro/comments.astro
index a7919aa..079526b 100644
--- a/src/components/astro/comments.astro
+++ b/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 && (
-      <Twikoo client:only="react" />
-    )
-  }
-</div>
+{
+  common.comments.enabled && common.comments.twikoo.enabled && (
+    <Twikoo client:only="react" />
+  )
+}
diff --git a/src/components/astro/footer.astro b/src/components/astro/footer.astro
index a75008c..571cc46 100644
--- a/src/components/astro/footer.astro
+++ b/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>
 
   {
diff --git a/src/components/astro/intro.astro b/src/components/astro/intro.astro
index 3ad621b..631ae56 100644
--- a/src/components/astro/intro.astro
+++ b/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>
diff --git a/src/components/astro/blog.astro b/src/components/astro/recent-blogs.astro
similarity index 100%
rename from src/components/astro/blog.astro
rename to src/components/astro/recent-blogs.astro
diff --git a/src/components/astro/tag.astro b/src/components/astro/tag.astro
index 8e7f9e4..ec4dfda 100644
--- a/src/components/astro/tag.astro
+++ b/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 ? (
-        <ul class="space-y-4">
-          {filteredPosts.map((post: any) => (
-            <PostList
-              post={post}
-              lang={lang}
-              dateFormat="YYYY-MM-DD"
-              dateWidth="w-32"
-            />
-          ))}
-        </ul>
-      ) : (
-        <p class="text-gray-500">{t("tag.no_posts")}</p>
-      )
-    }
-  </div>
+  {
+    filteredPosts.length > 0 ? (
+      <ul class="space-y-4">
+        {filteredPosts.map((post: any) => (
+          <PostList
+            post={post}
+            lang={lang}
+            dateFormat="YYYY-MM-DD"
+            dateWidth="w-32"
+          />
+        ))}
+      </ul>
+    ) : (
+      <p class="text-gray-500">{t("tag.no_posts")}</p>
+    )
+  }
 </MainLayout>
diff --git a/src/components/react/code-background.tsx b/src/components/react/code-background.tsx
deleted file mode 100644
index c9dd968..0000000
--- a/src/components/react/code-background.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 3d71f4c..4582ea6 100644
--- a/src/layouts/base.astro
+++ b/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>
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index 1422dc5..3904911 100644
--- a/src/layouts/main.astro
+++ b/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 />
-      <Navigation />
-      <slot />
+    <Header />
+    <Navigation />
+    <slot />
+    <div class="my-10">
+      {needComment && <Comments />}
     </div>
-    {needComment && <Comments />}
   </main>
 </BaseLayout>
diff --git a/src/pages/[lang]/about/index.astro b/src/pages/[lang]/about/index.astro
index 0e65868..70a6d14 100644
--- a/src/pages/[lang]/about/index.astro
+++ b/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>
diff --git a/src/pages/[lang]/archive/index.astro b/src/pages/[lang]/archive/index.astro
index 8831f5a..bd82f7b 100644
--- a/src/pages/[lang]/archive/index.astro
+++ b/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) => (
-        <div class="year-group my-8">
-          <h2 class="my-4 text-2xl font-bold">{year}</h2>
-          {postsByYear[year].map((post: any) => (
-            <PostList
-              post={post}
-              lang={lang}
-              dateFormat="MM-DD"
-              dateWidth="w-20"
-            />
-          ))}
-        </div>
-      ))
-    }
-  </div>
+  {
+    years.map((year) => (
+      <div class="year-group my-8">
+        <h2 class="my-4 text-2xl font-bold">{year}</h2>
+        {postsByYear[year].map((post: any) => (
+          <PostList
+            post={post}
+            lang={lang}
+            dateFormat="MM-DD"
+            dateWidth="w-20"
+          />
+        ))}
+      </div>
+    ))
+  }
 </MainLayout>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 4385571..97ac78f 100644
--- a/src/pages/[lang]/index.astro
+++ b/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>
diff --git a/src/pages/[lang]/posts/[...slug].astro b/src/pages/[lang]/posts/[...slug].astro
index 35f810b..876ae97 100644
--- a/src/pages/[lang]/posts/[...slug].astro
+++ b/src/pages/[lang]/posts/[...slug].astro
@@ -31,9 +31,7 @@ const { Content } = await render(post)
 ---
 
 <MainLayout {...post.data}>
-  <article
-    class="prose relative z-10 w-full max-w-3xl overflow-hidden dark:prose-invert"
-  >
+  <article class="prose 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>