🔍 Improve SEO and organize code

craigary · Mar 16, 2021 · 13c007a · 13c007a
1 parent faf0422
commit 13c007a
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 73 deletions.
diff --git a/components/BlogPost.js b/components/BlogPost.js
@@ -11,10 +11,14 @@ const BlogPost = ({ post }) => {
             <a>{post.title}</a>
           </h2>
         </Link>
-        <time className="flex-shrink-0 text-gray-600">{formatDate(post.date, BLOG.lang)}</time>
+        <time className="flex-shrink-0 text-gray-600">
+          {formatDate(post.date, BLOG.lang)}
+        </time>
       </header>
       <main>
-        <p className="hidden md:block text-gray-700 leading-8">{post.summary}</p>
+        <p className="hidden md:block text-gray-700 leading-8">
+          {post.summary}
+        </p>
       </main>
     </article>
   )

diff --git a/components/Container.js b/components/Container.js
@@ -16,14 +16,14 @@ const Container = ({ children, layout, ...customMeta }) => {
         {/* Add more Meta Info */}
         <title>{meta.title}</title>
         <meta name="robots" content="follow, index" />
-        <meta content={meta.summary} name="description" />
+        <meta name="description" content={meta.description} />
       </Head>
       <div className="wrapper">
-      <Header navBarTitle={layout === 'blog' ? meta.title : null} />
-      <main className="m-auto max-w-3xl px-4 font-sans flex-grow w-full">
-      {children}
-      </main>
-      <Footer />
+        <Header navBarTitle={layout === 'blog' ? meta.title : null} />
+        <main className="m-auto max-w-3xl px-4 font-sans flex-grow w-full">
+          {children}
+        </main>
+        <Footer />
       </div>
     </div>
   )

diff --git a/components/Footer.js b/components/Footer.js
@@ -7,7 +7,10 @@ const Footer = () => {
       <hr />
       <div className="my-4 text-sm leading-6 font-medium">
         <p>Built with ♥ and ⚛ Next.js. Proudly deployed on ▲Vercel.</p>
-        <p>©{BLOG.author} {(BLOG.since === y || !BLOG.since) ? y : `${BLOG.since} - ${y}`} </p>
+        <p>
+          ©{BLOG.author}{' '}
+          {BLOG.since === y || !BLOG.since ? y : `${BLOG.since} - ${y}`}{' '}
+        </p>
       </div>
     </div>
   )

