valaxy 0.0.2 → 0.0.7

package/src/client/components/PostList.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { Post } from 'valaxy'
+import { usePostList } from '~/composables'
+
+const props = withDefaults(defineProps<{
+  type?: string
+  posts?: Post[]
+  curPage?: number
+}>(), {
+  curPage: 1,
+})
+
+const pageSize = ref(7)
+
+const routes = usePostList({ type: props.type || '' })
+const posts = computed(() => props.posts || routes.value)
+const displayedPosts = computed(() => posts.value.slice((props.curPage - 1) * pageSize.value, props.curPage * pageSize.value))
+</script>
+
+<template>
+  <ul w="full" p="x-4 lt-sm:0">
+    <template v-if="!displayedPosts.length">
+      <div py2 op50>
+        博主还什么都没写哦～
+      </div>
+    </template>
+
+    <Transition v-for="route, i in displayedPosts" :key="i" name="fade">
+      <PostCard :post="route" />
+    </Transition>
+  </ul>
+
+  <ValaxyPagination :cur-page="curPage" :page-size="pageSize" :total="posts.length" />
+</template>
+
+<style lang="scss">
+.yun-card-actions {
+  border-top: 1px solid rgba(122, 122, 122, 0.15);
+  min-height: 2.5rem;
+}
+
+.post-categories {
+  color: var(--yun-c-text);
+}
+
+.post-tag {
+  color: var(--yun-c-text);
+}
+</style>

package/src/client/components/README.md

@@ -0,0 +1,7 @@
+# Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+## Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).

package/src/client/components/ValaxyCopyright.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { useConfig } from 'valaxy'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
+
+withDefaults(defineProps<{
+  url?: string
+}>(), {
+  url: '',
+})
+
+const config = useConfig()
+
+const ccVersion = (config.value.license.type === 'zero') ? '1.0' : '4.0'
+const ccPrefix = (config.value.license.type === 'zero') ? 'publicdomain' : 'licenses'
+const ccURL = computed(() => {
+  const ccLang = config.value.license.language ? config.value.license.language : (locale.value === 'zh-CN') ? 'zh' : 'en'
+  return `https://creativecommons.org/${ccPrefix}/${config.value.license.type}/${ccVersion}/deed.${ccLang}`
+})
+
+const licenseHtml = computed(() => {
+  return t('post.copyright.license_content', [`<a href="${ccURL.value}" target="_blank" rel="noopener" title="CC ${`${config.value.license.type.toUpperCase()} ${ccVersion}`} ">CC ${config.value.license.type.toUpperCase()}</a>`])
+})
+</script>
+
+<template>
+  <ul class="post-copyright">
+    <li class="post-copyright-author">
+      <strong>
+        {{ t('post.copyright.author') + t('symbol.colon') }}
+      </strong>
+      <span>{{ config.author.name }}</span>
+    </li>
+    <li v-if="url" class="post-copyright-link">
+      <strong>
+        {{ t('post.copyright.link') + t('symbol.colon') }}
+      </strong>
+      <a :href="url">
+        {{ url }}
+      </a>
+    </li>
+    <li class="post-copyright-license">
+      <strong>
+        {{ t('post.copyright.license_title') + t('symbol.colon') }}
+      </strong>
+      <span v-html="licenseHtml" />
+    </li>
+  </ul>
+</template>
+
+<style lang="scss">
+@use "~/styles/mixins" as *;
+
+.post-copyright {
+  font-size: 0.9rem;
+  padding: 0.5rem 1rem;
+  border-left: 4px solid #ff5252;
+  background-color: var(--yun-c-bg-dark);
+  list-style: none;
+  word-break: break-all;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    pointer-events: none;
+
+    position: absolute;
+    color: white;
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='gray' d='M245.8 214.9l-33.2 17.3c-9.4-19.6-25.2-20-27.4-20-22.2 0-33.3 14.6-33.3 43.9 0 23.5 9.2 43.8 33.3 43.8 14.4 0 24.6-7 30.5-21.3l30.6 15.5a73.2 73.2 0 01-65.1 39c-22.6 0-74-10.3-74-77 0-58.7 43-77 72.6-77 30.8-.1 52.7 11.9 66 35.8zm143 0l-32.7 17.3c-9.5-19.8-25.7-20-27.9-20-22.1 0-33.2 14.6-33.2 43.9 0 23.5 9.2 43.8 33.2 43.8 14.5 0 24.7-7 30.5-21.3l31 15.5c-2 3.8-21.3 39-65 39-22.7 0-74-9.9-74-77 0-58.7 43-77 72.6-77C354 179 376 191 389 214.8zM247.7 8C104.7 8 0 123 0 256c0 138.4 113.6 248 247.6 248C377.5 504 496 403 496 256 496 118 389.4 8 247.6 8zm.8 450.8c-112.5 0-203.7-93-203.7-202.8 0-105.5 85.5-203.3 203.8-203.3A201.7 201.7 0 01451.3 256c0 121.7-99.7 202.9-202.9 202.9z'/%3E%3C/svg%3E");
+    content: ' ';
+    height: 10rem;
+    width: 10rem;
+    right: -2rem;
+    top: -2rem;
+    opacity: 0.1;
+  }
+}
+</style>

