tona-plugins 1.0.1

package/src/plugins/postMessage/index.scss

@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use 'sass:list';
+
+$postMessage: () !default;
+
+$postMessage: map.merge(
+  (
+    categoriesBackground: #ff6b6b,
+    tagsBackground: #22a6b3 #0097e6 #fbc531 #10ac84,
+    colorCategories: #fff,
+    colorTags: #333,
+    colorMessage: #999,
+  ),
+  $postMessage
+);
+
+$color-categories: map.get($postMessage, colorCategories);
+$color-tags: map.get($postMessage, colorTags);
+$color-message: map.get($postMessage, colorMessage);
+$postMessageTagBackground: map.get($postMessage, tagsBackground);
+$categoriesBackground: map.get($postMessage, categoriesBackground);
+
+.post-message {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.message-top {
+  display: flex;
+  flex-wrap: wrap;
+  .message-categories,
+  .message-tags {
+    display: flex;
+    align-items: center;
+    margin: 8px 0;
+    a {
+      padding: 4px 8px;
+      font-size: 13px;
+      line-height: 14px;
+      border-radius: 4px;
+      margin: 0 0 0 8px;
+    }
+  }
+  .message-categories {
+    margin: 0 16px 0 0;
+    a {
+      color: $color-categories;
+      background-color: $categoriesBackground;
+      border: 1px solid $categoriesBackground;
+    }
+  }
+  .message-tags {
+    a {
+      border: 1px solid;
+      color: $color-tags;
+    }
+  }
+}
+
+@for $i from 1 through list.length($postMessageTagBackground) {
+  .message-tags a:nth-child(#{$i}) {
+    border-color: list.nth($postMessageTagBackground, $i);
+  }
+}
+
+.message-bottom {
+  display: flex;
+  gap: 8px;
+  color: $color-message;
+  white-space: nowrap;
+  overflow: auto;
+  font-size: 13px;
+}
+
+#EntryTag,
+#BlogPostCategory {
+  display: none;
+}

package/src/plugins/postTopImage/index.js

@@ -0,0 +1,28 @@
+// 在随笔详情页顶部随笔生成一个文章头图
+import { getPostTopImageOptions } from 'tona-options'
+import { isPostDetailsPage } from '../../utils/cnblog'
+import { randomArrayElements, randomImgUrl } from '../../utils/helpers'
+
+export function postTopImage(_, devOptions) {
+  const { enable, imgs, fixed } = getPostTopImageOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isPostDetailsPage()) {
+    return
+  }
+
+  const url =
+    imgs.length === 0 ? randomImgUrl() : randomArrayElements(imgs, 1)[0]
+  const ele = `<a  href="${url}" target="blank"><div id="custom-post-topimage"></div></a>`
+  const style = {
+    'background-image': `url(${url})`,
+  }
+
+  if (fixed) {
+    style['background-attachment'] = 'fixed'
+  }
+  $('.post>.postTitle').before(ele)
+  $('#custom-post-topimage').css(style)
+}

package/src/plugins/postTopImage/index.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+
+$postTopimage: () !default;
+$postTopimage: map.merge(
+  (
+    height: 400px,
+  ),
+  $postTopimage
+);
+
+$height: map.get($postTopimage, height);
+
+#custom-post-topimage {
+  width: 100%;
+  height: $height;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+  border-radius: 2px;
+}
+#custom-post-topimage:hover {
+  cursor: zoom-in;
+}
+
+@media screen and (max-width: 767px) {
+  #custom-post-topimage {
+    height: 184px;
+  }
+}

package/src/plugins/qrcode/index.js

@@ -0,0 +1,42 @@
+// 二维码
+import { getQrcodeOptions } from 'tona-options'
+
+/**
+ * 构建二维码图片
+ * @param {*} img
+ */
+function buildImage(img) {
+  if (img === '') {
+    return
+  }
+  const ele = `<img class='custom-qrcode' src='${img}' />`
+  $('.custom-signature').length
+    ? $('.custom-signature').after(ele)
+    : $('#blog-news').after(ele)
+}
+
+/**
+ * 构建文字描述信息
+ * @param {*} desc
+ */
+function buildDesc(desc) {
+  if (desc === '') {
+    return
+  }
+  const ele = `<div class='custom-qrcode-desc'>${desc}</div>`
+  $('.custom-qrcode').after(ele)
+}
+
+export function qrcode(_, devOptions) {
+  const { enable, img, desc } = getQrcodeOptions(devOptions)
+
+  if ($('#blog-news').length === 0) {
+    return
+  }
+  if (!enable) {
+    return
+  }
+
+  buildImage(img)
+  buildDesc(desc)
+}

