chore: upgrade alauda doom

package.json

@@ -2,7 +2,7 @@
   "name": "doomslayer",
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@alauda/doom": "^1.12.7",
+    "@alauda/doom": "^1.17.1",
     "@tailwindcss/postcss": "^4.1.12",
     "@ts-stack/markdown": "^1.5.0",
     "autoprefixer": "^10.4.21",

styles/index.css

@@ -1,55 +1,194 @@
-@import "tailwindcss";
-
-.editLink {
-  color: var(--rp-c-brand);
-  text-decoration: none;
-  font-size: 15px;
-  font-weight: 500;
-  transition: all 0.2s ease-in-out;
-  padding-left: 12px;
-}
-
-.editLink:hover {
-  color: var(--rp-c-brand-dark);
-}
-
-.paginationItem {
-  font-weight: 500;
-  cursor: pointer;
-  font-size: var(--text-sm);
-  line-height: var(--tw-leading, var(--text-sm--line-height));
-
-  --tw-font-weight: var(--font-weight-medium) /* 500 */;
-  font-weight: var(--font-weight-medium) /* 500 */;
-
-  margin-inline: calc(var(--spacing) * 1.5) /* 0.375rem = 6px */;
-  padding-inline: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
-  padding-block: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
-  display: flex;
-  align-items: center;
-}
-
-.paginationItem:hover {
-  background-color: var(--rp-c-bg-soft);
-  cursor: pointer;
-  color: var(--rp-c-brand-dark);
-  border-radius: 12px;
-}
-
-.paginationItem.active {
-  background-color: var(--rp-c-bg-soft);
-  cursor: pointer;
-  color: var(--rp-c-brand-dark);
-  border-radius: 12px;
-}
-
-.paginationItem.disabled {
-  cursor: not-allowed;
-  color: var(--rp-c-gray);
-  background-color: transparent;
-  border: none;
-}
-
-.rp-font-bold {
-  font-weight: 600;
-}
+@import "tailwindcss";
+
+.editLink {
+  color: var(--rp-c-brand);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+  padding-left: 12px;
+}
+
+.editLink:hover {
+  color: var(--rp-c-brand-dark);
+}
+
+.paginationItem {
+  font-weight: 500;
+  cursor: pointer;
+  font-size: var(--text-sm);
+  line-height: var(--tw-leading, var(--text-sm--line-height));
+
+  --tw-font-weight: var(--font-weight-medium) /* 500 */;
+  font-weight: var(--font-weight-medium) /* 500 */;
+
+  margin-inline: calc(var(--spacing) * 1.5) /* 0.375rem = 6px */;
+  padding-inline: calc(var(--spacing) * 3) /* 0.75rem = 12px */;
+  padding-block: calc(var(--spacing) * 2) /* 0.5rem = 8px */;
+  display: flex;
+  align-items: center;
+}
+
+.paginationItem:hover {
+  background-color: var(--rp-c-bg-soft);
+  cursor: pointer;
+  color: var(--rp-c-brand-dark);
+  border-radius: var(--rp-radius);
+}
+
+.paginationItem.active {
+  background-color: var(--rp-c-bg-soft);
+  cursor: pointer;
+  color: var(--rp-c-brand-dark);
+  border-radius: var(--rp-radius);
+}
+
+.paginationItem.disabled {
+  cursor: not-allowed;
+  color: var(--rp-c-gray);
+  background-color: transparent;
+  border: none;
+}
+
+.rp-font-bold {
+  font-weight: 600;
+}
+
+.card {
+  display: block;
+  border: 1px solid var(--rp-c-divider-light);
+  border-radius: var(--rp-radius);
+  background-color: var(--rp-c-bg);
+  padding: 1rem;
+}
+
+.card__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  color: var(--rp-c-text-1);
+}
+
+.card__content {
+  color: var(--rp-c-text-2);
+}
+
+.link-card {
+  display: block;
+  border-bottom: 1px solid var(--rp-c-divider-light);
+  background-color: var(--rp-c-bg);
+  padding: 1.25rem;
+  text-decoration: none;
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.link-card:hover {
+  background-color: var(--rp-c-bg-soft);
+}
+
+.link-card__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--rp-c-text-1);
+  line-height: 1.75rem;
+}
+
+.link-card__description {
+  color: var(--rp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.post-meta {
+  display: flex;
+  font-size: 0.875rem;
+  color: var(--rp-c-text-3);
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  .post-meta {
+    line-height: 2rem;
+  }
+}
+
+.breadcrumb {
+  margin-bottom: 2.5rem;
+}
+
+.home-footer {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  width: 100%;
+  border-top: 1px solid var(--rp-c-divider-light);
+}
+
+@media (min-width: 640px) {
+  .home-footer {
+    padding: 2rem;
+  }
+}
+
+.home-footer__content {
+  margin: auto;
+  width: 100%;
+  text-align: center;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--rp-c-text-2);
+}
+
+.rp-doc-layout__menu {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background-color: var(--rp-c-bg);
+  border-bottom: 1px solid var(--rp-c-divider-light);
+  padding: 0.75rem 1rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (max-width: 1280px) {
+  .rp-doc-layout__menu {
+    display: flex;
+  }
+}
+
+.rp-doc-layout__menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--rp-c-text-1);
+  cursor: pointer;
+  border-radius: var(--rp-radius);
+  transition: background-color 0.2s;
+}
+
+.rp-doc-layout__menu-button:hover {
+  background-color: var(--rp-c-bg-soft);
+}
+
+.rp-doc-layout__menu-button:active {
+  background-color: var(--rp-c-bg-mute);
+}
+
+.rp-doc-layout__menu-button svg {
+  width: 100%;
+  height: 100%;
+}

