valaxy 0.0.2 → 0.0.5

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

@@ -0,0 +1,60 @@
+import { isClient, useScriptTag } from '@vueuse/core'
+import { onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+export function useWaline(options: {} = {}) {
+  const route = useRoute()
+
+  const { locale } = useI18n()
+
+  let waline: any
+
+  /**
+   * init waline
+   * @param options waline options
+   * @returns
+   */
+  function initWaline(options: {} = {}) {
+    if (!isClient) return
+
+    const defaultOptions = {
+      el: '.comment #waline',
+      lang: locale.value,
+      dark: 'html.dark',
+      emoji: [
+        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
+        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
+        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
+      ],
+      path: route.path,
+    }
+    const walineOptions = Object.assign(defaultOptions, options)
+    // @ts-expect-error waline type
+    return window.Waline(walineOptions)
+  }
+
+  // 直接使用 CDN
+  useScriptTag('//cdn.jsdelivr.net/npm/@waline/client', () => {
+    waline = initWaline(options)
+  })
+
+  watch(() => route.path, (path) => {
+    if (!waline) return
+    waline.update({
+      path,
+    })
+  })
+
+  watch(locale, (lang) => {
+    if (!waline) return
+    waline.update({
+      lang,
+    })
+  })
+
+  onUnmounted(() => {
+    if (!waline) return
+    waline.destroy()
+  })
+}

package/src/client/composables/common.ts

@@ -0,0 +1,27 @@
+import { useRoute } from 'vue-router'
+import type { Post } from 'valaxy'
+import { computed } from 'vue'
+
+import { isDev, useConfig } from 'valaxy'
+
+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
+}
+
+/**
+ * get full url
+ */
+export function useFullUrl() {
+  const config = useConfig()
+  const route = useRoute()
+  const url = computed(() => {
+    const origin = config.value.url || window?.location.origin
+    return origin + route.path
+  })
+  return url
+}

package/src/client/composables/dark.ts

@@ -0,0 +1,4 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

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

@@ -0,0 +1 @@
+export * from './katex'

package/src/client/composables/features/katex.ts

@@ -0,0 +1,15 @@
+import { useHead } from '@vueuse/head'
+
+/**
+ * use katex css cdn
+ */
+export function useKatex() {
+  useHead({
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css',
+      },
+    ],
+  })
+}

package/src/client/composables/helper.ts

@@ -0,0 +1,26 @@
+import { useElementBounding, useIntersectionObserver } from '@vueuse/core'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+/**
+ * trigger show invisible element
+ * @param target
+ * @returns
+ */
+export function useInvisibleElement(target: Ref<HTMLElement>) {
+  const isVisible = ref(false)
+  const { top } = useElementBounding(target)
+  useIntersectionObserver(target, ([{ isIntersecting }]) => {
+    isVisible.value = isIntersecting
+  })
+
+  const show = () => {
+    // scroll when collapse is not visible
+    if (!isVisible.value)
+      window.scrollTo(0, top.value)
+  }
+
+  return {
+    show,
+  }
+}

package/src/client/composables/index.ts

@@ -0,0 +1,17 @@
+// for classify
+export * from './category'
+export * from './post'
+export * from './tag'
+
+// common
+export * from './common'
+export * from './features'
+export * from './helper'
+export * from './dark'
+export * from './layout'
+export * from './widgets'
+
+export * from './sidebar'
+
+// comment
+export * from './comments'

package/src/client/composables/layout.ts

@@ -0,0 +1,7 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function useLayout(layout: string) {
+  const route = useRoute()
+  return computed(() => route.meta.layout === layout)
+}

package/src/client/composables/post.ts

