tona-plugins 1.0.1

package/src/plugins/clickEffects/index.js

@@ -0,0 +1,137 @@
+import { getClickEffectsOptions } from 'tona-options'
+
+function ColorBall(params) {
+  const defaultParams = {
+    colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'],
+    size: 30,
+    maxCount: 30,
+  }
+  this.params = { ...defaultParams, ...params }
+  if (!params.colors.length) {
+    this.params.colors = defaultParams.colors
+  }
+}
+
+function getOneRandom(arr) {
+  return arr[Math.floor(Math.random() * arr.length)]
+}
+
+function _run(ball) {
+  const randomXFlag = Math.random() > 0.5
+  const randomYFlag = Math.random() > 0.5
+  let randomX = Number.parseInt(Math.random() * 160, 10)
+  let randomY = Number.parseInt(Math.random() * 160, 10)
+  if (randomXFlag) {
+    randomX = randomX * -1
+  }
+  if (randomYFlag) {
+    randomY = randomY * -1
+  }
+  const transform = `translate3d(${randomX}px,${randomY}px, 0) scale(0)`
+  ball.style.webkitTransform = transform
+  ball.style.MozTransform = transform
+  ball.style.msTransform = transform
+  ball.style.OTransform = transform
+  ball.style.transform = transform
+}
+
+ColorBall.prototype.fly = function (x, y, playCount, loopTimer = 300) {
+  const ballElements = []
+  const fragment = document.createDocumentFragment()
+  let ballNum = this.params.maxCount
+
+  if (playCount) {
+    ballNum = ballNum * playCount
+  }
+
+  let loop = 0
+
+  for (let i = 0; i < ballNum; i++) {
+    const curLoop = Number.parseInt(i / this.params.maxCount, 10)
+    const ball = document.createElement('i')
+    ball.className = `color-ball ball-loop-${curLoop}`
+    let blurX = Math.random() * 10
+    if (Math.random() > 0.5) {
+      blurX = blurX * -1
+    }
+    let blurY = Math.random() * 10
+    if (Math.random() > 0.5) {
+      blurY = blurY * -1
+    }
+    ball.style.left = `${x}px`
+    ball.style.top = `${y}px`
+    ball.style.width = `${this.params.size}px`
+    ball.style.height = `${this.params.size}px`
+    ball.style.position = 'fixed'
+    ball.style.borderRadius = '1000px'
+    ball.style.boxSizing = 'border-box'
+    ball.style.zIndex = 9999
+    ball.style.opacity = 0
+    if (curLoop === 0) {
+      ball.style.opacity = 1
+    }
+    ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)'
+    ball.style.transition = `transform 0.7s ${
+      (curLoop * loopTimer) / 1000
+    }s ease-out`
+    ball.style.backgroundColor = getOneRandom(this.params.colors)
+    fragment.appendChild(ball)
+    ballElements.push(ball)
+
+    if (curLoop !== loop) {
+      ;((num) => {
+        setTimeout(
+          () => {
+            const loopBalls = document.getElementsByClassName(
+              `ball-loop-${num}`,
+            )
+            for (let j = 0; j < loopBalls.length; j++) {
+              loopBalls[j].style.opacity = 1
+            }
+            if (num === loop) {
+              _clear(ballElements)
+            }
+          },
+          num * loopTimer + 30,
+        )
+      })(curLoop)
+      loop = curLoop
+    }
+  }
+
+  document.body.appendChild(fragment)
+  // 延迟删除
+  !playCount && _clear(ballElements)
+  // 执行动画
+  setTimeout(() => {
+    for (let i = 0; i < ballElements.length; i++) {
+      _run(ballElements[i])
+    }
+  }, 10)
+}
+
+function _clear(balls) {
+  setTimeout(() => {
+    for (let i = 0; i < balls.length; i++) {
+      document.body.removeChild(balls[i])
+    }
+  }, 1000)
+}
+
+function build(options) {
+  const colorBallConfig = {
+    colors: options.colors,
+    size: options.size,
+    maxCount: options.maxCount,
+  }
+  const color = new ColorBall(colorBallConfig)
+
+  $('body').click((e) => {
+    color.fly(e.clientX, e.clientY)
+  })
+}
+
+export function clickEffects(_, devOptions) {
+  const options = getClickEffectsOptions(devOptions)
+  options.enable && build(options)
+}

package/src/plugins/codeCopy/index.js

