🌏 NotionPresso Contributing Guidelines

🚨 Areas Needing Urgent Improvement

The NotionPresso project currently has several areas that need immediate attention:

1
Code Block Indentation Issues There are indentation problems in documentation code blocks. For example:

Problematic code:

Typescript

function example() {
const value = 'test'
return {
data: value
}
}

Correct code:

Typescript

function example() {
  const value = 'test'
  return {
    data: value
  }
}

1
Legacy Package Name References Throughout the project, old package names are still being used:

•
react-notion-custom → @notionpresso/react

•
notion-dump → @notionpresso/cli

These legacy references need to be updated to the new package names.

1
Multi-language Documentation Needed Currently, documentation is only available in English and Korean. We need translations in various languages to make the project more accessible to developers worldwide.

We're actively seeking developers who can help address these issues! 🙏

Project Introduction

NotionPresso is an open-source project that enables creating personal blogs using Notion as a CMS. It consists of the following packages:

•
@notionpresso/react: React rendering library for Notion content

•
@notionpresso/cli: CLI tool for extracting Notion data

•
@notionpresso/svelte: Svelte rendering library (currently migrating to Svelte 5)

•
Documentation site

How to Contribute

Development Environment Setup

1
Fork and clone the repository you want to work on:

Shell

git clone <https://github.com/notionpresso/[package-name].git>
cd [package-name]

1
Install dependencies:

Shell

npm install

1
Create a new branch:

Shell

git checkout -b feature/your-feature-name

Development Guidelines

Code Style

•
Use 2 spaces for indentation

•
Declare TypeScript types explicitly

•
Follow conventional commits format for commit messages

Component Development

When adding new components, follow this structure:

Typescript

import React from 'react'
import type { ComponentType } from 'react'

interface BlockProps {
  content: string
  style?: React.CSSProperties
}

const Block: ComponentType<BlockProps> = ({ content, style }) => {
  return (
    <div style={style}>
      {content}
    </div>
  )
}

return Block

Documentation Contributions

When improving documentation, please ensure:

1
Code block indentation is properly applied

2
Package names reference the latest versions (@notionpresso/*)

3
Documentation consistency is maintained

4
Multi-language translations are provided where possible (Chinese, Japanese, etc.)

Example:

Markdown

# Component Usage Guide

You can use @notionpresso/react components as follows:

```typescript
import { NotionRenderer } from '@notionpresso/react' // remove react-notion-custom

const BlogPost = ({ content }) => {
  return (
    <NotionRenderer content={content} />
  )
}

Plain text


Thank you for contributing! Your participation helps make NotionPresso better. 🙏

We especially welcome active participation from those interested in addressing our urgent improvement areas (indentation, legacy references, multi-language support).

---

이 프로젝트는 MIT 라이선스를 따릅니다 (This project is licensed under the MIT License).