Noxion - 플러그인 기반 블로그 플랫폼

✨ 주요 기능

🏗️ 모노레포 아키텍처

🔌 플러그인 시스템

📝 콘텐츠 관리

🎨 현대적인 UI/UX

🏃 빠른 시작

사전 요구사항

1. 클론 및 설치

git clone https://github.com/your-username/noxion.git
cd noxion
pnpm install

2. 환경 설정

# 환경 변수 템플릿 복사
cp apps/web/.env.example apps/web/.env.local
# 환경 변수 설정
NOTION_TOKEN=your_notion_token
NOTION_DATABASE_ID=your_database_id
# 선택사항: 댓글 플러그인용
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

3. 빌드 및 실행

# 모든 패키지 빌드
pnpm build:packages
# 개발 서버 시작
pnpm dev
# 또는 프로덕션 빌드
pnpm build
pnpm start

📦 패키지 구조

noxion/
├── packages/ # 독립적인 npm 패키지들
│ ├── types/ # @noxion/types - 공유 TypeScript 타입
│ ├── core/ # @noxion/core - 핵심 기능
│ └── plugin-comments/ # @noxion/plugin-comments - 댓글 플러그인
├── apps/
│ └── web/ # Next.js 블로그 애플리케이션
├── docs/ # 문서
└── examples/ # 예제 설정

패키지 상세 설명

@noxion/types

@noxion/core

@noxion/plugin-comments

🔌 플러그인 개발

플러그인 생성

import { NoxionPlugin, NoxionCoreContext } from '@noxion/types'
export function createMyPlugin(config: MyPluginConfig): NoxionPlugin {
 return {
 name: 'my-plugin',
 version: '1.0.0',
 
 register: (core: NoxionCoreContext) => {
 // 컴포넌트 등록
 core.registerComponent('MyComponent', MyComponent)
 
 // API 라우트 등록
 core.registerRoute('GET /api/my-route', handleMyRoute)
 
 // 훅 등록
 core.registerHook('afterPostRender', enhancePost)
 }
 }
}

플러그인 API 참조

코어 컨텍스트 메서드

사용 가능한 훅

🚀 배포

Vercel (권장)

# Vercel CLI 설치
npm i -g vercel
# 배포
vercel --prod

Docker

FROM node:18-alpine
RUN corepack enable pnpm
WORKDIR /app
COPY . .
RUN pnpm install --frozen-lockfile
RUN pnpm build
EXPOSE 3000
CMD ["pnpm", "start"]

정적 사이트 내보내기

# 정적 사이트 빌드
pnpm build
pnpm export
# ./apps/web/out/ 폴더를 정적 호스팅 서비스에 배포

⚙️ 설정

플러그인 설정

// apps/web/lib/noxion.ts
import { createDefaultConfig } from '@noxion/core'
import { createCommentsPlugin } from '@noxion/plugin-comments'
const config = createDefaultConfig([
 createCommentsPlugin({
 supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
 supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
 autoApprove: false,
 moderationEnabled: true,
 }),
 // 여기에 더 많은 플러그인 추가
])

사이트 설정

// apps/web/site.config.ts
export const siteConfig = {
 name: '내 블로그',
 description: '블로그 설명',
 url: 'https://yourblog.com',
 author: {
 name: '작성자 이름',
 email: 'your@email.com',
 },
 social: {
 twitter: '@yourusername',
 github: 'https://github.com/yourusername',
 },
}

🧪 개발

스크립트

# 개발
pnpm dev # 개발 서버 시작
pnpm build:packages # 모든 패키지 빌드
pnpm build # 전체 빌드
pnpm type-check # 타입 검사
pnpm lint # 모든 패키지 린트
pnpm clean # 모든 빌드 출력 정리
# 배포 (관리자 전용)
pnpm changeset # 변경사항 생성
pnpm version-packages # 패키지 버전 관리
pnpm release # npm에 배포

테스트

# 테스트 실행
pnpm test
# 감시 모드
pnpm test:watch
# 커버리지
pnpm test:coverage

📚 문서

🤝 기여하기

개발 환경 설정

📄 라이선스

🙏 감사의 말