valaxy-theme-yun 0.0.5

package/components/YunGirls.vue

@@ -0,0 +1,104 @@
+
+<script lang="ts" setup>
+import { useRandomData } from 'valaxy-theme-yun/composables'
+import { onImgError } from '../utils'
+
+export interface GirlType {
+  name: string
+  url: string
+  avatar: string
+  from?: string
+  reason?: string
+}
+
+const props = defineProps<{
+  girls: GirlType[] | string
+  random?: boolean
+}>()
+
+const { data } = useRandomData(props.girls, props.random)
+</script>
+
+<template>
+  <div class="girls">
+    <ul class="girl-items">
+      <li v-for="girl, i in data" :key="girl.name" class="girl-item">
+        <a :href="girl.url || 'https://zh.moegirl.org/' + girl.name" :title="girl.reason" alt="portrait" target="_blank" rel="noopener">
+          <figure class="girl-info">
+            <img class="girl-avatar" loading="lazy" :src="girl.avatar" :alt="girl.name" :onError="onImgError">
+            <figcaption class="girl-name" :title="(i+1).toString()">{{ girl.name }}</figcaption>
+            <figcaption class="girl-from">{{ girl.from }}</figcaption>
+          </figure>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss">
+.girls {
+  text-align: center;
+
+  .girl-items {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-left: 0;
+  }
+}
+
+.girls-number {
+  color: white;
+}
+
+.girl-item {
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  width: 8rem;
+  margin: 1rem;
+
+  .girl {
+    &-info {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    &-avatar {
+      object-fit: cover;
+      object-position: center top;
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+      padding: 0.2rem;
+      background-color: #fff;
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.12);
+      transition: 0.5s;
+
+      &:hover {
+        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.12);
+      }
+    }
+
+    &-name {
+      font-size: 0.9rem;
+    }
+
+    &-from {
+      font-size: 12px;
+      font-family: var(--yun-font-serif);
+      font-weight: bold;
+      color: var(--yun-c-text-light);
+
+      &::before {
+        content: '「';
+      }
+
+      &::after {
+        content: '」';
+      }
+    }
+  }
+}
+</style>

package/components/YunGoDown.vue