@@ -0,0 +1,94 @@
+/**
+ * 构建代码块复制按钮
+ */
+import { getCodeCopyOptions } from 'tona-options'
+import { isMd, isPostDetailsPage } from '../../utils/cnblog'
+import { copyToClipboard } from '../../utils/helpers'
+import { toast } from '../toast'
+
+/**
+ * 创建复制按钮
+ */
+function createCopyButtons() {
+  return '<div class="copy-btns">复制代码</div>'
+}
+
+/**
+ * 将代码复制到剪切板
+ * @param {string} code - 代码字符串
+ */
+function handleCopyCode(code, btn) {
+  copyToClipboard(code)
+    .then(() => {
+      toast('复制成功')
+      btn.text('复制成功')
+      setTimeout(() => {
+        btn.text('复制代码')
+      }, 1500)
+    })
+    .catch(() => {
+      btn.text('复制失败')
+    })
+}
+
+/**
+ * 处理复制按钮点击事件
+ */
+function handleClickCopyButton() {
+  const __MD__ = isMd()
+  const position = __MD__ ? 'pre' : '.cnblogs_code'
+  const selector = `${position},.cnblogs_Highlighter`
+
+  $(selector).on('click', '.copy-btns', function () {
+    let code
+
+    if ($(this).parent().hasClass('cnblogs_Highlighter')) {
+      code = $(this).siblings().find('code').text()
+    } else {
+      const codeBlockTagName = __MD__ ? 'code' : 'pre'
+      code = $(this).siblings(codeBlockTagName).text()
+    }
+
+    handleCopyCode(code, $(this))
+  })
+}
+
+/**
+ * 在代码块挂载复制按钮
+ */
+function mountButtons() {
+  const __MD__ = isMd()
+  const copyBtn = createCopyButtons()
+  const pres = $('#cnblogs_post_body').find('pre')
+
+  if (pres.length) {
+    const fn = __MD__ ? 'prepend' : 'before'
+    pres.each((_, item) => {
+      $(item)[fn](copyBtn)
+    })
+  }
+
+  if (!__MD__) {
+    const highlighters = $('.cnblogs_Highlighter')
+    if (!highlighters.length) {
+      return
+    }
+    highlighters.each((_, item) => {
+      $(item).prepend(copyBtn)
+    })
+  }
+}
+
+export function codeCopy(_, devOptions) {
+  const { enable } = getCodeCopyOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isPostDetailsPage()) {
+    return
+  }
+
+  mountButtons()
+  handleClickCopyButton()
+}

package/src/plugins/codeCopy/index.scss

