tona-plugins 1.0.1

package/README.md

@@ -0,0 +1,48 @@
+# plugins
+
+Plugins for Tona theme.
+
+## Usage
+
+```bash
+npm i tona
+```
+
+```bash
+npm i tona-plugins
+```
+
+```js
+import { createTheme } from 'tona'
+import { background } from 'tona-plugins'
+
+createTheme().use(background)
+```
+
+Configure the default behavior of the plugin in your Theme
+
+```js
+import { createTheme } from 'tona'
+import { background } from 'tona-plugins'
+
+createTheme().use(background, {
+  // The default configuration of the Theme
+  enable: true,
+})
+```
+
+Configure background plugin
+
+```js
+import { createTheme } from 'tona'
+import { background } from 'tona-plugins'
+
+createTheme().use(
+  background,
+  {},
+  {
+    // The configuration of the plugin
+    opacitySelector: '#sideBar,#mainContent,#footer',
+  }
+)
+```

package/index.d.ts

@@ -0,0 +1,32 @@
+declare module 'tona-plugins' {
+  export function musicPlayer(theme: any, devOptions?: any): void
+  export function background(theme: any, devOptions?: any): void
+  export function barrage(theme: any, devOptions?: any): void
+  export function catalog(theme: any, devOptions?: any): void
+  export function charts(theme: any, devOptions?: any): void
+  export function clickEffects(theme: any, devOptions?: any): void
+  export function codeCopy(theme: any, devOptions?: any): void
+  export function codeHighlight(theme: any, devOptions?: any): void
+  export function codeLang(theme: any, devOptions?: any): void
+  export function codeLinenumbers(theme: any, devOptions?: any): void
+  export function codeTrafficLight(theme: any, devOptions?: any): void
+  export function colorMode(theme: any, devOptions?: any): void
+  export function commentsAvatars(theme: any, devOptions?: any): void
+  export function darkMode(theme: any, devOptions?: any): void
+  export function donation(theme: any, devOptions?: any): void
+  export function emoji(theme: any, devOptions?: any): void
+  export function footer(theme: any, devOptions?: any): void
+  export function imagePreview(theme: any, devOptions?: any): void
+  export function license(theme: any, devOptions?: any): void
+  export function live2d(theme: any, devOptions?: any): void
+  export function lock(theme: any, devOptions?: any): void
+  export function notation(theme: any, devOptions?: any): void
+  export function notice(theme: any, devOptions?: any): void
+  export function postBottomImage(theme: any, devOptions?: any): void
+  export function postMessage(theme: any, devOptions?: any): void
+  export function postTopImage(theme: any, devOptions?: any): void
+  export function qrcode(theme: any, devOptions?: any): void
+  export function signature(theme: any, devOptions?: any): void
+  export function tools(theme: any, devOptions?: any): void
+  export function webTag(theme: any, devOptions?: any): void
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "tona-plugins",
+  "version": "1.0.1",
+  "description": "",
+  "author": {
+    "name": "guangzan",
+    "url": "https://www.cnblogs.com/guangzan",
+    "email": "guangzan1999@outlook.com"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/acnblogs/tona#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acnblogs/tona.git"
+  },
+  "bugs": {
+    "url": "https://github.com/acnblogs/tona/issues"
+  },
+  "keywords": [
+    "博客园"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./src/index.js"
+    }
+  },
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "types": "./index.d.ts",
+  "files": [
+    "index.d.ts",
+    "src"
+  ],
+  "dependencies": {
+    "notyf": "^3.10.0",
+    "tona-options": "1.0.1",
+    "tona": "1.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "sass": "^1.97.2",
+    "vite": "^7.3.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-singlefile": "^2.3.0",
+    "tona-vite": "1.0.1"
+  },
+  "scripts": {
+    "dev": "vite"
+  }
+}

package/src/constants/cdn.js

@@ -0,0 +1,12 @@
+export const chartJs =
+  'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js'
+export const mediaZoomJs =
+  'https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js'
+export const APlayerJs =
+  'https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js'
+export const APlayerCss =
+  'https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css'
+export const notationJs =
+  'https://cdnjs.cloudflare.com/ajax/libs/rough-notation/0.5.1/rough-notation.iife.min.js'
+export const typedJs =
+  'https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js'

package/src/index.js

