valaxy 0.0.9 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy",
-  "version": "0.0.9",
+  "version": "0.1.2",
   "description": "📄 Vite & Vue powered static blog generator.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,50 +40,51 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
-    "@iconify-json/carbon": "^1.1.1",
+    "@iconify-json/carbon": "^1.1.3",
     "@iconify-json/ri": "^1.1.1",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@unocss/reset": "^0.30.8",
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
+    "@unocss/reset": "^0.30.11",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vueuse/core": "^8.2.3",
+    "@vueuse/core": "^8.2.4",
     "@vueuse/head": "^0.7.5",
     "consola": "^2.15.3",
     "critters": "^0.0.16",
     "dayjs": "^1.11.0",
     "fast-deep-equal": "^3.1.3",
     "katex": "^0.15.3",
-    "markdown-it-anchor": "^8.4.1",
+    "markdown-it-anchor": "^8.5.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.0",
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-prism": "^2.2.3",
     "markdown-it-table-of-contents": "^0.6.0",
+    "markdown-it-task-lists": "^2.1.1",
     "nprogress": "^0.2.0",
     "open": "^8.4.0",
     "pinia": "^2.0.13",
     "prism-theme-vars": "^0.2.2",
-    "sass": "^1.49.10",
-    "star-markdown-css": "^0.3.0",
+    "sass": "^1.49.11",
+    "star-markdown-css": "^0.3.1",
     "unconfig": "^0.3.2",
-    "vue": "^3.2.31",
-    "vue-demi": "^0.12.5",
-    "vue-i18n": "^9.1.9",
-    "vue-router": "^4.0.14",
-    "yargs": "^17.4.0",
-    "unocss": "^0.30.8",
+    "unocss": "^0.30.11",
     "unplugin-vue-components": "^0.18.5",
     "vite": "^2.9.1",
-    "vite-ssg": "^0.19.0",
+    "vite-plugin-inspect": "^0.4.3",
     "vite-plugin-md": "^0.12.4",
     "vite-plugin-pages": "^0.22.0",
-    "vite-plugin-inspect": "^0.4.3",
     "vite-plugin-pwa": "^0.11.13",
     "vite-plugin-vue-layouts": "^0.6.0",
-    "vite-ssg-sitemap": "^0.2.0"
+    "vite-ssg": "^0.19.1",
+    "vite-ssg-sitemap": "^0.2.0",
+    "vue": "^3.2.31",
+    "vue-demi": "^0.12.5",
+    "vue-i18n": "^9.1.9",
+    "vue-router": "^4.0.14",
+    "yargs": "^17.4.0"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsup --splitting",
+    "dev": "tsup --watch --splitting",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "preview": "vite preview",
     "preview-https": "serve dist",

package/src/client/components/PostCard.vue

@@ -13,7 +13,7 @@ const { icon, styles } = usePostProperty(props.post.type)
 </script>
 
 <template>
-  <YunCard m="y-4 auto" class="post-card" :style="styles">
+  <YunCard m="b-4 auto" class="post-card" :style="styles">
     <div v-if="post.top" class="post-top-icon">
       <div i-ri-pushpin-line />
     </div>

package/src/client/components/PostList.vue

@@ -19,7 +19,7 @@ const displayedPosts = computed(() => posts.value.slice((props.curPage - 1) * pa
 </script>
 
 <template>
-  <ul w="full" p="x-4 lt-sm:0">
+  <div w="full" p="x-4 lt-sm:0">
     <template v-if="!displayedPosts.length">
       <div py2 op50>
         博主还什么都没写哦～
@@ -29,22 +29,22 @@ const displayedPosts = computed(() => posts.value.slice((props.curPage - 1) * pa
     <Transition v-for="route, i in displayedPosts" :key="i" name="fade">
       <PostCard :post="route" />
     </Transition>
-  </ul>
+  </div>
 
   <ValaxyPagination :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
 </template>
 
-<style lang="scss">
+<style>
 .yun-card-actions {
   border-top: 1px solid rgba(122, 122, 122, 0.15);
   min-height: 2.5rem;
 }
 
 .post-categories {
-  color: var(--yun-c-text);
+  color: var(--va-c-text);
 }
 
 .post-tag {
-  color: var(--yun-c-text);
+  color: var(--va-c-text);
 }
 </style>

package/src/client/components/ValaxyCopyright.vue

@@ -57,7 +57,7 @@ const licenseHtml = computed(() => {
   font-size: 0.9rem;
   padding: 0.5rem 1rem;
   border-left: 4px solid #ff5252;
-  background-color: var(--yun-c-bg-dark);
+  background-color: var(--va-c-bg-dark);
   list-style: none;
   word-break: break-all;
   position: relative;

package/src/client/components/ValaxyFooter.vue

@@ -21,7 +21,7 @@ const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.reposito
 </script>
 
 <template>
-  <footer class="val-footer p-4 opacity-80" text="center sm">
+  <footer class="va-footer p-4" text="center sm" style="color:var(--va-c-text-light)">
     <div v-if="themeConfig.footer.beian.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
         {{ themeConfig.footer.beian.icp }}

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,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/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',
@@ -40,21 +41,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,7 @@ export function useFullUrl() {
   const config = useConfig()
   const route = useRoute()
   const url = computed(() => {
-    const origin = config.value.url || window?.location.origin
+    const origin = config.value.url || (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

@@ -13,7 +13,7 @@ export function useTags() {
   const tags = useTag()
 
   const gray = new TinyColor('#999999')
-  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--yun-c-primary'))
+  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--va-c-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

@@ -7,12 +7,7 @@ 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

@@ -28,6 +28,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);
   }
 }