valaxy 0.1.0 → 0.2.0

package/src/node/markdown/highlightLines.ts

@@ -0,0 +1,96 @@
+// Modified from https://github.com/egoist/markdown-it-highlight-lines
+import type MarkdownIt from 'markdown-it'
+
+const wrapperRE = /^<pre .*?><code>/
+
+export const highlightLinePlugin = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx, options] = args
+    const token = tokens[idx]
+
+    // due to use of markdown-it-attrs, the {0} syntax would have been converted
+    // to attrs on the token
+    const attr = token.attrs && token.attrs[0]
+    if (!attr)
+      return fence(...args)
+
+    const lines = attr[0]
+    if (!lines || !/[\d,-]+/.test(lines))
+      return fence(...args)
+
+    const lineNumbers = lines
+      .split(',')
+      .map(v => v.split('-').map(v => parseInt(v, 10)))
+
+    const code = options.highlight
+      ? options.highlight(token.content, token.info, '')
+      : token.content
+
+    const rawCode = code.replace(wrapperRE, '')
+    const highlightLinesCode = rawCode
+      .split('\n')
+      .map((split, index) => {
+        const lineNumber = index + 1
+        const inRange = lineNumbers.some(([start, end]) => {
+          if (start && end)
+            return lineNumber >= start && lineNumber <= end
+
+          return lineNumber === start
+        })
+        if (inRange)
+          return '<div class="highlighted">&nbsp;</div>'
+
+        return '<br>'
+      })
+      .join('')
+
+    const highlightLinesWrapperCode = `<div class="highlight-lines">${highlightLinesCode}</div>`
+
+    return highlightLinesWrapperCode + code
+  }
+}
+
+// markdown-it plugin for wrapping <pre> ... </pre>.
+//
+// If your plugin was chained before preWrapper, you can add additional element directly.
+// If your plugin was chained after preWrapper, you can use these slots:
+//   1. <!--beforebegin-->
+//   2. <!--afterbegin-->
+//   3. <!--beforeend-->
+//   4. <!--afterend-->
+export const preWrapperPlugin = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+    const rawCode = fence(...args)
+    return `<div class="language-${token.info.trim()}">${rawCode}</div>`
+  }
+}
+
+// markdown-it plugin for generating line numbers.
+// It depends on preWrapper plugin.
+export const lineNumberPlugin = (md: MarkdownIt) => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const rawCode = fence(...args)
+    const code = rawCode.slice(
+      rawCode.indexOf('<code>'),
+      rawCode.indexOf('</code>'),
+    )
+
+    const lines = code.split('\n')
+    const lineNumbersCode = [...Array(lines.length - 1)]
+      .map((line, index) => `<span class="line-number">${index + 1}</span><br>`)
+      .join('')
+
+    const lineNumbersWrapperCode = `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`
+
+    const finalCode = rawCode
+      .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)
+      .replace(/"(language-\w+)"/, '"$1 line-numbers-mode"')
+
+    return finalCode
+  }
+}

package/src/node/markdown/index.ts

@@ -2,9 +2,10 @@ import type MarkdownIt from 'markdown-it'
 
 import Anchor from 'markdown-it-anchor'
 import Emoji from 'markdown-it-emoji'
-import Prism from 'markdown-it-prism'
 import LinkAttributes from 'markdown-it-link-attributes'
 import TOC from 'markdown-it-table-of-contents'
+import TaskLists from 'markdown-it-task-lists'
+import attrs from 'markdown-it-attrs'
 
 import type { KatexOptions } from 'katex'
 import Katex from '../markdown/markdown-it-katex'
@@ -12,6 +13,8 @@ import { containerPlugin } from '../markdown/markdown-it-container'
 import { headingPlugin } from '../markdown/headings'
 import { slugify } from './slugify'
 import { parseHeader } from './parseHeader'
