feat: notelayout and toc

Signed-off-by: Innei <tukon479@gmail.com>

next.config.mts

@@ -1,6 +1,7 @@
 import { config } from 'dotenv'
 import type { NextConfig } from 'next'
 
+import NextBundleAnalyzer from '@next/bundle-analyzer'
 import { withSentryConfig } from '@sentry/nextjs'
 import { sentryWebpackPlugin } from '@sentry/webpack-plugin'
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin'
@@ -79,5 +80,10 @@ if (process.env.SENTRY === 'true' && isProd) {
 }
 
 nextConfig = withVanillaExtract(nextConfig)
+if (process.env.ANALYZE === 'true') {
+ nextConfig = NextBundleAnalyzer({
+ enabled: true,
+ })(nextConfig)
+}
 
 export default nextConfig

package.json

@@ -22,9 +22,6 @@
  "*.{js,jsx,ts,tsx}": [
  "eslint --cache --fix",
  "prettier --ignore-path ./.gitignore --write "
- ],
- "config.init.yaml": [
- "npm run gen-config && git add src/configs.default.ts"
  ]
  },
  "scripts": {
@@ -41,8 +38,7 @@
  "prod:reload": "pm2 reload ecosystem.config.js"
  },
  "browserslist": [
- "chrome >=94",
- "safari >=14",
+ "chrome >=110",
  "last 2 Firefox versions"
  ],
  "dependencies": {
@@ -68,6 +64,7 @@
  "lodash-es": "4.17.21",
  "markdown-escape": "2.0.0",
  "markdown-to-jsx": "npm:@innei/markdown-to-jsx@7.1.3-beta.2",
+ "mdast-util-toc": "6.1.1",
  "next": "13.4.5",
  "next-themes": "0.2.1",
  "react": "18.2.0",
@@ -103,6 +100,7 @@
  "validator": "13.9.0"
  },
  "devDependencies": {
+ "@iconify-json/material-symbols": "1.1.47",
  "@iconify-json/mingcute": "1.1.6",
  "@iconify/tailwind": "0.1.3",
  "@innei/eslint-config-react-ts": "0.10.1",
@@ -135,6 +133,7 @@
  "postcss-prune-var": "1.1.1",
  "prettier": "2.8.8",
  "rimraf": "5.0.1",
+ "tailwind-scrollbar": "3.0.4",
  "tailwind-variants": "0.1.6",
  "tailwindcss": "^3.3.2",
  "tailwindcss-variable-colors": "0.0.1",

src/app/notes/[id]/layout.tsx

@@ -27,6 +27,6 @@ export default async (
  id: string
  }>,
 ) => {
- await getQueryClient().fetchQuery(queries.note.byNid(props.params.id))
+ await getQueryClient().prefetchQuery(queries.note.byNid(props.params.id))
  return <>{props.children}</>
 }

src/app/notes/[id]/page.tsx

@@ -1,39 +1,28 @@
 'use client'
 
 import { useParams } from 'next/navigation'
-import type { UseQueryResult } from '@tanstack/react-query'
-import type { FC } from 'react'
 
-import { Loading } from '~/components/ui/loading'
+import { Toc } from '~/components/widgets/toc'
 import { useNoteByNidQuery } from '~/hooks/data/use-note'
+import { PageDataHolder } from '~/lib/page-holder'
+import { NoteLayoutRightSidePortal } from '~/providers/note/right-side-provider'
 import { parseMarkdown } from '~/remark'
 
-const LoadingComponent = () => <Loading />
-const PageDataHolder = (
- PageImpl: FC<any>,
- useQuery: () => UseQueryResult<any>,
-) => {
- const Component: FC = (props) => {
- const { data, isLoading } = useQuery()
-
- if (isLoading || data === null) {
- return <LoadingComponent />
- }
- return <PageImpl {...props} />
- }
- return Component
-}
-
 const PageImpl = () => {
  const { id } = useParams() as { id: string }
  const { data } = useNoteByNidQuery(id)
 
+ const mardownResult = parseMarkdown(data?.data?.text ?? '')
+
  return (
  <article className="prose">
  <header>
  <h1>{data?.data?.title}</h1>
  </header>
- {parseMarkdown(data?.data?.text || ' ').result}
+ {mardownResult.jsx}
+ <NoteLayoutRightSidePortal>
+ <Toc toc={mardownResult.toc} className="sticky top-20 mt-20" />
+ </NoteLayoutRightSidePortal>
  </article>
  )
 }

src/app/notes/layout.tsx

@@ -1,16 +1,26 @@
 import type { PropsWithChildren } from 'react'
 
 import { NoteTimelineSidebar } from '~/components/widgets/note/NoteTimelineSidebar'
+import { NoteLayoutRightSideProvider } from '~/providers/note/right-side-provider'
+import { clsxm } from '~/utils/helper'
 
 export default async (props: PropsWithChildren) => {
  return (
- <div className="relative mx-auto grid min-h-screen max-w-[50rem] gap-4 md:grid-cols-1 lg:max-w-[calc(50rem+400px)] lg:grid-cols-[1fr_minmax(auto,50rem)_1fr]">
- <NoteTimelineSidebar className="hidden lg:block" />
+ <div
+ className={clsxm(
+ 'relative mx-auto grid min-h-screen max-w-[50rem]',
+ 'gap-4 md:grid-cols-1 lg:max-w-[calc(50rem+400px)] lg:grid-cols-[1fr_minmax(auto,50rem)_1fr]',
+ 'mt-24',
+ )}
+ >
+ <NoteTimelineSidebar className="relative hidden lg:block" />
 
  <div className="relative md:col-start-1 lg:col-auto">
  {props.children}
  </div>
- <div className="hidden lg:block" />
+ <div className="hidden lg:block">
+ <NoteLayoutRightSideProvider />
+ </div>
  </div>
  )
 }