Dotori Note (Personal Blog)
Relevant source files
The following files were used as context for generating this wiki page:
Dotori Note is a personal web application within the web-projects monorepo designed for recording and sharing various types of information. It serves as a digital note-taking and blog platform, emphasizing high performance and ease of navigation.
The project is built using the Astro framework and leverages a modern frontend stack including React, TailwindCSS, and MDX. It follows a content-driven architecture where original notes are written in MDX and structured data is managed through JSON-based content collections.
Sources: apps/dotori-note/README.md:1-5, apps/dotori-note/package.json:2-4, CLAUDE.md:27-28
Technical Architecture
The application utilizes a monorepo structure managed by Turborepo and Bun. Within the apps/dotori-note directory, the project is organized to separate content, logic, and presentation.
Directory Structure
| Directory | Purpose |
|---|---|
collection | Structured content collections in JSON format (e.g., book reviews). |
notes | Original note source files in MDX format. |
src/layouts | Base layout components for page consistency. |
src/pages | Astro Pages that define the site routing. |
src/widgets | Shared UI components used across the application. |
tests | E2E test suites using Playwright. |
Sources: apps/dotori-note/README.md:9-20, CLAUDE.md:23-28
Core Technology Stack
- Web Framework: Astro 5.x, chosen for its high-performance site generation and excellent documentation.
- Content Management: MDX for notes and standard JSON for specific collections like book reviews.
- Styling: TailwindCSS 4.0 and shadcn/ui. The project transitioned from Panda CSS to TailwindCSS to improve developer proficiency and better integrate with the shadcn component ecosystem.
- UI Components: React 19, utilized for interactive elements such as theme switchers.
- Runtime: Bun 1.3.4.
Sources: apps/dotori-note/README.md:22-48, apps/dotori-note/package.json:16-30, CLAUDE.md:8-10
Data Flow and Content Processing
The application processes two primary types of data: unstructured/semi-structured notes in MDX and structured metadata in JSON.
The MDX processing pipeline includes rehype-slug and rehype-autolink-headings. This ensures that every heading within a note has a unique id and an accessible anchor link for direct navigation.
Sources: apps/dotori-note/README.md:12-14, apps/dotori-note/package.json:34-35, apps/dotori-note/tests/heading-autolink.spec.ts:85-93
Key Features
Content Collections
The system manages structured data through JSON files. For example, book reviews are stored as keyed objects containing metadata such as author, link, publisher, and an array of review text.
{
"함께 자라기": {
"author": "김창준",
"link": "https://ebook.insightbook.co.kr/book/65",
"publisher": "인사이트",
"reviews": ["전문성과 협업에 대해 참고할 내용이 많다."]
}
}
Sources: apps/dotori-note/collection/reviews/book-reviews.json:14-27
Theme Management
Dotori Note supports light, dark, and system-default (Auto) themes. The theme state is persisted in localStorage. The application logic manages classes on the <html> element to toggle between themes.
Navigation and Accessibility
Notes automatically generate slugs for headings. The system includes:
- Heading Autolinks: Visual links (indicated by a '#' on hover) that update the URL fragment when clicked.
- Keyboard Navigation: Links are focusable and activatable via keyboard.
- Aria Labels: Links include
aria-label="Link to this heading"for screen reader support.
Sources: apps/dotori-note/tests/heading-autolink.spec.ts:101-122, apps/dotori-note/tests/heading-autolink.spec.ts:183-195
Development and Testing
The project employs rigorous testing standards using Playwright for End-to-End (E2E) verification.
| Command | Description |
|---|---|
bun dev | Starts the Astro development server. |
bun build | Builds the static site. |
bun test:e2e | Executes Playwright tests for theme switching and heading links. |
Tests are configured to verify:
- Heading Slug Generation: Ensuring
idattributes are correctly derived from text (e.g., "개요" becomes#개요). - Theme Persistence: Verifying that selecting a theme updates the DOM and persists across reloads.
- Visual Regression: Screenshots are captured upon test failure.
Sources: apps/dotori-note/package.json:7-11, apps/dotori-note/tests/heading-autolink.spec.ts:25-40, apps/dotori-note/tests/header-switch-theme.spec.ts:24-27