valaxy-theme-hairy 1.1.2 → 1.1.4

package/components/parts/HairyLink.vue

@@ -1,8 +1,32 @@
 <script lang="ts" setup>
-defineProps<{
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps<{
   type?: 'white' | 'normal'
   bordered?: boolean
+  href?: string
+  onClick?: ((payload: MouseEvent) => void)
 }>()
+
+const router = useRouter()
+const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
+const isLink = computed(() => urlReg.test(props.href || ''))
+
+function onClick(payload: MouseEvent) {
+  !props.onClick
+    ? isLink.value ? redirectTo(props.href!) : router.push(props.href!)
+    : props.onClick?.(payload)
+  payload.preventDefault()
+}
+
+function redirectTo(url: string, target = '_blank') {
+  const link = document.createElement('a')
+  link.href = url
+  link.target = target
+  link.click()
+  link.remove()
+}
 </script>
 
 <template>
@@ -13,6 +37,9 @@ defineProps<{
         : 'text:text-primary-light hover:text-primary-dark',
       bordered && 'border-b border-dashed hover:border-primary',
     ]"
+    :href="href"
+    onclick="return false"
+    @click="onClick"
   >
     <slot />
   </a>

package/components/posts/HairyUpdatedPost.vue

@@ -16,9 +16,9 @@ const router = useRouter()
 const post = computed(() => {
   const clone = [...props.posts].map(v => ({
     ...v,
-    date: v.updated instanceof Date
-      ? v.updated.valueOf()
-      : new Date(v.updated || Date.now()).valueOf(),
+    date: v.date instanceof Date
+      ? v.date.valueOf()
+      : new Date(v.date || Date.now()).valueOf(),
   }))
   clone.sort((b, a) => a.date - b.date)
   return clone[0]
@@ -64,7 +64,7 @@ function displayCategory(keys: string | string[] = []) {
         <div class="lt-md:hidden flex items-center gap-2">
           <div class="i-material-symbols-folder-open-rounded text-14px" />
           <ElTag size="small" class="dark:bg-dark-50 cursor-pointer border-none!" @click="displayCategory(post.categories)">
-            {{ post.categories }}
+            {{ toArray(post.categories).map($t).join('/') }}
           </ElTag>
         </div>
       </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "packageManager": "pnpm@8.15.8",
   "author": {
     "email": "wwu710632@gmail.com",
@@ -27,6 +27,7 @@
     "@iconify-json/simple-icons": "^1.1.109",
     "@overlastic/vue": "^0.4.7",
     "element-plus": "^2.7.7",
+    "furigana-markdown-it": "^1.0.3",
     "pinia": "^2.1.7",
     "swiper": "^11.1.5"
   },

package/styles/components/a.scss

@@ -0,0 +1,62 @@
+.markdown-body {
+  --c-toc-link: var(--hy-c-text-light);
+}
+
+html.dark {
+  .markdown-body {
+    --c-toc-link: var(--hy-c-text-dark);
+  }
+}
+
+.markdown-body {
+  word-wrap: break-word;
+
+  h2,
+  a {
+    color: var(--hy-c-primary);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--hy-font-serif);
+    font-weight: 900;
+  }
+
+  ul {
+    li>p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
+.markdown-body :not(pre)>code {
+  padding: 3px 6px;
+  font-size: 0.85rem;
+  color: var(--hy-c-text-code);
+  background: var(--hy-c-bg-mute);
+  border-radius: 3px;
+}
+
+.markdown-body div[class*=language-] pre {
+  max-width: calc(100vw - 56px);
+}
+
+.markdown-body div[class*=language-] {
+  width: 100%;
+}
+
+@media screen and (max-width: 640px) {
+  .markdown-body div[class*=language-] {
+    margin: auto;
+  }
+}
+
+
+.markdown-body {
+  --un-prose-borders: var(--hy-c-primary);
+}

package/styles/components/markdown.scss

@@ -1,4 +1,8 @@
-@forward 'valaxy/client/styles/mixins/index.scss';
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
+@use 'valaxy/client/styles/components/code.scss' as *;
+@use 'valaxy/client/styles/components/code-group.scss' as *;
+@use 'valaxy/client/styles/components/custom-block.scss' as *;
 
 .markdown-body {
   --c-toc-link: var(--hy-c-text-light);
@@ -11,20 +15,16 @@ html.dark {
 }
 
 .markdown-body {
+  --un-prose-borders: var(--hy-c-primary);
   word-wrap: break-word;
 
-  h2,
-  a {
-    color: var(--hy-c-primary);
-  }
-
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    font-family: var(--hy-font-serif);
+    font-family: var(--va-font-family-base);
     font-weight: 900;
   }
 
@@ -33,51 +33,46 @@ html.dark {
       margin-bottom: 0;
     }
   }
-}
 
+  blockquote {
+    margin: 16px 0;
+    border-left: 4px solid var(--va-c-divider);
+    padding-left: 12px;
 
-.markdown-body :not(pre)>code {
-  padding: 3px 6px;
-  font-size: 0.85rem;
-  color: var(--hy-c-text-code);
-  background: var(--hy-c-bg-mute);
-  border-radius: 3px;
-}
+    transition: border-color 0.5s p {
+      margin: 0;
+      font-size: 16px;
+      color: var(--vp-c-text-2);
+      transition: color 0.5s;
+    }
+  }
 
-.markdown-body div[class*=language-] pre {
-  max-width: calc(100vw - 56px);
-}
+  code:not(pre > code) {
+    color: var(--va-c-text-code);
+    background-color: var(--va-c-bg-mute);
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-weight: 500;
 
-.markdown-body div[class*=language-] {
-  width: 100%;
-}
+    &::before {
+      content: none;
+    }
+
+    &::after {
+      content: none;
+    }
+  }
 
-@media screen and (max-width: 640px) {
-  .markdown-body div[class*=language-] {
-    margin: auto;
+  div[class*=language-] pre {
+    max-width: none;
   }
 }
 
-
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::before,
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::after {
   content: none !important;
 }
 
-.custom-block.tip {
-  background-color: rgba(200, 200, 200, 0.1);
-  border-color: var(--hy-c-primary);
-  padding: 0.5rem 1rem;
-}
-
-.markdown-body {
-  --un-prose-borders: var(--hy-c-primary);
-}
-
-.markdown-body div[class*=language-] pre {
-  max-width: none;
-}
-
 .prose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
   background: rgba(200, 200, 200, 0.1);
   @apply py-1px;
@@ -87,4 +82,10 @@ html.dark {
   >p {
     margin: 0.5rem 0;
   }
+}
+
+.custom-block.tip {
+  background-color: rgba(200, 200, 200, 0.1);
+  border-color: var(--hy-c-primary);
+  padding: 0.5rem 1rem;
 }

package/types/furigana-markdown-it.d.ts

@@ -0,0 +1 @@
+declare module 'furigana-markdown-it'

package/valaxy.config.ts

@@ -1,5 +1,6 @@
 import type { DefaultTheme, ValaxyTheme } from 'valaxy'
 import { defineTheme, mergeValaxyConfig } from 'valaxy'
+import markdownFurigana from 'furigana-markdown-it'
 import { withImageConfig, withThemeConfig } from './node'
 import type { ThemeConfig } from './types'
 
@@ -16,6 +17,15 @@ export default defineTheme<ThemeConfig>((options) => {
         post: 'image:slice:reverse',
       },
     },
+    markdown: {
+      theme: {
+        dark: 'material-theme-darker',
+        light: 'material-theme-lighter',
+      },
+      config(md) {
+        md.use(markdownFurigana())
+      },
+    },
     vite: {
       optimizeDeps: { include: ['dayjs', 'element-plus'] },
     },