valaxy 0.14.61 → 0.15.0

package/client/components/ValaxyMd.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { onContentUpdated, runContentUpdated, useAplayer, useCodePen, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
 import type { Post } from 'valaxy'
 import { useVanillaLazyLoad } from '../composables/features/vanilla-lazyload'
+import { useCodeGroups } from '../composables/codeGroups'
 
 const props = defineProps<{
   frontmatter: Post
@@ -29,6 +30,7 @@ if (props.frontmatter.codepen)
   useCodePen()
 
 useCopyCode()
+useCodeGroups()
 
 if (typeof props.frontmatter.medium_zoom === 'undefined' || props.frontmatter.medium_zoom)
   useMediumZoom()

package/client/composables/back.ts

@@ -0,0 +1,18 @@
+import { useRouter } from 'vue-router'
+
+/**
+ * back to previous page or home page
+ */
+export function useBack() {
+  const router = useRouter()
+
+  function back() {
+    if (document.referrer && document.referrer !== location.href)
+      router.back()
+    else
+      router.push('/')
+  }
+  return {
+    back,
+  }
+}

package/client/composables/categories.ts

@@ -40,7 +40,6 @@ export function isCategoryList(category: any): category is CategoryList {
  *    }
  *  ]
  * }
- * @returns
  */
 export function useCategories(category?: MaybeRef<string>, posts: Post[] = []) {
   return computed(() => {

package/client/composables/codeGroups.ts

@@ -0,0 +1,52 @@
+import { onContentUpdated } from 'valaxy'
+import { isClient } from '@vueuse/core'
+
+export function useCodeGroups() {
+  if (import.meta.env.DEV) {
+    onContentUpdated(() => {
+      document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
+        Array.from(el.children).forEach((child) => {
+          child.classList.remove('active')
+        })
+        el.children[0].classList.add('active')
+      })
+    })
+  }
+
+  if (isClient) {
+    window.addEventListener('click', (e) => {
+      const el = e.target as HTMLInputElement
+
+      if (el.matches('.vp-code-group input')) {
+        // input <- .tabs <- .vp-code-group
+        const group = el.parentElement?.parentElement
+        if (!group)
+          return
+
+        const i = Array.from(group.querySelectorAll('input')).indexOf(el)
+        if (i < 0)
+          return
+
+        const blocks = group.querySelector('.blocks')
+        if (!blocks)
+          return
+
+        const current = Array.from(blocks.children).find(child =>
+          child.classList.contains('active'),
+        )
+        if (!current)
+          return
+
+        const next = blocks.children[i]
+        if (!next || current === next)
+          return
+
+        current.classList.remove('active')
+        next.classList.add('active')
+
+        const label = group?.querySelector(`label[for="${el.id}"]`)
+        label?.scrollIntoView({ block: 'nearest' })
+      }
+    })
+  }
+}

package/client/composables/common.ts

@@ -14,7 +14,6 @@ export function useFrontmatter() {
 
 /**
  * inject pageData
- * @returns
  */
 export function useData(): PageData {
   const value = inject<PageData>('pageData', {} as any)

package/client/composables/decrypt.ts

@@ -3,7 +3,6 @@ import { useSiteConfig } from 'valaxy'
 /**
  * @see https://developer.mozilla.org/zh-CN/docs/Web/API/SubtleCrypto/deriveKey#pbkdf2_2
  * @param password
- * @returns
  */
 export function getKeyMaterial(password: string) {
   const enc = new TextEncoder()

package/client/composables/helper.ts

@@ -5,7 +5,6 @@ import { ref } from 'vue'
 /**
  * trigger show invisible element
  * @param target
- * @returns
  */
 export function useInvisibleElement(target: Ref<HTMLElement | undefined>) {
   const isVisible = ref(false)

package/client/composables/index.ts

@@ -17,4 +17,5 @@ export * from './outline'
 export * from './body-scroll-lock'
 
 // utils
+export * from './back'
 export * from './decrypt'

package/client/composables/outline/headers.ts

@@ -64,7 +64,6 @@ function addToParent(
 
 /**
  * export headers & handleClick to generate outline
- * @returns
  */
 export function useOutline() {
   const frontmatter = useFrontmatter()
@@ -104,7 +103,6 @@ export function useOutline() {
 
 /**
  * get headers from document directly
- * @returns
  */
 export function getHeaders(range: Exclude<DefaultTheme.Config['outline'], false>) {
   const headers = Array.from(document.querySelectorAll('.markdown-body :where(h1,h2,h3,h4,h5,h6)'))

package/client/composables/post.ts

@@ -16,7 +16,6 @@ export function usePostTitle(post: ComputedRef<Post>) {
 
 /**
  * get all page in 'pages' folder
- * @returns
  */
 export function usePageList() {
   return computed<Post[]>(() => {
@@ -37,8 +36,6 @@ export function usePageList() {
 /**
  * get post list in 'pages/posts' folder
  * todo: use vue provide/inject to global
- * @param params
- * @returns
  */
 export function usePostList(params: {
   type?: string
@@ -67,7 +64,6 @@ export function usePostList(params: {
 /**
  * get prev and next post
  * @param path
- * @returns
  */
 export function usePrevNext(path?: string) {
   const route = useRoute()

package/client/composables/tags.ts

@@ -9,7 +9,6 @@ export type Tags = Map<string, {
 /**
  * get tag map
  * [tagName]: count
- * @returns
  */
 export function useTags() {
   const site = useSiteStore()

package/client/config.ts

@@ -15,7 +15,6 @@ import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 /**
  * parse valaxy config
  * @param data
- * @returns
  */
 function parse<T = any>(data: string): T {
   const parsed = JSON.parse(data)
@@ -55,7 +54,6 @@ export function initContext() {
 /**
  * get valaxy config
  * @public
- * @returns
  */
 export function useValaxyConfig<ThemeConfig = DefaultTheme.Config>() {
   const config = inject<ComputedRef<ValaxyConfig<ThemeConfig>>>(valaxyConfigSymbol)
@@ -67,7 +65,6 @@ export function useValaxyConfig<ThemeConfig = DefaultTheme.Config>() {
 /**
  * alias for useSite
  * @public
- * @returns
  */
 export function useConfig<ThemeConfig = DefaultTheme.Config>() {
   return useValaxyConfig<ThemeConfig>()
@@ -76,7 +73,6 @@ export function useConfig<ThemeConfig = DefaultTheme.Config>() {
 /**
  * get valaxy config
  * @public
- * @returns
  */
 export function useSiteConfig<ThemeConfig = DefaultTheme.Config>() {
   const config = useValaxyConfig<ThemeConfig>()
@@ -88,7 +84,6 @@ export function useSiteConfig<ThemeConfig = DefaultTheme.Config>() {
  * if you want to: import { useThemeConfig } from 'valaxy'
  * you need pass themeConfig by yourself
  * @internal
- * @returns
  */
 export function useThemeConfig<ThemeConfig = DefaultTheme.Config>() {
   const config = useValaxyConfig<ThemeConfig>()

package/client/layouts/404.vue

@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useBack } from '..'
 
-const router = useRouter()
 const { t } = useI18n()
-
-function back() {
-  if (document.referrer)
-    router.back()
-  else
-    router.push('/')
-}
+const { back } = useBack()
 </script>
 
 <template>
-  <main class="va-main" text="center">
-    <div p="10" text="yellow-600">
-      <div text-6xl>
-        <div i-ri-alarm-warning-line inline-block />
-      </div>
-      <div m="2" text="xl">
-        {{ t('not-found') }}
-      </div>
-      <router-view />
-      <div>
-        <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="back">
-          {{ t('button.back') }}
-        </button>
-      </div>
+  <main class="va-main w-full h-screen" text="center" flex="~ col" justify="center" items="center">
+    <div class="not-found" title="404" font="mono">
+      404
+    </div>
+
+    <router-view />
+
+    <div>
+      <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="back">
+        {{ t('button.back') }}
+      </button>
     </div>
   </main>
 </template>
+
+<style lang="scss" scoped>
+// inspired by https://codepen.io/pgalor/pen/OeRWJQ
+.not-found {
+  font-size: 10rem;
+  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+}
+</style>

package/client/stores/app.ts

@@ -1,12 +1,17 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { useToggle } from '@vueuse/core'
+import { ref } from 'vue'
 
 export const useAppStore = defineStore('app', () => {
+  const showLoading = ref(true)
+
   const [isSidebarOpen, toggleSidebar] = useToggle(false)
   // right sidebar with toc
   const [isRightSidebarOpen, toggleRightSidebar] = useToggle(false)
 
   return {
+    showLoading,
+
     isSidebarOpen,
     toggleSidebar,
 

package/client/styles/common/code.scss

@@ -41,64 +41,64 @@ html:not(.dark) .vp-code-dark {
     position: relative;
     background-color: var(--va-code-block-bg);
     overflow-x: auto;
-
-    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;
-
-      text-align: left;
-      white-space: pre;
-      word-spacing: normal;
-      word-break: normal;
-      word-wrap: normal;
-      -moz-tab-size: 4;
-      -o-tab-size: 4;
-      tab-size: 4;
-      -webkit-hyphens: none;
-      -moz-hyphens: none;
-      -ms-hyphens: none;
-      hyphens: none;
-    }
-
-    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%;
+  [class*='language-'] pre,
+  [class*='language-'] code {
+    /*rtl:ignore*/
+    direction: ltr;
+    /*rtl:ignore*/
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  [class*='language-'] pre {
+    position: relative;
+    z-index: 1;
+    margin: 0;
+    padding: 20px 0;
+    background: transparent;
+    overflow-x: auto;
+  }
+
+  [class*='language-'] code {
+    display: block;
+    padding: 0 24px;
+    width: fit-content;
+    min-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;
+    color: var(--va-code-block-color);
+    transition: color 0.5s;
+  }
 
-    .highlighted {
-      background-color: var(--va-code-line-highlight-color);
-      transition: background-color 0.5s;
-    }
+  [class*='language-'] code .highlighted {
+    background-color: var(--va-code-line-highlight-color);
+    transition: background-color 0.5s;
+    margin: 0 -24px;
+    padding: 0 24px;
+    width: calc(100% + 2 * 24px);
+    display: inline-block;
+  }
+
+  [class*='language-'] code .highlighted.error {
+    background-color: var(--va-code-line-error-color);
+  }
+
+  [class*='language-'] code .highlighted.warning {
+    background-color: var(--va-code-line-warning-color);
   }
 
   // copy

package/client/styles/common/markdown.scss

@@ -1,43 +1,17 @@
 @use "sass:map";
 
-// for anchor
-h1:hover .header-anchor,
-h1:focus .header-anchor,
-h2:hover .header-anchor,
-h2:focus .header-anchor,
-h3:hover .header-anchor,
-h3:focus .header-anchor,
-h4:hover .header-anchor,
-h4:focus .header-anchor,
-h5:hover .header-anchor,
-h5:focus .header-anchor,
-h6:hover .header-anchor,
-h6:focus .header-anchor {
-  visibility: visible;
-  opacity: 1;
-}
-
-a.header-anchor {
-  float: left;
-  margin-top: 0.125em;
-  margin-left: -0.87em;
-  padding-right: 0.23em;
-  font-size: 0.85em;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity var(--va-transition-duration);
-
-  &::before {
-    content: none;
+.markdown-body {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    font-weight: 600;
+    outline: none;
   }
-}
 
-a.header-anchor:hover,
-a.header-anchor:focus {
-  text-decoration: none;
-}
-
-.markdown-body {
   figure {
     text-align: center;
   }
@@ -48,4 +22,84 @@ a.header-anchor:focus {
       height: 1px;
     }
   }
+
+  // custom block
+  .custom-block {
+    margin: 16px 0;
+
+    p {
+      margin: 8px 0;
+      line-height: 24px;
+    }
+
+    p:first-child {
+      margin: 0;
+    }
+  }
+
+  .custom-block div[class*='language-'] {
+    margin: 8px 0;
+    border-radius: 8px;
+  }
+
+  .custom-block div[class*='language-'] code {
+    font-weight: 400;
+    background-color: transparent;
+  }
+
+  .custom-block .vp-code-group .tabs {
+    margin: 0;
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+
+// header-anchor
+.markdown-body {
+  .header-anchor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-left: -0.87em;
+    font-weight: 500;
+    user-select: none;
+    opacity: 0;
+    text-decoration: none;
+    transition:
+      color 0.25s,
+      opacity 0.25s;
+  }
+
+  .header-anchor:before {
+    content: var(--va-header-anchor-symbol, '#');
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  h1:hover .header-anchor,
+  h1 .header-anchor:focus,
+  h2:hover .header-anchor,
+  h2 .header-anchor:focus,
+  h3:hover .header-anchor,
+  h3 .header-anchor:focus,
+  h4:hover .header-anchor,
+  h4 .header-anchor:focus,
+  h5:hover .header-anchor,
+  h5 .header-anchor:focus,
+  h6:hover .header-anchor,
+  h6 .header-anchor:focus {
+    opacity: 1;
+  }
 }
+
+
+@media (min-width: 768px) {
+  .markdown-body h1 {
+    letter-spacing: -0.02em;
+    line-height: 40px;
+    font-size: 32px;
+  }
+}
+

package/client/styles/components/code-group.scss

@@ -0,0 +1,85 @@
+.vp-code-group {
+  margin-top: 16px;
+}
+
+.vp-code-group .tabs {
+  position: relative;
+  display: flex;
+  margin-right: -24px;
+  margin-left: -24px;
+  padding: 0 12px;
+  background-color: var(--va-code-tab-bg);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px var(--va-code-tab-divider);
+}
+
+@media (min-width: 640px) {
+  .vp-code-group .tabs {
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 8px 8px 0 0;
+  }
+}
+
+.vp-code-group .tabs input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.vp-code-group .tabs label {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px solid transparent;
+  padding: 0 12px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--va-code-tab-text-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.25s;
+}
+
+.vp-code-group .tabs label::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 2px;
+  content: '';
+  background-color: transparent;
+  transition: background-color 0.25s;
+}
+
+.vp-code-group label:hover {
+  color: var(--va-code-tab-hover-text-color);
+}
+
+.vp-code-group input:checked + label {
+  color: var(--va-code-tab-active-text-color);
+}
+
+.vp-code-group input:checked + label::after {
+  background-color: var(--va-code-tab-active-bar-color);
+}
+
+.vp-code-group div[class*='language-'],
+.vp-block {
+  display: none;
+  margin-top: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.vp-code-group div[class*='language-'].active,
+.vp-block.active {
+  display: block;
+}
+
+.vp-block {
+  padding: 20px 24px;
+}