Skip to content

Commit 80a0461

Browse files
WojtekTheWebDevWojtekTheWebDev
committed
apply notion colors
1 parent 231a8f4 commit 80a0461

12 files changed

+170
-168
lines changed

‎src/app/components/atoms/BulletedListItem.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface BulletedListItemProps {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function BulletedListItem({ rich_text }: BulletedListItemProps) {
10-
const content = richTextToPlainText(rich_text);
11-
return <li className="list-disc">{content}</li>;
9+
export function BulletedListItem({ richText }: BulletedListItemProps) {
10+
return <li>{renderRichText(richText)}</li>;
1211
}

‎src/app/components/atoms/Heading1.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface Heading1Props {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function Heading1({ rich_text }: Heading1Props) {
10-
const content = richTextToPlainText(rich_text);
11-
return <h1>{content}</h1>;
9+
export function Heading1({ richText }: Heading1Props) {
10+
return <h1>{renderRichText(richText)}</h1>;
1211
}

‎src/app/components/atoms/Heading2.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface Heading2Props {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function Heading2({ rich_text }: Heading2Props) {
10-
const content = richTextToPlainText(rich_text);
11-
return <h2>{content}</h2>;
9+
export function Heading2({ richText }: Heading2Props) {
10+
return <h2>{renderRichText(richText)}</h2>;
1211
}

‎src/app/components/atoms/Heading3.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface Heading3Props {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function Heading3({ rich_text }: Heading3Props) {
10-
const content = richTextToPlainText(rich_text);
11-
return <h3>{content}</h3>;
9+
export function Heading3({ richText }: Heading3Props) {
10+
return <h3>{renderRichText(richText)}</h3>;
1211
}

‎src/app/components/atoms/NumberedListItem.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface NumberedListItemProps {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function NumberedListItem({ rich_text }: NumberedListItemProps) {
10-
const content = richTextToPlainText(rich_text);
11-
return <li className="list-decimal">{content}</li>;
9+
export function NumberedListItem({ richText }: NumberedListItemProps) {
10+
return <li>{renderRichText(richText)}</li>;
1211
}

‎src/app/components/atoms/Paragraph.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React from "react";
2-
import { richTextToPlainText } from "../../../lib/notion";
2+
import { renderRichText } from "../../../lib/notion";
33
import type { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
44

55
interface ParagraphProps {
6-
rich_text: RichTextItemResponse[];
6+
richText: RichTextItemResponse[];
77
}
88

9-
export function Paragraph({ rich_text }: ParagraphProps) {
10-
const content = richTextToPlainText(rich_text);
11-
return <p>{content}</p>;
9+
export function Paragraph({ richText }: ParagraphProps) {
10+
return <p>{renderRichText(richText)}</p>;
1211
}
1312

1413
export default Paragraph;

‎src/app/components/molecules/NotionRenderer.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,25 @@ export const NotionRenderer = ({ blocks }: NotionRendererProps) => {
2121

2222
switch (type) {
2323
case "heading_1":
24-
return <Heading1 key={id} rich_text={block.heading_1.rich_text} />;
24+
return <Heading1 key={id} richText={block.heading_1.rich_text} />;
2525
case "heading_2":
26-
return <Heading2 key={id} rich_text={block.heading_2.rich_text} />;
26+
return <Heading2 key={id} richText={block.heading_2.rich_text} />;
2727
case "heading_3":
28-
return <Heading3 key={id} rich_text={block.heading_3.rich_text} />;
28+
return <Heading3 key={id} richText={block.heading_3.rich_text} />;
2929
case "paragraph":
30-
return <Paragraph key={id} rich_text={block.paragraph.rich_text} />;
30+
return <Paragraph key={id} richText={block.paragraph.rich_text} />;
3131
case "bulleted_list_item":
3232
return (
3333
<BulletedListItem
3434
key={id}
35-
rich_text={block.bulleted_list_item.rich_text}
35+
richText={block.bulleted_list_item.rich_text}
3636
/>
3737
);
3838
case "numbered_list_item":
3939
return (
4040
<NumberedListItem
4141
key={id}
42-
rich_text={block.numbered_list_item.rich_text}
42+
richText={block.numbered_list_item.rich_text}
4343
/>
4444
);
4545
default:

‎src/app/globals.css

Lines changed: 54 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,62 @@
1-
/* Import Inter font from Google Fonts */
2-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
3-
41
@tailwind base;
52
@tailwind components;
63
@tailwind utilities;
74

5+
/* Light Theme */
86
:root {
9-
--background: #ffffff; /* Notion's white */
10-
--foreground: #37352f; /* Notion's dark gray (not pure black) */
11-
--muted: #787774; /* Notion's muted gray */
12-
--border: #dddcda; /* Notion's soft gray border */
13-
--accent: #2f76d2; /* Notion's subtle blue */
14-
--heading-weight: 600;
15-
--body-weight: 400;
16-
}
17-
18-
@media (prefers-color-scheme: dark) {
19-
:root {
20-
--background: #1e1e1e; /* Notion dark mode background */
21-
--foreground: #ffffff; /* Notion dark mode text */
22-
--muted: #a3a3a3; /* Lighter gray for contrast */
23-
--border: #2f2f2f; /* Dark gray border */
24-
--accent: #529cca; /* Slightly softer blue in dark mode */
25-
}
7+
--notion-default: #373530;
8+
--notion-gray: #787774;
9+
--notion-brown: #976D57;
10+
--notion-orange: #CC782F;
11+
--notion-yellow: #C29343;
12+
--notion-green: #548164;
13+
--notion-blue: #487CA5;
14+
--notion-purple: #8A67AB;
15+
--notion-pink: #B35488;
16+
--notion-red: #C4554D;
17+
18+
--notion-bg-default: #FFFFFF;
19+
--notion-bg-gray: #F1F1EF;
20+
--notion-bg-brown: #F3EEEE;
21+
--notion-bg-orange: #F8ECDF;
22+
--notion-bg-yellow: #FAF3DD;
23+
--notion-bg-green: #EEF3ED;
24+
--notion-bg-blue: #E9F3F7;
25+
--notion-bg-purple: #F6F3F8;
26+
--notion-bg-pink: #F9F2F5;
27+
--notion-bg-red: #FAECEC;
28+
29+
--notion-background: #FFFFFF;
30+
}
31+
32+
/* Dark Theme */
33+
[data-theme="dark"] {
34+
--notion-default: #D4D4D4;
35+
--notion-gray: #9B9B9B;
36+
--notion-brown: #A27763;
37+
--notion-orange: #CB7B37;
38+
--notion-yellow: #C19138;
39+
--notion-green: #4F9768;
40+
--notion-blue: #447ACB;
41+
--notion-purple: #865DBB;
42+
--notion-pink: #BA4A78;
43+
--notion-red: #BE524B;
44+
45+
--notion-bg-default: #191919;
46+
--notion-bg-gray: #252525;
47+
--notion-bg-brown: #2E2724;
48+
--notion-bg-orange: #36291F;
49+
--notion-bg-yellow: #372E20;
50+
--notion-bg-green: #242B26;
51+
--notion-bg-blue: #1F282D;
52+
--notion-bg-purple: #2A2430;
53+
--notion-bg-pink: #2E2328;
54+
--notion-bg-red: #332523;
55+
56+
--notion-background: #191919;
2657
}
2758

2859
body {
29-
@apply bg-[var(--background)] text-[var(--foreground)];
30-
font-family: "Inter", sans-serif;
31-
font-weight: var(--body-weight);
32-
line-height: 1.6;
33-
letter-spacing: 0.01em;
34-
font-size: 16px;
35-
margin: 0;
36-
padding: 0;
37-
}
38-
39-
/* Headings */
40-
h1,
41-
h2,
42-
h3,
43-
h4,
44-
h5,
45-
h6 {
46-
font-weight: var(--heading-weight);
47-
color: var(--foreground);
48-
margin-top: 1rem;
49-
margin-bottom: 1.5rem;
50-
}
51-
52-
/* Headings Sizes */
53-
h1 {
54-
@apply text-4xl md:text-5xl;
55-
}
56-
h2 {
57-
@apply text-3xl md:text-4xl;
58-
}
59-
h3 {
60-
@apply text-2xl md:text-3xl;
61-
}
62-
h4 {
63-
@apply text-xl md:text-2xl;
64-
}
65-
h5 {
66-
@apply text-lg md:text-xl;
67-
}
68-
h6 {
69-
@apply text-base md:text-lg;
70-
}
71-
72-
/* Links */
73-
a {
74-
@apply text-[var(--accent)] hover:underline;
75-
}
76-
77-
/* Paragraphs */
78-
p {
79-
margin: 0.5rem 0
80-
}
81-
82-
/* Muted text */
83-
.muted {
84-
color: var(--muted);
85-
}
86-
87-
/* Borders */
88-
.border {
89-
border-color: var(--border);
90-
}
91-
92-
/* Lists */
93-
li {
94-
margin-top: 0.5rem;
95-
margin-bottom: 0.5rem;
96-
margin-left: 1rem;
97-
}
98-
99-
/* Code blocks */
100-
code {
101-
@apply bg-gray-100 dark:bg-gray-800 rounded px-2 py-1 text-sm;
102-
font-family: monospace;
103-
margin: 0 0.2rem;
104-
}
105-
106-
/* Container */
107-
.container {
108-
max-width: 1200px;
109-
margin: 0 auto;
110-
padding: 2rem 1rem;
111-
}
112-
113-
@media (max-width: 768px) {
114-
.container {
115-
max-width: 100%;
116-
padding: 1rem 0.5rem;
117-
}
118-
}
60+
background-color: var(--notion-background);
61+
color: var(--notion-default);
62+
}

‎src/app/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export default function RootLayout({
1212
children: React.ReactNode;
1313
}>) {
1414
return (
15-
<html lang="en">
16-
<body className="container">{children}</body>
15+
<html lang="en" data-theme="dark">
16+
<body>{children}</body>
1717
</html>
1818
);
1919
}

‎src/lib/notion/utils.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/lib/notion/utils.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import { RichTextItemResponse } from "@notionhq/client/build/src/api-endpoints";
3+
4+
export const richTextToPlainText = (
5+
richText: RichTextItemResponse[]
6+
): string => {
7+
return richText.map((textObj) => textObj.plain_text).join(" ");
8+
};
9+
10+
export const renderRichText = (richText: RichTextItemResponse[]) => {
11+
return richText.map((textObj, index) => {
12+
const key = `${textObj.plain_text}-${index}`;
13+
const text = textObj.plain_text;
14+
const annotations = textObj.annotations;
15+
const classNames = [];
16+
17+
if (annotations.code) {
18+
return <code key={key}>{text}</code>;
19+
}
20+
21+
if (annotations.bold) {
22+
classNames.push("font-bold");
23+
}
24+
25+
if (annotations.italic) {
26+
classNames.push("italic");
27+
}
28+
29+
if (annotations.strikethrough) {
30+
classNames.push("line-through");
31+
}
32+
33+
if (annotations.underline) {
34+
classNames.push("underline");
35+
}
36+
37+
if (annotations.color) {
38+
const isBackground = annotations.color.includes("background");
39+
const colorClassName = isBackground
40+
? `bg-notion-${annotations.color.split("_")[0]}`
41+
: `text-notion-${annotations.color}`;
42+
classNames.push(colorClassName);
43+
}
44+
45+
const className = classNames.join(" ");
46+
return (
47+
<span key={key} className={className}>
48+
{text}
49+
</span>
50+
);
51+
});
52+
};

0 commit comments

Comments
 (0)