theme/components/BreadCrumb/index.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 export const BreadCrumb = () => {
   const { page, siteData } = usePageData();
   const { base } = siteData;
-  const t = useI18n();
+  const t = useI18n<typeof import("i18n")>();
 
   const href = useMemo(() => {
     if (!base) {
@@ -14,7 +14,7 @@ export const BreadCrumb = () => {
   }, [page, base]);
 
   return (
-    <div className="rp-mb-10">
+    <div className="breadcrumb">
       <span className="editLink" style={{ paddingLeft: 0 }}>
         <a href={href}>
           <span>{t("knowledge_title")}</span>

theme/components/Card/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface CardProps {
+  title?: string;
+  content?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Card: React.FC<CardProps> = ({
+  title,
+  content,
+  style,
+  className = "",
+  children,
+}) => {
+  return (
+    <div className={`card ${className}`} style={style}>
+      {title && <div className="card__title">{title}</div>}
+      {content && <div className="card__content">{content}</div>}
+      {children && <div className="card__content">{children}</div>}
+    </div>
+  );
+};
+

theme/components/Checkbox/index.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, useCallback } from "react";
-import { useI18n } from "rspress/runtime";
 
 export interface CheckboxProps {
   label: string;

theme/components/DocID/index.tsx

@@ -8,7 +8,7 @@ export const DocID = ({ id }: { id?: string }) => {
     return id || (pageData.page.frontmatter.id as string);
   }, [id, pageData]);
   return docID ? (
-    <div className="rp-flex rp-text-sm rp-text-text-2 rp-leading-6 sm:rp-leading-8 rp-font-medium">
+    <div className="post-meta">
       ID: {docID}
     </div>
   ) : (

theme/components/EditOnGithub/index.tsx

@@ -43,7 +43,7 @@ function EditIcon() {
 
 export const EditOnGithub = () => {
   const { editLink, issueLink } = useEditLink();
-  const t = useI18n();
+  const t = useI18n<typeof import("i18n")>();
 
   return (
     <div className="mb-2">

theme/components/Empty/index.tsx

@@ -1,4 +1,4 @@
-import { useThemeState } from "@rspress/core/theme";
+import { useThemeState } from "@rspress/core/theme-original";
 import React from "react";
 
 interface EmptyStateProps {

theme/components/HomeBanner/index.tsx

@@ -1,4 +1,4 @@
-import { useI18n, usePageData } from "@rspress/runtime";
+import { useI18n } from "@rspress/runtime";
 
 interface StyledProps {
   className?: string;
@@ -9,8 +9,7 @@ interface BannerProps extends StyledProps {
 }
 
 export const HomeBanner: React.FC<BannerProps> = ({ className }) => {
-  const pageData = usePageData();
-  const t = useI18n();
+  const t = useI18n<typeof import("i18n")>();
 
   // const logo =
   //   typeof pageData.siteData.logo === "string"

theme/components/HomeContent/index.tsx

@@ -1,5 +1,5 @@
 import { useI18n, usePageData } from "@rspress/core/runtime";
-import { Card, useFullTextSearch } from "@rspress/core/theme";
+import { useFullTextSearch } from "@rspress/core/theme-original";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { PostInfo, postInfos } from "virtual-post-data";
@@ -13,10 +13,12 @@ import {
   usePersistSearchParams,
   useSessionStorage,
 } from "../../hooks/SessionStorage";
+import { Card } from "../Card";
 import Checkbox from "../Checkbox";
 import Pagination from "../Pagination";
 import { PostList } from "../PostList";
 import Search from "../Search";
+import React from "react";
 
 const SEARCHED_LIMIT = 1000;
 const PAGE_SIZE = 10;
@@ -37,7 +39,7 @@ export const HomeContent: React.FC = () => {
   const [searchedPosts, setSearchedPosts] = useState<PostInfo[]>([]);
   const { page, siteData } = usePageData();
   const [searchInitialized, setSearchInitialized] = useState<Boolean[]>([]);
-  const t = useI18n();
+  const t = useI18n<typeof import("i18n")>();
 
   const searchFull = useCallback(
     async (keyword: string) => {