fix: locally linked

.eslintrc.json

@@ -1,27 +1,17 @@
 {
   "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react", "react-hooks"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "env": {
-    "browser": true,
-    "node": true
-  },
+  "extends": ["@fisch0920/eslint-config"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": 0,
-    "@typescript-eslint/no-non-null-assertion": 0,
-    "@typescript-eslint/no-unused-vars": 2,
-    "react/prop-types": 0
+    "react/prop-types": "off",
+    "unicorn/no-array-reduce": "off",
+    "unicorn/filename-case": "off",
+    "no-process-env": "off",
+    "array-callback-return": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/interactive-supports-focus": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "@typescript-eslint/naming-convention": "off"
   }
 }

.prettierrc

@@ -7,14 +7,5 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none",
-  "importOrder": [
-    "^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "^(@/lib/(.*)$)|^(@/components/(.*)$)|^(@/styles/(.*)$)",
-    "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true
+  "trailingComma": "none"
 }

.vscode/launch.json

@@ -8,7 +8,6 @@
       "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
       "runtimeArgs": ["dev"],
       "cwd": "${workspaceFolder}",
-      "port": 9229,
       "smartStep": true,
       "console": "integratedTerminal",
       "skipFiles": ["<node_internals>/**"],

components/ErrorPage.tsx

@@ -1,9 +1,7 @@
-import * as React from 'react'
-
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
 
