Skip to content

Commit afca11c

Browse files
owjs3901owjs3901
authored
Merge pull request #448 from forestream/fix-font-loading
Fix font loading
2 parents bfa898a + ae73b04 commit afca11c

File tree

4 files changed

+121
-59
lines changed

4 files changed

+121
-59
lines changed

‎apps/landing/src/app/(detail)/components/MdxCardFooter.tsx‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { Box, Center, Flex, Image, Text, VStack } from '@devup-ui/react'
3+
import { Box, Center, Flex, Grid, Image, Text, VStack } from '@devup-ui/react'
44
import { useState } from 'react'
55

66
import IconCode from '@/components/icons/IconCode'
@@ -28,7 +28,7 @@ export default function MdxCardFooter({
2828
}
2929

3030
return (
31-
<VStack justifyContent="flex-end" maxH="600px" maxW="100%">
31+
<VStack justifyContent="flex-end" maxW="100%">
3232
<Flex
3333
borderTop="1px solid $border"
3434
justifyContent="flex-end"
@@ -56,52 +56,60 @@ export default function MdxCardFooter({
5656
<Text>Show Code</Text>
5757
</Center>
5858
</Flex>
59-
{isOpen && (
60-
<>
61-
<Box h="0" pos="relative" w="100%">
62-
<Center
63-
_active={{
64-
borderColor: '$primary',
65-
bg: '$menuActive',
66-
}}
67-
_hover={{
68-
borderColor: '$primary',
69-
bg: '$menuHover',
70-
}}
71-
bg="$containerBackground"
72-
border="1px solid transparent"
73-
borderRadius="4px"
74-
boxShadow="0 2px 6px 0 $shadow"
75-
cursor="pointer"
76-
gap="8px"
77-
onClick={handleCopy}
78-
p="8px"
79-
pos="absolute"
80-
right="16px"
81-
top="16px"
82-
transition="all 0.125s ease-in-out"
83-
>
84-
<Image
85-
aspectRatio="1"
86-
boxSize="20px"
87-
src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
88-
/>
89-
<Text color="$captionBold" typography="caption">
90-
Copy
91-
</Text>
92-
</Center>
93-
</Box>
94-
<Box
95-
borderTop="1px solid $border"
96-
h="100%"
97-
overflow="auto"
98-
px="24px"
99-
py="16px"
100-
>
101-
{children}
102-
</Box>
103-
</>
104-
)}
59+
<Grid
60+
gridTemplateRows={isOpen ? '1fr' : '0fr'}
61+
maxH="600px"
62+
pos="relative"
63+
transition="grid-template-rows 0.3s ease-in-out"
64+
>
65+
{isOpen && (
66+
<>
67+
<Box pos="absolute" w="100%">
68+
<Center
69+
_active={{
70+
borderColor: '$primary',
71+
bg: '$menuActive',
72+
}}
73+
_hover={{
74+
borderColor: '$primary',
75+
bg: '$menuHover',
76+
}}
77+
bg="$containerBackground"
78+
border="1px solid transparent"
79+
borderRadius="4px"
80+
boxShadow="0 2px 6px 0 $shadow"
81+
cursor="pointer"
82+
gap="8px"
83+
onClick={handleCopy}
84+
p="8px"
85+
pos="absolute"
86+
right="16px"
87+
top="16px"
88+
transition="all 0.125s ease-in-out"
89+
>
90+
<Image
91+
aspectRatio="1"
92+
boxSize="20px"
93+
src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
94+
/>
95+
<Text color="$captionBold" typography="caption">
96+
Copy
97+
</Text>
98+
</Center>
99+
</Box>
100+
</>
101+
)}
102+
<Box
103+
borderTop={isOpen ? '1px solid $border' : 'none'}
104+
h="100%"
105+
onWheel={(e) => e.stopPropagation()}
106+
overflow="auto"
107+
p={isOpen ? ['12px', null, '24px'] : '0'}
108+
transition="padding 0.2s ease-in-out"
109+
>
110+
{children}
111+
</Box>
112+
</Grid>
105113
</VStack>
106114
)
107115
}

‎apps/landing/src/app/layout.tsx‎

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,56 @@ export const metadata: Metadata = {
2727
resetCss()
2828

2929
globalCss({
30+
fontFaces: [
31+
{
32+
fontFamily: 'Pretendard',
33+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format("woff2")',
34+
fontWeight: 800,
35+
fontStyle: 'normal',
36+
},
37+
{
38+
fontFamily: 'Pretendard',
39+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2) format("woff2")',
40+
fontWeight: 700,
41+
fontStyle: 'normal',
42+
},
43+
{
44+
fontFamily: 'Pretendard',
45+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2) format("woff2")',
46+
fontWeight: 600,
47+
fontStyle: 'normal',
48+
},
49+
{
50+
fontFamily: 'Pretendard',
51+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2) format("woff2")',
52+
fontWeight: 500,
53+
fontStyle: 'normal',
54+
},
55+
{
56+
fontFamily: 'Pretendard',
57+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format("woff2")',
58+
fontWeight: 400,
59+
fontStyle: 'normal',
60+
},
61+
{
62+
fontFamily: 'Pretendard',
63+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format("woff2")',
64+
fontWeight: 300,
65+
fontStyle: 'normal',
66+
},
67+
{
68+
fontFamily: 'Pretendard',
69+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2) format("woff2")',
70+
fontWeight: 100,
71+
fontStyle: 'normal',
72+
},
73+
{
74+
fontFamily: 'D2Coding',
75+
src: 'url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff) format("woff")',
76+
fontWeight: 400,
77+
fontDisplay: 'swap',
78+
},
79+
],
3080
code: {
3181
fontFamily: 'D2Coding',
3282
fontSize: ['13px', '15px'],
@@ -57,12 +107,12 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
57107
})(window,document,'script','dataLayer','GTM-PSRKC4QZ')`,
58108
}}
59109
/>
60-
<ThemeScript auto />
61-
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
62-
<link href="/favicon.ico" rel="shortcut icon" />
63110
<link
64-
href="https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css"
65-
rel="stylesheet"
111+
as="font"
112+
crossOrigin="anonymous"
113+
href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff"
114+
rel="preload"
115+
type="font/woff"
66116
/>
67117
{[
68118
'ExtraBold',
@@ -82,10 +132,9 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
82132
type="font/woff2"
83133
/>
84134
))}
85-
<link
86-
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
87-
rel="stylesheet"
88-
/>
135+
<ThemeScript auto />
136+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
137+
<link href="/favicon.ico" rel="shortcut icon" />
89138
</head>
90139
<body
91140
className={css({

‎apps/landing/src/components/Code.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ export const Code = ({
1717
display: 'none',
1818
}}
1919
>
20-
<SyntaxHighlighter language={language} showLineNumbers style={Light}>
20+
<SyntaxHighlighter
21+
customStyle={{ margin: 0 }}
22+
language={language}
23+
showLineNumbers
24+
style={Light}
25+
>
2126
{value}
2227
</SyntaxHighlighter>
2328
</Box>

‎apps/landing/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"moduleResolution": "bundler",
1212
"resolveJsonModule": true,
1313
"isolatedModules": true,
14-
"jsx": "react-jsx",
14+
"jsx": "preserve",
1515
"incremental": true,
1616
"plugins": [
1717
{

0 commit comments

Comments
 (0)