valaxy 0.1.0 → 0.2.0

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

@@ -1,3 +1,58 @@
+@use '~/styles/mixins' as *;
+
+/* https://github.com/antfu/prism-theme-vars */
+@use 'prism-theme-vars/base.css' as *;
+
+@include mobile {
+  .markdown-body {
+    div[class*='language-'] {
+      margin: 0 -1rem;
+    }
+  }
+}
+
+.markdown-body {
+  div[class*='language-'] {
+    position: relative;
+    padding: 0;
+    background-color: var(--smc-code-bg-color);
+
+    pre {
+      position: relative;
+      padding: 1rem;
+      z-index: 1;
+      background: none;
+    }
+  }
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.15rem 0;
+  width: 100%;
+  line-height: var(--prism-line-height);
+  // font-family: var(--code-font-family);
+  // font-size: var(--code-font-size);
+  user-select: none;
+  overflow: hidden;
+}
+
+.highlight-lines .highlighted {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.dark {
+  .highlight-lines .highlighted {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+// prism
 html:not(.dark) {
   --prism-foreground: #393a34;
   --prism-background: #f8f8f8;
@@ -33,3 +88,105 @@ html.dark {
   --prism-regex: #ad502b;
   --prism-selector: #C3E88D;
 }
+
+/* Language marker */
+// @use 'prism-theme-vars/marker.css' as *; * not div
+div[class*='language-']:before {
+  position: absolute;
+  top: 0.6em;
+  right: 1em;
+  z-index: 2;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+div[class~='language-html']:before,
+div[class~='language-markup']:before {
+  content: 'html';
+}
+
+div[class~='language-md']:before,
+div[class~='language-markdown']:before {
+  content: 'md';
+}
+
+div[class~='language-css']:before {
+  content: 'css';
+}
+
+div[class~='language-sass']:before {
+  content: 'sass';
+}
+
+div[class~='language-scss']:before {
+  content: 'scss';
+}
+
+div[class~='language-less']:before {
+  content: 'less';
+}
+
+div[class~='language-stylus']:before {
+  content: 'styl';
+}
+
+div[class~='language-js']:before,
+div[class~='language-javascript']:before {
+  content: 'js';
+}
+
+div[class~='language-ts']:before,
+div[class~='language-typescript']:before {
+  content: 'ts';
+}
+
+div[class~='language-json']:before {
+  content: 'json';
+}
+
+div[class~='language-rb']:before,
+div[class~='language-ruby']:before {
+  content: 'rb';
+}
+
+div[class~='language-py']:before,
+div[class~='language-python']:before {
+  content: 'py';
+}
+
+div[class~='language-sh']:before,
+div[class~='language-bash']:before {
+  content: 'sh';
+}
+
+div[class~='language-php']:before {
+  content: 'php';
+}
+
+div[class~='language-go']:before {
+  content: 'go';
+}
+
+div[class~='language-rust']:before {
+  content: 'rust';
+}
+
+div[class~='language-java']:before {
+  content: 'java';
+}
+
+div[class~='language-c']:before {
+  content: 'c';
+}
+
+div[class~='language-yaml']:before {
+  content: 'yaml';
+}
+
+div[class~='language-dockerfile']:before {
+  content: 'dockerfile';
+}
+
+div[class~='language-vue']:before {
+  content: 'vue';
+}

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

@@ -1,11 +1,9 @@
-/* https://github.com/antfu/prism-theme-vars */
-@use 'prism-theme-vars/base.css' as *;
-@use './code.scss' as *;
+@use 'sass:map';
 
 .markdown-body {
-  --prism-font-family: var(--yun-font-mono);
+  --prism-font-family: var(--va-font-mono);
 
-  --smc-link-color: var(--yun-c-link);
+  --smc-font-family: var(--va-font-sans);
 }
 
 // for anchor
@@ -21,6 +19,7 @@ h5:hover .header-anchor,
 h5:focus .header-anchor,
 h6:hover .header-anchor,
 h6:focus .header-anchor {
+  visibility: visible;
   opacity: 1;
 }
 
@@ -30,7 +29,9 @@ a.header-anchor {
   margin-left: -0.87em;
   padding-right: 0.23em;
   font-size: 0.85em;
+  visibility: hidden;
   opacity: 0;
+  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.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "./mixins" as *;
+@use "./vars" as *;
+
+$c-primary: #0078E7 !default;
+
+@use "./palette" with (
+  $colors: (
+    'primary': $c-primary,
+  )
+);
+
+// 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.$palette, 'c');
+  // primary
+  @include set-css-var-from-map(palette.$colors, 'c');
+}
+
+// light
+:root {
+  color-scheme: light;
+  @include set-css-var-from-map(palette.$light);
+}
+
+// dark
+html.dark {
+  color-scheme: dark;
+  @include set-css-var-from-map(palette.$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,8 @@ html {
 }
 
 a {
-  color: var(--yun-c-link);
+  color: var(--va-c-link);
+  font-weight: 500;
 }
 
 * {

package/src/client/styles/index.scss

@@ -1,5 +1,7 @@
 // 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 *;
@@ -8,11 +10,20 @@
 
 // common
 @use './common/button.scss' as *;
+@use './common/code.scss' as *;
 @use './common/hamburger.scss' as *;
-@use './common/markdown.scss' as *;
+
 @use "./common/scrollbar.scss" as *;
 @use "./common/sidebar.scss" as *;
 @use "./common/transition.scss" as *;
 
 // banner
 @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/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,18 +17,18 @@ $colors: map.merge((
   'primary': #0078E7,
 ), $colors);
 
-$c-primary: map.get($colors, 'primary');
+$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((
-  '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,
@@ -38,15 +39,12 @@ $light: map.merge((
 
   'c-primary-rgb': #{red($c-primary), green($c-primary), blue($c-primary)},
 
-  'c-link': $c-primary,
-
-  'sidebar-bg-color': #{get-css-var('c-bg-light')}
+  'c-link': get-css-var('c-primary-dark'),
 ), $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,17 @@ 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'
+// rss
+import { build as rssBuild } from './rss'
+
 const cli = yargs.scriptName('valaxy')
   .usage('$0 [args]')
   .version(version)
@@ -121,22 +123,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,21 +153,25 @@ 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)
     }
   },
 )
 
+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/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')
+}