@@ -0,0 +1,65 @@
+@use 'sass:map';
+
+$copy: () !default;
+$copy: map.merge(
+  (
+    bg: rgba(0, 0, 0, 0.6),
+    color: rgb(241, 239, 239),
+    hover-bg: rgba(0, 0, 0, 0.2),
+    hover-color: #eee,
+  ),
+  $copy
+);
+
+$bg: map.get($copy, bg);
+$color: map.get($copy, color);
+$hover-bg: map.get($copy, hover-bg);
+$hover-color: map.get($copy, hover-color);
+
+#cnblogs_post_body pre {
+  position: relative;
+}
+
+.cnblogs_code,
+.cnblogs_Highlighter {
+  position: relative;
+  .copy-btns {
+    z-index: 1;
+  }
+}
+
+pre:hover,
+.cnblogs_code:hover,
+.cnblogs_Highlighter:hover {
+  .copy-btns {
+    visibility: visible;
+  }
+}
+
+.copy-btns {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 8px;
+  visibility: hidden;
+  color: $color !important;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.copy-btns {
+  background-color: $bg !important;
+  &:active {
+    background: $hover-bg;
+    color: $hover-color;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .copy-btns {
+    display: none;
+  }
+}

package/src/plugins/codeHighlight/index.js

@@ -0,0 +1,35 @@
+import { getCodeHighlightOptions } from 'tona-options'
+import { getCurrentPage, isMd } from '../../utils/cnblog'
+import { themes } from './themes.js'
+
+/**
+ * 构建 Markdown 代码块高亮
+ * @param {*} light
+ * @param {*} dark
+ */
+function buildMarkdownHighlight(light, dark) {
+  let style
+  if (!isMd()) {
+    style = `<style>
+        :root{${themes.github}}
+        </style>`
+  } else {
+    style = `<style>
+              :root{${themes[light]}}
+              :root[theme="dark"]{${themes[dark]}}
+            </style>`
+  }
+  $('head').append(style)
+}
+
+export function codeHighlight(_, devOptions) {
+  if (getCurrentPage() !== 'post') {
+    return
+  }
+  if ($('pre').length === 0) {
+    return
+  }
+
+  const { light, dark } = getCodeHighlightOptions(devOptions)
+  buildMarkdownHighlight(light, dark)
+}

package/src/plugins/codeHighlight/index.scss

@@ -0,0 +1,216 @@
+// https://highlightjs.readthedocs.io/en/latest/theme-guide.html
+
+$background: var(--hl-base);
+$keyword: var(--hl-hue-3);
+$string: var(--hl-hue-4);
+$plain: var(--hl-mono-1);
+$comments: var(--hl-mono-3);
+$variable: var(--hl-mono-1);
+$functions: var(--hl-hue-2);
+$codeFontFamily:
+  Consolas,
+  Lucida Console,
+  Monaco,
+  Andale Mono,
+  Ubuntu Mono,
+  monospace;
+
+// tinymce5
+// Markdown
+#cnblogs_post_body.blogpost-body-html,
+#mainContent .cnblogs-markdown {
+  pre {
+    margin-top: 8px;
+    padding: 24px 0 10px;
+    border-radius: 4px;
+    background: $background;
+    font-family: $codeFontFamily !important;
+  }
+  // 单行代码及代码块
+  code {
+    font-family: $codeFontFamily !important;
+    font-size: 15px !important;
+    margin: 0;
+    word-break: break-word !important;
+    border: none !important;
+  }
+  // 代码块
+  li code {
+    font-weight: 700;
+  }
+  .hljs {
+    display: block !important;
+    color: var(--hl-mono-1) !important;
+    background: $background !important;
+    border: none !important;
+    padding: 16px 10px 8px 13px !important;
+    font-weight: normal;
+    white-space: inherit;
+  }
+  .hljs-punctuation,
+  .hljs-tag {
+    color: var(--hl-mono-1);
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--hl-mono-3);
+    font-style: italic;
+  }
+  .hljs-tag {
+    color: var(--hl-tag);
+  }
+  .hljs-doctag,
+  .hljs-formula,
+  .hljs-keyword {
+    color: $keyword;
+  }
+  .hljs-deletion,
+  .hljs-name,
+  .hljs-section,
+  .hljs-selector-tag,
+  .hljs-subst {
+    color: var(--hl-hue-5);
+  }
+  .hljs-literal {
+    color: var(--hl-hue-1);
+  }
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta-string,
+  .hljs-regexp,
+  .hljs-string {
+    color: var(--hl-hue-4);
+  }
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: var(--hl-hue-6-2);
+  }
+  .hljs-attr,
+  .hljs-number,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-pseudo,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable {
+    color: var(--hl-hue-6);
+  }
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-symbol,
+  .hljs-title {
+    color: var(--hl-hue-2);
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: 700;
+  }
+  .hljs-link {
+    text-decoration: underline;
+  }
+}
+
+// tinymce
+#cnblogs_post_body {
+  .cnblogs_code {
+    border: none;
+    background-color: $background;
+    border-radius: 4px;
+    pre {
+      padding: 30px 12px 12px;
+      overflow: auto;
+      &::before {
+        display: none;
+      }
+    }
+    & > img {
+      display: none;
+    }
+    span {
+      background-color: $background !important;
+      &[style='color: #008000;'] {
+        color: var(--hl-mono-3) !important;
+        font-style: italic;
+      }
+      &[style='color: rgba(0, 128, 128, 1);'] {
+        color: red !important;
+      }
+      &[style='background-color: #f5f5f5; color: #000000;'],
+      &[style='color: #000000;'] {
+        color: var(--hl-mono-1) !important;
+      }
+      &[style='background-color: #f5f5f5; color: #800000;'] {
+        color: var(--hl-hue-2) !important;
+      }
+      &[style='color: #0000ff;'],
+      &[style='background-color: #f5f5f5; color: #0000ff;'] {
+        color: $keyword !important;
+      }
+      &[style='color: #800000;'],
+      &[style='color: #ff0000;'],
+      &[style='background-color: #f5f5f5; color: #ff0000;'] {
+        color: var(--hl-hue-4) !important;
+      }
+      &[style='color: #8b0000;'] {
+        color: var(--hl-hue-6) !important;
+      }
+    }
+  }
+  .cnblogs_code_collapse,
+  .cnblogs_code_toolbar,
+  .code_img_opened,
+  .code_img_closed {
+    display: none;
+  }
+  .cnblogs_code_hide {
+    display: block;
+  }
+}
+
+.syntaxhighlighter {
+  background: $background !important;
+  .line.alt1,
+  .line.alt2 {
+    background-color: $background !important;
+  }
+}
+
+#cnblogs_post_body {
+  .cnblogs_Highlighter {
+    table {
+      tbody {
+        width: 100% !important;
+      }
+      .gutter {
+        padding-bottom: 0 !important;
+      }
+    }
+
+    code {
+      background-color: $background !important;
+    }
+    .keyword {
+      color: $keyword !important;
+    }
+    .string {
+      color: $string !important;
+    }
+    .plain {
+      color: $plain !important;
+    }
+    .variable {
+      color: $variable !important;
+    }
+    .comments {
+      color: $comments !important;
+      font-style: italic !important;
+    }
+    .functions {
+      color: $functions !important;
+    }
+  }
+}