@@ -0,0 +1,96 @@
+import { sortByDate } from 'valaxy'
+import type { StyleValue } from 'vue'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useThemeConfig } from '../../core/config'
+
+/**
+ * get post list
+ * todo: use vue provide/inject to global
+ * @param params
+ * @returns
+ */
+export function usePostList(params: {
+  type?: string
+} = {}) {
+  const router = useRouter()
+  return computed(() => {
+    const routes = router.getRoutes()
+      .filter(i => i.path.startsWith('/posts') && i.meta.frontmatter && i.meta.frontmatter.date)
+      .filter(i => !i.path.endsWith('.html'))
+      .filter(i => !params.type || i.meta.frontmatter.type === params.type)
+      .map((i) => {
+        return Object.assign({ path: i.path, excerpt: i.meta.excerpt }, i.meta.frontmatter)
+      })
+
+    /**
+     * 置顶
+     */
+    const topPosts = sortByDate(routes.filter(i => i.top)).sort((a, b) => b.top! - a.top!)
+    const otherPosts = sortByDate(routes.filter(i => !i.top))
+
+    return topPosts.concat(otherPosts)
+  })
+}
+
+/**
+ * get prev and next post
+ * @param path
+ * @returns
+ */
+export function usePrevNext(path?: string) {
+  const route = useRoute()
+  const p = computed(() => path || route.path)
+  const routes = usePostList()
+
+  const index = computed(() => {
+    let order = -1
+    routes.value.find((item, i) => {
+      if (item.path === p.value) {
+        order = i
+        return true
+      }
+      return false
+    })
+    return order
+  })
+
+  const prev = computed(() => index.value - 1 >= 0 ? routes.value[index.value - 1] : null)
+  const next = computed(() => index.value + 1 < routes.value.length ? routes.value[index.value + 1] : null)
+
+  return [prev, next]
+}
+
+/**
+ * get type card property
+ * todo: test reactive
+ */
+export function usePostProperty(type?: string) {
+  if (!type) {
+    return {
+      color: '',
+      icon: '',
+      styles: {},
+    }
+  }
+
+  const themeConfig = useThemeConfig()
+
+  if (!(type in themeConfig.value.types))
+    type = 'link'
+
+  const color = themeConfig.value.types[type].color
+  const icon = themeConfig.value.types[type].icon
+
+  const styles = computed(() => {
+    return {
+      '--card-c-primary': type && color,
+    } as StyleValue
+  })
+
+  return {
+    color,
+    icon,
+    styles,
+  }
+}

package/src/client/composables/search/algolia.ts

@@ -0,0 +1,114 @@
+import { isClient, useScriptTag } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const algoliasearchUrl = 'https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js'
+const instantsearchUrl = 'https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js'
+
+export function useAlgoliaSearch(config: {
+  appId: string
+  apiKey: string
+  indexName: string
+  hits: {
+    per_page: number
+  }
+}) {
+  if (!isClient) return
+
+  const route = useRoute()
+  const { t } = useI18n()
+
+  useScriptTag(algoliasearchUrl, () => {
+    useScriptTag(instantsearchUrl, () => {
+      const algoliaSettings = config
+      const { indexName, appId, apiKey } = algoliaSettings
+
+      const search = window.instantsearch({
+        indexName,
+        searchClient: window.algoliasearch(appId, apiKey),
+        searchFunction: (helper: { search: () => void }) => {
+          const searchInput = document.querySelector('.search-input') as HTMLInputElement
+          if (searchInput.value)
+            helper.search()
+        },
+      })
+
+      // Registering Widgets
+      search.addWidgets([
+        window.instantsearch.widgets.configure({
+          hitsPerPage: algoliaSettings.hits.per_page || 8,
+        }),
+
+        window.instantsearch.widgets.searchBox({
+          container: '.search-input-container',
+          placeholder: t('search.placeholder'),
+          // Hide default icons of algolia search
+          showReset: false,
+          showSubmit: false,
+          showLoadingIndicator: false,
+          cssClasses: {
+            input: 'search-input',
+          },
+        }),
+
+        window.instantsearch.widgets.stats({
+          container: '#algolia-stats',
+          templates: {
+            text: (data: any) => {
+              const stats = t('search.hits_time', {
+                hits: data.nbHits,
+                time: data.processingTimeMS,
+              })
+              return `<span>${stats}</span>
+          <a href="https://www.algolia.com/" target="_blank" class="algolia-powered">
+            <img src="https://simpleicons.org/icons/algolia.svg" alt="Algolia">
+          </a>
+          `
+            },
+          },
+        }),
+
+        window.instantsearch.widgets.hits({
+          container: '#algolia-hits',
+          templates: {
+            item: (data: any) => {
+              const link = data.permalink ? data.permalink : route.path
+              return `<a href="${link}" class="algolia-hit-item-link">
+              ${data._highlightResult.title.value}
+              <small>${data._highlightResult.slug.value}</small>
+              </a>`
+            },
+            empty: (data: any) => {
+              return `<div id="algolia-hits-empty">${t('search.empty', data.query)}</div>`
+            },
+          },
+          cssClasses: {
+            item: 'algolia-hit-item',
+          },
+        }),
+
+        window.instantsearch.widgets.pagination({
+          container: '#algolia-pagination',
+          scrollTo: false,
+          showFirst: false,
+          showLast: false,
+          templates: {
+            first: '<div i-ri-arrow-left-line></div>',
+            last: '<div i-ri-arrow-right-line></div>',
+            previous: '<div i-ri-arrow-left-s-line></div>',
+            next: '<div i-ri-arrow-right-s-line></div>',
+          },
+          cssClasses: {
+            root: 'pagination',
+            item: 'page-number',
+            link: 'page-number',
+            selectedItem: 'active',
+            disabledItem: 'disabled-item',
+          },
+        }),
+      ])
+
+      search.start()
+    })
+  })
+}

