valaxy-theme-yun 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 云游君 YunYouJun <me@yunyoujun.cn>
+
+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/README.md

@@ -0,0 +1,33 @@
+<p align='center'>
+  <img width="200" src="https://cdn.jsdelivr.net/gh/YunYouJun/yun/images/meme/yun-good-alpha-compressed.png">
+</p>
+
+<p align='center'>
+Theme-Yun<sup><em>(vue)</em></sup>
+</p>
+
+## Usage
+
+TODO
+
+### Development
+
+Just run and visit <http://localhost:3333>
+
+```bash
+pnpm dev
+```
+
+### Build
+
+```bash
+pnpm build
+```
+
+## [Sponsors](https://sponsors.yunyoujun.cn)
+
+<p align="center">
+  <a href="https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg">
+    <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>
+  </a>
+</p>

package/components/YunAlgoliaSearch.vue

@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useConfig } from 'valaxy'
+import { useAlgoliaSearch } from '~/composables/search/algolia'
+
+const { t } = useI18n()
+
+const config = useConfig()
+const showPopup = ref(false)
+
+const { Escape } = useMagicKeys()
+
+useAlgoliaSearch({
+  ...config.value.search.algolia,
+  hits: {
+    per_page: 8,
+  },
+})
+
+watch(Escape, () => {
+  showPopup.value = false
+})
+
+watch(showPopup, () => {
+  if (showPopup.value)
+    document.documentElement.classList.add('no-scroll')
+  else
+    document.documentElement.classList.remove('no-scroll')
+})
+
+</script>
+
+<template>
+  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="showPopup = !showPopup">
+    <div v-if="!showPopup" i-ri-search-line />
+    <div v-else text="!2xl" i-ri-close-line />
+  </button>
+
+  <transition>
+    <div v-show="showPopup" class="search-popup">
+      <div class="search-header" />
+      <div class="search-input-container" />
+      <div class="algolia-results">
+        <div id="algolia-stats" />
+        <div id="algolia-hits" />
+        <div id="algolia-pagination" class="algolia-pagination" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use '~/styles/vars' as *;
+
+.search-btn {
+  position: fixed;
+  top: 0.6rem;
+  right: 0.8rem;
+
+  color: var(--yun-c-primary);
+  z-index: map.get($z-index, 'search-btn');
+}
+
+.search-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+
+  text-align: center;
+  padding-top: 3.5rem;
+  margin: 0;
+  z-index: map.get($z-index, 'search-popup');
+  transition: 0.6s;
+}
+
+.search-header {
+  .close-icon {
+    position: fixed;
+    top: 0.6rem;
+    right: 0.8rem;
+  }
+}
+
+.search-input {
+  background: transparent;
+  color: var(--yun-c-text);
+  font-size: 1.5rem;
+  border-radius: 3rem;
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--yun-c-gray);
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 800px;
+  font-family: var(--yun-font-serif);
+  font-weight: 900;
+  text-align: center;
+}
+
+.popup {
+  .search-icon, .close-icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+
+    .icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+
+.ais-Stats {
+  .ais-Stats-text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: relative;
+
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+    font-size: small;
+  }
+}
+
+.algolia-powered {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+  }
+}
+
+.algolia-results {
+  position: relative;
+  overflow: auto;
+  padding: 10px 30px 0 30px;
+
+  hr {
+    margin-top: 10px;
+    margin-bottom: 0;
+  }
+}
+
+.algolia-hit-item {
+  display: flex;
+  justify-content: center;
+}
+
+.algolia-hit-item-link {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  border-bottom: 1px dashed #ccc;
+  font-family: var(--yun-font-serif);
+  font-weight: 900;
+  font-size: 1.2rem;
+  max-width: 800px;
+
+  mark {
+    color: var(--yun-c-danger);
+    font-family: 900;
+    background-color: transparent;
+    text-decoration: underline;
+  }
+
+  small {
+    display: flex;
+    font-size: 12px;
+    justify-content: center;
+    font-family: var(--yun-font-sans);
+    font-weight: normal;
+    line-height: 1;
+    margin-top: -0.2rem;
+  }
+}
+
+.algolia-pagination {
+  margin-top: 1rem;
+  .ais-Pagination-list {
+    display: flex;
+    padding-inline-start: 0;
+  }
+
+  .pagination-item {
+    display: inline-flex;
+    list-style-type: none;
+  }
+
+  .page-number {
+    border-top: none;
+  }
+
+  .disabled-item {
+    display: none;
+  }
+
+  .active {
+    .page-number {
+      background: var(--page-btn-active-bg-color);
+      color: var(--yun-c-bg);
+    }
+  }
+}
+
+.ais-Hits-list {
+  margin: 0;
+  list-style-type: none;
+  padding-inline-start: 0;
+}
+</style>

