Merge pull request #202 from tangly1024/preview

Preview

components/NotionPage.js

@@ -75,8 +75,14 @@ const NotionPage = ({ post }) => {
   </div>
 }
 
+/**
+ * 将id映射成博文内部链接。
+ * @param {*} id
+ * @returns
+ */
 const mapPageUrl = id => {
-  return 'https://www.notion.so/' + id.replace(/-/g, '')
+  // return 'https://www.notion.so/' + id.replace(/-/g, '')
+  return '/article/' + id.replace(/-/g, '')
 }
 
 function getMediumZoomMargin() {

lib/notion/getAllCategories.js

@@ -1,9 +1,11 @@
+import { isIterable } from '../utils'
+
 /**
  * 获取所有文章的分类
  * @param allPosts
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllCategories ({ allPosts, categoryOptions, sliceCount = 0 }) {
+export async function getAllCategories({ allPosts, categoryOptions, sliceCount = 0 }) {
   if (!allPosts || !categoryOptions) {
     return []
   }
@@ -19,12 +21,14 @@ export async function getAllCategories ({ allPosts, categoryOptions, sliceCount
     }
   })
   const list = []
-  categoryOptions.forEach(c => {
-    const count = categoryObj[c.value]
-    if (count) {
-      list.push({ id: c.id, name: c.value, color: c.color, count })
+  if (isIterable(categoryOptions)) {
+    for (const c of categoryOptions) {
+      const count = categoryObj[c.value]
+      if (count) {
+        list.push({ id: c.id, name: c.value, color: c.color, count })
+      }
     }
-  })
+  }
 
   // 按照数量排序
   // list.sort((a, b) => b.count - a.count)

lib/notion/getAllTags.js

@@ -1,3 +1,4 @@
+import { isIterable } from '../utils'
 
 /**
  * 获取所有文章的标签
@@ -6,7 +7,7 @@
  * @param tagOptions tags的下拉选项
  * @returns {Promise<{}|*[]>}
  */
-export async function getAllTags ({ allPosts, sliceCount = 0, tagOptions }) {
+export async function getAllTags({ allPosts, sliceCount = 0, tagOptions }) {
   if (!allPosts || !tagOptions) {
     return []
   }
@@ -22,12 +23,14 @@ export async function getAllTags ({ allPosts, sliceCount = 0, tagOptions }) {
     }
   })
   const list = []
-  tagOptions.forEach(c => {
-    const count = tagObj[c.value]
-    if (count) {
-      list.push({ id: c.id, name: c.value, color: c.color, count })
-    }
-  })
+  if (isIterable(tagOptions)) {
+    tagOptions.forEach(c => {
+      const count = tagObj[c.value]
+      if (count) {
+        list.push({ id: c.id, name: c.value, color: c.color, count })
+      }
+    })
+  }
 
   // 按照数量排序
   // list.sort((a, b) => b.count - a.count)

lib/utils.js

@@ -64,10 +64,19 @@ export function mergeDeep(target, ...sources) {
 }
 
 /**
- * 对象检查
+ * 是否对象
  * @param item
  * @returns {boolean}
  */
 export function isObject(item) {
   return (item && typeof item === 'object' && !Array.isArray(item))
 }
+
+/**
+ * 是否可迭代
+ * @param {*} obj
+ * @returns
+ */
+export function isIterable(obj) {
+  return obj != null && typeof obj[Symbol.iterator] === 'function'
+}

pages/article/[slug].js

@@ -5,6 +5,7 @@ import { useGlobal } from '@/lib/global'
 import * as ThemeMap from '@/themes'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { idToUuid } from 'notion-utils'
 
 /**
  * 根据notion的slug访问页面
@@ -30,7 +31,7 @@ const Slug = props => {
         }
       }, 3000)
     })
-    const meta = { title: `${props?.siteInfo?.title} | loading` }
+    const meta = { title: `${props?.siteInfo?.title || BLOG.TITLE} | loading` }
     return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }
 
@@ -92,7 +93,9 @@ export async function getStaticProps({ params: { slug } }) {
   const from = `slug-props-${slug}`
   const props = await getGlobalNotionData({ from, pageType: ['Post'] })
   const allPosts = props.allPosts
-  props.post = props.allPosts.find(p => p.slug === slug)
+  props.post = props.allPosts.find((p) => {
+    return p.slug === slug || p.id === idToUuid(slug)
+  })
   if (!props.post) {
     return { props, revalidate: 1 }
   }

styles/notion.css

@@ -1601,7 +1601,7 @@ svg.notion-page-icon {
 }
 
 svg.notion-page-icon {
-  @apply hidden;
+  /* @apply hidden;*/
 }
 
 svg + .notion-page-title-text {

themes/fukasawa/components/BlogListPage.js

@@ -20,6 +20,8 @@ const BlogListPage = ({ page = 1, posts = [], postCount }) => {
   function updateCol() {
     if (window.outerWidth > 1200) {
       changeCol(3)
+    } else if (window.outerWidth > 900) {
+      changeCol(2)
     } else {
       changeCol(1)
     }

themes/hexo/LayoutBase.js

@@ -59,12 +59,12 @@ const LayoutBase = props => {
 
       {headerSlot}
 
-      <main id="wrapper" className="w-full py-8 min-h-screen">
+      <main id="wrapper" className="w-full py-8 md:px-8 xl:px-24 min-h-screen">
         <div
           id="container-inner"
           className="pt-14 w-full mx-auto lg:flex justify-center lg:space-x-4"
         >
-          <div className="flex-grow w-full lg:max-w-4xl">
+          <div className="flex-grow w-full">
             {onLoading ? <LoadingCover /> : children}
           </div>
 

themes/hexo/LayoutSlug.js

@@ -54,7 +54,7 @@ export const LayoutSlug = props => {
       <div className="w-full lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray dark:border-black">
         {lock && <ArticleLock password={post.password} validPassword={validPassword} />}
 
-        {!lock && <div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
+        {!lock && <div id="container" className="overflow-x-auto flex-grow mx-auto md:w-full md:px-5 ">
 
           <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
             {/* Notion文章主体 */}

themes/hexo/components/BlogPostCard.js

@@ -85,7 +85,7 @@ const BlogPostCard = ({ post, showSummary }) => {
               <img
                 src={post?.page_cover}
                 alt={post.title}
-                className="hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
+                className="max-h-52 lg:max-h-72 w-full hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
               />
               {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
             </div>