package/src/plugins/codeHighlight/themes.js

@@ -0,0 +1,60 @@
+// https://highlightjs.readthedocs.io/en/latest/theme-guide.html
+
+const atomOneDark =
+  '--hl-base: #282c34;' +
+  '--hl-mono-1: #abb2bf;' +
+  '--hl-mono-3: #5c6370;' +
+  '--hl-hue-1: #56b6c2;' +
+  '--hl-hue-2: #61aeee;' +
+  '--hl-hue-3: #c678dd;' +
+  '--hl-hue-4: #98c379;' +
+  '--hl-hue-5: #e06c75;' +
+  '--hl-hue-6: #d19a66;' +
+  '--hl-hue-6-2: #e6c07b;' +
+  '--hl-tag: #abb2bf;'
+
+const atomOneLight =
+  '--hl-base: #f6f8fa;' +
+  '--hl-mono-1: #383a42;' +
+  '--hl-mono-3: #a0a1a7;' +
+  '--hl-hue-1: #0184bb;' +
+  '--hl-hue-2: #4078f2;' +
+  '--hl-hue-3: #a626a4;' +
+  '--hl-hue-4: #50a14f;' +
+  '--hl-hue-5: #e45649;' +
+  '--hl-hue-6: #986801;' +
+  '--hl-hue-6-2: #c18401;' +
+  '--hl-tag: #383A42;'
+
+const github =
+  '--hl-base: #f6f8fa;' +
+  '--hl-mono-1: #333333;' +
+  '--hl-mono-3: #6a737d;' +
+  '--hl-hue-1: #0086b3;' +
+  '--hl-hue-2: #0086b3;' +
+  '--hl-hue-3: #d73a49;' +
+  '--hl-hue-4: #55a532;' +
+  '--hl-hue-5: #63a35c;' +
+  '--hl-hue-6: #6f42c1;' +
+  '--hl-hue-6-2: #6f42c1;' +
+  '--hl-tag: #d73a49;'
+
+const pande =
+  '--hl-base: #292a2b;' +
+  '--hl-mono-1: #e6e6e6;' +
+  '--hl-mono-3: #ffcc95;' +
+  '--hl-hue-1: #0086b3;' +
+  '--hl-hue-2: #0086b3;' +
+  '--hl-hue-3: #d73a49;' +
+  '--hl-hue-4: #19f9d866;' +
+  '--hl-hue-5: #19f9d8;' +
+  '--hl-hue-6: #ff4b82;' +
+  '--hl-hue-6-2: #ff4b82;' +
+  '--hl-tag: #ffb86c;'
+
+export const themes = {
+  atomOneDark,
+  atomOneLight,
+  github,
+  pande,
+}

package/src/plugins/codeLang/index.js

@@ -0,0 +1,51 @@
+/**
+ * 构建代码块语言
+ * 仅在 Markdown 博文中生效
+ */
+import { getCodeLangOptions } from 'tona-options'
+import { isMd, isPostDetailsPage } from '../../utils/cnblog'
+
+/**
+ * 创建代码语言容器
+ */
+function createCodeLangContainer(lang) {
+  return $('<div>').addClass('awes-lang').text(lang)
+}
+
+/**
+ * 构建代码块语言
+ */
+function buildCodeWrapLanguage() {
+  $('pre code').each(function () {
+    let lang = $(this)[0].classList[0]
+    if (lang !== undefined) {
+      lang = lang.substring(9)
+
+      if (lang === '') {
+        lang = $(this)[0].classList[1]
+        if (lang === undefined || lang === '') {
+          return
+        }
+      }
+
+      const container = createCodeLangContainer(lang)
+      $(this).before(container)
+    }
+  })
+}
+
+export function codeLang(_, devOptions) {
+  const { enable } = getCodeLangOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isPostDetailsPage()) {
+    return
+  }
+  if (!isMd()) {
+    return
+  }
+
+  buildCodeWrapLanguage()
+}

package/src/plugins/codeLang/index.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+
+$codeLanguage: () !default;
+$codeLanguage: map.merge(
+  (
+    color: #999999,
+    backgroundColor: var(--hl-base),
+  ),
+  $codeLanguage
+);
+
+$color: map.get($codeLanguage, color);
+$backgroundColor: map.get($codeLanguage, backgroundColor);
+
+#cnblogs_post_body pre {
+  margin: 24px 0;
+}
+
+.awes-lang {
+  position: absolute;
+  top: -19px;
+  right: 32px;
+  padding: 0 16px;
+  font-size: 12px;
+  color: $color;
+  background: $backgroundColor;
+  border-radius: 4px 4px 0 0;
+}