valaxy 0.4.0 → 0.6.1

package/{src/client → client}/locales/en.yml

@@ -43,6 +43,7 @@ post:
   related_posts: Related Posts
   view_link: View Link
   read_more: READ MORE
+  cover: Cover
   copyright:
     author: Post author
     link: Post link

package/{src/client → client}/locales/zh-CN.yml

@@ -43,6 +43,7 @@ post:
   related_posts: 相关文章
   view_link: 查看链接
   read_more: 阅读更多
+  cover: 封面
   copyright:
     author: 本文作者
     link: 本文链接
@@ -59,9 +60,9 @@ footer:
   total_visitors: 总访客量
 
 counter:
-  archives: 暂无日志 | 共计 {count} 篇日志
-  categories: 暂无分类 | 共计 {count} 个分类
-  tags: 暂无标签 | 共计 {count} 个标签
+  archives: 暂无日志 | 共计 1 篇日志 | 共计 {count} 篇日志
+  categories: 暂无分类 | 共计 1 个分类 | 共计 {count} 个分类
+  tags: 暂无标签 | 共计 1 个标签 | 共计 {count} 个标签
   albums:
     zero: 暂无相册
     one: 共计 1 个相册

package/{src/client → client}/main.ts

@@ -18,7 +18,10 @@ export const createApp = ViteSSG(
   {
     routes,
     base: import.meta.env.BASE_URL,
-    scrollBehavior() { return { top: 0 } },
+    scrollBehavior(to, from) {
+      if (to.path !== from.path)
+        return { top: 0 }
+    },
   },
   (ctx) => {
     // install all modules under `modules/`

package/{src/client → client}/modules/valaxy.ts

@@ -10,7 +10,10 @@ import { createI18n } from 'vue-i18n'
 
 import { useStorage } from '@vueuse/core'
 
+import type { Router } from 'vue-router'
+import type { PageDataPayload } from '../../types'
 import { initConfig, valaxyConfigSymbol } from '../config'
+import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from '~/types'
 
@@ -33,10 +36,11 @@ import messages from '/@valaxyjs/locales'
 // import zh from '../../../../../demo/yun/locales/zh-CN.yml'
 // import en from '../../../../../demo/yun/locales/en.yml'
 
-function shouldHotReload(payload: any): boolean {
+function shouldHotReload(payload: PageDataPayload): boolean {
   const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '')
   const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '')
-  return payloadPath === locationPath
+  // console.log(payloadPath, locationPath)
+  return ensureSuffix('/', payloadPath) === ensureSuffix('/', locationPath)
 }
 
 export const install: UserModule = ({ app, router }) => {
@@ -54,11 +58,19 @@ export const install: UserModule = ({ app, router }) => {
   })
   app.use(i18n)
 
-  // for dev
-  if (__DEV__) {
-    import.meta.hot!.on('valaxy:pageHeaders', (payload) => {
-      if (shouldHotReload(payload))
-        router.currentRoute.value.meta.headers = payload.pageHeaders
+  router.isReady().then(() => {
+    handleHMR(router)
+  })
+}
+
+function handleHMR(router: Router): void {
+  // update route.data on HMR updates of active page
+  if (import.meta.hot) {
+    import.meta.hot!.on('valaxy:pageData', (payload: PageDataPayload) => {
+      if (shouldHotReload(payload)) {
+        // console.log(payload.pageData.headers)
+        Object.assign(router.currentRoute.value.meta, payload.pageData)
+      }
     })
   }
 }

package/{src/client → client}/shims.d.ts

@@ -3,7 +3,7 @@ import 'vue-router'
 import type { Post } from 'valaxy'
 import type { Header } from '../node/markdown'
 
-// with vite-plugin-md, markdowns can be treat as Vue components
+// markdowns can be treat as Vue components
 declare module '*.md' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
@@ -23,6 +23,11 @@ declare module '@valaxyjs/config' {
   export default config
 }
 
+declare module '@valaxyjs/context' {
+  const ctx: string
+  export default ctx
+}
+
 declare module '/@valaxyjs/locales' {
   const messages: {}
   export default messages
@@ -34,3 +39,4 @@ declare module 'vue-router' {
     frontmatter: Post
   }
 }
+

package/client/styles/common/code.scss

@@ -0,0 +1,231 @@
+@use "~/styles/mixins" as *;
+
+@include mobile {
+  .markdown-body {
+    div[class*="language-"] {
+      margin: 0 -1rem;
+    }
+  }
+}
+
+@media (min-width: 640px) {
+  .markdown-body div[class*="language-"] {
+    border-radius: 6px;
+    margin: 16px 0;
+  }
+}
+
+@media (max-width: 639px) {
+  .markdown-body li div[class*="language-"] {
+    border-radius: 6px 0 0 6px;
+  }
+}
+
+.markdown-body {
+  div[class*="language-"] {
+    position: relative;
+    background-color: var(--va-code-block-bg);
+
+    code {
+      padding: 0 24px;
+      line-height: var(--va-code-line-height);
+      font-size: var(--va-code-font-size);
+      color: var(--va-code-block-color);
+      transition: color 0.5s;
+      width: fit-content;
+    }
+
+    pre {
+      position: relative;
+      z-index: 1;
+      margin: 0;
+      padding: 1rem 0;
+      background: transparent;
+      overflow-x: auto;
+
+      // expand
+      code {
+        display: block;
+      }
+    }
+  }
+}
+
+// marker
+.markdown-body {
+  .highlight-lines {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px 0;
+    width: 100%;
+    line-height: var(--va-code-line-height);
+    font-family: var(--va-font-mono);
+    font-size: var(--va-code-font-size);
+    user-select: none;
+    overflow: hidden;
+
+    .highlighted {
+      background-color: var(--va-code-line-highlight-color);
+      transition: background-color 0.5s;
+    }
+  }
+
+  [class*="language-"] > span.copy {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 2;
+    display: block;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    width: 40px;
+    height: 40px;
+    background-color: var(--va-code-block-bg);
+    opacity: 0;
+    cursor: pointer;
+    background-image: var(--va-icon-copy);
+    background-position: 50%;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    transition: opacity 0.25s;
+  }
+
+  [class*="language-"]:hover > span.copy {
+    opacity: 1;
+  }
+
+  [class*="language-"] > span.copy:hover {
+    background-color: var(--va-code-copy-code-hover-bg);
+  }
+
+  [class*="language-"] > span.copy.copied,
+  [class*="language-"] > span.copy:hover.copied {
+    border-radius: 0 4px 4px 0;
+    background-color: var(--va-code-copy-code-hover-bg);
+    background-image: var(--va-icon-copied);
+  }
+
+  [class*="language-"] > span.copy.copied::before,
+  [class*="language-"] > span.copy:hover.copied::before {
+    position: relative;
+    left: -65px;
+    display: block;
+    border-radius: 4px 0 0 4px;
+    padding-top: 8px;
+    width: 64px;
+    height: 40px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-code-copy-code-active-text);
+    background-color: var(--va-code-copy-code-hover-bg);
+    white-space: nowrap;
+    content: "Copied";
+  }
+
+  [class*="language-"]:before {
+    position: absolute;
+    top: 6px;
+    right: 12px;
+    z-index: 2;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--va-c-text-dark-3);
+    transition: color 0.5s, opacity 0.5s;
+  }
+
+  [class*="language-"]:hover:before {
+    opacity: 0;
+  }
+
+  [class~="language-c"]:before {
+    content: "c";
+  }
+  [class~="language-css"]:before {
+    content: "css";
+  }
+  [class~="language-go"]:before {
+    content: "go";
+  }
+  [class~="language-html"]:before {
+    content: "html";
+  }
+  [class~="language-java"]:before {
+    content: "java";
+  }
+  [class~="language-javascript"]:before {
+    content: "js";
+  }
+  [class~="language-js"]:before {
+    content: "js";
+  }
+  [class~="language-json"]:before {
+    content: "json";
+  }
+  [class~="language-jsx"]:before {
+    content: "jsx";
+  }
+  [class~="language-less"]:before {
+    content: "less";
+  }
+  [class~="language-markdown"]:before {
+    content: "md";
+  }
+  [class~="language-md"]:before {
+    content: "md";
+  }
+  [class~="language-php"]:before {
+    content: "php";
+  }
+  [class~="language-python"]:before {
+    content: "py";
+  }
+  [class~="language-py"]:before {
+    content: "py";
+  }
+  [class~="language-rb"]:before {
+    content: "rb";
+  }
+  [class~="language-ruby"]:before {
+    content: "rb";
+  }
+  [class~="language-rust"]:before {
+    content: "rust";
+  }
+  [class~="language-sass"]:before {
+    content: "sass";
+  }
+  [class~="language-scss"]:before {
+    content: "scss";
+  }
+  [class~="language-sh"]:before {
+    content: "sh";
+  }
+  [class~="language-bash"]:before {
+    content: "sh";
+  }
+  [class~="language-stylus"]:before {
+    content: "styl";
+  }
+  [class~="language-vue-html"]:before {
+    content: "template";
+  }
+  [class~="language-typescript"]:before {
+    content: "ts";
+  }
+  [class~="language-ts"]:before {
+    content: "ts";
+  }
+  [class~="language-tsx"]:before {
+    content: "tsx";
+  }
+  [class~="language-vue"]:before {
+    content: "vue";
+  }
+  [class~="language-yaml"]:before {
+    content: "yaml";
+  }
+}

package/{src/client → client}/styles/common/markdown.scss

@@ -1,8 +1,6 @@
 @use "sass:map";
 
 .markdown-body {
-  --prism-font-family: var(--va-font-mono);
-
   --smc-font-family: var(--va-font-sans);
 
   video {

package/client/styles/common/scrollbar.scss

@@ -0,0 +1,28 @@
+@use "~/styles/mixins" as *;
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background-color: rgba(122, 122, 122, 0.3);
+
+  &:window-inactive {
+    background-color: rgba(122, 122, 122, 0.3);
+  }
+
+  &:hover {
+    background-color: rgba(get-css-var("c", "primary", "rgb"), 0.7);
+  }
+
+  &:active {
+    background-color: rgba(get-css-var("c", "primary", "rgb"), 0.9);
+  }
+}

package/client/styles/css-vars.scss

@@ -0,0 +1,62 @@
+@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);
+}
+
+// code
+:root {
+  --va-code-line-height: 1.7;
+  --va-code-font-size: 0.875em;
+
+  --va-code-block-color: var(--va-c-text-dark-1);
+  --va-code-block-bg: #282c34;
+
+  --va-code-line-highlight-color: rgba(0, 0, 0, 0.5);
+  --va-code-line-number-color: var(--va-c-text-dark-3);
+
+  --va-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
+  --va-code-copy-code-active-text: var(--va-c-text-dark-2);
+}
+
+// dark
+html.dark {
+  color-scheme: dark;
+  @include set-css-var-from-map(palette.$dark);
+}
+
+/**
+ * Icons
+ * -------------------------------------------------------------------------- */
+:root {
+  --va-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
+  --va-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
+}

