From cf3a83a5e5953cf64dd05556d4c194d02d6419d4 Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Mon, 6 Nov 2023 15:05:45 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20table=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_app.tsx | 1 + src/styles/table.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/styles/table.css diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 4d11dcc60..6caa8976d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,6 +2,7 @@ import { AppPropsWithLayout } from "../types" import { Hydrate, QueryClientProvider } from "@tanstack/react-query" import { RootLayout } from "src/layouts" import { queryClient } from "src/libs/react-query" +import "src/styles/table.css" function App({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page) diff --git a/src/styles/table.css b/src/styles/table.css new file mode 100644 index 000000000..729757113 --- /dev/null +++ b/src/styles/table.css @@ -0,0 +1,44 @@ +.notion-table-of-contents { + position: fixed; + right: -75%; + top: 80px; + display: flex; + flex-direction: column; +} + +@media screen and (max-width: 1800px) { + .notion-table-of-contents { + right: -80%; + } +} + +@media screen and (max-width: 1500px) { + .notion-table-of-contents { + position: static; + } +} + +.notion-table-of-contents a { + padding: 0; + margin-bottom: 10px; +} + +.notion-table-of-contents a:hover { + background: none; +} + +.notion-table-of-contents span { + padding: 2px 2px; + line-height: 1.3; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 50%, + var(--bg-color-0) 50% + ); + background-size: 200%; + transition: 0.35s; +} + +.notion-table-of-contents span:hover { + background-position: -100% 0; +} From 6f2606fa9a15b6f9fbc8e21c3c486978e4a66a35 Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Mon, 6 Nov 2023 16:03:54 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20eslint=20order?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 47 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 957cd1545..514c2e323 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,48 @@ { - "extends": ["next/core-web-vitals"] + "extends": ["next/core-web-vitals"], + "plugins": ["import"], + "rules": { + "sort-imports": [ + "error", + { + "ignoreCase": true, + "ignoreDeclarationSort": true, + "ignoreMemberSort": false, + "allowSeparatedGroups": true + } + ], + "import/order": [ + "error", + { + "newlines-between": "always", + "groups": [ + ["builtin", "external"], + "internal", + "parent", + "sibling", + "index" + ], + "pathGroups": [ + { + "pattern": "next", + "group": "builtin", + "position": "before" + }, + { + "pattern": "react", + "group": "builtin" + }, + { + "pattern": "src/**", + "group": "internal" + } + ], + "pathGroupsExcludedImportTypes": ["next", "next/app"], + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } + } + ] + } } From e762171b272509aa4a947da76fda953016997b6b Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Mon, 6 Nov 2023 16:04:01 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20path=20alias?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index bcb518fba..516481c5b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,10 @@ "jsx": "preserve", "jsxImportSource": "@emotion/react", "incremental": true, - "baseUrl": "." + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "site.config.js"], "exclude": ["node_modules"] From a578f4a70c109441c777d24a5ca45f5a70531c24 Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Mon, 6 Nov 2023 16:10:45 +0900 Subject: [PATCH 4/6] feat: refactor import order all files --- src/apis/notion-client/getPosts.ts | 7 +++--- src/components/Category/index.tsx | 6 +++-- src/components/Emoji.tsx | 2 +- src/components/MetaConfig/index.tsx | 3 ++- src/hooks/useCategoriesQuery.ts | 5 ++-- src/hooks/useDropdown.ts | 6 ++--- src/hooks/usePostQuery.ts | 5 ++-- src/hooks/usePostsQuery.ts | 5 ++-- src/hooks/useScheme.ts | 3 ++- src/hooks/useTagsQuery.ts | 3 ++- src/layouts/RootLayout/Header/Logo.tsx | 3 ++- src/layouts/RootLayout/Header/ThemeToggle.tsx | 5 ++-- src/layouts/RootLayout/Header/index.tsx | 8 ++++--- src/layouts/RootLayout/Scripts.tsx | 1 + .../RootLayout/ThemeProvider/Global/index.tsx | 10 +++++--- .../RootLayout/ThemeProvider/index.tsx | 4 +++- src/layouts/RootLayout/index.tsx | 12 ++++++---- src/layouts/RootLayout/useGtagEffect.ts | 5 ++-- src/libs/utils/notion/filterPosts.ts | 2 +- src/libs/utils/notion/getAllPageIds.ts | 7 ++---- .../notion/getAllSelectItemsFromPosts.ts | 2 +- src/libs/utils/notion/getMetadata.ts | 2 +- src/libs/utils/notion/getPageProperties.ts | 7 +++--- src/libs/utils/notion/index.ts | 4 ++++ src/pages/404.tsx | 8 +++---- src/pages/[slug].tsx | 24 ++++++++++--------- src/pages/_app.tsx | 9 +++---- src/pages/_document.tsx | 3 ++- src/pages/api/revalidate.ts | 1 + src/pages/index.tsx | 18 +++++++------- src/routes/Detail/PageDetail/index.tsx | 8 ++++--- .../Detail/PostDetail/CommentBox/Cusdis.tsx | 9 +++---- .../PostDetail/CommentBox/Utterances.tsx | 7 +++--- .../Detail/PostDetail/CommentBox/index.tsx | 5 ++-- src/routes/Detail/PostDetail/PostHeader.tsx | 11 +++++---- src/routes/Detail/PostDetail/index.tsx | 14 ++++++----- .../components/NotionRenderer/index.tsx | 9 +++---- src/routes/Detail/hooks/useMermaidEffect.ts | 2 +- src/routes/Detail/index.tsx | 10 ++++---- src/routes/Error/index.tsx | 3 ++- src/routes/Feed/ContactCard.tsx | 9 +++---- src/routes/Feed/FeedHeader/CategorySelect.tsx | 9 +++---- src/routes/Feed/FeedHeader/FeedHeader.tsx | 4 ++-- src/routes/Feed/Footer.tsx | 5 ++-- src/routes/Feed/MobileProfileCard.tsx | 5 ++-- src/routes/Feed/PostList/PostCard.tsx | 13 +++++----- src/routes/Feed/PostList/index.tsx | 7 +++--- src/routes/Feed/ProfileCard.tsx | 7 +++--- src/routes/Feed/SearchInput.tsx | 5 ++-- src/routes/Feed/ServiceCard.tsx | 7 +++--- src/routes/Feed/TagList.tsx | 5 ++-- src/routes/Feed/index.tsx | 10 ++++---- src/styles/colors.ts | 10 ++++---- src/styles/media.ts | 2 +- src/styles/theme.ts | 1 + src/types/index.ts | 1 + 56 files changed, 205 insertions(+), 153 deletions(-) diff --git a/src/apis/notion-client/getPosts.ts b/src/apis/notion-client/getPosts.ts index a0fcd644d..c2bd3c075 100644 --- a/src/apis/notion-client/getPosts.ts +++ b/src/apis/notion-client/getPosts.ts @@ -1,10 +1,9 @@ -import { CONFIG } from "site.config" import { NotionAPI } from "notion-client" import { idToUuid } from "notion-utils" -import getAllPageIds from "src/libs/utils/notion/getAllPageIds" -import getPageProperties from "src/libs/utils/notion/getPageProperties" -import { TPosts } from "src/types" +import { getAllPageIds, getPageProperties } from "@/libs/utils/notion" +import { TPosts } from "@/types" +import { CONFIG } from "site.config" /** * @param {{ includePages: boolean }} - false: posts only / true: include pages diff --git a/src/components/Category/index.tsx b/src/components/Category/index.tsx index 579cf4acf..dd185e10b 100644 --- a/src/components/Category/index.tsx +++ b/src/components/Category/index.tsx @@ -1,8 +1,10 @@ +import styled from "@emotion/styled" import { useRouter } from "next/router" import React from "react" + +import { colors } from "@/styles" + import { COLOR_SET } from "./constants" -import styled from "@emotion/styled" -import { colors } from "src/styles" export const getColorClassByName = (name: string): string => { try { diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index 8dcf2f822..b8e970718 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -1,5 +1,5 @@ -import React, { ReactNode } from "react" import { Noto_Color_Emoji } from "next/font/google" +import { ReactNode } from "react" const notoColorEmoji = Noto_Color_Emoji({ weight: ["400"], diff --git a/src/components/MetaConfig/index.tsx b/src/components/MetaConfig/index.tsx index 6ac383975..2df658a98 100644 --- a/src/components/MetaConfig/index.tsx +++ b/src/components/MetaConfig/index.tsx @@ -1,6 +1,7 @@ -import { CONFIG } from "site.config" import Head from "next/head" +import { CONFIG } from "site.config" + export type MetaConfigProps = { title: string description: string diff --git a/src/hooks/useCategoriesQuery.ts b/src/hooks/useCategoriesQuery.ts index 26319b29a..fd46635dc 100644 --- a/src/hooks/useCategoriesQuery.ts +++ b/src/hooks/useCategoriesQuery.ts @@ -1,6 +1,7 @@ -import { DEFAULT_CATEGORY } from "src/constants" +import { DEFAULT_CATEGORY } from "@/constants" +import { getAllSelectItemsFromPosts } from "@/libs/utils/notion" + import usePostsQuery from "./usePostsQuery" -import { getAllSelectItemsFromPosts } from "src/libs/utils/notion" export const useCategoriesQuery = () => { const posts = usePostsQuery() diff --git a/src/hooks/useDropdown.ts b/src/hooks/useDropdown.ts index a82773e5c..e6a150f71 100644 --- a/src/hooks/useDropdown.ts +++ b/src/hooks/useDropdown.ts @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react' +import React, { useRef, useState } from "react" type useDropdownType = () => [ React.RefObject, @@ -7,7 +7,7 @@ type useDropdownType = () => [ ] function assertIsNode(e: EventTarget | null): asserts e is Node { - if (!e || !('nodeType' in e)) { + if (!e || !("nodeType" in e)) { throw new Error(`Node expected`) } } @@ -26,7 +26,7 @@ const useDropdown: useDropdownType = () => { const onOpenBtn = () => { setIsDropdownOpened(true) - window.addEventListener('click', handleClick) + window.addEventListener("click", handleClick) } return [menuRef, isDropdownOpened, onOpenBtn] diff --git a/src/hooks/usePostQuery.ts b/src/hooks/usePostQuery.ts index c396baf25..c2b62b325 100644 --- a/src/hooks/usePostQuery.ts +++ b/src/hooks/usePostQuery.ts @@ -1,7 +1,8 @@ import { useQuery } from "@tanstack/react-query" import { useRouter } from "next/router" -import { queryKey } from "src/constants/queryKey" -import { PostDetail } from "src/types" + +import { queryKey } from "@/constants/queryKey" +import { PostDetail } from "@/types" const usePostQuery = () => { const router = useRouter() diff --git a/src/hooks/usePostsQuery.ts b/src/hooks/usePostsQuery.ts index 37a04ae2b..4d2c48ffd 100644 --- a/src/hooks/usePostsQuery.ts +++ b/src/hooks/usePostsQuery.ts @@ -1,6 +1,7 @@ import { useQuery } from "@tanstack/react-query" -import { queryKey } from "src/constants/queryKey" -import { TPost } from "src/types" + +import { queryKey } from "@/constants/queryKey" +import { TPost } from "@/types" const usePostsQuery = () => { const { data } = useQuery({ diff --git a/src/hooks/useScheme.ts b/src/hooks/useScheme.ts index 461c6d45e..0aa76334e 100644 --- a/src/hooks/useScheme.ts +++ b/src/hooks/useScheme.ts @@ -1,7 +1,8 @@ import { useQuery, useQueryClient } from "@tanstack/react-query" import { getCookie, setCookie } from "cookies-next" import { useEffect } from "react" -import { queryKey } from "src/constants/queryKey" + +import { queryKey } from "@/constants/queryKey" type Scheme = "light" | "dark" type SetScheme = (scheme: Scheme) => void diff --git a/src/hooks/useTagsQuery.ts b/src/hooks/useTagsQuery.ts index 2535ec5e9..b40e85550 100644 --- a/src/hooks/useTagsQuery.ts +++ b/src/hooks/useTagsQuery.ts @@ -1,5 +1,6 @@ +import { getAllSelectItemsFromPosts } from "@/libs/utils/notion" + import usePostsQuery from "./usePostsQuery" -import { getAllSelectItemsFromPosts } from "src/libs/utils/notion" export const useTagsQuery = () => { const posts = usePostsQuery() diff --git a/src/layouts/RootLayout/Header/Logo.tsx b/src/layouts/RootLayout/Header/Logo.tsx index cc8a9b8a9..3d09ee2d2 100644 --- a/src/layouts/RootLayout/Header/Logo.tsx +++ b/src/layouts/RootLayout/Header/Logo.tsx @@ -1,6 +1,7 @@ +import styled from "@emotion/styled" import Link from "next/link" + import { CONFIG } from "site.config" -import styled from "@emotion/styled" const Logo = () => { return ( diff --git a/src/layouts/RootLayout/Header/ThemeToggle.tsx b/src/layouts/RootLayout/Header/ThemeToggle.tsx index 2e5701d41..a6389f4e1 100644 --- a/src/layouts/RootLayout/Header/ThemeToggle.tsx +++ b/src/layouts/RootLayout/Header/ThemeToggle.tsx @@ -1,7 +1,8 @@ import styled from "@emotion/styled" import React from "react" -import { Emoji } from "src/components/Emoji" -import useScheme from "src/hooks/useScheme" + +import { Emoji } from "@/components/Emoji" +import useScheme from "@/hooks/useScheme" type Props = {} diff --git a/src/layouts/RootLayout/Header/index.tsx b/src/layouts/RootLayout/Header/index.tsx index 16f93d90f..47938c744 100644 --- a/src/layouts/RootLayout/Header/index.tsx +++ b/src/layouts/RootLayout/Header/index.tsx @@ -1,8 +1,10 @@ -import NavBar from "./NavBar" +import styled from "@emotion/styled" + +import { zIndexes } from "@/styles/zIndexes" + import Logo from "./Logo" +import NavBar from "./NavBar" import ThemeToggle from "./ThemeToggle" -import styled from "@emotion/styled" -import { zIndexes } from "src/styles/zIndexes" type Props = { fullWidth: boolean diff --git a/src/layouts/RootLayout/Scripts.tsx b/src/layouts/RootLayout/Scripts.tsx index 80033abd0..ac2382dbc 100644 --- a/src/layouts/RootLayout/Scripts.tsx +++ b/src/layouts/RootLayout/Scripts.tsx @@ -1,4 +1,5 @@ import Script from "next/script" + import { CONFIG } from "site.config" const Scripts: React.FC = () => ( diff --git a/src/layouts/RootLayout/ThemeProvider/Global/index.tsx b/src/layouts/RootLayout/ThemeProvider/Global/index.tsx index 63c3cfe61..691d6ad41 100644 --- a/src/layouts/RootLayout/ThemeProvider/Global/index.tsx +++ b/src/layouts/RootLayout/ThemeProvider/Global/index.tsx @@ -1,7 +1,11 @@ -import { Global as _Global, css, useTheme } from "@emotion/react" +import { + Global as _Global, + ThemeProvider as _ThemeProvider, + css, + useTheme, +} from "@emotion/react" -import { ThemeProvider as _ThemeProvider } from "@emotion/react" -import { pretendard } from "src/assets" +import { pretendard } from "@/assets" export const Global = () => { const theme = useTheme() diff --git a/src/layouts/RootLayout/ThemeProvider/index.tsx b/src/layouts/RootLayout/ThemeProvider/index.tsx index 2306af594..e830bd340 100644 --- a/src/layouts/RootLayout/ThemeProvider/index.tsx +++ b/src/layouts/RootLayout/ThemeProvider/index.tsx @@ -1,6 +1,8 @@ import { ThemeProvider as _ThemeProvider } from "@emotion/react" + +import { createTheme } from "@/styles" + import { Global } from "./Global" -import { createTheme } from "src/styles" type Props = { scheme: string diff --git a/src/layouts/RootLayout/index.tsx b/src/layouts/RootLayout/index.tsx index da50df4aa..de4cfe512 100644 --- a/src/layouts/RootLayout/index.tsx +++ b/src/layouts/RootLayout/index.tsx @@ -1,9 +1,11 @@ -import React, { ReactNode } from "react" -import { ThemeProvider } from "./ThemeProvider" -import useScheme from "src/hooks/useScheme" -import Header from "./Header" import styled from "@emotion/styled" -import Scripts from "src/layouts/RootLayout/Scripts" +import { ReactNode } from "react" + +import useScheme from "@/hooks/useScheme" +import Scripts from "@/layouts/RootLayout/Scripts" + +import Header from "./Header" +import { ThemeProvider } from "./ThemeProvider" import useGtagEffect from "./useGtagEffect" type Props = { diff --git a/src/layouts/RootLayout/useGtagEffect.ts b/src/layouts/RootLayout/useGtagEffect.ts index 335db293e..3655c2627 100644 --- a/src/layouts/RootLayout/useGtagEffect.ts +++ b/src/layouts/RootLayout/useGtagEffect.ts @@ -1,6 +1,7 @@ -import { useEffect } from "react" import { useRouter } from "next/router" -import * as gtag from "src/libs/gtag" +import { useEffect } from "react" + +import * as gtag from "@/libs/gtag" import { CONFIG } from "site.config" const useGtagEffect = () => { diff --git a/src/libs/utils/notion/filterPosts.ts b/src/libs/utils/notion/filterPosts.ts index f13d200ac..17928fd58 100644 --- a/src/libs/utils/notion/filterPosts.ts +++ b/src/libs/utils/notion/filterPosts.ts @@ -1,4 +1,4 @@ -import { TPosts, TPostStatus, TPostType } from "src/types" +import { TPosts, TPostStatus, TPostType } from "@/types" export type FilterPostsOptions = { acceptStatus?: TPostStatus[] diff --git a/src/libs/utils/notion/getAllPageIds.ts b/src/libs/utils/notion/getAllPageIds.ts index 3946cf497..2eccc198f 100644 --- a/src/libs/utils/notion/getAllPageIds.ts +++ b/src/libs/utils/notion/getAllPageIds.ts @@ -1,10 +1,7 @@ -import { idToUuid } from "notion-utils" import { ExtendedRecordMap, ID } from "notion-types" +import { idToUuid } from "notion-utils" -export default function getAllPageIds( - response: ExtendedRecordMap, - viewId?: string -) { +export function getAllPageIds(response: ExtendedRecordMap, viewId?: string) { const collectionQuery = response.collection_query const views = Object.values(collectionQuery)[0] diff --git a/src/libs/utils/notion/getAllSelectItemsFromPosts.ts b/src/libs/utils/notion/getAllSelectItemsFromPosts.ts index 27fcddb1b..3f096284d 100644 --- a/src/libs/utils/notion/getAllSelectItemsFromPosts.ts +++ b/src/libs/utils/notion/getAllSelectItemsFromPosts.ts @@ -1,4 +1,4 @@ -import { TPosts } from "src/types" +import { TPosts } from "@/types" export function getAllSelectItemsFromPosts( key: "tags" | "category", diff --git a/src/libs/utils/notion/getMetadata.ts b/src/libs/utils/notion/getMetadata.ts index 15ebaccde..b51b56984 100644 --- a/src/libs/utils/notion/getMetadata.ts +++ b/src/libs/utils/notion/getMetadata.ts @@ -1,4 +1,4 @@ -export default function getMetadata(rawMetadata: any) { +export function getMetadata(rawMetadata: any) { const metadata = { locked: rawMetadata?.format?.block_locked, page_full_width: rawMetadata?.format?.page_full_width, diff --git a/src/libs/utils/notion/getPageProperties.ts b/src/libs/utils/notion/getPageProperties.ts index 20e2f74c5..a62fd0b55 100644 --- a/src/libs/utils/notion/getPageProperties.ts +++ b/src/libs/utils/notion/getPageProperties.ts @@ -1,9 +1,10 @@ -import { getTextContent, getDateValue } from "notion-utils" import { NotionAPI } from "notion-client" import { BlockMap, CollectionPropertySchemaMap } from "notion-types" +import { getDateValue, getTextContent } from "notion-utils" + import { customMapImageUrl } from "./customMapImageUrl" -async function getPageProperties( +export async function getPageProperties( id: string, block: BlockMap, schema: CollectionPropertySchemaMap @@ -81,5 +82,3 @@ async function getPageProperties( } return properties } - -export { getPageProperties as default } diff --git a/src/libs/utils/notion/index.ts b/src/libs/utils/notion/index.ts index b4e5a5d92..8fd978af7 100644 --- a/src/libs/utils/notion/index.ts +++ b/src/libs/utils/notion/index.ts @@ -1,2 +1,6 @@ +export { customMapImageUrl } from "./customMapImageUrl" +export { getAllPageIds } from "./getAllPageIds" export { getAllSelectItemsFromPosts } from "./getAllSelectItemsFromPosts" +export { getMetadata } from "./getMetadata" +export { getPageProperties } from "./getPageProperties" export { filterPosts } from "./filterPosts" diff --git a/src/pages/404.tsx b/src/pages/404.tsx index ddeeb7a78..b3ba1416b 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,7 +1,7 @@ -import { CONFIG } from "../../site.config" -import { NextPageWithLayout, TPosts, TTags } from "../types" -import CustomError from "../routes/Error" -import MetaConfig from "src/components/MetaConfig" +import MetaConfig from "@/components/MetaConfig" +import CustomError from "@/routes/Error" +import { NextPageWithLayout, TPosts, TTags } from "@/types" +import { CONFIG } from "site.config" type Props = { tags: TTags diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx index 26a181a4b..4709ac41e 100644 --- a/src/pages/[slug].tsx +++ b/src/pages/[slug].tsx @@ -1,16 +1,18 @@ -import Detail from "src/routes/Detail" -import { filterPosts } from "src/libs/utils/notion" -import { CONFIG } from "site.config" -import { NextPageWithLayout } from "../types" -import CustomError from "src/routes/Error" -import { getRecordMap, getPosts } from "src/apis" -import MetaConfig from "src/components/MetaConfig" import { GetStaticProps } from "next" -import { queryClient } from "src/libs/react-query" -import { queryKey } from "src/constants/queryKey" + import { dehydrate } from "@tanstack/react-query" -import usePostQuery from "src/hooks/usePostQuery" -import { FilterPostsOptions } from "src/libs/utils/notion/filterPosts" + +import { getPosts, getRecordMap } from "@/apis" +import MetaConfig from "@/components/MetaConfig" +import { queryKey } from "@/constants/queryKey" +import usePostQuery from "@/hooks/usePostQuery" +import { queryClient } from "@/libs/react-query" +import { filterPosts } from "@/libs/utils/notion" +import { FilterPostsOptions } from "@/libs/utils/notion/filterPosts" +import Detail from "@/routes/Detail" +import CustomError from "@/routes/Error" +import { NextPageWithLayout } from "@/types" +import { CONFIG } from "site.config" const filter: FilterPostsOptions = { acceptStatus: ["Public", "PublicOnDetail"], diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6caa8976d..bc184b5bc 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,9 @@ -import { AppPropsWithLayout } from "../types" import { Hydrate, QueryClientProvider } from "@tanstack/react-query" -import { RootLayout } from "src/layouts" -import { queryClient } from "src/libs/react-query" -import "src/styles/table.css" + +import { RootLayout } from "@/layouts" +import { queryClient } from "@/libs/react-query" +import { AppPropsWithLayout } from "@/types" +import "@/styles/table.css" function App({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page) diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index f85d377b2..ee60e6d9c 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,4 +1,5 @@ -import Document, { Html, Head, Main, NextScript } from "next/document" +import Document, { Head, Html, Main, NextScript } from "next/document" + import { CONFIG } from "site.config" class MyDocument extends Document { diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts index 4a5721a33..d757c66f9 100644 --- a/src/pages/api/revalidate.ts +++ b/src/pages/api/revalidate.ts @@ -1,4 +1,5 @@ import { NextApiRequest, NextApiResponse } from "next" + import { getPosts } from "../../apis" // for all path revalidate, https:///api/revalidate?secret= diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 328b466bf..24f20aba8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,15 @@ -import Feed from "src/routes/Feed" -import { CONFIG } from "../../site.config" -import { NextPageWithLayout } from "../types" -import { getPosts } from "../apis" -import MetaConfig from "src/components/MetaConfig" -import { queryClient } from "src/libs/react-query" -import { queryKey } from "src/constants/queryKey" import { GetStaticProps } from "next" + import { dehydrate } from "@tanstack/react-query" -import { filterPosts } from "src/libs/utils/notion" + +import { getPosts } from "@/apis" +import MetaConfig from "@/components/MetaConfig" +import { queryKey } from "@/constants/queryKey" +import { queryClient } from "@/libs/react-query" +import { filterPosts } from "@/libs/utils/notion" +import Feed from "@/routes/Feed" +import { NextPageWithLayout } from "@/types" +import { CONFIG } from "site.config" export const getStaticProps: GetStaticProps = async () => { const posts = filterPosts(await getPosts()) diff --git a/src/routes/Detail/PageDetail/index.tsx b/src/routes/Detail/PageDetail/index.tsx index 74fe5c612..52446d7c3 100644 --- a/src/routes/Detail/PageDetail/index.tsx +++ b/src/routes/Detail/PageDetail/index.tsx @@ -1,7 +1,9 @@ -import React from "react" import styled from "@emotion/styled" -import NotionRenderer from "../components/NotionRenderer" -import usePostQuery from "src/hooks/usePostQuery" +import React from "react" + +import usePostQuery from "@/hooks/usePostQuery" +import NotionRenderer from "@/routes/Detail/components/NotionRenderer" + type Props = {} const PageDetail: React.FC = () => { diff --git a/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx b/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx index daab573e4..6c4fa55e1 100644 --- a/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx +++ b/src/routes/Detail/PostDetail/CommentBox/Cusdis.tsx @@ -1,9 +1,10 @@ -import { CONFIG } from "site.config" -import { ReactCusdis } from "react-cusdis" -import { useCallback, useEffect, useState } from "react" import styled from "@emotion/styled" -import useScheme from "src/hooks/useScheme" import { useRouter } from "next/router" +import { useCallback, useEffect, useState } from "react" +import { ReactCusdis } from "react-cusdis" + +import useScheme from "@/hooks/useScheme" +import { CONFIG } from "site.config" type Props = { id: string diff --git a/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx b/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx index 6827f1d4f..64db09d9b 100644 --- a/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx +++ b/src/routes/Detail/PostDetail/CommentBox/Utterances.tsx @@ -1,8 +1,9 @@ -import { CONFIG } from "site.config" -import { useEffect } from "react" import styled from "@emotion/styled" -import useScheme from "src/hooks/useScheme" import { useRouter } from "next/router" +import { useEffect } from "react" + +import useScheme from "@/hooks/useScheme" +import { CONFIG } from "site.config" //TODO: useRef? diff --git a/src/routes/Detail/PostDetail/CommentBox/index.tsx b/src/routes/Detail/PostDetail/CommentBox/index.tsx index 3ae505e50..6ee685a29 100644 --- a/src/routes/Detail/PostDetail/CommentBox/index.tsx +++ b/src/routes/Detail/PostDetail/CommentBox/index.tsx @@ -1,7 +1,8 @@ -import { TPost } from "src/types" -import { CONFIG } from "site.config" import dynamic from "next/dynamic" +import { TPost } from "@/types" +import { CONFIG } from "site.config" + const UtterancesComponent = dynamic( () => { return import("./Utterances") diff --git a/src/routes/Detail/PostDetail/PostHeader.tsx b/src/routes/Detail/PostDetail/PostHeader.tsx index 85485f4c9..921bf6a9c 100644 --- a/src/routes/Detail/PostDetail/PostHeader.tsx +++ b/src/routes/Detail/PostDetail/PostHeader.tsx @@ -1,10 +1,11 @@ -import { CONFIG } from "site.config" -import Tag from "src/components/Tag" -import { TPost } from "src/types" -import { formatDate } from "src/libs/utils" +import styled from "@emotion/styled" import Image from "next/image" import React from "react" -import styled from "@emotion/styled" + +import Tag from "@/components/Tag" +import { formatDate } from "@/libs/utils" +import { TPost } from "@/types" +import { CONFIG } from "site.config" type Props = { data: TPost diff --git a/src/routes/Detail/PostDetail/index.tsx b/src/routes/Detail/PostDetail/index.tsx index b6a75e0de..3f75903d8 100644 --- a/src/routes/Detail/PostDetail/index.tsx +++ b/src/routes/Detail/PostDetail/index.tsx @@ -1,11 +1,13 @@ +import styled from "@emotion/styled" import React from "react" -import PostHeader from "./PostHeader" -import Footer from "./PostFooter" + +import Category from "@/components/Category" +import usePostQuery from "@/hooks/usePostQuery" +import NotionRenderer from "@/routes/Detail/components/NotionRenderer" + import CommentBox from "./CommentBox" -import Category from "src/components/Category" -import styled from "@emotion/styled" -import NotionRenderer from "../components/NotionRenderer" -import usePostQuery from "src/hooks/usePostQuery" +import Footer from "./PostFooter" +import PostHeader from "./PostHeader" type Props = {} diff --git a/src/routes/Detail/components/NotionRenderer/index.tsx b/src/routes/Detail/components/NotionRenderer/index.tsx index ce47d3a35..9f5e5340c 100644 --- a/src/routes/Detail/components/NotionRenderer/index.tsx +++ b/src/routes/Detail/components/NotionRenderer/index.tsx @@ -1,11 +1,14 @@ +import styled from "@emotion/styled" import dynamic from "next/dynamic" import Image from "next/image" import Link from "next/link" import { ExtendedRecordMap } from "notion-types" -import useScheme from "src/hooks/useScheme" +import { FC } from "react" + +import useScheme from "@/hooks/useScheme" // core styles shared by all of react-notion-x (required) -import "react-notion-x/src/styles.css" +import "react-notion-x/@/styles.css" // used for code syntax highlighting (optional) import "prismjs/themes/prism-tomorrow.css" @@ -13,8 +16,6 @@ import "prismjs/themes/prism-tomorrow.css" // used for rendering equations (optional) import "katex/dist/katex.min.css" -import { FC } from "react" -import styled from "@emotion/styled" const _NotionRenderer = dynamic( () => import("react-notion-x").then((m) => m.NotionRenderer), diff --git a/src/routes/Detail/hooks/useMermaidEffect.ts b/src/routes/Detail/hooks/useMermaidEffect.ts index b18840d0e..4e8453b8d 100644 --- a/src/routes/Detail/hooks/useMermaidEffect.ts +++ b/src/routes/Detail/hooks/useMermaidEffect.ts @@ -1,5 +1,5 @@ -import { useEffect } from "react" import mermaid from "mermaid" +import { useEffect } from "react" const useMermaidEffect = () => { useEffect(() => { diff --git a/src/routes/Detail/index.tsx b/src/routes/Detail/index.tsx index 45aebea5b..6c8d2b84c 100644 --- a/src/routes/Detail/index.tsx +++ b/src/routes/Detail/index.tsx @@ -1,8 +1,10 @@ -import useMermaidEffect from "./hooks/useMermaidEffect" -import PostDetail from "./PostDetail" -import PageDetail from "./PageDetail" import styled from "@emotion/styled" -import usePostQuery from "src/hooks/usePostQuery" + +import usePostQuery from "@/hooks/usePostQuery" +import useMermaidEffect from "@/routes/Detail/hooks/useMermaidEffect" + +import PageDetail from "./PageDetail" +import PostDetail from "./PostDetail" type Props = {} diff --git a/src/routes/Error/index.tsx b/src/routes/Error/index.tsx index 9e984db64..8e2e22d4b 100644 --- a/src/routes/Error/index.tsx +++ b/src/routes/Error/index.tsx @@ -1,6 +1,7 @@ import styled from "@emotion/styled" import React from "react" -import { Emoji } from "src/components/Emoji" + +import { Emoji } from "@/components/Emoji" type Props = {} diff --git a/src/routes/Feed/ContactCard.tsx b/src/routes/Feed/ContactCard.tsx index 4718f6621..cd27e647c 100644 --- a/src/routes/Feed/ContactCard.tsx +++ b/src/routes/Feed/ContactCard.tsx @@ -1,12 +1,13 @@ -import { CONFIG } from "site.config" +import styled from "@emotion/styled" import React from "react" import { - AiOutlineInstagram, + AiFillLinkedin, AiOutlineGithub, + AiOutlineInstagram, AiOutlineMail, - AiFillLinkedin, } from "react-icons/ai" -import styled from "@emotion/styled" + +import { CONFIG } from "site.config" const ContactCard: React.FC = () => { return ( diff --git a/src/routes/Feed/FeedHeader/CategorySelect.tsx b/src/routes/Feed/FeedHeader/CategorySelect.tsx index f51d49c2d..31d74b608 100644 --- a/src/routes/Feed/FeedHeader/CategorySelect.tsx +++ b/src/routes/Feed/FeedHeader/CategorySelect.tsx @@ -1,10 +1,11 @@ -import useDropdown from "src/hooks/useDropdown" +import styled from "@emotion/styled" import { useRouter } from "next/router" import React from "react" import { MdExpandMore } from "react-icons/md" -import { DEFAULT_CATEGORY } from "src/constants" -import styled from "@emotion/styled" -import { useCategoriesQuery } from "src/hooks/useCategoriesQuery" + +import { DEFAULT_CATEGORY } from "@/constants" +import { useCategoriesQuery } from "@/hooks/useCategoriesQuery" +import useDropdown from "@/hooks/useDropdown" type Props = {} diff --git a/src/routes/Feed/FeedHeader/FeedHeader.tsx b/src/routes/Feed/FeedHeader/FeedHeader.tsx index 97e1c584a..f7eb09d99 100644 --- a/src/routes/Feed/FeedHeader/FeedHeader.tsx +++ b/src/routes/Feed/FeedHeader/FeedHeader.tsx @@ -1,8 +1,8 @@ -import { TCategories } from "src/types" +import styled from "@emotion/styled" import React from "react" + import CategorySelect from "./CategorySelect" import OrderButtons from "./OrderButtons" -import styled from "@emotion/styled" type Props = {} diff --git a/src/routes/Feed/Footer.tsx b/src/routes/Feed/Footer.tsx index e6feac6ba..2547a7ed2 100644 --- a/src/routes/Feed/Footer.tsx +++ b/src/routes/Feed/Footer.tsx @@ -1,6 +1,7 @@ -import { CONFIG } from "site.config" -import React from "react" import styled from "@emotion/styled" +import React from "react" + +import { CONFIG } from "site.config" const d = new Date() const y = d.getFullYear() diff --git a/src/routes/Feed/MobileProfileCard.tsx b/src/routes/Feed/MobileProfileCard.tsx index 8c5f3c034..8af621809 100644 --- a/src/routes/Feed/MobileProfileCard.tsx +++ b/src/routes/Feed/MobileProfileCard.tsx @@ -1,7 +1,8 @@ -import { CONFIG } from "site.config" +import styled from "@emotion/styled" import Image from "next/image" import React from "react" -import styled from "@emotion/styled" + +import { CONFIG } from "site.config" type Props = { className?: string diff --git a/src/routes/Feed/PostList/PostCard.tsx b/src/routes/Feed/PostList/PostCard.tsx index ec96b1767..261458b38 100644 --- a/src/routes/Feed/PostList/PostCard.tsx +++ b/src/routes/Feed/PostList/PostCard.tsx @@ -1,11 +1,12 @@ +import styled from "@emotion/styled" +import Image from "next/image" import Link from "next/link" + +import Category from "@/components/Category" +import Tag from "@/components/Tag" +import { formatDate } from "@/libs/utils" +import { TPost } from "@/types" import { CONFIG } from "site.config" -import { formatDate } from "src/libs/utils" -import Tag from "../../../components/Tag" -import { TPost } from "../../../types" -import Image from "next/image" -import Category from "../../../components/Category" -import styled from "@emotion/styled" type Props = { data: TPost diff --git a/src/routes/Feed/PostList/index.tsx b/src/routes/Feed/PostList/index.tsx index 45c069966..487c808f4 100644 --- a/src/routes/Feed/PostList/index.tsx +++ b/src/routes/Feed/PostList/index.tsx @@ -1,8 +1,9 @@ import { useRouter } from "next/router" import React, { useEffect, useState } from "react" -import PostCard from "src/routes/Feed/PostList/PostCard" -import { DEFAULT_CATEGORY } from "src/constants" -import usePostsQuery from "src/hooks/usePostsQuery" + +import { DEFAULT_CATEGORY } from "@/constants" +import usePostsQuery from "@/hooks/usePostsQuery" +import PostCard from "@/routes/Feed/PostList/PostCard" type Props = { q: string diff --git a/src/routes/Feed/ProfileCard.tsx b/src/routes/Feed/ProfileCard.tsx index 22791fccb..7f19450fa 100644 --- a/src/routes/Feed/ProfileCard.tsx +++ b/src/routes/Feed/ProfileCard.tsx @@ -1,8 +1,9 @@ -import { CONFIG } from "site.config" +import styled from "@emotion/styled" import Image from "next/image" import React from "react" -import styled from "@emotion/styled" -import { Emoji } from "src/components/Emoji" + +import { Emoji } from "@/components/Emoji" +import { CONFIG } from "site.config" type Props = {} diff --git a/src/routes/Feed/SearchInput.tsx b/src/routes/Feed/SearchInput.tsx index 71413dbf8..b156fac0c 100644 --- a/src/routes/Feed/SearchInput.tsx +++ b/src/routes/Feed/SearchInput.tsx @@ -1,6 +1,7 @@ import styled from "@emotion/styled" -import React, { InputHTMLAttributes, ReactNode } from "react" -import { Emoji } from "src/components/Emoji" +import React, { InputHTMLAttributes } from "react" + +import { Emoji } from "@/components/Emoji" interface Props extends InputHTMLAttributes {} diff --git a/src/routes/Feed/ServiceCard.tsx b/src/routes/Feed/ServiceCard.tsx index c2171b25e..af7f8738b 100644 --- a/src/routes/Feed/ServiceCard.tsx +++ b/src/routes/Feed/ServiceCard.tsx @@ -1,8 +1,9 @@ -import { CONFIG } from "site.config" +import styled from "@emotion/styled" import React from "react" import { AiFillCodeSandboxCircle } from "react-icons/ai" -import styled from "@emotion/styled" -import { Emoji } from "src/components/Emoji" + +import { Emoji } from "@/components/Emoji" +import { CONFIG } from "site.config" const ServiceCard: React.FC = () => { if (!CONFIG.projects) return null diff --git a/src/routes/Feed/TagList.tsx b/src/routes/Feed/TagList.tsx index 5b01dfe8d..537088493 100644 --- a/src/routes/Feed/TagList.tsx +++ b/src/routes/Feed/TagList.tsx @@ -1,8 +1,9 @@ import styled from "@emotion/styled" import { useRouter } from "next/router" import React from "react" -import { Emoji } from "src/components/Emoji" -import { useTagsQuery } from "src/hooks/useTagsQuery" + +import { Emoji } from "@/components/Emoji" +import { useTagsQuery } from "@/hooks/useTagsQuery" type Props = {} diff --git a/src/routes/Feed/index.tsx b/src/routes/Feed/index.tsx index bfa4fa6da..87523c37c 100644 --- a/src/routes/Feed/index.tsx +++ b/src/routes/Feed/index.tsx @@ -1,15 +1,15 @@ +import styled from "@emotion/styled" import { useState } from "react" -import SearchInput from "./SearchInput" +import ContactCard from "./ContactCard" import { FeedHeader } from "./FeedHeader" import Footer from "./Footer" -import styled from "@emotion/styled" -import TagList from "./TagList" import MobileProfileCard from "./MobileProfileCard" +import PostList from "./PostList" import ProfileCard from "./ProfileCard" +import SearchInput from "./SearchInput" import ServiceCard from "./ServiceCard" -import ContactCard from "./ContactCard" -import PostList from "./PostList" +import TagList from "./TagList" const HEADER_HEIGHT = 73 diff --git a/src/styles/colors.ts b/src/styles/colors.ts index 4dfbce217..9eeb92167 100644 --- a/src/styles/colors.ts +++ b/src/styles/colors.ts @@ -1,14 +1,14 @@ import { - gray, blue, - red, - green, - grayDark, blueDark, - redDark, + gray, + grayDark, + green, greenDark, indigo, indigoDark, + red, + redDark, } from "@radix-ui/colors" export type Colors = typeof colors.light & typeof colors.dark diff --git a/src/styles/media.ts b/src/styles/media.ts index d6e7a0b13..8b96acb0d 100644 --- a/src/styles/media.ts +++ b/src/styles/media.ts @@ -1,3 +1,3 @@ -import { variables } from './variables' +import { variables } from "./variables" export const respondMobile = `@media (max-width: ${variables.breakpoint}px)` diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 8b0a60515..48b633a58 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,4 +1,5 @@ import { Theme } from "@emotion/react" + import { Colors, colors } from "./colors" import { variables } from "./variables" import { zIndexes } from "./zIndexes" diff --git a/src/types/index.ts b/src/types/index.ts index 859d08318..d78d63dc5 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,4 +1,5 @@ import { NextPage } from "next" + import { AppProps } from "next/app" import { ExtendedRecordMap } from "notion-types" import { ReactElement, ReactNode } from "react" From d567724d590568f3bd9a676befb337cb8973df27 Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Tue, 21 Nov 2023 14:56:45 +0900 Subject: [PATCH 5/6] fix: remove table style --- src/pages/_app.tsx | 1 - src/styles/table.css | 44 -------------------------------------------- 2 files changed, 45 deletions(-) delete mode 100644 src/styles/table.css diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bc184b5bc..4bc460682 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,7 +3,6 @@ import { Hydrate, QueryClientProvider } from "@tanstack/react-query" import { RootLayout } from "@/layouts" import { queryClient } from "@/libs/react-query" import { AppPropsWithLayout } from "@/types" -import "@/styles/table.css" function App({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page) diff --git a/src/styles/table.css b/src/styles/table.css deleted file mode 100644 index 729757113..000000000 --- a/src/styles/table.css +++ /dev/null @@ -1,44 +0,0 @@ -.notion-table-of-contents { - position: fixed; - right: -75%; - top: 80px; - display: flex; - flex-direction: column; -} - -@media screen and (max-width: 1800px) { - .notion-table-of-contents { - right: -80%; - } -} - -@media screen and (max-width: 1500px) { - .notion-table-of-contents { - position: static; - } -} - -.notion-table-of-contents a { - padding: 0; - margin-bottom: 10px; -} - -.notion-table-of-contents a:hover { - background: none; -} - -.notion-table-of-contents span { - padding: 2px 2px; - line-height: 1.3; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0) 50%, - var(--bg-color-0) 50% - ); - background-size: 200%; - transition: 0.35s; -} - -.notion-table-of-contents span:hover { - background-position: -100% 0; -} From 33df1bce452f8199e9f9e1480d628129edb70913 Mon Sep 17 00:00:00 2001 From: yoosion030 Date: Mon, 18 Dec 2023 07:35:00 +0900 Subject: [PATCH 6/6] fix: update react-notion-x path --- src/routes/Detail/components/NotionRenderer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Detail/components/NotionRenderer/index.tsx b/src/routes/Detail/components/NotionRenderer/index.tsx index 9f5e5340c..4c8492cbe 100644 --- a/src/routes/Detail/components/NotionRenderer/index.tsx +++ b/src/routes/Detail/components/NotionRenderer/index.tsx @@ -8,7 +8,7 @@ import { FC } from "react" import useScheme from "@/hooks/useScheme" // core styles shared by all of react-notion-x (required) -import "react-notion-x/@/styles.css" +import "react-notion-x/src/styles.css" // used for code syntax highlighting (optional) import "prismjs/themes/prism-tomorrow.css"