nnbb 0.0.1

package/components/WebMention.js

@@ -0,0 +1,173 @@
+import BLOG from '@/blog.config'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import Image from 'next/image'
+
+/**
+ * 评论插件
+ * @param issueTerm
+ * @param layout
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const WebmentionCount = ({ target }) => {
+  const initialCounts = {
+    count: 0,
+    type: {
+      like: 0,
+      mention: 0,
+      reply: 0,
+      repost: 0
+    }
+  }
+  const [counts, setCounts] = useState(initialCounts)
+  const fetchCounts = async (target) => {
+    const responseData = await fetch(`https://webmention.io/api/count.json?target=${encodeURIComponent(target)}`)
+    return (responseData.json) ? await responseData.json() : responseData
+  }
+  useEffect(() => {
+    async function getCounts() {
+      const responseCounts = await fetchCounts(target)
+      setCounts(responseCounts)
+    }
+    getCounts()
+  }, [target])
+
+  return (
+    <div className='webmention-counts'>
+      {counts
+        ? (
+          <div className='counts'>
+            <span>
+              <span className='count'>{counts.type.like || 0}</span>Likes
+            </span>
+            <span>
+              <span className='count'>{counts.type.reply || 0}</span>Replies
+            </span>
+            <span>
+              <span className='count'>
+                {(counts.type.repost || 0) + (counts.type.mention || 0)}
+              </span>
+              Mentions
+            </span>
+          </div>
+          )
+        : (
+            <p>Failed to fetch Webmention counts</p>
+          )
+      }
+    </div>
+  )
+}
+
+const Avatar = ({ author }) => (
+  <a className='avatar-wrapper' href={author.url} key={author.name}>
+    <Image
+      className="avatar"
+      src={author.photo}
+      alt={author.name}
+      fill
+      sizes="(max-width: 768px) 100vw,
+              (max-width: 1200px) 50vw,
+              33vw"
+    />
+  </a>
+)
+
+const WebmentionReplies = ({ target }) => {
+  const [mentions, setMentions] = useState([])
+  const fetchMentions = async (target) =>
+    fetch(
+      `https://webmention.io/api/mentions.jf2?per-page=500&target=${encodeURIComponent(target)}&token=${BLOG.COMMENT_WEBMENTION.TOKEN}`
+    ).then((response) => (response.json ? response.json() : response))
+  useEffect(() => {
+    async function getMentions() {
+      const responseMentions = await fetchMentions(target)
+      if (responseMentions.children) {
+        setMentions(responseMentions.children)
+      }
+    }
+
+    getMentions()
+  }, [target])
+
+  const distinctMentions = [
+    ...new Map(mentions.map((item) => [item.author.url, item])).values()
+  ].sort((a, b) => new Date(a['wm-received']) - new Date(b['wm-received']))
+
+  const replies = mentions.filter(
+    (mention) => 'in-reply-to' in mention && 'content' in mention
+  )
+
+  return (
+    <div>
+      <p>
+        {distinctMentions.length > 0
+          ? `Already ${distinctMentions.length} people liked, shared or talked about this article:`
+          : 'Be the first one to share this article!'}
+      </p>
+      <div className='webmention-avatars'>
+        {distinctMentions.map((reply) => (
+          <Avatar key={reply.author.name} author={reply.author} />
+        ))}
+      </div>
+      {replies && replies.length
+        ? (
+          <div className='webmention-replies'>
+            <h4>Replies</h4>
+            <ul className='replies'>
+              {replies.map((reply) => (
+                <li className='reply' key={reply.content.text}>
+                  <div>
+                    <Avatar key={reply.author.name} author={reply.author} />
+                  </div>
+                  <div className='text'>
+                    <p className='reply-author-name'>{reply.author.name}</p>
+                    <p className='reply-content'>{reply.content.text}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+          )
+        : null}
+    </div>
+  )
+}
+
+const WebMentionBlock = ({ frontMatter }) => {
+  const router = useRouter()
+  const url = `https://${BLOG.COMMENT_WEBMENTION.HOSTNAME}${router.asPath}`
+  const tweet = `${frontMatter.title} by @${BLOG.COMMENT_WEBMENTION.TWITTER_USERNAME} ${url}`
+
+  return (
+    <div className='webmention-block'>
+      <h1 className='webmention-header'>
+        powered by <a href="https://webmention.io" target='_blank' rel='noreferrer'>WebMention.io</a>
+      </h1>
+      <div className='webmention-block-intro'>
+        You can{' '}
+        <a
+          target="_blank"
+          id='tweet-post-url'
+          href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweet)}`}
+          rel="noopener noreferrer"
+        >tweet this post</a>{' '}
+        or{' '}
+        <a
+          target='_blank'
+          id='tweet-discuss-url'
+          href={`https://www.twitter.com/search?q=${url}`}
+          rel='noopener noreferrer'
+        >discuss it on Twitter</a>
+        , the comments will show up here.
+      </div>
+      <div className='webmention-info'>
+        <WebmentionCount target={url} />
+        <WebmentionReplies target={url} />
+      </div>
+    </div>
+  )
+}
+
+export default WebMentionBlock

package/components/Webwhiz.js

@@ -0,0 +1,17 @@
+import BLOG from '@/blog.config'
+import ExternalScript from './ExternalScript'
+
+/**
+ * 一个开源ai组件
+ * @see https://github.com/webwhiz-ai/webwhiz
+ * @returns
+ */
+export default function WebWhiz() {
+  const props = {
+    id: '__webwhizSdk__',
+    src: 'https://www.unpkg.com/webwhiz@1.0.0/dist/sdk.js',
+    baseUrl: BLOG.WEB_WHIZ_BASE_URL,
+    chatbotId: BLOG.WEB_WHIZ_CHAT_BOT_ID
+  }
+  return <ExternalScript {...props}/>
+}

