valaxy 0.1.2 → 0.2.2

package/src/client/styles/index.scss

@@ -1,18 +1,31 @@
 // import common and light/dark css vars in main.ts
 
+$c-primary: #0078e7 !default;
+
 // global css
-@use './global/reset.scss' as *;
-@use './global/helper.scss' as *;
-@use './global/index.scss' as *;
-@use './global/nprogress.scss' as *;
+@use "./global/reset.scss" as *;
+@use "./global/helper.scss" as *;
+@use "./global/index.scss" as *;
+@use "./global/i18n.scss" as *;
+@use "./global/nprogress.scss" as *;
 
 // common
-@use './common/button.scss' as *;
-@use './common/hamburger.scss' as *;
-@use './common/markdown.scss' as *;
+@use "./common/button.scss" as *;
+@use "./common/code.scss" as *;
+@use "./common/custom-blocks.scss" as *;
+@use "./common/hamburger.scss" as *;
+
 @use "./common/scrollbar.scss" as *;
 @use "./common/sidebar.scss" as *;
 @use "./common/transition.scss" as *;
 
 // banner
-@use './widgets/banner.scss' as *;
+@use "./widgets/banner.scss" as *;
+
+// markdown
+@use "./common/markdown.scss";
+@forward "star-markdown-css/src/scss/theme/yun.scss" with (
+  $colors: (
+    "primary": $c-primary,
+  )
+);

package/src/client/styles/palette.scss

@@ -4,64 +4,73 @@
 @use "./mixins" as *;
 
 $palette: () !default;
-$palette: map.merge((
-  'white': #ffffff,
-  'black': #1a1a1a,
-  'gray': #8e8e8e,
-  'danger': #db2828,
-  'warning': #f2711c
-), $palette);
+$palette: map.merge(
+  (
+    "white": #ffffff,
+    "black": #1a1a1a,
+    "gray": #8e8e8e,
+    "danger": #db2828,
+    "warning": #f2711c,
+  ),
+  $palette
+);
 
 $colors: () !default;
-$colors: map.merge((
-  'primary': #0078E7,
-), $colors);
+$colors: map.merge(
+  (
+    "primary": #0078e7,
+  ),
+  $colors
+);
 
-// @debug $yun-c-primary;
-// $yun-c-primary: #0078E7 !default;
-// @if meta.variable-exists('yun-c-primary') {
-//   $colors: map.merge((
-//     'primary': $yun-c-primary,
-//   ), $colors);
-// }
-
-$c-primary: map.get($colors, 'primary') !default;
-
-$colors: map.merge((
-  'primary-light': lighten($c-primary, 15%),
-  'primary-lighter': lighten($c-primary, 30%),
-  'primary-dark': darken($c-primary, 5%),
-), $colors);
+$c-primary: map.get($colors, "primary") !default;
 
+$colors: map.merge(
+  (
+    "primary-light": lighten($c-primary, 15%),
+    "primary-lighter": lighten($c-primary, 30%),
+    "primary-dark": darken($c-primary, 5%),
+  ),
+  $colors
+);
 
 $light: () !default;
-$light: map.merge((
-  'border-color': #222,
+$light: map.merge(
+  (
+    "border-color": #222,
 
-  'c-bg': white,
-  'c-bg-light': white,
-  'c-bg-dark': #fafafa,
-  'c-text': #333,
-  'c-text-light': #555,
-  'c-text-dark': #111,
+    "c-bg": white,
+    "c-bg-light": white,
+    "c-bg-dark": #fafafa,
+    "c-text": #333,
+    "c-text-light": #555,
+    "c-text-dark": #111,
 
-  'c-primary-rgb': #{red($c-primary), green($c-primary), blue($c-primary)},
+    "c-primary-rgb": #{red($c-primary),
+    green(
+      $c-primary,
+    ),
+    blue($c-primary)},
 
-  'c-link': get-css-var('c-primary-dark'),
-), $light);
+    "c-link": get-css-var("c-primary-dark"),
+  ),
+  $light
+);
 
 $dark: () !default;
