feat: fixed eslint & new features

Author: WRXinYue

demo/pages/posts/draft.md

@@ -6,6 +6,7 @@ tags:
   - draft
 duration: 2min
 type: blog
+lang: en
 ---
 
 ::: zh-CN

demo/pages/posts/hello-valaxy.md

@@ -8,6 +8,7 @@ tags:
   - 笔记
 duration: 2min
 type: blog
+lang: zh
 ---
 
 ## Hello, Valaxy!

demo/pages/posts/install.md

@@ -8,6 +8,7 @@ tags:
   - document
 duration: 2min
 type: docs
+lang: en
 ---
 
 [![npm](https://img.shields.io/npm/v/valaxy-theme-antfu?color=000)](https://www.npmjs.com/package/valaxy-theme-antfu)

demo/valaxy.config.ts

@@ -6,8 +6,6 @@ import LinkAttributes from 'markdown-it-link-attributes'
 import MarkdownItGitHubAlerts from 'markdown-it-github-alerts'
 import Shiki from '@shikijs/markdown-it'
 import { rendererRich, transformerTwoslash } from '@shikijs/twoslash'
-// @ts-expect-error missing types
-import TOC from 'markdown-it-table-of-contents'
 
 /**
  * User Config
@@ -59,6 +57,25 @@ export default defineConfig<ThemeConfig>({
       },
     ],
 
+    subNav: [
+      {
+        text: 'Blog',
+        link: '/posts',
+      },
+      {
+        text: 'Talks',
+        link: '/talks',
+      },
+      {
+        text: 'Notes',
+        link: '/notes',
+      },
+      {
+        text: 'Documentation',
+        link: '/docs',
+      },
+    ],
+
     footer: {
       since: 2024,
     },

eslint.config.js

@@ -5,5 +5,12 @@ export default antfu(
   {
     unocss: true,
     formatters: true,
+    ignores: ['**/dist', '**/public'],
+    rules: {
+      'ts/no-unused-expressions': 'off',
+      'regexp/no-unused-capturing-group': 'off',
+      'vue/no-v-text-v-html-on-component': 'off',
+      'vue/no-template-shadow': 'off',
+    },
   },
 )

theme/components/CalCom.vue

