valaxy 0.1.0 → 0.2.0

package/src/client/components/ValaxyPagination.vue

@@ -30,21 +30,24 @@ 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>
 
 <template>
   <nav class="pagination">
-    <router-link v-if="curPage !== 1" class="page-number" :to="jumpTo(curPage - 1)">
+    <router-link v-if="curPage !== 1" class="page-number" :to="jumpTo(curPage - 1)" aria-label="prev">
       <div i-ri-arrow-left-s-line />
     </router-link>
 
@@ -60,7 +63,7 @@ const jumpTo = (page: number) => {
       </span>
     </template>
 
-    <router-link v-if="curPage !== totalPages" class="page-number" :to="jumpTo(curPage + 1)">
+    <router-link v-if="curPage !== totalPages" class="page-number" :to="jumpTo(curPage + 1)" aria-label="next">
       <div i-ri-arrow-right-s-line />
     </router-link>
   </nav>
@@ -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,33 +93,32 @@ 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;
     }
   }
 }
-
 </style>

package/src/client/components/ValaxyRightSidebar.vue

@@ -7,13 +7,13 @@ defineProps<{ frontmatter: Post }>()
 </script>
 
 <template>
-  <aside class="right-sidebar val-card relative" m="l-4" text="center">
-    <h2 v-if="frontmatter.toc" m="t-6 b-2" font="serif black">
+  <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>
 
     <div class="right-sidebar-container sticky">
-      <ValaxyToc v-if="frontmatter.toc" />
+      <ValaxyToc v-if="frontmatter.toc !== false" />
 
       <div v-if="$slots.custom" class="custom-container">
         <slot name="custom" />
@@ -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,21 @@ 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']">
+  <aside class="va-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
     <YunSidebar />
-
     <YunConfig />
+    <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,7 +20,7 @@ function getStylesByLevel(level: number) {
 </script>
 
 <template>
-  <ul class="val-toc" p="l-4">
+  <ul class="va-toc" p="l-4">
     <li v-for="header, i in headers" :key="i" :style="getStylesByLevel(header.level)">
       <a class="toc-link-item" :href="`#${header.slug}`">{{ header.title }}</a>
     </li>
@@ -28,14 +28,14 @@ function getStylesByLevel(level: number) {
 </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/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/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/main.ts

@@ -5,14 +5,7 @@ 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'

package/src/client/modules/valaxy.ts

@@ -1,19 +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 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$/, '')
@@ -24,19 +40,24 @@ 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)
 
-  import.meta.hot!.on('valaxy:pageHeaders', (payload) => {
-    if (shouldHotReload(payload))
-      router.currentRoute.value.meta.headers = payload.pageHeaders
-  })
+  // for dev
+  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[]

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);
   }
 }