package/{src/client → client}/styles/palette.scss

@@ -11,6 +11,15 @@ $palette: map.merge(
     "gray": #8e8e8e,
     "danger": #db2828,
     "warning": #f2711c,
+
+    "text-light-1": #213547,
+    "text-light-2": rgba(60, 60, 60, 0.7),
+    "text-light-3": rgba(60, 60, 60, 0.33),
+    "text-light-4": rgba(60, 60, 60, 0.18),
+    "text-dark-1": rgba(255, 255, 255, 0.87),
+    "text-dark-2": rgba(235, 235, 235, 0.6),
+    "text-dark-3": rgba(235, 235, 235, 0.38),
+    "text-dark-4": rgba(235, 235, 235, 0.18),
   ),
   $palette
 );
@@ -37,13 +46,19 @@ $colors: map.merge(
 $light: () !default;
 $light: map.merge(
   (
+    "c-brand": $c-primary,
+
     "border-color": #222,
 
     "c-bg": white,
     "c-bg-light": white,
     "c-bg-dark": #fafafa,
+    "c-bg-alt": #f9f9f9,
+    "c-bg-mute": #f1f1f1,
+
     "c-text": #333,
     "c-text-light": #555,
+    "c-text-lighter": #666,
     "c-text-dark": #111,
 
     "c-primary-rgb": #{red($c-primary),
@@ -53,6 +68,7 @@ $light: map.merge(
     blue($c-primary)},
 
     "c-link": get-css-var("c-primary-dark"),
+    "c-divider": rgba(60, 60, 60, 0.2),
   ),
   $light
 );
@@ -65,12 +81,15 @@ $dark: map.merge(
     "c-bg": #1a1a1a,
     "c-bg-light": #1d1e1f,
     "c-bg-dark": #1a1a1a,
+    "c-bg-alt": #1a1a1a,
+    "c-bg-mute": #2f2f2f,
 
     "c-text": #f2f2f2,
-    "c-text-light": #eee,
-    "c-text-lighter": #ddd,
+    "c-text-light": #ddd,
+    "c-text-lighter": #eee,
     "c-text-dark": rgba(#ebebeb, 0.8),
     "c-link": map.get($colors, "primary-light"),
+    "code-block-bg": #151515,
   ),
   $dark
 );

package/client/styles/third/katex.scss

@@ -0,0 +1,3 @@
+.katex-display > .katex > .katex-html > .tag {
+  right: 2px;
+}

package/client/styles/vars.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+
+$common: () !default;
+$common: map.merge(
+  (
+    "sidebar-width-mobile": 320px,
+  ),
+  $common
+);
+
+$border: () !default;
+$border: map.merge(
+  (
+    "width": 1px,
+  ),
+  $border
+);
+
+$font: () !default;
+$font: map.merge(
+  (
+    "sans":
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+    "mono": 'Menlo, Monaco, Consolas, "Courier New", monospace',
+    "serif":
+      "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
+    "serif-weight": 900,
+  ),
+  $font
+);
+
+$transition: () !default;
+$transition: map.merge(
+  (
+    "duration-fast": 0.2s,
+    "duration": 0.4s,
+    "duration-slow": 0.6s,
+    "": all var(--va-transition-duration-fast) ease-in-out,
+  ),
+  $transition
+);

package/{src/client → client}/utils/helper.ts

@@ -28,3 +28,25 @@ export const wrapTable = (container: HTMLElement | Document = document) => {
     wrap(el, 'table-container')
   })
 }
