Skip to content

Commit 0ccea17

Browse files
owjs3901owjs3901
committed
Implement right index
1 parent 43dcd14 commit 0ccea17

File tree

9 files changed

+723
-89
lines changed

9 files changed

+723
-89
lines changed

‎apps/landing/devup.json‎

Lines changed: 500 additions & 1 deletion
Large diffs are not rendered by default.

‎apps/landing/src/app/(detail)/docs/RightIndex.tsx‎

Lines changed: 101 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,115 @@
1-
import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
1+
'use client'
2+
import { Box, css, Flex, Text, VStack } from '@devup-ui/react'
3+
import Link from 'next/link'
4+
import { usePathname } from 'next/navigation'
5+
import { useEffect, useState } from 'react'
26

3-
import { URL_PREFIX } from '../../../constants'
7+
function IndexMenu({
8+
children,
9+
selected,
10+
sub,
11+
onClick,
12+
}: {
13+
children: React.ReactNode
14+
selected?: boolean
15+
sub?: boolean
16+
onClick?: () => void
17+
}) {
18+
return (
19+
<Flex
20+
alignItems="center"
21+
cursor="pointer"
22+
gap="10px"
23+
onClick={onClick}
24+
p={sub ? '4px 10px 4px 30px' : '4px 10px'}
25+
role="group"
26+
>
27+
{selected && <Box bg="$primary" borderRadius="50%" boxSize="6px" />}
28+
<Text
29+
_groupHover={{ opacity: '0.8' }}
30+
color={selected ? '$primary' : '$text'}
31+
flex="1"
32+
opacity={selected ? '0.8' : '0.6'}
33+
typography="captionBold"
34+
>
35+
{children}
36+
</Text>
37+
</Flex>
38+
)
39+
}
440

