Dotori Note Features
Relevant source files
The following files were used as context for generating this wiki page:
Dotori Note is a personal blog and record-keeping application built with Astro, React, and TailwindCSS. It serves as a centralized platform for managing and sharing various types of content, including notes and reviews, with a focus on high performance and developer-friendly content management through MDX and JSON-based collections.
The system is designed to provide a seamless reading experience by utilizing modern web technologies such as React 19 and TailwindCSS 4.0, while ensuring content accessibility through features like automatic heading links and theme switching.
Sources: apps/dotori-note/README.md:1-5, AGENTS.md:27-27, apps/dotori-note/package.json:20-30
Content Management System
Dotori Note organizes content into distinct directories and formats to maintain a clear and navigable structure.
Project Structure
The application categorizes data and UI components into specialized directories:
| Directory | Description |
|---|---|
collection | Content collections stored in JSON format (e.g., book reviews). |
notes | Original note files authored in MDX format. |
src/pages | Astro Pages that define the routing and site structure. |
src/widgets | Common reusable UI widgets used across the application. |
Sources: apps/dotori-note/README.md:7-17, apps/dotori-note/collection/reviews/book-reviews.json:1-30
Content Formats
- MDX: Used for notes to provide a flexible format that allows embedding React components within Markdown content.
- JSON: Utilized for structured collections, such as book reviews, which include fields for author, link, publisher, and multiple review entries.
Sources: apps/dotori-note/README.md:21-24, apps/dotori-note/collection/reviews/book-reviews.json:1-10
Technical Architecture
The application leverage the Astro framework to generate high-performance static or dynamic sites while allowing the integration of React components.
The architecture integrates local workspace packages for UI animations and standardized components.
Sources: apps/dotori-note/package.json:20-30, AGENTS.md:37-45, apps/dotori-note/README.md:26-38
User Interface Features
Dynamic Theme Switching
Dotori Note includes a theme system that supports Dark, Light, and Auto (system-preference) modes. The theme is persisted in localStorage and applied to the root html element.
Theme States:
- Dark: Adds the
darkclass to the HTML element. - Light: Removes the
darkclass from the HTML element. - Auto: Synchronizes the theme with the system's
colorScheme(prefers-color-scheme).
Sources: apps/dotori-note/tests/header-switch-theme.spec.ts:7-11, apps/dotori-note/tests/header-switch-theme.spec.ts:114-142
Heading Autolinks and Slugs
To improve navigation and shareability, the application automatically generates unique IDs for all headings (H1-H6) and provides anchor links.
- ID Generation: Handled by
rehype-slug, creating URL-friendly IDs from heading text (e.g., "개요" becomes#개요). - Autolinks: Handled by
rehype-autolink-headings, which injects an<a>tag with the classautolink-headingand anaria-labelfor accessibility. - Visual Feedback: On hover, the CSS displays a "#" symbol before the heading.
Sources: apps/dotori-note/tests/heading-autolink.spec.ts:80-100, apps/dotori-note/tests/heading-autolink.spec.ts:169-178, apps/dotori-note/package.json:37-38
Navigation and Interaction Flow
The interaction flow for navigating to specific content sections involves both UI interactions and automated URL processing.
This flow ensures that users can easily reference and navigate to specific parts of a note.
Sources: apps/dotori-note/tests/heading-autolink.spec.ts:102-125, apps/dotori-note/tests/heading-autolink.spec.ts:169-182
Development and Testing
The project maintains high code quality standards through automated testing and linting.
- Testing Framework: Uses Playwright for E2E tests, specifically targeting theme switching and heading link functionality.
- Commands:
npm run dev: Starts the Astro development server.npm run build: Generates the production build.npm run test:e2e: Executes Playwright tests.
Sources: apps/dotori-note/package.json:7-12, apps/dotori-note/tests/header-switch-theme.spec.ts:1-5, AGENTS.md:12-25
Dotori Note combines the flexibility of MDX content with the performance of Astro and the interactive capabilities of React 19. By implementing features like autolinked headings and a robust theme switching system, it provides a modern, accessible environment for personal documentation and content sharing.