tona-plugins 1.0.1

package/src/plugins/live2d/index.js

@@ -0,0 +1,67 @@
+import { getLive2dOptions } from 'tona-options'
+import { getCurrentPage } from '../../utils/cnblog'
+import { loadScript, randomProperty, userAgent } from '../../utils/helpers'
+import { live2dModels } from './live2d-models'
+
+const live2dBase = 'https://cdn.jsdelivr.net/gh/guangzan/awesCnb-live2dModels'
+const live2djs =
+  'https://files.cnblogs.com/files/guangzan/live2d.min.js?t=1688786567&download=true'
+
+/**
+ * 构建模型容器
+ * @param {string} position
+ * @param {string} width
+ * @param {string} height
+ */
+function buildContainer(position, width, height) {
+  const ele = `<canvas id="model" style="position:fixed;${position}:0;bottom:0;z-index:30;pointer-events: none;" width="${width}"height="${height}" ></canvas>`
+  $('body').append(ele)
+}
+
+/**
+ * 设置间距
+ * @param {string} position
+ * @param {string} gap
+ */
+function setGap(position, gap) {
+  if (gap === 'default') {
+    return
+  }
+  $('#model').css(position, gap)
+}
+
+/**
+ * 加载模型
+ * @param {string} model
+ */
+function loadModel(model) {
+  const live2dModel =
+    model === 'random'
+      ? live2dModels[randomProperty(live2dModels)]
+      : live2dModels[model]
+
+  const url = `${live2dBase}@latest/${live2dModel}`
+  loadScript(live2djs, () => {
+    // eslint-disable-next-line no-undef
+    loadlive2d('model', url)
+  })
+}
+
+export function live2d(_, devOptions) {
+  const { enable, page, agent, model, position, gap, width, height } =
+    getLive2dOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (page !== getCurrentPage() && page !== 'all') {
+    return
+  }
+  if (agent !== userAgent() && agent !== 'all') {
+    return
+  }
+
+  buildContainer(position, width, height)
+  setGap(position, gap)
+  loadModel(model)
+}

package/src/plugins/live2d/live2d-models.js

@@ -0,0 +1,21 @@
+/**
+ * live2d widgets
+ */
+
+export const live2dModels = {
+  chitose: 'live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json',
+  epsilon2_1: 'live2d-widget-model-chitose/assets/chitose.model.json',
+  'haru-01': 'live2d-widget-model-haru/01/assets/haru01.model.json',
+  'haru-02': 'live2d-widget-model-haru/02/assets/haru02.model.json',
+  hijiki: 'live2d-widget-model-hijiki/assets/hijiki.model.json',
+  tororo: 'live2d-widget-model-tororo/assets/tororo.model.json',
+  ryoufuku: 'misaki/ryoufuku.model.json',
+  seifuku: 'misaki/seifuku.model.json',
+  shifuku: 'misaki/shifuku.model.json',
+  vert_classic: 'vert_classic/vert_classic.model.json',
+  vert_normal: 'vert_normal/vert_normal.model.json',
+  vert_swimwear: 'vert_swimwear/vert_swimwear.model.json',
+  小埋: '小埋/13.json',
+  伊芙加登: '伊芙加登/14.json',
+  玉藻前: '玉藻前/16.json',
+}

package/src/plugins/lock/index.js

