tona-plugins 1.0.1

package/src/plugins/emoji/index.js

@@ -0,0 +1,167 @@
+// 评论输入表情
+import { getEmojiOptions } from 'tona-options'
+import { isPostDetailsPage } from '../../utils/cnblog'
+import { isUrl } from '../../utils/helpers'
+
+const defaultEmojiList = [
+  {
+    value: '👍',
+    label: '',
+  },
+  {
+    value: '👏',
+    label: '',
+  },
+  {
+    value: '😄',
+    label: '',
+  },
+  {
+    value: '🎉',
+    label: '',
+  },
+  {
+    value: '🚀',
+    label: '',
+  },
+  {
+    value: '👀',
+    label: '',
+  },
+]
+
+/**
+ * 创建按钮
+ */
+function createEmojiButton(buttonIcon) {
+  return `<span class="qaq-btn" title="表情">${
+    buttonIcon.length ? buttonIcon : '🍺'
+  }</span>`
+}
+
+/**
+ * 创建表情项
+ */
+function createEmojiItem(itemData) {
+  const { value, label } = itemData
+  const el = $('<div>').addClass('emoji-item')
+
+  if (isUrl(value)) {
+    const emoji = $('<img />').addClass('emoji emoji-img').attr('src', value)
+    el.append(emoji)
+  } else {
+    el.append(`<div class="emoji emoji-text">${value}</div>`)
+  }
+
+  if (typeof label === 'string') {
+    el.attr('title', label)
+  }
+
+  return el
+}
+
+/**
+ * 创建表情列表
+ */
+function createEmojiList(emojiList) {
+  const emojis = emojiList?.length ? emojiList : defaultEmojiList
+  const $emoji = $('<div class="emoji-list"></div>')
+
+  emojis.forEach((item) => {
+    const emojiItem = createEmojiItem(item)
+    $emoji.append(emojiItem)
+  })
+
+  return $emoji
+}
+
+/**
+ * 创建表情面板容器
+ */
+function createEmojiContainer() {
+  return $('<div>').addClass('qaq-wrap anim-scale-in')
+}
+
+/**
+ * 创建表情面板蒙层
+ */
+function createMask() {
+  return $('<div>').addClass('qaq-mask')
+}
+
+/**
+ * 打开或关闭表情面板
+ */
+function qaqToggle() {
+  $('.qaq-wrap').toggle()
+}
+
+/**
+ * 选择表情
+ */
+function selectEmoji() {
+  $('.emoji-item').click(function () {
+    const $emoji = $(this).find('.emoji')
+    let emojiValue
+
+    const isImgEmoji = $emoji.hasClass('emoji-img')
+
+    if (isImgEmoji) {
+      const url = $emoji.attr('src')
+      emojiValue = `![](${url})`
+    } else {
+      const textEmoji = $emoji.html()
+      emojiValue = textEmoji
+    }
+
+    document.querySelector('#tbCommentBody').value += emojiValue
+    qaqToggle()
+  })
+}
+
+/**
+ * 创建表情插件
+ * @param {Array} emojiData
+ */
+function createEmoji(emojiData, buttonIcon) {
+  const button = createEmojiButton(buttonIcon)
+  const emojiContainer = createEmojiContainer()
+  const mask = createMask()
+  const emojiList = createEmojiList(emojiData)
+
+  emojiContainer.append(emojiList).append(mask)
+
+  $('.commentbox_title_right').prepend(button).css('position', 'relative')
+
+  $('.qaq-btn')
+    .after(emojiContainer)
+    .click(() => qaqToggle())
+
+  $('.qaq-mask').click(() => qaqToggle())
+
+  selectEmoji()
+}
+
+export function emoji(_theme, devOptions) {
+  const { enable, emojiList, buttonIcon } = getEmojiOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isPostDetailsPage()) {
+    return
+  }
+
+  const builder = () => {
+    if ($('.qaq-btn').length) {
+      return
+    }
+    if (!$('.commentbox_title_right').length) {
+      return
+    }
+    createEmoji(emojiList, buttonIcon)
+  }
+
+  builder()
+  window.buildEmojis = builder
+}

package/src/plugins/emoji/index.scss