package/src/client/components/ValaxyFooter.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { capitalize, computed } from 'vue'
+import { useConfig, useThemeConfig } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+import themePkg from 'valaxy-theme-yun/package.json'
+import pkg from '~/../../package.json'
+
+const { t } = useI18n()
+
+const config = useConfig()
+const themeConfig = useThemeConfig()
+
+const year = new Date().getFullYear()
+
+const isThisYear = computed(() => {
+  return year === themeConfig.value.footer.since
+})
+
+const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
+</script>
+
+<template>
+  <footer class="val-footer p-4 opacity-80" text="center sm">
+    <div v-if="themeConfig.footer.beian.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
+      <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
+        {{ themeConfig.footer.beian.icp }}
+      </a>
+    </div>
+
+    <div class="copyright flex justify-center items-center" p="1">
+      <span>
+        &copy;
+        <template v-if="!isThisYear">
+          {{ themeConfig.footer.since }} -
+        </template>
+        {{ year }}
+      </span>
+
+      <a m="x-2" class="inline-flex animate-pulse" :href="themeConfig.footer.icon.url" target="_blank" :title="themeConfig.footer.icon.title">
+        <div :class="themeConfig.footer.icon.name" />
+      </a>
+
+      <span>{{ config.author.name }}</span>
+    </div>
+
+    <div v-if="themeConfig.footer.powered" class="powered" m="2">
+      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themePkg.homepage" :title="'valaxy-theme-' + config.theme" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themePkg.version }}</span>
+    </div>
+
+    <slot />
+  </footer>
+</template>

package/src/client/components/ValaxyHamburger.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+defineProps<{
+  active?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="vt-hamburger"
+    :class="{ 'is-active': active }"
+    aria-label="mobile navigation"
+    :aria-expanded="active"
+  >
+    <span class="vt-hamburger-container">
+      <span class="vt-hamburger-top" />
+      <span class="vt-hamburger-middle" />
+      <span class="vt-hamburger-bottom" />
+    </span>
+  </button>
+</template>

package/src/client/components/ValaxyMd.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAplayer, useCodePen, useKatex } from '~/composables'
+import { wrapTable } from '~/utils'
+
+const props = defineProps<{
+  frontmatter: Post
+  excerpt?: string
+}>()
+
+const { t } = useI18n()
+
+const content = ref()
+function updateDom() {
+  wrapTable(content.value)
+}
+
+onMounted(() => {
+  updateDom()
+})
+
+// features
+if (props.frontmatter.katex)
+  useKatex()
+
+// widgets
+if (props.frontmatter.aplayer)
+  useAplayer()
+
+if (props.frontmatter.codepen)
+  useCodePen()
+</script>
+
+<template>
+  <article v-if="$slots.default" class="markdown-body">
+    <slot ref="content" @vnode-updated="updateDom" />
+
+    <div text="center">
+      <a
+        v-if="frontmatter.url"
+        :href="frontmatter.url"
+        class="post-link-btn shadow hover:shadow-md"
+        rounded
+        target="_blank"
+        m="b-4"
+      >
+        {{ t('post.view_link') }}
+      </a>
+    </div>
+
+    <slot v-if="typeof frontmatter.end !== 'undefined'" name="end">
+      <div m="y-4" class="end flex justify-center items-center">
+        <hr class="line inline-flex" w="full" m="!y-2">
+        <span p="x-4" font="serif" class="whitespace-nowrap">
+          {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
+        </span>
+        <hr class="line inline-flex" w="full" m="!y-2">
+      </div>
+    </slot>
+  </article>
+</template>
+
+<style lang="scss">
+.end {
+  .line {
+    height: 1px;
+  }
+}
+</style>

package/src/client/components/ValaxyOverlay.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  show: boolean
+}>(), {
+  show: false,
+})
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="show" class="val-overlay backdrop-filter backdrop-blur" />
+  </transition>
+</template>
+
+<style lang="scss">
+@use "sass:map";
+
+@use "~/styles/vars" as *;
+@use "~/styles/mixins" as *;
+
+.val-overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: map.get($z-index, 'sidebar') - 1;
+  transition: opacity 0.4s;
+
+  display: none;
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+}
+
+@include mobile {
+  .val-overlay {
+    display: block;
+  }
+}
+</style>

