valaxy-theme-hairy 0.0.1

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

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

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

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

package/@types/types.d.ts

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

package/@types/valaxy.d.ts

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 云游君
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/HairyAlgoliaSearchBox.vue

@@ -0,0 +1,118 @@
+<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/HairyArticleImage.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+
+defineProps<{
+  post: Post
+  reverse?: boolean
+}>()
+</script>
+
+<template>
+  <HairyArticleImageDefault :post="post" :reverse="reverse" class="hidden sm:block" />
+  <HairyArticleImageSmall :post="post" :reverse="reverse" class="hidden lt-sm:block" />
+</template>
+
+<style lang="scss">
+
+</style>

package/components/HairyArticleImageDefault.vue

@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { computed, defineProps } from 'vue'
+import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import last from 'lodash/last'
+import { usePostLayout } from '../hooks/usePostLayout'
+import { toArr } from '../utils'
+
+const props = defineProps<{
+  post: Post
+  reverse?: boolean
+}>()
+const router = useRouter()
+const layout = usePostLayout()
+const slice = computed(() => layout.value.includes('slice'))
+const image = computed(() => props.post.image)
+
+const i18n = useI18n()
+
+const onReadMore = () => {
+  if (props.post.path)
+    router.push(props.post.path)
+}
+
+const displayCategory = (keys: string | string[] = []) => {
+  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+}
+</script>
+
+<template>
+  <li class="HairyArticleImage my-10 py-2" :class="[slice && 'slice', reverse && 'reverse']">
+    <article>
+      <div class="flex justify-between items-center">
+        <a class="text-size-2xl font-bold truncate cursor-pointer" :class="[reverse ? 'order-first' : 'order-last']" @click="onReadMore">{{ post.title }}</a>
+        <div class="flex justify-end gap-2 text-size-sm">
+          <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
+          <span>{{ (post.length / 1000).toFixed(1) }}k字</span>
+          <span>{{ post.durations.minutes.toFixed(2) }}分钟</span>
+        </div>
+      </div>
+      <div class="h-200px flex">
+        <div class="flex-1 post-image-content" :class="[reverse ? 'order-last' : 'order-first']">
+          <img
+            class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image"
+            @click="onReadMore"
+          />
+        </div>
+        <div class="flex flex-col justify-between flex-1">
+          <div class="flex-1 text-size-sm">
+            <div class="line-clamp-text">
+              {{ post.text }}
+            </div>
+          </div>
+          <div class="flex justify-between items-center">
+            <a class="cursor-pointer" :class="[reverse && 'order-1']">
+              <span v-if="post.categories?.length" @click="displayCategory(post.categories)">
+                {{ i18n.t(last(toArr(post.categories)) || '') }}
+              </span>
+            </a>
+            <div class="text-base leading-6 font-medium">
+              <a class="link cursor-pointer" aria-label="read more" @click="onReadMore">
+                <span v-if="reverse">←</span>
+                Read more
+                <span v-if="!reverse">→</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  </li>
+</template>
+
+<style lang="scss" scoped>
+.line-clamp-text {
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+
+.dark {
+  .post-image {
+    @apply opacity-75 hover: opacity-90 duration-200;
+  }
+}
+
+.post-image-content {
+  margin-right: 1rem;
+}
+
+.slice {
+  .post-image-content {
+    webkit-clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
+    border-radius: 0.625rem 0 0 0.625rem;
+    overflow: hidden;
+  }
+}
+
+.reverse {
+  .post-image-content {
+    margin-right: 0;
+    margin-left: 1rem;
+    clip-path: polygon(0 0,100% 0,100% 100%,8% 100%);
+    border-radius: 0 0.625rem 0.625rem 0;
+    overflow: hidden;
+  }
+}
+
+.HairyArticleImage.slice {
+  .post-image {
+    @apply transition-all;
+  }
+
+  &:hover {
+    .post-image {
+      transform: scale(1.05) rotate(1deg);
+    }
+  }
+}
+</style>

package/components/HairyArticleImageSmall.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { computed, defineProps } from 'vue'
+import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import last from 'lodash/last'
+import { usePostLayout } from '../hooks/usePostLayout'
+import { toArr } from '../utils'
+
+const props = defineProps<{
+  post: Post
+  reverse?: boolean
+}>()
+const router = useRouter()
+const layout = usePostLayout()
+const slice = computed(() => layout.value.includes('slice'))
+const image = computed(() => props.post.image)
+
+const i18n = useI18n()
+
+const onReadMore = () => {
+  if (props.post.path)
+    router.push(props.post.path)
+}
+
+const displayCategory = (keys: string | string[] = []) => {
+  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+}
+</script>
+
+<template>
+  <li class="HairyArticleImage my-10 py-2" :class="[slice && 'slice', reverse && 'reverse']">
+    <article>
+      <div class="flex justify-between items-center">
+        <a class="text-size-2xl font-bold truncate cursor-pointer" :class="[reverse ? 'order-first' : 'order-last']" @click="onReadMore">{{ post.title }}</a>
+        <div class="flex justify-end gap-2 text-size-sm">
+          <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
+          <span>{{ (post.length / 1000).toFixed(1) }}k字</span>
+          <span>{{ post.durations.minutes.toFixed(2) }}分钟</span>
+        </div>
+      </div>
+    </article>
+  </li>
+</template>
+
+<style lang="scss">
+
+</style>

package/components/HairyArticleSeries.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { computed } from 'vue'
+import { toArr } from '../utils'
+import { useCurrentCategory } from '../hooks/useCategory'
+
+const frontmatter = useFrontmatter()
+const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])
+const category = useCurrentCategory(paths)
+const posts = computed(() => category.value.posts || [])
+
+function isCurrent(title = '') {
+  return frontmatter.value.title === title
+}
+</script>
+
+<template>
+  <div class="pl-16px text-14px relative overflow-hidden">
+    <div class="outline-title">
+      On this Series
+    </div>
+    <ul class="va-toc relative z-1">
+      <a v-for="(item, index) of posts" :key="index" class="va-toc-item" @click="$router.push(item.path || '')">
+        <a class="outline-link" :class="[isCurrent(item.title) && 'active']">{{ index + 1 }}.{{ item.title }}</a>
+      </a>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.outline-link {
+  display: block;
+  position: relative;
+  line-height: 28px;
+  color: var(--va-c-text-light);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--va-c-brand);
+    transition: color 0.25s;
+  }
+
+  &.active {
+    color: var(--va-c-brand);
+    transition: color .25s;
+
+    &::after {
+      position: absolute;
+      content: '';
+      left: -1.12rem;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      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;
+    }
+  }
+}
+</style>

