valaxy-theme-hairy 0.1.0 → 0.1.2

package/components/HairyFooter.vue

@@ -2,8 +2,8 @@
 import { capitalize, computed } from 'vue'
 import { useConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-
 import pkg from 'valaxy/package.json'
+import HairyFooterFish from './HairyFooterFish.vue'
 
 const { t } = useI18n()
 
@@ -21,38 +21,39 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
 </script>
 
 <template>
-  <footer v-if="themeConfig.footer" class="va-footer p-4 pt-5 pb-14" text="center sm" style="color:var(--va-c-text-light)">
-    <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 v-if="footerIcon" class="inline-flex animate-pulse ml-2" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
-        <div :class="footerIcon.name" />
-      </a>
-
-      <span>{{ config.author.name }}</span>
-      <span class="mx-2">|</span>
-      <span v-if="config.comment.waline" class="flex items-center">
-        <div class="i-ri-eye-fill mr-1" />
-        <span class="waline-pageview-count" data-path="/">1</span>
-      </span>
-    </div>
-
-    <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="`valaxy-theme-${config.theme}`" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+  <footer v-if="themeConfig.footer" class="va-footer pt-5" text="center sm" style="color:var(--va-c-text-light); overflow-x: hidden;">
+    <div class="z-5 relative">
+      <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 v-if="footerIcon" class="inline-flex animate-pulse ml-2" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
+          <div :class="footerIcon.name" />
+        </a>
+
+        <span>{{ config.author.name }}</span>
+        <span class="mx-2">|</span>
+        <span v-if="config.comment.waline" class="flex items-center">
+          <div class="i-ri-eye-fill mr-1" />
+          <span class="waline-pageview-count" data-path="/">1</span>
+        </span>
+      </div>
+      <div v-if="themeConfig.footer.powered" class="powered" m="2">
+        <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="`valaxy-theme-${config.theme}`" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      </div>
     </div>
 
     <slot />
+    <HairyFooterFish />
   </footer>
 </template>

package/components/HairyFooterFish.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useScriptTag } from '@vueuse/core'
+import { RENDERER } from './fish'
+
+const fishContainer = ref()
+
+const tag = useScriptTag('https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.min.js')
+tag.load()
+  .then(() => {
+    RENDERER.init()
+  })
+</script>
+
+<template>
+  <div id="jsi-flying-fish-container" ref="fishContainer" style="margin-top: -60px;"></div>
+</template>

package/components/fish.js

