fix: change component Badge class to className

.env.local

@@ -5,6 +5,20 @@ NEXT_PUBLIC_VERSION=4.4.3
 # 可在此添加环境变量，去掉最左边的（# ）注释即可
 # Notion页面ID,必须
 # NOTION_PAGE_ID=097e5f674880459d8e1b4407758dc4fb
+# for playwordleunlimited.com/article/
+NOTION_PAGE_ID=62a9ffa47dc44ad7868d1f2d1eebafcf
+NEXT_PUBLIC_THEME=article
+NEXT_PUBLIC_LINK=https://playwordleunlimited.com
+NEXT_PUBLIC_TITLE=PLAY WORDLE UNLIMITED
+NEXT_PUBLIC_AUTHOR=PLAY WORDLE UNLIMITED
+NEXT_PUBLIC_FONT_STYLE=font-serif font-light
+NEXT_PUBLIC_LANG=en-US
+NEXT_PUBLIC_CUSTOM_MENU=true
+NEXT_PUBLIC_POST_SHARE_BAR=false
+NEXT_PUBLIC_POST_LIST_STYLE=page
+NEXT_PUBLIC_POST_SORT_BY=date
+NEXT_PUBLIC_WIDGET_PET=false
+NEXT_PUBLIC_ANALYTICS_BUSUANZI_ENABLE=false
 
 # 非必须
 # NEXT_PUBLIC_PSEUDO_STATIC=

.gitignore

@@ -25,7 +25,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-# .env.local # 版本号放在此环境变量中
+# 版本号放在此环境变量中
+.env.local
 .env.development.local
 .env.test.local
 .env.production.local

components/Badge.js

@@ -4,8 +4,8 @@
 export default function Badge() {
   return <>
     {/* 红点 */}
-    <span class="absolute right-1 top-1 flex h-2 w-2">
-        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
-        <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+    <span className="absolute right-1 top-1 flex h-2 w-2">
+        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
     </span></>
 }

components/GlobalHead.js