@@ -0,0 +1,46 @@
+<template>
+  <a class="go-down" aria-label="go-down" href="javascript:window.scrollTo(0, banner.clientHeight);">
+    <div i-ri-arrow-down-s-line inline-flex />
+  </a>
+</template>
+
+<style lang="scss">
+.go-down {
+  cursor: pointer;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  bottom: 1rem;
+  z-index: var(--yun-z-go-down);
+  animation: float 2s ease-in-out infinite;
+
+  font-size: 2.5rem;
+  color: var(--yun-c-primary);
+
+  transition: color var(--yun-transition-duration);
+
+  &:hover {
+    color: rgba(var(--yun-c-primary-rgb), 0.6);
+  }
+}
+
+@keyframes float {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  50% {
+    opacity: 0.8;
+    transform: translateY(-0.8rem);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/components/YunLinks.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { useRandomData } from '../composables'
+import { onImgError } from '../utils'
+
+export interface LinkType {
+  avatar: string
+  name: string
+  url: string
+  color: string
+  blog: string
+  desc: string
+}
+
+const props = defineProps<{
+  links: LinkType[]
+  random: boolean
+}>()
+
+const { data } = useRandomData(props.links, props.random)
+</script>
+
+<template>
+  <div class="links">
+    <ul class="link-items">
+      <li v-for="link, i in data" :key="i" class="link-item" :style="`--primary-color: ${link.color}`">
+        <a class="link-url" p="x-4 y-2" :href="link.url" :title="link.name" alt="portrait" rel="friend">
+          <div class="link-left">
+            <img class="link-avatar" w="16" h="16" loading="lazy" :src="link.avatar" :alt="link.name" :onError="onImgError">
+          </div>
+          <div class="link-info" m="l-2">
+            <div class="link-blog" font="serif black">{{ link.blog }}</div>
+            <div class="link-desc">{{ link.desc }}</div>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<stye lang="scss">
+
+.link-item {
+  display: inline-flex;
+}
+
+.links {
+  .link-items {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    padding-left: 0;
+  }
+
+  .link-url {
+    --smc-primary: var(--primary-color);
+
+    display: inline-flex;
+    text-align: center;
+    justify-self: center;
+    line-height: 1.5;
+    margin: 0.5rem;
+    transition: 0.2s;
+    color: var(--primary-color, black);
+    border: 1px solid var(--primary-color, gray);
+
+    &:hover {
+      color: white;
+      background-color: var(--primary-color, gray);
+      box-shadow: 0 2px 20px var(--primary-color, gray);
+    }
+
+    .link {
+      &-left {
+        line-height: 0;
+      }
+
+      &-avatar {
+        margin: 0;
+        display: inline-flex;
+        max-width: 100%;
+        border-radius: 50%;
+        background-color: #fff;
+        border: 1px solid var(--primary-color, gray);
+        transition: 0.5s;
+
+        &:hover {
+          box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        }
+      }
+
+      &-desc {
+        font-size: 0.8rem;
+        width: 10rem;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .link-info {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+</stye>

package/components/YunPageHeader.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{
+  color?: string
+  icon?: string
+  title?: string
+}>()
+</script>
+
+<template>
+  <header class="post-header">
+    <h1 class="post-title" p="2" text="2xl center" font="serif black" :style="`color:${color}`">
+      <div v-if="icon" class="icon" m="r-1" inline-flex :class="icon" />
+      <span>{{ title }}</span>
+    </h1>
+  </header>
+</template>

package/components/YunPostCollapse.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import type { Post } from 'valaxy'
+import { formatDate, sortByDate } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  posts: Post[]
+}>()
+
+const years = ref<number[]>([])
+const postList = ref<Record<string, Post[]>>({})
+
+watch(() => props.posts, () => {
+  postList.value = {}
+  years.value = []
+  props.posts.forEach((post) => {
+    if (post.date) {
+      const year = parseInt(formatDate(post.date, 'YYYY'))
+      if (postList.value[year]) { postList.value[year].push(post) }
+      else {
+        years.value.push(year)
+        postList.value[year] = [post]
+      }
+    }
+  })
+}, { immediate: true })
+
+const isDesc = ref(true)
+const sortedYears = computed(() => {
+  const y = years.value
+  const arr = y.sort((a, b) => b - a)
+  return isDesc.value ? arr : arr.reverse()
+})
+
+</script>
+
+<template>
+  <div class="post-collapse px-10 lt-sm:px-5">
+    <div w="full" text="center" class="yun-text-light" p="2">
+      {{ t('counter.archives', posts.length) }}
+    </div>
+
+    <div class="post-collapse-action" text="center">
+      <button class="yun-icon-btn shadow hover:shadow-md" @click="isDesc = !isDesc">
+        <div v-if="isDesc" i-ri-sort-desc />
+        <div v-else i-ri-sort-asc />
+      </button>
+    </div>
+
+    <div v-for="year in sortedYears" :key="year" m="b-6">
+      <div class="collection-title">
+        <h2 :id="`#archive-year-${year}`" class="archive-year" text="4xl" p="y-2">
+          {{ year }}
+        </h2>
+      </div>
+
+      <article v-for="post,j in sortByDate(postList[year], isDesc)" :key="j" class="post-item">
+        <header class="post-header">
+          <div class="post-meta">
+            <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>
+          </div>
+          <h2 class="post-title" font="serif black">
+            <a :href="post.path" class="post-title-link">
+              {{ post.title }}
+            </a>
+          </h2>
+        </header>
+      </article>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.post-collapse {
+  position: relative;
+
+  &-title {
+    font-size: 2rem;
+    text-align: center;
+  }
+
+  .collection-title {
+    position: relative;
+    margin: 0;
+    border-bottom: 2px solid rgba(var(--yun-c-primary-rgb), 0.6);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 2px;
+      height: 50%;
+      background: rgba(var(--yun-c-primary-rgb), 0.3);
+    }
+
+    .archive-year {
+      color: var(--yun-c-primary);
+      margin: 0 1.5rem;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 35%;
+        margin-left: -11px;
+        margin-top: -4px;
+        width: 1.5rem;
+        height: 1.5rem;
+        background: var(--yun-c-primary);
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .post-item {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 100%;
+      background: rgba(var(--yun-c-primary-rgb), 0.3);
+    }
+  }
+
+  .post-header {
+    display: flex;
+    align-items: center;
+
+    position: relative;
+    border-bottom: 1px solid rgba(var(--yun-c-primary-rgb), 0.3);
+    display: flex;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 10px;
+      height: 10px;
+      margin-left: -4px;
+      border-radius: 50%;
+      border: 1px solid var(--yun-c-primary);
+      background-color: var(--yun-c-bg-light);
+      z-index: 1;
+      transition: background var(--yun-transition-duration);
+    }
+
+    &:hover {
+      &::before {
+        background: var(--yun-c-primary);
+      }
+    }
+
+    .post-title {
+      margin-left: 0.1rem;
+      padding: 0;
+      font-size: 1rem;
+      display: inline-flex;
+      align-items: center;
+
+      .post-title-link {
+        .icon {
+          width: 1.1rem;
+          height: 1.1rem;
+          margin-right: 0.3rem;
+        }
+      }
+    }
+
+    .post-meta {
+      font-size: 1rem;
+      margin: 1rem 0 1rem 1.2rem;
+      white-space: nowrap;
+    }
+  }
+}
+
+.last-word {
+  font-size: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+</style>

package/components/YunPostMeta.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { formatDate } from 'valaxy'
+
+const { t } = useI18n()
+
+defineProps<{
+  frontmatter: Post
+}>()
+</script>
+
+<template>
+  <div v-if="frontmatter" class="post-meta justify-center" flex="~" text="sm">
+    <div v-if="frontmatter.date" class="post-time flex items-center">
+      <div class="inline-block" i-ri-calendar-line />
+      <time m="l-1" :title="t('post.posted')">{{ formatDate(frontmatter.date) }}</time>
+
+      <template v-if="frontmatter.updated && frontmatter.updated !== frontmatter.date">
+        <span m="x-2">-</span>
+        <div i-ri-calendar-2-line />
+        <time m="l-1" :title="t('post.edited')">{{ formatDate(frontmatter.updated) }}</time>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+</style>

package/components/YunPostNav.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { usePrevNext } from '~/composables'
+const [prev, next] = usePrevNext()
+</script>
+
+<template>
+  <div class="post-nav">
+    <div class="post-nav-item">
+      <router-link v-if="prev" class="post-nav-prev" :to="prev.path" :title="prev.title">
+        <div class="icon" i-ri-arrow-left-s-line />
+        <span class="title truncate" text="sm">{{ prev.title }}</span>
+      </router-link>
+    </div>
+    <div class="post-nav-item">
+      <router-link v-if="next" :to="next.path" :title="next.title" class="post-nav-next">
+        <span class="title truncate" text="sm">{{ next.title }}</span>
+        <div class="icon" i-ri-arrow-right-s-line />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use '~/styles/mixins' as *;
+
+.post-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &-item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--yun-c-primary);
+
+    outline: none;
+    font-size: 1.5rem;
+
+    font-weight: bold;
+    text-transform: uppercase;
+    height: 3rem;
+    transition: 0.4s;
+
+    &:hover {
+      background-color: rgba(var(--yun-c-primary-rgb), 0.1);
+      box-shadow: 0 0 15px rgba(black, 0.1);
+    }
+  }
+
+  &-prev {
+    padding: 0 0.6rem 0 0.1rem;
+  }
+
+  &-next {
+    padding: 0 0.1rem 0 0.6rem;
+  }
+
+  &-prev, &-next {
+    display: inline-flex;
+    align-items: center;
+
+    height: 3rem;
+
+    font-size: 1rem;
+
+    .title {
+      overflow: hidden;
+      max-width: 10rem;
+    }
+
+    .icon {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+  }
+}
+
+@include desktop {
+  .post-nav {
+    &-prev, &-next {
+      .title {
+        max-width: 18rem;
+      }
+    }
+  }
+}
+</style>

package/components/YunSay.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { useThemeConfig } from 'valaxy'
+
+const themeConfig = useThemeConfig()
+
+const sayContent = ref('')
+const sayAuthor = ref('')
+const sayFrom = ref('')
+
+/**
+ * 获取在线 API 语录
+ */
+function fetchApiToSay() {
+  const api = themeConfig.value.say.hitokoto.enable ? themeConfig.value.say.hitokoto.api : themeConfig.value.say.api
+  if (!api) return
+
+  fetch(api)
+    .then((res) => {
+      if (res.ok) {
+        res.json().then((data) => {
+          if (themeConfig.value.say.hitokoto.enable) {
+            sayContent.value = data.hitokoto
+            sayAuthor.value = data.from_who
+            sayFrom.value = data.from
+          }
+          else {
+            const sentence = data[Math.floor(Math.random() * data.length)]
+            if (sentence.content) {
+              sayContent.value = sentence.content
+              sayAuthor.value = sentence.author
+              sayFrom.value = sentence.from
+            }
+            else {
+              sayContent.value = sentence
+            }
+          }
+        })
+      }
+      else {
+        throw new Error(
+          `${themeConfig.value.say.api}, HTTP error, status = ${res.status}`,
+        )
+      }
+    })
+    .catch((err) => {
+      console.error(err.message)
+    })
+}
+
+onMounted(() => {
+  fetchApiToSay()
+})
+</script>
+
+<template>
+  <div class="say">
+    <span v-if="sayContent" class="say-content" :class="['animate-fade-in', 'animate-iteration-1']">{{ sayContent }}</span>
+    <span v-if="sayAuthor" class="say-author"> {{ sayAuthor }}</span>
+    <span v-if="sayFrom" class="say-from">{{ sayFrom }}</span>
+  </div>
+</template>
+
+<style lang="scss">
+.say {
+  color: var(--yun-c-text);
+  display: block;
+  text-align: center;
+  font-family: var(--yun-font-serif);
+  font-weight: bold;
+  padding: 0.5rem;
+  border-top: var(--yun-border-width) solid var(--yun-c-text-light);
+  border-bottom: var(--yun-border-width) solid var(--yun-c-text-light);
+
+  .say-content {
+    display: block;
+  }
+
+  .say-from {
+    display: block;
+  }
+}
+</style>