valaxy-theme-yun 0.0.5

package/layouts/404.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <YunBase>
+    <template #content>
+      <div text="center">
+        <div text-4xl>
+          <div i-ri-alarm-warning-line inline-block />
+        </div>
+        <router-view />
+        <div>
+          <button btn text-sm m="3 t8" @click="router.back()">
+            {{ t('button.back') }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </YunBase>
+</template>

package/layouts/archives.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { useFrontmatter, usePostList } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const frontmatter = useFrontmatter()
+const postList = usePostList()
+</script>
+
+<template>
+  <YunBase>
+    <template #header>
+      <YunPageHeader :title="frontmatter.title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
+    </template>
+    <template #content>
+      <router-view />
+      <YunPostCollapse :posts="postList" />
+    </template>
+  </YunBase>
+</template>

package/layouts/base.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { useConfig, useFrontmatter, usePostProperty } from 'valaxy'
+const frontmatter = useFrontmatter()
+
+const config = useConfig()
+
+const { styles, icon, color } = usePostProperty(frontmatter.value.type)
+</script>
+
+<template>
+  <ValaxySidebar />
+
+  <main class="yun-main flex lt-md:ml-0">
+    <div flex="~ 1 col" w="full" p="l-4 lt-md:0">
+      <YunCard m="0" p="4" class="page-card sm:p-6 lg:px-12 xl:px-16" :style="styles">
+        <slot name="header">
+          <YunPageHeader :title="frontmatter.title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
+        </slot>
+        <template #content>
+          <slot name="content">
+            <router-view />
+          </slot>
+        </template>
+      </YunCard>
+
+      <slot :frontmatter="frontmatter" />
+
+      <slot name="nav">
+        <YunPostNav v-if="frontmatter.nav !== false" />
+      </slot>
+
+      <slot v-if="frontmatter.comment !== false" name="comment">
+        <YunCard v-if="config.comment.waline.enable" w="full" p="4" class="comment sm:p-8 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
+          <YunWaline />
+        </YunCard>
+      </slot>
+
+      <ValaxyFooter>
+        <slot name="footer" />
+      </ValaxyFooter>
+    </div>
+
+    <slot name="right-sidebar">
+      <ValaxyRightSidebar :frontmatter="frontmatter" class="lt-xl:hidden">
+        <template #custom>
+          <slot name="right-custom" />
+        </template>
+      </ValaxyRightSidebar>
+    </slot>
+  </main>
+
+  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+  <YunBackToTop />
+</template>
+
+<style lang="scss">
+@use '~/styles/mixins' as *;
+@include xl {
+  .page-card {
+    // 8px scrollbar width
+    max-width: calc(100vw - 2 * var(--yun-sidebar-width-mobile) - 2rem - 8px);
+  }
+}
+</style>

package/layouts/categories.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useCategory, useFrontmatter, useInvisibleElement, usePostList } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const { t } = useI18n()
+
+const frontmatter = useFrontmatter()
+const categories = useCategory()
+
+const route = useRoute()
+const curCategory = computed(() => (route.query.category as string || ''))
+
+const postList = usePostList()
+const posts = computed(() => {
+  const list = postList.value.filter((post) => {
+    if (post.categories) {
+      if (typeof post.categories === 'string')
+        return post.categories === curCategory.value
+      else
+        return post.categories.includes(curCategory.value)
+    }
+    return false
+  })
+  return list
+})
+
+const collapse = ref()
+const { show } = useInvisibleElement(collapse)
+
+const router = useRouter()
+const displayCategory = (category: string) => {
+  router.push({
+    query: {
+      category,
+    },
+  })
+
+  show()
+}
+</script>
+
+<template>
+  <YunBase>
+    <template #header>
+      <YunPageHeader
+        :title="frontmatter.title || t('menu.categories')"
+        :icon="frontmatter.icon || 'i-ri-folder-2-line'"
+        :color="frontmatter.color"
+      />
+    </template>
+    <template #content>
+      <div text="center" class="yun-text-light" p="2">
+        {{ t('counter.categories', categories.children!.size ) }}
+      </div>
+      <YunCategories :categories="categories.children!" :display-category="displayCategory" />
+      <router-view />
+    </template>
+
+    <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
+      <YunPageHeader m="t-4" :title="curCategory" icon="i-ri-folder-open-line" />
+      <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+    </YunCard>
+  </YunBase>
+</template>