@@ -49,7 +49,7 @@ if (typeof window !== 'undefined') {
 </script>
 
 <template>
-  <button :data-cal-link="link" btn-gray text-sm>
+  <button :data-cal-link="link" text-sm btn-gray>
     <div i-ri-calendar-event-fill />
     {{ title }}
   </button>

theme/components/Footer.vue

@@ -7,7 +7,7 @@ const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <div class="slide-enter m-auto mb-6 mt-10 flex prose animate-delay-1200!">
+  <div class="slide-enter mb-6 flex prose m-auto mt-10 animate-delay-1200!">
     <span class="text-sm op50"><a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" style="color:inherit">CC BY-NC-SA 4.0</a> {{ themeConfig.footer.since }}-PRESENT © {{ siteConfig.author.name }}</span>
     <div class="flex-auto" />
   </div>

theme/components/ListPosts.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+// import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 import { usePostList } from 'valaxy'
+import type { Post } from 'valaxy'
 import { englishOnly, formatDate } from '../logics'
-import type { Post } from '../types'
 
 const props = defineProps<{
   type?: string
   posts?: Post[]
   extra?: Post[]
 }>()
 
-const router = useRouter()
+// const router = useRouter()
 // const routes: Post[] = router.getRoutes()
 //   .filter(i => i.path.startsWith('/posts') && i.meta.frontmatter.date && !i.meta.frontmatter.draft)
 //   .filter(i => !i.path.endsWith('.html') && (i.meta.frontmatter.type || 'blog').split('+').includes(props.type))
@@ -30,13 +30,17 @@ const router = useRouter()
 // const routes = usePostList({ type: props.type || '' })
 const routes = usePostList({ type: props.type })
 
-const posts = computed(() => props.posts || routes.value)
+// const posts = computed(() => props.posts || routes.value)
 
-// const posts = computed(() =>
-//   [...(props.posts || routes), ...props.extra || []]
-//     .sort((a, b) => +new Date(b.date) - +new Date(a.date))
-//     .filter(i => !englishOnly.value || i.lang !== 'zh'),
-// )
+const posts = computed(() =>
+  [...(props.posts || routes.value), ...props.extra || []]
+    .sort((a, b) => {
+      const dateA = typeof a.date === 'string' || typeof a.date === 'number' ? new Date(a.date) : new Date()
+      const dateB = typeof b.date === 'string' || typeof b.date === 'number' ? new Date(b.date) : new Date()
+      return +dateB - +dateA
+    })
+    .filter(i => !englishOnly.value || i.lang !== 'zh'),
+)
 
 const getYear = (a: Date | string | number) => new Date(a).getFullYear()
 const isFuture = (a?: Date | string | number) => a && new Date(a) > new Date()
@@ -48,28 +52,28 @@ function isSameGroup(a: Post, b?: Post) {
 function getGroupName(p: Post) {
   if (isFuture(p.date))
     return 'Upcoming'
-  return getYear(p.date)
+  return getYear(p.date!)
 }
 </script>
 
 <template>
   <ul>
     <template v-if="!posts.length">
-      <div py2 op50>
+      <div op50 py2>
         { nothing here yet }
       </div>
     </template>
 
     <template v-for="route, idx in posts" :key="route.path">
       <div
-        v-if="!isSameGroup(route, posts[idx - 1])" select-none relative h20 pointer-events-none slide-enter :style="{
+        v-if="!isSameGroup(route, posts[idx - 1])" slide-enter select-none pointer-events-none relative h20 :style="{
           '--enter-stage': idx - 2,
           '--enter-step': '60ms',
         }"
       >
         <span
-          text-8em color-transparent absolute left--3rem top--2rem font-bold text-stroke-2 text-stroke-hex-aaa
-          op10
+
+          absolute font-bold color-transparent text-stroke-hex-aaa text-8em left--3rem top--2rem text-stroke-2 op10
         >{{ getGroupName(route) }}</span>
       </div>
       <div
@@ -79,19 +83,19 @@ function getGroupName(p: Post) {
         }"
       >
         <component
-          :is="route.path.includes('://') ? 'a' : 'RouterLink'" v-bind="route.path.includes('://') ? {
+          :is="route.path?.includes('://') ? 'a' : 'RouterLink'" v-bind="route.path?.includes('://') ? {
             href: route.path,
             target: '_blank',
             rel: 'noopener noreferrer',
           } : {
             to: route.path,
           }
-          " class="item block font-normal mb-6 mt-2 no-underline"
+          " class="mb-6 item block font-normal mt-2 no-underline"
         >
           <li class="no-underline" flex="~ col md:row gap-2 md:items-center">
-            <div class="title text-lg leading-1.2em" flex="~ gap-2 wrap">
+            <div class="text-lg title leading-1.2em" flex="~ gap-2 wrap">
               <span
-                v-if="route.lang === 'zh'" align-middle flex-none
+                v-if="route.lang === 'zh'" flex-none align-middle
                 class="text-xs bg-zinc:15 text-zinc5 rounded px-1 py-0.5 ml--12 mr2 my-auto hidden md:block"
               >中文</span>
               <span align-middle>{{ route.title }}</span>