@@ -0,0 +1,77 @@
+// 锁屏
+import { getLockScreenOptions } from 'tona-options'
+import { typedJs } from '../../constants/cdn'
+import { loadScript } from '../../utils/helpers'
+
+const randomImage = 'https://api.mz-moe.cn/img.php'
+
+let typed
+
+/**
+ * 创建元素
+ */
+function build() {
+  $('body').append(`
+    <div class='lock-screen'>
+        <div class="lock-screen-weather"></div>
+        <div class="lock-screen-user">
+            <div class='lock-screen-text'>
+                <span></span>
+            </div>
+        </div>
+        <div class="lock-screen-close">🔑</div>
+    </div>`)
+}
+
+/**
+ * 设置锁屏背景
+ * @param {*} background
+ */
+function setBackground(background) {
+  const image = background === '' ? randomImage : background
+  $('.lock-screen').css('background-image', `url(${image})`)
+}
+
+/**
+ * 打开锁屏
+ * @param {*} strings
+ */
+function handleOpen(strings) {
+  const typedOpts = {
+    strings: strings.length ? strings : ['快去自定义你的个性签名吧~'],
+    typeSpeed: 100,
+  }
+  $('#header').dblclick(() => {
+    $('body').addClass('overflow')
+    $('.lock-screen').css('top', '0')
+    // eslint-disable-next-line no-undef
+    typed = new Typed('.lock-screen-text span', typedOpts)
+  })
+}
+
+/**
+ * 关闭锁屏
+ */
+function handleClose() {
+  $(document).on('click', '.lock-screen-close', () => {
+    $('.lock-screen').css('top', '-100vh')
+    typed.destroy()
+    setTimeout(() => {
+      $('body').removeClass('overflow')
+    }, 400)
+  })
+}
+
+export function lock(_, devOptions) {
+  const { enable, background, strings } = getLockScreenOptions(devOptions)
+  if (!enable) {
+    return
+  }
+  build()
+  setBackground(background)
+
+  loadScript(typedJs, () => {
+    handleOpen(strings)
+    handleClose()
+  })
+}

package/src/plugins/lock/index.scss

