tona-plugins 1.0.1

package/src/plugins/codeLinenumbers/index.js

@@ -0,0 +1,33 @@
+// 构建代码行号
+import { getCodeLangOptions } from 'tona-options'
+import { isMd, isPostDetailsPage } from '../../utils/cnblog'
+
+/**
+ * 构建代码行号
+ */
+function buildLinenumbers() {
+  $('pre code').each(function () {
+    const linenumberContainer = $('<ul/>').addClass('awes-linenumber')
+    const lines = $(this).text().split('\n').length - 1
+
+    for (let i = 1; i <= lines; i++) {
+      linenumberContainer.append($('<li/>').text(i))
+    }
+
+    $(this).before(linenumberContainer)
+  })
+}
+
+export function codeLinenumbers(_, devOptions) {
+  const { enable } = getCodeLangOptions(devOptions)
+  if (!isPostDetailsPage) {
+    return
+  }
+  if (!enable) {
+    return
+  }
+  if (!isMd()) {
+    return
+  }
+  buildLinenumbers()
+}

package/src/plugins/codeLinenumbers/index.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+$lineNumbers: () !default;
+$lineNumbers: map.merge(
+  (
+    color: #999999,
+  ),
+  $lineNumbers
+);
+
+$lineNumbersColor: map.get($lineNumbers, color);
+
+/* 覆盖博客园bundle css*/
+@media screen and (max-width: 767px) {
+  #cnblogs_post_body td {
+    white-space: pre;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .awes-linenumber {
+    display: none;
+  }
+}
+
+/* Markdown */
+#cnblogs_post_body {
+  pre {
+    display: flex;
+    ul.awes-linenumber {
+      margin-top: 0;
+    }
+    .awes-linenumber {
+      margin: 0;
+      padding: 16px 16px 8px 16px;
+      li {
+        font-weight: normal;
+        color: $lineNumbersColor;
+        list-style: none;
+        text-align: right;
+        line-height: 1.5;
+        font-size: 15px;
+      }
+    }
+  }
+}
+
+/* 富文本 */
+#cnblogs_post_body .cnblogs_code {
+  pre {
+    display: block;
+    span[style='color: #008080;'] {
+      padding: 2px 0;
+      border: none;
+      text-align: center;
+      color: $lineNumbersColor !important;
+      word-break: normal;
+      white-space: pre;
+    }
+  }
+}

package/src/plugins/codeTrafficLight/index.js

@@ -0,0 +1,18 @@
+import { getCodeTrafficLightOptions } from 'tona-options'
+import { isPostDetailsPage } from '../../utils/cnblog'
+import { insertStyle } from '../../utils/helpers'
+
+export function codeTrafficLight(_, devOptions) {
+  const { enable } = getCodeTrafficLightOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isPostDetailsPage()) {
+    return
+  }
+
+  insertStyle(
+    "pre[class*='language-'].highlighter-prismjs,pre code.hljs{position:relative;padding:2.5em 1em 1em}pre[class*='language-'].highlighter-prismjs::before,pre code.hljs::before{content:'';position:absolute;top:10px;left:12px;width:12px;height:12px;background:#fe5f59;border-radius:50%;box-shadow:20px 0 #febb2c,40px 0 #29c73f;z-index:2;}",
+  )
+}

package/src/plugins/colorMode/index.js

