🎉 more theme support -> 2.8.0-rc

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from "astro/config";
+import { CODE_THEME } from "./src/consts.ts";
 import mdx from "@astrojs/mdx";
 import icon from "astro-icon";
 import terser from "@rollup/plugin-terser";
@@ -43,12 +44,12 @@ export default defineConfig({
   }), terser({
     compress: true,
     mangle: true,
-  }), sitemap(), tailwind(), pagefind(), astroI18next(), playformCompress(), partytown()],
+  }), sitemap(), tailwind(), pagefind(), astroI18next(), playformCompress()],
   markdown: {
     shikiConfig: {
       themes: {
-        light: "github-light",
-        dark: "github-dark",
+        light: CODE_THEME.light,
+        dark: CODE_THEME.dark,
       },
       transformers: [
         {

docs/CHANGELOG.md

@@ -527,4 +527,26 @@
 ### Fix
 
 - 修复了滚动问题
-- 修复了在站内跳转时目录中 `active` 保留的问题
+- 修复了在站内跳转时目录中 `active` 保留的问题
+
+## [2.8.0] - 2024-11-3
+
+### Features
+
+- 学习了 Astro 中自定义元素的用法，现在两个交互按钮单独分为 widget 可以重用
+- 在 `consts.ts` 新增了 `SITE_LANG` 作为网站的语言配置
+- 在 `consts.ts` 新增了 `DAIYSUI_THEME` 作为 DaiysUI 的主题配置，详见 https://daisyui.com/docs/themes/ （此内容需要更多适配）
+- 在 `consts.ts` 新增了 `CODE_THEME` 作为 shiki 的主题配置
+
+#### preview
+
+### Refactored
+
+- 侧边栏与导航栏修改
+- 移除了不必要的工具
+- 修改了 active 样式（选择性）
+
+### Fix
+
+- 修复了控制台报错
+- 补上了 `ProjectCard` 缺失的颜色过渡

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frosti",
   "type": "module",
-  "version": "2.7.0",
+  "version": "2.8.0-rc",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -69,4 +69,4 @@
       "@iconify/tools": "^4.0.5"
     }
   }
-}
+}

src/components/BaseCard.astro

@@ -25,7 +25,6 @@ const hasTags = tags && tags.length > 0;
 
 <div
   class="relative w-full overflow-hidden card bg-base-100 shadow-xl fade-in-up transition-colors"
-  title={title}
 >
   {
     image && (

src/components/Footer.astro

@@ -4,7 +4,7 @@ import { USER_SITE } from "../consts";
 ---
 
 <footer
-  class="relative footer rounded-xl gap-0 items-start card bg-base-100 shadow-xl p-8 items-center fade-in-up transition-colors"
+  class="relative footer gap-0 items-start card bg-base-100 shadow-xl p-8 items-center fade-in-up transition-colors"
 >
   <aside class="grid-flow-col items-center">
     <svg

src/components/Navbar.astro

@@ -1,5 +1,6 @@
 ---
 import Menu from "../components/NavbarMenu.astro";
+import ThemeButton from "../widget/ThemeButton.astro";
 import { SITE_TITLE } from "../consts";
 ---
 
@@ -33,30 +34,7 @@ import { SITE_TITLE } from "../consts";
     <a class="btn btn-ghost text-xl" href="/">{SITE_TITLE}</a>
   </div>
   <div class="navbar-end">
-    <div class="flex justify-center card w-12 h-12">
-      <label for="themeToggle2" id="themeLabel2" class="hidden"
-        ><span class="sr-only">Theme Toggle</span>
-        <input type="checkbox" id="themeToggle2" />
-        <svg
-          class="swap-on fill-current w-10 h-10"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-          ></path>
-        </svg>
-        <svg
-          class="swap-off fill-current w-10 h-10"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-          ></path>
-        </svg>
-      </label>
-    </div>
+    <ThemeButton id="navbar-theme" className="w-auto" />
   </div>
 </navbar>
 <script>

src/components/ProjectCard.astro

@@ -4,10 +4,10 @@ const { title, image, desc, url, badge, target = "_blank" } = Astro.props;
 ---
 
 <div
-  class="relative w-full overflow-hidden card bg-base-100 shadow-xl flex flex-col lg:flex-row fade-in-up"
+  class="relative w-full overflow-hidden card bg-base-100 shadow-xl flex flex-col lg:flex-row fade-in-up transition-colors"
 >
   <div
-    class="relative w-full h-auto rounded-3xl overflow-hidden card bg-base-100 flex-1 lg:order-1 order-2 flex fade-in-up"
+    class="relative w-full h-auto rounded-3xl overflow-hidden card bg-base-100 flex-1 lg:order-1 order-2 flex fade-in-up transition-colors"
   >
     <div
       class="envelope-back relative w-full h-full p-6 flex flex-col justify-between"

src/components/SidebarTool.astro → src/components/ToolCard.astro

@@ -1,14 +1,17 @@
 ---
-import ThemeIcon from "../components/ThemeIcon.astro";
+import ThemeButton from "../widget/ThemeButton.astro";
+import BackToTopButton from "../widget/BackToTopButton.astro";
 ---
 
 <div class="flex-col gap-4 w-full sticky top-8">
   <div
     class="grid gap-4 grid-cols-2 md:grid-cols-1 lg:grid-cols-2 justify-center mb-b w-full max-h-[600px] overflow-hide card bg-base-100 shadow-xl p-4 transition-colors"
     id="button-box"
   >
-    <ThemeIcon />
+    <BackToTopButton id="back-button" className="card" />
+    <ThemeButton id="side-theme-button" className="card" />
   </div>
+
   <div
     class="mb-b w-full max-h-[65vh] overflow-hide top-8 card bg-base-100 shadow-xl p-4 menu transition-colors"
     id="content-box"
@@ -84,7 +87,9 @@ import ThemeIcon from "../components/ThemeIcon.astro";
         const currentHeading = document.querySelector(
           `a[href="#${headings[i].id}"]`,
         ) as HTMLElement;
-        totalHeight += currentHeading.offsetHeight;
+        if (currentHeading) {
+          totalHeight += currentHeading.offsetHeight;
+        }
       }
       return totalHeight;
     };