package/src/client/composables/sidebar.ts

@@ -0,0 +1,128 @@
+import { onMounted, onUnmounted, onUpdated } from 'vue'
+
+// todo: refactor
+
+export function useActiveSidebarLinks() {
+  let rootActiveLink: HTMLAnchorElement | null = null
+  let activeLink: HTMLAnchorElement | null = null
+
+  const onScroll = throttleAndDebounce(setActiveLink, 200)
+
+  function setActiveLink(): void {
+    const sidebarLinks = getSidebarLinks()
+    const anchors = getAnchors(sidebarLinks)
+
+    for (let i = 0; i < anchors.length; i++) {
+      const anchor = anchors[i]
+      const nextAnchor = anchors[i + 1]
+
+      const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
+
+      if (isActive) {
+        history.replaceState(null, document.title, hash || ' ')
+        activateLink(hash)
+        return
+      }
+    }
+  }
+
+  function activateLink(hash: string | null): void {
+    deactiveLink(activeLink)
+    deactiveLink(rootActiveLink)
+
+    activeLink = document.querySelector(`.val-toc a[href="${hash}"]`)
+
+    if (!activeLink)
+      return
+
+    activeLink.classList.add('active')
+
+    // also add active class to parent h2 anchors
+    const rootLi = activeLink.closest('.right-sidebar-container > ul > li')
+
+    if (rootLi && rootLi !== activeLink.parentElement) {
+      rootActiveLink = rootLi.querySelector('a')
+      rootActiveLink && rootActiveLink.classList.add('active')
+    }
+    else {
+      rootActiveLink = null
+    }
+  }
+
+  function deactiveLink(link: HTMLAnchorElement | null): void {
+    link && link.classList.remove('active')
+  }
+
+  onMounted(() => {
+    setActiveLink()
+    window.addEventListener('scroll', onScroll)
+  })
+
+  onUpdated(() => {
+    // sidebar update means a route change
+    activateLink(decodeURIComponent(location.hash))
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+}
+
+function getSidebarLinks(): HTMLAnchorElement[] {
+  return [].slice.call(
+    document.querySelectorAll('.val-toc a.toc-link-item'),
+  )
+}
+
+function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
+  return [].slice
+    .call(document.querySelectorAll('.header-anchor'))
+    .filter((anchor: HTMLAnchorElement) =>
+      sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
+    ) as HTMLAnchorElement[]
+}
+
+function getAnchorTop(anchor: HTMLAnchorElement): number {
+  return anchor.parentElement!.offsetTop - 50
+}
+
+function isAnchorActive(
+  index: number,
+  anchor: HTMLAnchorElement,
+  nextAnchor: HTMLAnchorElement,
+): [boolean, string | null] {
+  const scrollTop = window.scrollY
+
+  if (index === 0 && scrollTop === 0)
+    return [true, null]
+
+  if (scrollTop < getAnchorTop(anchor))
+    return [false, null]
+
+  if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor))
+    return [true, decodeURIComponent(anchor.hash)]
+
+  return [false, null]
+}
+
+function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeout: number
+  let called = false
+
+  return () => {
+    if (timeout)
+      clearTimeout(timeout)
+
+    if (!called) {
+      fn()
+      called = true
+      setTimeout(() => {
+        called = false
+      }, delay)
+    }
+    else {
+      // @ts-expect-error browser
+      timeout = setTimeout(fn, delay)
+    }
+  }
+}

