valaxy-theme-hairy 1.0.1 → 1.0.2

package/components/ValaxyMain.vue

@@ -1,45 +1,45 @@
-<script lang="ts" setup>
-import type { PageData, Post } from 'valaxy'
-import { useSiteConfig } from 'valaxy'
-
-defineProps<{
-  frontmatter: Post
-  data?: PageData
-}>()
-const siteConfig = useSiteConfig()
-</script>
-
-<template>
-  <main>
-    <div w="full" flex="~">
-      <slot name="main">
-        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
-          <slot name="main-header" />
-          <slot name="main-header-after" />
-
-          <slot name="main-content">
-            <div class="markdown-body prose max-w-none pb-8">
-              <ValaxyMd :frontmatter="frontmatter">
-                <slot name="main-content-md" />
-                <slot />
-              </ValaxyMd>
-            </div>
-            <slot name="main-content-after" />
-          </slot>
-        </div>
-
-        <slot name="main-nav-before" />
-
-        <slot name="main-nav" />
-
-        <slot name="main-nav-after" />
-
-        <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
-
-        <slot name="footer" />
-      </slot>
-    </div>
-
-    <slot name="aside" />
-  </main>
-</template>
+<script lang="ts" setup>
+import type { PageData, Post } from 'valaxy'
+import { useSiteConfig } from 'valaxy'
+
+defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <main>
+    <div w="full" flex="~">
+      <slot name="main">
+        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+          <slot name="main-header" />
+          <slot name="main-header-after" />
+
+          <slot name="main-content">
+            <div class="markdown-body prose max-w-none pb-8">
+              <ValaxyMd :frontmatter="frontmatter">
+                <slot name="main-content-md" />
+                <slot />
+              </ValaxyMd>
+            </div>
+            <slot name="main-content-after" />
+          </slot>
+        </div>
+
+        <slot name="main-nav-before" />
+
+        <slot name="main-nav" />
+
+        <slot name="main-nav-after" />
+
+        <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
+
+        <slot name="footer" />
+      </slot>
+    </div>
+
+    <slot name="aside" />
+  </main>
+</template>

package/components/navbar/HairyNav.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
-import type { HairyTheme } from 'valaxy-theme-hairy'
-import { useThemeConfig } from 'valaxy'
-import { computed } from 'vue'
-
-const themeConfig = useThemeConfig<HairyTheme.Config>()
-const nav = computed(() => themeConfig.value.nav || [])
-</script>
-
-<template>
-  <div class="flex items-center h-12.5">
-    <HairyNavItem v-for="(item, index) in nav" :key="index" :item="item" />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import type { HairyTheme } from 'valaxy-theme-hairy'
+import { useThemeConfig } from 'valaxy'
+import { computed } from 'vue'
+
+const themeConfig = useThemeConfig<HairyTheme.Config>()
+const nav = computed(() => themeConfig.value.nav || [])
+</script>
+
+<template>
+  <div class="flex items-center h-12.5">
+    <HairyNavItem v-for="(item, index) in nav" :key="index" :item="item" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/navbar/HairyNavExpand.vue

@@ -1,12 +1,12 @@
-<script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { useGlobalStore } from '../../store'
-
-const { showDrawer } = storeToRefs(useGlobalStore())
-</script>
-
-<template>
-  <button class="yun-icon-btn lt-sm:text-size-xl" @click="showDrawer = !showDrawer">
-    <div i="ri-menu-fill" />
-  </button>
-</template>
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../../store'
+
+const { showDrawer } = storeToRefs(useGlobalStore())
+</script>
+
+<template>
+  <button class="yun-icon-btn lt-sm:text-size-xl" @click="showDrawer = !showDrawer">
+    <div i="ri-menu-fill" />
+  </button>
+</template>

package/components/navbar/HairyNavItem.vue