@@ -112,7 +116,7 @@ function getGroupName(p: Post) {
               <span text-sm op50 ws-nowrap>
                 {{ formatDate(route.date, true) }}
               </span>
-              <span v-if="route.duration" text-sm op40 ws-nowrap>· {{ route.duration }}</span>
+              <span v-if="route.duration" text-sm ws-nowrap op40>· {{ route.duration }}</span>
               <span v-if="route.platform" text-sm op40 ws-nowrap>· {{ route.platform }}</span>
               <span v-if="route.place" text-sm op40 ws-nowrap md:hidden>· {{ route.place }}</span>
               <span
@@ -121,7 +125,7 @@ function getGroupName(p: Post) {
               >中文</span>
             </div>
           </li>
-          <div v-if="route.place" op50 text-sm hidden mt--2 md:block>
+          <div v-if="route.place" op50 text-sm hidden md:block mt--2>
             {{ route.place }}
           </div>
         </component>

theme/components/ListProjects.vue

@@ -2,7 +2,7 @@
 defineProps<{ projects: Record<string, any[]> }>()
 
 function slug(name: string) {
-  return name.toLowerCase().replace(/[\s\\\/]+/g, '-')
+  return name.toLowerCase().replace(/[\s\\/]+/g, '-')
 }
 </script>
 
@@ -12,28 +12,28 @@ function slug(name: string) {
       v-for="key, cidx in Object.keys(projects)" :key="key" slide-enter
       :style="{ '--enter-stage': cidx + 1 }"
     >
-    <div
+      <div
         :id="slug(key)"
-        select-none relative h20 pointer-events-none slide-enter
+        slide-enter select-none relative h20 pointer-events-none
         :style="{
           '--enter-stage': cidx - 2,
           '--enter-step': '60ms',
         }"
       >
-        <span text-5em color-transparent absolute left--1rem top-0rem font-bold leading-1em text-stroke-1.5 text-stroke-hex-aaa op35 dark:op20>{{ key }}</span>
+        <span color-transparent absolute font-bold text-stroke-hex-aaa text-5em left--1rem top-0rem leading-1em text-stroke-1.5 op35 dark:op20>{{ key }}</span>
       </div>
       <!-- <h4 :id="slug(key)" class="mt-15 mb-2 font-bold text-center op75">
         {{ key }}
       </h4> -->
       <div
-        class="project-grid py-2 max-w-500 w-max mx-auto"
+        class="mx-auto project-grid py-2 max-w-500 w-max"
         grid="~ cols-1 md:cols-2 gap-4 lg:cols-3"
         :class="projects[key].length === 1 ? 'flex' : projects[key].length > 2 ? 'lg:grid-cols-3' : ''"
       >
         <a
           v-for="item, idx in projects[key]"
           :key="idx"
-          class="item relative flex items-center"
+          class="relative flex item items-center"
           :href="item.link"
           target="_blank"
           :class="!item.link ? 'opacity-0 pointer-events-none h-0 -mt-8 -mb-4' : ''"
@@ -48,16 +48,16 @@ function slug(name: string) {
             <Vitest v-else-if="item.icon === 'vitest'" class="text-4xl opacity-50" />
             <Elk v-else-if="item.icon === 'elk'" class="text-4xl opacity-50" />
             <AnthonyFu v-else-if="item.icon === 'af'" class="text-4xl opacity-50" />
-            <div v-else class="text-3xl opacity-50" :class="item.icon || 'i-carbon-unknown'" />
+            <div v-else class="opacity-50 text-3xl" :class="item.icon || 'i-carbon-unknown'" />
           </div>
           <div class="flex-auto">
             <div class="text-normal">{{ item.name }}</div>
-            <div class="desc text-sm opacity-50 font-normal" v-html="item.desc" />
+            <div class="text-sm opacity-50 font-normal desc" v-html="item.desc" />
           </div>
         </a>
       </div>
     </div>
-    <div class="prose pb5 mx-auto mt10 text-center">
+    <div class="mx-auto prose text-center pb5 mt10">
       <div block mt-5>
         <a href="https://antfu.me/stars-rank" target="_blank" op50>All projects sort by Stars</a>
       </div>

theme/components/ListTalks.vue

@@ -23,7 +23,7 @@ function daysLeft(date: string) {
         <hr>
       </div>
       <h2 :id="getSlug(talk.title)" tabindex="-1" important-mb-0>
-        <span v-if="talk.series" mb1 text-lg font-400 italic op45>
+        <span v-if="talk.series" text-lg mb1 font-400 italic op45>
           {{ talk.series }}
           <br>
         </span>
@@ -47,7 +47,7 @@ function daysLeft(date: string) {
               </a>
               <span
                 v-if="p.lang === 'zh'"
-                ml2 flex-none align-top
+                flex-none align-top ml2
                 class="my-auto rounded bg-zinc:15 px-1 py-0.5 text-xs text-zinc5"
               >中文</span>
               <div text-sm op50>
@@ -75,7 +75,7 @@ function daysLeft(date: string) {
                 v-if="isFuture(p.date)" :href="p.conferenceUrl" target="_blank"
                 rel="noopener noreferrer"
 
-                mr--2 rounded bg-gray:15 px2 font-bold font-serif op50 duration-500 important-border-0 hover:op100 important-transition-opacity
+                rounded op50 duration-500 important-border-0 hover:op100 important-transition-opacity font-bold mr--2 bg-gray:15 px2 font-serif
               >
                 <div i-ri-time-line />
                 in {{ daysLeft(p.date) }} days