valaxy-theme-hairy 0.2.2 → 1.0.0

package/utils/index.ts

@@ -1,10 +1,4 @@
-import { isNumber, isString } from 'lodash-es'
-
-/**
- * 跳转到新的页面
- * @param url 跳转url
- */
-export const ejectWindow = (url: string) => {
+export function ejectWindow(url: string) {
   const link = document.createElement('a')
   link.href = url
   link.target = '_blank'
@@ -12,7 +6,26 @@ export const ejectWindow = (url: string) => {
   link.remove()
 }
 
-export const getArchiveLink = (year?: string, month?: string) => {
+export function riposte<T>(...args: [cond: boolean, value: T][]) {
+  for (const [cond, value] of args) {
+    if (cond)
+      return value
+  }
+}
+
+export function toArray<T>(value: T | T[]): T[] {
+  if (Array.isArray(value))
+    return value as any
+  else return [value].filter(Boolean) as any
+}
+
+export function removeTags(content = '') {
+  return content
+    .replace(/<\/?[^>]*>/g, '')
+    .replace(/[|]*\n/, '')
+}
+
+export function getArchiveLink(year?: string, month?: string) {
   if (!year)
     return '/archives/'
   if (!month)
@@ -22,34 +35,3 @@ export const getArchiveLink = (year?: string, month?: string) => {
 
   return ''
 }
-
-export const toArr = <T>(arr: T[] | T): T[] => {
-  if (Array.isArray(arr))
-    return arr as any
-  else return [arr].filter(Boolean) as any
-}
-
-export type AtWillNumber = string | number
-
-export const atWillToUnit = (value: AtWillNumber, unit = 'px') => {
-  if (!(isString(value) || isNumber(value)))
-    return ''
-  return isString(value) && /\D/g.test(value) ? value : value + unit
-}
-
-export interface PromiseResolver<T = void> extends Promise<T> {
-  resolve: (value: T) => void
-  reject: Function
-}
-export function createPromise<T>(): PromiseResolver<T> {
-  let resolve
-  let reject
-  // eslint-disable-next-line promise/param-names
-  const promise: any = new Promise((_r, _j) => {
-    resolve = _r
-    reject = _j
-  })
-  promise.resolve = resolve
-  promise.reject = reject
-  return promise as PromiseResolver<T>
-}

package/valaxy.config.ts

@@ -1,29 +1,26 @@
-import { defineTheme } from 'valaxy'
-import type { HairyTheme } from 'valaxy-theme-hairy'
-import markdownFurigana from 'furigana-markdown-it'
-import addonHairy from './node/addon-hairy'
-import addonImages from './node/addon-images'
-import addonStatistics from './node/addon-statistics'
-import addonToc from './node/addon-toc'
-export default defineTheme<HairyTheme>((options) => {
-  const images = addonImages(options)
-  const hairy = addonHairy(options)
+import type { DefaultTheme, ValaxyTheme } from 'valaxy'
+import { defineTheme, mergeValaxyConfig } from 'valaxy'
+import { addonAlgolia } from 'valaxy-addon-algolia'
+import { withImageConfig, withThemeConfig } from './node'
+import type { ThemeConfig } from './types'
 
-  return {
-    vite: images.vite,
-    pages: hairy.pages,
-    unocss: hairy.unocss,
-    extendMd(ctx) {
-      hairy.extendMd?.(ctx)
-      images.extendMd?.(ctx)
-      addonStatistics().extendMd?.(ctx)
-      addonToc().extendMd?.(ctx)
-    },
-    markdown: {
-      config(md) {
-        md.use(markdownFurigana())
+export default defineTheme<ThemeConfig>((options) => {
+  let config: ValaxyTheme<ThemeConfig & DefaultTheme.Config> = {
+    addons: [
+      addonAlgolia(),
+    ],
+    themeConfig: {
+      valaxyDarkOptions: {
+        useDarkOptions: { disableTransition: false },
+        circleTransition: true,
       },
+      outline: 2,
+      theme: 'dark',
     },
   }
-})
 
+  config = mergeValaxyConfig(config, withImageConfig(options))
+  config = mergeValaxyConfig(config, withThemeConfig(options))
+
+  return config
+})

package/@types/markdown-it.d.ts

@@ -1 +0,0 @@
-declare module "*-markdown-it"

package/@types/markdown-toc.d.ts

@@ -1 +0,0 @@
-declare module "markdown-toc"

package/@types/types.d.ts

@@ -1 +0,0 @@
-declare const __ALGOLIA__: boolean

package/@types/valaxy.d.ts

@@ -1,10 +0,0 @@
-declare module 'valaxy' {
-  export interface Post {
-    image: string
-    durations: Omit<import('reading-time').ReadTimeResults, 'text'>
-    length: number
-  }
-}
-
-
-export {}

package/components/HairyAlgoliaSearchBox.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import docsearch from '@docsearch/js'
-import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
-import { onMounted } from 'vue'
-import type { AlgoliaSearchOptions } from 'valaxy'
-import { useConfig } from 'valaxy'
-import { useRoute, useRouter } from 'vue-router'
-
-const router = useRouter()
-const route = useRoute()
-const config = useConfig()
-
-onMounted(() => {
-  initialize(config.value.search.algolia)
-  setTimeout(poll, 16)
-})
-
-/**
- * poll until open
- */
-function poll() {
-  // programmatically open the search box after initialize
-  const e = new Event('keydown') as any
-
-  e.key = 'k'
-  e.metaKey = true
-
-  window.dispatchEvent(e)
-
-  setTimeout(() => {
-    if (!document.querySelector('.DocSearch-Modal'))
-      poll()
-  }, 16)
-}
-
-function initialize(userOptions: AlgoliaSearchOptions) {
-  // note: multi-lang search support is removed since the theme
-  // doesn't support multiple locales as of now.
-  const options = Object.assign({}, userOptions, {
-    container: '#docsearch',
-    navigator: {
-      navigate({ itemUrl }: { itemUrl: string }) {
-        const { pathname: hitPathname } = new URL(
-          window.location.origin + itemUrl,
-        )
-        // router doesn't handle same-page navigation so we use the native
-        // browser location API for anchor navigation
-        if (route.path === hitPathname)
-          window.location.assign(window.location.origin + itemUrl)
-
-        else
-          router.push(itemUrl)
-      },
-    },
-    transformItems(items: DocSearchHit[]) {
-      return items.map((item) => {
-        return Object.assign({}, item, {
-          url: getRelativePath(item.url),
-        })
-      })
-    },
-    hitComponent({ hit, children }: { hit: DocSearchHit; children: any }) {
-      const relativeHit = hit.url.startsWith('http')
-        ? getRelativePath(hit.url as string)
-        : hit.url
-      return {
-        __v: null,
-        type: 'a',
-        ref: undefined,
-        constructor: undefined,
-        key: undefined,
-        props: {
-          href: hit.url,
-          onClick(event: MouseEvent) {
-            if (isSpecialClick(event))
-              return
-
-            // we rely on the native link scrolling when user is already on
-            // the right anchor because Router doesn't support duplicated
-            // history entries.
-            if (route.path === relativeHit)
-              return
-
-            // if the hits goes to another page, we prevent the native link
-            // behavior to leverage the Router loading feature.
-            if (route.path !== relativeHit)
-              event.preventDefault()
-
-            router.push(relativeHit)
-          },
-          children,
-        },
-      }
-    },
-  })
-  docsearch(options as any)
-}
-
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1
-    || event.altKey
-    || event.ctrlKey
-    || event.metaKey
-    || event.shiftKey
-  )
-}
-
-function getRelativePath(absoluteUrl: string) {
-  const { pathname, hash } = new URL(absoluteUrl)
-  return pathname + hash
-}
-</script>
-
-<template>
-  <div id="docsearch" />
-</template>
-

package/components/HairyBackToTop.vue

@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { useBackToTop } from 'valaxy'
-
-const { show, percentage } = useBackToTop({ offset: 100 })
-
-const radius = 48
-const circumference = 2 * radius * Math.PI
-
-const strokeOffset = computed(() => {
-  // 周长
-  const val = (1 - percentage.value) * circumference
-  return val < 0 ? 0 : val
-})
-
-function toTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-</script>
-
-<template>
-  <a class="back-to-top cursor-pointer" :class="show && 'show'" @click="toTop">
-    <div w="8" h="8" i-ri-arrow-up-s-line />
-    <svg class="progress-circle-container" viewBox="0 0 100 100">
-      <circle :stroke-dasharray="`${circumference} ${circumference}`" :stroke-dashoffset="strokeOffset" class="progress-circle" cx="50" cy="50" :r="radius" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-    </svg>
-  </a>
-</template>
-
-<style lang="scss">
-@use "sass:map";
-
-.back-to-top {
-  position: fixed;
-  width: 32px;
-  height: 32px;
-  right: 0rem;
-  bottom: 1.5rem;
-  z-index: 10;
-  opacity: 0;
-  pointer-events: none;
-
-  color: var(--hy-c-primary);
-  transform: translateX(0) rotate(270deg);
-  // override yun-icon-btn transition
-  transition: transform var(--va-transition-duration), opacity var(--va-transition-duration-fast) !important;
-
-  &.show {
-    transform: translateX(-32px) rotate(360deg);
-    opacity: 1;
-    pointer-events: fill;
-  }
-
-  .icon {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-  > div {
-    margin-bottom: -2em;
-  }
-}
-
-.progress-circle {
-  transition: 0.3s stroke-dashoffset;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-
-  &-container {
-    position: absolute;
-  }
-}
-</style>

package/components/HairyFooterFish.vue

@@ -1,29 +0,0 @@
-<!-- eslint-disable no-new -->
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-import { useScriptTag } from '@vueuse/core'
-import { RENDERER } from './lib/fish'
-
-const fishContainer = ref()
-
-const tag = useScriptTag('https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js')
-
-let renderer: RENDERER
-
-function reset() {
-  const color = 'hsl(0, 0%, 95%)'
-  if (!renderer)
-    renderer = new RENDERER(color)
-  else
-    renderer.setColor(color)
-}
-
-onMounted(() => {
-  tag.load()
-    .then(reset)
-})
-</script>
-
-<template>
-  <div id="jsi-flying-fish-container" ref="fishContainer" style="margin-top: -60px;"></div>
-</template>

package/components/HairyLayout.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  header?: {
-    title?: string
-    headline?: string
-    description?: string
-  }
-}>()
-</script>
-
-<template>
-  <div class="HairyLayout min-h-80vh">
-    <HairyNav />
-    <HairyHeader v-bind="header">
-      <template #description>
-        <slot name="header-description" />
-      </template>
-    </HairyHeader>
-    <HairyBody>
-      <slot />
-
-      <template v-if="$slots['body-slide']" #slide>
-        <slot name="body-slide" />
-      </template>
-    </HairyBody>
-    <HairyFooter class="z-1 relative" />
-  </div>
-</template>

package/components/HairyLink.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <span class="HairyLink cursor-pointer border-b border-dashed hover:border-primary hover:text-primary transition-all">
-    <slot />
-  </span>
-</template>
-
-<style lang="scss" scoped></style>

package/components/HairyLinks.vue

@@ -1,69 +0,0 @@
-<script lang="ts" setup>
-import { defineProps } from 'vue'
-defineProps<{
-  links?: {
-    name: string
-    url: string
-    image: string
-    color: string
-    desc?: string
-  }[]
-}>()
-</script>
-
-<template>
-  <div class="min-h-30vh">
-    <div class="links">
-      <div
-        v-for="(item, index) in links" :key="index" class="link-block flex items-center py-0.5rem px-1rem rounded-lg"
-        :style="{ '--block-color': item.color }"
-      >
-        <a :href="item.url" class="w-4rem h-4rem">
-          <HairyImage class="w-full h-full rounded-xl" :src="item.image" />
-        </a>
-        <div class="pl-1rem flex-1">
-          <a :href="item.url" class="font-bold text-lg title">
-            {{ item.name }}
-          </a>
-          <div class="max-w-180px text-sm my-0.5rem truncate desc">
-            {{ item.desc }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.link-block {
-  border: 0.0625rem solid #f7f7f7;
-  box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.1);
-  --bg-color: var(--block-color, #666);
-  @apply transition-all;
-
-  .title {
-    color: var(--block-color);
-  }
-}
-
-.dark .link-block {
-  background: rgba($color: #989898, $alpha: 0.1);
-}
-
-.links .link-block:hover {
-  background-color: var(--bg-color);
-  box-shadow: 0 0.125rem 1.25rem var(--bg-color);
-  border-color: var(--bg-color);
-
-  .title,
-  .desc {
-    color: #fff;
-  }
-}
-
-.links {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 300px);
-  gap: 24px;
-}
-</style>

package/components/HairyMeting.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import { useAplayer, useThemeConfig } from 'valaxy'
-
-import type { HairyTheme } from 'valaxy-theme-hairy'
-
-const config = useThemeConfig<HairyTheme>()
-
-if (config.value.meting)
-  useAplayer()
-</script>
-
-<template>
-  <meting-js
-    v-if="config.meting && config.meting.fixed !== false"
-    v-bind="config.meting"
-    :fixed="true"
-  >
-  </meting-js>
-</template>

package/components/HairyNav.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { useScroll, whenever } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useHeaderHeight } from '../hooks/useHeaderHeight'
-
-const headerHeight = useHeaderHeight()
-const cache = ref<'top' | 'bottom'>('top')
-const scroll = useScroll(document)
-
-whenever(() => scroll.directions.top, () => {
-  cache.value = 'top'
-})
-whenever(() => scroll.directions.bottom, () => {
-  cache.value = 'bottom'
-})
-
-const show = computed(() => {
-  return scroll.y.value < (headerHeight.value / 2) || cache.value === 'top'
-})
-</script>
-
-<template>
-  <div class="HairyNav fixed w-full h-3.125rem lt-sm:h-3.5rem top-0 z-20 opacity-0 transition-opacity duration-200" :class="[show && 'opacity-100']">
-    <div class="mx-auto breakpoint flex relative z-1 h-full">
-      <div class="flex items-center lt-sm:order-1 lt-sm:flex-1 justify-center">
-        <HairyNavTitle />
-      </div>
-      <div class="flex items-center sm:flex-1">
-        <HairyNavMenu class="sm:hidden pl-2 pr-13" />
-        <HairyMenu class="lt-sm:hidden" />
-      </div>
-      <div class="flex-center order-1">
-        <HairyNavToggleDark />
-        <HairyNavSearch />
-      </div>
-    </div>
-    <HairyNavBackground />
-  </div>
-</template>
-
-<style>
-</style>

package/components/HairyNavBackground.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="HairyNavBackground transition-colors absolute inset-0 bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 blur-5" />
-</template>
-
-<style>
-
-</style>

package/components/HairyNavMenu.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { useContext } from '../hooks/useContext'
-
-const { drawerShow } = useContext()
-</script>
-
-<template>
-  <button class="yun-icon-btn lt-sm:text-size-xl" @click="drawerShow = true">
-    <div i="ri-menu-fill" />
-  </button>
-</template>

package/components/HairyNavToggleDark.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { isDark, toggleDark } from 'valaxy'
-
-const { t } = useI18n()
-const themeTitle = computed(() => {
-  return isDark.value ? t('button.toggle_light') : t('button.toggle_dark')
-})
-</script>
-
-<template>
-  <button class="yun-icon-btn bg-light-1 p-1 dark:bg-transparent rounded-5 lt-sm:text-size-xl" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
-    <div i="ri-sun-line dark:ri-moon-line" />
-  </button>
-</template>

package/components/HairyPostToggleLayout.vue

@@ -1,33 +0,0 @@
-<script lang="ts" setup>
-import { useScroll } from '@vueuse/core'
-import { computed } from 'vue'
-import { usePostLayout } from '../hooks/usePostLayout'
-import { useHeaderHeight } from '../hooks/useHeaderHeight'
-import type { HairyPostLayout } from '..'
-
-const layout = usePostLayout()
-const layouts = [
-  { layout: 'image:slice:reverse' as HairyPostLayout, icon: 'i-fluent-text-align-distributed-24-filled' },
-  { layout: 'image:slice' as HairyPostLayout, icon: 'i-fluent-text-align-left-16-filled' },
-  { layout: 'image' as HairyPostLayout, icon: 'i-fluent-text-align-justify-20-filled' },
-  { layout: 'markdown' as HairyPostLayout, icon: 'i-fluent-markdown-20-filled' },
-  { layout: 'text' as HairyPostLayout, icon: 'i-fluent-code-text-16-filled' },
-]
-
-const headerHeight = useHeaderHeight()
-const scroll = useScroll(document)
-
-const show = computed(() => {
-  return scroll.y.value > headerHeight.value
-})
-</script>
-
-<template>
-  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
-    <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
-      <div class="text-size-xl" :class="item.icon" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>