package/src/plugins/qrcode/index.scss

@@ -0,0 +1,10 @@
+.custom-qrcode {
+  width: 100%;
+  height: 248px;
+}
+
+.custom-qrcode-desc {
+  padding: 5px 14px 10px;
+  word-break: break-all;
+  line-height: 1.5em;
+}

package/src/plugins/signature/index.js

@@ -0,0 +1,47 @@
+// 个性签名
+import { getSignatureOptions } from 'tona-options'
+import { typedJs } from '../../constants/cdn'
+import { loadScript } from '../../utils/helpers'
+
+/**
+ * 构建容器
+ * @param {*} selector
+ */
+function build(selector) {
+  const el = "<div class='custom-signature'><span></span></div>"
+  $(selector).append(el)
+}
+
+/**
+ * 构建打字机效果
+ * @param {*} contents
+ */
+function typed(contents) {
+  loadScript(typedJs, () => {
+    // eslint-disable-next-line no-new
+    new window.Typed('.custom-signature span', {
+      strings: contents,
+      typeSpeed: 70,
+    })
+  })
+}
+
+export function signature(_, devOptions, pluginOptions) {
+  const { enable, contents } = getSignatureOptions(devOptions)
+  if (!enable) {
+    return
+  }
+
+  let pluginConfig = {
+    selector: '#sidebar_news',
+  }
+
+  if (pluginOptions) {
+    pluginConfig = { ...pluginConfig, ...pluginOptions }
+  }
+
+  const { selector } = pluginConfig
+
+  build(selector)
+  typed(contents)
+}

package/src/plugins/signature/index.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+$signature: () !default;
+$signature: map.merge(
+  (
+    padding: 1rem 14px,
+    fontSize: 1em,
+  ),
+  $signature
+);
+$padding: map.get($signature, padding);
+$fontSize: map.get($signature, fontSize);
+
+.custom-signature {
+  padding: $padding;
+  font-size: $fontSize;
+  line-height: 1.5em;
+}

package/src/plugins/toast/index.js

@@ -0,0 +1,49 @@
+import { Notyf } from 'notyf'
+import 'notyf/notyf.min.css'
+
+export function toast(message, type = 'success', duration) {
+  const notyf = new Notyf({
+    position: { x: 'right', y: 'top' },
+    icon: false,
+    duration: 2500,
+    dismissible: true,
+    type: 'success',
+    types: [
+      {
+        type: 'info',
+        background: 'rgba(0,0,0,0.7)',
+        icon: false,
+      },
+      {
+        type: 'warning',
+        background: 'orange',
+        icon: {
+          className: 'material-icons',
+          tagName: 'i',
+          text: 'warning',
+        },
+      },
+      {
+        type: 'error',
+        background: 'indianred',
+        duration: 2000,
+        dismissible: true,
+      },
+    ],
+  })
+
+  if (type === 'info') {
+    notyf.open({
+      type,
+      message,
+      duration,
+      icon: false,
+    })
+  } else {
+    notyf[type]({
+      message,
+      duration,
+      icon: false,
+    })
+  }
+}

package/src/plugins/tools/index.js

