feat(makrdown): add style for checkbox related

ZL-Asica · ZL-Asica · commit 418b458c5fc5 · 2025-03-15T17:09:02.000-05:00
- Add robust handling of rss setting in &lt;head&gt;.
- Fix not-found page tailwindcss variable issue.
diff --git a/.changeset/soft-bats-appear.md b/.changeset/soft-bats-appear.md
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,25 @@
 # SuzuBlog Changelog
 
+## 1.5.0
+
+### Minor Changes
+
+- Theme cleanup and style refine
+
+  - feat(makrdown): add style for checkbox related
+
+  - 7daad73: style(global): styles clean up and re-structure
+
+    - Move reusable styles into `styles` folder.
+    - Fix custom scroll bar consistence.
+    - Fix minor styling issue and contract issue.
+    - Improve A11Y overall experience.
+    - Remove img min-h limit in markdown. Remember to refine this in the future.
+    - Remove Suspense for `CategoriesTagsList.tsx`. LoadingIndicator is non-used component now.
+
+  - 2548e85: chore: clean up some code
+  - 215b4eb: feat(darkTheme): theme setting only store for 7 days
+
 ## 1.4.3
 
 ### Patch Changes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suzu-blog",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "private": true,
   "packageManager": "pnpm@10.6.3",
   "author": {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -72,14 +72,17 @@ export default function RootLayout(
       <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
 
       {/* If rss set in config */}
-      {config.socialMedia.rss && (
-        <link
-          rel="alternate"
-          type="application/rss+xml"
-          title="RSS Feed"
-          href={`${config.siteUrl}/feed.xml`}
-        />
-      )}
+      {config.socialMedia.rss !== undefined
+        && config.socialMedia.rss !== null
+        && String(config.socialMedia.rss) !== 'false'
+        && (
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="RSS Feed"
+            href={`${config.siteUrl}/feed.xml`}
+          />
+        )}
       {/* Custom js */}
       {config.headerJavascript.map(jsFile => (
         <Script key={jsFile} src={jsFile} strategy="afterInteractive" />
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -26,19 +26,19 @@ function Custom404() {
 
   return (
     <main className="mx-8 mt-[30vh] flex flex-col items-center justify-center text-center">
-      <h1 className="mb-4 text-3xl font-bold text-[var(--sakuraPink)]">
+      <h1 className="mb-4 text-3xl font-bold text-primary-300">
         404 - 页面迷路啦 (；′⌒`)
       </h1>
       <p className="mb-6 text-base leading-7">
         抱歉，您要找的页面已经不见了，或者它从未存在过 🔍
         <br />
-        <span className="text-[var(--skyblue)]">{countdown}</span>
+        <span className="text-secondary-300">{countdown}</span>
         {' '}
         秒后将自动返回首页
       </p>
       <Link
         href="/"
-        className="rounded-sm bg-[var(--skyblue)] px-4 py-2 text-white no-underline transition-all duration-500 hover:scale-110 hover:bg-[var(--skyblue)] hover:text-black"
+        className="rounded-sm bg-secondary-300 px-4 py-2 text-white no-underline transition-all-500 hover:scale-110 bg-hover-secondary hover:text-black"
       >
         返回首页
       </Link>
diff --git a/src/components/article/parser/markdownComponents.tsx b/src/components/article/parser/markdownComponents.tsx
@@ -1,12 +1,8 @@
 import type { ReactNode } from 'react'
 import type { Components as MarkdownComponents } from 'react-markdown'
-
 import { CustomImage, SakuraIcon } from '@/components/ui'
 import { generateHierarchicalSlug, slugPrefix } from '@/services/utils'
-
-import Link from 'next/link'
 import { isValidElement } from 'react'
-
 import { KEY_ICONS } from './keyboardIcons'
 import CodeBlock from './renderCodeBlock'
 import renderFriendLinks from './renderFriendLinks'
@@ -143,6 +139,26 @@ const createMarkdownComponents = (translation: Translation, autoSlug: boolean =
         {children}
       </mark>
     ),
+    // Checkbox related [x] or [ ]
+    input: ({ children, ...props }) => (
+      <label className="relative inline-flex items-center text-center">
+        <input
+          type="checkbox"
+          className="peer form-tick appearance-none h-4 w-4 border border-gray-300 rounded-md checked:bg-primary-400 checked:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-opacity-50"
+          {...props}
+        />
+        <span className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 peer-checked:opacity-100">
+          <svg
+            className="h-4 w-4 text-white"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </span>
+      </label>
+    ),
 
     // List related
     ul: ({ children }) => (
@@ -169,7 +185,7 @@ const createMarkdownComponents = (translation: Translation, autoSlug: boolean =
     a: ({ href = '#', children, ...props }: { href?: string, children?: ReactNode }) => {
       const isInternalLink = typeof href === 'string' && (href.startsWith('/') || href.startsWith('#'))
       return (
-        <Link
+        <a
           href={href}
           target={isInternalLink ? '_self' : '_blank'}
           rel="noopener noreferrer"
@@ -178,12 +194,11 @@ const createMarkdownComponents = (translation: Translation, autoSlug: boolean =
               ? undefined
               : `${translation.newTab}${children?.toString() ?? 'link'}`
           }
-          prefetch={false}
           className="text-hover-primary underline-interactive mx-1 break-words font-semibold text-secondary-500"
           {...(props as Record<string, unknown>)}
         >
           {children}
-        </Link>
+        </a>
       )
     },
 
@@ -195,7 +210,7 @@ const createMarkdownComponents = (translation: Translation, autoSlug: boolean =
         width={500}
         height={700}
         priority={false}
-        className="relative mx-auto my-6 h-auto max-h-[500px] min-h-[200px] w-auto min-w-[200px] max-w-full rounded-xs object-contain shadow-md lg:max-h-[700px] lg:min-h-[300px] lg:min-w-[300px] xl:max-h-[800px] xl:min-h-[400px] xl:min-w-[400px]"
+        className="relative mx-auto my-6 h-auto max-h-[500px] w-auto min-w-[200px] max-w-full rounded-xs object-contain shadow-md lg:max-h-[700px] lg:min-w-[300px] xl:max-h-[800px] xl:min-w-[400px]"
         {...(props as Record<string, unknown>)}
       />
     ),

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "suzu-blog",`
`3`		`- "version": "1.4.3",`
	`3`	`+ "version": "1.5.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"packageManager": "[email protected]",`
`6`	`6`	`"author": {`