package/src/client/composables/tag.ts

@@ -0,0 +1,70 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import { usePostList } from './post'
+
+export type Tags = Map<string, {
+  count: number
+}>
+
+/**
+ * get utils about tags
+ */
+export function useTags() {
+  const tags = useTag()
+
+  const gray = new TinyColor('#999999')
+  const primaryColor = new TinyColor(getComputedStyle(document.documentElement).getPropertyValue('--yun-c-primary'))
+
+  const getTagStyle = (count: number) => {
+    const counts = Array.from(tags).map(([_, value]) => value.count)
+    const max = Math.max(...counts)
+    const min = Math.min(...counts)
+    const range = max - min
+    const percent = (count - min) / range
+    return {
+      '--yun-tag-color': gray.mix(primaryColor, percent * 100).toString(),
+      'fontSize': `${percent * 36 + 12}px`,
+    }
+  }
+
+  return {
+    tags,
+    getTagStyle,
+  }
+}
+
+/**
+ * get tag map
+ * @returns
+ */
+export function useTag() {
+  const posts = usePostList()
+
+  const tagMap: Tags = new Map()
+
+  posts.value.forEach((post) => {
+    if (post.tags) {
+      let tags: string[]
+      if (typeof post.tags === 'string')
+        tags = [post.tags]
+      else
+        tags = post.tags
+
+      tags.forEach((tag) => {
+        if (tagMap.has(tag)) {
+          const item = tagMap.get(tag)!
+          tagMap.set(tag, {
+            ...item,
+            count: item.count + 1,
+          })
+        }
+        else {
+          tagMap.set(tag, {
+            count: 1,
+          })
+        }
+      })
+    }
+  })
+
+  return tagMap
+}

package/src/client/composables/widgets/aplayer.ts

@@ -0,0 +1,23 @@
+import { useScriptTag } from '@vueuse/core'
+import { useHead } from '@vueuse/head'
+
+/**
+ * use MetingJS and Aplayer
+ * https://github.com/MoePlayer/APlayer
+ * https://github.com/metowolf/MetingJS
+ */
+export function useAplayer() {
+  useHead({
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css',
+      },
+    ],
+  })
+
+  // load meting after aplayer
+  useScriptTag('https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js', () => {
+    useScriptTag('https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js')
+  })
+}

package/src/client/composables/widgets/backToTop.ts

@@ -0,0 +1,28 @@
+import { useWindowScroll } from '@vueuse/core'
+import { computed } from 'vue'
+
+/**
+ * You can use href="#" to back to top
+ * @description 你可以使用它来编写自己的 backToTop
+ */
+export function useBackToTop(options: {
+  /**
+   * show backToTop button, when height > offset
+   */
+  offset: number
+} = {
+  offset: 100,
+}) {
+  const { y } = useWindowScroll()
+
+  const percentage = computed(() => {
+    return y.value / document.body.clientHeight
+  })
+
+  const show = computed(() => y.value > options.offset)
+
+  return {
+    percentage,
+    show,
+  }
+}

package/src/client/composables/widgets/codepen.ts

@@ -0,0 +1,12 @@
+import { useHead } from '@vueuse/head'
+
+export function useCodePen() {
+  useHead({
+    script: [
+      {
+        src: 'https://static.codepen.io/assets/embed/ei.js',
+        async: true,
+      },
+    ],
+  })
+}

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

@@ -0,0 +1,3 @@
+export * from './aplayer'
+export * from './backToTop'
+export * from './codepen'

package/src/client/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/pwa-192x192.png">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <meta name="theme-color" content="#ffffff">
+  <script>
+    (function() {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
+      if (setting === 'dark' || (prefersDark && setting !== 'light'))
+        document.documentElement.classList.toggle('dark', true)
+    })()
+  </script>
+</head>
+<body class="font-sans">
+  <div id="app"></div>
+  <script type="module" src="/main.ts"></script>
+</body>
+</html>