Adding Error Page, Fixing Some Issue (transitive-bullshit#63)

* feat: add profile in post card component * feat: style post header * fix: updating profile_photo undefind check * feat: adding 404 page * feat: adding thumbnail in post detail page * fix: using default next image loader * fix: fixing user name issue
iSchoolTech · Jan 13, 2023 · fe63b24 · fe63b24
1 parent 392b546
commit fe63b24
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 69 deletions.
diff --git a/morethan-log.config.js b/morethan-log.config.js
@@ -12,8 +12,8 @@ const CONFIG = {
   },
   projects: [
     {
-      name: 'Untilled',
-      href: 'https://untilled.web.app'
+      name: `morethanmin's blog`,
+      href: 'https://morethanmin.com'
     }
   ],
   // blog setting (required)

diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   reactStrictMode: false,
   images: {
-    loader: 'custom',
+    domains: ['www.notion.so', 'lh5.googleusercontent.com'],
   },
 }
diff --git a/public/images/error.png b/public/images/error.png
diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -3,7 +3,6 @@ import CONFIG from 'morethan-log.config'
 import { formatDate } from '@/src/libs/utils'
 import Tag from './Tag'
 import { TPost } from '../types'
-import imageLoader from '@/src/libs/next/imageLoader'
 import Image from 'next/image'
 
 type Props = {
@@ -25,7 +24,6 @@ const PostCard: React.FC<Props> = ({ post }) => {
               <Image
                 src={post.thumbnail}
                 className="object-cover"
-                loader={imageLoader}
                 layout="fill"
                 alt={post.title}
               />
@@ -37,13 +35,31 @@ const PostCard: React.FC<Props> = ({ post }) => {
                 {post.title}
               </h2>
             </header>
-            <div className="mb-4">
-              <time className="flex-shrink-0 text-sm text-gray-600 dark:text-gray-400 ">
+            <div className="flex items-center gap-2 mb-4">
+              {/* {post.author && post.author[0] && (
+                <>
+                  <div className="flex items-center gap-1">
+                    <Image
+                      className="rounded-full"
+                      src={post.author[0].profile_photo}
+                      alt="profile_photo"
+                      loader={imageLoader}
+                      width={20}
+                      height={20}
+                    />
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
+                      {`${post.author[0].last_name}${post.author[0].first_name}`}
+                    </div>
+                  </div>
+                  <div className="self-stretch w-px my-1 bg-gray-300"></div>
+                </>
+              )} */}
+              <div className="text-sm text-gray-500 dark:text-gray-400 md:ml-0">
                 {formatDate(
                   post?.date?.start_date || post.createdTime,
                   CONFIG.lang
                 )}
-              </time>
+              </div>
             </div>
             <main className="mb-4">
               <p className="hidden md:block leading-8 text-gray-700 dark:text-gray-300">

diff --git a/src/containers/CustomError/index.tsx b/src/containers/CustomError/index.tsx
@@ -0,0 +1,25 @@
+import Image from 'next/image'
+import React from 'react'
+
+type Props = {
+  errorType?: 'NOT_FOUND' | 'UNKNOWN'
+}
+
+const CustomError: React.FC<Props> = ({ errorType }) => {
+  return (
+    <div
+      className={`m-auto max-w-4xl bg-white dark:bg-zinc-700 rounded-3xl py-12 px-6 shadow-md`}
+    >
+      <div className="py-20 flex flex-col items-center gap-10">
+        <div className="text-6xl flex  items-center">
+          <div>4</div>
+          <Image src="/images/error.png" width={60} height={60} alt="error" />
+          <div>4</div>
+        </div>
+        <div className="text-3xl text-gray-500">Post not found</div>
+      </div>
+    </div>
+  )
+}
+
+export default CustomError
diff --git a/src/containers/Feed/components/cards/MobileProfileCard.tsx b/src/containers/Feed/components/cards/MobileProfileCard.tsx
@@ -1,4 +1,3 @@
-import imageLoader from '@/src/libs/next/imageLoader'
 import CONFIG from 'morethan-log.config'
 import Image from 'next/image'
 import React from 'react'
@@ -15,7 +14,6 @@ const MobileProfileCard: React.FC<Props> = () => {
         <div className="flex items-center gap-2">
           <Image
             src={CONFIG.profile.image}
-            loader={imageLoader}
             width={90}
             height={90}
             alt="profile_image"

diff --git a/src/containers/Feed/components/cards/ProfileCard.tsx b/src/containers/Feed/components/cards/ProfileCard.tsx
@@ -1,8 +1,6 @@
-import imageLoader from '@/src/libs/next/imageLoader'
 import CONFIG from 'morethan-log.config'
 import Image from 'next/image'
 import React from 'react'
-import { AiOutlineMail } from 'react-icons/ai'
 
 type Props = {
   className?: string
@@ -14,12 +12,7 @@ const ProfileCard: React.FC<Props> = ({ className }) => {
       <div className="p-1 mb-3 dark:text-white">💻 Profile</div>
       <div className="w-full md:p-4 lg:p-4 rounded-2xl bg-white dark:bg-zinc-700 mb-9">
         <div className="relative w-full after:content-[''] after:block after:pb-[100%]">
-          <Image
-            src={CONFIG.profile.image}
-            layout="fill"
-            loader={imageLoader}
-            alt=""
-          />
+          <Image src={CONFIG.profile.image} layout="fill" alt="" />
         </div>
         <div className="bg-white p-2 flex flex-col items-center dark:bg-zinc-700 dark:text-white">
           <div className=" text-xl italic font-bold">{CONFIG.profile.name}</div>

diff --git a/src/containers/PostDetail/components/PostHeader.tsx b/src/containers/PostDetail/components/PostHeader.tsx
@@ -1,8 +1,7 @@
 import CONFIG from '@/morethan-log.config'
 import Tag from '@components/Tag'
-import imageLoader from '@/src/libs/next/imageLoader'
 import { TPost } from '@/src/types'
-import {formatDate} from '@/src/libs/utils'
+import { formatDate } from '@/src/libs/utils'
 import Image from 'next/image'
 import React from 'react'
 
@@ -17,22 +16,22 @@ const PostHeader: React.FC<Props> = ({ data }) => {
         {data.title}
       </h1>
       {data.type[0] !== 'Page' && (
-        <nav className="mt-7 text-gray-500 dark:text-gray-400">
-          <div className="flex items-center gap-4 mb-3">
-            {data.author && data.author[0] && (
-              <div className="flex items-center gap-2">
-                <Image
-                  className="rounded-full"
-                  src={data.author[0].profile_photo}
-                  alt="profile_photo"
-                  loader={imageLoader}
-                  width={24}
-                  height={24}
-                />
-                <div className="">
-                  {`${data.author[0].last_name}${data.author[0].first_name}`}
+        <nav className="mt-6 text-gray-500 dark:text-gray-400">
+          <div className="flex items-center gap-3 mb-3">
+            {data.author && data.author[0] && data.author[0].name && (
+              <>
+                <div className="flex items-center gap-2">
+                  <Image
+                    className="rounded-full"
+                    src={data.author[0].profile_photo}
+                    alt="profile_photo"
+                    width={24}
+                    height={24}
+                  />
+                  <div className="">{data.author[0].name}</div>
                 </div>
-              </div>
+                <div className="self-stretch w-px my-1 bg-gray-300"></div>
+              </>
             )}
             <div className=" mr-2 md:ml-0">
               {formatDate(
@@ -50,6 +49,16 @@ const PostHeader: React.FC<Props> = ({ data }) => {
               </div>
             )}
           </div>
+          {data.thumbnail && (
+            <div className="relative w-full pb-[66%] lg:pb-[50%] bg-gray-200 dark:bg-zinc-700 mb-7 rounded-3xl overflow-hidden">
+              <Image
+                src={data.thumbnail}
+                className="object-cover"
+                layout="fill"
+                alt={data.title}
+              />
+            </div>
+          )}
         </nav>
       )}
     </>

diff --git a/src/libs/next/imageLoader.ts b/src/libs/next/imageLoader.ts
diff --git a/src/libs/notion/getPageProperties.ts b/src/libs/notion/getPageProperties.ts
@@ -52,6 +52,7 @@ async function getPageProperties(
         }
         case 'person': {
           const rawUsers = val.flat()
+
           const users = []
           for (let i = 0; i < rawUsers.length; i++) {
             if (rawUsers[i][0][1]) {
@@ -61,9 +62,11 @@ async function getPageProperties(
                 res?.recordMapWithRoles?.notion_user?.[userId[1]]?.value
               const user = {
                 id: resValue?.id,
-                first_name: resValue?.given_name,
-                last_name: resValue?.family_name,
-                profile_photo: resValue?.profile_photo,
+                name:
+                  resValue?.name ||
+                  `${resValue?.family_name}${resValue?.given_name}` ||
+                  undefined,
+                profile_photo: resValue?.profile_photo || null,
               }
               users.push(user)
             }

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,32 @@
+import Layout from '@components/Layout'
+import Feed from '@containers/Feed'
+import CONFIG from '../../morethan-log.config'
+import { NextPageWithLayout } from './_app'
+import { TPosts, TTags } from '../types'
+import CustomError from '../containers/CustomError'
+
+type Props = {
+  tags: TTags
+  posts: TPosts
+}
+
+const NotFoundPage: NextPageWithLayout<Props> = () => {
+  return <CustomError />
+}
+
+NotFoundPage.getLayout = function getlayout(page) {
+  return (
+    <Layout
+      metaConfig={{
+        title: CONFIG.blog.title,
+        description: CONFIG.blog.description,
+        type: 'website',
+        url: CONFIG.link,
+      }}
+    >
+      {page}
+    </Layout>
+  )
+}
+
+export default NotFoundPage
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
@@ -4,6 +4,7 @@ import Layout from '@components/Layout'
 import CONFIG from '../../morethan-log.config'
 import { NextPageWithLayout } from './_app'
 import { TPost } from '../types'
+import CustomError from '../containers/CustomError'
 
 export async function getStaticPaths() {
   const posts = await getAllPosts({ includePages: true })
@@ -17,17 +18,17 @@ export async function getStaticProps({ params: { slug } }: any) {
   try {
     const posts = await getAllPosts({ includePages: true })
     const post = posts.find((t) => t.slug === slug)
-    if (!post) throw new Error('Post not found')
-    const blockMap = await getPostBlocks(post.id)
+    const blockMap = await getPostBlocks(post?.id!)
 
     return {
       props: { post, blockMap },
       revalidate: 1,
     }
   } catch (error) {
-    console.log('error')
-
-    return
+    return {
+      props: {},
+      revalidate: 1,
+    }
   }
 }
 
@@ -37,34 +38,41 @@ type Props = {
 }
 
 const PostDetailPage: NextPageWithLayout<Props> = ({ post, blockMap }) => {
-  if (!post) return null
+  if (!post) return <CustomError />
   return <PostDetail blockMap={blockMap} data={post} />
 }
 
 PostDetailPage.getLayout = function getlayout(page) {
   const getImage = () => {
-    if (page.props.post.thumbnail) return page.props.post.thumbnail
+    if (page.props?.post.thumbnail) return page.props?.post.thumbnail
     if (CONFIG.ogImageGenerateURL)
       return `${CONFIG.ogImageGenerateURL}/${encodeURIComponent(
-        page.props.post.title
+        page.props?.post.title
       )}.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fsummer-heart-0930.chufeiyun1688.workers.dev%3A443%2Fhttps%2Fmorethan-log.vercel.app%2Flogo-for-dark-bg.svg`
   }
 
-  if (!page.props.post) return null
+  const getMetaConfig = () => {
+    if (!page.props.post) {
+      return {
+        title: CONFIG.blog.title,
+        description: CONFIG.blog.description,
+        type: 'website',
+        url: CONFIG.link,
+      }
+    }
+    return {
+      title: page.props.post.title || CONFIG.blog.title,
+      date: new Date(
+        page.props.post.date?.start_date || page.props.post.createdTime || ''
+      ).toISOString(),
+      image: getImage(),
+      description: page.props.post.summary,
+      type: page.props.post.type[0],
+      url: `${CONFIG.link}/${page.props.post.slug}`,
+    }
+  }
   return (
-    <Layout
-      metaConfig={{
-        title: page.props.post.title,
-        date: new Date(
-          page.props.post.date?.start_date || page.props.post.createdTime
-        ).toISOString(),
-        image: getImage(),
-        description: page.props.post.summary,
-        type: page.props.post.type[0],
-        url: `${CONFIG.link}/${page.props.post.slug}`,
-      }}
-      fullWidth={page.props.post.fullWidth}
-    >
+    <Layout metaConfig={getMetaConfig()} fullWidth={page.props.post?.fullWidth}>
       {page}
     </Layout>
   )

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -7,8 +7,7 @@ export type TPost = {
   summary?: string
   author?: {
     id: string
-    first_name: string
-    last_name: string
+    name: string
     profile_photo: string
   }[]
   title: string