src/consts.ts

@@ -2,6 +2,7 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 // Site title and description
+export const SITE_LANG = "en";
 export const SITE_TAB = "Frosti";
 export const SITE_TITLE = "Frosti 🧊";
 export const SITE_DESCRIPTION = "A blog template";
@@ -15,6 +16,16 @@ export const USER_AVATAR = "/profile.webp";
 // Server and transition settings
 export const SERVER_URL = "https://demo.saroprock.com";
 
+// Theme settings
+export const DAISYUI_THEME = {
+  light: "winter",
+  dark: "black",
+}
+export const CODE_THEME = {
+  light: "github-light",
+  dark: "github-dark",
+}
+
 // Menu items for navigation
 export const menuItems = [
   { id: "home", text: "Home", href: "/", svg: "home", target: "_self" }, // Home page

src/layouts/BaseLayout.astro

@@ -7,29 +7,49 @@ import Navbar from "../components/Navbar.astro";
 import Footer from "../components/Footer.astro";
 import TagCard from "../components/TagCard.astro";
 import CategoryCard from "../components/CategoryCard.astro";
-import SidebarTool from "../components/SidebarTool.astro";
-import { SITE_TAB, SITE_TITLE, SITE_DESCRIPTION } from "../consts";
+import ToolCard from "../components/ToolCard.astro";
+import {
+  SITE_LANG,
+  SITE_TAB,
+  SITE_TITLE,
+  SITE_DESCRIPTION,
+  DAISYUI_THEME,
+} from "../consts";
 import i18next, { changeLanguage } from "i18next";
-
-changeLanguage("en");
+changeLanguage(SITE_LANG);
 const { title, image, includeSidebar = true } = Astro.props;
 ---
 
 <!doctype html>
-<html lang={i18next.language} class="bg-base-300" data-theme="winter">
+<html
+  lang={i18next.language}
+  class="bg-base-300"
+  data-light={DAISYUI_THEME.light}
+  data-dark={DAISYUI_THEME.dark}
+  data-theme="winter"
+  data-theme-type="light"
+>
   <head>
     <meta charset="UTF-8" />
     <title class="sr-only">{`${title} - ${SITE_TAB}`}</title>
     <script is:inline>
       (function () {
-        const storedTheme = localStorage.getItem("theme");
+        let storedTheme = localStorage.getItem("theme");
         const userPreferredTheme = window.matchMedia(
           "(prefers-color-scheme: dark)",
         ).matches
-          ? "winter"
-          : "dracula";
+          ? "light"
+          : "dark";
+        const light = document.documentElement.dataset.light;
+        const dark = document.documentElement.dataset.dark;
+        if (storedTheme != "light" && storedTheme != "dark") {
+          storedTheme = "light";
+          localStorage.setItem("theme", storedTheme);
+        }
         const theme = storedTheme || userPreferredTheme;
-        document.documentElement.setAttribute("data-theme", theme);
+        const currentTheme = theme === "light" ? light : dark;
+        document.documentElement.setAttribute("data-theme-type", theme);
+        document.documentElement.setAttribute("data-theme", currentTheme);
       })();
     </script>
     <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} image={image} />
@@ -49,7 +69,7 @@ const { title, image, includeSidebar = true } = Astro.props;
                 <Profile />
                 <CategoryCard />
                 <TagCard />
-                <SidebarTool />
+                <ToolCard />
               </>
             )
           }
@@ -131,7 +151,7 @@ const { title, image, includeSidebar = true } = Astro.props;
   });
 
   document.addEventListener("DOMContentLoaded", () => {
-    const astroPageLoadEvent = new Event("swup:page:view");
-    document.dispatchEvent(astroPageLoadEvent);
+    const ContentLoadEvent = new Event("swup:page:view");
+    document.dispatchEvent(ContentLoadEvent);
   });
 </script>

src/styles/global.scss

@@ -59,7 +59,16 @@ a {
   @apply my-2;
 }
 
-html[data-theme="dracula"] {
+html[data-theme-type="light"] {
+  #content-box {
+    .active {
+      color: oklch(var(--n));
+      background-color: oklch(var(--b3));
+    }
+  }
+}
+
+html[data-theme-type="dark"] {
   --pagefind-ui-primary: oklch(var(--nc));
   --pagefind-ui-text: oklch(var(--nc));
   --pagefind-ui-background: oklch(var(--b1));