package/components/WordCount.js

@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'next-i18next';
+
+/**
+ * 字数统计
+ * @returns
+ */
+export default function WordCount() {
+  const { t } = useTranslation('common');
+
+  useEffect(() => {
+    countWords();
+  });
+
+  return (
+    <span id="wordCountWrapper" className="flex gap-3 font-light">
+      <span className="flex items-center whitespace-nowrap">
+        <i className="fas fa-file-word pl-1 pr-2" />
+        <span id="wordCount">0</span>
+      </span>
+      <span className="flex items-center whitespace-nowrap">
+        <i className="fas fa-clock mr-1" />
+        <span></span>
+        <span id="readTime">0</span>&nbsp;{t('minute')}
+      </span>
+    </span>
+  );
+}
+
+/**
+ * 更新字数统计和阅读时间
+ */
+function countWords() {
+  const articleText = deleteHtmlTag(
+    document.getElementById('notion-article')?.innerHTML,
+  );
+  const wordCount = fnGetCpmisWords(articleText);
+  // 阅读速度 300-500每分钟
+  document.getElementById('wordCount').innerHTML = wordCount;
+  document.getElementById('readTime').innerHTML =
+    Math.floor(wordCount / 400) + 1;
+  const wordCountWrapper = document.getElementById('wordCountWrapper');
+  wordCountWrapper.classList.remove('hidden');
+}
+
+// 去除html标签
+function deleteHtmlTag(str) {
+  if (!str) {
+    return '';
+  }
+  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim(); // 去掉所有的html标签和&nbsp;之类的特殊符合
+  return str;
+}
+
+// 用word方式计算正文字数
+function fnGetCpmisWords(str) {
+  if (!str) {
+    return 0;
+  }
+  let sLen = 0;
+  try {
+    // eslint-disable-next-line no-irregular-whitespace
+    str = str.replace(/(\r\n+|\s+|　+)/g, '龘');
+    // eslint-disable-next-line no-control-regex
+    str = str.replace(/[\x00-\xff]/g, 'm');
+    str = str.replace(/m+/g, '*');
+    str = str.replace(/龘+/g, '');
+    sLen = str.length;
+  } catch (e) {
+    console.log(e);
+  }
+  return sLen;
+}