@@ -0,0 +1,155 @@
+@use 'sass:map';
+
+$emoji: () !default;
+$emoji: map.merge(
+  (
+    textEmojiColor: #666,
+    bg: #fff,
+    borderColor: #e1e1e1,
+    hoverBg: #f8f8f8,
+    hoverBorderColor: #eee,
+    fontEmojiSize: 14px,
+  ),
+  $emoji
+);
+
+$textEmojiColor: map.get($emoji, textEmojiColor);
+$bg: map.get($emoji, bg);
+$borderColor: map.get($emoji, borderColor);
+$hoverBg: map.get($emoji, hoverBg);
+$hoverBorderColor: map.get($emoji, hoverBorderColor);
+$fontEmojiSize: map.get($emoji, fontEmojiSize);
+
+.qaq-btn {
+  user-select: none;
+  cursor: pointer;
+}
+
+.qaq-wrap {
+  display: none;
+  position: absolute;
+  top: 34px;
+  left: -4%;
+  padding: 8px;
+  background-color: $bg;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  width: 500px;
+  max-width: 283px;
+  z-index: 3;
+
+  &::before,
+  &::after {
+    position: absolute;
+    content: '';
+    margin: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &:after {
+    top: -9px;
+    left: 14px;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid $borderColor;
+  }
+
+  &::before {
+    top: -8px;
+    left: 14px;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid $bg;
+    z-index: 1;
+  }
+}
+
+.emoji-list {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  padding-right: 2px;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: $fontEmojiSize;
+
+  .emoji-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    color: $textEmojiColor;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    user-select: none;
+
+    img.emoji {
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      background-color: $hoverBg;
+      border-color: $hoverBorderColor;
+
+      & > .emoji {
+        transform: scale(1.2);
+        transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 2);
+      }
+    }
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #d2cfcf;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.qaq-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  cursor: default;
+  content: ' ';
+  background: transparent;
+  z-index: -1;
+}
+
+.anim-scale-in {
+  animation-name: scale-in;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/plugins/footer/index.js

@@ -0,0 +1,35 @@
+import { getLinksOptions } from 'tona-options'
+
+/**
+ * 构建 copyright
+ */
+function buildCopyright() {
+  const nickName = $('#profile_block a:first').text().trim()
+
+  const el = `<div id='copyright'>
+                    <span>Copyright © ${new Date().getFullYear()} ${nickName}</span>
+                    <span> Powered by you 🌊 Theme in ${'tona'.link('#')}</span>
+                </div>`
+
+  $('#footer').empty().append(el)
+}
+
+/**
+ * 构建自定义链接
+ */
+function buildCustomLinks(devOptions) {
+  const config = getLinksOptions(devOptions)
+
+  if (config.links.length) {
+    const $links = $('<ul id="links"></ul>')
+    for (const { title, url } of config.links) {
+      $links.append(`<li><a href='${url}'>${title}</a></li>`)
+    }
+    $('#footer').prepend($links.prop('outerHTML'))
+  }
+}
+
+export function footer(_, devOptions) {
+  buildCopyright()
+  buildCustomLinks(devOptions)
+}

package/src/plugins/footer/index.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+
+$footer: () !default;
+$footer: map.merge(
+  (
+    background: #232323,
+  ),
+  $footer
+);
+
+$footerBackground: map.get($footer, background);
+
+#footer {
+  margin: 54px 0 0;
+  padding: 32.4px 0;
+  text-align: center;
+  color: #979b9e;
+  background: $footerBackground;
+  #links {
+    display: flex;
+    justify-content: center;
+    font-size: 16px;
+    li {
+      color: #fff;
+      &:hover {
+        text-shadow: 0 0 2px #eee;
+        color: var(--themeColor);
+        transition: all 0.25s;
+      }
+    }
+    & > li:not(:first-child) {
+      margin-left: 21.6px;
+    }
+  }
+  #copyright {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 14.4018px;
+    font-size: 14px;
+    span {
+      margin-top: 7.1982px;
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #links {
+    width: 90vw;
+    overflow: auto;
+    margin: 0 auto;
+    white-space: nowrap;
+  }
+}

package/src/plugins/imagePreview/index.js

@@ -0,0 +1,98 @@
+/**
+ * 博客园现在使用了与之相同的库
+ * 1. 随笔详情页图片灯箱已移除，博客园已拥有此功能
+ * 2. 相册查看图像
+ */
+import { getImagePreviewOptions } from 'tona-options'
+import { mediaZoomJs } from '../../constants/cdn'
+import { isAlbumPage, isMd, isPostDetailsPage } from '../../utils/cnblog'
+import { loadScript, mousewheel, poll } from '../../utils/helpers'
+
+const customGalleryClass = 'custom-gallery'
+
+const mediumZoomConfig = {
+  opacity: 0.5,
+}
+
+/**
+ * 去除 TinyMCE 插入的图片的容器链接
+ */
+function removeImageOuterHref() {
+  if (isMd()) {
+    return
+  }
+  $('p img').css('display', 'block').unwrap()
+}
+
+/**
+ * 构建相册
+ */
+function buildGallery() {
+  if (!isAlbumPage()) {
+    return
+  }
+  const title = $('.thumbTitle, .galleryTitle').text().trim()
+  const el = `
+    <section class="${customGalleryClass}">
+        <h3>${title}</h3>
+        <div></div>
+    </section>`
+  const gallery = $(el)
+  $('.gallery img').each(function () {
+    const src = $(this).attr('src')
+    const openSrc = src.replace(/t_/, 'o_')
+    gallery.find('div').append(`<img src="${openSrc}"/>`)
+  })
+  $('.forFlow').append(gallery)
+  $('.gallery').remove()
+}
+
+/**
+ * 构建图片灯箱
+ */
+function build() {
+  // 博客园给随笔内容中的图片添加了这个功能，现将它移除
+  // #cnblogs_post_body img,
+  const imgList = $(` .blog_comment_body img, .${customGalleryClass} img`)
+  if (imgList === 0) {
+    return
+  }
+  $.each(imgList, (i) => {
+    const item = $(imgList[i])
+    item.addClass('custom-zoom')
+  })
+
+  const zoom = window.mediumZoom('.custom-zoom', mediumZoomConfig)
+
+  zoom.on('open', () => {
+    mousewheel(() => {
+      zoom.close()
+    })
+  })
+
+  removeImageOuterHref()
+}
+
+export function imagePreview(_, devOptions) {
+  const { enable } = getImagePreviewOptions(devOptions)
+
+  if (!enable) {
+    return
+  }
+  if (!isMd() && !isAlbumPage() && !isPostDetailsPage()) {
+    return
+  }
+  if ($('.custom-zoom').length) {
+    return
+  }
+
+  buildGallery()
+  loadScript(mediaZoomJs, () => {
+    poll(
+      () =>
+        $('.blog_comment_body').length || $(`.${customGalleryClass}`).length,
+      build,
+    )
+  })
+  window.imagebox = build
+}

