valaxy 0.0.2 → 0.0.7

package/src/client/styles/widgets/banner.scss

@@ -0,0 +1,116 @@
+@use "../mixins" as *;
+
+$banner-animation-duration: 1s;
+$line-animation-duration: 0.4s;
+$char-animation-duration: 0.4s;
+
+#banner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+}
+
+.banner-char-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.vertical-line {
+  &-top, &-bottom {
+    display: flex;
+    background-color: var(--banner-line-color);
+    width: 1px;
+    height: 0;
+    animation-name: extend-line;
+    animation-duration: $line-animation-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+  }
+
+  &-bottom {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+@keyframes extend-line {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--banner-line-height);
+  }
+}
+
+.char {
+  font-family: get-css-var('font', 'serif');
+  font-size: var(--banner-char-size, 1rem);
+  font-weight: get-css-var('font', 'serif-weight');
+  background-color: var(--banner-char-bg-color);
+  line-height: 1;
+
+  transition: all 0.3s ease-in-out;
+  transition-delay: 0s;
+
+  &:hover {
+    color: var(--banner-char-hover-color);
+    background-color: var(--banner-char-color);
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+    color: var(--banner-char-color);
+    opacity: 0;
+  }
+
+  &-left {
+    border-left: 1px solid var(--banner-line-color);
+    border-right: 0px solid rgba(var(--yun-c-primary-rgb), 0.1);
+    border-right-width: 0px;
+    animation-name: char-move-left;
+    animation-duration: $char-animation-duration;
+    animation-delay: $line-animation-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+  }
+
+  &-right {
+    border-left: 0px solid rgba(var(--yun-c-primary-rgb), 0.1);
+    border-right: 1px solid var(--banner-line-color);
+    border-left-width: 0px;
+    animation-name: char-move-right;
+    animation-duration: $char-animation-duration;
+    animation-delay: $line-animation-duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+  }
+}
+
+@keyframes char-move-left {
+  from {
+    opacity: 0;
+    border-right-width: 0;
+  }
+
+  to {
+    opacity: 1;
+    border-right-width: var(--banner-empty-border-size, var(--banner-char-size));
+  }
+}
+
+@keyframes char-move-right {
+  from {
+    opacity: 0;
+    border-left-width: 0;
+  }
+
+  to {
+    opacity: 1;
+    border-left-width: var(--banner-empty-border-size, var(--banner-char-size));
+  }
+}

package/src/client/types.ts

@@ -0,0 +1,3 @@
+import type { ViteSSGContext } from 'vite-ssg'
+
+export type UserModule = (ctx: ViteSSGContext) => void

package/src/client/utils/helper.ts

@@ -0,0 +1,30 @@
+/**
+ * 生成介于 min 与 max 之间的随机数
+ * @returns
+ */
+export function random(min: number, max: number) {
+  return Math.random() * (max - min) + min
+}
+
+/**
+ * wrap node
+ * @param className
+ */
+export function wrap(el: HTMLElement, className: string) {
+  const wrapper = document.createElement('div')
+  wrapper.className = className
+  el.parentNode!.insertBefore(wrapper, el)
+  el.parentNode!.removeChild(el)
+  wrapper.appendChild(el)
+}
+
+/**
+ * 包裹表格，添加 class 以控制 table 样式
+ */
+export const wrapTable = (container: HTMLElement | Document = document) => {
+  container.querySelectorAll('table').forEach((el) => {
+    const container = document.createElement('div')
+    container.className = 'table-container'
+    wrap(el, 'table-container')
+  })
+}

package/src/client/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './helper'
+export * from './time'

package/src/client/utils/time.ts

@@ -0,0 +1,23 @@
+import dayjs from 'dayjs'
+import type { Post } from 'valaxy'
+
+export function formatDate(date: string | number | Date, template = 'YYYY-MM-DD') {
+  const today = dayjs(date)
+  return today.format(template)
+}
+
+/**
+ * sort posts by date
+ * @param posts
+ * @param desc
+ */
+export function sortByDate(posts: Post[], desc = true) {
+  return posts.sort((a, b) => {
+    const aDate = +new Date(a.date || '')
+    const bDate = +new Date(b.date || '')
+    if (desc)
+      return bDate - aDate
+    else
+      return aDate - bDate
+  })
+}

package/src/core/config.ts

