forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #30 from expoli/dev
Dev
- Loading branch information
Showing
21 changed files
with
321 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables | ||
| NEXT_PUBLIC_VERSION=3.13.2 | ||
| NEXT_PUBLIC_VERSION=3.13.3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
28e7ef8There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
notion-next – ./
notion-next-nine-topaz.vercel.app
www.expoli.tech
expoli.tech
notion-next-git-main-expoli.vercel.app
notion-next-expoli.vercel.app