Skip to content

Commit 7b39503

Browse files
committed
Update component exports and deploy link
1 parent b4c3c31 commit 7b39503

25 files changed

+188
-143
lines changed

readme.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ To view the steps to setup Notion to work with this example view the post at htt
1414

1515
Deploy your own Notion blog with Vercel.
1616

17-
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/ijjk/notion-blog/tree/master&env=NOTION_TOKEN,BLOG_INDEX_ID&envDescription=Required+env+values+for+deploying&envLink=https://github.com/ijjk/notion-blog%23getting-blog-index-and-token)
17+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/ijjk/notion-blog/tree/main&project-name=notion-blog&repository-name=notion-blog)
1818

1919
or
2020

src/components/counter.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22

3-
export default ({ initialValue }) => {
3+
const Counter = ({ initialValue }) => {
44
const [clicks, setClicks] = useState(initialValue)
55

66
return (
@@ -11,3 +11,5 @@ export default ({ initialValue }) => {
1111
</div>
1212
)
1313
}
14+
15+
export default Counter

src/components/ext-link.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
export default props => (
1+
const ExtLink = (props) => (
22
<a {...props} rel="noopener" target={props.target || '_blank'} />
33
)
4+
export default ExtLink

src/components/features.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const features = [
4242
},
4343
]
4444

45-
export default () => (
45+
const Features = () => (
4646
<div className="features">
4747
{features.map(({ text, icon: Icon }) => (
4848
<div className="feature" key={text}>
@@ -52,3 +52,5 @@ export default () => (
5252
))}
5353
</div>
5454
)
55+
56+
export default Features

src/components/footer.tsx

+22-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import ExtLink from './ext-link'
22

3-
export default () => (
4-
<>
5-
<footer>
6-
<span>Deploy your own!</span>
7-
<ExtLink href="https://vercel.com/import/git?s=https://github.com/ijjk/notion-blog/tree/master&env=NOTION_TOKEN,BLOG_INDEX_ID&envDescription=Required+env+values+for+deploying&envLink=https://github.com/ijjk/notion-blog%23getting-blog-index-and-token">
8-
<img
9-
src="https://vercel.com/button"
10-
height={46}
11-
width={132}
12-
alt="deploy to Vercel button"
13-
/>
14-
</ExtLink>
15-
<span>
16-
or{' '}
17-
<ExtLink href="https://github.com/ijjk/notion-blog">
18-
view source
3+
export default function Footer() {
4+
return (
5+
<>
6+
<footer>
7+
<span>Deploy your own!</span>
8+
<ExtLink href="https://vercel.com/new/git/external?repository-url=https://github.com/ijjk/notion-blog/tree/main&project-name=notion-blog&repository-name=notion-blog">
9+
<img
10+
src="https://vercel.com/button"
11+
height={46}
12+
width={132}
13+
alt="deploy to Vercel button"
14+
/>
1915
</ExtLink>
20-
</span>
21-
</footer>
22-
</>
23-
)
16+
<span>
17+
or{' '}
18+
<ExtLink href="https://github.com/ijjk/notion-blog">
19+
view source
20+
</ExtLink>
21+
</span>
22+
</footer>
23+
</>
24+
)
25+
}

src/components/header.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const navItems: { label: string; page?: string; link?: string }[] = [
1313

1414
const ogImageUrl = 'https://notion-blog.now.sh/og-image.png'
1515

16-
export default ({ titlePre = '' }) => {
16+
const Header = ({ titlePre = '' }) => {
1717
const { pathname } = useRouter()
1818

1919
return (
@@ -48,3 +48,5 @@ export default ({ titlePre = '' }) => {
4848
</header>
4949
)
5050
}
51+
52+
export default Header

src/components/heading.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
const collectText = (el, acc = []) => {
22
if (el) {
33
if (typeof el === 'string') acc.push(el)
4-
if (Array.isArray(el)) el.map(item => collectText(item, acc))
4+
if (Array.isArray(el)) el.map((item) => collectText(item, acc))
55
if (typeof el === 'object') collectText(el.props && el.props.children, acc)
66
}
77
return acc.join('').trim()
88
}
99

10-
export default ({ children: component, id }: { children: any; id?: any }) => {
10+
const Heading = ({ children: component, id }: { children: any; id?: any }) => {
1111
const children = component.props.children || ''
1212
let text = children
1313

@@ -24,3 +24,5 @@ export default ({ children: component, id }: { children: any; id?: any }) => {
2424
</a>
2525
)
2626
}
27+
28+
export default Heading

src/components/svgs/edit.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Edit = (props) => (
22
<svg
33
viewBox="0 0 24 24"
44
stroke="currentColor"
@@ -20,3 +20,5 @@ export default props => (
2020
<path d="M17 16h6" />
2121
</svg>
2222
)
23+
24+
export default Edit

src/components/svgs/envelope.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
export default props => (
1+
const Envelope = (props) => (
22
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
33
<path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z" />
44
</svg>
55
)
6+
7+
export default Envelope

src/components/svgs/github.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
export default props => (
1+
const Github = (props) => (
22
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" {...props}>
33
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
44
</svg>
55
)
6+
7+
export default Github

src/components/svgs/jamstack.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Jamstack = (props) => (
22
<svg
33
width="24"
44
height="24"
@@ -14,3 +14,5 @@ export default props => (
1414
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
1515
</svg>
1616
)
17+
18+
export default Jamstack

src/components/svgs/lighthouse.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Lighthouse = (props) => (
22
<svg
33
viewBox="0 0 24 24"
44
width="24"
@@ -15,3 +15,5 @@ export default props => (
1515
<path d="M22 4L12 14.01l-3-3" />
1616
</svg>
1717
)
18+
19+
export default Lighthouse

src/components/svgs/lightning.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Lightning = (props) => (
22
<svg
33
width="24"
44
height="24"
@@ -14,3 +14,5 @@ export default props => (
1414
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
1515
</svg>
1616
)
17+
18+
export default Lightning

src/components/svgs/linkedin.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
export default props => (
1+
const Linkedin = (props) => (
22
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
33
<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
44
</svg>
55
)
6+
7+
export default Linkedin

src/components/svgs/notion.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Notion = (props) => (
22
<svg
33
viewBox="-5 0 120 130"
44
className="prefix__notionLogo"
@@ -9,3 +9,5 @@ export default props => (
99
<path d="M20.693 21.931c3.89 3.161 5.35 2.92 12.656 2.433l68.879-4.136c1.461 0 .246-1.458-.241-1.7l-11.44-8.27c-2.191-1.701-5.111-3.65-10.708-3.162L13.143 11.96c-2.432.241-2.918 1.457-1.95 2.432l9.5 7.54zm4.135 16.052v72.473c0 3.895 1.947 5.352 6.327 5.111l75.698-4.38c4.383-.241 4.871-2.92 4.871-6.084V33.117c0-3.159-1.215-4.863-3.898-4.62l-79.105 4.62c-2.92.245-3.893 1.706-3.893 4.867zm74.729 3.888c.485 2.191 0 4.38-2.195 4.626l-3.648.727v53.504c-3.166 1.702-6.087 2.675-8.52 2.675-3.896 0-4.871-1.217-7.79-4.863L53.547 61.087v36.237l7.55 1.704s0 4.375-6.091 4.375l-16.791.974c-.488-.974 0-3.404 1.703-3.891l4.382-1.214V51.36l-6.084-.487c-.488-2.191.727-5.35 4.137-5.596l18.013-1.214 24.828 37.94V48.44l-6.33-.726c-.486-2.679 1.459-4.624 3.893-4.865l16.8-.978zM7.543 5.394L76.917.285c8.52-.73 10.712-.241 16.066 3.649l22.145 15.564c3.654 2.677 4.872 3.405 4.872 6.323v85.366c0 5.35-1.949 8.514-8.763 8.998l-80.564 4.865c-5.115.244-7.549-.485-10.228-3.892L4.137 99.999C1.215 96.105 0 93.191 0 89.782V13.903c0-4.375 1.95-8.025 7.543-8.509z" />
1010
</svg>
1111
)
12+
13+
export default Notion

src/components/svgs/plus.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Plus = (props) => (
22
<svg
33
viewBox="0 0 24 24"
44
width="24"
@@ -15,3 +15,5 @@ export default props => (
1515
<path d="M17 6h6v6" />
1616
</svg>
1717
)
18+
19+
export default Plus

src/components/svgs/scroll.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Scroll = (props) => (
22
<svg
33
viewBox="0 0 24 24"
44
width="24"
@@ -18,3 +18,5 @@ export default props => (
1818
<path d="M10 9H8" />
1919
</svg>
2020
)
21+
22+
export default Scroll

src/components/svgs/twitter.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
export default props => (
1+
const Twitter = (props) => (
22
<svg viewBox="0 0 512 512" {...props}>
33
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" />
44
</svg>
55
)
6+
7+
export default Twitter

src/components/svgs/wifi.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Wifi = (props) => (
22
<svg
33
viewBox="0 0 24 24"
44
stroke="currentColor"
@@ -15,3 +15,5 @@ export default props => (
1515
<path d="M12 20h.01" />
1616
</svg>
1717
)
18+
19+
export default Wifi

src/components/svgs/zeit.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default props => (
1+
const Zeit = (props) => (
22
<svg width={114} height={100} viewBox="0 0 114 100" {...props}>
33
<title>{'Logotype - Black'}</title>
44
<defs>
@@ -21,3 +21,5 @@ export default props => (
2121
/>
2222
</svg>
2323
)
24+
25+
export default Zeit

src/pages/_app.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import '../styles/global.css'
22
import 'katex/dist/katex.css'
33
import Footer from '../components/footer'
44

5-
export default ({ Component, pageProps }) => (
6-
<>
7-
<Component {...pageProps} />
8-
<Footer />
9-
</>
10-
)
5+
export default function MyApp({ Component, pageProps }) {
6+
return (
7+
<>
8+
<Component {...pageProps} />
9+
<Footer />
10+
</>
11+
)
12+
}

src/pages/blog/[slug].tsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@ export async function getStaticProps({ params: { slug }, preview }) {
5757
}
5858

5959
const { users } = await getNotionUsers(post.Authors || [])
60-
post.Authors = Object.keys(users).map(id => users[id].full_name)
60+
post.Authors = Object.keys(users).map((id) => users[id].full_name)
6161

6262
return {
6363
props: {
6464
post,
6565
preview: preview || false,
6666
},
67-
unstable_revalidate: 10,
67+
revalidate: 10,
6868
}
6969
}
7070

@@ -75,8 +75,8 @@ export async function getStaticPaths() {
7575
// for actually published ones
7676
return {
7777
paths: Object.keys(postsTable)
78-
.filter(post => postsTable[post].Published === 'Yes')
79-
.map(slug => getBlogLink(slug)),
78+
.filter((post) => postsTable[post].Published === 'Yes')
79+
.map((slug) => getBlogLink(slug)),
8080
fallback: true,
8181
}
8282
}
@@ -193,10 +193,10 @@ const RenderPost = ({ post, redirect, preview }) => {
193193
React.createElement(
194194
listTagName,
195195
{ key: listLastId! },
196-
Object.keys(listMap).map(itemId => {
196+
Object.keys(listMap).map((itemId) => {
197197
if (listMap[itemId].isNested) return null
198198

199-
const createEl = item =>
199+
const createEl = (item) =>
200200
React.createElement(
201201
components.li || 'ul',
202202
{ key: item.key },
@@ -205,7 +205,7 @@ const RenderPost = ({ post, redirect, preview }) => {
205205
? React.createElement(
206206
components.ul || 'ul',
207207
{ key: item + 'sub-list' },
208-
item.nested.map(nestedId =>
208+
item.nested.map((nestedId) =>
209209
createEl(listMap[nestedId])
210210
)
211211
)
@@ -251,9 +251,11 @@ const RenderPost = ({ post, redirect, preview }) => {
251251
const roundFactor = Math.pow(10, 2)
252252
// calculate percentages
253253
const width = block_width
254-
? `${Math.round(
255-
(block_width / baseBlockWidth) * 100 * roundFactor
256-
) / roundFactor}%`
254+
? `${
255+
Math.round(
256+
(block_width / baseBlockWidth) * 100 * roundFactor
257+
) / roundFactor
258+
}%`
257259
: block_height || '100%'
258260

259261
const isImage = type === 'image'

0 commit comments

Comments
 (0)