Merge remote-tracking branch 'upstream/main'

hanmilLee · Nov 7, 2022 · 8911db7 · 8911db7
2 parents aa80cdf + fff5757
commit 8911db7
Show file tree

Hide file tree

Showing 49 changed files with 2,112 additions and 648 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -6,17 +6,17 @@ jobs:
   Build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
           cache: yarn
 
       - run: yarn install --frozen-lockfile
       - name: build
-#        TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
-#        env:
-#          REDIS_HOST: ${{ secrets.REDIS_HOST }}
-#          REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
+        #        TODO Enable those lines below if you use a Redis cache, you'll also need to configure GitHub Repository Secrets
+        #        env:
+        #          REDIS_HOST: ${{ secrets.REDIS_HOST }}
+        #          REDIS_PASSWORD: ${{ secrets.REDIS_PASSWORD }}
         run: yarn build
diff --git a/.prettierrc b/.prettierrc
@@ -7,5 +7,14 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "^(@/lib/(.*)$)|^(@/components/(.*)$)|^(@/styles/(.*)$)",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true
 }
diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { PageHead } from './PageHead'
 
+import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
 export const ErrorPage: React.FC<{ statusCode: number }> = ({ statusCode }) => {

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,14 +1,20 @@
 import * as React from 'react'
-import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
-import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
+
+import { FaEnvelopeOpenText } from '@react-icons/all-files/fa/FaEnvelopeOpenText'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
+import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube'
+import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
+<<<<<<< HEAD
 import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram'
+=======
+import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+>>>>>>> upstream/main
 
-import { useDarkMode } from 'lib/use-dark-mode'
-import * as config from 'lib/config'
+import * as config from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 
@@ -112,6 +118,7 @@ export const FooterImpl: React.FC = () => {
           </a>
         )}
 
