Skip to content

Commit cfc84ec

Browse files
ogiosogios
committed
what?
1 parent 63b4e35 commit cfc84ec

21 files changed

+238
-105
lines changed

‎bun.lockb

379 Bytes
Binary file not shown.

‎data/compile.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,8 @@ function main() {
169169

170170
writeJsonSync(META_PATH, roots)
171171

172-
// backup_clean_app_page()
172+
backup_clean_app_page()
173+
173174
function traverse_roots(roots: DocMeta[]) {
174175
roots.forEach((r) => {
175176
create_page(r)

‎next.config.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
output: 'export',
4+
reactStrictMode: false,
45
}
56

67
export default nextConfig

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@artsy/fresnel": "^7.1.4",
1213
"@radix-ui/react-dialog": "^1.1.1",
1314
"@radix-ui/react-icons": "^1.3.0",
1415
"@uiw/react-markdown-preview": "^5.1.2",

‎src/app/description/page.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import { get_file_under_data } from '@/lib/local_util'
3+
import MarkdownContent from '@/widgets/md/md_content'
4+
import { readFileSync } from 'fs'
5+
import '@/app/md.css'
6+
7+
export default async function Page() {
8+
const path = get_file_under_data('/doc/0.description.md')
9+
const content = readFileSync(path).toString()
10+
return (
11+
<main id="markdown-content">
12+
<MarkdownContent content={content} />
13+
</main>
14+
)
15+
}

‎src/app/installation/page.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import { get_file_under_data } from '@/lib/local_util'
3+
import MarkdownContent from '@/widgets/md/md_content'
4+
import { readFileSync } from 'fs'
5+
import '@/app/md.css'
6+
7+
export default async function Page() {
8+
const path = get_file_under_data('/doc/1.installation.md')
9+
const content = readFileSync(path).toString()
10+
return (
11+
<main id="markdown-content">
12+
<MarkdownContent content={content} />
13+
</main>
14+
)
15+
}

‎src/app/layout.tsx

+6-14
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import './globals.css'
22
import './root.css'
33
import type { Metadata } from 'next'
44
import { Inter } from 'next/font/google'
5-
import { ThemeProvider } from '@/components/theme-provider'
65
import { TocCurrentPosProvider } from '@/widgets/toc/TocState'
7-
import Navi from '@/widgets/navi/Navi'
8-
import MainContent from '@/widgets/main/main'
9-
import Footer from '@/widgets/footer/footer'
10-
import { WindowSizeProvider } from '@/components/window-size-provider'
116
import { getMeta } from './cache'
7+
import RootHead from '@/components/root_head'
8+
import Root from '@/components/root'
129

1310
const inter = Inter({ subsets: ['latin'] })
1411

@@ -25,17 +22,12 @@ export default function RootLayout({
2522
const res = getMeta()
2623
return (
2724
<html lang="en" suppressHydrationWarning>
25+
<RootHead />
2826
<body className={inter.className}>
2927
<div id="root">
30-
<ThemeProvider attribute="class" defaultTheme="system" storageKey="vite-ui-theme">
31-
<TocCurrentPosProvider meta={res}>
32-
<WindowSizeProvider>
33-
<Navi />
34-
<MainContent>{children}</MainContent>
35-
<Footer />
36-
</WindowSizeProvider>
37-
</TocCurrentPosProvider>
38-
</ThemeProvider>
28+
<TocCurrentPosProvider meta={res}>
29+
<Root>{children}</Root>
30+
</TocCurrentPosProvider>
3931
</div>
4032
</body>
4133
</html>

‎src/app/root.css

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ body {
1111
-webkit-font-smoothing: antialiased;
1212
-moz-osx-font-smoothing: grayscale;
1313

14+
transition: background-color 0s !important;
15+
1416
@apply overflow-visible !h-full m-0;
1517
}
1618

‎src/app/widgets/button/page.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
2+
import { get_file_under_data } from '@/lib/local_util'
3+
import MarkdownContent from '@/widgets/md/md_content'
4+
import { readFileSync } from 'fs'
5+
import '@/app/md.css'
6+
7+
export default async function Page() {
8+
const path = get_file_under_data('/doc/2.widgets/0.button.md')
9+
const content = readFileSync(path).toString()
10+
return (
11+
<main id="markdown-content">
12+
<MarkdownContent content={content} />
13+
</main>
14+
)
15+
}

‎src/app/test-doc/page.tsx ‎src/app/widgets/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
import { get_file_under_data } from '@/lib/local_util'
23
import MarkdownContent from '@/widgets/md/md_content'
34
import { readFileSync } from 'fs'

‎src/components/media.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { createMedia } from '@artsy/fresnel'
2+
3+
const ExampleAppMedia = createMedia({
4+
breakpoints: {
5+
xs: 0,
6+
sm: 768,
7+
md: 1000,
8+
lg: 1200,
9+
},
10+
})
11+
12+
// Make styles for injection into the header of the page
13+
export const mediaStyles = ExampleAppMedia.createMediaStyle()
14+
15+
export const { Media, MediaContextProvider } = ExampleAppMedia

‎src/components/root.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use client'
2+
3+
import Navi from '@/widgets/navi/Navi'
4+
import { MediaContextProvider } from './media'
5+
import React from 'react'
6+
import MainContent from '@/widgets/main/main'
7+
import Footer from '@/widgets/footer/footer'
8+
import { ThemeProvider } from './theme-provider'
9+
10+
function Root({ children }: { children: React.ReactNode }) {
11+
return (
12+
<ThemeProvider attribute="class" defaultTheme="system" storageKey="vite-ui-theme">
13+
<MediaContextProvider>
14+
<Navi />
15+
<MainContent>{children}</MainContent>
16+
<Footer />
17+
</MediaContextProvider>
18+
</ThemeProvider>
19+
)
20+
}
21+
22+
export default Root

‎src/components/root_head.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client'
2+
3+
import React from 'react'
4+
import { mediaStyles } from './media'
5+
6+
function RootHead() {
7+
return (
8+
<head>
9+
<style key="fresnel-css" dangerouslySetInnerHTML={{ __html: mediaStyles }} type="text/css" />
10+
</head>
11+
)
12+
}
13+
14+
export default RootHead

‎src/components/ui/skeleton.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { cn } from "@/lib/utils"
2+
3+
function Skeleton({
4+
className,
5+
...props
6+
}: React.HTMLAttributes<HTMLDivElement>) {
7+
return (
8+
<div
9+
className={cn("animate-pulse rounded-md bg-primary/10", className)}
10+
{...props}
11+
/>
12+
)
13+
}
14+
15+
export { Skeleton }

‎src/widgets/main/main.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
'use client'
22

3-
import { useWindowSize } from '@/components/window-size-provider'
3+
import { Media } from '@/components/media'
4+
45
import SidePane from './sidepane/SidePane'
56

67
export default function MainContent({ children }: { children: React.ReactNode }) {
7-
const is_over_lg = useWindowSize()
88
return (
99
<div className="flex flex-row " style={{ flex: '1 0 auto' }}>
10-
{is_over_lg && <SidePane />}
10+
<Media greaterThanOrEqual="md">
11+
<SidePane />
12+
</Media>
1113
{children}
1214
</div>
1315
)

‎src/widgets/md/md_content.tsx

+42-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
11
'use client'
2-
import { memo } from 'react'
2+
3+
import { memo, useEffect, useState } from 'react'
34
import MarkdownPreview from '@uiw/react-markdown-preview'
45
import { useTheme } from 'next-themes'
6+
import Markdown from 'react-markdown'
57

68
interface MarkdownInfo {
79
content: string
810
}
911

12+
import { Skeleton } from '@/components/ui/skeleton'
1013
const MarkdownContent = memo(({ content }: MarkdownInfo) => {
1114
const { theme } = useTheme()
12-
return (
13-
<MarkdownPreview
14-
source={content}
15-
// @ts-ignore
16-
// ignore theme variable type (it's sould only be dark or light)
17-
wrapperElement={{ 'data-color-mode': theme }}
18-
style={{ minHeight: '100%', padding: 30, background: 'none' }}
19-
/>
20-
)
15+
16+
// this related to error with `MarkdownPreview`
17+
// server render and client render theme can always be different, which result in error
18+
const [mounted, on_mounted] = useState(false)
19+
20+
useEffect(() => {
21+
on_mounted(true)
22+
}, [])
23+
24+
if (mounted) {
25+
return (
26+
<MarkdownPreview
27+
source={content}
28+
// @ts-ignore
29+
// ignore theme variable type (it's sould only be dark or light)
30+
wrapperElement={{ 'data-color-mode': theme }}
31+
style={{ minHeight: '100%', padding: 30, background: 'none' }}
32+
/>
33+
)
34+
} else {
35+
return (
36+
<>
37+
{/* make sure content text is pre-rendered no matter what the style is */}
38+
<div className="hidden">
39+
<Markdown>{content}</Markdown>
40+
</div>
41+
42+
{/* skeleton */}
43+
<div className="flex flex-col space-y-3 p-5">
44+
<Skeleton className="h-[125px] w-full rounded-xl" />
45+
<div className="space-y-2">
46+
<Skeleton className="h-4 w-[75%]" />
47+
<Skeleton className="h-4 w-[50%]" />
48+
</div>
49+
</div>
50+
</>
51+
)
52+
}
2153
})
2254

2355
MarkdownContent.displayName = 'MarkdownContent'

‎src/widgets/navi/Navi.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,25 @@
33
import './navi.css'
44
import { Contact, MenuDrawer } from './common'
55
import { ModeToggle } from '@/components/theme-provider'
6-
import { useWindowSize } from '@/components/window-size-provider'
76
import { memo } from 'react'
7+
import { Media } from '@/components/media'
88

99
/// Header navigation
1010
const Navi = memo(() => {
11-
const is_over_md = useWindowSize()
12-
1311
const left = (
1412
<>
15-
{is_over_md || <MenuDrawer></MenuDrawer>}
16-
{<h1 className="font-bold text-lg">💻 Way-Edges</h1>}
13+
<Media lessThan="md">
14+
<MenuDrawer></MenuDrawer>
15+
</Media>
16+
<h1 className="font-bold text-lg">💻 Way-Edges</h1>
1717
</>
1818
)
1919

2020
const right = (
2121
<>
22-
{is_over_md && <Contact></Contact>}
22+
<Media greaterThanOrEqual="md">
23+
<Contact></Contact>
24+
</Media>
2325
<ModeToggle></ModeToggle>
2426
</>
2527
)

‎src/widgets/navi/common.tsx

+15-29
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { memo, useEffect, useState } from 'react'
1+
import { memo } from 'react'
22
import Toc from '../toc/Toc'
33

44
import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer'
@@ -8,35 +8,21 @@ import { GitHubLogoIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
88
/// left side drawer
99

1010
export const MenuDrawer = memo(() => {
11-
const [is_mounted, mounted] = useState(false)
12-
13-
useEffect(() => {
14-
mounted(true)
15-
}, [])
16-
17-
const toc_contnet = (
18-
<div className="h-full w-[70vw] z-200">
19-
<Toc />
20-
</div>
11+
return (
12+
<Drawer direction="left">
13+
<DrawerTrigger className="mr-3" data-state="open" asChild>
14+
<Button variant="outline" size="icon">
15+
<HamburgerMenuIcon color="#666" width={20} height={20}></HamburgerMenuIcon>
16+
</Button>
17+
</DrawerTrigger>
18+
<DrawerContent className="z-200">
19+
<DrawerTitle></DrawerTitle>
20+
<div className="h-full w-[70vw] z-200">
21+
<Toc />
22+
</div>
23+
</DrawerContent>
24+
</Drawer>
2125
)
22-
23-
if (is_mounted) {
24-
return (
25-
<Drawer direction="left">
26-
<DrawerTrigger className="mr-3" data-state="open" asChild>
27-
<Button variant="outline" size="icon">
28-
<HamburgerMenuIcon color="#666" width={20} height={20}></HamburgerMenuIcon>
29-
</Button>
30-
</DrawerTrigger>
31-
<DrawerContent className="z-200">
32-
<DrawerTitle></DrawerTitle>
33-
{toc_contnet}
34-
</DrawerContent>
35-
</Drawer>
36-
)
37-
} else {
38-
return <div className="hidden">{toc_contnet}</div>
39-
}
4026
})
4127
MenuDrawer.displayName = 'MenuDrawer'
4228

‎src/widgets/toc/Toc.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import { useGlobalTocContext } from './TocState'
66
import { Collapse } from './common'
77

88
const Toc = memo(() => {
9-
const { data, set_pos } = useGlobalTocContext()
9+
const { data } = useGlobalTocContext()
10+
11+
console.log('render toc', data)
1012

1113
const contents = data.root_items.map((c, i_content) => {
12-
return <Collapse key={i_content} content={c} index={i_content} set_pos={set_pos!} />
14+
return <Collapse key={i_content} content={c} index={i_content} />
1315
})
1416

1517
return <div className="w-full p-2">{contents}</div>

0 commit comments

Comments
 (0)