16 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/i18n/get-server-current-language.ts:
--------------------------------------------------------------------------------
1 | // i18n/get-current-language.ts
2 |
3 | import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from "./supported-languages";
4 |
5 | import { staticGenerationAsyncStorage } from "next/dist/client/components/static-generation-async-storage.external";
6 |
7 | export function getServerCurrentLanguage(): string {
8 | let lang = DEFAULT_LANGUAGE; // 기본 언어 설정
9 |
10 | if (typeof window === "undefined") {
11 | const store = staticGenerationAsyncStorage.getStore();
12 | const pathname = store?.urlPathname;
13 |
14 | if (pathname) {
15 | // 경로명에서 언어 코드 추출 (예: /ko/...)
16 | const segments = pathname.split("/");
17 | if (segments.length > 1 && segments[1]) {
18 | const potentialLang = segments[1];
19 | if (SUPPORTED_LANGUAGES.includes(potentialLang as any)) {
20 | lang = potentialLang;
21 | }
22 | }
23 | }
24 | }
25 |
26 | return lang;
27 | }
28 |
--------------------------------------------------------------------------------
/i18n/index.ts:
--------------------------------------------------------------------------------
1 | import { getServerTranslations } from "./get-server-translations";
2 | import { useTranslations } from "./use-translations";
3 | import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE } from "./supported-languages";
4 | import { useCurrentLanguage } from "./use-current-language";
5 | import { ClientTranslationsProvider } from "./internal/client-translations-provider";
6 | import TranslationsProvider from "./translations-provider";
7 | import { getPreferredLanguage } from "./get-preferred-language";
8 | import { getServerCurrentLanguage } from "./get-server-current-language";
9 | import { generateStaticParams } from "./generate-static-params";
10 |
11 | export {
12 | useTranslations,
13 | getServerTranslations,
14 | SUPPORTED_LANGUAGES,
15 | DEFAULT_LANGUAGE,
16 | useCurrentLanguage,
17 | ClientTranslationsProvider,
18 | TranslationsProvider,
19 | getPreferredLanguage,
20 | getServerCurrentLanguage,
21 | generateStaticParams,
22 | };
23 |
--------------------------------------------------------------------------------
/i18n/messages/ko.ts:
--------------------------------------------------------------------------------
1 | import { Messages } from "./types";
2 |
3 | const ko: Messages = {
4 | header: {
5 | home: "홈",
6 | blog: "블로그",
7 | github: "깃허브",
8 | docs: "문서",
9 | tutorial: "튜토리얼",
10 | contributing: "기여하기",
11 | showcase: "쇼케이스",
12 | },
13 | home: {
14 | title: "커피 한 잔과\n노션프레소",
15 | getStarted: "시작하기",
16 | readMore: "문서보기",
17 | },
18 | metadata: {
19 | title: "노션프레소 문서",
20 | description:
21 | "React 애플리케이션에서 Notion 페이지를 렌더링하기 위한 강력한 도구인 노션프레소 라이브러리의 종합 문서입니다.",
22 | keywords: ["리액트", "노션", "커스텀", "문서", "라이브러리", "렌더링"],
23 | og: {
24 | title: "노션프레소 문서",
25 | description: "React 앱에서 Notion 페이지를 렌더링하는 방법을 배워보세요.",
26 | siteName: "노션프레소",
27 | imageAlt: "노션프레소 문서",
28 | },
29 | twitter: {
30 | title: "노션프레소 문서",
31 | description: "React 앱에서 Notion 페이지를 렌더링하는 방법을 배워보세요.",
32 | imageAlt: "노션프레소 문서",
33 | },
34 | },
35 | };
36 |
37 | export default ko;
38 |
--------------------------------------------------------------------------------
/i18n/messages/cn.ts:
--------------------------------------------------------------------------------
1 | import { Messages } from "./types";
2 |
3 | const cn: Messages = {
4 | header: {
5 | home: "首页",
6 | blog: "博客",
7 | github: "GitHub",
8 | docs: "文档",
9 | tutorial: "教程",
10 | contributing: "贡献",
11 | showcase: "展示",
12 | },
13 | home: {
14 | title: "一杯咖啡和\nNotionpresso",
15 | getStarted: "开始使用",
16 | readMore: "查看文档",
17 | },
18 | metadata: {
19 | title: "Notionpresso 文档",
20 | description:
21 | "Notionpresso库的综合文档，这是一个在React应用程序中渲染Notion页面的强大工具。",
22 | keywords: ["react", "notion", "自定义", "文档", "库", "渲染"],
23 | og: {
24 | title: "Notionpresso 文档",
25 | description: "学习如何使用Notionpresso在React应用中渲染Notion页面。",
26 | siteName: "Notionpresso",
27 | imageAlt: "Notionpresso 文档",
28 | },
29 | twitter: {
30 | title: "Notionpresso 文档",
31 | description: "学习如何使用Notionpresso在React应用中渲染Notion页面。",
32 | imageAlt: "Notionpresso 文档",
33 | },
34 | },
35 | };
36 |
37 | export default cn;
38 |
--------------------------------------------------------------------------------
/components/docs/dynamic-layout.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 |
3 | interface DynamicLayoutProps {
4 | sidebar: React.ReactNode;
5 | toc: React.ReactNode;
6 | mobileSidebar: React.ReactNode;
7 | children: React.ReactNode;
8 | }
9 |
10 | export default function DynamicLayout({
11 | sidebar,
12 | toc,
13 | mobileSidebar,
14 | children,
15 | }: DynamicLayoutProps) {
16 | return (
17 |
22 | {/* Sidebar for desktop */}
23 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/i18n/internal/load-translations.ts:
--------------------------------------------------------------------------------
1 | import type { Messages } from "../messages/types";
2 | import { SUPPORTED_LANGUAGES, SupportedLanguage } from "../supported-languages";
3 |
4 | export async function loadTranslations(lang: string): Promise{sidebar}
24 |
25 | {/* Mobile sidebar */}
26 | {mobileSidebar}
27 |
28 | {/* Main content */}
29 | {children}
30 |
31 | {/* TOC - only visible on desktop */}
32 | {toc}
33 |
9 | {/* left */}
10 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/components/docs/navigation-button.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/24/solid";
3 |
4 | interface NavigationButtonProps {
5 | document: {
6 | group: string;
7 | slug: string;
8 | title: string;
9 | };
10 | lang: string;
11 | direction: "prev" | "next";
12 | }
13 |
14 | export default function NavigationButton({
15 | document,
16 | lang,
17 | direction,
18 | }: NavigationButtonProps) {
19 | return (
20 |
24 | {direction === "prev" ? (
25 |
11 |
14 | {/* right */}
15 | Released under the MIT License.
12 |Copyright NotionPresso
13 |
16 |
38 |
26 |
29 | ) : (
30 | {document.title}
28 |
31 |
34 | )}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/i18n/messages/en.ts:
--------------------------------------------------------------------------------
1 | import { Messages } from "./types";
2 |
3 | const en: Messages = {
4 | header: {
5 | home: "Home",
6 | blog: "Blog",
7 | github: "Github",
8 | docs: "Docs",
9 | tutorial: "Tutorial",
10 | contributing: "Contributing",
11 | showcase: "Showcase",
12 | },
13 | home: {
14 | title: "Just a cup of coffee\nwith NotionPresso",
15 | getStarted: "Get Started",
16 | readMore: "Read the Docs",
17 | },
18 | metadata: {
19 | title: "Notionpresso Docs",
20 | description:
21 | "Comprehensive documentation for Notionpresso library, a powerful tool for rendering Notion pages in React applications.",
22 | keywords: [
23 | "react",
24 | "notion",
25 | "custom",
26 | "documentation",
27 | "library",
28 | "rendering",
29 | ],
30 | og: {
31 | title: "Notionpresso Documentation",
32 | description:
33 | "Learn how to use Notionpresso to render Notion pages in your React apps.",
34 | siteName: "Notionpresso",
35 | imageAlt: "Notionpresso Documentation",
36 | },
37 | twitter: {
38 | title: "Notionpresso Documentation",
39 | description:
40 | "Learn how to use Notionpresso to render Notion pages in your React apps.",
41 | imageAlt: "Notionpresso Documentation",
42 | },
43 | },
44 | };
45 |
46 | export default en;
47 |
--------------------------------------------------------------------------------
/app/[lang]/tutorial/page.tsx:
--------------------------------------------------------------------------------
1 | import { NotionRenderer } from "@/components/notion-renderer";
2 | //TODO: dynamic import is needed for better performance (don't need to import all the content at once)
3 | import * as ko from "@/content/tutorial/ko/126ce18c-fd83-80a5-8260-d757c56405b2.json";
4 | import * as en from "@/content/tutorial/en/12ace18c-fd83-8071-b3a5-dd8d21da61cf.json";
5 | import type { Metadata } from "next";
6 |
7 | export const runtime = "edge";
8 |
9 | export { generateStaticParams } from "@/i18n";
10 |
11 | export async function generateMetadata({
12 | params,
13 | }: {
14 | params: { lang: string };
15 | }): Promise{document.title}
32 |
43 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import "./globals.css";
3 |
4 | export const metadata: Metadata = {
5 | metadataBase: new URL("https://notionpresso.com"),
6 | title: "Notionpresso Docs",
7 | description:
8 | "Comprehensive documentation for Notionpresso library, a powerful tool for rendering Notion pages in React applications.",
9 | keywords: "react, notion, custom, documentation, library, rendering",
10 | icons: {
11 | icon: "/icon.jpeg",
12 | shortcut: "/icon.jpeg",
13 | apple: "/icon.jpeg",
14 | },
15 | robots: {
16 | index: true,
17 | follow: true,
18 | googleBot: {
19 | index: true,
20 | follow: true,
21 | "max-video-preview": -1,
22 | "max-image-preview": "large",
23 | "max-snippet": -1,
24 | },
25 | },
26 | openGraph: {
27 | title: "Notionpresso Documentation",
28 | description:
29 | "Learn how to use Notionpresso to render Notion pages in your React apps.",
30 | type: "website",
31 | url: "https://notionpresso.com",
32 | siteName: "Notionpresso",
33 | images: [
34 | {
35 | url: "/icon.jpeg",
36 | alt: "Notionpresso Documentation",
37 | },
38 | ],
39 | },
40 | twitter: {
41 | card: "summary_large_image",
42 | title: "Notionpresso Documentation",
43 | description:
44 | "Learn how to use Notionpresso to render Notion pages in your React apps.",
45 | images: ["/icon.jpeg"],
46 | },
47 | };
48 |
49 | export default function RootLayout({
50 | children,
51 | }: Readonly<{
52 | children: React.ReactNode;
53 | }>) {
54 | return <>{children};
55 | }
56 |
--------------------------------------------------------------------------------
/lib/prevent-scrollbar.ts:
--------------------------------------------------------------------------------
1 | type GapMode = "padding" | "margin";
2 |
3 | interface GapOffset {
4 | left: number;
5 | top: number;
6 | right: number;
7 | gap: number;
8 | }
9 |
10 | const zeroGap = {
11 | left: 0,
12 | top: 0,
13 | right: 0,
14 | gap: 0,
15 | };
16 |
17 | const parse = (x: string | null) => parseInt(x || "", 10) || 0;
18 |
19 | const getOffset = (gapMode: GapMode): number[] => {
20 | const cs = window.getComputedStyle(document.body);
21 |
22 | const left = cs[gapMode === "padding" ? "paddingLeft" : "marginLeft"];
23 | const top = cs[gapMode === "padding" ? "paddingTop" : "marginTop"];
24 | const right = cs[gapMode === "padding" ? "paddingRight" : "marginRight"];
25 |
26 | return [parse(left), parse(top), parse(right)];
27 | };
28 |
29 | const getGapWidth = (gapMode: GapMode = "margin"): GapOffset => {
30 | if (typeof window === "undefined") {
31 | return zeroGap;
32 | }
33 |
34 | const offsets = getOffset(gapMode);
35 | const documentWidth = document.documentElement.clientWidth;
36 | const windowWidth = window.innerWidth;
37 |
38 | return {
39 | left: offsets[0],
40 | top: offsets[1],
41 | right: offsets[2],
42 | gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
43 | };
44 | };
45 |
46 | const preventScroll = (isOpen: boolean) => {
47 | if (isOpen) {
48 | const { gap } = getGapWidth("padding");
49 | document.body.style.overflow = "hidden";
50 | document.body.style.paddingRight = `${gap}px`;
51 | } else {
52 | document.body.style.overflow = "";
53 | document.body.style.paddingRight = "";
54 | }
55 | };
56 |
57 | export default preventScroll;
58 |
--------------------------------------------------------------------------------
/i18n/use-translations.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useContext } from "react";
4 | import { TranslationsContext } from "./internal/client-translations-provider";
5 | import { interpolate } from "./internal/interpolate";
6 | import { Messages } from "./messages/types";
7 |
8 | // 중첩된 키를 점으로 연결하여 추출하는 유틸리티 타입
9 | type NestedKeyOf
69 |
74 | );
75 | };
76 |
77 | export default Paragraph;
78 | ```
79 |
80 | ## 使用示例
81 |
82 | 段落块的使用示例如下：
83 |
84 | ```jsx
85 | import { Notion } from "@notionpresso/react";
86 |
87 | function MyNotionPage({ blocks }) {
88 | return (
89 |
70 |
4 |
5 | 
6 |
7 |
NotionPresso Documentation
8 | 9 | 10 |
11 |
12 | 
13 |
14 |
15 | 
16 |
17 |
69 |
74 | );
75 | };
76 |
77 | export default Paragraph;
78 | ```
79 |
80 | ## 使用例
81 |
82 | 段落ブロックを使用する例は以下の通りです：
83 |
84 | ```jsx
85 | import { Notion } from "@notionpresso/react";
86 |
87 | function MyNotionPage({ blocks }) {
88 | return (
89 |
70 |
69 |
74 | );
75 | };
76 |
77 | export default Paragraph;
78 | ```
79 |
80 | ## 사용 예시
81 |
82 | Paragraph 블록을 사용하는 예시는 다음과 같습니다:
83 |
84 | ```jsx
85 | import { Notion } from "@notionpresso/react";
86 |
87 | function MyNotionPage({ blocks }) {
88 | return (
89 |
70 |
23 |
79 |
29 |
35 |
77 |
78 | 40 | {t("title")} 41 |
42 | 43 |
44 | router.push("/tutorial")}
53 | whileHover={{ scale: 1.02 }}
54 | whileTap={{ scale: 0.98 }}
55 | >
56 | {t("getStarted")}
57 |
59 |
60 | router.push("/docs")}
69 | whileHover={{ scale: 1.02 }}
70 | whileTap={{ scale: 0.98 }}
71 | >
72 | {t("readMore")}
73 |
75 |
76 |
69 |
74 | );
75 | };
76 |
77 | export default Paragraph;
78 | ```
79 |
80 | ## Usage Example
81 |
82 | Here's an example of how to use the Paragraph block:
83 |
84 | ```jsx
85 | import { Notion } from "@notionpresso/react";
86 |
87 | function MyNotionPage({ blocks }) {
88 | return (
89 |
70 |
69 |
76 | );
77 | };
78 |
79 | export default Quote;
80 | ```
81 |
82 | ## 使用示例
83 |
84 | 引用块的使用示例如下：
85 |
86 | ```jsx
87 | import { Notion } from "@notionpresso/react";
88 |
89 | function MyNotionPage({ blocks }) {
90 | return (
91 |
70 |
75 |
71 |
31 |
47 |
48 | {isOpen && (
49 |
81 | );
82 | }
83 |
84 | export default LanguageSelector;
85 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Documentation Guide and Contribution
2 |
3 | [한국어 버전(Korean Version)](./CONTRIBUTING-KR.md)
4 |
5 | [Refer to the overall project contribution guide](../../CONTRIBUTING.md)
6 |
7 | ## Table of Contents
8 |
9 | 1. Website Structure
10 | 2. Page-specific Content
11 | 3. Technology Stack
12 | 4. Content Management
13 | 5. Multilingual Support
14 | 6. Development Roadmap
15 | 7. Additional Notes
16 |
17 | ## 1. Website Structure
18 |
19 | ```
20 | /
21 | ├── Landing Page
22 | ├── Documentation (Docs)
23 | ├── Blog
24 | ├── Showcase
25 | └── [Other Pages]
26 | ```
27 |
28 | ## 2. Page-specific Content
29 |
30 | ### 2.1 Landing Page
31 |
32 | - Project introduction
33 | - Key features highlight
34 | - Self-hosting guide with Notion (tutorial format)
35 | - "Get Started" button (linking to documentation)
36 |
37 | ### 2.2 Documentation (Docs)
38 |
39 | ```
40 | +------------------+
41 | | Sidebar |
42 | | - Category 1 |
43 | | - Document 1 |
44 | | - Document 2 |
45 | | - Category 2 |
46 | | - Document 3 |
47 | | - Document 4 |
48 | +------------------+
49 | | |
50 | | Content |
51 | | |
52 | | [Document Content]|
53 | | |
54 | +------------------+
55 | ```
56 |
57 | ### 2.3 Blog
58 |
59 | - Posts about development process, updates, tips, etc.
60 | - Sorting functionality by tags and dates
61 |
62 | ### 2.4 Showcase
63 |
64 | - Display of users' custom Notion pages
65 | - Filtering and sorting functionality
66 |
67 | ## 3. Technology Stack
68 |
69 | - Frontend: Next.js
70 | - CSS: TailwindCSS
71 | - UI Library: Radix UI or Aceternity UI (used as needed)
72 | - Markdown Rendering: Refer to Next.js official documentation
73 |
74 | ## 4. Content Management
75 |
76 | ### 4.1 Documentation (Docs)
77 |
78 | - Location: `/content/docs/[lang]/[category]/[document].md`
79 | - Frontmatter:
80 | - group: category
81 | - order: document order
82 | - title: document title
83 | - description: document description
84 |
85 | ### 4.2 Blog
86 |
87 | - Location: `/content/blog/[lang]/[post].md`
88 | - Frontmatter:
89 | - title: post title
90 | - description: post description
91 | - date: publication date
92 |
93 | ## 5. Multilingual Support
94 |
95 | - Supported languages: Korean (kr), English (en), Chinese (cn)
96 | - Markdown files: Managed separately for each language
97 | - UI text: Use multilingual support library
98 |
99 | ## 6. Development Roadmap
100 |
101 | 1. Basic Next.js project setup
102 | 2. TailwindCSS integration
103 | 3. Markdown rendering system implementation
104 | 4. Multilingual support system implementation
105 | 5. Landing page development
106 | 6. Documentation page development
107 | 7. Blog page development
108 | 8. Showcase page development
109 | 9. UI/UX improvements and optimization
110 | 10. Content creation and translation
111 | 11. Beta testing and feedback collection
112 | 12. Official launch
113 |
114 | ## 7. Additional Notes
115 |
116 | - Manage documents and blog posts in Markdown format
117 | - Include practical examples using the Notionpresso library on the landing page
118 | - Encourage continuous content updates and community participation
119 |
--------------------------------------------------------------------------------
/content/guide/cn/03. block-types/02. heading.md:
--------------------------------------------------------------------------------
1 | ---
2 | group: "block-types"
3 | order: 3
4 | title: "标题块"
5 | slug: "notion-block-heading"
6 | description: "详细介绍 Notionpresso 的标题块类型。"
7 | ---
8 |
9 | # 标题块
10 |
11 | 标题块用于表示文档的结构，支持三个级别（标题 1、标题 2、标题 3）。
12 |
13 | ## 数据结构
14 |
15 | 标题块的 Notion API 数据结构如下（以标题 1 为例）：
16 |
17 | ```json
18 | {
19 | "type": "heading_1",
20 | "heading_1": {
21 | "rich_text": [
22 | {
23 | "type": "text",
24 | "text": {
25 | "content": "This is a heading",
26 | "link": null
27 | },
28 | "annotations": {
29 | "bold": false,
30 | "italic": false,
31 | "strikethrough": false,
32 | "underline": false,
33 | "code": false,
34 | "color": "default"
35 | },
36 | "plain_text": "This is a heading",
37 | "href": null
38 | }
39 | ],
40 | "color": "default",
41 | "is_toggleable": false
42 | }
43 | }
44 | ```
45 |
46 | - `type`: "heading_1", "heading_2", 或 "heading_3" 其中之一。
47 | - `rich_text`: 包含标题文本内容和样式信息的数组。
48 | - `color`: 指定标题的颜色。
49 | - `is_toggleable`: 表示是否使用切换功能。
50 |
51 | ## React 组件
52 |
53 | Notionpresso 中用于渲染标题块的组件如下：
54 |
55 | ```jsx
56 | import React, { useMemo } from "react";
57 | import type { HeadingsProps, HeadingConfig } from "../types";
58 | import { getColorCss } from "../utils";
59 | import RichText from "./internal/rich-text";
60 |
61 | const Headings: React.FC
61 |
79 | )}
80 |
62 | {LANGUAGE_LIST.map((language) => (
63 |
76 | ))}
77 |
78 |
82 |
83 |
85 | {children}
86 |
87 | );
88 | };
89 |
90 | export default Headings;
91 | ```
92 |
93 | ## 使用示例
94 |
95 | 以下是使用标题块的示例：
96 |
97 | ```jsx
98 | import { Notion } from "@notionpresso/react";
99 |
100 | function MyNotionPage({ blocks }) {
101 | return (
102 |
71 |
79 | {content}
80 |
81 |
82 |
83 | 72 | {group} > {title} 73 |
74 |
84 |
103 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/content/guide/ja/03. block-types/06. quote.md:
--------------------------------------------------------------------------------
1 | ---
2 | group: "block-types"
3 | order: 6
4 | title: "引用ブロック"
5 | slug: "quote"
6 | description: "ノーションプレッソの引用ブロックタイプに関する詳細な説明です。"
7 | ---
8 |
9 | # 引用ブロック
10 |
11 | 引用ブロックは、他のソースからの引用テキストを表示するために使用されます。通常、視覚的に区別されるスタイルで表現されます。
12 |
13 | ## データ構造
14 |
15 | 引用ブロックのノーションAPIデータ構造は以下の通りです：
16 |
17 | ```json
18 | {
19 | "type": "quote",
20 | "quote": {
21 | "rich_text": [
22 | {
23 | "type": "text",
24 | "text": {
25 | "content": "This is a quote",
26 | "link": null
27 | },
28 | "annotations": {
29 | "bold": false,
30 | "italic": false,
31 | "strikethrough": false,
32 | "underline": false,
33 | "code": false,
34 | "color": "default"
35 | },
36 | "plain_text": "This is a quote",
37 | "href": null
38 | }
39 | ],
40 | "color": "default"
41 | }
42 | }
43 | ```
44 |
45 | - `rich_text`: 引用文のテキスト内容とスタイル情報を含む配列です。
46 | - `color`: 引用文の色を指定します。
47 |
48 | ## Reactコンポーネント
49 |
50 | Notionpressoで引用ブロックをレンダリングするコンポーネントは以下の通りです：
51 |
52 | ```jsx
53 | import React from "react";
54 | import type { QuoteArgs } from "../types";
55 | import { getColorCss } from "../utils";
56 | import RichText from "./internal/rich-text";
57 |
58 | type QuoteProps = {
59 | children?: React.ReactNode;
60 | } & QuoteArgs;
61 |
62 | const Quote: React.FC
85 | {prevDocument && (
86 |
93 |
94 | {nextDocument && (
95 |
102 |
69 |
76 | );
77 | };
78 |
79 | export default Quote;
80 | ```
81 |
82 | ## 使用例
83 |
84 | 引用ブロックを使用する例は以下の通りです：
85 |
86 | ```jsx
87 | import { Notion } from "@notionpresso/react";
88 |
89 | function MyNotionPage({ blocks }) {
90 | return (
91 |
70 |
75 |
71 |
-
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
69 |
76 | );
77 | };
78 |
79 | export default Quote;
80 | ```
81 |
82 | ## 사용 예시
83 |
84 | Quote 블록을 사용하는 예시는 다음과 같습니다:
85 |
86 | ```jsx
87 | import { Notion } from "@notionpresso/react";
88 |
89 | function MyNotionPage({ blocks }) {
90 | return (
91 |
70 |
75 |
71 |
82 |
83 |
85 | {children}
86 |
87 | );
88 | };
89 |
90 | export default Headings;
91 | ```
92 |
93 | ## 使用例
94 |
95 | 見出しブロックを使用する例は以下の通りです：
96 |
97 | ```jsx
98 | import { Notion } from "@notionpresso/react";
99 |
100 | function MyNotionPage({ blocks }) {
101 | return (
102 |
82 |
83 |
85 | {children}
86 |
87 | );
88 | };
89 |
90 | export default Headings;
91 | ```
92 |
93 | ## 사용 예시
94 |
95 | Heading 블록을 사용하는 예시는 다음과 같습니다:
96 |
97 | ```jsx
98 | import { Notion } from "@notionpresso/react";
99 |
100 | function MyNotionPage({ blocks }) {
101 | return (
102 | -
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
75 |
85 | );
86 | };
87 |
88 | export default Callout;
89 | ```
90 |
91 | ## 使用示例
92 |
93 | 标注块的使用示例如下：
94 |
95 | ```jsx
96 | import { Notion } from "@notionpresso/react";
97 |
98 | function MyNotionPage({ blocks }) {
99 | return (
100 |
76 |
79 |
83 | {children}
84 |
80 |
82 | -
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
Document not found
", 68 | title: "Not Found", 69 | group: "", 70 | prevDocument: null, 71 | nextDocument: null, 72 | }; 73 | 74 | if (!lang || !group || !slug) { 75 | return NOT_FOUND_DOCUMENT; 76 | } 77 | 78 | // Filter documents in the same group and sort them if necessary 79 | const documentsInGroup = allDocuments.filter((doc) => doc.group === group); 80 | 81 | const currentIndex = documentsInGroup.findIndex((doc) => doc.slug === slug); 82 | 83 | if (currentIndex === -1) { 84 | return NOT_FOUND_DOCUMENT; 85 | } 86 | 87 | const document = documentsInGroup[currentIndex]; 88 | 89 | let prevDocument = 90 | currentIndex > 0 ? documentsInGroup[currentIndex - 1] : null; 91 | let nextDocument = 92 | currentIndex < documentsInGroup.length - 1 93 | ? documentsInGroup[currentIndex + 1] 94 | : null; 95 | 96 | const allGroups = Array.from(new Set(allDocuments.map((doc) => doc.group))); 97 | const currentGroupIndex = allGroups.indexOf(group); 98 | 99 | if (!prevDocument && currentGroupIndex > 0) { 100 | const prevGroup = allGroups[currentGroupIndex - 1]; 101 | const prevGroupDocs = allDocuments.filter((doc) => doc.group === prevGroup); 102 | prevDocument = prevGroupDocs[prevGroupDocs.length - 1]; 103 | } 104 | 105 | if (!nextDocument && currentGroupIndex < allGroups.length - 1) { 106 | const nextGroup = allGroups[currentGroupIndex + 1]; 107 | const nextGroupDocs = allDocuments.filter((doc) => doc.group === nextGroup); 108 | nextDocument = nextGroupDocs[0]; 109 | } 110 | 111 | return { 112 | ...document, 113 | prevDocument, 114 | nextDocument, 115 | }; 116 | } 117 | -------------------------------------------------------------------------------- /content/guide/ko/03. block-types/03. bulleted-list-item.md: -------------------------------------------------------------------------------- 1 | --- 2 | group: "block-types" 3 | order: 4 4 | title: "Bulleted List Item 블록" 5 | slug: "notion-block-bulleted-list-item" 6 | description: "Notionpresso의 Bulleted List Item 블록 타입에 대한 상세 설명입니다." 7 | --- 8 | 9 | # Bulleted List Item 블록 10 | 11 | Bulleted List Item 블록은 순서가 없는 목록을 만드는 데 사용됩니다. 각 항목은 글머리 기호(bullet)로 시작합니다. 12 | 13 | ## 데이터 구조 14 | 15 | Bulleted List Item 블록의 Notion API 데이터 구조는 다음과 같습니다: 16 | 17 | ```json 18 | { 19 | "type": "bulleted_list_item", 20 | "bulleted_list_item": { 21 | "rich_text": [ 22 | { 23 | "type": "text", 24 | "text": { 25 | "content": "This is a bulleted list item", 26 | "link": null 27 | }, 28 | "annotations": { 29 | "bold": false, 30 | "italic": false, 31 | "strikethrough": false, 32 | "underline": false, 33 | "code": false, 34 | "color": "default" 35 | }, 36 | "plain_text": "This is a bulleted list item", 37 | "href": null 38 | } 39 | ], 40 | "color": "default" 41 | } 42 | } 43 | ``` 44 | 45 | - `rich_text`: 리스트 항목의 텍스트 내용과 스타일 정보를 담고 있는 배열입니다. 46 | - `color`: 텍스트의 색상을 지정합니다. 47 | 48 | ## React 컴포넌트 49 | 50 | Notionpresso에서 Bulleted List Item 블록을 렌더링하는 컴포넌트는 다음과 같습니다: 51 | 52 | ```jsx 53 | import React from "react"; 54 | import type { BulletedListItemArgs } from "../types"; 55 | import { bulletedListItemMarker, getColorCss } from "../utils"; 56 | import RichText from "./internal/rich-text"; 57 | 58 | type BulletedListItemProps = { 59 | children?: React.ReactNode; 60 | } & BulletedListItemArgs; 61 | 62 | const BulletedListItem: React.FC-
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
49 |
60 | {isOpen && (
61 |
102 | );
103 | }
104 |
--------------------------------------------------------------------------------
/content/guide/ja/03. block-types/05. numbered-list-item.md:
--------------------------------------------------------------------------------
1 | ---
2 | group: "block-types"
3 | order: 5
4 | title: "番号付きリストアイテムブロック"
5 | slug: "numbered-list-item"
6 | description: "ノーションプレッソの番号付きリストアイテムブロックタイプに関する詳細な説明です。"
7 | ---
8 |
9 | # 番号付きリストアイテムブロック
10 |
11 | 番号付きリストアイテムブロックは、順序のあるリストを作成するために使用されます。各項目は連番で始まります。
12 |
13 | ## データ構造
14 |
15 | 番号付きリストアイテムブロックのノーションAPIデータ構造は以下の通りです：
16 |
17 | ```json
18 | {
19 | "type": "numbered_list_item",
20 | "numbered_list_item": {
21 | "rich_text": [
22 | {
23 | "type": "text",
24 | "text": {
25 | "content": "This is a numbered list item",
26 | "link": null
27 | },
28 | "annotations": {
29 | "bold": false,
30 | "italic": false,
31 | "strikethrough": false,
32 | "underline": false,
33 | "code": false,
34 | "color": "default"
35 | },
36 | "plain_text": "This is a numbered list item",
37 | "href": null
38 | }
39 | ],
40 | "color": "default"
41 | }
42 | }
43 | ```
44 |
45 | - `rich_text`: リストアイテムのテキスト内容とスタイル情報を含む配列です。
46 | - `color`: テキストの色を指定します。
47 |
48 | ## Reactコンポーネント
49 |
50 | Notionpressoで番号付きリストアイテムブロックをレンダリングするコンポーネントは以下の通りです：
51 |
52 | ```jsx
53 | import React from "react";
54 | import type { NumberedListItemArgs } from "../types";
55 | import { getColorCss, numberedListItemMarker } from "../utils";
56 | import RichText from "./internal/rich-text";
57 |
58 | type NumberedListProps = {
59 | children?: React.ReactNode;
60 | } & NumberedListItemArgs;
61 |
62 | const NumberedListItem: React.FC
62 | {Object.entries(groupedDocuments).map(([group, docs]) => (
63 |
100 | )}
101 |
64 |
75 | {openGroup === group && (
76 |
95 | ))}
96 | -
77 | {docs.map((doc) => (
78 |
-
79 |
87 | {doc.title}
88 |
89 | 90 |
91 | ))}
92 |
97 |
99 | -
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
82 |
83 |
85 | {children}
86 |
87 | );
88 | };
89 |
90 | export default Headings;
91 | ```
92 |
93 | ## Usage Example
94 |
95 | Here's an example of how to use the Heading block:
96 |
97 | ```jsx
98 | import { Notion } from "@notionpresso/react";
99 |
100 | function MyNotionPage({ blocks }) {
101 | return (
102 |
75 |
85 | );
86 | };
87 |
88 | export default Callout;
89 | ```
90 |
91 | ## 使用例
92 |
93 | コールアウトブロックを使用する例は以下の通りです：
94 |
95 | ```jsx
96 | import { Notion } from "@notionpresso/react";
97 |
98 | function MyNotionPage({ blocks }) {
99 | return (
100 |
76 |
79 |
83 | {children}
84 |
80 |
82 |
75 |
85 | );
86 | };
87 |
88 | export default Callout;
89 | ```
90 |
91 | ## 사용 예시
92 |
93 | Callout 블록을 사용하는 예시는 다음과 같습니다:
94 |
95 | ```jsx
96 | import { Notion } from "@notionpresso/react";
97 |
98 | function MyNotionPage({ blocks }) {
99 | return (
100 |
76 |
79 |
83 | {children}
84 |
80 |
82 |
69 |
76 | );
77 | };
78 |
79 | export default Quote;
80 | ```
81 |
82 | ## Usage Example
83 |
84 | Here's an example of how to use the Quote block:
85 |
86 | ```jsx
87 | import { Notion } from "@notionpresso/react";
88 |
89 | function MyNotionPage({ blocks }) {
90 | return (
91 |
70 |
75 |
71 |
-
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
82 |
97 | );
98 | };
99 |
100 | export default Toggle;
101 | ```
102 |
103 | ## 使用示例
104 |
105 | 使用折叠块的示例如下：
106 |
107 | ```jsx
108 | import { Notion } from "@notionpresso/react";
109 |
110 | function MyNotionPage({ blocks }) {
111 | return (
112 |
83 |
90 |
94 |
95 | {open && children}
96 |
91 |
-
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |
82 |
97 | );
98 | };
99 |
100 | export default Toggle;
101 | ```
102 |
103 | ## 使用例
104 |
105 | トグルブロックを使用する例は以下の通りです：
106 |
107 | ```jsx
108 | import { Notion } from "@notionpresso/react";
109 |
110 | function MyNotionPage({ blocks }) {
111 | return (
112 |
83 |
90 |
94 |
95 | {open && children}
96 |
91 |
82 |
97 | );
98 | };
99 |
100 | export default Toggle;
101 | ```
102 |
103 | ## 사용 예시
104 |
105 | Toggle 블록을 사용하는 예시는 다음과 같습니다:
106 |
107 | ```jsx
108 | import { Notion } from "@notionpresso/react";
109 |
110 | function MyNotionPage({ blocks }) {
111 | return (
112 |
83 |
90 |
94 |
95 | {open && children}
96 |
91 |
43 |
53 |
44 |
52 | 45 | Create Limitless Experiences 46 |
47 |48 | Break free from Notion's limitations. Your imagination becomes 49 | reality with NotionPresso 50 |
51 |
58 |
109 |
59 | {/* Showcase Cards */}
60 | {SHOWCASE_ITEMS.map((item, index) => (
61 |
108 |
65 |
94 | ))}
95 |
96 | {/* Placeholder Cards */}
97 | {[...Array(PLACEHOLDER_COUNT)].map((_, index) => (
98 |
66 | 
71 |
77 |
72 |
73 | {item.badge}
74 |
75 |
76 |
78 |
93 | 79 | {item.title} 80 |
81 |82 | {item.description} 83 |
84 |
85 |
89 | Visit Site →
90 |
91 |
92 |
102 |
106 | ))}
107 |
103 |
105 | Coming Soon
104 |-
76 |
-
77 | 78 | 82 | {marker} 83 | 84 |88 | {children} 89 |
85 |
87 |86 |
90 |