package/src/plugins/imagePreview/index.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+
+$imagebox: () !default;
+$imagebox: map.merge(
+  (
+    background: rgba(0, 0, 0, 0.5),
+  ),
+  $imagebox
+);
+
+$imageboxBackground: map.get($imagebox, background);
+
+body {
+  .medium-zoom-overlay {
+    background: $imageboxBackground !important;
+    z-index: 6;
+  }
+
+  .medium-zoom-image--opened {
+    z-index: 7;
+  }
+}
+
+html .medium-zoom--opened .medium-zoom-overlay {
+  opacity: 0.9;
+}
+
+.lightbox-post {
+  cursor: zoom-in;
+}
+
+// gallery start
+.gallery {
+  display: none;
+}
+
+.custom-gallery {
+  div {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    img {
+      margin: 8px;
+      width: 170px;
+      height: 170px;
+      border-radius: 4px;
+    }
+  }
+}
+
+// gallery end

package/src/plugins/license/index.js

@@ -0,0 +1,62 @@
+// 构建随笔签名
+import { getLicenseOptions } from 'tona-options'
+import {
+  getBlogname,
+  getCurrentPage,
+  getCurrentPostUrl,
+} from '../../utils/cnblog'
+
+const containerId = 'post-signature'
+
+/**
+ * 构建容器
+ */
+function buildContainer() {
+  const author = getBlogname()
+  const href = getCurrentPostUrl()
+  const el = `<div id='${containerId}'>
+                    <p>本文作者：${author}</p>
+                    <p>本文链接：${href}</p>
+                </div>`
+  $('#blog_post_info_block').before(el)
+}
+
+/**
+ * 构建版权信息
+ * @param {boolean} enableLicense
+ * @param {string} licenseName
+ * @param {string} licenseLink
+ */
+function buildLicense(enableLicense, licenseName, licenseLink) {
+  if (!enableLicense) return
+  const agreement = licenseName.length
+    ? licenseName
+    : '知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆'
+  const el = `<p>版权声明：本作品采用${agreement}<a href='${licenseLink}'>许可协议</a>进行许可。</p>`
+  $(`#${containerId}`).append(el)
+}
+
+/**
+ * 构建自定义内容
+ * @param {Array} content
+ */
+function buildContent(content) {
+  let el = ''
+  for (let i = 0; i < content.length; i++) {
+    el += `<p>${content[i]}</p>`
+  }
+  $(`#${containerId}`).append(el)
+}
+
+export function license(_, devOptions) {
+  const { enable, license, licenseName, licenseLink, contents } =
+    getLicenseOptions(devOptions)
+
+  if (!enable) return
+  if (getCurrentPage() !== 'post') return
+  if ($('#MySignature').children().length) return
+
+  buildContainer()
+  buildLicense(license, licenseName, licenseLink)
+  buildContent(contents)
+}

package/src/plugins/license/index.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+
+$postSignature: (
+  primary: #fa745e,
+  background: #f6f8fa,
+  borderRadius: 2px,
+) !default;
+
+$psignaturePrimary: map.get($postSignature, primary);
+$psignatureBackground: map.get($postSignature, background);
+$psignatureBorderRadius: map.get($postSignature, borderRadius);
+
+#mainContent {
+  #post-signature {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    margin: 25px 0;
+    padding: 10px 24px 10px 15px;
+    background: $psignatureBackground;
+    border-left: 5px solid $psignaturePrimary;
+    border-radius: $psignatureBorderRadius;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6em;
+    }
+
+    a {
+      color: inherit;
+      border-bottom: none;
+    }
+
+    &::before {
+      content: '!';
+      background: $psignaturePrimary;
+      position: absolute;
+      top: 16px;
+      left: -12px;
+      color: #fff;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 18px;
+      font-weight: 800;
+      font-size: 12px;
+    }
+  }
+}