package/components/YunBackToTop.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useBackToTop } from '~/composables'
+
+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
+})
+</script>
+
+<template>
+  <a href="#" class="back-to-top yun-icon-btn" :class="show && 'show'">
+    <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";
+@use "~/styles/vars" as *;
+
+.back-to-top {
+  position: relative;
+  position: fixed;
+  right: -0.9rem;
+  bottom: 1.1rem;
+  z-index: map.get($z-index, 'go-up-btn');
+  opacity: 0;
+  color: var(--yun-c-primary);
+
+  &.show {
+    transform: translateX(-30px) rotate(360deg);
+    opacity: 1;
+  }
+
+  .icon {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+.progress-circle {
+  transition: 0.3s stroke-dashoffset;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+
+  &-container {
+    position: absolute;
+  }
+}
+</style>

package/components/YunBanner.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+/**
+ * @file 生成首页标语动画
+ * @author YunYouJun <me@yunyoujun.cn>
+ * @description https://github.com/YunYouJun/hexo-theme-yun
+ */
+
+import type { CSSProperties } from 'vue'
+import { computed } from 'vue'
+import { useThemeConfig } from 'valaxy'
+import { random } from '~/utils'
+const themeConfig = useThemeConfig()
+
+const chars = computed(() => {
+  const arr = []
+  for (let i = 0; i < themeConfig.value.banner.title.length; i++) {
+    const rn = random(1.5, 3.5)
+    arr.push(rn)
+  }
+  return arr
+})
+// height of top/bottom line
+const lineH = computed(() => chars.value.reduce((a, b) => a + b, 0) / 2)
+
+const lintStyle = computed(() => (
+  {
+    '--banner-line-height': `calc(50vh - ${lineH.value}rem)`,
+  } as CSSProperties
+))
+</script>
+
+<template>
+  <div id="banner">
+    <div class="banner-line vertical-line-top" :style="lintStyle" />
+    <div class="banner-char-container">
+      <div v-for="c, i in themeConfig.banner.title" :key="i" class="char-box">
+        <span
+          :class="[i%2 !== 0 ? 'char-right' : 'char-left']" :style="{
+            '--banner-char-size': `${chars[i]}rem`,
+          } as CSSProperties"
+        >
+          <span class="char">
+            {{ c }}
+          </span>
+        </span>
+      </div>
+    </div>
+    <div class="banner-line vertical-line-bottom" :style="lintStyle" />
+  </div>
+
+  <YunGoDown />
+</template>
+
+<style lang="scss">
+:root {
+  // banner
+  --banner-line-color: black;
+  --banner-char-color: black;
+  --banner-char-bg-color: rgba(white, 0.5);
+  --banner-char-hover-color: white;
+}
+
+.dark {
+  // banner
+  --banner-line-color: white;
+  --banner-char-color: white;
+  --banner-char-bg-color: rgba(black, 0.5);
+  --banner-char-hover-color: black;
+}
+</style>

package/components/YunBase.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// export layouts/base.vue as components
+import Base from '../layouts/base.vue'
+</script>
+
+<template>
+  <Base>
+    <template #content>
+      <slot name="content" />
+    </template>
+    <template #nav>
+      <slot name="nav" />
+    </template>
+    <template #comment>
+      <slot name="comment" />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+    <template #right-sidebar>
+      <slot name="right-sidebar" />
+    </template>
+  </Base>
+</template>

package/components/YunCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="yun-card">
+    <div v-if="$slots.header" class="yun-card-header">
+      <header>
+        <slot name="header" />
+      </header>
+    </div>
+    <slot />
+    <div v-if="$slots.content" class="yun-card-content" w="full">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.yun-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  min-height: 100px;
+
+  margin: auto;
+
+  // todo
+  background-color: var(--yun-c-bg-light);
+}
+</style>

