🔞

.prettierrc

@@ -11,7 +11,7 @@
   "importOrder": [
     "^(react/(.*)$)|^(react$)|^(next/(.*)$)|^(next$)",
     "<THIRD_PARTY_MODULES>",
-    "^(lib/(.*)$)|^(components/(.*)$)|^(styles/(.*)$)",
+    "^(@/lib/(.*)$)|^(@/components/(.*)$)|^(@/styles/(.*)$)",
     "^[./]"
   ],
   "importOrderSeparation": true,

components/Footer.tsx

@@ -9,8 +9,8 @@ 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 config from 'lib/config'
-import { useDarkMode } from 'lib/use-dark-mode'
+import * as config from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 

components/NotionPage.tsx

@@ -6,24 +6,21 @@ import { useRouter } from 'next/router'
 
 import cs from 'classnames'
 import { PageBlock } from 'notion-types'
-// utils
 import { formatDate, getBlockTitle, getPageProperty } from 'notion-utils'
 import BodyClassName from 'react-body-classname'
-// core notion renderer
 import { NotionRenderer } from 'react-notion-x'
 import TweetEmbed from 'react-tweet-embed'
 import { useSearchParam } from 'react-use'
 
-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'
+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'
 
 import { Footer } from './Footer'
 import { GitHubShareButton } from './GitHubShareButton'
-// components
 import { Loading } from './Loading'
 import { NotionPageHeader } from './NotionPageHeader'
 import { Page404 } from './Page404'

components/NotionPageHeader.tsx

@@ -6,8 +6,8 @@ import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import cs from 'classnames'
 import { Breadcrumbs, Header, Search, useNotionContext } from 'react-notion-x'
 
-import { isSearchEnabled, navigationLinks, navigationStyle } from 'lib/config'
-import { useDarkMode } from 'lib/use-dark-mode'
+import { isSearchEnabled, navigationLinks, navigationStyle } from '@/lib/config'
+import { useDarkMode } from '@/lib/use-dark-mode'
 
 import styles from './styles.module.css'
 

components/Page404.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import * as types from 'lib/types'
+import * as types from '@/lib/types'
 
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'

components/PageAside.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import { Block, ExtendedRecordMap } from 'notion-types'
 
-import { getPageTweet } from 'lib/get-page-tweet'
+import { getPageTweet } from '@/lib/get-page-tweet'
 
 import { PageActions } from './PageActions'
 import { PageSocial } from './PageSocial'

components/PageHead.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Head from 'next/head'
 