@@ -0,0 +1,251 @@
+import { getToolsOptions } from 'tona-options'
+import { getCurrentPage, likePost } from '../../utils/cnblog'
+import { isPhone } from '../../utils/helpers'
+import { toast } from '../toast'
+
+/**
+ * 滚动到评论输入框
+ * @param {string} container
+ */
+function scrollToComment(container) {
+  $(container).animate(
+    {
+      scrollTop: $('#mainContent')[0].scrollHeight,
+    },
+    300,
+  )
+}
+
+/**
+ * 滚动到顶部
+ * @param {string} container
+ */
+function scrollToTop(container) {
+  $(container).animate(
+    {
+      scrollTop: 0,
+    },
+    200,
+  )
+}
+
+/**
+ * 创建 toolbar 容器
+ */
+function createToolbarContainer() {
+  return $('<div class="custom-toolbar">')
+}
+
+/**
+ * 创建按钮项中的图标
+ */
+function createIcon(icon, iconType) {
+  const $icon = $('<i>')
+  iconType === 'className' ? $icon.addClass(icon) : $icon.html(icon)
+  return $icon
+}
+
+/**
+ * 创建按钮项中的工具提示
+ */
+function createTooltip(text, className) {
+  const ele = $(`<div class="tooltip">${text}</div>`)
+  if (className) {
+    ele.addClass(className)
+  }
+  return ele
+}
+
+/**
+ * 创建 toggle 按钮
+ * @param {string} icon
+ */
+function createToggleItem(icon, iconType, isActiveIcon) {
+  const $ele = $('<div class="toolbar-item toolbar-item-toggle"></div>')
+  const $icon = createIcon(icon, iconType)
+  const $tooltip = createTooltip(
+    isActiveIcon ? '收起' : '展开',
+    ' tooltip-toggle',
+  )
+
+  isActiveIcon && $ele.addClass('active').hide()
+
+  $ele.append($icon)
+  $ele.append($tooltip)
+
+  return $ele
+}
+
+/**
+ * 创建 toolbar 按钮项
+ */
+function createToolbarItem(item, translateY, finalPluginOptions) {
+  const { className, callback, icon, iconType, tooltip } = item
+
+  const $item = $(
+    `<div class="toolbar-item" style="transform: translateY(-${translateY}px)">`,
+  )
+
+  if (className) {
+    $item.addClass(className)
+  }
+
+  $item.on('click', () => callback(finalPluginOptions))
+
+  const $icon = createIcon(icon, iconType)
+  const $tip = createTooltip(tooltip)
+
+  $item.append($icon)
+  $item.append($tip)
+
+  return $item
+}
+
+/**
+ * 创建按钮插件
+ */
+function createToolbar(finalPluginOptions) {
+  const { toolbarItems, menuIcon, menuActiveIcon, menuIconType } =
+    finalPluginOptions
+
+  const $toolbar = createToolbarContainer()
+  const $toggleItem = createToggleItem(menuIcon, menuIconType, false)
+  const $toggleActiveItem = createToggleItem(menuActiveIcon, menuIconType, true)
+
+  const pageCondition = (page) => {
+    return page === getCurrentPage() || page === 'all'
+  }
+
+  let translateY = 0
+
+  toolbarItems.reverse().forEach((item) => {
+    if (!item.enable) {
+      return
+    }
+    if (pageCondition(item.page)) {
+      const $item = createToolbarItem(item, translateY, finalPluginOptions)
+      translateY += 40
+      $toolbar.append($item)
+    }
+  })
+
+  $toolbar.append($toggleItem).append($toggleActiveItem)
+  $('body').append($toolbar)
+  $('.toolbar-item-toggle').click(handleToggle)
+}
+
+/**
+ * 处理展开和收起
+ */
+function handleToggle() {
+  const transformed = (translateY) => {
+    let _translateY = translateY
+    $('.toolbar-item:not(.toolbar-item-toggle)').each((_, item) => {
+      $(item).css({
+        transform: `translateY(${_translateY}px)`,
+      })
+      _translateY += translateY - 40
+    })
+  }
+
+  const toggleExtend = (isExtend) => {
+    const translateY = isExtend ? 90 : -50
+    const $menuButton = $('.toolbar-item-toggle:not(.active)')
+    const $activeMenuButton = $('.toolbar-item-toggle.active')
+
+    transformed(translateY)
+
+    if (isExtend) {
+      $menuButton.show()
+      $activeMenuButton.hide()
+    } else {
+      $menuButton.hide()
+      $activeMenuButton.show()
+    }
+  }
+
+  $('.custom-toolbar').toggleClass('extend')
+  $('.custom-toolbar').hasClass('extend')
+    ? toggleExtend(false)
+    : toggleExtend(true)
+}
+
+export function tools(_, devOptions, pluginOptions) {
+  const { enable, initialOpen } = getToolsOptions(devOptions)
+  if (!enable) {
+    return
+  }
+
+  const pluginDefaultOptions = {
+    scrollContainer: 'html',
+    menuIconType: 'html', // 'className' | 'html'
+    menuIcon: '➕',
+    menuActiveIcon: '➖',
+    toolbarItems: [
+      {
+        enable: true,
+        page: 'all',
+        icon: '🚀',
+        iconType: 'html',
+        tooltip: '回顶',
+        callback: (config) => scrollToTop(config.scrollContainer),
+      },
+      {
+        enable: false,
+        page: 'all',
+        icon: '🌜',
+        iconType: 'html',
+        tooltip: '深色',
+        className: 'mode-change',
+        callback() {},
+      },
+      {
+        enable: true,
+        page: 'post',
+        icon: '👍',
+        iconType: 'html',
+        tooltip: '推荐',
+        callback() {
+          toast('推荐成功')
+          likePost()
+        },
+      },
+      {
+        enable: true,
+        page: 'post',
+        icon: '💗',
+        iconType: 'html',
+        tooltip: '关注',
+        callback() {
+          toast('关注成功')
+          window.follow()
+        },
+      },
+      {
+        enable: true,
+        page: 'post',
+        icon: '📌',
+        iconType: 'html',
+        tooltip: '收藏',
+        callback() {
+          window.AddToWz()
+        },
+      },
+      {
+        enable: true,
+        page: 'post',
+        icon: '💬',
+        iconType: 'html',
+        tooltip: '评论',
+        callback: (config) => scrollToComment(config.scrollContainer),
+      },
+    ],
+  }
+
+  const finalPluginOptions = $.extend(true, pluginDefaultOptions, pluginOptions)
+
+  createToolbar(finalPluginOptions)
+  if (!isPhone() && initialOpen) {
+    handleToggle()
+  }
+}

