valaxy 0.5.0 → 0.6.2

package/dist/node/index.d.ts

@@ -1,10 +1,10 @@
 import * as vite from 'vite';
 import { InlineConfig } from 'vite';
-import { V as ValaxyConfig } from '../config-7bd43d41.js';
+import { V as ValaxyConfig } from '../config-112ac884.js';
 import 'type-fest';
 import 'unocss/vite';
-import 'vite-plugin-md';
 import 'markdown-it';
+import 'shiki';
 import 'markdown-it-anchor';
 import 'katex';
 
@@ -36,6 +36,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 _chunkYUC5WP5Yjs = require('../chunk-YUC5WP5Y.js');require('../chunk-U5OMNIOK.js');exports.createServer = _chunkYUC5WP5Yjs.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-23IW567G.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/highlight.ts

@@ -1,50 +1,38 @@
+import { getHighlighter } from 'shiki'
 import consola from 'consola'
-import escapeHtml from 'escape-html'
-import prism from 'prismjs'
+import type { ThemeOptions } from '../markdown'
 
-// prism is listed as actual dep so it's ok to require
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const loadLanguages = require('prismjs/components/index')
+export async function highlight(theme: ThemeOptions = 'material-palenight') {
+  const themes = typeof theme === 'string' ? [theme] : [theme.dark, theme.light]
+  const highlighter = await getHighlighter({ themes })
+  const preRE = /^<pre.*?>/
 
-// required to make embedded highlighting work...
-loadLanguages(['markup', 'css', 'javascript'])
+  return (str: string, lang: string) => {
+    lang = lang || 'text'
 
-function wrap(code: string, lang: string): string {
-  if (lang === 'text')
-    code = escapeHtml(code)
+    // https://stackoverflow.com/questions/22268952/what-is-the-difference-between-yaml-and-yml-extension
+    // use yaml better
 
-  return `<pre v-pre><code>${code}</code></pre>`
-}
-
-export const highlight = (str: string, lang: string) => {
-  if (!lang)
-    return wrap(str, 'text')
-
-  lang = lang.toLowerCase()
-  const rawLang = lang
-  if (lang === 'vue' || lang === 'html')
-    lang = 'markup'
+    // adaptive
+    if (lang === 'yml') {
+      lang = 'yaml'
+      consola.warn('[shiki] It is recommended to use `.yaml` instead of `.yml`.')
+    }
 
-  if (lang === 'md')
-    lang = 'markdown'
+    if (typeof theme === 'string') {
+      return highlighter
+        .codeToHtml(str, { lang, theme })
+        .replace(preRE, '<pre v-pre>')
+    }
 
-  if (lang === 'ts')
-    lang = 'typescript'
+    const dark = highlighter
+      .codeToHtml(str, { lang, theme: theme.dark })
+      .replace(preRE, '<pre v-pre class="vp-code-dark">')
 
-  if (lang === 'py')
-    lang = 'python'
+    const light = highlighter
+      .codeToHtml(str, { lang, theme: theme.light })
+      .replace(preRE, '<pre v-pre class="vp-code-light">')
 
-  if (!prism.languages[lang]) {
-    try {
-      loadLanguages([lang])
-    }
-    catch (e) {
-      consola.warn(`[valaxy] Syntax highlight for language "${lang}" is not supported.`)
-    }
-  }
-  if (prism.languages[lang]) {
-    const code = prism.highlight(str, prism.languages[lang], lang)
-    return wrap(code, rawLang)
+    return dark + light
   }
-  return wrap(str, 'text')
 }

package/node/markdown/index.ts

@@ -1,4 +1,6 @@
-import type MarkdownIt from 'markdown-it'
+import MarkdownIt from 'markdown-it'
+
+import type { Theme } from 'shiki'
 
 import Anchor from 'markdown-it-anchor'
 import Emoji from 'markdown-it-emoji'
@@ -8,23 +10,16 @@ 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 type ThemeOptions = Theme | { light: Theme; dark: Theme }
 
 export interface MarkdownParsedData {
   hoistedTags?: string[]
@@ -32,6 +27,8 @@ export interface MarkdownParsedData {
   headers?: Header[]
 }
 export interface MarkdownRenderer extends MarkdownIt {
+  __path: string
+  __relativePath: string
   __data: MarkdownParsedData
 }
 
@@ -46,12 +43,13 @@ export interface MarkdownOptions extends MarkdownIt.Options {
     [key: string]: any
   }
   katex?: KatexOptions
+  /**
+   * shiki
+   */
+  theme?: ThemeOptions
 }
 
-export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions = {}) {
-  md.set({
-    highlight,
-  })
+export async function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions = {}) {
   md
     .use(highlightLinePlugin)
     .use(preWrapperPlugin)
@@ -59,7 +57,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 +91,19 @@ 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,
+    highlight: await highlight(options.theme),
+    ...options,
+  }) as MarkdownRenderer
+  await setupMarkdownPlugins(md)
+  return md
+}

package/node/markdown/markdown-it/highlightLines.ts

@@ -65,7 +65,7 @@ export const preWrapperPlugin = (md: MarkdownIt) => {
     const [tokens, idx] = args
     const token = tokens[idx]
     const rawCode = fence(...args)
-    return `<div class="language-${token.info.trim()}">${rawCode}</div>`
+    return `<div class="language-${token.info.trim()}"><span class="copy"></span>${rawCode}</div>`
   }
 }
 

package/node/markdown/markdownToVue.ts

@@ -0,0 +1,275 @@
+// 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 pageComponent = 'ValaxyMain'
+
+    function generateSlots() {
+      const slots = [
+        'main-header',
+        'main-header-after',
+        'main-nav',
+        'main-content',
+        'main-content-after',
+        'footer',
+        'aside',
+        'aside-custom',
+      ]
+      const slotsText = slots.map(s => `<template #${s}><slot name="${s}" /></template>`).join('')
+      return slotsText
+    }
+    const vueSrc
+      = `${genPageDataCode(data.hoistedTags || [], pageData).join('\n')
+      }\n<template><${pageComponent} :frontmatter="frontmatter" :data="data">
+        <template #main-content-md>${html}</template>
+        ${generateSlots()}
+        <slot />
+      </${pageComponent}></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 = ''
+
+  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)},
+        data: ${transformObject(data)}
+      }
+    }
+  }`
+
+  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)