🎨 Style tweak

new font, gravatar, tag and more
wingboy · May 6, 2021 · 589c671 · 589c671
1 parent a6aba18
commit 589c671
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 46 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -6,7 +6,7 @@ const Footer = ({ fullWidth }) => {
   const from = +BLOG.since
   return (
     <div
-      className={`mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-500 transition-all ${
+      className={`mt-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 transition-all ${
         !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
       }`}
     >

diff --git a/components/TagItem.js b/components/TagItem.js
@@ -3,11 +3,11 @@ import Link from 'next/link'
 const TagItem = ({ tag }) => (
   <Link href={`/tag/${encodeURIComponent(tag)}`}>
     <a>
-      <p className="mr-1">
-        #{tag}
+      <p className="mr-1 rounded-full px-2 py-1 border leading-none text-sm dark:border-gray-600">
+        {tag}
       </p>
     </a>
   </Link>
-);
+)
 
-export default TagItem
+export default TagItem
diff --git a/layouts/default.js b/layouts/default.js
@@ -32,7 +32,7 @@ const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
-const DefaultLayout = ({ children, blockMap, frontMatter }) => {
+const DefaultLayout = ({ children, blockMap, frontMatter, emailHash }) => {
   const locale = useLocale()
   const router = useRouter()
   const cusdisI18n = ['zh-cn', 'es', 'tr', 'pt-BR', 'oc']
@@ -49,38 +49,38 @@ const DefaultLayout = ({ children, blockMap, frontMatter }) => {
           {frontMatter.title}
         </h1>
         {frontMatter.type[0] !== 'Page' && (
-          <nav className="flex mt-7 mb-2 items-center text-gray-500 dark:text-gray-400">
-            <div className="flex">
+          <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
+            <div className="flex mb-4">
               <a href={BLOG.socialLink || '#'} className="flex">
                 <Image
                   alt={BLOG.author}
                   width={24}
                   height={24}
-                  src="/avatar.svg"
+                  src={`https://gravatar.com/avatar/${emailHash}`}
                   className="rounded-full"
                 />
-                <p className="hidden md:ml-2 md:block">{BLOG.author}</p>
+                <p className="ml-2 md:block">{BLOG.author}</p>
               </a>
-              <span className="hidden md:inline">&nbsp;/&nbsp;</span>
+              <span className="block">&nbsp;/&nbsp;</span>
             </div>
-            <div className="mx-2 md:ml-0">
+            <div className="mr-2 mb-4 md:ml-0">
               {formatDate(
                 frontMatter?.date?.start_date || frontMatter.createdTime,
                 BLOG.lang
               )}
             </div>
             {frontMatter.tags && (
-              <div className="flex flex-wrap">
+              <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
                 {frontMatter.tags.map(tag => (
-                  <TagItem key={tag} tag={tag}/>
+                  <TagItem key={tag} tag={tag} />
                 ))}
               </div>
             )}
           </nav>
         )}
         {children}
         {blockMap && (
-          <div className="">
+          <div className="-mt-4">
             <NotionRenderer
               recordMap={blockMap}
               components={{
@@ -93,16 +93,16 @@ const DefaultLayout = ({ children, blockMap, frontMatter }) => {
           </div>
         )}
       </article>
-      <div className="flex justify-between font-medium text-black dark:text-gray-100">
+      <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
         <button
           onClick={() => router.push(BLOG.path || '/')}
-          className="mt-2 cursor-pointer"
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
         >
           ← {locale.POST.BACK}
         </button>
         <button
           onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          className="mt-2 cursor-pointer"
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
         >
           ↑ {locale.POST.TOP}
         </button>

diff --git a/layouts/fullwidth.js b/layouts/fullwidth.js
@@ -32,7 +32,7 @@ const mapPageUrl = id => {
   return 'https://www.notion.so/' + id.replace(/-/g, '')
 }
 
-const FullWidthLayout = ({ children, blockMap, frontMatter }) => {
+const FullWidthLayout = ({ children, blockMap, frontMatter, emailHash }) => {
   const locale = useLocale()
   const router = useRouter()
   const cusdisI18n = ['zh-cn', 'es', 'tr', 'pt-BR', 'oc']
@@ -50,28 +50,28 @@ const FullWidthLayout = ({ children, blockMap, frontMatter }) => {
           {frontMatter.title}
         </h1>
         {frontMatter.type[0] !== 'Page' && (
-          <nav className="flex mt-7 mb-2 items-center text-gray-500 dark:text-gray-400">
-            <div className="flex">
+          <nav className="flex mt-7 items-start text-gray-500 dark:text-gray-400">
+            <div className="flex mb-4">
               <a href={BLOG.socialLink || '#'} className="flex">
                 <Image
                   alt={BLOG.author}
                   width={24}
                   height={24}
-                  src="/avatar.svg"
+                  src={`https://gravatar.com/avatar/${emailHash}`}
                   className="rounded-full"
                 />
-                <p className="hidden md:ml-2 md:block">{BLOG.author}</p>
+                <p className="ml-2 md:block">{BLOG.author}</p>
               </a>
-              <span className="hidden md:inline">&nbsp;/&nbsp;</span>
+              <span className="block">&nbsp;/&nbsp;</span>
             </div>
-            <div className="mx-2 md:ml-0">
+            <div className="mr-2 mb-4 md:ml-0">
               {formatDate(
                 frontMatter?.date?.start_date || frontMatter.createdTime,
                 BLOG.lang
               )}
             </div>
             {frontMatter.tags && (
-              <div className="flex flex-wrap">
+              <div className="flex flex-nowrap max-w-full overflow-x-auto article-tags">
                 {frontMatter.tags.map(tag => (
                   <TagItem key={tag} tag={tag} />
                 ))}
@@ -81,7 +81,7 @@ const FullWidthLayout = ({ children, blockMap, frontMatter }) => {
         )}
         {children}
         {blockMap && (
-          <div className="">
+          <div className="-mt-4">
             <NotionRenderer
               recordMap={blockMap}
               components={{
@@ -94,16 +94,16 @@ const FullWidthLayout = ({ children, blockMap, frontMatter }) => {
           </div>
         )}
       </article>
-      <div className="flex justify-between font-medium text-black dark:text-gray-100">
+      <div className="flex justify-between font-medium text-gray-500 dark:text-gray-400">
         <button
           onClick={() => router.push(BLOG.path || '/')}
-          className="mt-2 cursor-pointer"
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
         >
           ← {locale.POST.BACK}
         </button>
         <button
           onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-          className="mt-2 cursor-pointer"
+          className="mt-2 cursor-pointer hover:text-black dark:hover:text-gray-100"
         >
           ↑ {locale.POST.TOP}
         </button>

diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,9 @@ module.exports = {
   future: {
     webpack5: true
   },
+  images: {
+    domains: ['gravatar.com']
+  },
   async headers() {
     return [
       {

diff --git a/pages/[slug].js b/pages/[slug].js
@@ -2,18 +2,24 @@ import DefaultLayout from '@/layouts/default'
 import FullWidthLayout from '@/layouts/fullwidth'
 import { getAllPosts, getPostBlocks } from '@/lib/notion'
 import BLOG from '@/blog.config'
+import { createHash } from 'crypto'
 
-const BlogPost = ({ post, blockMap }) => {
+const BlogPost = ({ post, blockMap, emailHash }) => {
   if (!post) return null
   return (
     <>
       {post.fullWidth ? (
         <FullWidthLayout
           blockMap={blockMap}
           frontMatter={post}
+          emailHash={emailHash}
         ></FullWidthLayout>
       ) : (
-        <DefaultLayout blockMap={blockMap} frontMatter={post}></DefaultLayout>
+        <DefaultLayout
+          blockMap={blockMap}
+          frontMatter={post}
+          emailHash={emailHash}
+        ></DefaultLayout>
       )}
     </>
   )
@@ -33,8 +39,10 @@ export async function getStaticProps({ params: { slug } }) {
   posts = posts.filter(post => post.status[0] === 'Published')
   const post = posts.find(t => t.slug === slug)
   const blockMap = await getPostBlocks(post.id)
+  const emailHash = createHash('md5').update(BLOG.email).digest('hex')
+
   return {
-    props: { post, blockMap },
+    props: { post, blockMap, emailHash },
     revalidate: 1
   }
 }

diff --git a/pages/_document.js b/pages/_document.js
@@ -35,14 +35,14 @@ class MyDocument extends Document {
             <>
               <link
                 rel="preload"
-                href="/fonts/Inter.var.woff2"
+                href="/fonts/IBMPlexSansVar-Roman.woff2"
                 as="font"
                 type="font/woff2"
                 crossOrigin="anonymous"
               />
               <link
                 rel="preload"
-                href="/fonts/Inter-Italic.var.woff2"
+                href="/fonts/IBMPlexSansVar-Italic.woff2"
                 as="font"
                 type="font/woff2"
                 crossOrigin="anonymous"
@@ -94,9 +94,8 @@ class MyDocument extends Document {
             ></script>
           )}
           {BLOG.autoCollapsedNavBar === true && (
-
-              <script
-                dangerouslySetInnerHTML={{
+            <script
+              dangerouslySetInnerHTML={{
                 __html: `
               var windowTop=0;
               function scrollTrigger(){
@@ -112,8 +111,8 @@ class MyDocument extends Document {
               };
               window.addEventListener('scroll',scrollTrigger);
           `
-                }}
-              />
+              }}
+            />
           )}
           {BLOG.analytics && BLOG.analytics.provider === 'ga' && (
             <>

diff --git a/public/fonts/IBMPlexSansVar-Italic.woff2 b/public/fonts/IBMPlexSansVar-Italic.woff2
diff --git a/public/fonts/IBMPlexSansVar-Roman.woff2 b/public/fonts/IBMPlexSansVar-Roman.woff2
diff --git a/public/fonts/Inter-Italic.var.woff2 b/public/fonts/Inter-Italic.var.woff2
diff --git a/public/fonts/Inter.var.woff2 b/public/fonts/Inter.var.woff2
diff --git a/styles/globals.css b/styles/globals.css
@@ -2,21 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 @font-face {
-  font-family: 'Inter';
+  font-family: 'IBM Plex Sans';
   font-weight: 100 900;
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url('/fonts/Inter.var.woff2') format('woff2');
+  src: url('/fonts/IBMPlexSansVar-Roman.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Inter';
+  font-family: 'IBM Plex Sans';
   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/IBMPlexSansVar-Italic.woff2') format('woff2');
 }
 
 @font-face {
@@ -96,6 +96,10 @@ nav {
   line-height: 1.5em;
 }
 
+.article-tags::-webkit-scrollbar {
+  width: 0 !important;
+}
+
 .tag-container ul::-webkit-scrollbar {
   width: 0 !important;
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,10 +22,10 @@ module.exports = {
         }
       },
       fontFamily: {
-        sans: ['Inter', ...fontSansCJK, ...fontFamily.sans],
+        sans: ['"IBM Plex Sans"', ...fontSansCJK, ...fontFamily.sans],
         serif: ['"Source Serif"', ...fontSerifCJK, ...fontFamily.serif],
         noEmoji: [
-          'Inter',
+          '"IBM Plex Sans"',
           'ui-sans-serif',
           'system-ui',
           '-apple-system',