🚀 2.7.0 added sequential entry styles to the cards and more

astro.config.mjs

@@ -16,6 +16,8 @@ import swup from "@swup/astro";
 
 import { remarkAddAnchor } from './src/plugins/remark-add-anchor.mjs';
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs';
+import dotenv from 'dotenv';
+dotenv.config();
 
 const { USER_SITE } = await import('./src/consts.ts');
 

docs/CHANGELOG.md

@@ -474,4 +474,46 @@
 - 修复了文章在标签、分类过多时按钮溢出的问题
 - 修复了一堆拼写错误（存在于 2.6.0 的 release 中）
 - 删除了在 LinkCard 中不恰当的图片放大功能
-- 移除了 `transition.scss` ，改用 swup 默认主题代替（我不知道这对改善崩溃问题是否有用）
+- 移除了 `transition.scss` ，改用 swup 默认主题代替（我不知道这对改善崩溃问题是否有用）
+
+## [2.7.0] - 2024-10-12
+
+### Features
+
+- 添加昼夜转换过渡
+- 自定义了博客中的标题 `ID` ，当前命名格式为 `heading-${headingCount}` ，避免了出现同名标题无法跳转的问题
+- 为博客目录功能添加了 "聚焦" 功能，现在目录会根据您当前阅读的部分自动滚动
+- 为博客 `main` 中的卡片添加了逐次进入样式，使用 `sass` 制作：
+
+    ```scss
+    .fade-in-up {
+      opacity: 0;
+      transform: translateY(50px);
+      animation: fadeInUp 0.5s ease forwards;
+
+      @for $i from 1 through 10 {
+        &:nth-child(#{$i}) {
+          animation-delay: #{$i * 0.1}s;
+        }
+      }
+    }
+
+    @keyframes fadeInUp {
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    ```
+
+### Refactored
+
+- 修改了原网站图标
+- 修改了原不规范的文件命名
+- 修改了原不合理的布局
+- 修改了侧边栏按钮的样式，使用 `join` 组合元素
+- 微调 `padding`
+
+### Fix
+
+- 修复了在重名 `ID` 下无法跳转的问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frosti",
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -17,6 +17,7 @@
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.1",
     "@astrojs/vercel": "^7.8.1",
+    "@notionhq/client": "^2.2.15",
     "@playform/compress": "^0.0.13",
     "@swup/astro": "^1.4.1",
     "@swup/parallel-plugin": "^0.4.0",
@@ -30,10 +31,12 @@
     "astro-icon": "^1.1.1",
     "astro-pagefind": "^1.6.0",
     "dayjs": "^1.11.13",
+    "dotenv": "^16.4.5",
     "hastscript": "^9.0.0",
     "i18next": "^23.15.1",
     "i18next-fs-backend": "^2.3.2",
     "katex": "^0.16.11",
+    "marked": "^14.1.2",
     "mdast-util-to-string": "^4.0.0",
     "medium-zoom": "^1.1.0",
     "pagefind": "^1.1.1",

src/components/BaseCard.astro

@@ -24,7 +24,7 @@ const hasTags = tags && tags.length > 0;
 ---
 
 <div
-  class="mb-8 relative left-1/2 transform -translate-x-1/2 overflow-hidden card bg-base-100 shadow-xl"
+  class="relative w-full overflow-hidden card bg-base-100 shadow-xl fade-in-up transition-colors"
   title={title}
 >
   {
@@ -41,7 +41,7 @@ const hasTags = tags && tags.length > 0;
     )
   }
   <div