package/hooks/useToggleClickOutSide.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+export default function useToggleClickOutSide(
+  targetRef: RefObject<HTMLElement> | RefObject<HTMLElement>[],
+  callback: (...arg: any) => any,
+) {
+  useEffect(() => {
+    let targetRefs: RefObject<HTMLElement>[] = [];
+    if (!Array.isArray(targetRef)) {
+      targetRefs = [targetRef];
+    } else {
+      targetRefs = targetRef;
+    }
+    const handleClickOutside = (event: MouseEvent) => {
+      let isOutside = true;
+      targetRefs.forEach((ref) => {
+        if (ref.current && ref.current.contains(event.target as Node)) {
+          isOutside = false;
+        }
+      });
+      if (isOutside) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [callback, targetRef]);
+}

package/hooks/useWindowSize.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+interface WindowSize {
+  width: number,
+  height: number
+}
+
+const useWindowSize = () => {
+  const [size, setSize] = useState<WindowSize>({
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  })
+
+  useEffect(() => {
+    const onResize = () => {
+      setSize({
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight
+      })
+    }
+    onResize()
+    window.addEventListener('resize', onResize)
+    return () => {
+      window.removeEventListener('resize', onResize)
+    }
+  }, [])
+  return size
+}
+
+export default useWindowSize

package/lib/algolia.js

@@ -0,0 +1,108 @@
+import BLOG from '@/blog.config';
+import { getPageContentText } from '@/pages/search/[keyword]';
+import algoliasearch from 'algoliasearch';
+
+/**
+ * 生成全文索引
+ * @param {*} allPages
+ */
+const generateAlgoliaSearch = async ({ allPages }) => {
+  allPages?.forEach((p) => {
+    // 判断这篇文章是否需要重新创建索引
+    if (p && !p.password) {
+      uploadDataToAlgolia(p);
+    }
+  });
+};
+
+/**
+ * 上传数据
+ * 根据上次修改文章日期和上次更新索引数据判断是否需要更新algolia索引
+ */
+const uploadDataToAlgolia = async (post) => {
+  // Connect and authenticate with your Algolia app
+  const client = algoliasearch(BLOG.ALGOLIA_APP_ID, BLOG.ALGOLIA_ADMIN_APP_KEY);
+
+  // Create a new index and add a record
+  const index = client.initIndex(BLOG.ALGOLIA_INDEX);
+
+  if (!post) {
+    return;
+  }
+
+  // 检查是否有索引
+  let existed;
+  let needUpdateIndex = false;
+  try {
+    existed = await index.getObject(post.id);
+  } catch (error) {
+    // 通常是不存在索引
+  }
+
+  if (!existed || !existed?.lastEditedDate || !existed?.lastIndexDate) {
+    needUpdateIndex = true;
+  } else {
+    const lastEditedDate = new Date(existed.lastEditedDate);
+    const lastIndexDate = new Date(existed.lastIndexDate);
+    if (lastEditedDate.getTime() > lastIndexDate.getTime()) {
+      needUpdateIndex = true;
+    }
+  }
+
+  // 如果需要更新搜索
+  if (needUpdateIndex) {
+    const record = {
+      objectID: post.id,
+      title: post.title,
+      category: post.category,
+      tags: post.tags,
+      pageCover: post.pageCover,
+      slug: post.slug,
+      summary: post.summary,
+      lastEditedDate: post.lastEditedDate, // 更新文章时间
+      lastIndexDate: new Date(), // 更新索引时间
+      content: truncate(getPageContentText(post, post.blockMap), 9000), // 索引9000个字节，因为api限制总请求内容上限1万个字节
+    };
+    // console.log('更新Algolia索引', record)
+    index
+      .saveObject(record)
+      .wait()
+      .then((r) => {
+        console.log('Algolia索引更新', r);
+      })
+      .catch((err) => {
+        console.log('Algolia异常', err);
+      });
+  }
+};
+
+/**
+ * 限制内容字节数
+ * @param {*} str
+ * @param {*} maxBytes
+ * @returns
+ */
+function truncate(str, maxBytes) {
+  let count = 0;
+  let result = '';
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    if (code <= 0x7f) {
+      count += 1;
+    } else if (code <= 0x7ff) {
+      count += 2;
+    } else if (code <= 0xffff) {
+      count += 3;
+    } else {
+      count += 4;
+    }
+    if (count <= maxBytes) {
+      result += str[i];
+    } else {
+      break;
+    }
+  }
+  return result;
+}
+
+export { uploadDataToAlgolia, generateAlgoliaSearch };

package/lib/busuanzi.js

@@ -0,0 +1,99 @@
+/* eslint-disable */
+let bszCaller, bszTag, scriptTag, ready
+
+let t; let e; let n; let a = !1
+let c = []
+
+// 修复Node同构代码的问题
+if (typeof document !== 'undefined') {
+  ready = function (t) {
+    return a || document.readyState === 'interactive' || document.readyState === 'complete'
+      ? t.call(document)
+      : c.push(function () {
+        return t.call(this)
+      }), this
+  }, e = function () {
+    for (let t = 0, e = c.length; t < e; t++) c[t].apply(document)
+    c = []
+  }, n = function () {
+    a || (a = !0, e.call(window),
+    document.removeEventListener ? document.removeEventListener('DOMContentLoaded', n, !1) : document.attachEvent && (document.detachEvent('onreadystatechange', n), window == window.top && (clearInterval(t), t = null)))
+  }, document.addEventListener
+    ? document.addEventListener('DOMContentLoaded', n, !1)
+    : document.attachEvent && (document.attachEvent('onreadystatechange', function () {
+      /loaded|complete/.test(document.readyState) && n()
+    }), window == window.top && (t = setInterval(function () {
+      try {
+        a || document.documentElement.doScroll('left')
+      } catch (t) {
+        return
+      }
+      n()
+    }, 5)))
+}
+
+bszCaller = {
+  fetch: function (t, e) {
+    const n = 'BusuanziCallback_' + Math.floor(1099511627776 * Math.random())
+    t = t.replace('=BusuanziCallback', '=' + n)
+    scriptTag = document.createElement('SCRIPT'), scriptTag.type = 'text/javascript', scriptTag.defer = !0, scriptTag.src = t, scriptTag.referrerPolicy = "no-referrer-when-downgrade", document.getElementsByTagName('HEAD')[0].appendChild(scriptTag)
+    window[n] = this.evalCall(e)
+  },
+  evalCall: function (e) {
+    return function (t) {
+      ready(function () {
+        try {
+          e(t), scriptTag && scriptTag.parentElement && scriptTag.parentElement.removeChild && scriptTag.parentElement.removeChild(scriptTag)
+        } catch (t) {
+         // console.log(t), bszTag.hides()
+        }
+      })
+    }
+  }
+}
+
+const fetch = () => {
+  bszTag && bszTag.hides()
+  bszCaller.fetch('//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback', function (t) {
+    // console.log('不蒜子',t)
+    bszTag.texts(t), bszTag.shows()
+  })
+}
+
+bszTag = {
+  bszs: ['site_pv', 'page_pv', 'site_uv'],
+  texts: function (n) {
+    this.bszs.map(function (t) {
+      const e = document.getElementsByClassName('busuanzi_value_' + t)
+      if(e){
+        for (var element of e) {
+          element.innerHTML = n[t]
+        }
+      }
+    })
+  },
+  hides: function () {
+    this.bszs.map(function (t) {
+      const e = document.getElementsByClassName('busuanzi_container_' + t)
+      if(e){
+        for (var element of e){
+          element.style.display = 'none'
+        }
+      }
+    })
+  },
+  shows: function () {
+    this.bszs.map(function (t) {
+      const e = document.getElementsByClassName('busuanzi_container_' + t)
+      if(e){
+        for(var element of e){
+          element.style.display = 'inline'
+        }
+      }
+    })
+  }
+}
+
+module.exports = {
+  fetch
+}

package/lib/cache/cacheManager.ts

@@ -0,0 +1,49 @@
+import memoryCache from './memoryMache';
+import fileCache from './localFileCache';
+import mongoCache from './mongoDbCache';
+import BLOG from '@/blog.config';
+
+import type { CacheManager } from './types';
+
+let cacheManager: CacheManager;
+if (process.env.MONGO_DB_URL && process.env.MONGO_DB_NAME) {
+  cacheManager = mongoCache;
+} else if (process.env.ENABLE_FILE_CACHE) {
+  cacheManager = fileCache;
+} else {
+  cacheManager = memoryCache;
+}
+
+/**
+ * 为减少频繁接口请求，notion数据将被缓存
+ * @param {*} key
+ * @returns
+ */
+export async function getDataFromCache<T>(
+  key: string,
+  force?: boolean,
+): Promise<T | null> {
+  if (BLOG.ENABLE_CACHE || force) {
+    const dataFromCache = await cacheManager.getCache(key);
+    if (JSON.stringify(dataFromCache) === '[]') {
+      return null;
+    }
+    return cacheManager.getCache(key);
+  } else {
+    return null;
+  }
+}
+
+export async function setDataToCache<T>(key: string, data: T) {
+  if (!data) {
+    return;
+  }
+  await cacheManager.setCache(key, data);
+}
+
+export async function delCacheData(key: string) {
+  if (!BLOG.ENABLE_CACHE) {
+    return;
+  }
+  await cacheManager.delCache(key);
+}

package/lib/cache/localFileCache.ts

@@ -0,0 +1,56 @@
+import fs from 'fs';
+import path from 'path';
+
+// 文件缓存持续10秒
+const cacheInvalidSeconds = 1000000000 * 1000;
+// 文件名
+const jsonFile = path.resolve('./data.json');
+
+export async function getCache(key: string) {
+  const exist = await fs.existsSync(jsonFile);
+  if (!exist) return null;
+  const data = await fs.readFileSync(jsonFile);
+  let json = null;
+  if (!data) return null;
+  try {
+    json = JSON.parse(data.toString());
+  } catch (error) {
+    console.error('读取JSON缓存文件失败', data);
+    return null;
+  }
+  // 缓存超过有效期就作废
+  const cacheValidTime = new Date(
+    parseInt(json[key + '_expire_time']) + cacheInvalidSeconds,
+  );
+  const currentTime = new Date();
+  if (!cacheValidTime || cacheValidTime < currentTime) {
+    return null;
+  }
+  return json[key];
+}
+
+/**
+ * 并发请求写文件异常； Vercel生产环境不支持写文件。
+ * @param key
+ * @param data
+ * @returns {Promise<null>}
+ */
+export function setCache(key: string, data: any) {
+  const exist = fs.existsSync(jsonFile);
+  const json = exist ? JSON.parse(fs.readFileSync(jsonFile).toString()) : {};
+  json[key] = data;
+  json[key + '_expire_time'] = new Date().getTime();
+  fs.writeFileSync(jsonFile, JSON.stringify(json));
+}
+
+export function delCache(key: string) {
+  const exist = fs.existsSync(jsonFile);
+  const json = exist ? JSON.parse(fs.readFileSync(jsonFile).toString()) : {};
+  delete json.key;
+  json[key + '_expire_time'] = new Date().getTime();
+  fs.writeFileSync(jsonFile, JSON.stringify(json));
+}
+
+const localFileCache = { getCache, setCache, delCache };
+
+export default localFileCache;

package/lib/cache/memoryMache.ts

@@ -0,0 +1,20 @@
+import cache from 'memory-cache';
+import BLOG from 'blog.config';
+
+const cacheTime = BLOG.isProd ? 10 * 60 : 120 * 60; // 120 minutes for dev,10 minutes for prod
+
+export async function getCache(key: string) {
+  return await cache.get(key);
+}
+
+export async function setCache(key: string, data: any) {
+  await cache.put(key, data, cacheTime * 1000);
+}
+
+export async function delCache(key: string) {
+  await cache.del(key);
+}
+
+const memoryCache = { getCache, setCache, delCache };
+
+export default memoryCache;