valaxy-theme-hairy 0.2.2 → 1.0.1

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>

package/components/HairyToc.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { Header } from 'valaxy'
-import {
-  resolveHeaders,
-  useActiveAnchor,
-  useFrontmatter,
-  useThemeConfig,
-} from 'valaxy'
-
-const props = defineProps<{ headers?: Header[] }>()
-
-const frontmatter = useFrontmatter()
-const themeConfig = useThemeConfig()
-
-const { locale } = useI18n()
-const container = ref()
-const marker = ref()
-
-useActiveAnchor(container, marker)
-
-const resolvedHeaders = computed(() => {
-  return resolveHeaders(props.headers || frontmatter.value['it-toc'])
-})
-
-function handleClick({ target: el }: Event) {
-  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
-  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
-  heading?.focus()
-}
-</script>
-
-<template>
-  <div v-show="resolvedHeaders.length" ref="container" class="animate__animated animate__fadeIn">
-    <div class="content">
-      <div class="outline-title">
-        {{ themeConfig.outlineTitle || 'On this page' }}
-      </div>
-
-      <div ref="marker" class="outline-marker" />
-
-      <nav aria-labelledby="doc-outline-aria-label">
-        <span id="doc-outline-aria-label" class="visually-hidden">
-          Table of Contents for current page
-        </span>
-
-        <ul class="va-toc relative z-1">
-          <li
-            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
-            v-show="!hidden"
-            :key="link"
-            class="va-toc-item"
-            :lang="lang || locale"
-          >
-            <a class="outline-link" :href="link" @click="handleClick">
-              {{ text }}
-            </a>
-            <ul v-if="children && frontmatter.outline === 'deep'">
-              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
-                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
-                  {{ item.text }}
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.va-toc {
-  text-align: left;
-
-  .va-toc-item {
-    color: var(--va-c-text-light);
-  }
-}
-
-.content {
-  position: relative;
-  padding-left: 16px;
-  font-size: 14px;
-  text-align: left;
-}
-
-.outline-marker {
-  position: absolute;
-  top: 32px;
-  left: -2px;
-  z-index: 0;
-  opacity: 0;
-  width: 4px;
-  height: 18px;
-  background-color: var(--va-c-brand);
-  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.outline-title {
-  letter-spacing: 0.4px;
-  line-height: 28px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.outline-link {
-  display: block;
-  line-height: 28px;
-  color: var(--va-c-text-light);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  transition: color 0.5s;
-}
-
-.outline-link:hover,
-.outline-link.active {
-  color: var(--va-c-brand);
-  transition: color 0.25s;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  white-space: nowrap;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  overflow: hidden;
-}
-</style>

package/components/HairyUserNav.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { usePostList, useTag } from 'valaxy'
-import { computed } from 'vue'
-import { toArr } from '../utils'
-const posts = usePostList()
-const tags = useTag()
-
-const total = computed(() => {
-  const categories = posts.value.map(v => toArr(v.categories || [])).filter(v => v.length)
-  const maps: string[] = []
-  for (const category of categories) {
-    let caches: string[] = []
-    for (const iterator of category) {
-      caches.push(iterator)
-      maps.push(caches.join('-'))
-    }
-    caches = []
-  }
-  return new Set(maps).size
-})
-</script>
-
-<template>
-  <div class="flex justify-center mt-2">
-    <HairyUserStats :count="posts.length" @click="$router.push('/archives/')">
-      文章
-    </HairyUserStats>
-    <div class="w-1px bg-gray bg-opacity-50" />
-    <HairyUserStats :count="total" @click="$router.push('/categories/')">
-      分类
-    </HairyUserStats>
-    <div class="w-1px bg-gray bg-opacity-50" />
-    <HairyUserStats :count="tags.size" @click="$router.push('/tags/')">
-      标签
-    </HairyUserStats>
-  </div>
-  <HairySocialLinks class="mt-5" />
-  <HairyMenu class="HairyUserMenu mt-5 flex-col h-auto" />
-</template>
-
-<style lang="scss">
-  .HairyUserMenu {
-    .HairyMenuItem {
-      padding: 2px;
-      width: 100%;
-      border: 1px solid transparent;
-      > div {
-        justify-content: center;
-      }
-    }
-
-    .HairyMenuItem:hover,
-    .HairyMenuItem.active {
-      border-top: 1px solid var(--hy-c-primary);
-      border-bottom: 1px solid var(--hy-c-primary);
-    }
-    .HairyMenuItem.active + .HairyMenuItem {
-      border-top-color: transparent;
-    }
-    .HairyMenuItem:hover + .HairyMenuItem {
-      border-top-color: transparent;
-    }
-  }
-</style>

package/components/HairyUserTab.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index'
-import 'element-plus/es/components/tabs/style/index'
-import 'element-plus/es/components/tab-pane/style/index'
-import { provide, ref } from 'vue'
-const active = ref('aside')
-provide('HairyUserTab:active', active)
-</script>
-
-<template>
-  <el-tabs v-model="active" class="pt-3">
-    <el-tab-pane name="aside">
-      <template #label>
-        <div class="flex items-center">
-          <div class="i-ri-list-check-2" />
-          <span class="ml-1">Aside</span>
-        </div>
-      </template>
-      <HairyToc />
-    </el-tab-pane>
-    <el-tab-pane label="Series" name="series">
-      <template #label>
-        <div class="flex items-center gap-1">
-          <div class="i-ri-flow-chart" />
-          <span class="ml-1">Series</span>
-        </div>
-      </template>
-      <HairyArticleSeries />
-    </el-tab-pane>
-    <el-tab-pane label="User" name="user">
-      <template #label>
-        <div class="flex items-center gap-1">
-          <div class="i-ri-user-line" />
-          <span class="ml-1">User</span>
-        </div>
-      </template>
-      <HairyUserCard />
-    </el-tab-pane>
-  </el-tabs>
-</template>

package/components/HairyWaline.vue

@@ -1,44 +0,0 @@
-<script lang="ts" setup>
-import { useConfig } from 'valaxy'
-import { useWaline } from 'valaxy/client/composables/comments/waline'
-// 读取用户配置
-const config = useConfig()
-// 挂载 Waline
-useWaline({
-  el: '#waline',
-  emoji: [
-    '//unpkg.com/@waline/emojis@1.0.1/weibo',
-    '//unpkg.com/@waline/emojis@1.0.1/bilibili',
-  ],
-  ...config.value.comment.waline,
-})
-</script>
-
-<!-- Also, the documentation doesn't state that we need to install @waline/client, which I think is also an issue -->
-<template>
-  <!-- waline html 挂载点，将其写入布局中 -->
-  <div id="waline" w="full" />
-</template>
-
-<style lang="scss">
-// 可以在此处覆盖 waline 样式
-#waline {
-  --waline-theme-color: var(--hy-c-primary);
-  --waline-active-color: var(--hy-c-primary-dark)
-}
-.wl-editor {
-  padding: 4px;
-  width: calc(100% - 1rem - 8px);
-}
-.wl-emoji-popup {
-  border-bottom: none !important;
-  z-index: 1000;
-}
-.wl-emoji-popup .wl-tabs {
-  height: auto !important;
-  overflow-x: auto !important;
-  padding: 0 !important;
-  margin-left: -1px;
-  margin-right: -1px;
-}
-</style>

package/hooks/setupDefaultDark.ts

@@ -1,11 +0,0 @@
-import { toggleDark, useThemeConfig } from 'valaxy'
-import { useLocalStorage } from '@vueuse/core'
-
-export function setupDefaultDark() {
-  const theme = useThemeConfig()
-  const local = useLocalStorage('--hairy-mode', '')
-  if (theme.value.mode && !local.value) {
-    local.value = theme.value.mode
-    toggleDark()
-  }
-}

package/hooks/useCategory.ts

@@ -1,18 +0,0 @@
-import type { ParentCategory, PostCategory } from 'valaxy'
-import { useCategory } from 'valaxy'
-import type { MaybeRef } from '@vueuse/core'
-import { computed, unref } from 'vue'
-
-export function useCurrentCategory(categories: MaybeRef<string[]>) {
-  const all = useCategory()
-  return computed(() => {
-    let parent: ParentCategory & Partial<PostCategory> = all
-    for (const category of unref(categories)) {
-      for (const [key, value] of parent.children) {
-        if (key === category)
-          parent = (value as ParentCategory)
-      }
-    }
-    return parent
-  })
-}

package/hooks/useCategoryPost.ts

@@ -1,21 +0,0 @@
-import type { MaybeRef } from '@vueuse/shared'
-import { usePostList } from 'valaxy'
-import { isEqual } from 'lodash-es'
-import { computed, unref } from 'vue'
-
-export function useCategoryPost(categories: MaybeRef<string[]>) {
-  const postList = usePostList()
-  return computed(() => {
-    if (!unref(categories).length)
-      return postList.value
-    return postList.value.filter((item) => {
-      let target = Array.isArray(item.categories)
-        ? item.categories
-        : [item.categories || '']
-      target = target.filter(Boolean)
-      if (unref(categories)[0] === 'Uncategorized')
-        return !target.length
-      return isEqual(target.sort(), unref(categories).sort())
-    }) as any
-  })
-}

package/hooks/useContext.ts

@@ -1,13 +0,0 @@
-import { ref } from 'vue'
-import { createSharedComposable } from '@vueuse/core'
-
-const _useContext = () => {
-  const headerRef = ref<HTMLDivElement>()
-  const drawerShow = ref(false)
-  return {
-    headerRef,
-    drawerShow,
-  }
-}
-
-export const useContext = createSharedComposable(_useContext)

package/hooks/useHeaderHeight.ts

@@ -1,9 +0,0 @@
-import { useElementSize } from '@vueuse/core'
-import { computed } from 'vue'
-import { useContext } from './useContext'
-
-export function useHeaderHeight() {
-  const { headerRef } = useContext()
-  const size = useElementSize(headerRef)
-  return computed(() => size.height.value)
-}

package/hooks/usePostLayout.ts

@@ -1,16 +0,0 @@
-import { useThemeConfig } from 'valaxy'
-import { createSharedComposable, useStorage } from '@vueuse/core'
-import { computed } from 'vue'
-import type { HairyPostLayout, HairyTheme } from '..'
-
-const useSharedStorage = createSharedComposable(useStorage)
-
-export function usePostLayout() {
-  const themeConfig = useThemeConfig<HairyTheme>()
-  const cache = useSharedStorage<HairyPostLayout>('--hairy-theme:post-layout', null)
-  const layout = computed({
-    get: () => cache.value || themeConfig.value.post?.layout || 'image',
-    set: value => cache.value = value,
-  })
-  return layout
-}