add path alias

client/components/new-post/drag-and-drop/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
 import { Document } from '../'
-import generateUUID from '../../../lib/generate-uuid'
+import generateUUID from '@lib/generate-uuid'
 import { XCircle } from '@geist-ui/icons'
 const allowedFileTypes = [
     'application/json',

client/components/new-post/index.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonDropdown, useToasts } from '@geist-ui/core'
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react'
-import generateUUID from '../../lib/generate-uuid';
+import generateUUID from '@lib/generate-uuid';
 import Document from '../document';
 import FileDropzone from './drag-and-drop';
 import styles from './post.module.css'

client/components/new-post/title/index.tsx

@@ -1,6 +1,6 @@
 import { Text, Input } from '@geist-ui/core'
 import { memo } from 'react'
-import ShiftBy from '../../shift-by'
+import ShiftBy from '@components/shift-by'
 import styles from '../post.module.css'
 
 const titlePlaceholders = [

client/components/post-list/list-item.tsx

@@ -1,7 +1,7 @@
 import { Card, Spacer, Grid, Divider, Link, Text, Input, Tooltip } from "@geist-ui/core"
 import NextLink from "next/link"
 import { useEffect, useMemo, useState } from "react"
-import timeAgo from "../../lib/time-ago"
+import timeAgo from "@lib/time-ago"
 import ShiftBy from "../shift-by"
 import VisibilityBadge from "../visibility-badge"
 

client/components/preview/react-markdown-preview.tsx

@@ -6,7 +6,7 @@ import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import a11yEmoji from '@fec/remark-a11y-emoji';
 import styles from './preview.module.css'
 import { vscDarkPlus as dark, vs as light } from 'react-syntax-highlighter/dist/cjs/styles/prism'
-import useSharedState from "../../lib/hooks/use-shared-state";
+import useSharedState from "@lib/hooks/use-shared-state";
 
 type Props = {
     content: string | undefined

client/pages/_app.tsx

@@ -1,8 +1,8 @@
-import '../styles/globals.css'
+import '@styles/globals.css'
 import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core'
 import { useEffect, useMemo, useState } from 'react'
 import type { AppProps as NextAppProps } from "next/app";
-import useSharedState from '../lib/hooks/use-shared-state';
+import useSharedState from '@lib/hooks/use-shared-state';
 
 import 'react-loading-skeleton/dist/skeleton.css'
 import { SkeletonTheme } from 'react-loading-skeleton';

client/pages/index.tsx

@@ -1,12 +1,12 @@
-import styles from '../styles/Home.module.css'
+import styles from '@styles/Home.module.css'
 import { Page, Spacer, Text } from '@geist-ui/core'
 
-import Header from '../components/header'
+import Header from '@components/header'
 import { ThemeProps } from './_app'
-import Document from '../components/document'
+import Document from '@components/document'
 import Image from 'next/image'
-import ShiftBy from '../components/shift-by'
-import PageSeo from 'components/page-seo'
+import ShiftBy from '@components/shift-by'
+import PageSeo from '@components/page-seo'
 
 export function getStaticProps() {
   const introDoc = process.env.WELCOME_CONTENT

client/pages/mine.tsx

@@ -1,8 +1,8 @@
-import styles from '../styles/Home.module.css'
+import styles from '@styles/Home.module.css'
 import { Page } from '@geist-ui/core'
 
-import Header from '../components/header'
-import MyPosts from '../components/my-posts'
+import Header from '@components/header'
+import MyPosts from '@components/my-posts'
 
 const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: () => void }) => {
   return (

client/pages/new.tsx

@@ -1,11 +1,11 @@
-import styles from '../styles/Home.module.css'
-import NewPost from '../components/new-post'
+import styles from '@styles/Home.module.css'
+import NewPost from '@components/new-post'
 import { Page } from '@geist-ui/core'
-import useSignedIn from '../lib/hooks/use-signed-in'
-import Header from '../components/header'
+import useSignedIn from '@lib/hooks/use-signed-in'
+import Header from '@components/header'
 import { ThemeProps } from './_app'
 import { useRouter } from 'next/router'
-import PageSeo from 'components/page-seo'
+import PageSeo from '@components/page-seo'
 
 const Home = ({ theme, changeTheme }: ThemeProps) => {
   const router = useRouter()

client/pages/signin.tsx

@@ -1,7 +1,7 @@
 import { Page } from "@geist-ui/core";
-import PageSeo from "components/page-seo";
-import Auth from "../components/auth";
-import Header from "../components/header";
+import PageSeo from "@components/page-seo";
+import Auth from "@components/auth";
+import Header from "@components/header";
 import { ThemeProps } from "./_app";
 
 const SignIn = ({ theme, changeTheme }: ThemeProps) => (

client/pages/signup.tsx

@@ -1,7 +1,7 @@
 import { Page } from "@geist-ui/core";
-import Auth from "components/auth";
-import Header from "components/header";
-import PageSeo from 'components/page-seo';
+import Auth from "@components/auth";
+import Header from "@components/header";
+import PageSeo from '@components/page-seo';
 import { ThemeProps } from "./_app";
 
 const SignUp = ({ theme, changeTheme }: ThemeProps) => (

client/tsconfig.json

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