-    class="main-card relative leading-6 z-10 p-6 md:p-6 lg:p-8 card bg-base-100"
+    class="main-card relative leading-6 z-10 p-6 md:p-6 lg:p-8 card bg-base-100 fade-in-up transition-colors"
   >
     {
       isBlog && (
@@ -58,7 +58,7 @@ const hasTags = tags && tags.length > 0;
                 {badge && <div class="badge badge-primary">{badge}</div>}
               </div>
               {time && (
-                <div class="badge  whitespace-nowrap">{`${time} ${t("label.readTime")}`}</div>
+                <div class="badge whitespace-nowrap">{`${time} ${t("label.readTime")}`}</div>
               )}
             </div>
             <div class="flex items-center justify-between mt-2">

src/components/BaseHead.astro

@@ -16,8 +16,8 @@ const { title, description, image } = Astro.props;
 
 <!-- Global Metadata -->
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=0.9" />
-<link rel="icon" type="image" href="/favicon.ico" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Page Specific Metadata -->

src/components/CategoryCard.astro

@@ -24,20 +24,22 @@ export async function getTagsWithCounts(): Promise<TagCount[]> {
 const tagsWithCounts = await getTagsWithCounts();
 ---
 
-<div class="bg-base-100 shadow-xl w-full mb-8 no-card p-4">
-  <div class="p-4">
+<div class="bg-base-100 shadow-xl w-full mb-8 no-card p-4 transition-colors">
+  <div class="px-4 mb-4">
     <div class="btn btn-sm btn-ghost no-animation w-full font-bold">
       {t("label.categoryCard")}
     </div>
   </div>
   <div class="flex flex-wrap gap-2.5 w-full max-h-[300px] overflow-auto">
     {
       tagsWithCounts.map(({ category, count }) => (
-        <span class="inline">
-          <a href={`/blog/categories/${category}`} class="btn btn-sm">
+        <span class="join">
+          <a href={`/blog/categories/${category}`} class="btn btn-xs join-item">
             {category}
-            <div class="badge badge-accent">{count}</div>
           </a>
+          <div class="btn btn-xs btn-accent no-animation glass bg-accent join-item">
+            {count}
+          </div>
         </span>
       ))
     }

src/components/EnvelopeCard.astro

@@ -22,10 +22,10 @@ const target = "_self";
 ---
 
 <div
-  class="mt-8 relative w-full overflow-hidden card bg-base-100 shadow-xl flex flex-col lg:flex-row"
+  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"
+    class="relative w-full h-auto rounded-0 overflow-hidden card bg-base-100 flex-1 lg:order-1 order-2 flex fade-in-up transition-colors"
   >
     <div class="relative w-full h-full p-6 flex flex-col justify-between">
       <a href={url} target={target}>

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"
+  class="relative footer rounded-xl 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
@@ -21,10 +21,8 @@ import { USER_SITE } from "../consts";
       ></path>
     </svg>
     <p>
-      Copyright © <a
-        href={USER_SITE}
-        target="_blank"
-        class="font-bold">{USER_NAME}</a
+      Copyright © <a href={USER_SITE} target="_blank" class="font-bold"
+        >{USER_NAME}</a
       >
       {new Date().getFullYear()} - All right reserved
     </p>

src/components/License.astro

@@ -4,7 +4,7 @@ import { t } from "i18next";
 ---
 
 <br />
-<div role="alert" class="alert">
+<div role="alert" class="alert transition-colors">
   <svg
     viewBox="0 0 24 24"
     fill="none"

src/components/Header.astro → src/components/Navbar.astro

@@ -1,9 +1,9 @@
 ---
-import Menu from "../components/HeaderMenu.astro";
+import Menu from "../components/NavbarMenu.astro";
 import { SITE_TITLE } from "../consts";
 ---
 
-<div
+<navbar
   class="navbar max-md:translate-y-0 fixed px-2 w-full transform -translate-y-full text-center z-50 transition-transform bg-base-100 shadow-xl"
 >
   <div class="navbar-start">
@@ -58,7 +58,7 @@ import { SITE_TITLE } from "../consts";
       </label>
     </div>
   </div>
-</div>
+</navbar>
 <script>
   // 当用户点击菜单区域外部区域的时候, 关闭菜单
   document.addEventListener("click", function (event) {

src/components/ProfileCard.astro

@@ -6,7 +6,7 @@ import { USER_AVATAR } from "../consts";
 ---
 
 <div
-  class="flex-col gap-4 mb-8 w-full sticky md:sticky lg:relative card bg-base-100 shadow-xl p-4"
+  class="flex-col gap-4 mb-8 w-full sticky md:sticky lg:relative card bg-base-100 shadow-xl p-4 transition-colors"
 >
   <div class="avatar p-4">
     <Image

src/components/ProfileCardFooter.astro

@@ -3,7 +3,7 @@ import { socialIcons } from "../consts.ts";
 import { Icon } from "astro-icon/components";
 ---
 
-<div class="text-center bg-base-200 p-4 rounded-lg gap-4">
+<div class="text-center bg-base-200 p-4 rounded-lg gap-4 transition-colors">
   {
     socialIcons.map((icon) => (
       <a

src/components/ProfileCardMenu.astro

@@ -4,7 +4,7 @@ import { Icon } from "astro-icon/components";
 ---
 
 <ul
-  class="menu bg-base-100 w-full m-0 flex flex-col items-center lg:items-start"
+  class="menu bg-base-100 w-full m-0 flex flex-col items-center lg:items-start transition-colors"
 >
   {
     menuItems.map((item) => (