-import * as config from 'lib/config'
-import * as types from 'lib/types'
-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 & {

components/PageSocial.tsx

@@ -2,7 +2,7 @@ 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'
 

pages/404.tsx

@@ -1,3 +1,3 @@
-import { Page404 } from 'components'
+import { Page404 } from '@/components'
 
 export default Page404

pages/[pageId].tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import { GetStaticProps } from 'next'
 
-import { NotionPage } from 'components'
+import { NotionPage } from '@/components'
 
-import { domain, isDev } from 'lib/config'
-import { getSiteMap } from 'lib/get-site-map'
-import { resolveNotionPage } from 'lib/resolve-notion-page'
-import { PageProps, Params } from 'lib/types'
+import { domain, isDev } from '@/lib/config'
+import { getSiteMap } from '@/lib/get-site-map'
+import { resolveNotionPage } from '@/lib/resolve-notion-page'
+import { PageProps, Params } from '@/lib/types'
 
 export const getStaticProps: GetStaticProps<PageProps, Params> = async (
   context

pages/_app.tsx

@@ -11,15 +11,6 @@ import posthog from 'posthog-js'
 import 'prismjs/themes/prism-coy.css'
 // core styles shared by all of react-notion-x (required)
 import 'react-notion-x/src/styles.css'
-
-import { bootstrap } from 'lib/bootstrap-client'
-import {
-  fathomConfig,
-  fathomId,
-  isServer,
-  posthogConfig,
-  posthogId
-} from 'lib/config'
 import 'styles/global.css'
 // this might be better for dark mode
 // import 'prismjs/themes/prism-okaidia.css'
@@ -28,6 +19,15 @@ import 'styles/notion.css'
 // global style overrides for prism theme (optional)
 import 'styles/prism-theme.css'
 
+import { bootstrap } from '@/lib/bootstrap-client'
+import {
+  fathomConfig,
+  fathomId,
+  isServer,
+  posthogConfig,
+  posthogId
+} from '@/lib/config'
+
 if (!isServer) {
   bootstrap()
 }

pages/_error.tsx

@@ -1,3 +1,3 @@
-import { ErrorPage } from 'components'
+import { ErrorPage } from '@/components'
 
 export default ErrorPage

pages/api/notion-page-info.tsx

@@ -9,10 +9,10 @@ import {
   parsePageId
 } from 'notion-utils'
 
-import * as libConfig from 'lib/config'
-import { mapImageUrl } from 'lib/map-image-url'
-import { notion } from 'lib/notion-api'
-import { NotionPageInfo } from 'lib/types'
+import * as libConfig from '@/lib/config'
+import { mapImageUrl } from '@/lib/map-image-url'
+import { notion } from '@/lib/notion-api'
+import { NotionPageInfo } from '@/lib/types'
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method !== 'POST') {

pages/api/social-image.tsx

@@ -3,8 +3,8 @@ import { NextRequest } from 'next/server'
 
 import { ImageResponse } from '@vercel/og'
 
-import { api, apiHost } from 'lib/config'
-import { NotionPageInfo } from 'lib/types'
+import { api, apiHost } from '@/lib/config'
+import { NotionPageInfo } from '@/lib/types'
 
 const interRegularFontP = fetch(
   new URL('../../public/fonts/Inter-Regular.ttf', import.meta.url)

pages/feed.tsx

@@ -9,10 +9,10 @@ import {
 } from 'notion-utils'
 import RSS from 'rss'
 
-import * as config from 'lib/config'
-import { getSiteMap } from 'lib/get-site-map'
-import { getSocialImageUrl } from 'lib/get-social-image-url'
-import { getCanonicalPageUrl } from 'lib/map-page-url'
+import * as config from '@/lib/config'
+import { getSiteMap } from '@/lib/get-site-map'
+import { getSocialImageUrl } from '@/lib/get-social-image-url'
+import { getCanonicalPageUrl } from '@/lib/map-page-url'
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
   if (req.method !== 'GET') {

pages/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 
-import { NotionPage } from 'components'
+import { NotionPage } from '@/components'
 
-import { domain } from 'lib/config'
-import { resolveNotionPage } from 'lib/resolve-notion-page'
+import { domain } from '@/lib/config'
+import { resolveNotionPage } from '@/lib/resolve-notion-page'
 
 export const getStaticProps = async () => {
   try {

pages/robots.txt.tsx

@@ -1,6 +1,6 @@
 import type { GetServerSideProps } from 'next'
 
-import { host } from 'lib/config'
+import { host } from '@/lib/config'
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
   if (req.method !== 'GET') {

pages/sitemap.xml.tsx

@@ -1,8 +1,8 @@
 import type { GetServerSideProps } from 'next'
 
-import { host } from 'lib/config'
-import { getSiteMap } from 'lib/get-site-map'
-import type { SiteMap } from 'lib/types'
+import { host } from '@/lib/config'
+import { getSiteMap } from '@/lib/get-site-map'
+import type { SiteMap } from '@/lib/types'
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
   if (req.method !== 'GET') {

tsconfig.json

@@ -16,7 +16,12 @@
     "jsx": "preserve",
     "baseUrl": ".",
     "typeRoots": ["./node_modules/@types"],
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
+    }
   },
   "exclude": ["node_modules"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "site.config.ts"]