rename

Author: Moon-DaeSeung

CONTRIBUTING-KR.md

@@ -112,5 +112,5 @@
 ## 7. 참고 사항
 
 - 문서와 블로그 포스트는 마크다운 형식으로 관리
-- 랜딩 페이지는 react-notion-custom 라이브러리를 활용한 실제 예시 포함
+- 랜딩 페이지는 Notionpresso 라이브러리를 활용한 실제 예시 포함
 - 지속적인 콘텐츠 업데이트 및 커뮤니티 참여 독려

CONTRIBUTING.md

@@ -114,5 +114,5 @@
 ## 7. Additional Notes
 
 - Manage documents and blog posts in Markdown format
-- Include practical examples using the react-notion-custom library on the landing page
+- Include practical examples using the Notionpresso library on the landing page
 - Encourage continuous content updates and community participation

app/[lang]/docs/[group]/[slug]/page.tsx

@@ -42,10 +42,10 @@ export async function generateMetadata({
   const document = getDocumentBySlug(lang, group, slug, allDocuments);
 
   return {
-    title: `${document.title} | react-notion-custom Docs`,
+    title: `${document.title} | Notionpresso Docs`,
     description: document.content.slice(0, 160),
     openGraph: {
-      title: `${document.title} | react-notion-custom Docs`,
+      title: `${document.title} | Notionpresso Docs`,
       description: document.content.slice(0, 160),
       // url: "",
     },

app/layout.tsx

@@ -11,14 +11,14 @@ const pretendard = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "react-notion-custom Docs",
+  title: "Notionpresso Docs",
   description:
-    "Comprehensive documentation for react-notion-custom library, a powerful tool for rendering Notion pages in React applications.",
+    "Comprehensive documentation for Notionpresso library, a powerful tool for rendering Notion pages in React applications.",
   keywords: "react, notion, custom, documentation, library, rendering",
   openGraph: {
-    title: "react-notion-custom Documentation",
+    title: "Notionpresso Documentation",
     description:
-      "Learn how to use react-notion-custom to render Notion pages in your React apps.",
+      "Learn how to use Notionpresso to render Notion pages in your React apps.",
     type: "website",
     // TODO: Add URL and image
     // url: "",

components/effects/mouse-image-effect.tsx

@@ -45,9 +45,7 @@ export default function MouseImageEffect() {
       className="relative h-screen overflow-hidden flex items-center justify-center bg-white dark:bg-black"
     >
       <div className="text-center z-10 font-Inter text-black dark:text-white">
-        <h1 className="text-xl font-bold mb-4 md:text-6xl">
-          react-notion-custom
-        </h1>
+        <h1 className="text-xl font-bold mb-4 md:text-6xl">Notionpresso</h1>
         <p className="text-sm md:text-xl">
           Create Your Custom Blog with Notion
         </p>

components/navigation.tsx

@@ -25,9 +25,7 @@ export default function Navigation() {
               className="logo-image"
               style={{ cursor: "pointer" }}
             />
-            <p className="dark:text-white hidden sm:block">
-              react-notion-custom
-            </p>
+            <p className="dark:text-white hidden sm:block">Notionpresso</p>
           </Link>
 
           <div className="flex gap-5 items-center ml-auto">

content/guide/en/01. getting-started/01. introduction.md

@@ -3,14 +3,14 @@ group: "getting-started"
 order: 1
 title: "Project Introduction"
 slug: "introduction"
-description: "An overview of the React-Notion-Custom project, its key features, and potential applications."
+description: "An overview of the Notionpresso project, its key features, and potential applications."
 ---
 
-# Introduction to React-Notion-Custom Project
+# Introduction to Notionpresso Project
 
-## What is React-Notion-Custom?
+## What is Notionpresso?
 
-React-Notion-Custom is a tool that allows you to easily bring Notion's powerful content creation capabilities to your website. This library enables you to render content created in Notion directly on your React-based website. It's a "magic potion" for both developers and content creators - allowing developers to quickly produce results and providing content creators with a convenient management tool. ✨
+Notionpresso is a tool that allows you to easily bring Notion's powerful content creation capabilities to your website. This library enables you to render content created in Notion directly on your React-based website. It's a "magic potion" for both developers and content creators - allowing developers to quickly produce results and providing content creators with a convenient management tool. ✨
 
 ## Key Features and Provided Value
 
@@ -19,7 +19,7 @@ React-Notion-Custom is a tool that allows you to easily bring Notion's powerful
 You can easily convert various content from Notion such as text, images, lists, code blocks, etc., into React components. Notion pages are reborn on the web with the following structure:
 
 ```jsx
-import { Notion, type NotionPageData } from 'react-notion-custom';
+import { Notion, type NotionPageData } from 'Notionpresso';
 
 interface NotionPageProps {
   pageData: NotionPageData;
@@ -42,17 +42,17 @@ In this example, the `NotionPageData` type defines the data structure of a Notio
 
 ### 🎨 Freedom of Customization
 
-You can easily change themes by just tweaking CSS, or partially modify the provided components to customize only the parts you need. You can even create completely new components and combine them with React-Notion-Custom. It offers unlimited possibilities for developers who handle code.
+You can easily change themes by just tweaking CSS, or partially modify the provided components to customize only the parts you need. You can even create completely new components and combine them with Notionpresso. It offers unlimited possibilities for developers who handle code.
 
 ### 🚀 Rapid Site Construction
 
-You can easily extract Notion data using the Notion-dump CLI and quickly build static sites through frameworks like Next.js. The process of building a site with just a few commands feels like a website is completed right from the text.
+You can easily extract Notion data using the @notionpresso/cli CLI and quickly build static sites through frameworks like Next.js. The process of building a site with just a few commands feels like a website is completed right from the text.
 
 ```bash
-npx notion-dump --page YOUR_PAGE_URL --auth YOUR_API_KEY
+npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY
 ```
 
-When you run notion-dump, Notion data is extracted into the following folder structure:
+When you run @notionpresso/cli, Notion data is extracted into the following folder structure:
 
 ```
 my-notion-project/
@@ -73,13 +73,13 @@ my-notion-project/
 - `notion-data/`: The content of each Notion page is stored in JSON format. The file name is generated based on the page's slug.
 - `public/images/`: Images used in Notion pages are stored and categorized by each page.
 
-The extracted data can be easily integrated with React-Notion-Custom components, allowing you to quickly convert Notion content into a website. By simply passing the content of the JSON file to React components, the structure and style of the Notion page are reflected directly on the website.
+The extracted data can be easily integrated with Notionpresso components, allowing you to quickly convert Notion content into a website. By simply passing the content of the JSON file to React components, the structure and style of the Notion page are reflected directly on the website.
 
 ## Target Users and Their Potential Applications
 
 ### Developers
 
-Developers are given the freedom to easily render and customize content created in Notion on websites. If you want to build a website quickly or style it as you want beyond the limitations of commercial services, React-Notion-Custom is the answer.
+Developers are given the freedom to easily render and customize content created in Notion on websites. If you want to build a website quickly or style it as you want beyond the limitations of commercial services, Notionpresso is the answer.
 
 ### Designers and Creators
 
@@ -91,12 +91,12 @@ You can directly reflect content written in Notion on the web, allowing you to q
 - **Company Introduction and Recruitment Pages**: Quickly update company profiles or recruitment information using Notion.
 - **Portfolio Sites**: Easily update projects and works, making portfolio management much easier.
 
-## Why Choose React-Notion-Custom
+## Why Choose Notionpresso
 
-1. **Developer-Centric Customization**: You can modify even the finest details that can't be touched in other commercial services. The infinite possibilities through code - this is the charm of React-Notion-Custom.
+1. **Developer-Centric Customization**: You can modify even the finest details that can't be touched in other commercial services. The infinite possibilities through code - this is the charm of Notionpresso.
 
 2. **Freedom of Open Source**: Everything is transparent and can be handled directly by you. If needed, you can modify the code and self-host the project on your own server, eliminating cost burdens.
 
 3. **Quick Results and High Efficiency**: You can write content in Notion and use it directly on your website with simple settings. The process of content creation and deployment is further simplified.
 
-React-Notion-Custom is the bridge that turns your Notion pages into amazing websites. No more complicated setups, start right from Notion now!
+Notionpresso is the bridge that turns your Notion pages into amazing websites. No more complicated setups, start right from Notion now!

content/guide/en/01. getting-started/02. quick-start.md

@@ -3,19 +3,20 @@ group: "getting-started"
 order: 2
 title: "Quick Start Guide"
 slug: "quick-start"
-description: "A step-by-step guide on building a website with Notion content using React-Notion-Custom."
+description: "A step-by-step guide on building a website with Notion content using Notionpresso."
 ---
 
-# React-Notion-Custom Quick Start Guide
+# Notionpresso Quick Start Guide
 
 ## 2.1. Installation and Setup
 
-### Installing React-Notion-Custom
+### Installing Notionpresso
 
-Install React-Notion-Custom and Notion-dump, a CLI tool for extracting Notion data.
+Install Notionpresso and @notionpresso/cli, a CLI tool for extracting Notion data.
 
 ```bash
-npm install react-notion-custom notion-dump
+npm install -g @notionpresso/cli
+npm install @notionpresso/react
 ```
 
 ### Setting up a Next.js Project
@@ -33,21 +34,21 @@ cd my-notion-blog
 2. Create a new integration.
 3. Securely store the generated API key.
 
-## 2.2. Extracting Notion Data (notion-dump)
+## 2.2. Extracting Notion Data (@notionpresso/cli)
 
-Use the Notion-dump CLI to extract Notion data in JSON format and prepare it for use on your website.
+Use the @notionpresso/cli CLI to extract Notion data in JSON format and prepare it for use on your website.
 
 ### Using the Data Extraction Command
 
 Extract data using the Notion page URL and API key.
 
 ```bash
-npx notion-dump --page YOUR_PAGE_URL --auth YOUR_API_KEY
+npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY
 ```
 
-### notion-dump Folder Structure and Options
+### @notionpresso/cli Folder Structure and Options
 
-notion-dump is tailored to the Next.js project structure by default. The extracted data is stored in the following structure:
+@notionpresso/cli is tailored to the Next.js project structure by default. The extracted data is stored in the following structure:
 
 ```
 my-notion-blog/
@@ -65,15 +66,15 @@ my-notion-blog/
         └── ...
 ```
 
-Main options for notion-dump:
+Main options for @notionpresso/cli:
 
 - `--dir`: Specifies the directory where JSON files will be stored. Default is `./notion-data`.
 - `--image-dir`: Specifies the directory where image files will be stored. Default is `./public/images`.
 
 For example, if you want to change the storage location:
 
 ```bash
-npx notion-dump --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images
+npx npresso --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images
 ```
 
 If options are not specified, default values are used, which are optimized for the Next.js project structure.
@@ -87,7 +88,7 @@ Render the extracted Notion data using React components. This section covers bas
 A simple example of rendering Notion data as React components.
 
 ```jsx
-import { Notion } from "react-notion-custom";
+import { Notion } from "@notionpresso/react";
 import pageData from "./notion-data/your-page-id.json";
 
 function NotionPage() {
@@ -120,7 +121,7 @@ Generate each post page with dynamic routing and use `getStaticPaths` and `getSt
 
 ```jsx
 // pages/[slug].js
-import { Notion } from "react-notion-custom";
+import { Notion } from "@notionpresso/react";
 import posts from "../posts";
 
 export async function getStaticPaths() {

content/guide/en/02. customization-guide/01. structure-and-customization.md

@@ -1,18 +1,18 @@
 ---
 group: "customization-guide"
 order: 1
-title: "Understanding React-Notion-Custom Structure and Customization"
+title: "Understanding Notionpresso Structure and Customization"
 slug: "structure-and-customization"
-description: "Learn about the data structure of React-Notion-Custom and effective customization methods based on this understanding."
+description: "Learn about the data structure of Notionpresso and effective customization methods based on this understanding."
 ---
 
-# Understanding React-Notion-Custom Structure and Customization
+# Understanding Notionpresso Structure and Customization
 
-To effectively customize React-Notion-Custom, it's essential to first understand its basic structure and data flow. This section examines the structure of Notion data and explains how to create custom components based on this understanding.
+To effectively customize Notionpresso, it's essential to first understand its basic structure and data flow. This section examines the structure of Notion data and explains how to create custom components based on this understanding.
 
 ## Understanding the Data Structure
 
-The Notion data used by React-Notion-Custom is structured in JSON format and includes page information and detailed content for each block. Understanding this structure is the first step towards effective customization.
+The Notion data used by Notionpresso is structured in JSON format and includes page information and detailed content for each block. Understanding this structure is the first step towards effective customization.
 
 ### Basic Data Structure
 
@@ -124,7 +124,7 @@ The Notion data used by React-Notion-Custom is structured in JSON format and inc
 
 ## Component Structure for Customization
 
-The basic component structure of React-Notion-Custom is as follows:
+The basic component structure of Notionpresso is as follows:
 
 <pre style="font-family: monospace; line-height: 1.2; white-space: pre;">
 ┌────────────────────────────────────────────────────────────────┐
@@ -172,4 +172,4 @@ In this structure, the `<Body>` component occupies about 60% of the total width
 
 5. **Leverage Metadata**: Use page metadata, cover images, icons, etc. to create rich UIs.
 
-Understanding these structures and strategies allows you to create highly customized Notion-based websites using React-Notion-Custom. The next section will explore specific customization methods for each element.
+Understanding these structures and strategies allows you to create highly customized Notion-based websites using Notionpresso. The next section will explore specific customization methods for each element.