+import { highlight } from './highlight'
+import { highlightLinePlugin, preWrapperPlugin } from './highlightLines'
 
 export interface Header {
   level: number
@@ -39,18 +42,25 @@ export interface MarkdownOptions extends MarkdownIt.Options {
 }
 
 export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions = {}) {
+  md.set({
+    highlight,
+  })
   md
+    .use(highlightLinePlugin)
+    .use(preWrapperPlugin)
     .use(containerPlugin)
     .use(headingPlugin)
-  // https://prismjs.com/
-  md.use(Prism)
-  md.use(LinkAttributes, {
-    matcher: (link: string) => /^https?:\/\//.test(link),
-    attrs: {
-      target: '_blank',
-      rel: 'noopener',
-    },
-  })
+    // .use(lineNumberPlugin)
+  // https://github.com/arve0/markdown-it-attrs
+  // add classes
+  md.use(attrs)
+    .use(LinkAttributes, {
+      matcher: (link: string) => /^https?:\/\//.test(link),
+      attrs: {
+        target: '_blank',
+        rel: 'noopener',
+      },
+    })
   md.use(Katex, mdOptions.katex)
     .use(Anchor, {
       slugify,
@@ -58,11 +68,12 @@ export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions
     })
     .use(TOC, {
       slugify,
-      includeLevel: [2, 3],
+      includeLevel: [2, 3, 4],
       format: parseHeader,
       ...mdOptions.toc,
     })
     .use(Emoji)
+    .use(TaskLists)
 
   const originalRender = md.render
   md.render = (...args) => {

package/src/node/markdown/markdown-it-katex.ts

@@ -41,11 +41,13 @@ function isValidDelim(state: any, pos: number) {
 function math_inline(state: any, silent: boolean) {
   let match, token, res, pos
 
-  if (state.src[state.pos] !== '$') return false
+  if (state.src[state.pos] !== '$')
+    return false
 
   res = isValidDelim(state, state.pos)
   if (!res.can_open) {
-    if (!silent) state.pending += '$'
+    if (!silent)
+      state.pending += '$'
     state.pos += 1
     return true
   }
@@ -64,20 +66,23 @@ function math_inline(state: any, silent: boolean) {
     while (state.src[pos] === '\\') pos -= 1
 
     // Even number of escapes, potential closing delimiter found
-    if (((match - pos) % 2) === 1) break
+    if (((match - pos) % 2) === 1)
+      break
     match += 1
   }
 
   // No closing delimter found.  Consume $ and continue.
   if (match === -1) {
-    if (!silent) state.pending += '$'
+    if (!silent)
+      state.pending += '$'
     state.pos = start
     return true
   }
 
   // Check if we have empty content, ie: $$.  Do not parse.
   if (match - start === 0) {
-    if (!silent) state.pending += '$$'
+    if (!silent)
+      state.pending += '$$'
     state.pos = start + 1
     return true
   }
@@ -85,7 +90,8 @@ function math_inline(state: any, silent: boolean) {
   // Check for valid closing delimiter
   res = isValidDelim(state, match)
   if (!res.can_close) {
-    if (!silent) state.pending += '$'
+    if (!silent)
+      state.pending += '$'
     state.pos = start
     return true
   }
@@ -106,13 +112,16 @@ function math_block(state: any, start: number, end: number, silent: boolean) {
   let pos = state.bMarks[start] + state.tShift[start]
   let max = state.eMarks[start]
 
-  if (pos + 2 > max) return false
-  if (state.src.slice(pos, pos + 2) !== '$$') return false
+  if (pos + 2 > max)
+    return false
+  if (state.src.slice(pos, pos + 2) !== '$$')
+    return false
 
   pos += 2
   firstLine = state.src.slice(pos, max)
 
-  if (silent) return true
+  if (silent)
+    return true
   if (firstLine.trim().slice(-2) === '$$') {
     // Single line expression
     firstLine = firstLine.trim().slice(0, -2)
@@ -122,7 +131,8 @@ function math_block(state: any, start: number, end: number, silent: boolean) {
   for (next = start; !found;) {
     next++
 
-    if (next >= end) break
+    if (next >= end)
+      break
 
     pos = state.bMarks[next] + state.tShift[next]
     max = state.eMarks[next]

package/src/node/markdown/parseHeader.ts

@@ -48,8 +48,10 @@ export const removeNonCodeWrappedHTML = (str: string) => {
 }
 
 const compose = (...processors: ((str: string) => string)[]) => {
-  if (processors.length === 0) return (input: string) => input
-  if (processors.length === 1) return processors[0]
+  if (processors.length === 0)
+    return (input: string) => input
+  if (processors.length === 1)
+    return processors[0]
   return processors.reduce((prev, next) => {
     return str => next(prev(str))
   })

package/src/node/options.ts

@@ -16,6 +16,7 @@ export interface ValaxyEntryOptions {
 }
 
 export interface ResolvedValaxyOptions {
+  mode: 'dev' | 'build'
   /**
    * Client root path
    * @default 'valaxy/src/client'
@@ -69,7 +70,7 @@ export function getThemeRoot(name: string, entry: string) {
 }
 
 // for cli options
-export async function resolveOptions(options: ValaxyEntryOptions) {
+export async function resolveOptions(options: ValaxyEntryOptions, mode: ResolvedValaxyOptions['mode'] = 'dev') {
   const clientRoot = resolve(resolveImportPath('valaxy/package.json'), 'src/client')
   const userRoot = resolve(options.userRoot || process.cwd())
 
@@ -77,6 +78,7 @@ export async function resolveOptions(options: ValaxyEntryOptions) {
   const themeRoot = getThemeRoot(theme, userRoot)
 
   const valaxyOptions: ResolvedValaxyOptions = {
+    mode,
     clientRoot,
     userRoot,
     themeRoot,

package/src/node/plugins/index.ts

@@ -8,33 +8,58 @@ import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
 import { toAtFS } from '../utils'
 import { VALAXY_CONFIG_ID } from './valaxy'
 
-export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions: ValaxyServerOptions = {}): Plugin {
-  const valaxyPrefix = '/@valaxy'
-
-  let valaxyConfig = options.config
+/**
+ * for /@valaxyjs/styles
+ * @param roots
+ * @returns
+ */
+function generateStyles(roots: string[]) {
+  const imports: string[] = []
+
+  for (const root of roots) {
+    const styles: string[] = []
+
+    const autoloadNames = ['index', 'css-vars']
+    autoloadNames.forEach((name) => {
+      styles.push(join(root, 'styles', `${name}.css`))
+      styles.push(join(root, 'styles', `${name}.scss`))
+    })
+
+    for (const style of styles) {
+      if (fs.existsSync(style))
+        imports.push(`import "${toAtFS(style)}"`)
+    }
+  }
+  return imports.join('\n')
+}
 
-  const roots = [options.userRoot, options.themeRoot]
+function generateLocales(roots: string[]) {
+  const imports: string[] = [
+    'const messages = { "zh-CN": {}, en: {} }',
+  ]
+  const languages = ['zh-CN', 'en']
+
+  roots.forEach((root, i) => {
+    languages.forEach((lang) => {
+      const langYml = `${root}/locales/${lang}.yml`
+      if (fs.existsSync(langYml)) {
+        const varName = lang.replace('-', '') + i
+        imports.push(`import ${varName} from "${langYml}"`)
+        imports.push(`Object.assign(messages['${lang}'], ${varName})`)
+      }
+    })
+  })
 
-  function generateUserStyles() {
-    const imports: string[] = []
+  imports.push('export default messages')
+  return imports.join('\n')
+}
 
-    for (const root of roots) {
-      const styles = [
-        join(root, 'styles', 'vars.scss'),
-        join(root, 'styles', 'index.css'),
-        join(root, 'styles', 'index.scss'),
-      ]
+export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions: ValaxyServerOptions = {}): Plugin {
+  const valaxyPrefix = '/@valaxy'
 
-      for (const style of styles) {
-        if (fs.existsSync(style)) {
-          imports.push(`import "${toAtFS(style)}"`)
-          continue
-        }
-      }
-    }
+  let valaxyConfig = options.config
 
-    return imports.join('\n')
-  }
+  const roots = [options.clientRoot, options.themeRoot, options.userRoot]
 
   return {
     name: 'Valaxy',
@@ -60,7 +85,10 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
 
       // generate styles
       if (id === '/@valaxyjs/styles')
-        return generateUserStyles()
+        return generateStyles(roots)
+
+      if (id === '/@valaxyjs/locales')
+        return generateLocales(roots)
 
       if (id.startsWith(valaxyPrefix))
         return ''
@@ -69,7 +97,8 @@ export function createValaxyPlugin(options: ResolvedValaxyOptions, serverOptions
     async handleHotUpdate(ctx) {
       // handle valaxy.config.ts hmr
       const { file, server } = ctx
-      if (file !== options.configFile) return
+      if (file !== options.configFile)
+        return
 
       const { config } = await resolveConfig()
 

package/src/node/plugins/markdown.ts

@@ -47,7 +47,7 @@ export function createMarkdownPlugin(options: ResolvedValaxyOptions): Plugin[] {
     handleHotUpdate(ctx) {
       const { file, server } = ctx
       // send headers
-      if (file.endsWith('.md')) {
+      if (file.endsWith('.md') && _md && _md.__data) {
         server.ws.send({
           type: 'custom',
           event: 'valaxy:pageHeaders',

package/src/node/plugins/preset.ts

@@ -1,4 +1,3 @@
-
 import fs from 'fs'
 import type { PluginOption } from 'vite'
 
@@ -17,7 +16,6 @@ import Inspect from 'vite-plugin-inspect'
 
 import chalk from 'chalk'
 import type { ResolvedValaxyOptions, ValaxyServerOptions } from '../options'
-import type { Mode } from '../vite'
 import { setupMarkdownPlugins } from '../markdown'
 import { createMarkdownPlugin, excerpt_separator } from './markdown'
 import { createUnocssPlugin } from './unocss'
@@ -28,12 +26,11 @@ export interface ValaxyPluginOptions {
   components?: Parameters<typeof Components>[0]
 }
 
-export function ViteValaxyPlugins(
+export async function ViteValaxyPlugins(
   options: ResolvedValaxyOptions,
   serverOptions: ValaxyServerOptions = {},
   pluginOptions: ValaxyPluginOptions = {},
-  mode: Mode = 'dev',
-): (PluginOption | PluginOption[])[] | undefined {
+): Promise<(PluginOption | PluginOption[])[] | undefined> {
   const { clientRoot, themeRoot, userRoot } = options
 
   const MarkdownPlugin = createMarkdownPlugin(options)
@@ -46,13 +43,49 @@ export function ViteValaxyPlugins(
 
   const roots = [clientRoot, themeRoot, userRoot]
 
+  const { default: ThemePlugin } = await import(`valaxy-theme-${options.theme}`)
+
+  const customElements = new Set([
+  // katex
+    'annotation',
+    'math',
+    'menclose',
+    'mfrac',
+    'mglyph',
+    'mi',
+    'mlabeledtr',
+    'mn',
+    'mo',
+    'mover',
+    'mpadded',
+    'mphantom',
+    'mroot',
+    'mrow',
+    'mspace',
+    'msqrt',
+    'mstyle',
+    'msub',
+    'msubsup',
+    'msup',
+    'mtable',
+    'mtd',
+    'mtext',
+    'mtr',
+    'munder',
+    'munderover',
+    'semantics',
+
+    // meting
+    'meting-js',
+  ])
+
   return [
     Vue({
       include: [/\.vue$/, /\.md$/],
       template: {
         compilerOptions: {
           isCustomElement: (tag) => {
-            return ['meting-js'].includes(tag)
+            return customElements.has(tag)
           },
         },
       },
@@ -62,6 +95,8 @@ export function ViteValaxyPlugins(
     MarkdownPlugin,
     createConfigPlugin(options),
 
+    ThemePlugin(options.config.themeConfig),
+
     // https://github.com/hannoeru/vite-plugin-pages
     Pages({
       extensions: ['vue', 'md'],
@@ -71,7 +106,8 @@ export function ViteValaxyPlugins(
        */
       extendRoute(route) {
         let path = route.component
-        if (!route.meta) route.meta = {}
+        if (!route.meta)
+          route.meta = {}
 
         if (route.path === '/')
           route.meta.layout = 'home'
@@ -82,7 +118,7 @@ export function ViteValaxyPlugins(
             path = pagePath
         })
         const md = fs.readFileSync(path, 'utf-8')
-        const { data, excerpt } = matter(md, { excerpt_separator })
+        const { data, excerpt, content } = matter(md, { excerpt_separator })
 
         // warn for post frontmatter
         if (route.path.startsWith('/posts/')) {
@@ -98,7 +134,7 @@ export function ViteValaxyPlugins(
 
         // to refactor
         // get active header by runtime query head, not render
-        mdIt.render(md)
+        mdIt.render(content)
         route.meta.headers = _md.__data?.headers
 
         // set default updated
@@ -178,6 +214,6 @@ export function ViteValaxyPlugins(
 
     // https://github.com/antfu/vite-plugin-inspect
     // Visit http://localhost:3333/__inspect/ to see the inspector
-    mode === 'dev' && Inspect(),
+    options.mode === 'dev' && Inspect(),
   ]
 }

package/src/node/plugins/unocss.ts

@@ -54,7 +54,7 @@ export const createUnocssConfig = (options: ResolvedValaxyOptions) => {
       ['yun-card', 'transition yun-transition shadow hover:shadow-lg'],
       ['btn', 'px-4 py-1 rounded inline-block bg-sky-600 text-white cursor-pointer hover:bg-sky-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
       ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-sky-600'],
-      ['val-card', 'transition shadow hover:shadow-lg'],
+      ['va-card', 'transition shadow hover:shadow-lg'],
     ],
     presets: [
       presetUno(),
@@ -66,7 +66,12 @@ export const createUnocssConfig = (options: ResolvedValaxyOptions) => {
       presetTypography(),
       presetWebFonts({
         fonts: {
-          serif: 'Noto Serif SC',
+          serif: [
+            {
+              name: 'Noto Serif SC',
+              weights: [900],
+            },
+          ],
           // sans: 'DM Sans',
           // mono: 'DM Mono',
         },
@@ -75,19 +80,19 @@ export const createUnocssConfig = (options: ResolvedValaxyOptions) => {
     rules: [
       // more see '~/styles/global/helper.scss'
       ['yun-transition', {
-        'transition-duration': 'var(--yun-transition-duration)',
+        'transition-duration': 'var(--va-transition-duration)',
       }],
       ['yun-text-light', {
-        color: 'var(--yun-c-text-light)',
+        color: 'var(--va-c-text-light)',
       }],
       ['font-serif', {
-        'font-family': 'var(--yun-font-serif)',
+        'font-family': 'var(--va-font-serif)',
       }],
       ['font-sans', {
-        'font-family': 'var(--yun-font-sans)',
+        'font-family': 'var(--va-font-sans)',
       }],
       ['font-mono', {
-        'font-family': 'var(--yun-font-mono)',
+        'font-family': 'var(--va-font-mono)',
       }],
     ],
     transformers: [

package/src/node/rss.ts

@@ -0,0 +1,121 @@
+import { dirname } from 'path'
+import chalk from 'chalk'
+
+import fg from 'fast-glob'
+import fs from 'fs-extra'
+import matter from 'gray-matter'
+import MarkdownIt from 'markdown-it'
+import type { Author, FeedOptions, Item } from 'feed'
+import { Feed } from 'feed'
+import consola from 'consola'
+import type { ResolvedValaxyOptions } from './options'
+
+const markdown = MarkdownIt({
+  html: true,
+  breaks: true,
+  linkify: true,
+})
+
+/**
+ * generate rss
+ * @param options
+ * @returns
+ */
+export async function build(options: ResolvedValaxyOptions) {
+  const { config } = options
+
+  if (!config.url) {
+    consola.error('You must set "config.url" to generate rss.')
+    return
+  }
+
+  const siteUrl = config.url.endsWith('/') ? config.url : `${config.url}/`
+  const DOMAIN = config.url.endsWith('/') ? config.url.slice(0, -1) : config.url
+  const author: Author = {
+    name: options.config.author.name,
+    email: options.config.author.email,
+    link: options.config.author.link,
+  }
+
+  consola.info(`RSS Site Url: ${chalk.cyan(siteUrl)}`)
+
+  const ccVersion = (config.license.type === 'zero') ? '1.0' : '4.0'
+  const feedOptions: FeedOptions = {
+    title: config.title,
+    description: config.description,
+    id: siteUrl,
+    link: siteUrl,
+    copyright: `CC ${config.license.type.toUpperCase()} ${ccVersion} ${new Date().getFullYear()} © ${config.author.name}`,
+    feedLinks: {
+      json: `${siteUrl}feed.json`,
+      atom: `${siteUrl}feed.atom`,
+      rss: `${siteUrl}feed.xml`,
+    },
+  }
+
+  // generate
+  const files = await fg(`${options.userRoot}/pages/posts/*.md`)
+
+  const posts: Item[] = []
+  files
+    .forEach((i) => {
+      const raw = fs.readFileSync(i, 'utf-8')
+      const { data, content, excerpt } = matter(raw)
+
+      // not add to posts
+      if (!data.date) {
+        consola.warn(`Do you forget to write date for ${chalk.dim(i)}`)
+        return false
+      }
+
+      // todo i18n
+
+      // render excerpt
+      const html = markdown.render(excerpt || content)
+        .replace('src="/', `src="${DOMAIN}/`)
+
+      if (data.image?.startsWith('/'))
+        data.image = DOMAIN + data.image
+
+      posts.push({
+        title: '',
+        ...data,
+        date: new Date(data.date),
+        published: new Date(data.updated || data.date),
+        content: html,
+        author: [author],
+        link: DOMAIN + i.replace(/^pages(.+)\.md$/, '$1'),
+      })
+    })
+
+  // sort by updated
+  posts.sort((a, b) => +new Date(b.published || b.date) - +new Date(a.published || a.date))
+  // await writeFeed('feed', feedOptions, posts)
+
+  // write
+  feedOptions.author = author
+  feedOptions.image = config.author.avatar.startsWith('http') ? config.author.avatar : `${DOMAIN}${config.author.avatar}`
+  feedOptions.favicon = `${DOMAIN}/${config.feed.favicon}`
+
+  const feed = new Feed(feedOptions)
+  posts.forEach(item => feed.addItem(item))
+  // items.forEach(i=> console.log(i.title, i.date))
+
+  await fs.ensureDir(dirname(`./dist/${config.feed.name}`))
+  const path = './dist'
+
+  const types = ['xml', 'atom', 'json']
+  types.forEach((type) => {
+    let data = ''
+    let name = `${path}/${config.feed.name || 'feed'}.${type}`
+    if (type === 'xml') { data = feed.rss2() }
+    else if (type === 'atom') {
+      if (!config.feed.name)
+        name = `${path}/atom.xml`
+      data = feed.atom1()
+    }
+    else if (type === 'json') { data = feed.json1() }
+    fs.writeFileSync(name, data, 'utf-8')
+    consola.info(`${type}: ${name}`)
+  })
+}