feat: add page footer, gray color changed to zinc

json-q · json-q · commit 4c3dd8647188 · 2025-03-01T21:57:45.000+08:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,7 @@ import { ThemeProvider } from 'next-themes';
 import PageHeader from '~/components/layouts/page-header';
 import siteConfig from '~/config/siteConfig';
 import './globals.css';
+import PageFooter from '~/components/layouts/page-footer';
 
 export const metadata: Metadata = siteConfig.metadata;
 
@@ -17,6 +18,7 @@ export default function RootLayout({
         <ThemeProvider attribute="class" enableSystem enableColorScheme>
           <PageHeader />
           {children}
+          <PageFooter />
         </ThemeProvider>
       </body>
     </html>
diff --git a/components/layouts/page-footer/icons/JsDelivrIcon.tsx b/components/layouts/page-footer/icons/JsDelivrIcon.tsx
@@ -0,0 +1,10 @@
+export default function JsDelivrIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M11.851 0L.811 4.02l1.56 14.7L11.85 24l9.6-5.28 1.74-14.76zm.062 4.622a6.668 6.75 0 0 1 2.666.572 12.507 12.507 0 0 0-2.59 1.95c-.045-.02-.092-.031-.138-.045a1.181 1.181 0 0 0-.346-.056c-.071 0-.141.01-.21.021a8.91 8.91 0 0 1-.615-2.318 6.668 6.75 0 0 1 1.171-.122 6.668 6.75 0 0 1 .062-.002zm-1.99.312a9.763 9.763 0 0 0 .69 2.504 1.213 1.213 0 0 0-.328.825 1.202 1.202 0 0 0 .18.63c-.937 1.294-1.656 2.803-1.905 4.31-.01.056-.013.11-.02.166-.282.09-.515.284-.656.54-.987-.333-1.885-.968-2.615-2.022a6.668 6.75 0 0 1-.026-.515 6.668 6.75 0 0 1 4.68-6.438zm5.507.709a6.668 6.75 0 0 1 2.53 2.9c-.377.953-1.049 1.892-1.893 2.727a1.242 1.242 0 0 0-.644-.184 1.243 1.243 0 0 0-.768.27c-.462-.354-.91-.737-1.318-1.168-.333-.35-.637-.73-.921-1.123.19-.215.31-.494.31-.802 0-.212-.061-.41-.159-.586 1.058-1.008 2.112-1.67 2.863-2.034zm-3.925 1.982a.624.624 0 0 1 .346.114.624.624 0 0 1 .292.524.624.624 0 0 1-.292.524.626.626 0 0 1-.346.113.634.634 0 0 1-.638-.637c0-.355.283-.638.638-.638zm-.441 1.771a1.205 1.205 0 0 0 .675.062c.036.05.075.097.112.148a11.438 11.438 0 0 0 .921 1.119 12.103 12.103 0 0 0 1.446 1.277c-.032.11-.054.224-.054.342a1.236 1.236 0 0 0 .066.38 9.91 9.91 0 0 1-2.118 1.042c-.087.029-.173.052-.261.078a7.735 7.735 0 0 1-1.87.332 1.15 1.15 0 0 0-.66-.773c.004-.024.005-.049.01-.073.219-1.333.873-2.73 1.733-3.934zm7.272.19a6.668 6.75 0 0 1 .245 1.786 6.668 6.75 0 0 1-.259 1.856 9.993 9.993 0 0 1-1.666-.63 1.243 1.243 0 0 0-.065-.713 9.434 9.434 0 0 0 1.745-2.3zm-2.913 2.101c.367 0 .657.291.657.658s-.291.657-.657.657c-.367 0-.658-.29-.658-.657s.29-.658.658-.658zm.837 1.59a10.79 10.79 0 0 0 1.802.688 6.668 6.75 0 0 1-6.149 4.157 6.668 6.75 0 0 1-.062-.004 6.668 6.75 0 0 1-.042 0c-.087-.042-.168-.08-.266-.129-.312-.154-.667-.352-.846-.5a3.796 3.796 0 0 1-1.294-2.03c.21-.111.38-.284.487-.495a8.428 8.428 0 0 0 1.96-.306 9.11 9.11 0 0 0 .513-.154 11.083 11.083 0 0 0 2.341-1.13c.205.143.452.23.719.23a1.248 1.248 0 0 0 .837-.328zm-10.707.116a5.761 5.761 0 0 0 2.212 1.298 1.146 1.146 0 0 0 .857.87 4.602 4.602 0 0 0 1.24 2.222 6.668 6.75 0 0 1-4.31-4.39zm3.327.464c.331 0 .595.263.595.596s-.264.595-.595.595a.59.59 0 0 1-.596-.595.591.591 0 0 1 .596-.596z"
+      />
+    </svg>
+  );
+}
diff --git a/components/layouts/page-footer/icons/NetfilyIcon.tsx b/components/layouts/page-footer/icons/NetfilyIcon.tsx
@@ -0,0 +1,10 @@
+export default function NetfilyIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M6.49 19.04h-.23L5.13 17.9v-.23l1.73-1.71h1.2l.15.15v1.2L6.5 19.04ZM5.13 6.31V6.1l1.13-1.13h.23L8.2 6.68v1.2l-.15.15h-1.2L5.13 6.31Zm9.96 9.09h-1.65l-.14-.13v-3.83c0-.68-.27-1.2-1.1-1.23-.42 0-.9 0-1.43.02l-.07.08v4.96l-.14.14H8.9l-.13-.14V8.73l.13-.14h3.7a2.6 2.6 0 0 1 2.61 2.6v4.08l-.13.14Zm-8.37-2.44H.14L0 12.82v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14Zm17.14 0h-6.58l-.14-.14v-1.64l.14-.14h6.58l.14.14v1.64l-.14.14ZM11.05 6.55V1.64l.14-.14h1.65l.14.14v4.9l-.14.14h-1.65l-.14-.13Zm0 15.81v-4.9l.14-.14h1.65l.14.13v4.91l-.14.14h-1.65l-.14-.14Z"
+      />
+    </svg>
+  );
+}
diff --git a/components/layouts/page-footer/icons/NextjsIcon.tsx b/components/layouts/page-footer/icons/NextjsIcon.tsx
@@ -0,0 +1,10 @@
+export default function NextjsIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"
+      />
+    </svg>
+  );
+}
diff --git a/components/layouts/page-footer/index.tsx b/components/layouts/page-footer/index.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import NextjsIcon from './icons/NextjsIcon';
+import JsDelivrIcon from './icons/JsDelivrIcon';
+import NetfilyIcon from './icons/NetfilyIcon';
+
+export default function PageFooter() {
+  const footerLink = [
+    { icon: NextjsIcon, label: 'Nextjs', link: 'https://nextjs.org' },
+    { icon: JsDelivrIcon, label: 'jsDelivr ', link: 'https://www.jsdelivr.com/' },
+    { icon: NetfilyIcon, label: 'Netfily', link: 'https://app.netlify.com/' },
+  ];
+
+  return (
+    <footer className="mt-auto box-border border-t bg-zinc-50 p-2 dark:bg-zinc-900 md:p-4">
+      <div className="flex flex-col items-center space-y-4 text-center">
+        <div className="flex flex-col items-center gap-4 text-sm text-zinc-600 dark:text-zinc-300 md:flex-row md:text-base">
+          <span aria-label="copyright">©2025 风希落</span>
+          <Link
+            aria-label="beian"
+            href="http://www.beian.gov.cn"
+            target="_blank"
+            rel="noopener"
+            className="transition-colors hover:text-blue-600"
+          >
+            豫ICP备2022024874号-2
+          </Link>
+        </div>
+
+        <div
+          aria-label="footer-link"
+          className="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm md:text-base"
+        >
+          {footerLink.map((item) => (
+            <Link
+              key={item.link}
+              href={item.link}
+              target="_blank"
+              rel="noopener"
+              className="text-zinc-600 transition-colors hover:text-blue-600 dark:text-zinc-300"
+            >
+              <span className="inline-flex items-center gap-x-2">
+                <item.icon className="h-5 w-5" /> {item.label}
+              </span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/layouts/page-header/mobile-nav.tsx b/components/layouts/page-header/mobile-nav.tsx
@@ -39,8 +39,8 @@ export default function MobileNav() {
           <Link href="/">
             <DropdownMenuItem
               className={cn({
-                'bg-gray-100': pathname == '/',
-                'dark:bg-gray-800': pathname == '/',
+                'bg-zinc-100': pathname == '/',
+                'dark:bg-zinc-800': pathname == '/',
               })}
             >
               首页
@@ -50,8 +50,8 @@ export default function MobileNav() {
             <Link href={item.href} key={item.href}>
               <DropdownMenuItem
                 className={cn({
-                  'bg-gray-100': pathname == item.href,
-                  'dark:bg-gray-800': pathname == item.href,
+                  'bg-zinc-100': pathname == item.href,
+                  'dark:bg-zinc-800': pathname == item.href,
                 })}
               >
                 {item.title}
diff --git a/components/layouts/toc-tree.tsx b/components/layouts/toc-tree.tsx
@@ -92,9 +92,8 @@ export default function TocTree(props: TocTreeProps) {
           <li key={id} className="mb-2 mt-0 p-0">
             <a
               href={`#${id}`}
-              className={cn('text-gray-700 no-underline hover:text-blue-400 dark:text-gray-100', {
-                'text-blue-400': i === activeIndex,
-                'dark:text-blue-400': i === activeIndex,
+              className={cn('text-zinc-700 no-underline hover:text-blue-400 dark:text-zinc-100', {
+                'text-blue-400 dark:text-blue-500': i === activeIndex,
               })}
               style={{ paddingLeft: `${depth * 0.6}rem` }}
             >
@@ -126,7 +125,7 @@ export default function TocTree(props: TocTreeProps) {
   return (
     <div className={cn('w-full max-w-[25%]', className)}>
       {/* calc top offset: header: 3 container: pt-1 pb-1 rem*/}
-      <nav className="sticky top-20 max-h-screen overflow-y-auto border-l border-l-gray-200 px-4 dark:border-l-gray-700">
+      <nav className="sticky top-20 max-h-screen overflow-y-auto border-l border-l-zinc-200 px-4 dark:border-l-zinc-700">
         {renderList()}
       </nav>
     </div>
diff --git a/types/declear.d.ts b/types/declear.d.ts
@@ -2,10 +2,3 @@ declare module 'flexsearch/dist/module/document' {
   import { Document } from 'flexsearch';
   export default Document;
 }
-
-interface R<T = unknown> {
-  code: number;
-  data?: T;
-  message?: string;
-  timestamp?: number;
-}
