Skip to content

Commit 5291847

Browse files
1chang11chang1
committed
Add more styles and remove buttons
1 parent bd90eac commit 5291847

File tree

6 files changed

+89
-23
lines changed

6 files changed

+89
-23
lines changed

‎components/NotionPage.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,21 @@ export const NotionPage: React.FC<types.PageProps> = ({
156156
const router = useRouter()
157157
const lite = useSearchParam('lite')
158158

159+
React.useEffect(() => {
160+
const intro = document.getElementsByClassName(
161+
'notion-block-e2937a32ee344038bc1fb55c74a22d8f'
162+
)
163+
if (intro && intro.length > 0) intro[0].id = 'link-intro'
164+
const careers = document.getElementsByClassName(
165+
'notion-block-85f68c0cbfd44be5a0d85a3137a673de'
166+
)
167+
if (careers && careers.length > 0) careers[0].id = 'link-careers'
168+
const projects = document.getElementsByClassName(
169+
'notion-block-781d9405d3494e808dcdfc106dc8e46d'
170+
)
171+
if (projects && projects.length > 0) projects[0].id = 'link-projects'
172+
}, [])
173+
159174
const components = React.useMemo(
160175
() => ({
161176
nextImage: Image,
@@ -282,11 +297,11 @@ export const NotionPage: React.FC<types.PageProps> = ({
282297
mapPageUrl={siteMapPageUrl}
283298
mapImageUrl={mapImageUrl}
284299
searchNotion={config.isSearchEnabled ? searchNotion : null}
285-
pageAside={pageAside}
300+
// pageAside={pageAside}
286301
footer={footer}
287302
/>
288303

289-
<GitHubShareButton />
304+
{/* <GitHubShareButton /> */}
290305
</>
291306
)
292307
}

‎components/NotionPageHeader.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { useDarkMode } from 'lib/use-dark-mode'
99
import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
1010

1111
import styles from './styles.module.css'
12+
import Link from 'next/link'
1213

1314
const ToggleThemeButton = () => {
1415
const [hasMounted, setHasMounted] = React.useState(false)
@@ -49,7 +50,7 @@ export const NotionPageHeader: React.FC<{
4950
<div className='notion-nav-header-rhs breadcrumbs'>
5051
{navigationLinks
5152
?.map((link, index) => {
52-
if (!link.pageId && !link.url) {
53+
if (!link.pageId && !link.url && !link.id) {
5354
return null
5455
}
5556

@@ -63,7 +64,7 @@ export const NotionPageHeader: React.FC<{
6364
{link.title}
6465
</components.PageLink>
6566
)
66-
} else {
67+
} else if (link.url) {
6768
return (
6869
<components.Link
6970
href={link.url}
@@ -73,6 +74,17 @@ export const NotionPageHeader: React.FC<{
7374
{link.title}
7475
</components.Link>
7576
)
77+
} else {
78+
return (
79+
<span
80+
style={{ padding: 8 }}
81+
className={cs(styles.navLink, 'breadcrumb', 'button')}
82+
>
83+
<Link href={link.id} key={index} scroll={true}>
84+
{link.title}
85+
</Link>
86+
</span>
87+
)
7688
}
7789
})
7890
.filter(Boolean)}

‎lib/site-config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export interface NavigationLink {
3838
title: string
3939
pageId?: string
4040
url?: string
41+
id?: string
4142
}
4243

4344
export const siteConfig = (config: SiteConfig): SiteConfig => {

‎pages/_document.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default class MyDocument extends Document {
66
render() {
77
return (
88
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
9-
<Html lang='ko'>
9+
<Html lang='ko' style={{ scrollBehavior: 'smooth' }}>
1010
<Head>
1111
<link rel='shortcut icon' href='/favicon.ico' />
1212
<link

‎site.config.ts

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,20 +60,24 @@ export default siteConfig({
6060
'/projects-traffin': 'TRAFFIN-24971d0c6a8e470e8d05ac7ed12327d4',
6161
'/projects-hyowonlife': '750da52c857648978e315f5d11c00daf',
6262
'/projects-tothesky': 'toTheSky-1b33457e15fa4ba3851eb685f2edbfac'
63-
}
63+
},
6464

6565
// whether to use the default notion navigation style or a custom one with links to
6666
// important pages
67-
// navigationStyle: 'default'
68-
// navigationStyle: 'custom',
69-
// navigationLinks: [
70-
// {
71-
// title: 'About',
72-
// pageId: 'f1199d37579b41cbabfc0b5174f4256a'
73-
// },
74-
// {
75-
// title: 'Contact',
76-
// pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
77-
// }
78-
// ]
67+
// navigationStyle: 'default',
68+
navigationStyle: 'custom',
69+
navigationLinks: [
70+
{
71+
title: 'Intro',
72+
id: '#link-intro'
73+
},
74+
{
75+
title: 'Careers',
76+
id: '#link-careers'
77+
},
78+
{
79+
title: 'Projects',
80+
id: '#link-projects'
81+
}
82+
]
7983
})

‎styles/notion.css

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -342,15 +342,49 @@
342342
font-weight: 700;
343343
}
344344

345-
.notion-page-icon-inline {
346-
min-width: 28px;
347-
max-width: 28px;
348-
min-height: 28px;
349-
max-height: 28px;
345+
.notion-page-title .notion-page-icon-inline {
346+
min-width: 32px;
347+
max-width: 32px;
348+
min-height: 32px;
349+
max-height: 32px;
350350
display: flex;
351351
}
352352

353353
.notion-page-icon-inline img {
354354
align-self: center;
355355
justify-self: center;
356+
object-fit: contain;
357+
}
358+
359+
.notion-callout .notion-page-icon-inline {
360+
min-width: 22px;
361+
max-width: 22px;
362+
min-height: 22px;
363+
max-height: 22px;
364+
display: flex;
365+
}
366+
367+
.notion-page-link {
368+
height: 48px;
369+
padding-left: 8px;
370+
padding-right: 8px;
371+
border-radius: 16px;
372+
}
373+
374+
.notion-callout {
375+
border-radius: 16px;
376+
}
377+
378+
.notion-asset-wrapper .notion-asset-wrapper-image {
379+
max-width: 200px;
380+
}
381+
382+
.notion-block-04d8bdc32ebd4a1bb9314bb30c02e279 .notion-h-title {
383+
font-size: 2.75rem;
384+
background: linear-gradient(to right, #0b6e99 0%, #6b079a 100%);
385+
background-clip: text;
386+
color: transparent;
387+
-webkit-text-fill-color: transparent;
388+
box-decoration-break: clone;
389+
font-weight: 900;
356390
}

0 commit comments

Comments
 (0)