package/src/client/components/ValaxyPagination.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+const props = defineProps<{
+  /**
+   * Cur Page Number
+   */
+  curPage: number
+  /**
+   * Total Pages
+   */
+  total: number
+  /**
+   * Page Size
+   */
+  pageSize: number
+}>()
+
+const emit = defineEmits(['page-change'])
+
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
+
+/**
+ * 围绕的长度
+ */
+const surLen = computed(() => {
+  if (props.curPage === 1 || props.curPage === totalPages.value)
+    return 3
+  else
+    return 2
+})
+
+const showPage = (i: number) => {
+  if (i === 1) return true
+  else if (i === totalPages.value) return true
+  return i > props.curPage - surLen.value && i < props.curPage + surLen.value
+}
+
+const jumpTo = (page: number) => {
+  emit('page-change', page)
+  if (page === 1) return '/'
+  else return `/page/${page}`
+}
+</script>
+
+<template>
+  <nav class="pagination">
+    <router-link v-if="curPage !== 1" class="page-number" :to="jumpTo(curPage - 1)">
+      <div i-ri-arrow-left-s-line />
+    </router-link>
+
+    <template v-for="i in totalPages">
+      <router-link v-if="showPage(i)" :key="i" class="page-number" :class="curPage === i && 'active'" :to="jumpTo(i)">
+        {{ i }}
+      </router-link>
+      <span v-else-if="i === curPage - surLen" :key="`prev-space-${i}`" class="space" disabled>
+        ...
+      </span>
+      <span v-else-if="i === curPage + surLen" :key="`next-space-${i}`" class="space" disabled>
+        ...
+      </span>
+    </template>
+
+    <router-link v-if="curPage !== totalPages" class="page-number" :to="jumpTo(curPage + 1)">
+      <div i-ri-arrow-right-s-line />
+    </router-link>
+  </nav>
+</template>
+
+<style lang="scss">
+:root {
+  --page-btn-bg-color: rgba(255, 255, 255, 0.5);
+  --page-btn-hover-bg-color: var(--yun-c-primary-lighter);
+  --page-btn-active-bg-color: var(--yun-c-primary-light);
+}
+
+.dark {
+  --page-btn-bg-color: var(--yun-c-bg-light);
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .prev, .next, .page-number, .space {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+    transition: background-color var(--yun-transition-duration) ease;
+  }
+
+  .prev, .next, .page-number {
+    cursor: pointer;
+
+    color: var(--yun-c-text);
+    text-decoration: none;
+    background-color: var(--page-btn-bg-color);
+
+    &:hover {
+      color: var(--yun-c-bg);
+      background: var(--page-btn-hover-bg-color);
+    }
+
+    &:active {
+      color: var(--yun-c-bg);
+      background: var(--page-btn-active-bg-color);
+    }
+
+    &.active {
+      font-weight: normal;
+      background: var(--page-btn-active-bg-color);
+      color: var(--yun-c-bg);
+      cursor: default;
+    }
+  }
+}
+
+</style>

package/src/client/components/ValaxyRightSidebar.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import type { Post } from '../../types'
+const { t } = useI18n()
+
+defineProps<{ frontmatter: Post }>()
+</script>
+
+<template>
+  <aside class="right-sidebar val-card relative" m="l-4" text="center">
+    <h2 v-if="frontmatter.toc" m="t-6 b-2" font="serif black">
+      {{ t('sidebar.toc') }}
+    </h2>
+
+    <div class="right-sidebar-container sticky">
+      <ValaxyToc v-if="frontmatter.toc" />
+
+      <div v-if="$slots.custom" class="custom-container">
+        <slot name="custom" />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss">
+.right-sidebar {
+  width: var(--yun-sidebar-width-mobile);
+}
+.right-sidebar-container {
+  top: 1rem;
+}
+</style>