-export const ErrorPage: React.FC<{ statusCode: number }> = ({ statusCode }) => {
+export function ErrorPage({ statusCode }: { statusCode: number }) {
   const title = 'Error'
 
   return (

components/Footer.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 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'
@@ -9,6 +7,7 @@ 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'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
+import * as React from 'react'
 
 import * as config from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
@@ -17,7 +16,7 @@ import styles from './styles.module.css'
 
 // TODO: merge the data and icons from PageSocial with the social links in Footer
 
-export const FooterImpl: React.FC = () => {
+export function FooterImpl() {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
   const currentYear = new Date().getFullYear()
@@ -36,7 +35,9 @@ export const FooterImpl: React.FC = () => {
 
   return (
     <footer className={styles.footer}>
-      <div className={styles.copyright}>Copyright {currentYear} {config.author}</div>
+      <div className={styles.copyright}>
+        Copyright {currentYear} {config.author}
+      </div>
 
       <div className={styles.settings}>
         {hasMounted && (

components/GitHubShareButton.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react'
-
 import styles from './styles.module.css'
 
-export const GitHubShareButton: React.FC = () => {
+export function GitHubShareButton() {
   return (
     <a
       href='https://github.com/transitive-bullshit/nextjs-notion-starter-kit'

components/Loading.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
-
 import { LoadingIcon } from './LoadingIcon'
 import styles from './styles.module.css'
 
-export const Loading: React.FC = () => (
-  <div className={styles.container}>
-    <LoadingIcon />
-  </div>
-)
+export function Loading() {
+  return (
+    <div className={styles.container}>
+      <LoadingIcon />
+    </div>
+  )
+}

components/LoadingIcon.tsx

@@ -1,10 +1,8 @@
-import * as React from 'react'
-
 import cs from 'classnames'
 
 import styles from './styles.module.css'
 
-export const LoadingIcon = (props) => {
+export function LoadingIcon(props: any) {
   const { className, ...rest } = props
   return (
     <svg

components/NotionPage.tsx

@@ -1,19 +1,18 @@
-import * as React from 'react'
+import cs from 'classnames'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
+import Image from 'next/legacy/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-
-import cs from 'classnames'
-import { PageBlock } from 'notion-types'
+import { type PageBlock } from 'notion-types'
 import { formatDate, getBlockTitle, getPageProperty } from 'notion-utils'
+import * as React from 'react'
 import BodyClassName from 'react-body-classname'
 import { NotionRenderer } from 'react-notion-x'
 import TweetEmbed from 'react-tweet-embed'
 import { useSearchParam } from 'react-use'
 
+import type * as types from '@/lib/types'
 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'
@@ -97,7 +96,7 @@ const Modal = dynamic(
   }
 )
 
-const Tweet = ({ id }: { id: string }) => {
+function Tweet({ id }: { id: string }) {
   return <TweetEmbed tweetId={id} />
 }
 
@@ -142,12 +141,12 @@ const propertyTextValue = (
   return defaultFn()
 }
 
-export const NotionPage: React.FC<types.PageProps> = ({
+export function NotionPage({
   site,
   recordMap,
   error,
   pageId
-}) => {
+}: types.PageProps) {
   const router = useRouter()
   const lite = useSearchParam('lite')
 

components/NotionPageHeader.tsx

@@ -1,17 +1,16 @@
-import * as React from 'react'
-
-import * as types from 'notion-types'
+import type * 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 * as React from 'react'
 import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
 import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
 import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 
-const ToggleThemeButton = () => {
+function ToggleThemeButton() {
   const [hasMounted, setHasMounted] = React.useState(false)
   const { isDarkMode, toggleDarkMode } = useDarkMode()
 
@@ -33,9 +32,11 @@ const ToggleThemeButton = () => {
   )
 }
 
-export const NotionPageHeader: React.FC<{
+export function NotionPageHeader({
+  block
+}: {
   block: types.CollectionViewPageBlock | types.PageBlock
-}> = ({ block }) => {
+}) {
   const { components, mapPageUrl } = useNotionContext()
 
   if (navigationStyle === 'default') {

components/Page404.tsx

@@ -1,11 +1,9 @@
-import * as React from 'react'
-
-import * as types from '@/lib/types'
+import type * 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 }) => {
+export function Page404({ site, pageId, error }: types.PageProps) {
   const title = site?.name || 'Notion Page Not Found'
 
   return (

components/PageActions.tsx

@@ -1,5 +1,3 @@
-import * as React from 'react'
-
 import { AiOutlineRetweet } from '@react-icons/all-files/ai/AiOutlineRetweet'
 import { IoHeartOutline } from '@react-icons/all-files/io5/IoHeartOutline'
 
@@ -8,7 +6,7 @@ import styles from './styles.module.css'
 /**
  * @see https://developer.twitter.com/en/docs/twitter-for-websites/web-intents/overview
  */
-export const PageActions: React.FC<{ tweet: string }> = ({ tweet }) => {
+export function PageActions({ tweet }: { tweet: string }) {
   return (
     <div className={styles.pageActions}>
       <a

components/PageAside.tsx

@@ -1,17 +1,19 @@
-import * as React from 'react'
-
-import { Block, ExtendedRecordMap } from 'notion-types'
+import { type Block, type ExtendedRecordMap } from 'notion-types'
 
 import { getPageTweet } from '@/lib/get-page-tweet'
 
 import { PageActions } from './PageActions'
 import { PageSocial } from './PageSocial'
 
-export const PageAside: React.FC<{
+export function PageAside({
+  block,
+  recordMap,
+  isBlogPost
+}: {
   block: Block
   recordMap: ExtendedRecordMap
   isBlogPost: boolean
-}> = ({ block, recordMap, isBlogPost }) => {
+}) {
   if (!block) {
     return null
   }

components/PageHead.tsx

@@ -1,18 +1,22 @@
-import * as React from 'react'
 import Head from 'next/head'
 
+import type * as types from '@/lib/types'
 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 & {
-    title?: string
-    description?: string
-    image?: string
-    url?: string
-  }
-> = ({ site, title, description, pageId, image, url }) => {
+export function PageHead({
+  site,
+  title,
+  description,
+  pageId,
+  image,
+  url
+}: types.PageProps & {
+  title?: string
+  description?: string
+  image?: string
+  url?: string
+}) {
   const rssFeedUrl = `${config.host}/feed`
 
   title = title ?? site?.name
@@ -30,13 +34,20 @@ export const PageHead: React.FC<
       />
 
       <meta name='apple-mobile-web-app-capable' content='yes' />
+      <meta name='apple-mobile-web-app-status-bar-style' content='black' />
+
       <meta
-        name='apple-mobile-web-app-status-bar-style'
-        content='black'
+        name='theme-color'
+        media='(prefers-color-scheme: light)'
+        content='#fefffe'
+        key='theme-color-light'
+      />
+      <meta
+        name='theme-color'
+        media='(prefers-color-scheme: dark)'
+        content='#2d3439'
+        key='theme-color-dark'
       />
-
-      <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fefffe" key="theme-color-light"/>
-      <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2d3439" key="theme-color-dark"/>
 
       <meta name='robots' content='index,follow' />
       <meta property='og:type' content='website' />

components/PageSocial.module.css

@@ -101,10 +101,10 @@
 }
 
 .youtube .actionBgPane {
-  background: #FF0000;
+  background: #ff0000;
 }
 .youtube:hover {
-  border-color: #FF0000;
+  border-color: #ff0000;
 }
 
 .medium .actionBgPane {

components/PageSocial.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-
+import type * as React from 'react'
 import cs from 'classnames'
 
 import * as config from '@/lib/config'
@@ -70,7 +69,7 @@ const socialLinks: SocialLink[] = [
   }
 ].filter(Boolean)
 
-export const PageSocial: React.FC = () => {
+export function PageSocial() {
   return (
     <div className={styles.pageSocial}>
       {socialLinks.map((action) => (