valaxy 0.1.1 → 0.1.2

package/src/client/composables/tag.ts

@@ -13,7 +13,7 @@ export function useTags() {
   const tags = useTag()
 
   const gray = new TinyColor('#999999')
-  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--yun-c-primary'))
+  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--va-c-primary'))
 
   const getTagStyle = (count: number) => {
     const counts = Array.from(tags).map(([_, value]) => value.count)

package/src/client/composables/widgets/backToTop.ts

@@ -1,5 +1,5 @@
-import { useWindowScroll } from '@vueuse/core'
-import { computed } from 'vue'
+import { isClient, useWindowScroll } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 /**
  * You can use href="#" to back to top
@@ -13,10 +13,16 @@ export function useBackToTop(options: {
 } = {
   offset: 100,
 }) {
-  const { y } = useWindowScroll()
+  if (!isClient) {
+    return {
+      percentage: ref(0),
+      show: ref(false),
+    }
+  }
 
+  const { y } = useWindowScroll()
   const percentage = computed(() => {
-    return y.value / document.body.clientHeight
+    return y.value / (document.body.scrollHeight - window.innerHeight)
   })
 
   const show = computed(() => y.value > options.offset)

package/src/client/main.ts

@@ -7,12 +7,7 @@ import '@unocss/reset/tailwind.css'
 
 // markdown css
 import 'star-markdown-css/src/scss/theme/yun.scss'
-
-import './styles/css-vars/index.scss'
-import './styles/css-vars/light.scss'
-import './styles/css-vars/dark.scss'
-import './styles/index.scss'
-
+// generate user styles
 import '/@valaxyjs/styles'
 
 import 'uno.css'

package/src/client/modules/valaxy.ts

@@ -1,20 +1,35 @@
 import { createI18n } from 'vue-i18n'
+
+/*
+ * All i18n resources specified in the plugin `include` option can be loaded
+ * at once using the import syntax
+ *
+ * Not support ssr https://github.com/intlify/bundle-tools/issues/78
+ */
+// import messages from '@intlify/vite-plugin-vue-i18n/messages'
+
 import { initConfig, valaxyConfigSymbol } from '../config'
-import { isDev } from '..'
+
 import type { UserModule } from '~/types'
 
+// @ts-expect-error virtual
+import messages from '/@valaxyjs/locales'
+
 // Import i18n resources
 // https://vitejs.dev/guide/features.html#glob-import
 //
 // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
-const messages = Object.fromEntries(
-  Object.entries(
-    import.meta.globEager('../locales/*.y(a)?ml'))
-    .map(([key, value]) => {
-      const yaml = key.endsWith('.yaml')
-      return [key.slice(11, yaml ? -5 : -4), value.default]
-    }),
-)
+// const messages = Object.fromEntries(
+//   Object.entries(
+//     import.meta.globEager('../locales/*.y(a)?ml'))
+//     .map(([key, value]) => {
+//       const yaml = key.endsWith('.yaml')
+//       return [key.slice(11, yaml ? -5 : -4), value.default]
+//     }),
+// )
+
+// import zh from '../../../../../demo/yun/locales/zh-CN.yml'
+// import en from '../../../../../demo/yun/locales/en.yml'
 
 function shouldHotReload(payload: any): boolean {
   const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '')
@@ -25,19 +40,21 @@ function shouldHotReload(payload: any): boolean {
 // https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
 export const install: UserModule = ({ app, router }) => {
   // inject valaxy config before modules
-  const valaxyConfigRef = initConfig()
-  app.provide(valaxyConfigSymbol, valaxyConfigRef)
+  const config = initConfig()
+  app.provide(valaxyConfigSymbol, config)
+
+  // const {} = await import()
 
   // init i18n, by valaxy config
   const i18n = createI18n({
     legacy: false,
-    locale: valaxyConfigRef.value.lang || 'en',
+    locale: config.value.lang || 'en',
     messages,
   })
   app.use(i18n)
 
   // for dev
-  if (isDev) {
+  if (__DEV__) {
     import.meta.hot!.on('valaxy:pageHeaders', (payload) => {
       if (shouldHotReload(payload))
         router.currentRoute.value.meta.headers = payload.pageHeaders

package/src/client/shims.d.ts

@@ -28,6 +28,11 @@ declare module '@valaxyjs/config' {
   export default config
 }
 
+declare module '/@valaxyjs/locales' {
+  const messages: {}
+  export default messages
+}
+
 declare module 'vue-router' {
   interface RouteMeta {
     headers: Header[]

package/src/client/styles/common/button.scss

@@ -1,5 +1,3 @@
-@use "../palette.scss" as * ;
-
 .yun-icon-btn {
   cursor: pointer;
 
@@ -13,17 +11,17 @@
 
   border-radius: 50%;
 
-  transition: var(--yun-transition);
+  transition: background-color var(--va-transition-duration);
 
   div {
     font-size: 1.2rem;
   }
 
   &:hover {
-    background-color: rgba(var(--yun-c-primary-rgb), 0.08);
+    background-color: rgba(var(--va-c-primary-rgb), 0.08);
   }
 
   &:active {
-    background-color: rgba(var(--yun-c-primary-rgb), 0.16);
+    background-color: rgba(var(--va-c-primary-rgb), 0.16);
   }
 }

package/src/client/styles/common/hamburger.scss

@@ -19,7 +19,7 @@ $hamburger-size: 22px;
 .vt-hamburger.is-active:hover .vt-hamburger-top,
 .vt-hamburger.is-active:hover .vt-hamburger-middle,
 .vt-hamburger.is-active:hover .vt-hamburger-bottom {
-  background-color: var(--yun-c-primary);
+  background-color: var(--va-c-primary);
   transition: top .25s, background-color .25s, transform .25s;
 }
 
@@ -38,7 +38,7 @@ $hamburger-size: 22px;
   position: absolute;
   width: $hamburger-size;
   height: 2px;
-  background-color: var(--yun-c-primary);
+  background-color: var(--va-c-primary);
   transition: top .25s, background-color .5s, transform .25s;
 }
 

package/src/client/styles/common/markdown.scss

@@ -3,9 +3,10 @@
 @use './code.scss' as *;
 
 .markdown-body {
-  --prism-font-family: var(--yun-font-mono);
+  --prism-font-family: var(--va-font-mono);
 
-  --smc-link-color: var(--yun-c-link);
+  --smc-link-color: var(--va-c-link);
+  --smc-font-family: var(--va-font-sans);
 }
 
 // for anchor
@@ -33,7 +34,7 @@ a.header-anchor {
   font-size: 0.85em;
   visibility: hidden;
   opacity: 0;
-  transition: opacity var(--yun-transition-duration);
+  transition: opacity var(--va-transition-duration);
 
   &::before {
     content: none;

package/src/client/styles/common/sidebar.scss

@@ -11,7 +11,7 @@
   left: 0;
 
   width: calc(100vw - 64px);
-  max-width: var(--yun-sidebar-width-mobile);
+  max-width: var(--va-sidebar-width-mobile);
 
   background-image: var(--yun-sidebar-bg-image);
   background-color: var(--yun-sidebar-bg-color);
@@ -19,10 +19,10 @@
   background-repeat: no-repeat;
   background-position: bottom 1rem center;
   text-align: center;
-  z-index: map.get($z-index, 'sidebar');
+  z-index: var(--yun-z-sidebar);
 
   transform: translateX(-100%);
-  transition: transform var(--yun-transition-duration);
+  transition: transform var(--va-transition-duration);
 
   &.open {
     transform: translateX(0);

package/src/client/styles/common/transition.scss

@@ -1,7 +1,7 @@
 .v {
   &-enter-active,
   &-leave-active {
-    transition: opacity 0.5s ease;
+    transition: opacity var(--va-transition-duration, 0.4s) ease;
   }
 
   &-enter-from,
@@ -13,7 +13,7 @@
 .fade {
   &-enter-active,
   &-leave-active {
-    transition: opacity 0.5s ease;
+    transition: opacity var(--va-transition-duration, 0.4s) ease;
   }
 
   &-enter-from,

package/src/client/styles/{css-vars/index.scss → css-vars.scss}

@@ -1,18 +1,32 @@
 @use "sass:map";
-@use "../mixins" as *;
-@use "../vars" as *;
-@use "../palette" as *;
+@use "./mixins" as *;
+@use "./vars" as *;
+@use "./palette" as *;
 
+// common
+:root {
+  @include set-css-var-from-map($common);
+  @include set-css-var-from-map($border, 'border');
+  @include set-css-var-from-map($font, 'font');
+  @include set-css-var-from-map($transition, 'transition'); 
+}
+
+// colors
 :root {
   // palette different with colors
   @include set-css-var-from-map($palette, 'c');
+  // primary
+  @include set-css-var-from-map($colors, 'c');
 }
 
+// light
 :root {
-  @include set-css-var-from-map($common);
-  @include set-css-var-from-map($border, 'border');
-  @include set-css-var-from-map($font, 'font');
-  @include set-css-var-from-map($z-index, 'z');
-  @include set-css-var-from-map($transition, 'transition'); 
+  color-scheme: light;
+  @include set-css-var-from-map($light);
 }
 
+// dark
+html.dark {
+  color-scheme: dark;
+  @include set-css-var-from-map($dark);
+}

package/src/client/styles/global/helper.scss

@@ -1,3 +1,3 @@
-.val-card {
-  background-color: var(--yun-c-bg-light);
+.va-card {
+  background-color: var(--va-c-bg-light);
 }

package/src/client/styles/global/index.scss

@@ -9,7 +9,7 @@ body,
 }
 
 body {
-  background-color: var(--yun-c-bg);
+  background-color: var(--va-c-bg);
   
   &::before {
     content: '';

package/src/client/styles/global/nprogress.scss

@@ -2,7 +2,7 @@
   pointer-events: none;
 
   .bar {
-    background: var(--yun-c-primary);
+    background: var(--va-c-primary);
     opacity: 0.75;
     position: fixed;
     z-index: 1031;

package/src/client/styles/global/reset.scss

@@ -7,7 +7,7 @@ html {
 }
 
 a {
-  color: var(--yun-c-link);
+  color: var(--va-c-link);
   font-weight: 500;
 }
 

package/src/client/styles/mixins/config.scss

@@ -1 +1 @@
-$namespace: 'yun';
+$namespace: 'va' !default;

package/src/client/styles/mixins/index.scss

@@ -1,2 +1,3 @@
+@forward './config.scss';
 @forward './size.scss';
 @forward './variable.scss';

package/src/client/styles/palette.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:meta";
 
 @use "./mixins" as *;
 
@@ -16,7 +17,15 @@ $colors: map.merge((
   'primary': #0078E7,
 ), $colors);
 
-$c-primary: map.get($colors, 'primary');
+// @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%),
@@ -27,8 +36,7 @@ $colors: map.merge((
 
 $light: () !default;
 $light: map.merge((
-  'bg-image': url('https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg'),
-  'border-color': #e6e6e6,
+  'border-color': #222,
 
   'c-bg': white,
   'c-bg-light': white,
@@ -40,14 +48,11 @@ $light: map.merge((
   'c-primary-rgb': #{red($c-primary), green($c-primary), blue($c-primary)},
 
   'c-link': get-css-var('c-primary-dark'),
-
-  'sidebar-bg-color': get-css-var('c-bg-light')
 ), $light);
 
 $dark: () !default;
 $dark: map.merge((
-  'bg-image': none,
-  'border-color': #222,
+  'border-color': #e6e6e6,
 
   'c-bg': #1a1a1a,
   'c-bg-light': #22252e,

package/src/client/styles/vars.scss

@@ -18,22 +18,10 @@ $font: map.merge((
   'serif-weight': 900,
 ), $font);
 
-$z-index: () !default;
-$z-index: map.merge((
-  'cloud': 8,
-  'go-down': 9,
-  'sidebar': 10,
-  'fireworks': 11,
-  'menu-btn': 20,
-  'go-up-btn': 20,
-  'search-popup': 30,
-  'search-btn': 31,
-), $z-index);
-
 $transition: () !default;
 $transition: map.merge((
   'duration-fast': 0.2s,
   'duration': 0.4s,
   'duration-slow': 0.6s,
-  '': all var(--yun-transition-duration-fast) ease-in-out
+  '': all var(--va-transition-duration-fast) ease-in-out
 ), $transition);

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

@@ -70,7 +70,7 @@ $char-animation-duration: 0.4s;
 
   &-left {
     border-left: 1px solid var(--banner-line-color);
-    border-right: 0px solid rgba(var(--yun-c-primary-rgb), 0.1);
+    border-right: 0px solid rgba(var(--va-c-primary-rgb), 0.1);
     border-right-width: 0px;
     animation-name: char-move-left;
     animation-duration: $char-animation-duration;
@@ -80,7 +80,7 @@ $char-animation-duration: 0.4s;
   }
 
   &-right {
-    border-left: 0px solid rgba(var(--yun-c-primary-rgb), 0.1);
+    border-left: 0px solid rgba(var(--va-c-primary-rgb), 0.1);
     border-right: 1px solid var(--banner-line-color);
     border-left-width: 0px;
     animation-name: char-move-right;

package/src/client/utils/index.ts

@@ -1,4 +1,2 @@
 export * from './helper'
 export * from './time'
-
-export const isDev = import.meta.env.DEV === true

package/src/node/build.ts

@@ -1,5 +1,8 @@
 import type { InlineConfig } from 'vite'
 import { mergeConfig, build as viteBuild } from 'vite'
+import { build as viteSsgBuild } from 'vite-ssg/node'
+import generateSitemap from 'vite-ssg-sitemap'
+
 import type { ResolvedValaxyOptions } from './options'
 import { createViteConfig } from './vite'
 
@@ -7,6 +10,22 @@ export async function build(
   options: ResolvedValaxyOptions,
   viteConfig: InlineConfig = {},
 ) {
-  const inlineConfig = mergeConfig(viteConfig, createViteConfig(options))
+  const inlineConfig = mergeConfig(await createViteConfig(options), viteConfig)
   await viteBuild(inlineConfig)
 }
+
+export async function ssgBuild(
+  options: ResolvedValaxyOptions,
+  viteConfig: InlineConfig = {},
+) {
+  const inlineConfig: InlineConfig = mergeConfig(await createViteConfig(options), viteConfig)
+
+  // https://github.com/antfu/vite-ssg
+  inlineConfig.ssgOptions = {
+    script: 'async',
+    formatting: 'minify',
+    onFinished() { generateSitemap() },
+  }
+
+  await viteSsgBuild({}, inlineConfig)
+}

package/src/node/cli.ts

@@ -6,15 +6,15 @@ 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'
 
+// build
+import { build, ssgBuild } from './build'
+
 const cli = yargs.scriptName('valaxy')
   .usage('$0 [args]')
   .version(version)
@@ -121,22 +121,29 @@ cli.command(
       describe: 'output dir',
     }).option('base', {
       type: 'string',
+      default: '/',
       describe: 'output base',
     })
     .strict()
     .help(),
   async({ ssg, root, base, output }) => {
-    const options = await resolveOptions({ userRoot: root })
+    const options = await resolveOptions({ userRoot: root }, 'build')
     printInfo(options)
 
+    const viteConfig = {
+      base,
+      build: {
+        // make out dir empty, https://vitejs.dev/config/#build-emptyoutdir
+        emptyOutDir: true,
+        outDir: path.resolve(options.userRoot, output),
+      },
+    }
+
     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',
-        })
+        await ssgBuild(options, viteConfig)
       }
       catch (e) {
         consola.error('[vite-ssg] An internal error occurred.')
@@ -144,17 +151,8 @@ cli.command(
       }
     }
     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),
-        },
-      })
+      await build(options, viteConfig)
     }
   },
 )

package/src/node/markdown/index.ts

@@ -5,6 +5,7 @@ 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 type { KatexOptions } from 'katex'
 import Katex from '../markdown/markdown-it-katex'
@@ -58,11 +59,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))
   })