541
export function RightIndex() {
42+
const pathname = usePathname()
43+
const editUrl = `https://github.com/dev-five-git/devup-ui/tree/main/apps/landing/src/app/(detail)/docs${pathname.split('docs')[1]}/page.mdx`
44+
const [menus, setMenus] = useState<
45+
{
46+
text: string
47+
sub?: boolean
48+
onClick?: () => void
49+
}[]
50+
>([])
51+
useEffect(() => {
52+
const elements = document.querySelectorAll(
53+
'.markdown-body h1, .markdown-body h2',
54+
)
55+
const menus = []
56+
for (let i = 0; i < elements.length; i++) {
57+
const element = elements[i]
58+
const text = element.textContent!
59+
menus.push({
60+
text,
61+
sub: element.tagName === 'H2',
62+
onClick: () => {
63+
element.scrollIntoView({ behavior: 'smooth' })
64+
},
65+
})
66+
}
67+
setMenus(menus)
68+
}, [pathname])
69+
670
return (
7-
<VStack gap="16px" p="20px 16px" w="200px">
71+
<VStack gap="16px" h="1008px" p="20px 16px" w="200px">
872
<VStack>
9-
<Flex alignItems="center" gap="10px" p="6px 0px">
73+
<Flex alignItems="center" gap="10px" py="6px">
1074
<Text color="$text" flex="1" typography="captionBold">
1175
Contents
1276
</Text>
1377
</Flex>
14-
<Flex alignItems="center" gap="10px" p="4px 10px">
15-
<Box bg="$primary" borderRadius="100%" boxSize="6px" />
16-
<Text
17-
color="$primary"
18-
flex="1"
19-
opacity="0.8"
20-
typography="captionBold"
21-
>
22-
Installation
23-
</Text>
24-
</Flex>
25-
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
26-
<Text color="$text" flex="1" opacity="0.6" typography="caption">
27-
General Guides
28-
</Text>
29-
</Flex>
30-
<Flex alignItems="center" gap="10px" p="4px 10px 30px">
31-
<Text color="$text" flex="1" opacity="0.6" typography="caption">
32-
Framework Guides
33-
</Text>
34-
</Flex>
35-
<Flex alignItems="center" gap="10px" p="4px 10px">
36-
<Text color="$text" flex="1" opacity="0.6" typography="caption">
37-
Next Steps
38-
</Text>
39-
</Flex>
40-
<Flex alignItems="center" gap="10px" p="4px 10px">
41-
<Text color="$text" flex="1" opacity="0.6" typography="caption">
42-
Playground
43-
</Text>
44-
</Flex>
45-
<Flex alignItems="center" gap="10px" p="4px 10px">
46-
<Text color="$text" flex="1" opacity="0.6" typography="caption">
47-
Acknowledgement
78+
{menus.map((menu) => (
79+
<IndexMenu key={menu.text} onClick={menu.onClick} sub={menu.sub}>
80+
{menu.text}
81+
</IndexMenu>
82+
))}
83+
</VStack>
84+
<Box bg="$border" h="1px" />
85+
<Link
86+
className={css({ textDecoration: 'none' })}
87+
href={editUrl}
88+
target="_blank"
89+
>
90+
<Flex gap="4px">
91+
<Text color="$caption" flex="1" textAlign="right" typography="small">
92+
Edit this page
4893
</Text>
94+
<svg
95+
className={css({ color: '$caption' })}
96+
fill="none"
97+
height="16"
98+
viewBox="0 0 16 16"
99+
width="16"
100+
xmlns="http://www.w3.org/2000/svg"
101+
>
102+
<path
103+
d="M13.3344 8.0656H12.1499V5.34691L9.02246 8.48087L8.18399 7.64415L11.3037 4.51788H8.60216V3.33334H13.3344V8.0656Z"
104+
fill="currentColor"
105+
/>
106+
<path
107+
d="M11.49 9.29411V12.8235H3.84297V5.17647H7.37239V4H3.84297C3.19592 4 2.6665 4.52941 2.6665 5.17647V12.8235C2.6665 13.4706 3.19592 14 3.84297 14H11.49C12.1371 14 12.6665 13.4706 12.6665 12.8235V9.29411H11.49Z"
108+
fill="currentColor"
109+
/>
110+
</svg>
49111
</Flex>
50-
</VStack>
51-
<Box bg="undefined" h="1px" />
52-
<Flex gap="4px">
53-
<Text color="$caption" flex="1" textAlign="right" typography="small">
54-
Edit this page
55-
</Text>
56-
<Image
57-
bg="$caption"
58-
boxSize="16px"
59-
maskImage={`url(${URL_PREFIX}/outlink.svg)`}
60-
maskSize="100%"
61-
/>
62-
</Flex>
112+
</Link>
63113
</VStack>
64114
)
65115
}