+<<<<<<< HEAD
         {config.instagram && (
           <a
             className={styles.instagram}
@@ -121,6 +128,29 @@ export const FooterImpl: React.FC = () => {
             rel='noopener noreferrer'
           >
             <FaInstagram />
+=======
+        {config.newsletter && (
+          <a
+            className={styles.newsletter}
+            href={`${config.newsletter}`}
+            title={`Newsletter ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaEnvelopeOpenText />
+          </a>
+        )}
+
+        {config.youtube && (
+          <a
+            className={styles.youtube}
+            href={`https://www.youtube.com/${config.youtube}`}
+            title={`YouTube ${config.author}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <FaYoutube />
+>>>>>>> upstream/main
           </a>
         )}
       </div>

diff --git a/components/Loading.tsx b/components/Loading.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { LoadingIcon } from './LoadingIcon'
 
+import { LoadingIcon } from './LoadingIcon'
 import styles from './styles.module.css'
 
 export const Loading: React.FC = () => (

diff --git a/components/LoadingIcon.tsx b/components/LoadingIcon.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react'
+
 import cs from 'classnames'
+
 import styles from './styles.module.css'
 
 export const LoadingIcon = (props) => {

diff --git a/components/NotionPage.tsx b/components/NotionPage.tsx
@@ -1,37 +1,43 @@
 import * as React from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
 import dynamic from 'next/dynamic'
-import cs from 'classnames'
+import Image from 'next/image'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useSearchParam } from 'react-use'
-import BodyClassName from 'react-body-classname'
+
+import cs from 'classnames'
 import { PageBlock } from 'notion-types'
+<<<<<<< HEAD
 
 // import TweetEmbed from 'react-tweet-embed'
 
 // core notion renderer
+=======
+import { formatDate, getBlockTitle, getPageProperty } from 'notion-utils'
+import BodyClassName from 'react-body-classname'
+>>>>>>> upstream/main
 import { NotionRenderer } from 'react-notion-x'
+import TweetEmbed from 'react-tweet-embed'
+import { useSearchParam } from 'react-use'
 
-// utils
-import { getBlockTitle, getPageProperty, formatDate } from 'notion-utils'
-import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
-import { mapImageUrl } from 'lib/map-image-url'
-import { searchNotion } from 'lib/search-notion'
-import { useDarkMode } from 'lib/use-dark-mode'
-import * as types from 'lib/types'
-import * as config from 'lib/config'
+import * as config from '@/lib/config'
+import * as types from '@/lib/types'
+import { mapImageUrl } from '@/lib/map-image-url'
+import { getCanonicalPageUrl, mapPageUrl } from '@/lib/map-page-url'
+import { searchNotion } from '@/lib/search-notion'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
-// components
-import { Loading } from './Loading'
-import { Page404 } from './Page404'
-import { PageHead } from './PageHead'
-import { PageAside } from './PageAside'
 import { Footer } from './Footer'
-import { NotionPageHeader } from './NotionPageHeader'
 import { GitHubShareButton } from './GitHubShareButton'
+<<<<<<< HEAD
 import { ReactUtterances } from './ReactUtterances'
 // import { ReactCusdis } from 'react-cusdis'
+=======
+import { Loading } from './Loading'
+import { NotionPageHeader } from './NotionPageHeader'
+import { Page404 } from './Page404'
+import { PageAside } from './PageAside'
+import { PageHead } from './PageHead'
+>>>>>>> upstream/main
 import styles from './styles.module.css'
 
 // -----------------------------------------------------------------------------
@@ -128,7 +134,7 @@ const propertyDateValue = (
     const publishDate = data?.[0]?.[1]?.[0]?.[1]?.start_date
 
     if (publishDate) {
-      return `Published ${formatDate(publishDate, {
+      return `${formatDate(publishDate, {
         month: 'long'
       })}`
     }

diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react'
-import cs from 'classnames'
-import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
-import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
-import { Header, Breadcrumbs, Search, useNotionContext } from 'react-notion-x'
+
 import * as types from 'notion-types'
+import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
+import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import cs from 'classnames'
+import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
-import { useDarkMode } from 'lib/use-dark-mode'
-import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
+import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 

diff --git a/components/Page404.tsx b/components/Page404.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import * as types from 'lib/types'
-import { PageHead } from './PageHead'
 
+import * as types from '@/lib/types'
+
+import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
 export const Page404: React.FC<types.PageProps> = ({ site, pageId, error }) => {

diff --git a/components/PageActions.tsx b/components/PageActions.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
+
 import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
+import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
 
 import styles from './styles.module.css'
 

diff --git a/components/PageAside.tsx b/components/PageAside.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
+
 import { Block, ExtendedRecordMap } from 'notion-types'
 
+import { getPageTweet } from '@/lib/get-page-tweet'
+
 import { PageActions } from './PageActions'
 import { PageSocial } from './PageSocial'
 
-import { getPageTweet } from 'lib/get-page-tweet'
-
 export const PageAside: React.FC<{
   block: Block
   recordMap: ExtendedRecordMap

diff --git a/components/PageHead.tsx b/components/PageHead.tsx
@@ -1,9 +1,9 @@
-import Head from 'next/head'
 import * as React from 'react'
+import Head from 'next/head'
 
-import * as types from 'lib/types'
-import * as config from 'lib/config'
-import { getSocialImageUrl } from 'lib/get-social-image-url'
+import * as config from '@/lib/config'
+import * as types from '@/lib/types'
+import { getSocialImageUrl } from '@/lib/get-social-image-url'
 
 export const PageHead: React.FC<
   types.PageProps & {

diff --git a/components/PageSocial.module.css b/components/PageSocial.module.css
@@ -114,13 +114,27 @@
   border-color: #c9510c;
 }
 
+.youtube .actionBgPane {
+  background: #FF0000;
+}
+.youtube:hover {
+  border-color: #FF0000;
+}
+
 .medium .actionBgPane {
   background: #00ab6c;
 }
 .medium:hover {
   border-color: #00ab6c;
 }
 
+.newsletter .actionBgPane {
+  background: #777777;
+}
+.newsletter:hover {
+  border-color: #777777;
+}
+
 .email .actionBgPane {
   background: #777;
 }

diff --git a/components/PageSocial.tsx b/components/PageSocial.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
+
 import cs from 'classnames'
 
-import * as config from 'lib/config'
+import * as config from '@/lib/config'
 
 import styles from './PageSocial.module.css'
 
@@ -53,6 +54,27 @@ const socialLinks: SocialLink[] = [
     icon: (
       <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
         <path d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z' />
+        </svg>
+    )
+  },
+  config.newsletter && {
+    name: 'newsletter',
+    href: `${config.newsletter}`,
+    title: `Newsletter ${config.author}`,
+    icon: (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 .64L8.23 3H5V5L2.97 6.29C2.39 6.64 2 7.27 2 8V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V8C22 7.27 21.61 6.64 21.03 6.29L19 5V3H15.77M7 5H17V9.88L12 13L7 9.88M8 6V7.5H16V6M5 7.38V8.63L4 8M19 7.38L20 8L19 8.63M8 8.5V10H16V8.5Z' />
+      </svg>
+    )
+  },
+
+  config.youtube && {
+    name: 'youtube',
+    href: `https://www.youtube.com/${config.youtube}`,
+    title: `YouTube ${config.youtube}`,
+    icon: (
+      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' />
       </svg>
     )
   }

diff --git a/components/index.ts b/components/index.ts
diff --git a/components/styles.module.css b/components/styles.module.css
@@ -98,13 +98,21 @@
   color: #c9510c;
 }
 
+.youtube:hover {
+  color: #ff0000;
+}
+
 .linkedin:hover {
   color: #0077b5;
 }
 .instagram:hover {
   color: #dc2743;
 }
 
+.newsletter:hover {
+  color: #777777;
+}
+
 .comments {
   width: 100%;
   margin-top: 2em;