valaxy 0.3.3 → 0.3.6

package/dist/node/index.d.ts

@@ -1,6 +1,6 @@
 import * as vite from 'vite';
 import { InlineConfig } from 'vite';
-import { V as ValaxyConfig } from '../config-408070e9.js';
+import { V as ValaxyConfig } from '../config-97204b79.js';
 import 'type-fest';
 import 'unocss/vite';
 import 'markdown-it';

package/dist/node/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkM2CMNZU4js = require('../chunk-M2CMNZU4.js');var _chunkPFDRHZPFjs = require('../chunk-PFDRHZPF.js');_chunkPFDRHZPFjs.f.call(void 0, );exports.createServer = _chunkM2CMNZU4js.i;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkPH3AWAMHjs = require('../chunk-PH3AWAMH.js');var _chunkQIXBXHEKjs = require('../chunk-QIXBXHEK.js');_chunkQIXBXHEKjs.i.call(void 0, );exports.createServer = _chunkPH3AWAMHjs.g;

package/dist/node/index.mjs

@@ -1 +1 @@
-import{i as r}from"../chunk-5ERIFSGH.mjs";import{f as o}from"../chunk-IJLE4GPY.mjs";o();export{r as createServer};
+import{g as r}from"../chunk-VMVPAM4O.mjs";import{i as o}from"../chunk-T3K5KZOK.mjs";o();export{r as createServer};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "📄 Vite & Vue powered static blog generator.",
   "keywords": [
     "vite",
@@ -37,10 +37,11 @@
     "critters": "^0.0.16",
     "dayjs": "^1.11.2",
     "escape-html": "^1.0.3",
-    "fast-deep-equal": "^3.1.3",
     "feed": "^4.2.2",
     "katex": "^0.15.3",
+    "kolorist": "^1.5.1",
     "markdown-it-anchor": "^8.6.4",
+    "markdown-it-attrs": "^4.1.4",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
     "markdown-it-link-attributes": "^4.0.0",
@@ -54,7 +55,7 @@
     "sass": "^1.51.0",
     "star-markdown-css": "^0.3.3",
     "unconfig": "^0.3.4",
-    "unocss": "^0.33.2",
+    "unocss": "^0.33.4",
     "unplugin-vue-components": "^0.19.5",
     "vite": "^2.9.9",
     "vite-plugin-inspect": "^0.5.0",
@@ -62,30 +63,29 @@
     "vite-plugin-pages": "^0.23.0",
     "vite-plugin-pwa": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.6.0",
-    "vite-ssg": "^0.19.2",
-    "vite-ssg-sitemap": "0.2.6",
+    "vite-ssg": "0.19.2",
+    "vite-ssg-sitemap": "0.2.7",
     "vue": "^3.2.33",
-    "vue-demi": "^0.12.5",
     "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.15",
-    "yargs": "^17.4.1"
+    "yargs": "^17.5.0"
   },
   "devDependencies": {
     "@types/katex": "^0.14.0",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/nprogress": "^0.2.0",
     "@types/yargs": "^17.0.10",
-    "chalk": "4",
-    "cross-env": "^7.0.3",
     "debug": "^4.3.4",
     "diacritics": "^1.3.0",
     "https-localhost": "^4.7.1",
-    "markdown-it-attrs": "^4.1.4",
     "type-fest": "^2.12.2",
-    "vue-tsc": "^0.34.12"
+    "vue-tsc": "^0.34.13"
+  },
+  "engines": {
+    "node": ">=14.0.0"
   },
   "scripts": {
-    "build": "tsup --splitting",
+    "build": "rimraf dist && tsup --splitting",
     "dev": "tsup --watch --splitting",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "preview": "vite preview",

package/src/client/components/ValaxyToc.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
+import type { Header } from '../../node/markdown'
 import { useActiveSidebarLinks } from '~/composables'
-
-const route = useRoute()
-const headers = computed(() => route.meta.headers)
+import { useConfig } from '~/config'
 
 const container = ref()
 const marker = ref()
@@ -21,6 +20,53 @@ function getStylesByLevel(level: number) {
 
 const { locale } = useI18n()
 
+const config = useConfig()
+
+function useHeaders() {
+  const headers = ref<Header[]>([])
+  const route = useRoute()
+
+  function generateHeaders() {
+    headers.value = []
+
+    const content = document.querySelector('.markdown-body')
+    const levels = config.value.markdownIt.toc!.includeLevel!.map(level => `h${level}`)
+
+    content?.querySelectorAll(levels as any).forEach((header) => {
+      headers.value.push({
+        level: header.tagName.toLowerCase().replace('h', ''),
+        title: header.textContent.replace('#', ''),
+        slug: header.id,
+        lang: header.lang || locale.value,
+      })
+    })
+  }
+
+  watch(() => route.path, () => {
+    generateHeaders()
+  })
+
+  onMounted(() => {
+    generateHeaders()
+  })
+
+  return {
+    headers,
+    generateHeaders,
+  }
+}
+
+const { headers, generateHeaders } = useHeaders()
+
+if (import.meta.hot) {
+  import.meta.hot.on('valaxy:md-update', () => {
+    setTimeout(() => {
+      generateHeaders()
+      // 400ms transition
+    }, 600)
+  })
+}
+
 // todo mobile toc widget
 </script>
 

package/src/client/pages/index.vue

@@ -1,3 +1,8 @@
 <template>
   <PostList />
 </template>
+
+<route lang="yaml">
+meta:
+  layout: home
+</route>

package/src/node/cli.ts

@@ -8,6 +8,7 @@ import openBrowser from 'open'
 
 import consola from 'consola'
 
+import { yellow } from 'kolorist'
 import { version } from '../../package.json'
 import { resolveOptions } from './options'
 import { bindShortcut, initServer, printInfo } from './utils/cli'
@@ -142,7 +143,7 @@ cli.command(
     }
 
     if (ssg) {
-      consola.info('use vite-ssg to do ssg build...')
+      consola.info(`use ${yellow('vite-ssg')} to do ssg build...`)
 
       try {
         await ssgBuild(options, viteConfig)

package/src/node/markdown/check.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk'
+import { cyan, red, yellow } from 'kolorist'
 import consola from 'consola'
 
 /**
@@ -8,7 +8,7 @@ import consola from 'consola'
 export function checkMd(content: string, path: string) {
   if (content.includes('{%') && content.includes('%}')) {
     consola.error(
-      `${`${path}\n`}        Please ${chalk.red('remove')} ${chalk.cyan('{% %}')}, because it conflicts with ${chalk.yellow('markdown-it-attrs')}.`,
+      `${`${path}\n`}        Please ${red('remove')} ${cyan('{% %}')}, because it conflicts with ${yellow('markdown-it-attrs')}.`,
     )
   }
 }

package/src/node/markdown/index.ts

@@ -10,7 +10,7 @@ import attrs from 'markdown-it-attrs'
 import type { KatexOptions } from 'katex'
 import Katex from './markdown-it/katex'
 import { containerPlugin } from './markdown-it/container'
-import { headingPlugin } from './markdown-it/headings'
+// import { headingPlugin } from './markdown-it/headings'
 import { slugify } from './slugify'
 import { parseHeader } from './markdown-it/parseHeader'
 import { highlight } from './highlight'
@@ -41,7 +41,10 @@ export interface MarkdownOptions extends MarkdownIt.Options {
     permalink?: Anchor.AnchorOptions['permalink']
   }
   // https://github.com/Oktavilla/markdown-it-table-of-contents
-  toc?: any
+  toc?: {
+    includeLevel?: number[]
+    [key: string]: any
+  }
   katex?: KatexOptions
 }
 
@@ -55,7 +58,8 @@ export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions
     .use(containerPlugin)
     // conflict with {% %}
     .use(attrs)
-    .use(headingPlugin, mdOptions?.toc?.includeLevel)
+    // generate toc in client
+    // .use(headingPlugin, mdOptions?.toc?.includeLevel)
     // .use(lineNumberPlugin)
   // https://github.com/arve0/markdown-it-attrs
   // add classes

package/src/node/plugins/extendConfig.ts

@@ -27,15 +27,7 @@ export function createConfigPlugin(options: ResolvedValaxyOptions): Plugin {
           entries: [resolve(options.clientRoot, 'main.ts'), options.configFile],
 
           include: [
-            'vue',
-            'vue-router',
-            '@vueuse/core',
-            '@vueuse/head',
             'dayjs',
-            'nprogress',
-          ],
-          exclude: [
-            'vue-demi',
           ],
         },
       }

package/src/node/plugins/markdown.ts

@@ -1,13 +1,10 @@
-import path from 'path'
-import Markdown from 'vite-plugin-md'
+import Markdown, { meta } from 'vite-plugin-md'
 
 import type { Plugin } from 'vite'
 import type { ResolvedValaxyOptions } from '../options'
 
-import type { MarkdownRenderer } from '../markdown'
 import { setupMarkdownPlugins } from '../markdown'
-import { slash } from '../utils'
-// import { useRoute } from 'vue-router'
+import { checkMd } from '../markdown/check'
 
 export type ViteMdOptions = Parameters<typeof Markdown>[0]
 
@@ -16,8 +13,6 @@ export const excerpt_separator = '<!-- more -->'
 // https://github.com/antfu/vite-plugin-md
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function createMarkdownPlugin(options: ResolvedValaxyOptions): Plugin[] {
-  let _md: MarkdownRenderer
-
   const mdOptions = options.config.markdownIt
 
   const defaultOptions: ViteMdOptions = {
@@ -29,33 +24,35 @@ export function createMarkdownPlugin(options: ResolvedValaxyOptions): Plugin[] {
 
     excerpt: excerpt_separator,
 
-    builders: [
-      // avoid conflict with markdown-it-anchor link
-      // link(),
-      // seems bug, override frontmatter
-      // meta(),
-    ],
+    frontmatterPreprocess: meta() as any,
 
     markdownItSetup(md) {
       if (mdOptions.config)
         mdOptions.config(md)
 
-      _md = setupMarkdownPlugins(md, mdOptions)
+      setupMarkdownPlugins(md, mdOptions)
+    },
+
+    transforms: {
+      before: (code, id) => {
+        checkMd(code, id)
+
+        code.replace('{%', '\{\%')
+        code.replace('%}', '\%\}')
+        return code
+      },
     },
   }
+
   return [Markdown(Object.assign(defaultOptions, options.config.markdown)), {
     name: 'valaxy:md',
     handleHotUpdate(ctx) {
       const { file, server } = ctx
       // send headers
-      if (file.endsWith('.md') && _md && _md.__data) {
+      if (file.endsWith('.md')) {
         server.ws.send({
           type: 'custom',
-          event: 'valaxy:pageHeaders',
-          data: {
-            path: `/${slash(path.relative(`${options.userRoot}/pages`, file))}`,
-            pageHeaders: _md.__data.headers,
-          },
+          event: 'valaxy:md-update',
         })
       }
     },

package/src/node/plugins/preset.ts

@@ -14,10 +14,9 @@ import { VitePWA } from 'vite-plugin-pwa'
 import VueI18n from '@intlify/vite-plugin-vue-i18n'
 import Inspect from 'vite-plugin-inspect'
 
-import chalk from 'chalk'
+import { dim, yellow } from 'kolorist'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
 import { setupMarkdownPlugins } from '../markdown'
-import { checkMd } from '../markdown/check'
 import { createMarkdownPlugin, excerpt_separator } from './markdown'
 import { createUnocssPlugin } from './unocss'
 import { createConfigPlugin } from './extendConfig'
@@ -40,7 +39,7 @@ export async function ViteValaxyPlugins(
   const ValaxyPlugin = createValaxyPlugin(options, serverOptions)
 
   const mdIt = new MarkdownIt({ html: true })
-  const _md = setupMarkdownPlugins(mdIt, options.config.markdownIt)
+  setupMarkdownPlugins(mdIt, options.config.markdownIt)
 
   const roots = [clientRoot, themeRoot, userRoot]
 
@@ -93,7 +92,6 @@ export async function ViteValaxyPlugins(
     }),
 
     ValaxyPlugin,
-    MarkdownPlugin,
     createConfigPlugin(options),
 
     ThemePlugin(options.config.themeConfig),
@@ -110,6 +108,7 @@ export async function ViteValaxyPlugins(
         if (!route.meta)
           route.meta = {}
 
+        // add default layout for home, can be overrode
         if (route.path === '/')
           route.meta.layout = 'home'
 
@@ -120,15 +119,13 @@ export async function ViteValaxyPlugins(
         })
 
         const md = fs.readFileSync(path, 'utf-8')
-        checkMd(md, path)
-
-        const { data, excerpt, content } = matter(md, { excerpt_separator })
+        const { data, excerpt } = matter(md, { excerpt_separator })
 
         // warn for post frontmatter
         if (route.path.startsWith('/posts/')) {
           route.meta.layout = 'post'
           if (!data.date)
-            consola.warn(`You forgot to write ${chalk.yellow('date')} for post: ${chalk.dim(`${route.component}`)}`)
+            consola.warn(`You forgot to write ${yellow('date')} for post: ${dim(`${route.component}`)}`)
         }
 
         route.meta = Object.assign(route.meta, {
@@ -136,11 +133,6 @@ export async function ViteValaxyPlugins(
           excerpt: excerpt ? mdIt.render(excerpt) : '',
         })
 
-        // to refactor
-        // get active header by runtime query head, not render
-        mdIt.render(content)
-        route.meta.headers = _md.__data?.headers
-
         // set default updated
         if (route.meta.frontmatter.updated)
           route.meta.frontmatter.updated = route.meta.frontmatter.date
@@ -152,7 +144,6 @@ export async function ViteValaxyPlugins(
         return route
       },
     }),
-
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
     Layouts({
       layoutsDirs: roots.map(root => `${root}/layouts`),
@@ -180,6 +171,8 @@ export async function ViteValaxyPlugins(
     // UnocssPlugin,
     UnocssPlugin,
 
+    ...MarkdownPlugin,
+
     // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
       registerType: 'autoUpdate',

package/src/node/plugins/unocss.ts

@@ -62,6 +62,7 @@ export const createUnocssConfig = async (options: ResolvedValaxyOptions) => {
         // warn: true,
       }),
       presetTypography(),
+      // todo, add unocss config it
       presetWebFonts({
         fonts: {
           serif: [

package/src/node/rss.ts

@@ -1,5 +1,5 @@
 import { dirname } from 'path'
-import chalk from 'chalk'
+import { cyan, dim } from 'kolorist'
 
 import fg from 'fast-glob'
 import fs from 'fs-extra'
@@ -37,7 +37,7 @@ export async function build(options: ResolvedValaxyOptions) {
     link: options.config.author.link,
   }
 
-  consola.info(`RSS Site Url: ${chalk.cyan(siteUrl)}`)
+  consola.info(`RSS Site Url: ${cyan(siteUrl)}`)
 
   const ccVersion = (config.license.type === 'zero') ? '1.0' : '4.0'
   const feedOptions: FeedOptions = {
@@ -64,12 +64,12 @@ export async function build(options: ResolvedValaxyOptions) {
 
       // not add to posts
       if (!data.date) {
-        consola.warn(`Do you forget to write date for ${chalk.dim(i)}`)
+        consola.warn(`Do you forget to write date for ${dim(i)}`)
         return false
       }
 
       if (data.draft) {
-        consola.warn(`Ignore draft post: ${chalk.dim(i)}`)
+        consola.warn(`Ignore draft post: ${dim(i)}`)
         return false
       }
 

package/src/node/utils/cli.ts

@@ -1,9 +1,8 @@
 import * as readline from 'readline'
 import path from 'path'
 import os from 'os'
-// import equal from 'fast-deep-equal'
 
-import chalk from 'chalk'
+import { blue, bold, cyan, dim, gray, green, underline } from 'kolorist'
 import consola from 'consola'
 import type { InlineConfig, ViteDevServer } from 'vite'
 import { createServer } from '../server'
@@ -15,26 +14,26 @@ let server: ViteDevServer | undefined
 
 export function printInfo(options: ResolvedValaxyOptions, port?: number, remote?: string | boolean) {
   console.log()
-  console.log(`  ${chalk.bold('🌌 Valaxy')}  ${chalk.blue(`v${version}`)}`)
+  console.log(`  ${bold('🌌 Valaxy')}  ${blue(`v${version}`)}`)
   console.log()
-  console.log(`${chalk.dim('  🪐 theme  ')} > ${(options.theme ? chalk.green(options.theme) : chalk.gray('none'))}`)
-  console.log(`  ${chalk.dim('📁')} ${chalk.dim(path.resolve(options.userRoot))}`)
+  console.log(`${dim('  🪐 theme  ')} > ${(options.theme ? green(options.theme) : gray('none'))}`)
+  console.log(`  ${dim('📁')} ${dim(path.resolve(options.userRoot))}`)
   if (port) {
     console.log()
-    console.log(`${chalk.dim('  Preview   ')} > ${chalk.cyan(`http://localhost:${chalk.bold(port)}/`)}`)
+    console.log(`${dim('  Preview   ')} > ${cyan(`http://localhost:${bold(port)}/`)}`)
 
     if (remote) {
       Object.values(os.networkInterfaces())
         .forEach(v => (v || [])
           .filter(details => details.family === 'IPv4' && !details.address.includes('127.0.0.1'))
           .forEach(({ address }) => {
-            console.log(`${chalk.dim('  Network   ')} > ${chalk.blue(`http://${address}:${chalk.bold(port)}/`)}`)
+            console.log(`${dim('  Network   ')} > ${blue(`http://${address}:${bold(port)}/`)}`)
           }),
         )
     }
 
     console.log()
-    console.log(`${chalk.dim('  shortcuts ')} > ${chalk.underline('r')}${chalk.dim('estart | ')}${chalk.underline('o')}${chalk.dim('pen | ')}${chalk.underline('e')}${chalk.dim('dit')}`)
+    console.log(`${dim('  shortcuts ')} > ${underline('r')}${dim('estart | ')}${underline('o')}${dim('pen | ')}${underline('e')}${dim('dit')}`)
   }
   console.log()
 }
@@ -56,7 +55,7 @@ export async function initServer(options: ResolvedValaxyOptions, viteConfig: Inl
 
         if (iconChanged) {
           consola.info('Find new icon, reload server...')
-          consola.info(`If you do not want to reload it, write icon name in ${chalk.green('config.unocss.safelist')}.`)
+          consola.info(`If you do not want to reload it, write icon name in ${green('config.unocss.safelist')}.`)
           consola.info('For example: ["i-ri-cloud-line"]')
           console.log()
           reload = true

package/src/node/vite.ts

@@ -1,6 +1,6 @@
 import { join } from 'path'
 import type { InlineConfig } from 'vite'
-import { searchForWorkspaceRoot } from 'vite'
+import { splitVendorChunkPlugin } from 'vite'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from './options'
 
 import { ViteValaxyPlugins } from './plugins/preset'
@@ -29,7 +29,8 @@ export async function createViteConfig(options: ResolvedValaxyOptions, serverOpt
     root: options.clientRoot,
     publicDir: join(options.userRoot, 'public'),
 
-    plugins: await ViteValaxyPlugins(options, serverOptions, {}),
+    // https://vitejs.dev/guide/build.html#chunking-strategy
+    plugins: [await ViteValaxyPlugins(options, serverOptions, {}), splitVendorChunkPlugin()],
 
     server: {
       fs: {
@@ -37,7 +38,7 @@ export async function createViteConfig(options: ResolvedValaxyOptions, serverOpt
           // not need to search workspace root
           options.clientRoot,
           options.themeRoot,
-          searchForWorkspaceRoot(options.userRoot),
+          options.userRoot,
         ],
       },
     },

package/tsup.config.ts

@@ -3,9 +3,9 @@ import { defineConfig } from 'tsup'
 export default defineConfig((options) => {
   return {
     entry: [
+      'src/index.ts',
       'src/node/index.ts',
       'src/node/cli.ts',
-      'src/index.ts',
     ],
     // https://tsup.egoist.sh/#code-splitting
     // Code splitting currently only works with the esm output format, and it's enabled by default. If you want code splitting for cjs output format as well, try using --splitting flag which is an experimental feature to get rid of the limitation in esbuild.