@@ -0,0 +1,51 @@
+// @ts-expect-error virtual module @valaxyjs/config
+import valaxyConfig from '@valaxyjs/config'
+import type { ComputedRef, InjectionKey } from 'vue'
+import { computed, inject, readonly, shallowRef } from 'vue'
+import type { ThemeConfig } from 'valaxy-theme-yun'
+import type { ValaxyConfig } from '../types'
+
+/**
+ * parse valaxy config
+ * @param data
+ * @returns
+ */
+function parse(data: string): ValaxyConfig {
+  const parsed = JSON.parse(data)
+  return (import.meta.env.DEV ? readonly(parsed) : parsed) as ValaxyConfig
+}
+
+export const valaxyConfigSymbol: InjectionKey<ComputedRef<ValaxyConfig<ThemeConfig>>> = Symbol('valaxy:config')
+export const valaxyConfigRef = shallowRef<ValaxyConfig>(parse(valaxyConfig))
+
+// hmr
+if (import.meta.hot) {
+  // /@valaxyjs/config must be static string
+  import.meta.hot.accept('/@valaxyjs/config', (m) => {
+    valaxyConfigRef.value = parse(m.default)
+  })
+}
+
+export function initConfig() {
+  return computed(() => valaxyConfigRef.value)
+}
+
+/*
+ * get Config
+ * @returns
+ */
+export function useConfig() {
+  const config = inject(valaxyConfigSymbol)
+  if (!config)
+    throw new Error('[Valaxy] config not properly injected in qpp')
+  return config!
+}
+
+/**
+ * getThemeConfig
+ * @returns
+ */
+export function useThemeConfig() {
+  const config = useConfig()
+  return computed(() => config!.value.themeConfig)
+}

package/src/core/index.ts

@@ -0,0 +1,5 @@
+export * from '../client/composables'
+export * from '../client/utils'
+
+export * from './config'
+export * from './utils'

package/src/core/utils.ts

@@ -0,0 +1 @@
+export const isDev = import.meta.env.DEV === true

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './core'
+export * from './types'

package/src/node/build.ts

@@ -0,0 +1,12 @@
+import type { InlineConfig } from 'vite'
+import { mergeConfig, build as viteBuild } from 'vite'
+import type { ResolvedValaxyOptions } from './options'
+import { createViteConfig } from './vite'
+
+export async function build(
+  options: ResolvedValaxyOptions,
+  viteConfig: InlineConfig = {},
+) {
+  const inlineConfig = mergeConfig(viteConfig, createViteConfig(options))
+  await viteBuild(inlineConfig)
+}

package/src/node/cli.ts

