valaxy 0.5.0 → 0.6.0

package/dist/node/index.d.ts

@@ -1,9 +1,8 @@
 import * as vite from 'vite';
 import { InlineConfig } from 'vite';
-import { V as ValaxyConfig } from '../config-7bd43d41.js';
+import { V as ValaxyConfig } from '../config-ad23e743.js';
 import 'type-fest';
 import 'unocss/vite';
-import 'vite-plugin-md';
 import 'markdown-it';
 import 'markdown-it-anchor';
 import 'katex';
@@ -36,6 +35,7 @@ interface ResolvedValaxyOptions {
      * config file path
      */
     configFile: string;
+    pages: string[];
 }
 interface ValaxyServerOptions {
     onConfigReload?: (newConfig: ValaxyConfig, config: ValaxyConfig) => void;

package/dist/node/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkXQIGHIAXjs = require('../chunk-XQIGHIAX.js');require('../chunk-U5OMNIOK.js');exports.createServer = _chunkXQIGHIAXjs.g;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkCP3UCJ2Djs = require('../chunk-CP3UCJ2D.js');require('../chunk-U5OMNIOK.js');exports.createServer = _chunkCP3UCJ2Djs.f;

package/dist/node/index.mjs

@@ -1 +1 @@
-import{g as o}from"../chunk-RSQONJW3.mjs";import"../chunk-EAN2KU6W.mjs";export{o as createServer};
+import{f as o}from"../chunk-HCVZ2UUO.mjs";import"../chunk-EAN2KU6W.mjs";export{o as createServer};

package/index.ts

@@ -0,0 +1,3 @@
+export * from './client'
+export * from './types'
+export * from './config'

package/node/config.ts

@@ -2,12 +2,11 @@
 import fs from 'fs'
 import { loadConfig } from 'unconfig'
 import defu from 'defu'
-import type { YunTheme } from 'valaxy-theme-yun'
-import type { UserConfig, ValaxyConfig } from '../types'
+import type { ValaxyConfig } from '../types'
 import type { ValaxyEntryOptions } from './options'
 
 const defaultValaxyConfig: ValaxyConfig = {
-  url: '',
+  url: '/',
   lang: 'en',
   title: 'Valaxy Blog',
   description: 'A blog generated by Valaxy.',
@@ -22,13 +21,15 @@ const defaultValaxyConfig: ValaxyConfig = {
       message: 'All at sea.',
     },
   },
-  favicon: 'favicon.svg',
+  favicon: '/favicon.svg',
   feed: {
     name: '',
     favicon: 'favicon.svg',
   },
   social: [],
 
+  lastUpdated: true,
+
   license: {
     enabled: true,
     language: '',
@@ -96,9 +97,10 @@ const defaultValaxyConfig: ValaxyConfig = {
 
   unocss: {},
 
-  markdown: {
-    excerpt: '<!-- more -->',
-  },
+  // markdown: {
+  //   excerpt: '<!-- more -->',
+  // },
+
   markdownIt: {
     toc: {
       includeLevel: [1, 2, 3, 4],
@@ -152,19 +154,3 @@ export async function resolveConfig(options: ValaxyEntryOptions = {}) {
     theme,
   }
 }
-
-/**
- * Type config helper
- */
-export function defineConfig(config: UserConfig<YunTheme.Config>) {
-  return config
-}
-
-/**
- * Type config helper for custom theme config
- */
-export function defineConfigWithTheme<ThemeConfig>(
-  config: UserConfig<ThemeConfig>,
-) {
-  return config
-}

package/node/markdown/index.ts

@@ -1,4 +1,4 @@
-import type MarkdownIt from 'markdown-it'
+import MarkdownIt from 'markdown-it'
 
 import Anchor from 'markdown-it-anchor'
 import Emoji from 'markdown-it-emoji'
@@ -8,30 +8,23 @@ import TaskLists from 'markdown-it-task-lists'
 import attrs from 'markdown-it-attrs'
 
 import type { KatexOptions } from 'katex'
+import type { Header } from '../../types'
 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'
 import { highlightLinePlugin, preWrapperPlugin } from './markdown-it/highlightLines'
 
-export interface Header {
-  level: number
-  title: string
-  slug: string
-  /**
-   * i18n
-   */
-  lang?: string
-}
-
 export interface MarkdownParsedData {
   hoistedTags?: string[]
   links?: string[]
   headers?: Header[]
 }
 export interface MarkdownRenderer extends MarkdownIt {
+  __path: string
+  __relativePath: string
   __data: MarkdownParsedData
 }
 
@@ -59,7 +52,7 @@ export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions
     // conflict with {% %}
     .use(attrs)
     // generate toc in client
-    // .use(headingPlugin, mdOptions?.toc?.includeLevel)
+    .use(headingPlugin, mdOptions?.toc?.includeLevel)
     // .use(lineNumberPlugin)
   // https://github.com/arve0/markdown-it-attrs
   // add classes
@@ -93,3 +86,18 @@ export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions
 
   return md as MarkdownRenderer
 }
+
+export const createMarkdownRenderer = async (
+  srcDir: string,
+  options: MarkdownOptions = {},
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  base = '/',
+): Promise<MarkdownRenderer> => {
+  const md = MarkdownIt({
+    html: true,
+    linkify: true,
+    ...options,
+  }) as MarkdownRenderer
+  setupMarkdownPlugins(md)
+  return md
+}

package/node/markdown/markdownToVue.ts

@@ -0,0 +1,253 @@
+// copy from vitepress
+import fs from 'fs'
+import path from 'path'
+import c from 'picocolors'
+import matter from 'gray-matter'
+import LRUCache from 'lru-cache'
+import _debug from 'debug'
+import { getGitTimestamp, slash, transformObject } from '../utils'
+import { EXTERNAL_URL_RE } from '../../shared'
+import type { HeadConfig, PageData } from '../../types'
+import { deeplyParseHeader } from './markdown-it/parseHeader'
+import { createMarkdownRenderer } from '.'
+import type { MarkdownOptions } from '.'
+
+const debug = _debug('vitepress:md')
+const cache = new LRUCache<string, MarkdownCompileResult>({ max: 1024 })
+const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g
+
+export interface MarkdownCompileResult {
+  vueSrc: string
+  pageData: PageData
+  deadLinks: string[]
+  includes: string[]
+}
+
+const inferTitle = (frontmatter: Record<string, any>, content: string) => {
+  if (frontmatter.title)
+    return deeplyParseHeader(frontmatter.title)
+
+  const match = content.match(/^\s*#+\s+(.*)/m)
+
+  if (match)
+    return deeplyParseHeader(match[1].trim())
+
+  return ''
+}
+
+const getHeadMetaContent = (
+  head: HeadConfig[],
+  name: string,
+): string | undefined => {
+  if (!head || !head.length)
+    return undefined
+
+  const meta = head.find(([tag, attrs = {}]) => {
+    return tag === 'meta' && attrs.name === name && attrs.content
+  })
+
+  return meta && meta[1].content
+}
+
+const inferDescription = (frontmatter: Record<string, any>) => {
+  const { description, head } = frontmatter
+
+  if (description !== undefined)
+    return description
+
+  return (head && getHeadMetaContent(head, 'description')) || ''
+}
+
+export async function createMarkdownToVueRenderFn(
+  srcDir: string,
+  options: MarkdownOptions = {},
+  pages: string[],
+  userDefines: Record<string, any> | undefined,
+  isBuild = false,
+  base = '/',
+  includeLastUpdatedData = false,
+) {
+  const md = await createMarkdownRenderer(srcDir, options, base)
+
+  pages = pages.map(p => slash(p.replace(/\.md$/, '')))
+
+  const userDefineRegex = userDefines
+    ? new RegExp(
+        `\\b(${Object.keys(userDefines)
+          .map(key => key.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&'))
+          .join('|')})`,
+        'g',
+    )
+    : null
+
+  return async (
+    src: string,
+    file: string,
+    publicDir: string,
+  ): Promise<MarkdownCompileResult> => {
+    const relativePath = slash(path.relative(srcDir, file))
+    const dir = path.dirname(file)
+
+    const cached = cache.get(src)
+    if (cached) {
+      debug(`[cache hit] ${relativePath}`)
+      return cached
+    }
+
+    const start = Date.now()
+
+    // resolve includes
+    const includes: string[] = []
+    src = src.replace(includesRE, (_, m1) => {
+      const includePath = path.join(dir, m1)
+      const content = fs.readFileSync(includePath, 'utf-8')
+      includes.push(slash(includePath))
+      return content
+    })
+
+    const { content, data: frontmatter } = matter(src)
+
+    // reset state before render
+    md.__path = file
+    md.__relativePath = relativePath
+
+    let html = md.render(content)
+    const data = md.__data
+
+    if (isBuild) {
+      // avoid env variables being replaced by vite
+      html = html
+        .replace(/\bimport\.meta/g, 'import.<wbr/>meta')
+        .replace(/\bprocess\.env/g, 'process.<wbr/>env')
+
+      // also avoid replacing vite user defines
+      if (userDefineRegex) {
+        html = html.replace(
+          userDefineRegex,
+          _ => `${_[0]}<wbr/>${_.slice(1)}`,
+        )
+      }
+    }
+
+    // validate data.links
+    const deadLinks: string[] = []
+    const recordDeadLink = (url: string) => {
+      console.warn(
+        c.yellow(
+          `\n(!) Found dead link ${c.cyan(url)} in file ${c.white(c.dim(file))}`,
+        ),
+      )
+      deadLinks.push(url)
+    }
+
+    if (data.links) {
+      const dir = path.dirname(file)
+      for (let url of data.links) {
+        if (/\.(?!html|md)\w+($|\?)/i.test(url))
+          continue
+
+        if (url.replace(EXTERNAL_URL_RE, '').startsWith('//localhost:')) {
+          recordDeadLink(url)
+          continue
+        }
+
+        url = url.replace(/[?#].*$/, '').replace(/\.(html|md)$/, '')
+        if (url.endsWith('/'))
+          url += 'index'
+        const resolved = decodeURIComponent(
+          slash(
+            url.startsWith('/')
+              ? url.slice(1)
+              : path.relative(srcDir, path.resolve(dir, url)),
+          ),
+        )
+        if (
+          !pages.includes(resolved)
+          && !fs.existsSync(path.resolve(dir, publicDir, `${resolved}.html`))
+        )
+          recordDeadLink(url)
+      }
+    }
+
+    const pageData: PageData = {
+      title: inferTitle(frontmatter, content),
+      titleTemplate: frontmatter.titleTemplate,
+      description: inferDescription(frontmatter),
+      frontmatter,
+      headers: data.headers || [],
+      relativePath,
+      path: path.join(srcDir, relativePath),
+    }
+
+    if (includeLastUpdatedData)
+      pageData.lastUpdated = await getGitTimestamp(file)
+
+    const valaxyMd = 'ValaxyMd'
+    const vueSrc
+      = `${genPageDataCode(data.hoistedTags || [], pageData).join('\n')
+      }\n<template><${valaxyMd} :frontmatter="frontmatter">${html}</${valaxyMd}></template>`
+
+    debug(`[render] ${file} in ${Date.now() - start}ms.`)
+
+    const result = {
+      vueSrc,
+      pageData,
+      deadLinks,
+      includes,
+    }
+    cache.set(src, result)
+    return result
+  }
+}
+
+const scriptRE = /<\/script>/
+const scriptLangTsRE = /<\s*script[^>]*\blang=['"]ts['"][^>]*/
+const scriptSetupRE = /<\s*script[^>]*\bsetup\b[^>]*/
+const scriptClientRE = /<\s*script[^>]*\bclient\b[^>]*/
+const defaultExportRE = /((?:^|\n|;)\s*)export(\s*)default/
+const namedDefaultExportRE = /((?:^|\n|;)\s*)export(.+)as(\s*)default/
+
+function genPageDataCode(tags: string[], data: PageData) {
+  const code = `\nexport const __pageData = ${transformObject(data)}`
+
+  const existingScriptIndex = tags.findIndex((tag) => {
+    return (
+      scriptRE.test(tag)
+      && !scriptSetupRE.test(tag)
+      && !scriptClientRE.test(tag)
+    )
+  })
+
+  const isUsingTS = tags.findIndex(tag => scriptLangTsRE.test(tag)) > -1
+
+  const exportScript = `
+  export default {
+    name:'${data.relativePath}',
+    data() {
+      return {frontmatter:${transformObject(data.frontmatter)}}
+    }
+  }`
+
+  if (existingScriptIndex > -1) {
+    const tagSrc = tags[existingScriptIndex]
+    // user has <script> tag inside markdown
+    // if it doesn't have export default it will error out on build
+    const hasDefaultExport
+      = defaultExportRE.test(tagSrc) || namedDefaultExportRE.test(tagSrc)
+    tags[existingScriptIndex] = tagSrc.replace(
+      scriptRE,
+      `${code
+        + (hasDefaultExport
+          ? ''
+          : `\n${exportScript}`)
+        }</script>`,
+    )
+  }
+  else {
+    tags.unshift(
+      `<script ${isUsingTS ? 'lang="ts"' : ''}>${code}\n${exportScript}</script>`,
+    )
+  }
+
+  return tags
+}

package/node/options.ts

@@ -1,5 +1,6 @@
 import { dirname, resolve } from 'path'
 import _debug from 'debug'
+import fg from 'fast-glob'
 import type { ValaxyConfig } from '../types'
 import { resolveConfig } from './config'
 import { resolveImportPath } from './utils'
@@ -43,6 +44,7 @@ export interface ResolvedValaxyOptions {
    * config file path
    */
   configFile: string
+  pages: string[]
 }
 
 export interface ValaxyServerOptions {
@@ -77,6 +79,19 @@ export async function resolveOptions(options: ValaxyEntryOptions, mode: Resolved
   const { config: valaxyConfig, configFile, theme } = await resolveConfig(options)
   const themeRoot = getThemeRoot(theme, userRoot)
 
+  // Important: fast-glob doesn't guarantee order of the returned files.
+  // We must sort the pages so the input list to rollup is stable across
+  // builds - otherwise different input order could result in different exports
+  // order in shared chunks which in turns invalidates the hash of every chunk!
+  // JavaScript built-in sort() is mandated to be stable as of ES2019 and
+  // supported in Node 12+, which is required by Vite.
+  const pages = (
+    await fg(['**.md'], {
+      cwd: userRoot,
+      ignore: ['**/node_modules'],
+    })
+  ).sort()
+
   const valaxyOptions: ResolvedValaxyOptions = {
     mode,
     clientRoot,
@@ -85,6 +100,7 @@ export async function resolveOptions(options: ValaxyEntryOptions, mode: Resolved
     theme,
     config: valaxyConfig,
     configFile: configFile || '',
+    pages,
   }
   debug(valaxyOptions)
 

package/node/plugins/extendConfig.ts

@@ -14,13 +14,13 @@ export function createConfigPlugin(options: ResolvedValaxyOptions): Plugin {
             '@/': `${toAtFS(options.userRoot)}/`,
             '~/': `${toAtFS(options.clientRoot)}/`,
             'valaxy/client': `${toAtFS(options.clientRoot)}/`,
+            'valaxy': toAtFS(resolve(options.clientRoot, 'index.ts')),
             '@valaxyjs/client': `${toAtFS(options.clientRoot)}/`,
             '@valaxyjs/config': '/@valaxyjs/config',
+            '@valaxyjs/context': '/@valaxyjs/context',
             'valaxy/package.json': toAtFS(resolve(options.clientRoot, '../../package.json')),
-            'valaxy/': `${toAtFS(resolve(options.clientRoot, '..'))}/`,
-            'valaxy': toAtFS(resolve(options.clientRoot, '../index.ts')),
             [`valaxy-theme-${options.theme}/`]: `${toAtFS(resolve(options.themeRoot))}/`,
-            [`valaxy-theme-${options.theme}`]: `${toAtFS(resolve(options.themeRoot))}`,
+            [`valaxy-theme-${options.theme}`]: `${toAtFS(resolve(options.themeRoot))}/index.ts`,
           },
         },
 
@@ -37,6 +37,7 @@ export function createConfigPlugin(options: ResolvedValaxyOptions): Plugin {
             'nprogress',
           ],
 
+          exclude: ['@docsearch/js'],
         },
       }
       return mergeConfig(config, injection)

package/node/plugins/index.ts

@@ -1,11 +1,14 @@
 import fs from 'fs'
 
-import { join } from 'path'
-import type { Plugin } from 'vite'
+import { join, relative } from 'path'
+import type { Plugin, ResolvedConfig } from 'vite'
 // import consola from 'consola'
 import { resolveConfig } from '../config'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
-import { resolveImportPath, toAtFS } from '../utils'
+import { resolveImportPath, slash, toAtFS } from '../utils'
+import { createMarkdownToVueRenderFn } from '../markdown/markdownToVue'
+import type { PageDataPayload } from '../../types'
+import { checkMd } from '../markdown/check'
 import { VALAXY_CONFIG_ID } from './valaxy'
 
 /**
@@ -68,8 +71,26 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
 
   const roots = [options.clientRoot, options.themeRoot, options.userRoot]
 
+  let markdownToVue: Awaited<ReturnType<typeof createMarkdownToVueRenderFn>>
+  let hasDeadLinks = false
+  let config: ResolvedConfig
+
   return {
-    name: 'Valaxy',
+    name: 'valaxy',
+    enforce: 'pre',
+
+    async configResolved(resolvedConfig) {
+      config = resolvedConfig
+      markdownToVue = await createMarkdownToVueRenderFn(
+        options.userRoot,
+        options.config.markdownIt,
+        options.pages,
+        config.define,
+        config.command === 'build',
+        config.base,
+        options.config.lastUpdated,
+      )
+    },
 
     configureServer(server) {
       server.watcher.add([
@@ -90,6 +111,13 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
         // stringify twice for \"
         return `export default ${JSON.stringify(JSON.stringify(valaxyConfig))}`
 
+      if (id === '/@valaxyjs/context') {
+        return `export default ${JSON.stringify(JSON.stringify({
+          userRoot: options.userRoot,
+          // clientRoot: options.clientRoot,
+        }))}`
+      }
+
       // generate styles
       if (id === '/@valaxyjs/styles')
         return generateStyles(roots, options)
@@ -101,12 +129,81 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
         return ''
     },
 
+    async transform(code, id) {
+      if (id.endsWith('.md')) {
+        checkMd(code, id)
+        code.replace('{%', '\{\%')
+        code.replace('%}', '\%\}')
+
+        // const scripts = [
+        // '<script setup>',
+        // 'import { useRoute } from "vue-router"',
+        // 'const route = useRoute()',
+        // `route.meta.headers = ${JSON.stringify(_md.__data)}`,
+        // `export const data = JSON.parse(${JSON.stringify(JSON.stringify(pageData))})`,
+        // `frontmatter.data = JSON.parse(${JSON.stringify(JSON.stringify(pageData))})`,
+        // '</script>',
+        // ]
+
+        // const li = code.lastIndexOf('</script>')
+        // code = code.slice(0, li) + scripts.join('\n') + code.slice(li + 9)
+
+        // transform .md files into vueSrc so plugin-vue can handle it
+        const { vueSrc, deadLinks, includes } = await markdownToVue(
+          code,
+          id,
+          config.publicDir,
+        )
+        if (deadLinks.length)
+          hasDeadLinks = true
+
+        if (includes.length) {
+          includes.forEach((i) => {
+            this.addWatchFile(i)
+          })
+        }
+
+        return vueSrc
+      }
+    },
+
+    renderStart() {
+      if (hasDeadLinks)
+        throw new Error('One or more pages contain dead links.')
+    },
+
     async handleHotUpdate(ctx) {
       // handle valaxy.config.ts hmr
-      const { file, server } = ctx
+      const { file, server, read } = ctx
       if (file !== options.configFile)
         return
 
+      // send headers
+      if (file.endsWith('.md')) {
+        const content = await read()
+        const { pageData, vueSrc } = await markdownToVue(
+          content,
+          file,
+          join(options.userRoot, 'public'),
+        )
+
+        const path = `/${slash(relative(`${options.userRoot}/pages`, file))}`
+        const payload: PageDataPayload = {
+          // path: `/${slash(relative(srcDir, file))}`,
+          path,
+          pageData,
+        }
+
+        server.ws.send({
+          type: 'custom',
+          event: 'valaxy:pageData',
+          data: payload,
+        })
+
+        // overwrite src so vue plugin can handle the HMR
+        ctx.read = () => vueSrc
+      }
+
       const { config } = await resolveConfig()
 
       serverOptions.onConfigReload?.(config, options.config)
@@ -116,7 +213,7 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
       //   consola.warn('[valaxy]: config.base has changed. Please restart the dev server.')
       valaxyConfig = config
 
-      const moduleIds = [`/${VALAXY_CONFIG_ID}`]
+      const moduleIds = [`/${VALAXY_CONFIG_ID}`, '/@valaxyjs/context']
       const moduleEntries = [
         ...Array.from(moduleIds).map(id => server.moduleGraph.getModuleById(id)),
       ].filter(<T>(item: T): item is NonNullable<T> => !!item)

package/node/plugins/preset.ts

@@ -16,7 +16,7 @@ import Inspect from 'vite-plugin-inspect'
 import { dim, yellow } from 'kolorist'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
 import { setupMarkdownPlugins } from '../markdown'
-import { createMarkdownPlugin, excerpt_separator } from './markdown'
+// import { createMarkdownPlugin, excerpt_separator } from './markdown'
 import { createUnocssPlugin } from './unocss'
 import { createConfigPlugin } from './extendConfig'
 import { createValaxyPlugin } from '.'
@@ -32,7 +32,7 @@ export async function ViteValaxyPlugins(
 ): Promise<(PluginOption | PluginOption[])[] | undefined> {
   const { clientRoot, themeRoot, userRoot } = options
 
-  const MarkdownPlugin = createMarkdownPlugin(options)
+  // const MarkdownPlugin = createMarkdownPlugin(options)
   const UnocssPlugin = await createUnocssPlugin(options)
 
   const ValaxyPlugin = createValaxyPlugin(options, serverOptions)
@@ -42,7 +42,7 @@ export async function ViteValaxyPlugins(
 
   const roots = [clientRoot, themeRoot, userRoot]
 
-  const { default: ThemePlugin } = await import(`valaxy-theme-${options.theme}`)
+  const { default: ThemePlugin } = (await import(`valaxy-theme-${options.theme}`))
 
   const customElements = new Set([
   // katex
@@ -90,8 +90,8 @@ export async function ViteValaxyPlugins(
       },
     }),
 
-    ValaxyPlugin,
     createConfigPlugin(options),
+    ValaxyPlugin,
 
     ThemePlugin(options.config.themeConfig),
 
@@ -118,7 +118,7 @@ export async function ViteValaxyPlugins(
         })
 
         const md = fs.readFileSync(path, 'utf-8')
-        const { data, excerpt } = matter(md, { excerpt_separator })
+        const { data, excerpt } = matter(md, { excerpt_separator: '<!-- more -->' })
 
         // warn for post frontmatter
         if (route.path.startsWith('/posts/')) {
@@ -170,7 +170,7 @@ export async function ViteValaxyPlugins(
     // UnocssPlugin,
     UnocssPlugin,
 
-    ...MarkdownPlugin,
+    // ...MarkdownPlugin,
 
     // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
     VueI18n({