package/components/YunCategories.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { Categories } from 'valaxy'
+
+withDefaults(defineProps<{
+  categories: Categories
+  /**
+   * 当前层级
+   */
+  level?: number
+  displayCategory: (category: string) => void
+}>(), {
+  level: 0,
+})
+</script>
+
+<template>
+  <ul v-for="category, key in Object.fromEntries(categories)" :key="key" class="category-list" m="l-4">
+    <YunCategory :name="key.toString()" :category="category" :level="level + 1" :display-category="displayCategory" />
+  </ul>
+</template>
+
+<style lang="scss">
+.post-list-item {
+  a {
+    color: var(--yun-c-text);
+
+    &:hover {
+      color: var(--yun-c-primary);
+    }
+  }
+}
+
+.category-list-item {
+  .folder-action {
+    &:hover {
+      color: var(--yun-c-primary);
+    }
+  }
+  .category-name {
+    &:hover {
+      color: var(--yun-c-primary);
+    }
+  }
+}
+</style>

package/components/YunCategory.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import type { Category, ParentCategory, PostCategory } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  name: string
+  // to eliminate the warning
+  category: Category
+  level?: number
+  displayCategory: (category: string) => void
+}>()
+
+const showChild = ref(false)
+const { t } = useI18n()
+</script>
+
+<template>
+  <li v-if="category.total" class="category-list-item inline-flex items-center cursor-pointer">
+    <span class="folder-action inline-flex" @click="showChild = !showChild">
+      <div v-if="!showChild" i-ri-folder-add-line />
+      <div v-else style="color:var(--yun-c-primary)" i-ri-folder-reduce-line /></span>
+    <span class="category-name" m="l-1" @click="displayCategory(name)">
+      {{ name === 'Uncategorized' ? t('category.uncategorized') : name }} [{{ category.total }}]
+    </span>
+  </li>
+
+  <template v-if="showChild">
+    <ul v-if="(category as PostCategory).posts">
+      <li v-for="post, i in (category as PostCategory).posts" :key="i" class="post-list-item" m="l-4">
+        <router-link v-if="post.title" :to="post.path" class="inline-flex items-center">
+          <div i-ri-file-text-line />
+          <span m="l-1" font="serif black">{{ post.title }}</span>
+        </router-link>
+      </li>
+    </ul>
+    <YunCategories v-else :categories="(category as ParentCategory).children" :display-category="displayCategory" />
+  </template>
+</template>

package/components/YunCloud.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="cloud">
+    <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+      <defs>
+        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" fill="theme.banner.cloud.color" />
+      </defs>
+      <g class="parallax">
+        <use xlink:href="#gentle-wave" x="48" y="0" opacity="0.7" />
+        <use xlink:href="#gentle-wave" x="48" y="3" opacity="0.5" />
+        <use xlink:href="#gentle-wave" x="48" y="5" opacity="0.3" />
+        <use xlink:href="#gentle-wave" x="48" y="7" />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style lang="scss">
+.cloud {
+  display: flex;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--yun-z-cloud);
+  box-sizing: border-box;
+  mix-blend-mode: overlay;
+
+  .waves {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100px;
+
+    @media (max-width: 768px) {
+      height: 40px;
+    }
+  }
+
+  .parallax {
+    > use {
+      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+    }
+
+    > use:nth-child(1) {
+      animation-delay: -2s;
+      animation-duration: 7s;
+    }
+
+    > use:nth-child(2) {
+      animation-delay: -3s;
+      animation-duration: 10s;
+    }
+
+    > use:nth-child(3) {
+      animation-delay: -4s;
+      animation-duration: 13s;
+    }
+
+    > use:nth-child(4) {
+      animation-delay: -5s;
+      animation-duration: 20s;
+    }
+  }
+}
+
+@keyframes move-forever {
+  0% {
+    transform: translate3d(-90px, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(85px, 0, 0);
+  }
+}
+</style>

package/components/YunConfig.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { isDark, toggleDark } from '~/composables'
+
+const { t, availableLocales, locale } = useI18n()
+
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
+<template>
+  <div>
+    <button class="yun-icon-btn" :title="t('button.toggle_dark')" :style="{color: isDark ? '' : '#f1cb64'}" @click="toggleDark()">
+      <div i="ri-sun-line dark:ri-moon-line" />
+    </button>
+
+    <a class="yun-icon-btn" :title="t('button.toggle_langs')" style="color:var(--yun-c-text)" @click="toggleLocales">
+      <div i-ri-translate class="transition transform" :class="locale === 'en' ? 'rotate-y-180' : ''" />
+    </a>
+  </div>
+</template>