package/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <YunBase>
+    <template #content>
+      <router-view />
+    </template>
+  </YunBase>
+</template>

package/layouts/home.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { useLayout } from '~/composables'
+
+import { useAppStore } from '~/stores/app'
+const app = useAppStore()
+
+const config = useConfig()
+
+const isHome = useLayout('home')
+</script>
+
+<template>
+  <main class="yun-main justify-center items-center" :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full">
+    <ValaxySidebar />
+    <YunBanner />
+    <YunSay w="full" />
+
+    <router-view />
+
+    <ValaxyFooter>
+      <slot name="footer" />
+    </ValaxyFooter>
+  </main>
+
+  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+</template>

package/layouts/post.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useConfig, useFrontmatter, useFullUrl } from 'valaxy'
+
+const config = useConfig()
+const frontmatter = useFrontmatter()
+const url = useFullUrl()
+</script>
+
+<template>
+  <YunBase>
+    <template #content>
+      <main text="left" m="auto" p="t-0 b-2">
+        <slot name="header">
+          <YunPostMeta :frontmatter="frontmatter" />
+        </slot>
+        <router-view />
+        <YunSponsor v-if="frontmatter.sponsor || config.sponsor.enable" />
+        <ValaxyCopyright v-if="frontmatter.copyright || config.license.enabled" :url="url" m="y-4" />
+      </main>
+    </template>
+  </YunBase>
+</template>

package/layouts/tags.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { useFrontmatter, useInvisibleElement, usePostList, useTags } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const { t } = useI18n()
+const frontmatter = useFrontmatter()
+const { tags, getTagStyle } = useTags()
+
+const postList = usePostList()
+const curTag = computed(() => route.query.tag as string || '')
+
+const posts = computed(() => {
+  const list = postList.value.filter((post) => {
+    if (post.tags) {
+      if (typeof post.tags === 'string')
+        return post.tags === curTag.value
+      else
+        return post.tags.includes(curTag.value)
+    }
+    return false
+  })
+  return list
+})
+
+const collapse = ref()
+const { show } = useInvisibleElement(collapse)
+
+const displayTag = (tag: string) => {
+  router.push({
+    query: {
+      tag,
+    },
+  })
+
+  show()
+}
+
+</script>
+
+<template>
+  <YunBase>
+    <template #header>
+      <YunPageHeader
+        :title="frontmatter.title || t('menu.tags')"
+        :icon="frontmatter.icon || 'i-ri-tag-line'"
+        :color="frontmatter.color"
+      />
+    </template>
+    <template #content>
+      <div class="yun-text-light" text="center" p="2">
+        {{ t('counter.tags', Array.from(tags).length) }}
+      </div>
+
+      <div text="center">
+        <span v-for="[key, tag] in Array.from(tags).sort()" :key="key" class="post-tag cursor-pointer" :style="getTagStyle(tag.count)" p="1" @click="displayTag(key.toString())">
+          #{{ key }}<span text="xs">[{{ tag.count }}]</span>
+        </span>
+      </div>
+
+      <router-view />
+    </template>
+
+    <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
+      <YunPageHeader m="t-4" :title="curTag" icon="i-ri-hashtag" />
+      <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+    </YunCard>
+  </YunBase>
+</template>
+
+<style lang="scss">
+.post-tag {
+  color: var(--yun-tag-color);
+
+  &:hover {
+    color: var(--yun-c-primary);
+  }
+}
+</style>

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "valaxy-theme-yun",
+  "version": "0.0.5",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun"
+  },
+  "homepage": "https://valaxy.yyj.moe/",
+  "dependencies": {
+    "@iconify-json/ant-design": "^1.1.1",
+    "@iconify-json/simple-icons": "^1.1.6"
+  },
+  "author": {
+    "email": "me@yunyoujun.cn",
+    "name": "YunYouJun",
+    "url": "https://www.yunyoujun.cn"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "readme": "<p align='center'>\n  <img width=\"200\" src=\"https://cdn.jsdelivr.net/gh/YunYouJun/yun/images/meme/yun-good-alpha-compressed.png\">\n</p>\n\n<p align='center'>\nTheme-Yun<sup><em>(vue)</em></sup>\n</p>\n\n## Usage\n\nTODO\n\n### Development\n\nJust run and visit <http://localhost:3333>\n\n```bash\npnpm dev\n```\n\n### Build\n\n```bash\npnpm build\n```\n\n## [Sponsors](https://sponsors.yunyoujun.cn)\n\n<p align=\"center\">\n  <a href=\"https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg\">\n    <img src='https://cdn.jsdelivr.net/gh/YunYouJun/sponsors/public/sponsors.svg'/>\n  </a>\n</p>\n"
+}