@@ -0,0 +1,315 @@
+/* eslint-disable eqeqeq */
+/* eslint-disable no-var */
+/* eslint-disable vars-on-top */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+/* eslint-disable no-undef */
+const RENDERER = {
+  POINT_INTERVAL: 5,
+  FISH_COUNT: 3,
+  MAX_INTERVAL_COUNT: 50,
+  INIT_HEIGHT_RATE: 0.5,
+  THRESHOLD: 50,
+  init() {
+    this.setParameters()
+    this.reconstructMethods()
+    this.setup()
+    this.bindEvent()
+    this.render()
+  },
+  setParameters() {
+    this.$window = $(window)
+    this.$container = $('#jsi-flying-fish-container')
+    this.$canvas = $('<canvas />')
+    this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d')
+    this.points = []
+    this.fishes = []
+    this.watchIds = []
+  },
+  createSurfacePoints() {
+    const count = Math.round(this.width / this.POINT_INTERVAL)
+    this.pointInterval = this.width / (count - 1)
+    this.points.push(new SURFACE_POINT(this, 0))
+    for (let i = 1; i < count; i++) {
+      const point = new SURFACE_POINT(this, i * this.pointInterval)
+      const previous = this.points[i - 1]
+      point.setPreviousPoint(previous)
+      previous.setNextPoint(point)
+      this.points.push(point)
+    }
+  },
+  reconstructMethods() {
+    this.watchWindowSize = this.watchWindowSize.bind(this)
+    this.jdugeToStopResize = this.jdugeToStopResize.bind(this)
+    this.startEpicenter = this.startEpicenter.bind(this)
+    this.moveEpicenter = this.moveEpicenter.bind(this)
+    this.reverseVertical = this.reverseVertical.bind(this)
+    this.render = this.render.bind(this)
+  },
+  setup() {
+    this.points.length = 0
+    this.fishes.length = 0
+    this.watchIds.length = 0
+    this.intervalCount = this.MAX_INTERVAL_COUNT
+    this.width = this.$container.width()
+    this.height = this.$container.height()
+    this.fishCount = (((this.FISH_COUNT * this.width) / 500) * this.height) / 500
+    this.$canvas.attr({ width: this.width, height: this.height })
+    this.reverse = false
+    this.fishes.push(new FISH(this))
+    this.createSurfacePoints()
+  },
+  watchWindowSize() {
+    this.clearTimer()
+    this.tmpWidth = this.$window.width()
+    this.tmpHeight = this.$window.height()
+    this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL))
+  },
+  clearTimer() {
+    while (this.watchIds.length > 0)
+      clearTimeout(this.watchIds.pop())
+  },
+  jdugeToStopResize() {
+    const width = this.$window.width()
+    const height = this.$window.height()
+    const stopped = width == this.tmpWidth && height == this.tmpHeight
+    this.tmpWidth = width
+    this.tmpHeight = height
+    if (stopped)
+      this.setup()
+  },
+  bindEvent() {
+    this.$window.on('resize', this.watchWindowSize)
+    this.$container.on('mouseenter', this.startEpicenter)
+    this.$container.on('mousemove', this.moveEpicenter)
+  },
+  getAxis(event) {
+    const offset = this.$container.offset()
+    return { x: event.clientX - offset.left + this.$window.scrollLeft(), y: event.clientY - offset.top + this.$window.scrollTop() }
+  },
+  startEpicenter(event) {
+    this.axis = this.getAxis(event)
+  },
+  moveEpicenter(event) {
+    const axis = this.getAxis(event)
+    if (!this.axis)
+      this.axis = axis
+
+    this.generateEpicenter(axis.x, axis.y, axis.y - this.axis.y)
+    this.axis = axis
+  },
+  generateEpicenter(x, y, velocity) {
+    if (y < this.height / 2 - this.THRESHOLD || y > this.height / 2 + this.THRESHOLD)
+      return
+
+    const index = Math.round(x / this.pointInterval)
+    if (index < 0 || index >= this.points.length)
+      return
+
+    this.points[index].interfere(y, velocity)
+  },
+  reverseVertical() {
+    this.reverse = !this.reverse
+    for (let i = 0, count = this.fishes.length; i < count; i++)
+      this.fishes[i].reverseVertical()
+  },
+  controlStatus() {
+    for (let i = 0, count = this.points.length; i < count; i++)
+      this.points[i].updateSelf()
+
+    for (let i = 0, count = this.points.length; i < count; i++)
+      this.points[i].updateNeighbors()
+
+    if (this.fishes.length < this.fishCount && --this.intervalCount == 0) {
+      this.intervalCount = this.MAX_INTERVAL_COUNT
+      this.fishes.push(new FISH(this))
+    }
+  },
+  render() {
+    requestAnimationFrame(this.render)
+    this.controlStatus()
+    this.context.clearRect(0, 0, this.width, this.height)
+    this.context.fillStyle = 'hsl(0, 0%, 95%)'
+    for (let i = 0, count = this.fishes.length; i < count; i++)
+      this.fishes[i].render(this.context)
+
+    this.context.save()
+    this.context.globalCompositeOperation = 'xor'
+    this.context.beginPath()
+    this.context.moveTo(0, this.reverse ? 0 : this.height)
+    for (let i = 0, count = this.points.length; i < count; i++)
+      this.points[i].render(this.context)
+
+    this.context.lineTo(this.width, this.reverse ? 0 : this.height)
+    this.context.closePath()
+    this.context.fill()
+    this.context.restore()
+  },
+}
+
+var SURFACE_POINT = function (renderer, x) {
+  this.renderer = renderer
+  this.x = x
+  this.init()
+}
+
+SURFACE_POINT.prototype = {
+  SPRING_CONSTANT: 0.03,
+  SPRING_FRICTION: 0.9,
+  WAVE_SPREAD: 0.3,
+  ACCELARATION_RATE: 0.01,
+  init() {
+    this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE
+    this.height = this.initHeight
+    this.fy = 0
+    this.force = { previous: 0, next: 0 }
+  },
+  setPreviousPoint(previous) {
+    this.previous = previous
+  },
+  setNextPoint(next) {
+    this.next = next
+  },
+  interfere(y, velocity) {
+    this.fy = this.renderer.height * this.ACCELARATION_RATE * (this.renderer.height - this.height - y >= 0 ? -1 : 1) * Math.abs(velocity)
+  },
+  updateSelf() {
+    this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height)
+    this.fy *= this.SPRING_FRICTION
+    this.height += this.fy
+  },
+  updateNeighbors() {
+    if (this.previous)
+      this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height)
+
+    if (this.next)
+      this.force.next = this.WAVE_SPREAD * (this.height - this.next.height)
+  },
+  render(context) {
+    if (this.previous) {
+      this.previous.height += this.force.previous
+      this.previous.fy += this.force.previous
+    }
+    if (this.next) {
+      this.next.height += this.force.next
+      this.next.fy += this.force.next
+    }
+    context.lineTo(this.x, this.renderer.height - this.height)
+  },
+}
+
+var FISH = function (renderer) {
+  this.renderer = renderer
+  this.init()
+}
+
+FISH.prototype = {
+  GRAVITY: 0.4,
+  init() {
+    this.direction = Math.random() < 0.5
+    this.x = this.direction ? this.renderer.width + this.renderer.THRESHOLD : -this.renderer.THRESHOLD
+    this.previousY = this.y
+    this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1)
+    if (this.renderer.reverse) {
+      this.y = this.getRandomValue((this.renderer.height * 1) / 10, (this.renderer.height * 4) / 10)
+      this.vy = this.getRandomValue(2, 5)
+      this.ay = this.getRandomValue(0.05, 0.2)
+    }
+    else {
+      this.y = this.getRandomValue((this.renderer.height * 6) / 10, (this.renderer.height * 9) / 10)
+      this.vy = this.getRandomValue(-5, -2)
+      this.ay = this.getRandomValue(-0.2, -0.05)
+    }
+    this.isOut = false
+    this.theta = 0
+    this.phi = 0
+  },
+  getRandomValue(min, max) {
+    return min + (max - min) * Math.random()
+  },
+  reverseVertical() {
+    this.isOut = !this.isOut
+    this.ay *= -1
+  },
+  controlStatus() {
+    this.previousY = this.y
+    this.x += this.vx
+    this.y += this.vy
+    this.vy += this.ay
+    if (this.renderer.reverse) {
+      if (this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE) {
+        this.vy -= this.GRAVITY
+        this.isOut = true
+      }
+      else {
+        if (this.isOut)
+          this.ay = this.getRandomValue(0.05, 0.2)
+
+        this.isOut = false
+      }
+    }
+    else {
+      if (this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE) {
+        this.vy += this.GRAVITY
+        this.isOut = true
+      }
+      else {
+        if (this.isOut)
+          this.ay = this.getRandomValue(-0.2, -0.05)
+
+        this.isOut = false
+      }
+    }
+    if (!this.isOut) {
+      this.theta += Math.PI / 20
+      this.theta %= Math.PI * 2
+      this.phi += Math.PI / 30
+      this.phi %= Math.PI * 2
+    }
+    this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY)
+    if ((this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD) || (this.vx < 0 && this.x < -this.renderer.THRESHOLD))
+      this.init()
+  },
+  render(context) {
+    context.save()
+    context.translate(this.x, this.y)
+    context.rotate(Math.PI + Math.atan2(this.vy, this.vx))
+    context.scale(1, this.direction ? 1 : -1)
+    context.beginPath()
+    context.moveTo(-30, 0)
+    context.bezierCurveTo(-20, 15, 15, 10, 40, 0)
+    context.bezierCurveTo(15, -10, -20, -15, -30, 0)
+    context.fill()
+    context.save()
+    context.translate(40, 0)
+    context.scale(0.9 + 0.2 * Math.sin(this.theta), 1)
+    context.beginPath()
+    context.moveTo(0, 0)
+    context.quadraticCurveTo(5, 10, 20, 8)
+    context.quadraticCurveTo(12, 5, 10, 0)
+    context.quadraticCurveTo(12, -5, 20, -8)
+    context.quadraticCurveTo(5, -10, 0, 0)
+    context.fill()
+    context.restore()
+    context.save()
+    context.translate(-3, 0)
+    context.rotate((Math.PI / 3 + (Math.PI / 10) * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1))
+    context.beginPath()
+    if (this.renderer.reverse) {
+      context.moveTo(5, 0)
+      context.bezierCurveTo(10, 10, 10, 30, 0, 40)
+      context.bezierCurveTo(-12, 25, -8, 10, 0, 0)
+    }
+    else {
+      context.moveTo(-5, 0)
+      context.bezierCurveTo(-10, -10, -10, -30, 0, -40)
+      context.bezierCurveTo(12, -25, 8, -10, 0, 0)
+    }
+    context.closePath()
+    context.fill()
+    context.restore()
+    context.restore()
+    this.controlStatus(context)
+  },
+}
+
+export { RENDERER }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",