valaxy-theme-yun 0.14.17 → 0.14.18

package/App.vue

@@ -17,6 +17,7 @@ const themeConfig = useThemeConfig()
 </script>
 
 <template>
+  <YunFireworks v-if="themeConfig.fireworks.enable" />
   <slot name="bg">
     <YunBg v-if="themeConfig.bg_image.enable" />
   </slot>

package/components/YunFireworks.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { useThemeConfig } from 'valaxy/client'
+import { onMounted } from 'vue'
+import { createFireworks } from '../features/fireworks'
+
+const themeConfig = useThemeConfig()
+
+onMounted(() => {
+  createFireworks({
+    selector: 'canvas.fireworks',
+    colors: themeConfig.value.fireworks.colors,
+  })
+})
+</script>
+
+<template>
+  <canvas class="fireworks" />
+</template>
+
+<style>
+canvas.fireworks {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+</style>

package/features/fireworks.ts

@@ -0,0 +1,246 @@
+/**
+ * @see https://codepen.io/juliangarnier/pen/gmOwJX
+ * inherited from hexo-theme-yun
+ * customized by valaxy-theme-yun
+ * @author YunYouJun
+ */
+
+import anime from 'animejs/lib/anime.es.js'
+import { TinyColor } from '@ctrl/tinycolor'
+
+interface MinMax {
+  min: number
+  max: number
+}
+
+interface FireworksConfig {
+  selector: string
+  colors: string[]
+  numberOfParticles: number
+  orbitRadius: MinMax
+  circleRadius: MinMax
+  diffuseRadius: MinMax
+  animeDuration: MinMax
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Particle extends Point {
+  color: string
+  radius: number
+  endPos: Point
+  draw(): void
+}
+
+/**
+ * 创建烟花
+ * @param config
+ */
+export function createFireworks(config: Partial<FireworksConfig>) {
+  const defaultColors = ['#66A7DD', '#3E83E1', '#214EC2']
+
+  const {
+    colors = defaultColors,
+    selector = 'canvas.fireworks',
+    // sky blue
+    numberOfParticles = 20,
+    circleRadius = {
+      min: 10,
+      max: 20,
+    },
+    diffuseRadius = {
+      min: 50,
+      max: 100,
+    },
+    orbitRadius = {
+      min: 50,
+      max: 100,
+    },
+    animeDuration = {
+      min: 900,
+      max: 1500,
+    },
+  } = config
+
+  let pointerX = 0
+  let pointerY = 0
+
+  const canvasEl = document.querySelector(selector) as HTMLCanvasElement
+  const ctx = canvasEl.getContext('2d')
+
+  if (!ctx)
+    return
+
+  /**
+   * 设置画布尺寸
+   */
+  function setCanvasSize(canvasEl: HTMLCanvasElement) {
+    canvasEl.width = window.innerWidth
+    canvasEl.height = window.innerHeight
+    canvasEl.style.width = `${window.innerWidth}px`
+    canvasEl.style.height = `${window.innerHeight}px`
+  }
+
+  /**
+   * update pointer
+   * @param e
+   */
+  function updateCoords(e: MouseEvent | TouchEvent) {
+    pointerX
+      = 'clientX' in e
+        ? e.clientX
+        : (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX)
+    pointerY
+      = 'clientY' in e
+        ? e.clientY
+        : (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY)
+  }
+
+  function setParticleDirection(p: Point) {
+    const angle = (anime.random(0, 360) * Math.PI) / 180
+    const value = anime.random(
+      diffuseRadius.min,
+      diffuseRadius.max,
+    )
+    const radius = [-1, 1][anime.random(0, 1)] * value
+    return {
+      x: p.x + radius * Math.cos(angle),
+      y: p.y + radius * Math.sin(angle),
+    }
+  }
+
+  /**
+   * 在指定位置创建粒子
+   * @param {number} x
+   * @param {number} y
+   * @returns
+   */
+  function createParticle(x: number, y: number) {
+    const tinyColor = new TinyColor(colors[anime.random(0, colors.length - 1)])
+    tinyColor.setAlpha(anime.random(0.2, 0.8))
+
+    const p: Particle = {
+      x,
+      y,
+      color: tinyColor.toRgbString(),
+      radius: anime.random(circleRadius.min, circleRadius.max),
+      endPos: setParticleDirection({ x, y }),
+      draw: () => {},
+    }
+
+    p.draw = function () {
+      if (!ctx)
+        return
+
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.fillStyle = p.color
+      ctx.fill()
+    }
+    return p
+  }
+
+  function createCircle(x: number, y: number) {
+    const p = {
+      x,
+      y,
+      color: '#000',
+      radius: 0.1,
+      alpha: 0.5,
+      lineWidth: 6,
+      draw() {},
+    }
+
+    p.draw = () => {
+      if (!ctx)
+        return
+
+      ctx.globalAlpha = p.alpha
+      ctx.beginPath()
+      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
+      ctx.lineWidth = p.lineWidth
+      ctx.strokeStyle = p.color
+      ctx.stroke()
+      ctx.globalAlpha = 1
+    }
+    return p
+  }
+
+  function renderParticle(anim: anime.AnimeInstance) {
+    for (let i = 0; i < anim.animatables.length; i++) {
+      const target = anim.animatables[i].target as any as Particle
+      target.draw()
+    }
+  }
+
+  function animateParticles(x: number, y: number) {
+    const circle = createCircle(x, y)
+    const particles = []
+    for (let i = 0; i < numberOfParticles; i++)
+      particles.push(createParticle(x, y))
+
+    anime
+      .timeline()
+      .add({
+        targets: particles,
+        x(p: Particle) {
+          return p.endPos.x
+        },
+        y(p: Particle) {
+          return p.endPos.y
+        },
+        radius: 0.1,
+        duration: anime.random(
+          animeDuration.min,
+          animeDuration.max,
+        ),
+        easing: 'easeOutExpo',
+        update: renderParticle,
+      })
+      .add(
+        {
+          targets: circle,
+          radius: anime.random(orbitRadius.min, orbitRadius.max),
+          lineWidth: 0,
+          alpha: {
+            value: 0,
+            easing: 'linear',
+            duration: anime.random(600, 800),
+          },
+          duration: anime.random(1200, 1800),
+          easing: 'easeOutExpo',
+          update: renderParticle,
+        },
+        0,
+      )
+  }
+
+  const render = anime({
+    duration: Infinity,
+    update: () => {
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
+    },
+  })
+
+  document.addEventListener(
+    'mousedown',
+    (e) => {
+      render.play()
+      updateCoords(e)
+      animateParticles(pointerX, pointerY)
+    },
+    false,
+  )
+
+  setCanvasSize(canvasEl)
+  window.addEventListener(
+    'resize',
+    () => {
+      setCanvasSize(canvasEl)
+    },
+    false,
+  )
+}

package/layouts/archives.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
 import { useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
@@ -8,6 +9,12 @@ const frontmatter = useFrontmatter()
 
 const title = usePostTitle(frontmatter)
 const site = useSiteStore()
+
+useSchemaOrg([
+  defineWebPage({
+    '@type': 'CollectionPage',
+  }),
+])
 </script>
 
 <template>

package/layouts/categories.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useCategory, useFrontmatter, usePostTitle, useSiteStore } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
 
 const { t } = useI18n()
 
@@ -29,6 +30,12 @@ const posts = computed(() => {
 })
 
 const title = usePostTitle(frontmatter)
+
+useSchemaOrg([
+  defineWebPage({
+    '@type': 'CollectionPage',
+  }),
+])
 </script>
 
 <template>

package/layouts/post.vue

@@ -2,6 +2,8 @@
 import { computed } from 'vue'
 import { useFrontmatter, useFullUrl, useSiteConfig } from 'valaxy'
 
+import { defineArticle, useSchemaOrg } from '@vueuse/schema-org'
+
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 const url = useFullUrl()
@@ -12,6 +14,20 @@ const showSponsor = computed(() => {
 
   return siteConfig.value.sponsor.enable
 })
+
+useSchemaOrg(
+  defineArticle({
+    '@type': 'BlogPosting',
+    'headline': frontmatter.value.title,
+    'description': frontmatter.value.description,
+    'author': [
+      {
+        name: siteConfig.value.author.name,
+        url: siteConfig.value.author.link,
+      },
+    ],
+  }),
+)
 </script>
 
 <template>

package/layouts/tags.vue

@@ -3,8 +3,15 @@ import { useFrontmatter, useInvisibleElement, usePostTitle, useSiteStore, useTag
 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'
 
+useSchemaOrg([
+  defineWebPage({
+    '@type': 'CollectionPage',
+  }),
+])
+
 const route = useRoute()
 const router = useRouter()
 

package/node/config.ts

@@ -31,6 +31,11 @@ export const defaultThemeConfig: ThemeConfig = {
     },
   },
 
+  fireworks: {
+    enable: true,
+    colors: ['#66A7DD', '#3E83E1', '#214EC2'],
+  },
+
   notice: {
     enable: false,
     content: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.14.17",
+  "version": "0.14.18",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -18,10 +18,12 @@
   "types": "types/index.d.ts",
   "dependencies": {
     "@iconify-json/ant-design": "^1.1.5",
-    "@iconify-json/simple-icons": "^1.1.46",
+    "@iconify-json/simple-icons": "^1.1.47",
+    "animejs": "^3.2.1",
     "valaxy-addon-waline": "0.1.0"
   },
   "devDependencies": {
-    "valaxy": "0.14.17"
+    "@types/animejs": "^3.1.7",
+    "valaxy": "0.14.18"
   }
 }

package/types/index.d.ts

@@ -109,6 +109,20 @@ export interface ThemeConfig {
     content: string
   }
 
+  /**
+   * @en - Fireworks when click
+   * @zh - 点击时的烟花效果
+   */
+  fireworks: {
+    enable: boolean
+    /**
+     * @en - Fireworks colors
+     * @zh - 烟花颜色
+     * @default ['#66A7DD', '#3E83E1', '#214EC2']
+     */
+    colors?: string[]
+  }
+
   /**
    * @en - Pages
    * @zh - 页面，显示在社交导航栏下方