valaxy 0.1.1 → 0.2.1

package/src/client/components/ValaxyMd.vue

@@ -53,7 +53,7 @@ if (props.frontmatter.codepen)
     <slot v-if="typeof frontmatter.end !== 'undefined'" name="end">
       <div m="y-4" class="end flex justify-center items-center">
         <hr class="line inline-flex" w="full" m="!y-2">
-        <span p="x-4" font="serif" class="whitespace-nowrap">
+        <span p="x-4" font="serif bold" class="whitespace-nowrap">
           {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
         </span>
         <hr class="line inline-flex" w="full" m="!y-2">

package/src/client/components/ValaxyOverlay.vue

@@ -8,7 +8,7 @@ withDefaults(defineProps<{
 
 <template>
   <transition name="fade">
-    <div v-if="show" class="val-overlay backdrop-filter backdrop-blur" />
+    <div v-if="show" class="va-overlay backdrop-filter backdrop-blur" />
   </transition>
 </template>
 
@@ -18,14 +18,14 @@ withDefaults(defineProps<{
 @use "~/styles/vars" as *;
 @use "~/styles/mixins" as *;
 
-.val-overlay {
+.va-overlay {
   background-color: rgba(0, 0, 0, 0.3);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: map.get($z-index, 'sidebar') - 1;
+  z-index: calc(var(--yun-z-sidebar) - 1);
   transition: opacity 0.4s;
 
   display: none;
@@ -37,7 +37,7 @@ withDefaults(defineProps<{
 }
 
 @include mobile {
-  .val-overlay {
+  .va-overlay {
     display: block;
   }
 }

package/src/client/components/ValaxyPagination.vue

@@ -30,14 +30,17 @@ const surLen = computed(() => {
 })
 
 const showPage = (i: number) => {
-  if (i === 1) return true
-  else if (i === totalPages.value) return true
+  if (i === 1)
+    return true
+  else if (i === totalPages.value)
+    return true
   return i > props.curPage - surLen.value && i < props.curPage + surLen.value
 }
 
 const jumpTo = (page: number) => {
   emit('page-change', page)
-  if (page === 1) return '/'
+  if (page === 1)
+    return '/'
   else return `/page/${page}`
 }
 </script>
@@ -69,12 +72,12 @@ const jumpTo = (page: number) => {
 <style lang="scss">
 :root {
   --page-btn-bg-color: rgba(255, 255, 255, 0.5);
-  --page-btn-hover-bg-color: var(--yun-c-primary-lighter);
-  --page-btn-active-bg-color: var(--yun-c-primary-light);
+  --page-btn-hover-bg-color: var(--va-c-primary-lighter);
+  --page-btn-active-bg-color: var(--va-c-primary-light);
 }
 
 .dark {
-  --page-btn-bg-color: var(--yun-c-bg-light);
+  --page-btn-bg-color: var(--va-c-bg-light);
 }
 
 .pagination {
@@ -90,30 +93,30 @@ const jumpTo = (page: number) => {
     width: 2rem;
     height: 2rem;
     margin: 0;
-    transition: background-color var(--yun-transition-duration) ease;
+    transition: background-color var(--va-transition-duration) ease;
   }
 
   .prev, .next, .page-number {
     cursor: pointer;
 
-    color: var(--yun-c-text);
+    color: var(--va-c-text);
     text-decoration: none;
     background-color: var(--page-btn-bg-color);
 
     &:hover {
-      color: var(--yun-c-bg);
+      color: var(--va-c-bg);
       background: var(--page-btn-hover-bg-color);
     }
 
     &:active {
-      color: var(--yun-c-bg);
+      color: var(--va-c-bg);
       background: var(--page-btn-active-bg-color);
     }
 
     &.active {
       font-weight: normal;
       background: var(--page-btn-active-bg-color);
-      color: var(--yun-c-bg);
+      color: var(--va-c-bg);
       cursor: default;
     }
   }

package/src/client/components/ValaxyRightSidebar.vue

@@ -7,7 +7,7 @@ defineProps<{ frontmatter: Post }>()
 </script>
 
 <template>
-  <aside class="right-sidebar val-card relative" m="l-4" text="center">
+  <aside class="right-sidebar va-card relative" m="l-4" text="center">
     <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
       {{ t('sidebar.toc') }}
     </h2>
@@ -24,7 +24,7 @@ defineProps<{ frontmatter: Post }>()
 
 <style lang="scss">
 .right-sidebar {
-  width: var(--yun-sidebar-width-mobile);
+  width: var(--va-sidebar-width-mobile);
 }
 .right-sidebar-container {
   top: 1rem;

package/src/client/components/ValaxySidebar.vue

@@ -11,25 +11,19 @@ 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="val-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
-    <YunSidebar />
-
-    <YunConfig />
+  <aside class="va-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
+    <slot />
   </aside>
 </template>
 
-<style lang="scss">
-@use "sass:map";
-
-@use "~/styles/vars" as *;
-
+<style>
 .menu-btn {
   display: inline-flex;
   position: fixed;
   left: 0.8rem;
   top: 0.6rem;
   line-height: 1;
-  z-index: map.get($z-index, 'menu-btn');
+  z-index: var(--yun-z-menu-btn);
   cursor: pointer;
 }
 </style>

package/src/client/components/ValaxyToc.vue

@@ -20,22 +20,22 @@ function getStylesByLevel(level: number) {
 </script>
 
 <template>
-  <ul class="val-toc" p="l-4">
-    <li v-for="header, i in headers" :key="i" :style="getStylesByLevel(header.level)">
+  <ul class="va-toc" p="l-4">
+    <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>
 </template>
 
 <style lang="scss">
-.val-toc {
+.va-toc {
   top: 10px;
   width: var(--yun-sidebar-width-mobile);
 
-  background-color: var(--yun-c-bg-light);
+  background-color: var(--va-c-bg-light);
 
   font-size: 1rem;
-  font-family: var(--yun-font-serif);
+  font-family: var(--va-font-serif);
   font-weight: 900;
   line-height: 1.6;
 
@@ -44,26 +44,28 @@ function getStylesByLevel(level: number) {
   a {
     display: block;
     color: var(--c-toc-link);
-    transition: color var(--yun-transition-duration);
+    transition: color var(--va-transition-duration);
 
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 
+    font-weight: 900;
+
     &:hover {
-      color: var(--yun-c-text);
+      color: var(--va-c-text);
     }
   }
 
   .toc-link-item {
-    color: var(--yun-c-text-light);
+    color: var(--va-c-text-light);
 
     &:hover {
-      color: var(--yun-c-text);
+      color: var(--va-c-text);
     }
 
     &.active {
-      color: var(--yun-c-primary);
+      color: var(--va-c-primary);
     }
   }
 }

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

@@ -16,7 +16,8 @@ export function useWaline(options: {} = {}) {
    * @returns
    */
   function initWaline(options: {} = {}) {
-    if (!isClient) return
+    if (!isClient)
+      return
 
     const defaultOptions = {
       el: '.comment #waline',
@@ -30,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)
   }
 
@@ -40,21 +40,24 @@ export function useWaline(options: {} = {}) {
   })
 
   watch(() => route.path, (path) => {
-    if (!waline) return
+    if (!waline)
+      return
     waline.update({
       path,
     })
   })
 
   watch(locale, (lang) => {
-    if (!waline) return
+    if (!waline)
+      return
     waline.update({
       lang,
     })
   })
 
   onUnmounted(() => {
-    if (!waline) return
+    if (!waline)
+      return
     waline.destroy()
   })
 }

package/src/client/composables/common.ts

@@ -1,7 +1,7 @@
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
+import { isClient } from '@vueuse/core'
 
-import { isDev } from '../..'
 import type { Post } from '../../types'
 import { useConfig } from '../config'
 
@@ -9,8 +9,6 @@ export function useFrontmatter() {
   const route = useRoute()
   const frontmatter = computed<Post>(() => route.meta.frontmatter)
 
-  // eslint-disable-next-line no-console
-  if (isDev) console.log(frontmatter.value)
   return frontmatter
 }
 
@@ -21,7 +19,8 @@ export function useFullUrl() {
   const config = useConfig()
   const route = useRoute()
   const url = computed(() => {
-    const origin = config.value.url || 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/search/algolia.ts

@@ -13,7 +13,8 @@ export function useAlgoliaSearch(config: {
     per_page: number
   }
 }) {
-  if (!isClient) return
+  if (!isClient)
+    return
 
   const route = useRoute()
   const { t } = useI18n()

package/src/client/composables/sidebar.ts

@@ -30,7 +30,7 @@ export function useActiveSidebarLinks() {
     deactiveLink(activeLink)
     deactiveLink(rootActiveLink)
 
-    activeLink = document.querySelector(`.val-toc a[href="${hash}"]`)
+    activeLink = document.querySelector(`.va-toc a[href="${hash}"]`)
 
     if (!activeLink)
       return
@@ -70,7 +70,7 @@ export function useActiveSidebarLinks() {
 
 function getSidebarLinks(): HTMLAnchorElement[] {
   return [].slice.call(
-    document.querySelectorAll('.val-toc a.toc-link-item'),
+    document.querySelectorAll('.va-toc a.toc-link-item'),
   )
 }
 

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('--yun-c-primary'))
+  const primaryColor = new TinyColor(options.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/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,19 +5,12 @@ import App from './App.vue'
 
 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'
 
-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

@@ -1,20 +1,36 @@
 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 { useStorage } from '@vueuse/core'
 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 +41,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 locale = useStorage('valaxy-locale', config.value.lang || 'en')
 
   // init i18n, by valaxy config
   const i18n = createI18n({
     legacy: false,
-    locale: valaxyConfigRef.value.lang || 'en',
+    locale: locale.value,
     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

@@ -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'
@@ -28,6 +23,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[]