- {tag}
+
+
#{tag}
+
+ {
+ filteredPosts.length > 0 ? (
+
+ {filteredPosts.map((post: any) => (
+
+ ))}
+
+ ) : (
+
{t("tag.no_posts")}
+ )
+ }
- {
- filteredPosts.length > 0 ? (
-
- ) : (
-
{t("tag.no_posts")}
- )
- }
diff --git a/src/components/react/code-background.tsx b/src/components/react/code-background.tsx
new file mode 100644
index 0000000..c9dd968
--- /dev/null
+++ b/src/components/react/code-background.tsx
@@ -0,0 +1,74 @@
+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
([])
+
+ 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 (
+
+ {backgroundChars.map((char, index) => (
+
+ {char}
+
+ ))}
+
+ )
+}
diff --git a/src/components/react/noise-background.tsx b/src/components/react/noise-background.tsx
index 93a9547..d85373f 100644
--- a/src/components/react/noise-background.tsx
+++ b/src/components/react/noise-background.tsx
@@ -1,5 +1,5 @@
export function NoiseBackground() {
return (
-
+
)
}
diff --git a/src/config/en/about.mdx b/src/config/en/about.mdx
index f1accec..849d9c6 100644
--- a/src/config/en/about.mdx
+++ b/src/config/en/about.mdx
@@ -1,6 +1,6 @@
export const title = "About Me"
-## {title}
+{title}
![]( "关于我")
-
-
-
-
-
+
+
+
+
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index 41fbc4d..8359a94 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -10,8 +10,10 @@ const openGraphImage = !ogImage ? `/og/${filename}.png` : ogImage
-
-
-
+
+
+
+
+
diff --git a/src/pages/[lang]/about/index.astro b/src/pages/[lang]/about/index.astro
index c583ce7..8b16074 100644
--- a/src/pages/[lang]/about/index.astro
+++ b/src/pages/[lang]/about/index.astro
@@ -16,7 +16,7 @@ const ogImage = "https://sunguoqi.com/me.png"
---
-
+
diff --git a/src/pages/[lang]/archive/index.astro b/src/pages/[lang]/archive/index.astro
index ede0fbe..8831f5a 100644
--- a/src/pages/[lang]/archive/index.astro
+++ b/src/pages/[lang]/archive/index.astro
@@ -1,15 +1,16 @@
---
+import PostList from "~/components/astro/post-list.astro"
import { getLangFromUrl } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
-import { formatDate, getPostsByLocale } from "~/utils"
+import { getPostsByLocale } from "~/utils"
import { getLanguagePaths } from "~/utils/langs"
+const lang = getLangFromUrl(Astro.url)
+
export function getStaticPaths() {
return getLanguagePaths()
}
-const lang = getLangFromUrl(Astro.url)
-
const posts = await getPostsByLocale(lang)
const postsByYear = posts.reduce(
@@ -28,23 +29,19 @@ const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a))
---
-
+
{
years.map((year) => (
-
-
{year}
-
+
+
{year}
+ {postsByYear[year].map((post: any) => (
+
+ ))}
))
}
diff --git a/src/pages/[lang]/posts/[...slug].astro b/src/pages/[lang]/posts/[...slug].astro
index 200da2e..1d2bc24 100644
--- a/src/pages/[lang]/posts/[...slug].astro
+++ b/src/pages/[lang]/posts/[...slug].astro
@@ -1,8 +1,10 @@
---
import { langs } from "~/i18n/ui"
+import { getLangFromUrl } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
import "~/styles/post.css"
-import { getPostsByLocale } from "~/utils"
+import "~/styles/post.scss"
+import { formatDate, getPostsByLocale } from "~/utils"
export async function getStaticPaths() {
const allPaths = []
@@ -19,11 +21,30 @@ export async function getStaticPaths() {
return allPaths
}
+const lang = getLangFromUrl(Astro.url)
+
const { post } = Astro.props
---
-
-
+
+
+
{post.data.title}
+
+ {formatDate(post.data.pubDate)}
+
+
+ {
+ post.data.tags.map((tag: string) => (
+
+ #{tag}
+
+ ))
+ }
+
diff --git a/src/pages/[lang]/tags/index.astro b/src/pages/[lang]/tags/index.astro
deleted file mode 100644
index a29753b..0000000
--- a/src/pages/[lang]/tags/index.astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-import { getLangFromUrl } from "~/i18n/utils"
-import MainLayout from "~/layouts/main.astro"
-import { getPostsByLocale } from "~/utils"
-import { getLanguagePaths } from "~/utils/langs"
-
-export function getStaticPaths() {
- return getLanguagePaths()
-}
-
-const lang = getLangFromUrl(Astro.url)
-const posts = await getPostsByLocale(lang)
-const tags = [...new Set(posts.map((post: any) => post.data.tags).flat())]
----
-
-
-
- {
- tags.map((tag) => (
-
- {tag}
-
- ))
- }
-
diff --git a/src/styles/post.css b/src/styles/post.css
index e3befd8..2ca9e1a 100644
--- a/src/styles/post.css
+++ b/src/styles/post.css
@@ -1,5 +1,5 @@
article code {
- @apply rounded bg-gray-100 px-1 dark:bg-gray-900;
+ @apply rounded bg-orange-500/50 px-1 dark:bg-orange-500/80;
}
article code::before,
diff --git a/src/styles/post.scss b/src/styles/post.scss
new file mode 100644
index 0000000..df83684
--- /dev/null
+++ b/src/styles/post.scss
@@ -0,0 +1,5 @@
+article {
+ h2 {
+ margin: 2rem 0 !important;
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c86e485..f6fe7a9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,13 +1,21 @@
import { getCollection } from "astro:content"
-export const formatDate = (date: Date | string | undefined): string => {
+export const formatDate = (
+ date: Date | string | undefined,
+ format: string = "YYYY-MM-DD",
+): string => {
const validDate = date ? new Date(date) : new Date()
- const year = validDate.getFullYear()
- const month = String(validDate.getMonth() + 1).padStart(2, "0")
- const day = String(validDate.getDate()).padStart(2, "0")
+ const tokens: Record
= {
+ YYYY: validDate.getFullYear().toString(),
+ MM: String(validDate.getMonth() + 1).padStart(2, "0"),
+ DD: String(validDate.getDate()).padStart(2, "0"),
+ HH: String(validDate.getHours()).padStart(2, "0"),
+ mm: String(validDate.getMinutes()).padStart(2, "0"),
+ ss: String(validDate.getSeconds()).padStart(2, "0"),
+ }
- return `${year}-${month}-${day}`
+ return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => tokens[match])
}
export const getPostsByLocale = async (locale: string) => {