Skip to content

Commit eca7001

Browse files
owjs3901owjs3901
authored
Merge pull request #74 from dev-five-git/impl-right-issue
Impl right issue
2 parents 578a4af + 207f8bf commit eca7001

File tree

11 files changed

+844
-151
lines changed

11 files changed

+844
-151
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: 113 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,131 @@
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 (
771
<VStack gap="16px" 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" />
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({
87+
textDecoration: 'none',
88+
_hover: {
89+
textDecoration: 'underline',
90+
textDecorationColor: '$text',
91+
},
92+
})}
93+
href={editUrl}
94+
role="group"
95+
target="_blank"
96+
>
97+
<Flex gap="4px">
1698
<Text
17-
color="$primary"
99+
_groupHover={{ color: '$text' }}
100+
color="$caption"
18101
flex="1"
19-
opacity="0.8"
20-
typography="captionBold"
102+
textAlign="right"
103+
typography="small"
21104
>
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
105+
Edit this page
48106
</Text>
107+
<svg
108+
className={css({
109+
color: '$caption',
110+
_groupHover: { color: '$text' },
111+
})}
112+
fill="none"
113+
height="16"
114+
viewBox="0 0 16 16"
115+
width="16"
116+
xmlns="http://www.w3.org/2000/svg"
117+
>
118+
<path
119+
d="M13.3344 8.0656H12.1499V5.34691L9.02246 8.48087L8.18399 7.64415L11.3037 4.51788H8.60216V3.33334H13.3344V8.0656Z"
120+
fill="currentColor"
121+
/>
122+
<path
123+
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"
124+
fill="currentColor"
125+
/>
126+
</svg>
49127
</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>
128+
</Link>
63129
</VStack>
64130
)
65131
}

‎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/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function RootLayout({
2323
<head>
2424
<ThemeScript auto />
2525
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
26-
<base href={URL_PREFIX} />
26+
{URL_PREFIX && <base href={URL_PREFIX} />}
2727
<link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
2828
</head>
2929
<body

‎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/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
12

23
table {
34
border-collapse: collapse;

0 commit comments

Comments
 (0)