@@ -1,35 +1,35 @@
-<script lang="ts" setup>
-import type { NavItem } from 'valaxy-theme-hairy'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const props = defineProps<{
-  item: NavItem
-}>()
-const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
-const isLink = computed(() => urlReg.test(props.item?.link || ''))
-const isPointer = computed(() => Boolean(props.item.link) || isLink.value)
-
-const route = useRoute()
-
-const active = computed(() => {
-  return !isLink.value && (
-    props.item.link === '/'
-      ? route.path === props.item.link
-      : route.path.includes(props.item.link!)
-  )
-})
-</script>
-
-<template>
-  <a href="" class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', active && 'text-primary active']">
-    <HairyLink class="flex items-center" type="white" :href="item.link" :target="isLink ? '__blank' : ''">
-      <div v-if="item.icon" class="mr-1 icon" :class="item.icon" />
-      <div class="question">
-        {{ item.text }}
-      </div>
-    </HairyLink>
-  </a>
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+import type { NavItem } from 'valaxy-theme-hairy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps<{
+  item: NavItem
+}>()
+const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/
+const isLink = computed(() => urlReg.test(props.item?.link || ''))
+const isPointer = computed(() => Boolean(props.item.link) || isLink.value)
+
+const route = useRoute()
+
+const active = computed(() => {
+  return !isLink.value && (
+    props.item.link === '/'
+      ? route.path === props.item.link
+      : route.path.includes(props.item.link!)
+  )
+})
+</script>
+
+<template>
+  <a href="" class="px-2.5 HairyMenuItem" :class="[isPointer ? 'cursor-pointer' : 'select-none', active && 'text-primary active']">
+    <HairyLink class="flex items-center" type="white" :href="item.link" :target="isLink ? '__blank' : ''">
+      <div v-if="item.icon" class="mr-1 icon" :class="item.icon" />
+      <div class="question">
+        {{ item.text }}
+      </div>
+    </HairyLink>
+  </a>
+</template>
+
+<style lang="scss" scoped></style>

package/components/navbar/HairyNavbarBackground.vue

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

package/components/navbar/HairyNavbarSearch.vue

@@ -1,8 +1,8 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div />
-</template>
-
-<style lang="scss" scoped></style>
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div />
+</template>
+
+<style lang="scss" scoped></style>

package/components/navbar/HairyNavbarTitle.vue

@@ -1,15 +1,15 @@
-<script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-
-const config = useSiteConfig()
-
-function hrefToUrl() {
-  location.href = config.value.url
-}
-</script>
-
-<template>
-  <div class="px-2.5">
-    <span class="cursor-pointer hover:text-primary" @click="hrefToUrl">{{ config.title }}</span>
-  </div>
-</template>
+<script lang="ts" setup>
+import { useSiteConfig } from 'valaxy'
+
+const config = useSiteConfig()
+
+function hrefToUrl() {
+  location.href = config.value.url
+}
+</script>
+
+<template>
+  <div class="px-2.5">
+    <span class="cursor-pointer hover:text-primary" @click="hrefToUrl">{{ config.title }}</span>
+  </div>
+</template>

package/components/navbar/HairyNavbarToggleDark.vue

@@ -1,22 +1,22 @@
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { useAppStore } from 'valaxy'
-
-const { t } = useI18n()
-const appStore = useAppStore()
-const dark = computed(() => appStore.isDark)
-
-const themeTitle = computed(() => {
-  return dark.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: dark ? '' : '#f1cb64' }" @click="($event) => appStore.toggleDarkWithTransition($event, { duration: 600, easing: 'ease-in-out' })"
-  >
-    <div i="ri-sun-line dark:ri-moon-line" />
-  </button>
-</template>
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
+import { useAppStore } from 'valaxy'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const dark = computed(() => appStore.isDark)
+
+const themeTitle = computed(() => {
+  return dark.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: dark ? '' : '#f1cb64' }" @click="($event) => appStore.toggleDarkWithTransition($event, { duration: 600, easing: 'ease-in-out' })"
+  >
+    <div i="ri-sun-line dark:ri-moon-line" />
+  </button>
+</template>

package/components/parts/HairyBreadcrumb.vue

@@ -1,51 +1,51 @@
-<script lang="ts" setup>
-import { ElBreadcrumb, breadcrumbProps } from 'element-plus/es/components/breadcrumb/index'
-import 'element-plus/theme-chalk/el-breadcrumb.css'
-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: var(--va-c-text);
-  }
-  .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>
+<script lang="ts" setup>
+import { ElBreadcrumb, breadcrumbProps } from 'element-plus'
+import 'element-plus/theme-chalk/el-breadcrumb.css'
+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: var(--va-c-text);
+  }
+  .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/parts/HairyBreadcrumbItem.vue

@@ -1,11 +1,11 @@
-<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>
+<script lang="ts" setup>
+import { ElBreadcrumbItem, breadcrumbItemProps } from 'element-plus'
+
+defineProps(breadcrumbItemProps)
+</script>
+
+<template>
+  <ElBreadcrumbItem v-bind="$props">
+    <slot />
+  </ElBreadcrumbItem>
+</template>