package/components/HairyArticleText.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useThemeConfig } from 'valaxy'
+import type { Post } from 'valaxy'
+import { computed, defineProps } from 'vue'
+import type { HairyTheme } from '..'
+const props = defineProps<{
+  post: Post
+}>()
+const themeConfig = useThemeConfig<HairyTheme>()
+const layout = computed(() => themeConfig.value.post?.layout || 'text')
+const text = computed(() => {
+  if (layout.value === 'text')
+    return props.post.text
+  return props.post.excerpt
+})
+</script>
+
+<template>
+  <li class="py-12">
+    <article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
+      <div class="space-y-5 xl:col-span-4">
+        <div class="space-y-6">
+          <h2 class="text-2xl leading-8 font-bold tracking-tight">
+            <a class="st-text" :href="post.path">{{ post.title }}</a>
+          </h2>
+          <div
+            v-if="text"
+            class="prose max-w-none text-gray-500"
+            v-html="text"
+          />
+        </div>
+        <div class="text-base leading-6 font-medium">
+          <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+        </div>
+      </div>
+    </article>
+  </li>
+</template>

package/components/HairyBackToTop.vue

@@ -0,0 +1,72 @@
+<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/HairyBody.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { useFrontmatter } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+const fr = useFrontmatter()
+const route = useRoute()
+
+const showWaline = computed(() => route.path.includes('/posts/') || fr.value.waline)
+</script>
+
+<template>
+  <div class="HairyBody min-h-50vh relative">
+    <div class="mx-auto breakpoint flex z-1 relative">
+      <div class="relative flex-1 pt-2">
+        <slot />
+        <HairyWaline v-if="showWaline" />
+      </div>
+      <div class="ml-4 w-60 lg:block hidden">
+        <div class="sticky top-3.125rem z-1">
+          <slot v-if="$slots.slide" name="slide" />
+          <HairyUserCard v-else />
+        </div>
+      </div>
+    </div>
+    <div class="HairyBodyBackground" />
+  </div>
+</template>
+
+<style lang="scss">
+.a {
+  overflow: hidden;
+}
+
+.HairyBodyBackground {
+  @apply transition-all duration-200;
+  @apply absolute top-0 max-h-150vh top-5 bottom-0 w-full transition-opacity;
+  opacity: 0;
+}
+
+.dark {
+  .HairyBodyBackground {
+    transition-delay: 200ms;
+    transition-delay: 0;
+    opacity: 1;
+    background-image:
+      linear-gradient(to bottom, var(--hy-c-waves-dimm) 0%, transparent 60%, var(--hy-c-waves-dimm) 100%),
+      url(https://tva2.sinaimg.cn/large/008ugSUaly8h4mt4lbuc0j31hc0u040c.jpg);
+    background-position: center;
+    opacity: 0.4;
+    background-repeat: no-repeat;
+    filter: blur(0px);
+    background-size: cover;
+  }
+}
+</style>

package/components/HairyBreadcrumb.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { ElBreadcrumb, breadcrumbProps } from 'element-plus/es/components/breadcrumb/index'
+import 'element-plus/es/components/breadcrumb/style/index'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ...breadcrumbProps,
+  size: String as PropType<'default' | 'large'>,
+  after: String,
+})
+const text = computed(() => `"${props.after || ''}"`)
+</script>
+
+<template>
+  <ElBreadcrumb :class="[size]" :style="{ '--after-text': text }" v-bind="$props">
+    <slot />
+  </ElBreadcrumb>
+</template>
+
+<style lang="scss">
+  .el-breadcrumb {
+    overflow: hidden;
+    display: inline-block;
+    position: relative;
+  }
+  .el-breadcrumb .el-breadcrumb__inner,
+  .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner {
+    color: initial;
+  }
+  .el-breadcrumb .el-breadcrumb__inner.is-link {
+    @apply border-b border-dashed hover:border-primary hover:text-primary transition-all cursor-pointer;
+    font-weight: normal;
+  }
+
+  .el-breadcrumb::after {
+    @apply text-gray-5 text-size-5;
+    content: var(--after-text);
+    clear: none;
+    transform: translateX(2px);
+  }
+  .el-breadcrumb.large {
+    margin-top: 3rem;
+    font-size: 2.5em;
+    @apply lt-md:text-3xl lt-sm:text-xl;
+    .el-breadcrumb__separator {
+      @apply text-size-5 text-gray-5;
+      font-weight: normal;
+    }
+  }
+</style>

package/components/HairyBreadcrumbItem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import { ElBreadcrumbItem, breadcrumbItemProps } from 'element-plus/es/components/breadcrumb/index'
+defineProps(breadcrumbItemProps)
+</script>
+
+<template>
+  <ElBreadcrumbItem v-bind="$props">
+    <slot />
+  </ElBreadcrumbItem>
+</template>
+
+<style lang="scss" scoped>
+
+</style>