added style to posts

astro.config.mjs

@@ -12,5 +12,8 @@ export default defineConfig({
       },
     },
   },
-  site: "https://blog.cloverta.top"
+  site: "https://blog.cloverta.top",
+  redirects: {
+    "/": "/zh",
+  },
 })

src/components/ThemeIcon.astro

@@ -103,34 +103,38 @@ const switchHref = "/" + segments.join("/");
 </style>
 
 <script is:inline>
-    const theme = (() => {
+    function applyTheme() {
-        const localStorageTheme = localStorage?.getItem("theme") ?? "";
+    const localStorageTheme = localStorage?.getItem("theme") ?? "";
-        if (["dark", "light"].includes(localStorageTheme)) {
+    let theme = "light";
-            return localStorageTheme;
-        }
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-            return "dark";
-        }
-        return "light";
-    })();
 
-    if (theme === "light") {
+    if (["dark", "light"].includes(localStorageTheme)) {
-        document.documentElement.classList.remove("dark");
+      theme = localStorageTheme;
-    } else {
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-        document.documentElement.classList.add("dark");
+      theme = "dark";
     }
 
+    document.documentElement.classList.toggle("dark", theme === "dark");
     window.localStorage.setItem("theme", theme);
+  }
 
-    const handleToggleClick = () => {
+  function bindThemeToggle() {
-        const element = document.documentElement;
+    const button = document.getElementById("themeToggle");
-        element.classList.toggle("dark");
+    if (!button) return;
 
-        const isDark = element.classList.contains("dark");
+    button.onclick = () => {
-        localStorage.setItem("theme", isDark ? "dark" : "light");
+      const element = document.documentElement;
+      element.classList.toggle("dark");
+
+      const isDark = element.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
     };
+  }
 
-    document
+  applyTheme();
-        .getElementById("themeToggle")
+  bindThemeToggle();
-        ?.addEventListener("click", handleToggleClick);
+
+  document.addEventListener("astro:after-swap", () => {
+    applyTheme();
+    bindThemeToggle();
+  });
 </script>

src/i18n/en.ts

@@ -19,7 +19,7 @@ export default {
     },
     langSwitcher: "中文",
     home: {
-        title: "Welcome in — mind the turn to the left",
+        title: "Welcome in — please mind the gap",
         content: [
             "These few lines speak what the heart would say; Ink and paper end, but thoughts still stay",
             "Welcome to Cloverta's blog.",

src/layouts/MarkdownPostLayout.astro

@@ -1,47 +1,142 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
 import Giscus from "@/components/Giscus.astro";
+import { getLangFromUrl, getTranslations } from "@/i18n";
 import "@/styles/global.css";
+
 const { frontmatter } = Astro.props;
+const lang = getLangFromUrl(Astro.url);
+const t = getTranslations(lang);
 ---
 
 <BaseLayout pageTitle={frontmatter.title}>
-  <h1>{frontmatter.title}</h1>
+  <div class="post-header">
-  <p>{frontmatter.pubDate.toLocaleDateString()}</p>
+    <div class="post-meta">
-  <p><em>{frontmatter.description}</em></p>
+      <h1 class="post-title">{frontmatter.title}</h1>
-  <p>Written by: {frontmatter.author}</p>
+      <p class="description"><em>{frontmatter.description}</em></p>
-  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
+      <p class="meta-line">
+        {t.post.publishedOn}: {frontmatter.pubDate.toLocaleDateString()}
+      </p>
+      <p class="meta-line">{t.post.writtenBy}: {frontmatter.author}</p>
 
-  <div class="tags">
+      <div class="tags">
-    {
+        {
-      frontmatter.tags.map((tag: string) => (
+          frontmatter.tags.map((tag: string) => (
-        <p class="tag">
+            <p class="tag">
-          <a href={`/tags/${tag}`}>{tag}</a>
+              <a href={`/${lang}/tags/${tag}`}>{tag}</a>
-        </p>
+            </p>
-      ))
+          ))
-    }
+        }
+      </div>
+    </div>
+
+    <img
+      src={frontmatter.image.url}
+      alt={frontmatter.image.alt}
+      class="post-cover"
+    />
   </div>
 
   <slot />
 
   <Giscus />
 </BaseLayout>
+
 <style>
   a {
-    color: #00539f;
+    color: var(--post-link-color);
+  }
+
+  .post-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    align-items: start;
+    gap: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .post-meta {
+    min-width: 0;
+  }
+
+  .post-title {
+    margin: 0 0 0.5rem 0;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .description {
+    margin: 0 0 0.7rem 0;
+    opacity: 0.9;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .meta-line {
+    margin: 0.3rem 0;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .post-cover {
+    width: 300px;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 0.4rem;
+    display: block;
   }
 
   .tags {
     display: flex;
     flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.8rem;
+    min-width: 0;
   }
 
   .tag {
-    margin: 0.25em;
+    margin: 0;
-    border: dotted 1px #a1a1a1;
+    padding: 0.22em 0.65em;
-    border-radius: 0.5em;
+    font-size: 0.88rem;
-    padding: 0.5em 1em;
+    line-height: 1.2;
-    font-size: 1.15em;
+    border: 1px dashed #8b6b4a;
-    background-color: #f8fcfd;
+    border-radius: 0;
+    background-color: transparent;
+    max-width: 100%;
+  }
+
+  .tag a {
+    color: #6f4e37;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .tag a:hover {
+    text-decoration: underline;
+  }
+
+  :global(.dark) .tag {
+    border-color: #d8c7a1;
+  }
+
+  :global(.dark) .tag a {
+    color: #e6d8b8;
+  }
+
+  @media (max-width: 560px) {
+    .post-header {
+      grid-template-columns: 1fr;
+    }
+
+    .post-cover {
+      width: 100%;
+      max-width: 100%;
+    }
   }
 </style>