package/src/client/components/ValaxySidebar.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { useLayout } from '~/composables'
+import { useAppStore } from '~/stores/app'
+
+const app = useAppStore()
+const isHome = useLayout('home')
+</script>
+
+<template>
+  <ValaxyOverlay :show="app.isSidebarOpen" @click="app.toggleSidebar()" />
+
+  <ValaxyHamburger :active="app.isSidebarOpen" class="menu-btn sidebar-toggle yun-icon-btn" :class="isHome ? '' : 'md:hidden'" @click="app.toggleSidebar()" />
+
+  <aside class="val-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
+    <YunSidebar />
+
+    <YunConfig />
+  </aside>
+</template>
+
+<style lang="scss">
+@use "sass:map";
+
+@use "~/styles/vars" as *;
+
+.menu-btn {
+  display: inline-flex;
+  position: fixed;
+  left: 0.8rem;
+  top: 0.6rem;
+  line-height: 1;
+  z-index: map.get($z-index, 'menu-btn');
+  cursor: pointer;
+}
+</style>

package/src/client/components/ValaxyToc.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+import { useActiveSidebarLinks } from '~/composables'
+
+const route = useRoute()
+const headers = computed(() => route.meta.headers)
+
+useActiveSidebarLinks()
+
+function getStylesByLevel(level: number) {
+  return {
+    fontSize: `${(6 - level) * 0.2 + 0.4}rem`,
+    paddingLeft: `${level * 1 - 1}rem`,
+  }
+}
+
+// todo mobile toc widget
+</script>
+
+<template>
+  <ul class="val-toc" p="l-4">
+    <li v-for="header, i in headers" :key="i" :style="getStylesByLevel(header.level)">
+      <a class="toc-link-item" :href="`#${header.slug}`">{{ header.title }}</a>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss">
+.val-toc {
+  top: 10px;
+  width: var(--yun-sidebar-width-mobile);
+
+  background-color: var(--yun-c-bg-light);
+
+  font-size: 1rem;
+  font-family: var(--yun-font-serif);
+  font-weight: 900;
+  line-height: 1.6;
+
+  text-align: left;
+
+  a {
+    display: block;
+    color: var(--c-toc-link);
+    transition: color var(--yun-transition-duration);
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:hover {
+      color: var(--yun-c-text);
+    }
+  }
+
+  .toc-link-item {
+    color: var(--yun-c-text-light);
+
+    &:hover {
+      color: var(--yun-c-text);
+    }
+
+    &.active {
+      color: var(--yun-c-primary);
+    }
+  }
+}
+</style>

package/src/client/composables/category.ts

@@ -0,0 +1,101 @@
+import type { Post } from 'valaxy'
+import { usePostList } from './post'
+
+export interface ParentCategory {
+  total: number
+  children: Categories
+}
+
+export interface PostCategory {
+  total: number
+  posts: Post[]
+}
+
+export type Category = ParentCategory | PostCategory
+
+// export type Categories = Map<string, Post[] | Category>
+export type Categories = Map<string, Category>
+
+/**
+ * get categories from posts
+ * @returns
+ */
+export function useCategory() {
+  const posts = usePostList()
+
+  const categoryMap: Category = {
+    total: posts.value.length,
+    children: new Map([
+      ['Uncategorized', { total: 0, posts: [] }],
+    ]),
+  }
+
+  const uncategorized = categoryMap.children.get('Uncategorized') as PostCategory
+
+  posts.value.forEach((post) => {
+    if (post.categories) {
+      if (Array.isArray(post.categories)) {
+        const len = post.categories.length
+
+        let c: ParentCategory = categoryMap
+        post.categories.forEach((category, i) => {
+          if (i === len - 1) {
+            if (c.children.has(category)) {
+              const cur = c.children.get(category) as PostCategory
+              if (cur.posts) {
+                cur.total += 1
+                cur.posts!.push(post)
+              }
+            }
+            else {
+              c.children?.set(category, {
+                total: 1,
+                posts: [post],
+              })
+            }
+          }
+          else {
+            if (c.children?.has(category)) {
+              const cur = c.children.get(category) as ParentCategory
+              cur.total += 1
+              c = cur
+            }
+            else {
+              const temp = {
+                total: 1,
+                children: new Map(),
+              }
+              c.children?.set(category, temp)
+              c = temp
+            }
+          }
+        })
+      }
+      else {
+        // for string
+        const category = post.categories
+        if (categoryMap.children.has(category)) {
+          const cur = categoryMap.children.get(category) as PostCategory
+          cur.total += 1
+          cur.posts.push(post)
+        }
+        else {
+          categoryMap.children.set(category, {
+            total: 1,
+            posts: [post],
+          })
+        }
+      }
+    }
+    else {
+      uncategorized.total += 1
+      uncategorized.posts.push(post)
+    }
+  })
+
+  // clear uncategorized
+  if (uncategorized!.total === 0)
+    categoryMap.children?.delete('Uncategorized')
+
+  return categoryMap
+}

package/src/client/composables/comments/index.ts

@@ -0,0 +1 @@
+export * from './waline'