package/styles/index.scss

@@ -0,0 +1,2 @@
+@use './layout' as *;
+@use './markdown' as *;

package/styles/layout/index.scss

@@ -0,0 +1,7 @@
+@use "~/styles/mixins" as *;
+@use "./post" as *;
+
+.yun-main {
+  padding-left: var(--yun-sidebar-width-mobile);
+  transition: padding-left var(--yun-transition-duration);
+}

package/styles/layout/post.scss

@@ -0,0 +1,86 @@
+@use 'sass:map';
+@use '~/styles/mixins' as *;
+@use '~/styles/palette.scss' as *;
+
+.post-card {
+  position: relative;
+  max-width: 900px;
+}
+
+
+.post-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .icon {
+    font-size: 1.4rem;
+  }
+}
+
+.post-title-link {
+  position: relative;
+  padding: 0.7rem 1.2rem;
+  color: var(--card-c-primary, var(--yun-c-link));
+
+  .icon {
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-right: 0.4rem;
+  }
+
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    opacity: 0;
+    border: 2px solid;
+    transition: 0.3s;
+    transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-width: 2px 0 0 2px;
+    transform: translate3d(10px, 10px, 0);
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-width: 0 2px 2px 0;
+    transform: translate3d(-10px, -10px, 0);
+  }
+
+  &:hover::before, &:hover::after {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.post-top-icon {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  color: var(--yun-c-warning);
+  font-size: 1.2rem;
+}
+
+.post-link-btn,
+.markdown-body .post-link-btn {
+  background-color: var(--card-c-primary);
+  line-height: 1.2;
+  padding: 0.5rem 1rem;
+  color: white;
+  font-size: 14px;
+
+  margin-top: -0.2rem;
+
+  transition: box-shadow var(--yun-transition-duration);
+
+  &:before {
+    content: none;
+  }
+}

package/styles/markdown.scss

@@ -0,0 +1,31 @@
+@use "~/styles/mixins" as *;
+
+.markdown-body {
+  --smc-font-family: var(--yun-font-sans);
+
+  --c-toc-link: var(--yun-c-text-light);
+}
+
+html.dark {
+  .markdown-body {
+    --smc-header-bottom-color: #333;
+
+    --c-toc-link: var(--yun-c-text-dark);
+  }
+}
+
+.markdown-body {
+  ul {
+    > li {
+      list-style-type: disc;
+
+      li {
+        list-style-type: circle;
+
+        li {
+          list-style-type: square;
+        }
+      }
+    }
+  }
+}

package/styles/vars.scss

@@ -0,0 +1,7 @@
+:root {
+  --yun-sidebar-bg-image: url("https://cdn.jsdelivr.net/gh/YunYouJun/cdn@master/img/bg/alpha-stars-timing-1.webp")
+}
+
+html.dark {
+  --yun-sidebar-bg-image: none;
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig((options) => {
+  return {
+    entry: ['index.ts'],
+    splitting: true,
+    // disable for dev watch before valaxy watch
+    clean: !options.watch,
+    dts: true,
+    format: ['cjs', 'esm'],
+    minify: !options.watch,
+  }
+})

package/utils/index.ts

@@ -0,0 +1,5 @@
+import { anonymousImage } from '../config'
+
+export const onImgError = (e: Event) => {
+  (e.target as HTMLImageElement).src = anonymousImage
+}