@@ -0,0 +1,56 @@
+.lock-screen {
+  position: fixed;
+  top: -100vh;
+  width: 100vw;
+  height: 100vh;
+  z-index: 999;
+  overflow: hidden;
+  background-color: #fff;
+  transition: top 0.3s;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.lock-screen-weather {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
+.lock-screen-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.lock-screen-user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30vh;
+}
+
+.lock-screen-user img {
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+}
+
+.lock-screen-text {
+  margin-top: 50px;
+}
+
+.lock-screen-text span {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 1px 1px 5px #999;
+}
+
+.overflow {
+  overflow: hidden;
+  overflow-x: inherit;
+}

package/src/plugins/musicPlayer/index.js

@@ -0,0 +1,81 @@
+// 音乐播放器
+import { getMusicPlayerOptions } from 'tona-options'
+import { APlayerCss, APlayerJs } from '../../constants/cdn'
+import { getCurrentPage } from '../../utils/cnblog'
+import { loadLink, loadScript, userAgent } from '../../utils/helpers'
+
+/**
+ * 构建音乐播放器
+ * @param {*} autoplay
+ * @param {*} audio
+ * @param {*} volume
+ * @param {*} lrc
+ */
+function buildPlayer(autoplay, audio, volume, lrc) {
+  $('body').append('<div id="player" class="aplayer music-APlayer"></div>')
+
+  // eslint-disable-next-line no-undef
+  const ap = new APlayer({
+    container: document.getElementById('player'),
+    fixed: true,
+    preload: 'auto',
+    autoplay,
+    volume,
+    lrcType: lrc.enable ? lrc.type : null,
+    audio,
+  })
+
+  window.onbeforeunload = () => {
+    const audioTime = ap.audio.currentTime
+    localStorage.audioTime = audioTime
+  }
+
+  window.onload = () => {
+    ap.seek(localStorage.audioTime ? Number(localStorage.audioTime) : 0)
+  }
+
+  if (autoplay) {
+    $('.aplayer-lrc').show()
+  }
+
+  if (localStorage.playerState === 'on') {
+    ap.play()
+  }
+
+  ap.on('play', () => {
+    localStorage.playerState = 'on'
+    if (lrc.enable) {
+      $('.aplayer-lrc').show()
+    }
+  })
+
+  ap.on('pause', () => {
+    localStorage.playerState = 'off'
+    if (lrc.enable) {
+      $('.aplayer-lrc').hide()
+    }
+  })
+
+  if (lrc.enable && lrc.color !== '') {
+    $('.aplayer-lrc').css('color', lrc.color)
+  }
+}
+
+export function musicPlayer(_, devOptions) {
+  const { enable, page, agent, autoplay, audio, volume, lrc } =
+    getMusicPlayerOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (page !== getCurrentPage() && page !== 'all') {
+    return
+  }
+  if (agent !== userAgent() && agent !== 'all') {
+    return
+  }
+  loadLink(APlayerCss)
+  loadScript(APlayerJs, () => {
+    buildPlayer(autoplay, audio, volume, lrc)
+  })
+}

package/src/plugins/musicPlayer/index.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+
+$player: () !default;
+
+$player: map.merge(
+  (
+    bodyBackground: #fff,
+  ),
+  $player
+);
+
+$playerBodyBackground: map.get($player, bodyBackground);
+
+#player.aplayer {
+  background: none;
+}
+
+#player.aplayer .aplayer-list ol li {
+  background: $playerBodyBackground;
+}
+
+#player {
+  &:hover {
+    .aplayer-list {
+      transform: scaleX(1);
+      left: 0;
+    }
+    .aplayer-body {
+      left: 0;
+    }
+  }
+  .aplayer-list {
+    position: relative;
+    transform: scaleX(0.838);
+    left: -34px;
+  }
+  .aplayer-body {
+    left: -66px;
+    background-color: $playerBodyBackground;
+    // &:hover {
+    //     left: 0;
+    // }
+    .aplayer-info {
+      border-top: none;
+    }
+    .aplayer-miniswitcher {
+      background-color: $playerBodyBackground;
+      border-left: 1px solid #999;
+    }
+  }
+  .aplayer-lrc {
+    display: none;
+    .aplayer-lrc-contents {
+      color: inherit;
+      p {
+        color: inherit;
+        font-size: 14px;
+        text-shadow: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #player {
+    display: none;
+  }
+}

package/src/plugins/notation/index.js

@@ -0,0 +1,73 @@
+import { getNotationOptions } from 'tona-options'
+import { notationJs } from '../../constants/cdn'
+import { getCurrentPage } from '../../utils/cnblog'
+import { loadScript } from '../../utils/helpers'
+
+const annotateList = [
+  {
+    page: 'all',
+    selector: '#Header1_HeaderTitle',
+    config: {
+      type: 'underline',
+      color: '#2196F3',
+    },
+  },
+]
+
+/**
+ * 构建 annotate group
+ * @param {*} annotate
+ * @param {*} customList
+ */
+function buildGroup(annotate, customList) {
+  const group = []
+  for (const { selector, page, config } of customList) {
+    if (page === 'all' || getCurrentPage() === page) {
+      const element = document.querySelectorAll(selector)
+      if (!element.length) {
+        continue
+      }
+      if (element.length === 1) {
+        group.push(annotate(document.querySelector(selector), config))
+      }
+      if (element.length > 1) {
+        element.forEach((item) => {
+          group.push(annotate(item, config))
+        })
+      }
+    }
+  }
+  return group
+}
+
+/**
+ * 构建 notation
+ * @param {*} annotate
+ * @param {*} annotationGroup
+ * @param {*} customList
+ */
+function buildNotation(annotate, annotationGroup, customList) {
+  setTimeout(() => {
+    const group = buildGroup(annotate, customList)
+    const ag = annotationGroup(group)
+    ag.show()
+  }, 2000)
+}
+
+export function notation(_, devOptions, customList = annotateList) {
+  if (getCurrentPage() !== 'post') {
+    return
+  }
+  const { enable } = getNotationOptions(devOptions)
+  if (!enable) {
+    return
+  }
+  if (!customList.length) {
+    return
+  }
+
+  loadScript(notationJs, () => {
+    const { annotate, annotationGroup } = window.RoughNotation
+    buildNotation(annotate, annotationGroup, customList)
+  })
+}

package/src/plugins/notation/index.scss

@@ -0,0 +1,12 @@
+mark {
+  background: none;
+}
+
+u,
+s {
+  text-decoration: none;
+}
+
+// strong {
+//     font-weight: normal;
+// }

package/src/plugins/notice/index.js

@@ -0,0 +1,17 @@
+import { getNoticeOptions } from 'tona-options'
+import { toast } from '../toast'
+
+function shoot(contents) {
+  const length = contents.length
+  for (let i = 0; i < length; i++) {
+    toast(contents[i], 'info')
+  }
+}
+
+export function notice(_, devOptions) {
+  const { enable, contents } = getNoticeOptions(devOptions)
+  if (!enable && contents.length) {
+    return
+  }
+  shoot(contents)
+}

package/src/plugins/notice/index.scss

@@ -0,0 +1,46 @@
+.message-wrap {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 999;
+}
+.gradient-border {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 400px;
+  height: 200px;
+  color: white;
+  font-family: 'Raleway';
+  font-size: 2.5rem;
+  --borderWidth: 3px;
+  background: #1d1f20;
+
+  border-radius: var(--borderWidth);
+}
+.gradient-border:after {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--borderWidth));
+  left: calc(-1 * var(--borderWidth));
+  height: calc(100% + var(--borderWidth) * 2);
+  width: calc(100% + var(--borderWidth) * 2);
+  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
+  border-radius: calc(2 * var(--borderWidth));
+  z-index: -1;
+  animation: animatedgradient 3s ease alternate infinite;
+  background-size: 300% 300%;
+}
+
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}