@@ -21,7 +21,7 @@ const GlobalHead = props => {
   const title = meta?.title || siteConfig('TITLE')
   const description = meta?.description || `${siteInfo?.description}`
   const type = meta?.type || 'website'
-  const keywords = meta?.tags || siteConfig('KEYWORDS')
+  // const keywords = meta?.tags || siteConfig('KEYWORDS')
   const lang = siteConfig('LANG').replace('-', '_') // Facebook OpenGraph 要 zh_CN 這樣的格式才抓得到語言
   const category = meta?.category || siteConfig('KEYWORDS') // section 主要是像是 category 這樣的分類，Facebook 用這個來抓連結的分類
 
@@ -38,7 +38,7 @@ const GlobalHead = props => {
       {siteConfig('SEO_BAIDU_SITE_VERIFICATION') && (
         <meta name='baidu-site-verification' content={siteConfig('SEO_BAIDU_SITE_VERIFICATION')} />
       )}
-      <meta name='keywords' content={keywords} />
+      {/* <meta name='keywords' content={keywords} /> */}
       <meta name='description' content={description} />
       <meta property='og:locale' content={lang} />
       <meta property='og:title' content={title} />

next.config.js

@@ -15,7 +15,8 @@ const themes = scanSubdirectories(path.resolve(__dirname, 'themes'))
 const locales = (function () {
   // 根据BLOG_NOTION_PAGE_ID 检查支持多少种语言数据.
   // 支持如下格式配置多个语言的页面id xxx,zh:xxx,en:xxx
-  const langs = ['zh', 'en']
+//   const langs = ['zh', 'en']
+  const langs = ['en']
   if (BLOG.NOTION_PAGE_ID.indexOf(',') > 0) {
     const siteIds = BLOG.NOTION_PAGE_ID.split(',')
     for (let index = 0; index < siteIds.length; index++) {
@@ -81,13 +82,20 @@ const nextConfig = {
   },
   // 多语言， 在export时禁用
   i18n:
+    /*
     process.env.npm_lifecycle_event === 'export'
       ? undefined
       : {
           defaultLocale: BLOG.LANG.slice(0, 2),
           // 支持的所有多语言,按需填写即可
           locales
         },
+    */
+    {
+      defaultLocale: BLOG.LANG.slice(0, 2),
+      // 支持的所有多语言,按需填写即可
+      locales
+    },
   // 重写url
   async rewrites() {
     // 处理多语言重定向

themes/article/components/Announcement.js

@@ -0,0 +1,21 @@
+// import { useGlobal } from '@/lib/global'
+import dynamic from 'next/dynamic'
+
+const NotionPage = dynamic(() => import('@/components/NotionPage'))
+
+const Announcement = ({ notice, className }) => {
+//   const { locale } = useGlobal()
+  if (notice?.blockMap) {
+    return <div className={className}>
+        <section id='announcement-wrapper' className="dark:text-gray-300 rounded-xl px-2 py-4">
+            {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
+            {notice && (<div id="announcement-content">
+            <NotionPage post={notice} />
+        </div>)}
+        </section>
+    </div>
+  } else {
+    return <></>
+  }
+}
+export default Announcement

themes/article/components/ArticleAround.js

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+
+/**
+ * 上一篇，下一篇文章
+ * @param {prev,next} param0
+ * @returns
+ */
+export default function ArticleAround ({ prev, next }) {
+  if (!prev || !next) {
+    return <></>
+  }
+  return (
+    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+      <Link
+        href={`/${prev.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
+
+        <i className='mr-1 fas fa-angle-double-left' />{prev.title}
+
+      </Link>
+      <Link
+        href={`/${next.slug}`}
+        passHref
+        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
+        {next.title}
+        <i className='ml-1 my-1 fas fa-angle-double-right' />
+
+      </Link>
+    </section>
+  )
+}

themes/article/components/ArticleInfo.js

@@ -0,0 +1,9 @@
+export default function ArticleInfo({ post }) {
+  if (!post) {
+    return null
+  }
+  return <div className="pt-10 pb-6 text-gray-400 text-sm border-b">
+        <i className="fa-regular fa-clock mr-1" />
+        Last update:  { post.date?.start_date}
+    </div>
+}

themes/article/components/ArticleLock.js

@@ -0,0 +1,53 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect, useRef } from 'react'
+
+/**
+ * 加密文章校验组件
+ * @param {password, validPassword} props
+ * @param password 正确的密码
+ * @param validPassword(bool) 回调函数，校验正确回调入参为true
+ * @returns
+ */
+export const ArticleLock = props => {
+  const { validPassword } = props
+  const { locale } = useGlobal()
+
+  const submitPassword = () => {
+    const p = document.getElementById('password')
+    if (!validPassword(p?.value)) {
+      const tips = document.getElementById('tips')
+      if (tips) {
+        tips.innerHTML = ''
+        tips.innerHTML = `<div class='text-red-500 animate__shakeX animate__animated'>${locale.COMMON.PASSWORD_ERROR}</div>`
+      }
+    }
+  }
+
+  const passwordInputRef = useRef(null)
+  useEffect(() => {
+    // 选中密码输入框并将其聚焦
+    passwordInputRef.current.focus()
+  }, [])
+
+  return <div id='container' className='w-full flex justify-center items-center h-96 '>
+    <div className='text-center space-y-3'>
+      <div className='font-bold'>{locale.COMMON.ARTICLE_LOCK_TIPS}</div>
+      <div className='flex mx-4'>
+        <input id="password" type='password'
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitPassword()
+              }
+            }}
+            ref={passwordInputRef} // 绑定ref到passwordInputRef变量
+            className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg dark:text-gray-300 font-light leading-10 text-black bg-gray-100 dark:bg-gray-500'>
+        </input>
+        <div onClick={submitPassword} className="px-3 whitespace-nowrap cursor-pointer items-center justify-center py-2 bg-green-500 hover:bg-green-400 text-white rounded-r duration-300" >
+          <i className={'duration-200 cursor-pointer fas fa-key'} >&nbsp;{locale.COMMON.SUBMIT}</i>
+        </div>
+      </div>
+      <div id='tips'>
+      </div>
+    </div>
+  </div>
+}

themes/article/components/BlogArchiveItem.js

@@ -0,0 +1,39 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+
+/**
+ * 归档分组
+ * @param {*} param0
+ * @returns
+ */
+export default function BlogArchiveItem({ archiveTitle, archivePosts }) {
+  return (
+        <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+                {archiveTitle}
+            </div>
+            <ul>
+                {archivePosts[archiveTitle]?.map(post => {
+                  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+
+                  return <li key={post.id}
+                        className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                    >
+                        <div id={post?.publishDay}>
+                            <span className="text-gray-400">
+                                {post.date?.start_date}
+                            </span>{' '}
+                            &nbsp;
+
+                            <Link passHref href={url}
+                                className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                                {post.title}
+                            </Link>
+                        </div>
+                    </li>
+                })}
+            </ul>
+        </div>
+  )
+}

themes/article/components/BlogPostCard.js

@@ -0,0 +1,26 @@
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
+import NotionIcon from '@/components/NotionIcon'
+import Badge from '@/components/Badge'
+import CONFIG from '../config'
+
+const BlogPostCard = ({ post, className }) => {
+  const router = useRouter()
+  const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
+  const url = checkContainHttp(post.slug) ? sliceUrlFromHttp(post.slug) : `${siteConfig('SUB_PATH', '')}/${post.slug}`
+  return (
+        <Link href={url} passHref>
+            <div key={post.id} className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600  ${currentSelected ? 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600' : ''}`}>
+                <div className="w-full select-none">
+                    <NotionIcon icon={post?.pageIcon}/> {post.title}
+                </div>
+                {/* 最新文章加个红点 */}
+                {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && <Badge/>}
+            </div>
+        </Link>
+  )
+}
+
+export default BlogPostCard

themes/article/components/BlogPostListPage.js

@@ -0,0 +1,34 @@
+import BlogPostCard from './BlogPostCard'
+import { siteConfig } from '@/lib/config'
+import NavPostListEmpty from './NavPostListEmpty'
+import PaginationSimple from './PaginationSimple'
+
+/**
+ * 文章列表分页表格
+ * @param page 当前页
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
+  const totalPage = Math.ceil(postCount / parseInt(siteConfig('POSTS_PER_PAGE')))
+
+  if (!posts || posts.length === 0) {
+    return <NavPostListEmpty />
+  }
+
+  return (
+      <div className='w-full justify-center'>
+        <div id='posts-wrapper'>
+        {/* 文章列表 */}
+        {posts?.map(post => (
+          <BlogPostCard key={post.id} post={post} />
+        ))}
+        </div>
+        <PaginationSimple page={page} totalPage={totalPage} />
+      </div>
+  )
+}
+
+export default BlogPostListPage

themes/article/components/BottomMenuBar.js

@@ -0,0 +1,23 @@
+import { useGitBookGlobal } from '@/themes/article'
+import JumpToTopButton from './JumpToTopButton'
+
+export default function BottomMenuBar({ post, className }) {
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+        <div className={'sticky z-10 bottom-0 w-full h-12 bg-white dark:bg-hexo-black-gray ' + className}>
+            <div className='flex justify-between h-full shadow-card'>
+                <div onClick={togglePageNavVisible} className='flex w-full items-center justify-center cursor-pointer'>
+                <i className="fa-solid fa-book"></i>
+                </div>
+                <div className='flex w-full items-center justify-center cursor-pointer'>
+                    <JumpToTopButton />
+                </div>
+            </div>
+        </div>
+  )
+}

themes/article/components/Card.js

@@ -0,0 +1,9 @@
+const Card = ({ children, headerSlot, className }) => {
+  return <div className={className}>
+    <>{headerSlot}</>
+    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+        {children}
+    </section>
+  </div>
+}
+export default Card