diff --git a/components/Pagination.js b/components/Pagination.js
@@ -5,7 +5,13 @@ const Pagination = ({ totalPages, page }) => {
   const currentPage = +page
   return (
     <div className="flex justify-between font-medium">
-      <Link href={ currentPage - 1 === 1 ? `${BLOG.path || '/'}` : `/page/${currentPage - 1}`}>
+      <Link
+        href={
+          currentPage - 1 === 1
+            ? `${BLOG.path || '/'}`
+            : `/page/${currentPage - 1}`
+        }
+      >
         <p className={currentPage === 1 ? 'invisible' : 'block'}>
           <a rel="prev">← Prev</a>
         </p>

diff --git a/components/Tags.js b/components/Tags.js
@@ -11,7 +11,9 @@ const Tags = ({ tags, handleTagClick, selectedTag }) => {
         <li
           key={key}
           onClick={() => handleTagClick(key)}
-          className={`mr-2 px-2 py-1 my-3 font-medium cursor-pointer rounded-full border-2 bg-opacity-0 border-blue-200 text-black bg-blue-400 whitespace-nowrap ${key === selectedTag ? 'bg-opacity-30' : ''}`}
+          className={`mr-2 px-2 py-1 my-3 font-medium cursor-pointer rounded-full border-2 bg-opacity-0 border-blue-200 text-black bg-blue-400 whitespace-nowrap ${
+            key === selectedTag ? 'bg-opacity-30' : ''
+          }`}
         >
           {`${key} (${tags[key]})`}
         </li>

diff --git a/layouts/blog.js b/layouts/blog.js
@@ -20,13 +20,13 @@ const BlogLayout = ({ children, blockMap, frontMatter }) => {
         <nav className="flex mt-4 mb-2 items-center text-gray-600 font-medium">
           <div className="flex">
             <a href={BLOG.socialLink || '#'} className="flex">
-                <Image
-                  alt={BLOG.author}
-                  width={24}
-                  height={24}
-                  src="/avatar.svg"
-                  className="rounded-full"
-                />
+              <Image
+                alt={BLOG.author}
+                width={24}
+                height={24}
+                src="/avatar.svg"
+                className="rounded-full"
+              />
               <p className="hidden md:ml-2 md:block">{BLOG.author}</p>
             </a>
             <span className="hidden md:inline">&nbsp;/&nbsp;</span>
@@ -35,22 +35,33 @@ const BlogLayout = ({ children, blockMap, frontMatter }) => {
             {formatDate(frontMatter.date, BLOG.lang)}
           </div>
           {frontMatter.tags && (
-          <div className="tag flex ml-2">
-            {frontMatter.tags.map(tag => <p key={tag} className="mr-1 cursor-pointer" onClick={() => router.push(`/tag/${encodeURIComponent(tag)}`)}>#{tag}</p>)}
-        </div>
+            <div className="tag flex ml-2">
+              {frontMatter.tags.map(tag => (
+                <p
+                  key={tag}
+                  className="mr-1 cursor-pointer"
+                  onClick={() => router.push(`/tag/${encodeURIComponent(tag)}`)}
+                >
+                  #{tag}
+                </p>
+              ))}
+            </div>
           )}
         </nav>
         {children}
-        {blockMap && <NotionRenderer blockMap={blockMap} /> }
+        {blockMap && <NotionRenderer blockMap={blockMap} />}
       </article>
       <div className="flex justify-between font-medium">
-          <p onClick={() => router.back()} className="mt-2">
-            ← Back
-          </p>
-          <p onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="mt-2">
-            ↑ Top
-          </p>
-        </div>
+        <p onClick={() => router.back()} className="mt-2">
+          ← Back
+        </p>
+        <p
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+          className="mt-2"
+        >
+          ↑ Top
+        </p>
+      </div>
     </Container>
   )
 }

diff --git a/lib/formatDate.js b/lib/formatDate.js
@@ -2,5 +2,7 @@ export default function formatDate (date, local) {
   const d = new Date(date)
   const options = { year: 'numeric', month: 'long', day: 'numeric' }
   const res = d.toLocaleDateString(local, options)
-  return local.slice(0, 2).toLowerCase() === 'zh' ? res.replace('年', ' 年 ').replace('月', ' 月 ').replace('日', ' 日') : res
+  return local.slice(0, 2).toLowerCase() === 'zh'
+    ? res.replace('年', ' 年 ').replace('月', ' 月 ').replace('日', ' 日')
+    : res
 }
diff --git a/lib/notion.js b/lib/notion.js
@@ -11,17 +11,20 @@ export async function getAllPosts () {
   const articles = root.result.blockIds.map(id => root.recordMap.block[id])
   const properties = Object.values(root.recordMap.collection)[0].value.schema
   const metaData = articles.map(art => {
-    const propertiesInArticle = Object.entries(properties).reduce((properties, [id, { name }]) => {
-      if (id !== 'title' && name !== 'date') {
-        Array.isArray(art.value.properties[id])
-          ? properties[name] = art.value.properties[id][0][0]
-          : properties[name] = art.value.properties[id]
-      }
-      if (name === 'date') {
-        properties[name] = art.value.properties[id][0][1][0][1].start_date
-      }
-      return properties
-    }, {})
+    const propertiesInArticle = Object.entries(properties).reduce(
+      (properties, [id, { name }]) => {
+        if (id !== 'title' && name !== 'date') {
+          Array.isArray(art.value.properties[id])
+            ? (properties[name] = art.value.properties[id][0][0])
+            : (properties[name] = art.value.properties[id])
+        }
+        if (name === 'date') {
+          properties[name] = art.value.properties[id][0][1][0][1].start_date
+        }
+        return properties
+      },
+      {}
+    )
 
     const artMeta = {
       id: art.value.id,

diff --git a/pages/[slug].js b/pages/[slug].js
@@ -4,23 +4,26 @@ import BLOG from '@/blog.config'
 
 const BlogPost = ({ post, blockMap }) => {
   if (!post) return null
-  return <BlogLayout blockMap={blockMap} frontMatter={post}>
-    </BlogLayout>
+  return <BlogLayout blockMap={blockMap} frontMatter={post}></BlogLayout>
 }
 
-export async function getStaticPaths () {
+export async function getStaticPaths() {
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post')
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
   return {
-    paths: posts.map((row) => `${BLOG.path}/${row.slug}`),
+    paths: posts.map(row => `${BLOG.path}/${row.slug}`),
     fallback: true
   }
 }
 
-export async function getStaticProps ({ params: { slug } }) {
+export async function getStaticProps({ params: { slug } }) {
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post')
-  const post = posts.find((t) => t.slug === slug)
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
+  const post = posts.find(t => t.slug === slug)
   const blockMap = await getPostBlocks(post.id)
   return {
     props: { post, blockMap },

diff --git a/pages/feed.js b/pages/feed.js
@@ -1,9 +1,11 @@
 import { getAllPosts } from '@/lib/notion'
 import { generateRss } from '@/lib/rss'
-export async function getServerSideProps ({ res }) {
+export async function getServerSideProps({ res }) {
   res.setHeader('Content-Type', 'text/xml')
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post').slice(0, 10)
+  posts = posts
+    .filter(post => post.status === 'Published' && post.type === 'Post')
+    .slice(0, 10)
   const xmlFeed = generateRss(posts)
   res.write(xmlFeed)
   res.end()

diff --git a/pages/index.js b/pages/index.js
@@ -23,7 +23,7 @@ export async function getStaticProps () {
 
 const blog = ({ postsToShow, page, totalPages }) => {
   return (
-    <Container>
+    <Container title={BLOG.title} description={BLOG.description}>
       {postsToShow.map(post => (
         <BlogPost key={post.id} post={post} />
       ))}

diff --git a/pages/page/[page].js b/pages/page/[page].js
@@ -8,7 +8,9 @@ export async function getStaticProps (context) {
   const { page } = context.params // Get Current Page No.
   // fetch page data
   const posts = await getAllPosts()
-  const postsToShow = posts.filter(post => post.status === 'Published' && post.type === 'Post').slice(BLOG.postsPerPage * (page - 1), BLOG.postsPerPage * page)
+  const postsToShow = posts
+    .filter(post => post.status === 'Published' && post.type === 'Post')
+    .slice(BLOG.postsPerPage * (page - 1), BLOG.postsPerPage * page)
   const totalPosts = posts.length
   const totalPages = Math.ceil(totalPosts / BLOG.postsPerPage)
   return {
@@ -23,17 +25,18 @@ export async function getStaticProps (context) {
 const Page = ({ postsToShow, page, totalPages }) => {
   return (
     <Container>
-        {postsToShow && postsToShow.map(post => (
-         <BlogPost key={post.id} post={post} />
-        ))}
-        <Pagination page={page} totalPages={totalPages} />
+      {postsToShow &&
+        postsToShow.map(post => <BlogPost key={post.id} post={post} />)}
+      <Pagination page={page} totalPages={totalPages} />
     </Container>
   )
 }
 
 export async function getStaticPaths () {
   let posts = await getAllPosts()
-  posts = posts.filter(post => post.status === 'Published' && post.type === 'Post')
+  posts = posts.filter(
+    post => post.status === 'Published' && post.type === 'Post'
+  )
   const totalPosts = posts.length
   const totalPages = Math.ceil(totalPosts / BLOG.postsPerPage)
   return {

diff --git a/pages/search.js b/pages/search.js
@@ -2,13 +2,13 @@ import { getAllPosts, getAllTags } from '@/lib/notion'
 import SearchLayout from '@/layouts/search'
 
 export default function search ({ tags, posts }) {
-  return <SearchLayout tags={tags} posts={posts}/>
+  return <SearchLayout tags={tags} posts={posts} />
 }
 export async function getStaticProps () {
   let posts = await getAllPosts()
-  posts = posts.filter(
-    post => post.status === 'Published' && post.type === 'Post'
-  ).slice(0, 10)
+  posts = posts
+    .filter(post => post.status === 'Published' && post.type === 'Post')
+    .slice(0, 10)
   const tags = await getAllTags()
   return {
     props: {

diff --git a/pages/tag/[tag].js b/pages/tag/[tag].js
@@ -2,9 +2,7 @@ import { getAllPosts, getAllTags } from '@/lib/notion'
 import SearchLayout from '@/layouts/search'
 
 export default function Tag ({ tags, posts, currentTag }) {
-  return (
-    <SearchLayout tags={tags} posts={posts} currentTag={currentTag}/>
-  )
+  return <SearchLayout tags={tags} posts={posts} currentTag={currentTag} />
 }
 
 export async function getStaticProps ({ params }) {
@@ -14,7 +12,9 @@ export async function getStaticProps ({ params }) {
     post => post.status === 'Published' && post.type === 'Post'
   )
   const tags = await getAllTags()
-  const filteredPosts = posts.filter(post => post && post.tags && post.tags.includes(currentTag))
+  const filteredPosts = posts.filter(
+    post => post && post.tags && post.tags.includes(currentTag)
+  )
   return {
     props: {
       tags,

diff --git a/styles/globals.css b/styles/globals.css
@@ -7,15 +7,15 @@
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("/fonts/Inter-roman.var.woff2") format("woff2");
+  src: url('/fonts/Inter-roman.var.woff2') format('woff2');
 }
 @font-face {
   font-family: 'Inter';
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("/fonts/Inter-italic.var.woff2") format("woff2");
+  src: url('/fonts/Inter-italic.var.woff2') format('woff2');
 }
 
 .wrapper {
@@ -33,7 +33,7 @@
   top: -1px;
   backdrop-filter: saturate(180%) blur(20px);
   /* transition: background-color 0.1 ease-in-out; */
-  transition: all .5s cubic-bezier(.4,0,0,1)
+  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
 }
 
 .sticky-nav-full {
@@ -54,7 +54,7 @@
   /* display: none */
 }
 .notion {
-  @apply text-gray-700
+  @apply text-gray-700;
 }
 
 .notion-h1,
@@ -73,7 +73,7 @@
 
 .notion-text,
 .notion p {
-  @apply leading-8
+  @apply leading-8;
 }
 
 .notion-page {
@@ -88,11 +88,11 @@
     display: block;
     opacity: 0;
     /* transform: translateY(-3rem); */
-    transition: all .5s cubic-bezier(.4,0,0,1);
+    transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
   }
   .sticky-nav-full .header-name {
     /* transform: translateY(0); */
-    opacity: 1
+    opacity: 1;
   }
 }