package/src/plugins/postBottomImage/index.js

@@ -0,0 +1,27 @@
+// 在随笔详情页尾部图片
+import { getPostBottomImageOptions } from 'tona-options'
+import { getCurrentPage } from '../../utils/cnblog'
+
+export function postBottomImage(_, devOptions) {
+  const { enable, img, height } = getPostBottomImageOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (getCurrentPage() !== 'post') {
+    return
+  }
+  if (img === '') {
+    return
+  }
+
+  const ele = '<div id="custom-post-bottomimage"></div>'
+  const style = {
+    'background-image': `url(${img})`,
+  }
+  if (height !== '') {
+    style.height = height
+  }
+  $('#cnblogs_post_body').after(ele)
+  $('#custom-post-bottomimage').css(style)
+}

package/src/plugins/postBottomImage/index.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+
+$postBottomimage: () !default;
+$postBottomimage: map.merge(
+  (
+    imageHeight: 200px,
+  ),
+  $postBottomimage
+);
+
+$bottomImageHeight: map.get($postBottomimage, imageHeight);
+
+#custom-post-bottomimage {
+  width: 100%;
+  height: $bottomImageHeight;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+  border-radius: 2px;
+}
+
+@media screen and (max-width: 767px) {
+  #custom-post-bottomimage {
+    height: 130px;
+  }
+}

package/src/plugins/postMessage/index.js

@@ -0,0 +1,89 @@
+import { isPostDetailsPage } from '../../utils/cnblog'
+import { poll } from '../../utils/helpers'
+
+function getPostInfo() {
+  const date = $('#post-date').text()
+  const viewCount = $('#post_view_count').text()
+  const commentCount = $('#post_comment_count').text()
+  const diggCount = $('#digg_count').text()
+
+  return {
+    date,
+    viewCount,
+    commentCount,
+    diggCount,
+  }
+}
+
+function createContainer() {
+  return $('<div>').addClass('post-message')
+}
+
+function createCategoriesAndTags() {
+  const wrap = $('<div>').addClass('message-top')
+
+  const createCategories = () => {
+    const categories = $('<div>').addClass('message-categories').text('📂')
+    if (!$('#BlogPostCategory a').length) {
+      categories.append('<a>未分类</a>')
+      return categories
+    }
+    $('#BlogPostCategory a').each(function () {
+      categories.append($(this).get(0))
+    })
+    return categories
+  }
+
+  const createTags = () => {
+    const tags = $('<div>').addClass('message-tags').text('🔖')
+    if (!$('#EntryTag a').length) {
+      tags.append('<a>无标签</a>')
+      return tags
+    }
+    $('#EntryTag a').each(function () {
+      tags.append($(this).get(0))
+    })
+    return tags
+  }
+
+  const categories = createCategories()
+  const tags = createTags()
+
+  wrap.append(categories).append(tags)
+  return wrap
+}
+
+/**
+ * 博文统计
+ */
+function createPostStatistics() {
+  const { date, viewCount, commentCount, diggCount } = getPostInfo()
+  const wrap = $('<div>').addClass('message-bottom')
+
+  wrap
+    .append($('<span>').text(date))
+    .append($('<span>').text(`阅读: ${viewCount}`))
+    .append($('<span>').text(`评论: ${commentCount}`))
+    .append($('<span>').text(`推荐: ${diggCount}`))
+
+  return wrap
+}
+
+function buildPostMessage() {
+  const container = createContainer()
+  const categoriesAndTags = createCategoriesAndTags()
+  const postStatistics = createPostStatistics()
+  container.append(categoriesAndTags).append(postStatistics)
+  $('.post').prepend(container)
+}
+
+export function postMessage() {
+  if (!isPostDetailsPage()) {
+    return
+  }
+
+  poll(
+    () => $('#EntryTag a').length && $('#BlogPostCategory a').length,
+    buildPostMessage,
+  )
+}