调整 header 导航位置的样式,添加图标

Author: CatCodeMe

astro.config.mjs

@@ -16,7 +16,6 @@ import AstroPureIntegration from './packages/pure/index.ts';
 // Local integrations
 // Local rehype & remark plugins
 import rehypeAutolinkHeadings from './src/plugins/rehype-auto-link-headings.ts';
-// import { remarkAiNotice } from './src/plugins/remark-ai-notice.mjs';
 import { remarkMermaid } from './src/plugins/remark-mermaid';
 // Shiki
 // import { addCopyButton, addLanguage, addTitle, transformerNotationDiff, transformerNotationHighlight, updateStyle } from './src/plugins/shiki-transformers.ts';

packages/pure/components/basic/Header.astro

@@ -1,6 +1,7 @@
 ---
 import config from 'virtual:config'
 import { Icon } from '../user'
+import type { IconName } from '../../libs/icons'
 ---
 
 <header-component
@@ -21,9 +22,14 @@ import { Icon } from '../user'
           config.header.menu.map((item) => (
             <a
               href={item.link}
-              class='w-full flex-none grow py-2 text-right font-medium transition-none hover:text-primary sm:w-fit sm:px-3'
+              class='w-full flex-none grow py-2 text-right font-medium transition-none sm:w-fit sm:px-3 flex items-center justify-end gap-x-1.5'
               aria-label='Nav menu item'
             >
+              {item.icon ? (
+                <Icon name={item.icon as IconName} class='size-4' />
+              ) : item.iconImg ? (
+                <img src={item.iconImg} class='size-4' alt={item.title || 'icon image'} />
+              ) : null}
               {item.title}
             </a>
           ))
@@ -209,4 +215,5 @@ import { Icon } from '../user'
       }
     }
   }
+
 </style>

packages/pure/libs/icons.ts

@@ -179,6 +179,18 @@ export const BuiltInIcons = {
   `,
   sleep: `
     <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.378 3.026A9.004 9.004 0 1 1 5.475 17.13a.675.675 0 0 1 .329-1.019c3.391-1.214 5.208-2.62 6.262-4.633c1.11-2.118 1.396-4.438.62-7.619a.675.675 0 0 1 .692-.834m1.011 1.637l.065.39c.417 2.705.065 4.976-1.06 7.122c-1.141 2.18-3 3.704-6.015 4.94a7.504 7.504 0 1 0 7.677-12.283l-.332-.092zm-3.395-1.01L11 3.75V9a2 2 0 1 1-1.499-1.937l-.001-2.3L6 5.829V10a2 2 0 1 1-1.499-1.937L4.5 5.273a.75.75 0 0 1 .43-.679l.102-.039l5-1.521a.75.75 0 0 1 .943.525z"/></svg>
+  `,
+  msgboard: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="M8.5 15h7m-7-5H12m9.96.97a20 20 0 0 1 0 2.52c-.274 4.243-3.606 7.622-7.79 7.9a33 33 0 0 1-4.34 0a4.9 4.9 0 0 1-1.486-.339c-.512-.21-.768-.316-.899-.3c-.13.016-.319.155-.696.434c-.666.49-1.505.843-2.75.813c-.629-.015-.943-.023-1.084-.263s.034-.572.385-1.237c.487-.922.795-1.978.328-2.823c-.805-1.209-1.488-2.64-1.588-4.184a20 20 0 0 1 0-2.52c.274-4.243 3.606-7.622 7.79-7.9c.549-.037.608-.059 1.17-.067"/><path d="M15.015 2.387c1.073-.64 2.009-.382 2.571.028c.23.169.346.253.414.253s.183-.084.414-.253c.562-.41 1.498-.668 2.571-.028c1.408.84 1.726 3.609-1.52 5.945c-.62.445-.928.668-1.465.668s-.846-.223-1.464-.668c-3.247-2.336-2.929-5.106-1.521-5.945Z"/></g></svg>
+  `,
+  archive: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 56 56"><path fill="currentColor" d="M15.144 49.574H40.88c4.593 0 7.054-2.39 7.054-6.984V19.246c2.274-.375 3.493-2.086 3.493-4.594V11.09c0-2.86-1.57-4.664-4.454-4.664H9.027c-2.742 0-4.453 1.804-4.453 4.664v3.562c0 2.508 1.242 4.22 3.492 4.594V42.59c0 4.617 2.485 6.984 7.078 6.984M9.988 15.777c-1.172 0-1.64-.492-1.64-1.664V11.63c0-1.172.468-1.664 1.64-1.664h36.047c1.195 0 1.617.492 1.617 1.664v2.484c0 1.172-.422 1.664-1.617 1.664Zm5.133 30.258c-2.11 0-3.281-1.148-3.281-3.258v-23.46h32.32v23.46c0 2.11-1.172 3.258-3.258 3.258Zm5.156-17.273H35.77c.961 0 1.665-.68 1.665-1.711v-.75c0-1.031-.704-1.688-1.665-1.688H20.277c-.984 0-1.664.657-1.664 1.688v.75c0 1.031.68 1.71 1.664 1.71"/></svg>
+  `,
+  shelf: `
+    <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 11h18M3 14V8c0-2.828 0-4.243.93-5.121S6.358 2 9.353 2h5.294c2.995 0 4.492 0 5.423.879C21 3.757 21 5.172 21 8v6c0 2.828 0 4.243-.93 5.121S17.642 20 14.647 20H9.353c-2.995 0-4.492 0-5.423-.879C3 18.243 3 16.828 3 14m8.5-3l-2-5m8.5 5l-1-5M7 11V6m7 5V6m-3 10h2m-8 4v2m14-2v2"/></svg>
+  `,
+  about: `
+  <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="M2 9v8m0-5.5c.5-.5 1.5-2 3.5-2c.835 0 2 .5 2 1.5v6m5 0v-6c0-1-1.165-1.5-2-1.5c-1.48 0-2.414.822-3 1.452M15 13a3.5 3.5 0 0 0 6.247 2.169M15 13a3.5 3.5 0 1 1 7 0z" stroke-width="1"/></svg>
   `
 }
 

packages/pure/schemas/header.ts

@@ -5,7 +5,9 @@ export const HeaderMenuSchema = () =>
     .array(
       z.object({
         title: z.string(),
-        link: z.string()
+        link: z.string(),
+        icon: z.string().optional(),
+        iconImg: z.string().optional()
       })
     )
     .default([

public/favicon/android-chrome-512x512.png

@@ -12,7 +12,6 @@ import '@/assets/styles/aside.css'
 import '@/assets/styles/expressive-code.css'
 import '@/assets/styles/inner-link.css'
 import '@/assets/styles/external-link.css'
-// import '@/assets/styles/ai-notice.css'
 import '@/assets/styles/advance-step.css'
 import '@waline/client/waline-meta.css'