valaxy-theme-hairy 0.2.2 → 1.0.1

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  // we need tsconfig.json to compile without
+  // error: This is likely not portable. A type annotation is necessary.
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client",
+      "vue/ref-macros",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["**/dist/**", "node_modules"]
+}

package/types/index.d.ts

@@ -0,0 +1,163 @@
+/* eslint-disable ts/no-use-before-define */
+export namespace HairyTheme {
+  export type Config = ThemeConfig
+  export type Sidebar = any
+  export type { Layout }
+}
+
+/**
+ * Theme Config
+ */
+export interface ThemeConfig {
+  /**
+   * default theme mode
+   *
+   * @default 'light'
+   */
+  theme?: 'dark' | 'light'
+
+  home?: Home
+
+  user?: User
+
+  post?: Post
+
+  /**
+   * colors
+   */
+  colors?: Colors
+
+  /**
+   * layout
+   */
+  layout?: Partial<Layout>
+
+  /**
+   * footer
+   */
+  footer?: Partial<Footer>
+
+  /**
+   * navbar
+   */
+  nav?: NavItem[]
+
+  /**
+   * meting
+   */
+  meting?: Partial<Meting>
+
+  /**
+   * Custom header levels of outline in the aside component.
+   *
+   * @default 2
+   */
+  outline?: number | [number, number] | 'deep' | false
+}
+
+export interface NavItem {
+  text: string
+  link: string
+  icon?: string
+}
+/**
+ * meting options
+ * @see https://github.com/metowolf/MetingJS#option
+ */
+export interface Meting {
+  id: string
+  server: string
+  type: string
+  auto: string
+  fixed: boolean
+  mini: boolean
+  autoplay: boolean
+  theme: string
+  loop: string
+  order: string
+  preload: string
+  volume: number
+  work: string
+  mutex: boolean
+  start: string
+  'lrc-type': number
+  'list-folded': boolean
+  'list-max-height': string
+  'storage-name': string
+  [key: string]: any
+}
+
+export interface Layout {
+  post:
+    | 'text'
+    | 'markdown'
+    | 'image'
+    | 'image:slice'
+    | 'image:slice:reverse'
+  categories: 'timeline' | 'post'
+}
+
+export interface Footer {
+  /**
+   * 建站于
+   */
+  since: number
+
+  /**
+   * Icon between year and copyright info.
+   */
+  icon: {
+    /**
+     * icon name, i-xxx
+     */
+    name: string
+    animated: boolean
+    color: string
+    url: string
+    title: string
+  }
+
+  /**
+   * Powered by valaxy & valaxy-theme-${name}, default is yun
+   */
+  powered: boolean
+
+  /**
+   * Chinese Users | 中国用户
+   * 备案 ICP
+   * 国内用户需要在网站页脚展示备案 ICP 号
+   * https://beian.miit.gov.cn/
+   */
+  beian: {
+    enable: boolean
+    /**
+     * 苏ICP备xxxxxxxx号
+     */
+    icp: string
+  }
+}
+
+export interface Colors {
+/**
+ * primary color
+ * @default '#0078E7'
+ */
+  primary: string
+}
+export interface Home {
+  headline: string
+  title: string
+  description: string
+  images: string[]
+}
+
+export interface Post {
+  images: string[]
+}
+
+export interface User {
+  name?: string
+  description?: string
+}
+
+export type ThemeUserConfig = Partial<ThemeConfig>

package/unocss.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'unocss'
+
 const safelist = [
-  'i-ri:home-2-fill',
+  'i-ri-home-2-fill',
   'i-ri-list-check-2',
   'i-ri-flow-chart',
   'i-ri-user-line',
@@ -11,6 +12,7 @@ const safelist = [
   'i-fluent-markdown-20-filled',
   'i-fluent-code-text-16-filled',
 ]
+
 export default defineConfig({
   theme: {
     breakpoints: {
@@ -28,6 +30,8 @@ export default defineConfig({
     ['font-christmas', { 'font-family': 'var(--hy-font-family-christmas)' }],
     ['font-frederick', { 'font-family': 'var(--hy-font-family-frederick)' }],
     ['text-primary', { color: 'var(--hy-c-primary)' }],
+    ['text-primary-dark', { color: 'var(--hy-c-primary-dark)' }],
+    ['text-primary-light', { color: 'var(--hy-c-primary-light)' }],
     ['border-primary', { 'border-color': 'var(--hy-c-primary)' }],
     ['bg-primary', { background: 'var(--hy-c-primary)' }],
   ],

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>