package/src/plugins/tools/index.scss

@@ -0,0 +1,114 @@
+@use 'sass:map';
+
+$toolMenu: () !default;
+$toolMenu: map.merge(
+  (
+    background: #fff,
+    color: #fff,
+  ),
+  $toolMenu
+);
+
+$background: map.get($toolMenu, background);
+$color: map.get($toolMenu, color);
+
+.custom-toolbar {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 40px;
+  height: 40px;
+}
+
+.toolbar-item {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  background-color: $background;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 20px;
+  line-height: 40px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  &.toolbar-item-toggle {
+    position: absolute;
+    bottom: 0;
+  }
+  i {
+    display: flex;
+    justify-content: center;
+    font-style: normal;
+    outline: none;
+    &::before {
+      margin-right: 0;
+    }
+    &::selection {
+      background: none;
+    }
+  }
+  .tooltip {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    font-size: 12px;
+    pointer-events: none;
+    visibility: hidden;
+    transform: translateY(-31px);
+    z-index: 9;
+    &:after {
+      position: absolute;
+      right: -5px;
+      content: '';
+      width: 0;
+      height: 0;
+      margin: 0;
+      border-bottom: 6px solid transparent;
+      border-top: 6px solid transparent;
+      border-left: 6px solid #333;
+    }
+  }
+  &:hover {
+    .tooltip {
+      visibility: visible;
+      transform: translate(-50px, -31px);
+      transition: transform 0.2s;
+    }
+  }
+  &:active {
+    filter: brightness(0.8);
+    transition: filter 0.2s;
+  }
+}
+
+@media screen and (max-width: 1366px) {
+  .menu-item-tooltip {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .toolbar-item {
+    &:hover {
+      .tooltip {
+        visibility: hidden;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .custom-tools-menu .menu-item:not(:last-child):hover {
+    transform: none;
+  }
+  .custom-tools-menu {
+    right: 20px;
+    bottom: 20px;
+  }
+}

package/src/plugins/webTag/index.js

@@ -0,0 +1,40 @@
+// 设置网站图标和标题
+import { getWebsiteTagOptions } from 'tona-options'
+
+/**
+ * 构建网页标题
+ * @param {*} title
+ */
+function setTitle(title) {
+  if (title === '') {
+    return
+  }
+  document.title = title
+}
+
+/**
+ * 构建网页 favicon
+ * @param {*} favicon
+ */
+function setFavicon(favicon) {
+  if (favicon === '') {
+    return
+  }
+  const el = document.getElementById('favicon')
+  if (el === null) {
+    $('title').after(
+      `<link id="favicon" rel="shortcut icon" href="${favicon}" type="image/svg+xml">`,
+    )
+  } else {
+    el.href = favicon
+  }
+}
+
+export function webTag(_, devOptions) {
+  const { enable, title, favicon } = getWebsiteTagOptions(devOptions)
+  if (!enable) {
+    return
+  }
+  setTitle(title)
+  setFavicon(favicon)
+}