-$dark: map.merge((
-  'border-color': #e6e6e6,
-
-  'c-bg': #1a1a1a,
-  'c-bg-light': #22252e,
-  'c-bg-dark': #1a1a1a,
+$dark: map.merge(
+  (
+    "border-color": #e6e6e6,
 
-  'c-text': #f2f2f2,
-  'c-text-light': #eee,
-  'c-text-lighter': #ddd,
-  'c-text-dark': rgba(#ebebeb, 0.8),
+    "c-bg": #1a1a1a,
+    "c-bg-light": #22252e,
+    "c-bg-dark": #1a1a1a,
 
-  'c-link': map.get($colors, 'primary-light'),
-), $dark);
+    "c-text": #f2f2f2,
+    "c-text-light": #eee,
+    "c-text-lighter": #ddd,
+    "c-text-dark": rgba(#ebebeb, 0.8),
+    "c-link": map.get($colors, "primary-light"),
+  ),
+  $dark
+);

package/src/node/cli.ts

@@ -14,6 +14,8 @@ import { bindShortcut, initServer, printInfo } from './utils/cli'
 
 // build
 import { build, ssgBuild } from './build'
+// rss
+import { build as rssBuild } from './rss'
 
 const cli = yargs.scriptName('valaxy')
   .usage('$0 [args]')
@@ -157,6 +159,19 @@ cli.command(
   },
 )
 
+cli.command(
+  'rss [root]',
+  'generate rss feed',
+  args => commonOptions(args)
+    .strict()
+    .help(),
+  async({ root }) => {
+    consola.info('Generate RSS ...')
+    const options = await resolveOptions({ userRoot: root }, 'build')
+    await rssBuild(options)
+  },
+)
+
 /**
  * set common options for cli
  * @param args

package/src/node/markdown/headings.ts

@@ -4,10 +4,11 @@ import type { MarkdownRenderer } from '../markdown'
 import { deeplyParseHeader } from './parseHeader'
 import { slugify } from './slugify'
 
-export const headingPlugin = (md: MarkdownIt, include = ['h2', 'h3']) => {
+export const headingPlugin = (md: MarkdownIt, include = [1, 2, 3, 4]) => {
   md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
     const token = tokens[i]
-    if (include.includes(token.tag)) {
+    const tags = include.map(item => `h${item}`)
+    if (tags.includes(token.tag)) {
       const title = tokens[i + 1].content
       const idAttr = token.attrs!.find(([name]) => name === 'id')
       const slug = idAttr && idAttr[1]

package/src/node/markdown/highlight.ts

@@ -0,0 +1,50 @@
+import consola from 'consola'
+import escapeHtml from 'escape-html'
+import prism from 'prismjs'
+
+// 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')
+
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript'])
+
+function wrap(code: string, lang: string): string {
+  if (lang === 'text')
+    code = escapeHtml(code)
+
+  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'
+
+  if (lang === 'md')
+    lang = 'markdown'
+
+  if (lang === 'ts')
+    lang = 'typescript'
+
+  if (lang === 'py')
+    lang = 'python'
+
+  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 wrap(str, 'text')
+}

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,10 +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'
@@ -13,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
@@ -40,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(headingPlugin, mdOptions?.toc?.includeLevel)
+    // .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,

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

@@ -24,7 +24,7 @@ function createContainer(classes: string, defaultTitle: string): ContainerArgs {
         if (token.nesting === 1) {
           if (classes === 'details') {
             return `<details class="${classes} custom-block">${
-              info ? `<summary>${info}</summary>` : ''
+              `<summary>${info}</summary>`
             }\n`
           }
           return `<div class="${classes} custom-block"><p class="custom-block-title">${
@@ -50,4 +50,12 @@ export const containerPlugin = (md: MarkdownIt) => {
       render: (tokens: Token[], idx: number) =>
         tokens[idx].nesting === 1 ? '<div v-pre>\n' : '</div>\n',
     })
+
+  const languages = ['zh-CN', 'en']
+  languages.forEach((lang) => {
+    md.use(container, lang, {
+      render: (tokens: Token[], idx: number) =>
+        tokens[idx].nesting === 1 ? `<div lang="${lang}">\n` : '</div>\n',
+    })
+  })
 }

package/src/node/plugins/index.ts

@@ -42,7 +42,7 @@ function generateLocales(roots: string[]) {
   roots.forEach((root, i) => {
     languages.forEach((lang) => {
       const langYml = `${root}/locales/${lang}.yml`
-      if (fs.existsSync(langYml)) {
+      if (fs.existsSync(langYml) && fs.readFileSync(langYml, 'utf-8')) {
         const varName = lang.replace('-', '') + i
         imports.push(`import ${varName} from "${langYml}"`)
         imports.push(`Object.assign(messages['${lang}'], ${varName})`)

package/src/node/plugins/preset.ts

@@ -89,7 +89,7 @@ export async function ViteValaxyPlugins(
           },
         },
       },
-    }) as PluginOption,
+    }),
 
     ValaxyPlugin,
     MarkdownPlugin,
@@ -210,7 +210,7 @@ export async function ViteValaxyPlugins(
       runtimeOnly: true,
       compositionOnly: true,
       include: roots.map(root => `${root}/locales/**`),
-    }) as PluginOption,
+    }),
 
     // https://github.com/antfu/vite-plugin-inspect
     // Visit http://localhost:3333/__inspect/ to see the inspector

package/src/node/plugins/unocss.ts

@@ -12,7 +12,8 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 import type { ValaxyConfig } from 'valaxy'
-import type { ThemeUserConfig } from 'valaxy-theme-yun/config'
+import type { ThemeUserConfig } from 'valaxy-theme-yun'
+import { generateSafelist } from 'valaxy-theme-yun'
 import type { ResolvedValaxyOptions } from '../options'
 
 export const createSafelist = (config: ValaxyConfig<ThemeUserConfig>) => {
@@ -24,26 +25,22 @@ export const createSafelist = (config: ValaxyConfig<ThemeUserConfig>) => {
     'i-ri-cloud-line',
   ]
 
-  const safelist = 'animate-fade-in prose prose-sm m-auto text-left'.split(' ').concat([
+  let themeSafelist: string[] = []
+  if (typeof generateSafelist === 'function')
+    themeSafelist = generateSafelist(config.themeConfig)
+
+  const safelist = 'animate-fade-in m-auto text-left'.split(' ').concat([
     'rotate-y-180',
-  ]).concat(safeIcons)
+  ]).concat(safeIcons).concat(themeSafelist)
+
   // generate icon safelist
   if (config.social.length)
     config.social.forEach(item => safelist.push(item.icon))
 
-  if (config.themeConfig.footer?.icon?.name)
-    safelist.push(config.themeConfig.footer?.icon?.name)
-
   // sponsor icon
   if (config.sponsor.methods.length)
     config.sponsor.methods.forEach(item => safelist.push(item.icon))
 
-  const types = config.themeConfig.types
-  if (types) {
-    for (const type in types)
-      safelist.push(types[type].icon)
-  }
-
   return safelist
 }
 

package/src/node/rss.ts

@@ -0,0 +1,127 @@
+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 || 'valaxy',
+    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
+      }
+
+      if (data.draft) {
+        consola.warn(`Ignore draft post: ${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,
+        id: (data.id || '').toString(),
+        date: new Date(data.date),
+        published: new Date(data.updated || data.date),
+        content: html,
+        author: [author],
+        link: DOMAIN + i.replace(`${options.userRoot}/pages`, '').replace(/\.md$/, ''),
+      })
+    })
+
+  // 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}`)
+  })
+}

package/src/node/shims.d.ts

@@ -1,3 +1,13 @@
+declare module 'escape-html' {
+  const def: (str: string) => string
+  export default def
+}
+
+declare module 'prismjs' {
+  const def: any
+  export default def
+}
+
 declare module 'markdown-it-attrs' {
   const def: any
   export default def