+
+export function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeout: number
+  let called = false
+
+  return () => {
+    if (timeout)
+      clearTimeout(timeout)
+
+    if (!called) {
+      fn()
+      called = true
+      setTimeout(() => {
+        called = false
+      }, delay)
+    }
+    else {
+      // @ts-expect-error browser setTimeout
+      timeout = setTimeout(fn, delay)
+    }
+  }
+}

package/client/utils/sidebar.ts

@@ -0,0 +1,26 @@
+import type { YunTheme } from 'valaxy-theme-yun'
+import { ensurePrefix } from '@antfu/utils'
+
+/**
+ * Get the `Sidebar` from sidebar option. This method will ensure to get correct
+ * sidebar config from `MultiSideBarConfig` with various path combinations such
+ * as matching `guide/` and `/guide/`. If no matching config was found, it will
+ * return empty array.
+ */
+export function getSidebar(
+  sidebar: YunTheme.Sidebar,
+  path: string,
+) {
+  if (Array.isArray(sidebar))
+    return sidebar
+
+  path = ensurePrefix('/', path)
+
+  for (const dir in sidebar) {
+    // make sure the multi sidebar key starts with slash too
+    if (path.startsWith(ensurePrefix('/', dir)))
+      return sidebar[dir]
+  }
+
+  return []
+}