‎apps/landing/src/app/(detail)/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function DetailLayout({
1414
<Box p="20px 16px" w="220px">
1515
<LeftMenu />
1616
</Box>
17-
<Box flex={1} px="60px" py="40px">
17+
<Box className="markdown-body" flex={1} px="60px" py="40px">
1818
{children}
1919
</Box>
2020
<RightIndex />

‎apps/landing/src/app/(detail)/team/TeamCard.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
2+
import Link from 'next/link'
3+
4+
import { Github } from '../../../components/Header/Github'
5+
import { Insta } from '../../../components/Header/Insta'
6+
7+
interface TeamCardProps {
8+
userId: string
9+
role: string
10+
instaId?: string
11+
}
12+
13+
export async function TeamCard({ userId, role, instaId }: TeamCardProps) {
14+
const data = await fetch(`https://api.github.com/users/${userId}`).then(
15+
(res) => res.json(),
16+
)
17+
const avatarUrl = data.avatar_url
18+
const name = data.name
19+
return (
20+
<VStack
21+
alignItems="flex-end"
22+
bg="$background"
23+
borderRadius="16px"
24+
boxShadow="0px 0px 6px 0px rgba(0, 0, 0, 0.18)"
25+
flex="1"
26+
justifyContent="space-between"
27+
overflow="hidden"
28+
pb="24px"
29+
pos="relative"
30+
>
31+
<Box bg="#eccafa" h="64px" pos="absolute" w="100%" />
32+
<Flex
33+
justifyContent="space-between"
34+
mt="24px"
35+
px="24px"
36+
w="100%"
37+
zIndex={1}
38+
>
39+
<VStack gap="12px">
40+
<Image
41+
bg="#eccafa"
42+
borderRadius="100%"
43+
boxSize="80px"
44+
src={avatarUrl}
45+
/>
46+
<VStack gap="4px">
47+
<Text color="$title" typography="buttonLbold">
48+
{name}
49+
</Text>
50+
<Text color="$caption" typography="caption">
51+
{role}
52+
</Text>
53+
</VStack>
54+
</VStack>
55+
<Flex alignItems="end" gap="10px">
56+
<Link href={`https://github.com/${userId}`} target="_blank">
57+
<Github />
58+
</Link>
59+
{instaId && (
60+
<Link href={`https://instagram.com/${instaId}`} target="_blank">
61+
<Insta />
62+
</Link>
63+
)}
64+
</Flex>
65+
</Flex>
66+
</VStack>
67+
)
68+
}

‎apps/landing/src/app/(detail)/team/page.mdx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
## Team
2-
a
3-
## What is Devup UI?
4-
## What is Devup UI?
5-
## What is Devup UI?
6-
## What is Devup UI?
7-
## What is Devup UI?
8-
## What is Devup UI?
9-
## What is Devup UI?
10-
## What is Devup UI?
11-
## What is Devup UI?
12-
## What is Devup UI?
13-
## What is Devup UI?
14-
## What is Devup UI?
1+
# Team
2+
3+
We are a team committed to developing the most optimized CSS-in-JS solutions.
4+
5+
---
6+
7+
import {TeamCard} from "./TeamCard";
8+
9+
<TeamCard role={"FULL-STACK"} userId={"owjs3901"} instaId={"owjs3901"}/>
10+

‎apps/landing/src/app/markdown.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css');
12

23
table {
34
border-collapse: collapse;

‎apps/landing/src/components/Header/Github.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
11
import { css } from '@devup-ui/react'
2-
import Link from 'next/link'
32

43
export function Github() {
54
return (
6-
<Link
5+
<svg
76
className={css({
8-
textDecoration: 'none',
7+
color: '$text',
98
})}
10-
href="https://github.com/dev-five-git/devup-ui"
11-
target="_blank"
9+
fill="none"
10+
height="24"
11+
viewBox="0 0 24 24"
12+
width="24"
13+
xmlns="http://www.w3.org/2000/svg"
1214
>
13-
<svg
14-
className={css({
15-
color: '$text',
16-
})}
17-
fill="none"
18-
height="24"
19-
viewBox="0 0 24 24"
20-
width="24"
21-
xmlns="http://www.w3.org/2000/svg"
22-
>
23-
<path
24-
d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
25-
fill="currentColor"
26-
/>
27-
</svg>
28-
</Link>
15+
<path
16+
d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
2920
)
3021
}

‎apps/landing/src/components/Header/Insta.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { css } from '@devup-ui/react'
2+
3+
export function Insta() {
4+
return (
5+
<svg
6+
className={css({
7+
color: '$text',
8+
})}
9+
fill="none"
10+
height="24"
11+
viewBox="0 0 24 24"
12+
width="24"
13+
xmlns="http://www.w3.org/2000/svg"
14+
>
15+
<path
16+
d="M13.0276 2C14.1526 2.003 14.7236 2.009 15.2166 2.023L15.4106 2.03C15.6346 2.038 15.8556 2.048 16.1226 2.06C17.1866 2.11 17.9126 2.278 18.5496 2.525C19.2096 2.779 19.7656 3.123 20.3216 3.678C20.8303 4.17773 21.2238 4.78247 21.4746 5.45C21.7216 6.087 21.8896 6.813 21.9396 7.878C21.9516 8.144 21.9616 8.365 21.9696 8.59L21.9756 8.784C21.9906 9.276 21.9966 9.847 21.9986 10.972L21.9996 11.718V13.028C22.002 13.7574 21.9944 14.4868 21.9766 15.216L21.9706 15.41C21.9626 15.635 21.9526 15.856 21.9406 16.122C21.8906 17.187 21.7206 17.912 21.4746 18.55C21.2238 19.2175 20.8303 19.8223 20.3216 20.322C19.8219 20.8307 19.2171 21.2242 18.5496 21.475C17.9126 21.722 17.1866 21.89 16.1226 21.94L15.4106 21.97L15.2166 21.976C14.7236 21.99 14.1526 21.997 13.0276 21.999L12.2816 22H10.9726C10.2429 22.0026 9.51312 21.9949 8.78359 21.977L8.58959 21.971C8.3522 21.962 8.11487 21.9517 7.87759 21.94C6.81359 21.89 6.08759 21.722 5.44959 21.475C4.78242 21.2241 4.17804 20.8306 3.67859 20.322C3.16954 19.8224 2.7757 19.2176 2.52459 18.55C2.27759 17.913 2.10959 17.187 2.05959 16.122L2.02959 15.41L2.02459 15.216C2.00616 14.4868 1.99782 13.7574 1.99959 13.028V10.972C1.99682 10.2426 2.00416 9.5132 2.02159 8.784L2.02859 8.59C2.03659 8.365 2.04659 8.144 2.05859 7.878C2.10859 6.813 2.27659 6.088 2.52359 5.45C2.77529 4.7822 3.16982 4.17744 3.67959 3.678C4.17875 3.16955 4.78278 2.77607 5.44959 2.525C6.08759 2.278 6.81259 2.11 7.87759 2.06C8.14359 2.048 8.36559 2.038 8.58959 2.03L8.78359 2.024C9.51278 2.00623 10.2422 1.99857 10.9716 2.001L13.0276 2ZM11.9996 7C10.6735 7 9.40174 7.52678 8.46406 8.46447C7.52638 9.40215 6.99959 10.6739 6.99959 12C6.99959 13.3261 7.52638 14.5979 8.46406 15.5355C9.40174 16.4732 10.6735 17 11.9996 17C13.3257 17 14.5974 16.4732 15.5351 15.5355C16.4728 14.5979 16.9996 13.3261 16.9996 12C16.9996 10.6739 16.4728 9.40215 15.5351 8.46447C14.5974 7.52678 13.3257 7 11.9996 7ZM11.9996 9C12.3936 8.99993 12.7837 9.07747 13.1477 9.22817C13.5117 9.37887 13.8424 9.5998 14.1211 9.87833C14.3997 10.1569 14.6207 10.4875 14.7715 10.8515C14.9224 11.2154 15 11.6055 15.0001 11.9995C15.0002 12.3935 14.9226 12.7836 14.7719 13.1476C14.6212 13.5116 14.4003 13.8423 14.1218 14.121C13.8432 14.3996 13.5126 14.6206 13.1486 14.7714C12.7847 14.9223 12.3946 14.9999 12.0006 15C11.2049 15 10.4419 14.6839 9.87927 14.1213C9.31666 13.5587 9.00059 12.7956 9.00059 12C9.00059 11.2044 9.31666 10.4413 9.87927 9.87868C10.4419 9.31607 11.2049 9 12.0006 9M17.2506 5.5C16.9191 5.5 16.6011 5.6317 16.3667 5.86612C16.1323 6.10054 16.0006 6.41848 16.0006 6.75C16.0006 7.08152 16.1323 7.39946 16.3667 7.63388C16.6011 7.8683 16.9191 8 17.2506 8C17.5821 8 17.9001 7.8683 18.1345 7.63388C18.3689 7.39946 18.5006 7.08152 18.5006 6.75C18.5006 6.41848 18.3689 6.10054 18.1345 5.86612C17.9001 5.6317 17.5821 5.5 17.2506 5.5Z"
17+
fill="currentColor"
18+
/>
19+
</svg>
20+
)
21+
}

‎apps/landing/src/components/Header/index.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,15 @@ export function Header() {
1919
const top = (
2020
<Flex alignItems="center">
2121
<Flex alignItems="center" px="10px">
22-
<Github />
22+
<Link
23+
className={css({
24+
textDecoration: 'none',
25+
})}
26+
href="https://github.com/dev-five-git/devup-ui"
27+
target="_blank"
28+
>
29+
<Github />
30+
</Link>
2331
</Flex>
2432
<Flex alignItems="center" px="10px">
2533
<Discord />

0 commit comments

Comments
 (0)