valaxy 0.1.2 → 0.2.2

package/src/client/components/ValaxySidebar.vue

@@ -12,8 +12,6 @@ const isHome = useLayout('home')
   <ValaxyHamburger :active="app.isSidebarOpen" class="menu-btn sidebar-toggle yun-icon-btn" :class="isHome ? '' : 'md:hidden'" @click="app.toggleSidebar()" />
 
   <aside class="va-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
-    <YunSidebar />
-    <YunConfig />
     <slot />
   </aside>
 </template>

package/src/client/components/ValaxyToc.vue

@@ -21,7 +21,7 @@ function getStylesByLevel(level: number) {
 
 <template>
   <ul class="va-toc" p="l-4">
-    <li v-for="header, i in headers" :key="i" :style="getStylesByLevel(header.level)">
+    <li v-for="header, i in headers" :key="i" class="va-toc-item" :style="getStylesByLevel(header.level)">
       <a class="toc-link-item" :href="`#${header.slug}`">{{ header.title }}</a>
     </li>
   </ul>

package/src/client/composables/category.ts

@@ -1,3 +1,4 @@
+import { unref } from 'vue'
 import type { Post } from '../../types'
 import { usePostList } from './post'
 
@@ -20,11 +21,12 @@ export type Categories = Map<string, Category>
  * get categories from posts
  * @returns
  */
-export function useCategory() {
-  const posts = usePostList()
+export function useCategory(category?: string, posts: Post[] = []): ParentCategory {
+  if (!posts.length)
+    posts = unref(usePostList())
 
   const categoryMap: Category = {
-    total: posts.value.length,
+    total: posts.length,
     children: new Map([
       ['Uncategorized', { total: 0, posts: [] }],
     ]),
@@ -32,7 +34,7 @@ export function useCategory() {
 
   const uncategorized = categoryMap.children.get('Uncategorized') as PostCategory
 
-  posts.value.forEach((post: Post) => {
+  posts.forEach((post: Post) => {
     if (post.categories) {
       if (Array.isArray(post.categories)) {
         const len = post.categories.length
@@ -97,5 +99,22 @@ export function useCategory() {
   if (uncategorized!.total === 0)
     categoryMap.children?.delete('Uncategorized')
 
-  return categoryMap
+  if (!category) {
+    return categoryMap
+  }
+  else {
+    const categoryItem = categoryMap.children.get(category)
+    if (categoryItem) {
+      return {
+        total: categoryItem?.total,
+        children: new Map([
+          [category, categoryItem],
+        ]),
+      }
+    }
+    else {
+      console.warn(`Do not have category: ${category}`)
+      return categoryMap
+    }
+  }
 }

package/src/client/composables/comments/index.ts

@@ -1 +1,2 @@
+export * from './twikoo'
 export * from './waline'

package/src/client/composables/comments/twikoo.ts

@@ -0,0 +1,37 @@
+import { isClient, useScriptTag } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+export function useTwikoo(options: {} = {}) {
+  const route = useRoute()
+
+  const { locale } = useI18n()
+
+  let twikoo: any
+
+  /**
+   * init waline
+   * @param options waline options
+   * @returns
+   */
+  function initTwikoo(options: {} = {}) {
+    if (!isClient)
+      return
+
+    const defaultOptions = {
+      el: '.comment #tcomment',
+      lang: locale.value,
+      path: route.path,
+    }
+    const twikooOptions = Object.assign(defaultOptions, options)
+    return window.twikoo.init(twikooOptions)
+  }
+
+  // 直接使用 CDN
+  useScriptTag('//cdn.jsdelivr.net/npm/twikoo@1.5.1/dist/twikoo.all.min.js', () => {
+    twikoo = initTwikoo(options)
+  })
+
+  // eslint-disable-next-line no-console
+  console.log(twikoo)
+}

package/src/client/composables/comments/waline.ts

@@ -31,7 +31,6 @@ export function useWaline(options: {} = {}) {
       path: route.path,
     }
     const walineOptions = Object.assign(defaultOptions, options)
-    // @ts-expect-error waline type
     return window.Waline(walineOptions)
   }
 

package/src/client/composables/common.ts

@@ -19,7 +19,8 @@ export function useFullUrl() {
   const config = useConfig()
   const route = useRoute()
   const url = computed(() => {
-    const origin = config.value.url || (isClient && window.location.origin)
+    const siteUrl = config.value.url.endsWith('/') ? config.value.url.slice(0, -1) : config.value.url
+    const origin = siteUrl || (isClient && window.location.origin)
     return origin + route.path
   })
   return url

package/src/client/composables/post.ts

@@ -1,8 +1,18 @@
-import type { StyleValue } from 'vue'
+import type { Ref, StyleValue } from 'vue'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { useThemeConfig } from '../config'
 import { sortByDate } from '../utils'
+import type { Post } from '../../types'
+
+export const usePostTitle = (post: Ref<Post>) => {
+  const { locale } = useI18n()
+  return computed(() => {
+    const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+    return post.value[`title_${lang}`] || post.value.title
+  })
+}
 
 /**
  * get post list
@@ -33,6 +43,21 @@ export function usePostList(params: {
   })
 }
 
+/**
+ * get all page
+ * @returns
+ */
+export function usePageList() {
+  const router = useRouter()
+  return computed(() => {
+    const routes = router.getRoutes()
+      .map((i) => {
+        return Object.assign({ path: i.path, excerpt: i.meta.excerpt }, i.meta.frontmatter)
+      })
+    return routes
+  })
+}
+
 /**
  * get prev and next post
  * @param path

package/src/client/composables/tag.ts

@@ -9,11 +9,18 @@ export type Tags = Map<string, {
 /**
  * get utils about tags
  */
-export function useTags() {
+export function useTags(options: {
+  /**
+   * Primary Color
+   */
+  primary: string
+} = {
+  primary: '#0078E7',
+}) {
   const tags = useTag()
 
   const gray = new TinyColor('#999999')
-  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--va-c-primary'))
+  const primaryColor = new TinyColor(options.primary)
 
   const getTagStyle = (count: number) => {
     const counts = Array.from(tags).map(([_, value]) => value.count)

package/src/client/index.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,11 +15,15 @@
       const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
       if (setting === 'dark' || (prefersDark && setting !== 'light'))
         document.documentElement.classList.toggle('dark', true)
+      const locale = localStorage.getItem('valaxy-locale') || 'en'
+      document.documentElement.setAttribute('lang', locale)
     })()
   </script>
 </head>
+
 <body class="font-sans">
   <div id="app"></div>
   <script type="module" src="/main.ts"></script>
 </body>
+
 </html>

package/src/client/layouts/404.vue

@@ -7,7 +7,11 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <ValaxySidebar />
+  <ValaxySidebar>
+    <slot name="sidebar">
+      <YunSidebar />
+    </slot>
+  </ValaxySidebar>
 
   <main class="yun-main" text="center">
     <YunCard m="4" p="10" text="yellow-600">

package/src/client/main.ts

@@ -5,14 +5,12 @@ import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
 
-// markdown css
-import 'star-markdown-css/src/scss/theme/yun.scss'
 // generate user styles
 import '/@valaxyjs/styles'
 
 import 'uno.css'
 
-const routes = setupLayouts(generatedRoutes)
+const routes = setupLayouts(__DEV__ ? generatedRoutes : generatedRoutes.filter(i => !i.meta?.frontmatter.draft))
 
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(

package/src/client/modules/valaxy.ts

@@ -8,6 +8,7 @@ import { createI18n } from 'vue-i18n'
  */
 // import messages from '@intlify/vite-plugin-vue-i18n/messages'
 
+import { useStorage } from '@vueuse/core'
 import { initConfig, valaxyConfigSymbol } from '../config'
 
 import type { UserModule } from '~/types'
@@ -43,12 +44,12 @@ export const install: UserModule = ({ app, router }) => {
   const config = initConfig()
   app.provide(valaxyConfigSymbol, config)
 
-  // const {} = await import()
+  const locale = useStorage('valaxy-locale', config.value.lang || 'en')
 
   // init i18n, by valaxy config
   const i18n = createI18n({
     legacy: false,
-    locale: config.value.lang || 'en',
+    locale: locale.value,
     messages,
   })
   app.use(i18n)

package/src/client/shims.d.ts

@@ -3,11 +3,6 @@ import 'vue-router'
 import type { Post } from 'valaxy'
 import type { Header } from '../node/markdown'
 
-declare interface Window {
-  // extend the window
-  Waline: any
-}
-
 // with vite-plugin-md, markdowns can be treat as Vue components
 declare module '*.md' {
   import type { DefineComponent } from 'vue'

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

@@ -1,5 +1,73 @@
+@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;
+
+      // expand
+      code {
+        display: block;
+      }
+    }
+  }
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem 0;
+  width: 100%;
+  line-height: var(--prism-line-height);
+  user-select: none;
+  overflow: hidden;
+
+  .highlighted {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+}
+
+.dark {
+  .highlight-lines {
+    .highlighted {
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}
+
+.markdown-body {
+  code {
+    color: var(--prism-foreground) !important;
+  }
+}
+
+// prism
 html:not(.dark) {
-  --prism-foreground: #393a34;
+  // text
+  --prism-foreground: #224466;
+
   --prism-background: #f8f8f8;
   --prism-comment: #758575;
   --prism-namespace: #444444;
@@ -7,7 +75,7 @@ html:not(.dark) {
   --prism-punctuation: #80817d;
   --prism-literal: #36acaa;
   --prism-keyword: #248459;
-  --prism-function: #4D9375;
+  --prism-function: #0088bb;
   --prism-deleted: #9a050f;
   --prism-class: #2b91af;
   --prism-builtin: #800000;
@@ -16,20 +84,124 @@ html:not(.dark) {
 }
 
 html.dark {
-  --prism-foreground: #A6ACCD;
+  --prism-foreground: #a6accd;
+
   --prism-background: #242424;
   --prism-namespace: #aaaaaa;
   --prism-comment: #758575;
   --prism-namespace: #444444;
-  --prism-string: #C3E88D;
-  --prism-punctuation: #A6ACCD;
+  --prism-string: #c3e88d;
+  --prism-punctuation: #a6accd;
   --prism-literal: #36acaa;
-  --prism-keyword: #89DDFF;
-  --prism-function: #82AAFF;
+  --prism-keyword: #89ddff;
+  --prism-function: #82aaff;
   --prism-deleted: #9a050f;
   --prism-class: #4ec9b0;
   --prism-builtin: #d16969;
-  --prism-property: #C792EA;
+  --prism-property: #c792ea;
   --prism-regex: #ad502b;
-  --prism-selector: #C3E88D;
+  --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-yml"]:before,
+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/custom-blocks.scss

@@ -0,0 +1,84 @@
+.custom-block.tip,
+.custom-block.info,
+.custom-block.warning,
+.custom-block.danger {
+  margin: 1rem 0;
+  border-left: 6px solid;
+  padding: 0.1rem 1.5rem;
+  overflow-x: auto;
+}
+
+:root {
+  --va-c-text-warning: #544500;
+}
+
+html.dark {
+  --va-c-text-warning: #ffea8a;
+}
+
+.custom-block {
+  &.info {
+    background-color: rgba(200, 200, 200, 0.1);
+  }
+  &.tip {
+    background-color: rgba(200, 200, 200, 0.1);
+    border-color: var(--va-c-primary);
+  }
+
+  &.warning {
+    border-color: #e7c000;
+    color: var(--va-c-text-warning);
+    background-color: rgba(255, 229, 100, 0.3);
+
+    a {
+      color: var(--va-c-text);
+    }
+  }
+}
+
+.custom-block.info {
+  border-color: var(--c-text-light-2);
+}
+
+.custom-block.warning .custom-block-title {
+  color: #b29400;
+}
+
+.custom-block.danger {
+  border-color: #c00;
+  color: #4d0000;
+  background-color: #ffe6e6;
+}
+
+.custom-block.danger .custom-block-title {
+  color: #900;
+}
+
+.custom-block.details {
+  position: relative;
+  display: block;
+  border-radius: 2px;
+  margin: 1.6em 0;
+  padding: 1.6em;
+  background-color: rgba(200, 200, 200, 0.2);
+}
+
+.custom-block.details h4 {
+  margin-top: 0;
+}
+
+.custom-block.details figure:last-child,
+.custom-block.details p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.custom-block.details summary {
+  outline: none;
+  cursor: pointer;
+}
+
+.custom-block-title {
+  margin-bottom: -0.4rem;
+  font-weight: 600;
+}

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

@@ -1,11 +1,8 @@
-/* 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(--va-font-mono);
 
-  --smc-link-color: var(--va-c-link);
   --smc-font-family: var(--va-font-sans);
 }
 

package/src/client/styles/css-vars.scss

@@ -1,7 +1,14 @@
 @use "sass:map";
 @use "./mixins" as *;
 @use "./vars" as *;
-@use "./palette" as *;
+
+$c-primary: #0078E7 !default;
+
+@use "./palette" with (
+  $colors: (
+    'primary': $c-primary,
+  )
+);
 
 // common
 :root {
@@ -14,19 +21,19 @@
 // colors
 :root {
   // palette different with colors
-  @include set-css-var-from-map($palette, 'c');
+  @include set-css-var-from-map(palette.$palette, 'c');
   // primary
-  @include set-css-var-from-map($colors, 'c');
+  @include set-css-var-from-map(palette.$colors, 'c');
 }
 
 // light
 :root {
   color-scheme: light;
-  @include set-css-var-from-map($light);
+  @include set-css-var-from-map(palette.$light);
 }
 
 // dark
 html.dark {
   color-scheme: dark;
-  @include set-css-var-from-map($dark);
+  @include set-css-var-from-map(palette.$dark);
 }

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

@@ -0,0 +1,20 @@
+$languages: zh-CN, en;
+
+html[lang] {
+  .markdown-body {
+    div[lang] {
+      display: none;
+    }
+  }
+}
+
+@each $lang in $languages {
+  html[lang="#{$lang}"] {
+    // only for markdown
+    .markdown-body {
+      div[lang="#{$lang}"] {
+        display: block;
+      }
+    }
+  }
+}