@@ -0,0 +1,81 @@
+/**
+ * 设置皮肤色
+ * 需要皮肤使用相关 css 自定义属性
+ */
+import { getThemeOptions } from 'tona-options'
+import { randomColor } from '../../utils/helpers'
+
+/**
+ * 将 16 进制颜色转成 rgb 或 rgba
+ * @param {string} hex
+ * @param {number} opacity
+ */
+function hexToRgba(hex, opacity) {
+  if (!hex) {
+    return
+  }
+
+  // Check if already an RGB value
+  if (/^rgb\(/i.test(hex)) {
+    return hex
+  }
+
+  // Use explicit character ranges for better clarity
+  const hexReg = /^#(?:[0-9A-F]{3}|[0-9A-F]{6})$/i
+  if (!hexReg.test(hex)) {
+    return hex
+  }
+
+  // Remove the # and handle 3-digit hex shorthand
+  let hexValue = hex.slice(1)
+  if (hexValue.length === 3) {
+    hexValue = hexValue
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
+
+  const red = Number.parseInt(hexValue.slice(0, 2), 16)
+  const green = Number.parseInt(hexValue.slice(2, 4), 16)
+  const blue = Number.parseInt(hexValue.slice(4, 6), 16)
+
+  if (opacity === undefined || opacity === null) {
+    return `rgb(${red},${green},${blue})`
+  }
+
+  return `rgba(${red},${green},${blue},${opacity})`
+}
+
+/**
+ * 获取皮肤色
+ * @param {*} color
+ */
+function buildMainColor(color) {
+  const mainColor = color === 'random' ? randomColor('rgba') : color
+  return mainColor
+}
+
+/**
+ * 插入 css 变量
+ * @param {*} color
+ */
+function insertStyle(color) {
+  const primary = buildMainColor(color)
+  const primary8 = hexToRgba(primary, 0.85)
+  const primary4 = hexToRgba(primary, 0.4)
+  const primary2 = hexToRgba(primary, 0.2)
+
+  $('head').append(
+    `<style class="themeColor">:root{
+            --themeColor: ${primary};
+            --theme-primary-8: ${primary8};
+            --theme-primary-4: ${primary4};
+            --theme-primary-2: ${primary2};
+        </style>`,
+  )
+}
+
+export function colorMode(_, devOptions) {
+  const { color } = getThemeOptions(devOptions)
+  insertStyle(color)
+}

package/src/plugins/commentsAvatars/index.js

@@ -0,0 +1,85 @@
+import { getCurrentPage } from '../../utils/cnblog'
+import { poll } from '../../utils/helpers'
+
+/**
+ * 构建头像
+ */
+function buildAvatars() {
+  if ($('.custom-comment-avatar').length) {
+    return
+  }
+  $('.feedbackItem').each(function () {
+    let avatar = $(this).children('.feedbackCon').children('span:last').html()
+
+    avatar = avatar
+      ? avatar.replace('http://', 'https://')
+      : 'https://pic.cnblogs.com/face/sample_face.gif'
+
+    const ele = `<div class='custom-comment-avatar'><img src="${avatar}" class='avatar' /></div>`
+    $(this).children('.feedbackCon').prepend(ele)
+  })
+}
+
+/**
+ * 调整支持反对按钮位置
+ */
+function moveSupport() {
+  $('.comment_vote').each(function () {
+    $(this).appendTo($(this).parent().siblings('.feedbackListSubtitle'))
+  })
+}
+
+/**
+ * 作者回复靠右
+ */
+function authorRight() {
+  $('.feedbackItem').each(function () {
+    const isAuthor = $(this).find('.louzhu').text() === '楼主'
+    if (isAuthor) {
+      $(this).addClass('custom-comments-author')
+    }
+  })
+}
+
+/**
+ * 组合
+ */
+function build() {
+  buildAvatars()
+  moveSupport()
+  authorRight()
+}
+
+/**
+ * 监听 ajax
+ */
+function listener() {
+  window.renderCommentsAvatars = build
+  $(document).ajaxComplete((_, __, option) => {
+    if (
+      option.url.includes('PostComment/Add') ||
+      option.url.includes('DeleteComment')
+    ) {
+      // eslint-disable-next-line new-cap
+      new window.blogCommentManager().renderComments(0)
+    }
+  })
+  $(document).ajaxComplete((_, __, option) => {
+    if (option.url.includes('GetComments')) {
+      window.renderCommentsAvatars()
+      window.buildEmojis()
+      window.imagebox()
+    }
+  })
+  poll(() => $('.feedbackItem').length, build)
+}
+
+export function commentsAvatars() {
+  if (getCurrentPage() !== 'post') {
+    return
+  }
+  if ($('.custom-comment-avatar').lenght) {
+    return
+  }
+  listener()
+}

package/src/plugins/commentsAvatars/index.scss

@@ -0,0 +1,3 @@
+#tip_comment {
+  display: none;
+}

package/src/plugins/darkMode/index.js

@@ -0,0 +1,115 @@
+import { getDarkModeOptions } from 'tona-options'
+
+/**
+ * 覆盖自定义背景色
+ * @param {string} mode
+ */
+// function setBackground(mode) {
+//     const {
+//         enable,
+//         value,
+//         type,
+//     } = window.opts.bodyBackground
+//     if (!enable) return
+
+//     if (mode === 'dark') {
+//         if (type !== 'color') return
+//         setTimeout(() => {
+//             $('body').css('background-color', '#333')
+//         }, 0)
+//     }
+
+//     if (mode === 'light') {
+//         if (type !== 'color') return
+//         $('body').css('background-color', `${value}`) // bodybgc设置
+//     }
+// }
+
+/**
+ * 切换代码块深色、浅色主题
+ * @param {string} mode 'dark' | 'light'
+ */
+function setCodeTheme(mode) {
+  mode === 'dark'
+    ? window.highlighter.setTheme(window.darkModeCodeHighlightTheme)
+    : window.highlighter.setTheme(window.codeHighlightTheme)
+}
+
+/**
+ * 在暗色皮肤和亮色皮肤之间切换
+ * @param {string} mode 'dark' | 'light'
+ * @param {boolean} withTransition
+ */
+function changeMode(mode, withTransition = true) {
+  setCodeTheme(mode)
+  $('html').attr('theme', mode)
+  localStorage.modeType = mode
+
+  const transitionClassName =
+    mode === 'dark' ? 'light-to-dark' : 'dark-to-light'
+
+  if (withTransition) {
+    $('body').addClass(transitionClassName)
+  }
+
+  setTimeout(() => $('body').removeClass(transitionClassName), 1200)
+}
+
+/**
+ * 初始化
+ * @param {string} darkDefault
+ * @param {boolean} autoDark
+ * @param {boolean} autoLight
+ */
+function init(darkDefault, autoDark, autoLight) {
+  const hour = new Date().getHours()
+  const isNight = hour > 19 || hour <= 5
+  const storage = localStorage.modeType
+
+  const followStorage = () => {
+    if (storage) {
+      changeMode(storage, false)
+      return
+    }
+
+    if (!storage) {
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? changeMode('dark', false)
+        : changeMode('light', false)
+    }
+  }
+
+  if (!storage && darkDefault) {
+    changeMode('dark', false)
+    return
+  }
+
+  if (isNight) {
+    autoDark ? changeMode('dark', false) : followStorage()
+  }
+
+  if (!isNight) {
+    autoLight ? changeMode('light', false) : followStorage()
+  }
+}
+
+/**
+ * 处理皮肤切换按钮点击事件
+ */
+function listenToggleButtonClick() {
+  $(document).on('click', '.mode-change', () => {
+    const isDark = $('html').attr('theme') === 'dark'
+    isDark ? changeMode('light') : changeMode('dark')
+  })
+}
+
+export function darkMode(_, devOptions) {
+  const { enable, darkDefault, autoDark, autoLight } =
+    getDarkModeOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  init(darkDefault, autoDark, autoLight)
+  listenToggleButtonClick()
+}

package/src/plugins/darkMode/index.scss

@@ -0,0 +1,67 @@
+@use 'sass:map';
+
+$mode: () !default;
+$mode: map.merge(
+  (
+    bg-light: #fff,
+    bg-dark: #252528,
+  ),
+  $mode
+);
+
+$bg-light: map.get($mode, bg-light);
+$bg-dark: map.get($mode, bg-dark);
+
+.dark-to-light:after {
+  content: '';
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 99999;
+  left: 0;
+  top: 0;
+  margin-left: 0;
+  background-color: $bg-dark;
+  opacity: 0.7;
+  animation: toLight 0.6s linear 0s forwards;
+  pointer-events: none;
+}
+
+.light-to-dark:after {
+  content: '';
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 99999;
+  left: 0;
+  top: 0;
+  margin-left: 0;
+  background-color: $bg-light;
+  opacity: 0.7;
+  animation: toDark 0.6s linear 0s forwards;
+  pointer-events: none;
+}
+
+@keyframes toLight {
+  0% {
+    background-color: $bg-dark;
+    opacity: 0.7;
+  }
+
+  100% {
+    background-color: $bg-light;
+    opacity: 0;
+  }
+}
+
+@keyframes toDark {
+  0% {
+    background-color: $bg-light;
+    opacity: 0.7;
+  }
+
+  100% {
+    background-color: $bg-dark;
+    opacity: 0;
+  }
+}

package/src/plugins/donation/index.js

@@ -0,0 +1,45 @@
+import { getDonationOptions } from 'tona-options'
+import { getCurrentPage } from '../../utils/cnblog'
+import { poll } from '../../utils/helpers'
+
+/**
+ * 二维码展开收起操作
+ */
+function qrcodeToggle() {
+  $('#custom-donation-btn').click(() => {
+    $('#custom-donation-qrcode').toggle('swing')
+  })
+  $('#custom-donation-qrcode div').click(function () {
+    $(this).parent().toggle('linear')
+  })
+}
+
+export function donation(_, devOptions) {
+  const { enable, qrcodes } = getDonationOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (getCurrentPage() !== 'post') {
+    return
+  }
+  if (!qrcodes.length) {
+    return
+  }
+
+  poll(
+    () => $('#green_channel_favorite').length && $('#blog_post_info').length,
+    () => {
+      const btn = '<a id="custom-donation-btn">打赏</a>'
+      const qrcode = $('<div id="custom-donation-qrcode"></div>')
+
+      qrcodes.forEach((item) => {
+        qrcode.append(`<div style="background-image: url(${item})"></div>`)
+      })
+      $('#green_channel_favorite').after(btn)
+      $('#blog_post_info').before(qrcode)
+
+      qrcodeToggle()
+    },
+  )
+}

package/src/plugins/donation/index.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+
+$donation: () !default;
+
+$donation: map.merge(
+  (
+    btnColors: #10ac84,
+    qrcodeBackground: #fff,
+  ),
+  $donation
+) !default;
+
+$donationBtnColors: map.get($donation, btnColors);
+$donationQrcodeBackground: map.get($donation, qrcodeBackground);
+
+#custom-donation-btn {
+  background-color: $donationBtnColors !important;
+  padding: 4px 10px !important;
+  &:hover {
+    box-shadow: 0 0 5px #999;
+    transform: scale(1.1);
+    transform: translateY(-2px);
+    transition: all 0.2s;
+  }
+}
+
+#custom-donation-qrcode {
+  display: none;
+  position: relative;
+  cursor: pointer;
+  z-index: 999999999;
+  text-align: center;
+  & > div {
+    display: inline-block;
+    margin: 0 auto;
+    margin-right: 20px;
+    width: 180px;
+    height: 180px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    border-radius: 5px;
+    background-color: $donationQrcodeBackground;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #blog_post_info_block #blog_post_info #green_channel {
+    justify-content: center;
+  }
+  #custom-donation-btn {
+    margin: 3px !important;
+    &:hover {
+      transform: none;
+    }
+  }
+  #custom-donation-qrcode {
+    & > div {
+      margin-right: 0;
+      width: 100%;
+      height: 320px;
+    }
+  }
+}