valaxy-theme-yun 0.14.26 → 0.14.28

package/components/ValaxyMain.vue

@@ -38,6 +38,8 @@ const aside = computed(() => props.frontmatter.aside !== false)
               <slot name="main-content">
                 <Transition appear>
                   <ValaxyMd :frontmatter="frontmatter">
+                    <YunMdTimeWarning :frontmatter="frontmatter" />
+
                     <slot name="main-content-md" />
                     <slot />
                   </ValaxyMd>
@@ -76,7 +78,7 @@ const aside = computed(() => props.frontmatter.aside !== false)
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 @include screen('md') {
   .yun-main {

package/components/YunAside.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { useFrontmatter } from 'valaxy'
-import { useAppStore } from 'valaxy/client/stores/app'
+import { useAppStore, useFrontmatter } from 'valaxy'
 
 const frontmatter = useFrontmatter()
 const { t } = useI18n()
@@ -20,7 +19,7 @@ const app = useAppStore()
   <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
 
   <!--  -->
-  <aside class="va-card aside" :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center">
+  <aside class="va-card yun-aside" :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center">
     <div class="aside-container" flex="~ col" overflow="auto">
       <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
         {{ t('sidebar.toc') }}
@@ -38,9 +37,9 @@ const app = useAppStore()
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
-.aside {
+.yun-aside {
   position: fixed;
   right: 0;
   top: 0;
@@ -70,7 +69,7 @@ const app = useAppStore()
 }
 
 @include screen('xl') {
-  .aside {
+  .yun-aside {
     transform: translateX(0);
   }
 }

package/components/YunBg.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
-import { useThemeConfig } from 'valaxy-theme-yun/composables'
 import { useCssVar } from '@vueuse/core'
 import { isDark } from 'valaxy'
+import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
 
@@ -28,7 +28,7 @@ watch(() => bgImgUrl.value, () => {
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .va-bg {
   position: fixed;

package/components/YunCloud.vue

@@ -15,7 +15,7 @@
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .yun-cloud {
   display: flex;

package/components/YunFireworks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useThemeConfig } from 'valaxy/client'
+import { useThemeConfig } from 'valaxy'
 import { onMounted } from 'vue'
 import { createFireworks } from '../features/fireworks'
 

package/components/YunMdTimeWarning.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import type { Post } from 'valaxy'
+
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  frontmatter: Post
+}>()
+
+dayjs.extend(relativeTime)
+
+const { t } = useI18n()
+
+/**
+ * when the post is updated more than 30 days ago, show a warning
+ * default 30 days, you can set `time_warning` in frontmatter to change it
+ */
+const time_warning = computed(() => {
+  const diff = dayjs().valueOf() - dayjs(props.frontmatter.updated).valueOf()
+  if (typeof props.frontmatter.time_warning === 'number')
+    return diff > props.frontmatter.time_warning
+  else
+    return props.frontmatter.time_warning || diff > 30 * 24 * 60 * 60 * 1000
+})
+</script>
+
+<template>
+  <blockquote v-if="time_warning" op="80">
+    {{ t('post.time_warning', { ago: dayjs(frontmatter.updated).fromNow() }) }}
+  </blockquote>
+</template>

package/components/YunOverview.vue

@@ -42,7 +42,7 @@ const router = useRouter()
 </template>
 
 <style lang="scss">
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 
 .sidebar-panel {
   padding: 0.5rem;

package/components/YunPostNav.vue

@@ -22,7 +22,7 @@ const [prev, next] = usePrevNext()
 </template>
 
 <style lang="scss">
-@use 'valaxy/client/styles/mixins' as *;
+@use 'valaxy/client/styles/mixins/index.scss' as *;
 
 .post-nav {
   display: flex;

package/components/YunSearchTrigger.vue

@@ -35,7 +35,7 @@ const YunAlgoliaSearch = isAlgolia.value
 
 <style lang="scss">
 @use 'sass:map';
-@use 'valaxy/client/styles/vars' as *;
+@use 'valaxy/client/styles/vars.scss' as *;
 
 .search-btn {
   position: fixed;

package/components/YunSidebarNav.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCategory, useSiteStore, useTag } from 'valaxy'
+import { useCategories, useSiteStore, useTags } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useThemeConfig } from '../composables'
 
@@ -8,8 +8,8 @@ const { t } = useI18n()
 const site = useSiteStore()
 
 const themeConfig = useThemeConfig()
-const categories = useCategory()
-const tags = useTag()
+const categories = useCategories()
+const tags = useTags()
 </script>
 
 <template>
@@ -38,7 +38,7 @@ const tags = useTag()
 </template>
 
 <style lang="scss">
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 
 .site-nav {
   display: flex;

package/components/YunSponsor.vue

@@ -41,7 +41,7 @@ const sponsorBtnTitle = computed(() => {
 </template>
 
 <style lang="scss">
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 .sponsor-button {
   background-color: rgba(255, 255, 255, 0.1);
 

package/composables/index.ts

@@ -1,3 +1,4 @@
 export * from './config'
 export * from './helper'
 export * from './post'
+export * from './tags'

package/composables/tags.ts

@@ -0,0 +1,36 @@
+import { TinyColor } from '@ctrl/tinycolor'
+import { useTags } from 'valaxy'
+
+/**
+ * get utils about tags
+ */
+export function useYunTags(options: {
+  /**
+   * Primary Color
+   */
+  primary: string
+} = {
+  primary: '#0078E7',
+}) {
+  const tags = useTags()
+
+  const gray = new TinyColor('#999999')
+  const primaryColor = new TinyColor(options.primary)
+
+  const getTagStyle = (count: number) => {
+    const counts = Array.from(tags.value).map(([_, value]) => value.count)
+    const max = Math.max(...counts)
+    const min = Math.min(...counts)
+    const range = max - min
+    const percent = (count - min) / range
+    return {
+      '--yun-tag-color': gray.mix(primaryColor, percent * 100).toString(),
+      'fontSize': `${percent * 36 + 12}px`,
+    }
+  }
+
+  return {
+    tags,
+    getTagStyle,
+  }
+}

package/layouts/categories.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useCategory, useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
+import { useCategories, useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
@@ -12,7 +12,7 @@ const frontmatter = useFrontmatter()
 
 const route = useRoute()
 const curCategory = computed(() => (route.query.category as string || ''))
-const categories = useCategory()
+const categories = useCategories()
 
 const posts = computed(() => {
   const list = site.postList.filter((post) => {

package/layouts/tags.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore, useTags } from 'valaxy'
+import { useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
-import { useThemeConfig } from '../composables'
+import { useThemeConfig, useYunTags } from '../composables'
 
 useSchemaOrg([
   defineWebPage({
@@ -19,7 +19,7 @@ const themeConfig = useThemeConfig()
 
 const { t } = useI18n()
 const frontmatter = useFrontmatter()
-const { tags, getTagStyle } = useTags({
+const { tags, getTagStyle } = useYunTags({
   primary: themeConfig.value.colors.primary,
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.26",
+  "version": "0.14.28",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.7",
-    "valaxy": "0.14.26"
+    "valaxy": "0.14.28"
   }
 }

package/styles/common/markdown.scss

@@ -1,4 +1,4 @@
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 
 .markdown-body {
   --smc-font-family: var(--va-font-sans);

package/styles/css-vars.scss

@@ -1,5 +1,5 @@
 @use "./vars" as *;
-@use "valaxy/client/styles/mixins" as * with($namespace: "yun");
+@use "valaxy/client/styles/mixins/index.scss" as * with($namespace: "yun");
 
 :root {
   @include set-css-var-from-map($common);

package/styles/layout/index.scss

@@ -1,6 +1,10 @@
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 @use "./post" as *;
 
+html {
+  overflow-y: scroll;
+}
+
 .yun-main {
   padding-left: var(--va-sidebar-width);
   transition: padding-left var(--va-transition-duration);

package/styles/layout/post.scss

@@ -1,4 +1,4 @@
-@use "valaxy/client/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 
 .post-card {
   position: relative;