@@ -0,0 +1,177 @@
+import fs from 'fs'
+import path from 'path'
+import { exec } from 'child_process'
+import type { Argv } from 'yargs'
+import yargs from 'yargs'
+import type { InlineConfig, LogLevel } from 'vite'
+import openBrowser from 'open'
+
+// @ts-expect-error https://github.com/antfu/vite-ssg/pull/225
+import { build as ssgBuild } from 'vite-ssg/node'
+
+import consola from 'consola'
+
+import { version } from '../../package.json'
+import { resolveOptions } from './options'
+import { bindShortcut, initServer, printInfo } from './utils/cli'
+
+const cli = yargs.scriptName('valaxy')
+  .usage('$0 [args]')
+  .version(version)
+  .showHelpOnFail(false)
+  .alias('h', 'help')
+  .alias('v', 'version')
+
+cli.command(
+  '* [root]',
+  'Start a local server for Valaxy',
+  args =>
+    commonOptions(args)
+      .option('port', {
+        alias: 'p',
+        type: 'number',
+        describe: 'port',
+      })
+      .option('open', {
+        alias: 'o',
+        default: false,
+        type: 'boolean',
+        describe: 'open in browser',
+      })
+      .option('remote', {
+        default: true,
+        type: 'boolean',
+        describe: 'listen public host and enable remote control',
+      })
+      .option('log', {
+        default: 'warn',
+        type: 'string',
+        choices: ['error', 'warn', 'info', 'silent'],
+        describe: 'log level',
+      })
+      .strict()
+      .help()
+  ,
+  async({ root, port: userPort, open, remote, log }) => {
+    if (!fs.existsSync(path.resolve(root, 'pages')))
+      process.exit(0)
+
+    const port = userPort || 4859
+    const options = await resolveOptions({ userRoot: root })
+
+    const viteConfig: InlineConfig = {
+      server: {
+        watch: {
+          // watch theme updated
+          ignored: [`!${options.themeRoot}/**`, `${options.userRoot}/**.md`],
+        },
+
+        port,
+        strictPort: true,
+        open,
+        host: remote ? '0.0.0.0' : 'localhost',
+      },
+      logLevel: log as LogLevel,
+    }
+    await initServer(options, viteConfig)
+    printInfo(options, port, remote)
+
+    const SHORTCUTS = [
+      {
+        name: 'r',
+        fullName: 'restart',
+        action() {
+          initServer(options, viteConfig)
+        },
+      },
+      {
+        name: 'o',
+        fullName: 'open',
+        action() {
+          openBrowser(`http://localhost:${port}`)
+        },
+      },
+      {
+        name: 'e',
+        fullName: 'edit',
+        action() {
+          exec(`code "${root}"`)
+        },
+      },
+    ]
+    bindShortcut(SHORTCUTS)
+  })
+
+cli.command(
+  'build [root]',
+  'build your blog to static content',
+  args => commonOptions(args)
+    .option('ssg', {
+      alias: 's',
+      type: 'boolean',
+      // https://github.com/antfu/vite-ssg/pull/219
+      // to be true, when vite-ssg export build
+      default: false,
+      describe: 'static site generate',
+    })
+    .option('output', {
+      alias: 'o',
+      type: 'string',
+      default: 'dist',
+      describe: 'output dir',
+    }).option('base', {
+      type: 'string',
+      describe: 'output base',
+    })
+    .strict()
+    .help(),
+  async({ ssg, root, base, output }) => {
+    const options = await resolveOptions({ userRoot: root })
+    printInfo(options)
+
+    if (ssg) {
+      consola.info('use vite-ssg to do ssg build...')
+      try {
+        // wait vite-ssg can pass custom options
+        // https://github.com/antfu/vite-ssg/issues/226
+        await ssgBuild({
+          mode: 'production',
+        })
+      }
+      catch (e) {
+        consola.error('[vite-ssg] An internal error occurred.')
+        console.log(e)
+      }
+    }
+    else {
+      const { build } = await import('./build')
+
+      consola.info('use vite do spa build...')
+      await build(options, {
+        base,
+        build: {
+          // make out dir empty, https://vitejs.dev/config/#build-emptyoutdir
+          emptyOutDir: true,
+          outDir: path.resolve(options.userRoot, output),
+        },
+      })
+    }
+  },
+)
+
+/**
+ * set common options for cli
+ * @param args
+ * @returns
+ */
+function commonOptions(args: Argv<{}>) {
+  return args.positional('root', {
+    default: '.',
+    type: 'string',
+    describe: 'root folder of your source files',
+  })
+}
+
+export function run() {
+  cli.help().parse()
+}

package/src/node/config.ts

@@ -0,0 +1,43 @@
+// import { loadConfig } from 'c12'
+import { loadConfig } from 'unconfig'
+import defu from 'defu'
+import type { ValaxyConfig } from '../types'
+import { defaultValaxyConfig } from '../types'
+import type { ValaxyEntryOptions } from './options'
+
+// for user config
+export async function resolveConfig(options: ValaxyEntryOptions = {}) {
+  // c12 merge array twice, so i deprecated it
+  // const { config, configFile } = await loadConfig<ValaxyConfig>({
+  //   name: 'valaxy',
+  //   defaults: defaultValaxyConfig,
+  // })
+
+  const { config: userConfig, sources } = await loadConfig<ValaxyConfig>({
+    sources: [
+      {
+        files: 'valaxy.config',
+        extensions: ['ts', 'js', 'mjs', 'cjs', 'json'],
+      },
+    ],
+    merge: false,
+  })
+  const configFile = sources[0]
+  const config = defu(userConfig, defaultValaxyConfig)
+
+  const theme = options.theme || config.theme || 'yun'
+
+  try {
+    const { defaultThemeConfig } = await import(`valaxy-theme-${theme}`)
+    config.themeConfig = defu(config.themeConfig, defaultThemeConfig)
+  }
+  catch (e) {
+    console.error(`valaxy-theme-${theme} doesn't have default config`)
+  }
+
+  return {
+    config,
+    configFile,
+    theme,
+  }
+}

package/src/node/index.ts

@@ -0,0 +1 @@
+export * from './server'

package/src/node/markdown/headings.ts