@@ -0,0 +1,30 @@
+export * from './plugins/background'
+export * from './plugins/barrage'
+export * from './plugins/catalog'
+export * from './plugins/charts'
+export * from './plugins/clickEffects'
+export * from './plugins/codeCopy'
+export * from './plugins/codeHighlight'
+export * from './plugins/codeLang'
+export * from './plugins/codeLinenumbers'
+export * from './plugins/codeTrafficLight'
+export * from './plugins/colorMode'
+export * from './plugins/commentsAvatars'
+export * from './plugins/darkMode'
+export * from './plugins/donation'
+export * from './plugins/emoji'
+export * from './plugins/footer'
+export * from './plugins/imagePreview'
+export * from './plugins/license'
+export * from './plugins/live2d'
+export * from './plugins/lock'
+export * from './plugins/musicPlayer'
+export * from './plugins/notation'
+export * from './plugins/notice'
+export * from './plugins/postBottomImage'
+export * from './plugins/postMessage'
+export * from './plugins/postTopImage'
+export * from './plugins/qrcode'
+export * from './plugins/signature'
+export * from './plugins/tools'
+export * from './plugins/webTag'

package/src/plugins/background/index.js

@@ -0,0 +1,50 @@
+import { getBackgroundOptions } from 'tona-options'
+import { isUrl, userAgent } from '../../utils/helpers'
+
+/**
+ * 设置透明度
+ * @param {number} opacity 透明度
+ */
+function setOpacity(opacity, opacitySelector) {
+  $(opacitySelector).css('opacity', `${opacity}`)
+}
+
+/**
+ * 设置背景
+ * @param {string} value
+ * @param {boolean} repeat 是否重复图片
+ */
+function setBackground(value, repeat) {
+  const type = isUrl(value) ? 'img' : 'color'
+  // const type =   new RegExp('http').test(value) ? 'img' : 'color'
+  if (type === 'color') {
+    $('body').css('background-color', `${value}`)
+  }
+  if (type === 'img') {
+    $('body').css('background-image', `url(${value})`)
+    if (!repeat) {
+      $('body').css({
+        'background-repeat': 'no-repeat',
+        'background-size': '100% 100%',
+        'background-attachment': 'fixed',
+      })
+      if (userAgent() === 'phone') {
+        $('body').css('background-size', 'cover')
+      }
+    }
+  }
+}
+
+export function background(_, devOptions, pluginOptions) {
+  const { enable, opacity, value, repeat } = getBackgroundOptions(devOptions)
+
+  if (!enable) return
+
+  const { opacitySelector } = {
+    opacitySelector: '#main,#navigator',
+    ...pluginOptions,
+  }
+
+  setBackground(value, repeat)
+  setOpacity(opacity, opacitySelector)
+}

package/src/plugins/barrage/index.js

@@ -0,0 +1,104 @@
+// 弹幕
+import { getBarragesOptions } from 'tona-options'
+import {
+  getClientRect,
+  randomColor,
+  randomNum,
+  sleep,
+} from '../../utils/helpers'
+
+/**
+ * @description 发送弹幕
+ * @param {Array} textList 弹幕列表
+ */
+async function shootBarrage(textList, enable, opacity, colors, fontSize) {
+  if (!enable) {
+    return
+  }
+  if (!document.querySelector('#barrage-wrap')) {
+    $('body').append("<div id='barrage-wrap'></div>")
+  }
+
+  const $wrap = document.querySelector('#barrage-wrap')
+  const rect = getClientRect($wrap)
+  const wrapWidth = rect.right - rect.left
+  const wrapHeight = rect.bottom - rect.top
+
+  const defaultColors = [
+    '#FE0302',
+    '#FF7204',
+    '#FFAA02',
+    '#FFD302',
+    '#FFFF00',
+    '#A0EE00',
+    '#00CD00',
+    '#019899',
+    '#4266BE',
+    '#89D5FF',
+    '#CC0273',
+    '#CC0273',
+  ]
+
+  for (let i = 0; i < textList.length; i++) {
+    const text = textList[i]
+    const $barrage = document.createElement('span')
+    const barrageStyle = `left: ${wrapWidth}px;top: ${randomNum(
+      wrapHeight - 30,
+      1,
+    )}px;color: ${randomColor(
+      colors.length ? colors : defaultColors,
+    )};opacity: ${opacity};font-size: ${fontSize};`
+
+    $barrage.style.cssText = barrageStyle
+    $barrage.textContent = text
+    $wrap.appendChild($barrage)
+
+    const roll = (timer) => {
+      const now = Date.now()
+      const rect = getClientRect($barrage)
+      let left = $barrage.offsetLeft
+
+      roll.last = roll.last || now
+      roll.timer = roll.timer || timer
+
+      if (left < rect.left - rect.right) {
+        $($barrage).remove()
+      } else {
+        if (now - roll.last >= roll.timer) {
+          roll.last = now
+          left -= 3
+          $barrage.style.left = `${left}px`
+        }
+        window.requestAnimationFrame(roll)
+      }
+    }
+
+    roll(randomNum(30, 1))
+
+    await sleep(1000)
+  }
+}
+
+export function barrage(_, devOptions) {
+  const { enable, opacity, colors, fontSize, barrages } =
+    getBarragesOptions(devOptions)
+
+  if (barrages.length) {
+    setTimeout(
+      () => shootBarrage(barrages, enable, opacity, colors, fontSize),
+      3000,
+    )
+  }
+
+  // if (page === 'post' && postPageBarrages.length) {
+  //   setTimeout(() => {
+  //     shootBarrage(postPageBarrages, enable, opacity, colors, fontSize)
+  //   }, 3000)
+  // }
+
+  // if (page === 'index' && indexBarrages.length) {
+  //   setTimeout(() => {
+  //     shootBarrage(indexBarrages, enable, opacity, colors, fontSize)
+  //   }, 3000)
+  // }
+}

