Skip to content

Commit 8d5d60a

Browse files
shellbearshellbear
committed
Fix bookmarks page
1 parent 5af2fd6 commit 8d5d60a

File tree

5 files changed

+146
-30
lines changed

5 files changed

+146
-30
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,5 @@ yarn-error.log*
3838

3939
public/robots.txt
4040
public/sitemap.xml
41+
42+
.env

‎notion/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Client } from '@notionhq/client';
2+
3+
const notion = new Client({
4+
auth: process.env.NOTION_TOKEN,
5+
});
6+
7+
export const getBookmarks = async () =>
8+
await notion.databases.query({
9+
database_id: process.env.NOTION_BOOKMARKS_ID!,
10+
page_size: 10000,
11+
sorts: [
12+
{
13+
property: 'Created',
14+
direction: 'descending',
15+
},
16+
],
17+
});

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,12 @@
2121
]
2222
},
2323
"dependencies": {
24+
"@notionhq/client": "^0.4.13",
2425
"fast-glob": "^3.2.11",
2526
"framer-motion": "^6.2.3",
2627
"gray-matter": "^4.0.3",
2728
"javascript-time-ago": "^2.3.11",
29+
"lodash": "^4.17.21",
2830
"next": "^12.0.9",
2931
"next-mdx-remote": "^3.0.8",
3032
"notion-client": "^4.15.0",
@@ -42,6 +44,7 @@
4244
},
4345
"devDependencies": {
4446
"@types/javascript-time-ago": "^2.0.3",
47+
"@types/lodash": "^4.14.178",
4548
"@types/react": "^17.0.38",
4649
"@types/styled-components": "^5.1.21",
4750
"@types/styled-system": "^5.1.15",

‎pages/bookmarks.tsx‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,25 @@ import Head from 'next/head';
33
import { GetStaticPropsResult } from 'next';
44
import Image from 'next/image';
55
import TimeAgo from 'javascript-time-ago';
6-
6+
import { compact } from 'lodash';
77
import { Title, Container, Text, Grid, Link, Card } from '@components';
88

99
import en from 'javascript-time-ago/locale/en.json';
10+
import { QueryDatabaseResponse } from '@notionhq/client/build/src/api-endpoints';
11+
import { getBookmarks } from '../notion';
1012

1113
TimeAgo.addDefaultLocale(en);
1214
const timeAgo = new TimeAgo('en-US');
1315

1416
export interface Bookmark {
15-
fields: Fields;
1617
id: string;
17-
created: number;
18-
last_edited: number;
19-
}
20-
21-
export interface Fields {
22-
URL: string;
23-
Name: string;
18+
created: string;
19+
name: string;
20+
url: string;
2421
}
2522

2623
interface BookmarksProps {
27-
bookmarks: Bookmark[];
24+
bookmarks: ReadonlyArray<Bookmark>;
2825
}
2926

3027
const Bookmarks = ({ bookmarks }: BookmarksProps): JSX.Element => (
@@ -43,13 +40,8 @@ const Bookmarks = ({ bookmarks }: BookmarksProps): JSX.Element => (
4340
gridTemplateColumns={['1fr 1fr', 'repeat(3, 1fr)']}
4441
gridGap={['1rem', '2rem']}
4542
>
46-
{bookmarks.map(({ id, fields, last_edited }) => (
47-
<Link
48-
target="_blank"
49-
rel="noreferrer noopener"
50-
key={id}
51-
href={fields.URL}
52-
>
43+
{bookmarks.map(({ id, name, created, url }) => (
44+
<Link target="_blank" rel="noreferrer noopener" key={id} href={url}>
5345
<Card padding={0} margin={0} borderRadius="5px" display="block">
5446
<Grid
5547
gridTemplateColumns="1fr"
@@ -60,10 +52,8 @@ const Bookmarks = ({ bookmarks }: BookmarksProps): JSX.Element => (
6052
<Image
6153
layout="fill"
6254
objectFit="cover"
63-
src={`https://rdl.ink/render/${encodeURIComponent(
64-
fields.URL,
65-
)}`}
66-
alt={fields.Name}
55+
src={`https://rdl.ink/render/${encodeURIComponent(url)}`}
56+
alt={name}
6757
/>
6858
</Container>
6959
<Container
@@ -79,14 +69,14 @@ const Bookmarks = ({ bookmarks }: BookmarksProps): JSX.Element => (
7969
textAlign="left"
8070
margin={0}
8171
>
82-
{fields.Name}
72+
{name}
8373
</Title>
8474
<Text
8575
margin={0}
8676
fontWeight="initial"
8777
fontSize={['.6rem', '.9rem']}
8878
>
89-
{timeAgo.format(new Date(last_edited))}
79+
{timeAgo.format(new Date(created))}
9080
</Text>
9181
</Container>
9282
</Grid>
@@ -97,18 +87,38 @@ const Bookmarks = ({ bookmarks }: BookmarksProps): JSX.Element => (
9787
</Container>
9888
);
9989

100-
const BOOKMARKS_URL =
101-
'https://potion-api.vercel.app/table?id=08ce7891a1824de8bac2ae8c77026383';
90+
const formatBookmarks = ({
91+
results,
92+
}: QueryDatabaseResponse): ReadonlyArray<Bookmark> =>
93+
compact(
94+
results.map((result) => {
95+
if (
96+
result.object === 'page' &&
97+
'url' in result &&
98+
result.properties?.Created?.type === 'created_time' &&
99+
result.properties?.URL?.type == 'url' &&
100+
result.properties.URL.url &&
101+
result.properties?.Name?.type == 'title' &&
102+
result.properties.Name.title?.[0]?.type === 'text'
103+
) {
104+
return {
105+
id: result.id,
106+
url: result.properties.URL.url,
107+
created: result.properties.Created.created_time,
108+
name: result.properties.Name.title[0].plain_text,
109+
};
110+
}
111+
}),
112+
);
102113

103114
export const getServerSideProps = async (): Promise<
104115
GetStaticPropsResult<BookmarksProps>
105116
> => {
106-
const result = await fetch(BOOKMARKS_URL);
107-
const bookmarks = await result.json();
108-
117+
const bookmarks = await getBookmarks();
118+
console.log(bookmarks);
109119
return {
110120
props: {
111-
bookmarks,
121+
bookmarks: formatBookmarks(bookmarks),
112122
},
113123
};
114124
};

‎yarn.lock‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,14 @@
477477
"@nodelib/fs.scandir" "2.1.5"
478478
fastq "^1.6.0"
479479

480+
"@notionhq/client@^0.4.13":
481+
version "0.4.13"
482+
resolved "https://registry.yarnpkg.com/@notionhq/client/-/client-0.4.13.tgz#b29c2ecc8c25508119f9b2875c2dda6c12f1c889"
483+
integrity sha512-tHC95h4JZYteHmIL49xdta0Yb9q0peXySqo9cqTQEVzpPwUdcPNgWQljMqfrSVKqlpGNX+DhXztY0LR6f3Iw6A==
484+
dependencies:
485+
"@types/node-fetch" "^2.5.10"
486+
node-fetch "^2.6.1"
487+
480488
"@rushstack/eslint-patch@^1.0.8":
481489
version "1.1.0"
482490
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
@@ -641,13 +649,26 @@
641649
dependencies:
642650
"@types/node" "*"
643651

652+
"@types/lodash@^4.14.178":
653+
version "4.14.178"
654+
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
655+
integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
656+
644657
"@types/mdast@^3.0.0":
645658
version "3.0.7"
646659
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.7.tgz#cba63d0cc11eb1605cea5c0ad76e02684394166b"
647660
integrity sha512-YwR7OK8aPmaBvMMUi+pZXBNoW2unbVbfok4YRqGMJBe1dpDlzpRkJrYEYmvjxgs5JhuQmKfDexrN98u941Zasg==
648661
dependencies:
649662
"@types/unist" "*"
650663

664+
"@types/node-fetch@^2.5.10":
665+
version "2.5.12"
666+
resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.5.12.tgz#8a6f779b1d4e60b7a57fb6fd48d84fb545b9cc66"
667+
integrity sha512-MKgC4dlq4kKNa/mYrwpKfzQMB5X3ee5U6fSprkKpToBqBmX4nFZL9cW5jl6sWn+xpRJ7ypWh2yyqqr8UUCstSw==
668+
dependencies:
669+
"@types/node" "*"
670+
form-data "^3.0.0"
671+
651672
"@types/node@*":
652673
version "16.3.3"
653674
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.3.tgz#0c30adff37bbbc7a50eb9b58fae2a504d0d88038"
@@ -913,6 +934,11 @@ astral-regex@^2.0.0:
913934
resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
914935
integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
915936

937+
asynckit@^0.4.0:
938+
version "0.4.0"
939+
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
940+
integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
941+
916942
axe-core@^4.3.5:
917943
version "4.3.5"
918944
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
@@ -1145,6 +1171,13 @@ colorette@^2.0.16:
11451171
resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
11461172
integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
11471173

1174+
combined-stream@^1.0.8:
1175+
version "1.0.8"
1176+
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
1177+
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
1178+
dependencies:
1179+
delayed-stream "~1.0.0"
1180+
11481181
comma-separated-tokens@^1.0.0:
11491182
version "1.0.8"
11501183
resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
@@ -1301,6 +1334,11 @@ define-properties@^1.1.3:
13011334
dependencies:
13021335
object-keys "^1.0.12"
13031336

1337+
delayed-stream@~1.0.0:
1338+
version "1.0.0"
1339+
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
1340+
integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
1341+
13041342
detab@2.0.4:
13051343
version "2.0.4"
13061344
resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.4.tgz#b927892069aff405fbb9a186fe97a44a92a94b43"
@@ -1844,6 +1882,15 @@ flatted@^3.1.0:
18441882
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.1.tgz#bbef080d95fca6709362c73044a1634f7c6e7d05"
18451883
integrity sha512-OMQjaErSFHmHqZe+PSidH5n8j3O0F2DdnVh8JB4j4eUQ2k6KvB0qGfrKIhapvez5JerBbmWkaLYUYWISaESoXg==
18461884

1885+
form-data@^3.0.0:
1886+
version "3.0.1"
1887+
resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
1888+
integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
1889+
dependencies:
1890+
asynckit "^0.4.0"
1891+
combined-stream "^1.0.8"
1892+
mime-types "^2.1.12"
1893+
18471894
format-number@^3.0.0:
18481895
version "3.0.0"
18491896
resolved "https://registry.yarnpkg.com/format-number/-/format-number-3.0.0.tgz#92bbf34ce5e04eb637a9a3a4f65980d5af137393"
@@ -2641,7 +2688,7 @@ lodash.uniq@4.5.0:
26412688
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
26422689
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
26432690

2644-
lodash@^4.17.11, lodash@^4.17.19:
2691+
lodash@^4.17.11, lodash@^4.17.19, lodash@^4.17.21:
26452692
version "4.17.21"
26462693
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
26472694
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2761,6 +2808,18 @@ micromatch@^4.0.4:
27612808
braces "^3.0.1"
27622809
picomatch "^2.2.3"
27632810

2811+
mime-db@1.51.0:
2812+
version "1.51.0"
2813+
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
2814+
integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
2815+
2816+
mime-types@^2.1.12:
2817+
version "2.1.34"
2818+
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
2819+
integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
2820+
dependencies:
2821+
mime-db "1.51.0"
2822+
27642823
mimic-fn@^2.1.0:
27652824
version "2.1.0"
27662825
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -2868,6 +2927,13 @@ next@^12.0.9:
28682927
"@next/swc-win32-ia32-msvc" "12.0.9"
28692928
"@next/swc-win32-x64-msvc" "12.0.9"
28702929

2930+
node-fetch@^2.6.1:
2931+
version "2.6.7"
2932+
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
2933+
integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
2934+
dependencies:
2935+
whatwg-url "^5.0.0"
2936+
28712937
normalize-path@^3.0.0:
28722938
version "3.0.0"
28732939
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -4079,6 +4145,11 @@ toggle-selection@^1.0.6:
40794145
resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
40804146
integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
40814147

4148+
tr46@~0.0.3:
4149+
version "0.0.3"
4150+
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
4151+
integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
4152+
40824153
trim-trailing-lines@^1.0.0:
40834154
version "1.1.4"
40844155
resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
@@ -4305,6 +4376,19 @@ web-namespaces@^1.0.0:
43054376
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
43064377
integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
43074378

4379+
webidl-conversions@^3.0.0:
4380+
version "3.0.1"
4381+
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
4382+
integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
4383+
4384+
whatwg-url@^5.0.0:
4385+
version "5.0.0"
4386+
resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
4387+
integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
4388+
dependencies:
4389+
tr46 "~0.0.3"
4390+
webidl-conversions "^3.0.0"
4391+
43084392
which-boxed-primitive@^1.0.2:
43094393
version "1.0.2"
43104394
resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"

0 commit comments

Comments
 (0)