@@ -0,0 +1,24 @@
+// ref vitepress
+import type MarkdownIt from 'markdown-it'
+import type { MarkdownRenderer } from '../markdown'
+import { deeplyParseHeader } from './parseHeader'
+import { slugify } from './slugify'
+
+export const headingPlugin = (md: MarkdownIt, include = ['h2', 'h3']) => {
+  md.renderer.rules.heading_open = (tokens, i, options, env, self) => {
+    const token = tokens[i]
+    if (include.includes(token.tag)) {
+      const title = tokens[i + 1].content
+      const idAttr = token.attrs!.find(([name]) => name === 'id')
+      const slug = idAttr && idAttr[1]
+      const data = (md as MarkdownRenderer).__data
+      const headers = data.headers || (data.headers = [])
+      headers.push({
+        level: parseInt(token.tag.slice(1), 10),
+        title: deeplyParseHeader(title),
+        slug: slug || slugify(title),
+      })
+    }
+    return self.renderToken(tokens, i, options)
+  }
+}

package/src/node/markdown/index.ts

@@ -0,0 +1,74 @@
+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 type { KatexOptions } from 'katex'
+import Katex from '../markdown/markdown-it-katex'
+import { containerPlugin } from '../markdown/markdown-it-container'
+import { headingPlugin } from '../markdown/headings'
+import { slugify } from './slugify'
+import { parseHeader } from './parseHeader'
+
+export interface Header {
+  level: number
+  title: string
+  slug: string
+}
+
+export interface MarkdownParsedData {
+  hoistedTags?: string[]
+  links?: string[]
+  headers?: Header[]
+}
+export interface MarkdownRenderer extends MarkdownIt {
+  __data: MarkdownParsedData
+}
+
+export interface MarkdownOptions extends MarkdownIt.Options {
+  config?: (md: MarkdownIt) => void
+  anchor?: {
+    permalink?: Anchor.AnchorOptions['permalink']
+  }
+  // https://github.com/Oktavilla/markdown-it-table-of-contents
+  toc?: any
+  katex?: KatexOptions
+}
+
+export function setupMarkdownPlugins(md: MarkdownIt, mdOptions: MarkdownOptions = {}) {
+  md
+    .use(containerPlugin)
+    .use(headingPlugin)
+  // https://prismjs.com/
+  md.use(Prism)
+  md.use(LinkAttributes, {
+    matcher: (link: string) => /^https?:\/\//.test(link),
+    attrs: {
+      target: '_blank',
+      rel: 'noopener',
+    },
+  })
+  md.use(Katex, mdOptions.katex)
+    .use(Anchor, {
+      slugify,
+      permalink: Anchor.permalink.ariaHidden({}),
+    })
+    .use(TOC, {
+      slugify,
+      includeLevel: [2, 3],
+      format: parseHeader,
+      ...mdOptions.toc,
+    })
+    .use(Emoji)
+
+  const originalRender = md.render
+  md.render = (...args) => {
+    (md as MarkdownRenderer).__data = {}
+    return originalRender.call(md, ...args)
+  }
+
+  return md as MarkdownRenderer
+}

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

@@ -0,0 +1,53 @@
+// ref vitepress
+// src/node/markdown/plugins/containers.ts
+
+import type MarkdownIt from 'markdown-it'
+import type Token from 'markdown-it/lib/token'
+import container from 'markdown-it-container'
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string
+  },
+]
+
+function createContainer(classes: string, defaultTitle: string): ContainerArgs {
+  return [
+    container,
+    classes,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const info = token.info.trim().slice(classes.length).trim()
+        if (token.nesting === 1) {
+          if (classes === 'details') {
+            return `<details class="${classes} custom-block">${
+              info ? `<summary>${info}</summary>` : ''
+            }\n`
+          }
+          return `<div class="${classes} custom-block"><p class="custom-block-title">${
+            info || defaultTitle
+          }</p>\n`
+        }
+        else {
+          return classes === 'details' ? '</details>\n' : '</div>\n'
+        }
+      },
+    },
+  ]
+}
+
+export const containerPlugin = (md: MarkdownIt) => {
+  md.use(...createContainer('tip', 'TIP'))
+    .use(...createContainer('info', 'INFO'))
+    .use(...createContainer('warning', 'WARNING'))
+    .use(...createContainer('danger', 'WARNING'))
+    .use(...createContainer('details', 'Details'))
+    // explicitly escape Vue syntax
+    .use(container, 'v-pre', {
+      render: (tokens: Token[], idx: number) =>
+        tokens[idx].nesting === 1 ? '<div v-pre>\n' : '</div>\n',
+    })
+}