package/src/plugins/barrage/index.scss

@@ -0,0 +1,16 @@
+#barrage-wrap {
+  position: fixed;
+  top: 90px;
+  width: 100vw;
+  height: 60vh;
+  text-shadow: 0px 0px 1px #000;
+  overflow: hidden;
+  z-index: 20;
+  pointer-events: none;
+
+  span {
+    position: absolute;
+    white-space: nowrap;
+    font-weight: 700;
+  }
+}

package/src/plugins/catalog/index.js

@@ -0,0 +1,212 @@
+import { getCatalogOptions } from 'tona-options'
+import { getCurrentPage, hasPostTitle } from '../../utils/cnblog'
+import { debounce, getClientRect, userAgent } from '../../utils/helpers'
+
+/**
+ * 构建目录容器
+ */
+function buildCatalogContainer(showTitle) {
+  const container = $('<nav id="catalog"></nav>')
+  if (showTitle) {
+    container.append("<h3 class='catalog-title'>目录</h3>")
+  }
+  return container
+}
+
+/**
+ * 构建目录列表
+ */
+function buildCatalogList() {
+  const $list = $('<ul>')
+  const regExp = /^h[1-6]$/
+
+  // $('#cnblogs_post_body')
+  //     .children()
+  $('#cnblogs_post_body :header').each(function (index) {
+    if (regExp.test(this.tagName.toLowerCase())) {
+      const className = `${this.nodeName.toLowerCase()}-list`
+      const mathNode = $(this).children('.math.inline')
+
+      let text
+      let id
+
+      if (mathNode.length) {
+        text =
+          mathNode.prop('outerHTML') +
+          $(this)
+            .contents()
+            .filter(function () {
+              return this.nodeType === 3
+            })
+            .text()
+      } else {
+        text = $(this).text()
+      }
+
+      if (text.length === 0) {
+        return
+      } // 如果标题为空 只有 #
+
+      if (this.id !== '') {
+        id = this.id
+      } else {
+        id = text.trim()
+        $(this).attr('id', id)
+      }
+
+      const title = $(
+        `<li class='${className}'><a href='#${id}'>${text}</a></li>`,
+      )
+      if (index === 0) {
+        title.addClass('catalog-active')
+      }
+      $list.append(title)
+    }
+  })
+  return $list
+}
+
+/**
+ * 构建目录
+ * @param {string} selector
+ * @param {Function} fn
+ */
+function buildCatalog(selector, fn, showTitle) {
+  const container = buildCatalogContainer(showTitle)
+  const catalogList = buildCatalogList()
+  const catalog = container.append(catalogList)
+  $(selector)[fn]($(catalog))
+}
+
+/**
+ * 处理滚动事件
+ */
+function handleScroll(scrollContainer, updateNavigation) {
+  $(scrollContainer).scroll(
+    debounce(
+      () => {
+        setActiveTitle()
+        autoScroll(scrollContainer, updateNavigation)
+      },
+      50,
+      1000 / 60,
+    ),
+  )
+}
+
+// TODO: 目录自动滚动
+// https://stackoverflow.com/questions/61282426/fixed-sidebar-scroll-to-anchor-links-when-main-body-is-scrolled?r=SearchResults
+function autoScroll(scrollContainer, updateNavigation) {
+  if (!updateNavigation) {
+    return
+  }
+  const navigation = $('#catalog')
+
+  if (scrollContainer.scrollY < 100) {
+    return navigation.stop().animate(
+      {
+        scrollTop: 0,
+      },
+      800,
+    )
+  }
+
+  $('#cnblogs_post_body :header').each(function () {
+    const sectionName = $(this).attr('id')
+    const navigationMatch = $(`a[href="#${sectionName}"]`, navigation)
+
+    if (
+      $(this).offset().top - $(window).height() / 2 < $(window).scrollTop() &&
+      $(this).offset().top + $(this).height() - $(window).height() / 2 >
+        $(window).scrollTop()
+    ) {
+      const position = navigationMatch.position().top + navigation.scrollTop()
+
+      // TODO: Use cached selector, exit .each() when first occurrence found
+      return navigation.stop().animate(
+        {
+          scrollTop: position,
+        },
+        800,
+      )
+    }
+  })
+}
+
+/**
+ * 标题动态高亮
+ */
+function setActiveTitle() {
+  for (let i = $('#catalog ul li').length - 1; i >= 0; i--) {
+    const titleId = $($('#catalog ul li')[i])
+      .find('a')
+      .attr('href')
+      .replace(/#/g, '')
+    const postTitle = document.querySelector(
+      `#cnblogs_post_body [id='${titleId}']`,
+    )
+    if (getClientRect(postTitle).top <= 100) {
+      if ($($('#catalog ul li')[i]).hasClass('catalog-active')) {
+        return
+      }
+      $($('#catalog ul li')[i]).addClass('catalog-active')
+      $($('#catalog ul li')[i]).siblings().removeClass('catalog-active')
+      return
+    }
+  }
+}
+
+/**
+ * 目录显示隐藏
+ */
+function toggle() {
+  $('.catalog-title').click(() => {
+    $('#catalog ul').toggle('fast', 'linear', function () {
+      $(this).css('display') === 'none'
+        ? $('.catalog-title').removeClass('is-active')
+        : $('.catalog-title').addClass('is-active')
+    })
+  })
+}
+
+/**
+ * 设置滚动条
+ * @param {*} showScrollbar
+ */
+function setScrollbar(showScrollbar) {
+  if (!showScrollbar) {
+    $('#catalog').css({
+      overflow: 'hidden',
+    })
+  }
+}
+
+export function catalog(_, devOptions, pluginOptions = {}) {
+  const extraOptions = {
+    mountedNode: 'body',
+    fn: 'append',
+    scrollContainer: window,
+    updateNavigation: false,
+    showTitle: true,
+    showScrollbar: true,
+  }
+  $.extend(true, extraOptions, pluginOptions)
+
+  const { enable } = getCatalogOptions(devOptions)
+
+  if (
+    enable &&
+    hasPostTitle() &&
+    getCurrentPage() === 'post' &&
+    userAgent() === 'pc'
+  ) {
+    buildCatalog(
+      extraOptions.mountedNode,
+      extraOptions.fn,
+      extraOptions.showTitle,
+    )
+    handleScroll(extraOptions.scrollContainer, extraOptions.updateNavigation)
+    toggle()
+    setScrollbar(extraOptions.showScrollbar)
+  }
+}

package/src/plugins/charts/index.js

@@ -0,0 +1,60 @@
+import { getChartsOptions } from 'tona-options'
+import { chartJs } from '../../constants/cdn'
+import { loadScript } from '../../utils/helpers'
+
+/**
+ * 构建图表容器
+ */
+function createChartContainer(mountedNode) {
+  const container = $('<div id="chart"></div>')
+  const el = '<canvas id="myChart"></canvas>'
+  container.append(el)
+  $(mountedNode).append(container)
+}
+
+function createChart(labels, datasets) {
+  const _Chart = window.Chart
+
+  _Chart.defaults.color = '#999'
+
+  const config = {
+    type: 'radar',
+    data: {
+      labels,
+      datasets,
+    },
+    options: {
+      elements: {
+        line: {
+          borderWidth: 1,
+        },
+      },
+      plugins: {
+        // legend: {
+        //     labels: {
+        //         color: '#f00',
+        //     },
+        // },
+      },
+    },
+  }
+  // eslint-disable-next-line no-new
+  new _Chart(document.getElementById('myChart'), config)
+}
+
+export function charts(_, devOptions, pluginOptions) {
+  const { enable, labels, datasets } = getChartsOptions(devOptions)
+  if (!enable) {
+    return
+  }
+
+  const { mountedNode } = {
+    mountedNode: '#sidebar_news',
+    ...pluginOptions,
+  }
+
+  loadScript(chartJs, () => {
+    createChartContainer(mountedNode)
+    createChart(labels, datasets)
+  })
+}

package/src/plugins/charts/index.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+$chart: () !default;
+
+$chart: map.merge(
+  (
+    padding: 8px,
+  ),
+  $chart
+);
+
+$chartsPadding: map.get($chart, padding);
+
+#chart {
+  padding: $chartsPadding;
+}