barocss · easylogic · Mar 25, 2026 · Mar 25, 2026
diff --git a/.changeset/reading-slide-mode.md b/.changeset/reading-slide-mode.md
@@ -0,0 +1,13 @@
+---
+"@barodoc/core": patch
+"@barodoc/theme-docs": patch
+"barodoc": patch
+---
+
+feat: reading mode, slide mode, and smoother in-doc navigation
+
+- **Reading mode** — Toggle beside the article hides chrome (sidebar, TOC, pre/post article); comfortable fluid width; prev/next as side chevrons; `localStorage` + `?read=1`.
+- **Slide mode** — Optional `slides: true` frontmatter; full-screen deck split by `---`; hover/focus chrome; prev/next motion; `?slide=` URL sync; hide nav category label inside slides.
+- **View transitions** — `ClientRouter` in the docs shell; `ThemeScript` reapplies theme and reading mode on `astro:after-swap` to avoid flash between pages.
+- **CLI** — `barodoc create` adds `docs/en/example-slides.md` and nav entry; agent rules example updated.
+- **Core** — Content schema `slides`; i18n strings for slide UI and view toolbar.
diff --git a/.cursor/skills/barodoc-cli/SKILL.md b/.cursor/skills/barodoc-cli/SKILL.md
@@ -137,7 +137,8 @@ my-docs/
 ├── docs/
 │   └── en/
 │       ├── introduction.md
-│       └── quickstart.md
+│       ├── quickstart.md
+│       └── example-slides.md
 ├── public/
 │   └── logo.svg
 └── .gitignore

diff --git a/docs/barodoc.config.json b/docs/barodoc.config.json
@@ -61,7 +61,8 @@
         "guides/migration",
         "guides/troubleshooting",
         "guides/ai-and-agents",
-        "guides/graph-and-links"
+        "guides/graph-and-links",
+        "guides/slide-demo"
       ]
     },
     {

diff --git a/docs/src/content/changelog/v10.0.9.mdx b/docs/src/content/changelog/v10.0.9.mdx
@@ -0,0 +1,27 @@
+---
+version: "10.0.9"
+date: 2026-03-25
+title: "Reading mode, slide mode, and smoother doc navigation"
+---
+
+### Core (@barodoc/core)
+
+- **Content schema** — Optional frontmatter `slides` (boolean) for slide-capable pages.
+- **i18n** — Strings for slide controls, copy link, keyboard hints, and the in-article view toolbar.
+
+### CLI (`barodoc`)
+
+- **Quick mode / create** — Generated content config includes `slides`. `barodoc create` ships `docs/en/example-slides.md` (minimal deck sample) and registers it in the default navigation.
+
+### Theme (`@barodoc/theme-docs`)
+
+- **Reading mode** — Book icon in the article toolbar; hides banner, header chrome, sidebar, TOC, and post-article blocks; fluid max width for prose; circular prev/next from navigation order; keyboard shortcuts respect reading targets.
+- **Slide mode** — Presentation icon when `slides: true`; full-screen overlay with hover/focus toolbar and side arrows; slide enter animation; sync `?slide=`; optional dots and first/last/copy link; Escape and arrows.
+- **Slides in content** — Nav group label (category) hidden inside the slide stage only.
+- **View transitions** — `ClientRouter` (`astro:transitions`) on the base layout for softer same-origin navigations; inline script restores `dark` / `bd-reading-mode` from `localStorage` after each swap.
+- **Layouts** — `DocViewControls` rendered in-flow above the article; reading/slide targets wired from `[...slug].astro`.
+
+### Docs site
+
+- **Content config** — `slides` on `docs` and `help` collections.
+- **Guides** — English and Korean slide demo pages (minimal template, columns example) and nav entry.
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts
@@ -15,6 +15,7 @@ const docsCollection = defineCollection({
     deprecated: z.union([z.boolean(), z.string()]).optional(),
     experimental: z.boolean().optional(),
     changelogUrl: z.string().optional(),
+    slides: z.boolean().optional(),
   }),
 });
 
@@ -55,6 +56,7 @@ const helpCollection = defineCollection({
     deprecated: z.union([z.boolean(), z.string()]).optional(),
     experimental: z.boolean().optional(),
     changelogUrl: z.string().optional(),
+    slides: z.boolean().optional(),
   }),
 });
 

diff --git a/docs/src/content/docs/en/guides/slide-demo.mdx b/docs/src/content/docs/en/guides/slide-demo.mdx
@@ -0,0 +1,77 @@
+---
+title: Slide mode demo
+description: Test full-screen slides split by horizontal rules (---), including a two-column layout.
+slides: true
+---
+
+import { Callout, Columns, Column } from "@barodoc/theme-docs";
+
+## Minimal template (copy-paste)
+
+Use **YAML at the very top** of the file, then split slides with `---` **in the body** (after the closing frontmatter `---`). Quick mode **`.md`** files work without MDX.
+
+<Callout type="info">
+The first `---` … `---` block is frontmatter only. Later `---` lines on their own are slide breaks (horizontal rules).
+</Callout>
+
+````markdown
+---
+title: My deck
+description: One-line summary
+slides: true
+---
+
+# First slide
+
+Your content.
+
+---
+
+# Second slide
+
+More content.
+
+---
+
+# Third slide
+
+Done.
+````
+
+`pnpm create barodoc` also adds `docs/en/example-slides.md` with the same shape — copy or edit that file.
+
+## First slide
+
+This is the **first** slide. Use the **book / slides** icons in the toolbar above the article to open **Slide mode**.
+
+Use **arrow keys** to move between slides, **Escape** to exit.
+
+---
+
+## Second slide
+
+Here is the second slide. Slides are separated by `---` in the Markdown source (renders as a horizontal rule).
+
+---
+
+## Two columns on one slide
+
+Layouts from MDX apply inside slide mode too. The whole `<Columns>` block stays on **one** slide — do not put `---` between columns.
+
+<Columns columns={2}>
+  <Column>
+    ![Barodoc logo](/logo.svg)
+  </Column>
+  <Column>
+    **Left:** image or diagram. **Right:** bullets or copy.
+
+    - Keep column pairs inside one slide
+    - Use `Columns` / `Column` from `@barodoc/theme-docs`
+  </Column>
+</Columns>
+
+---
+
+## Last slide
+
+That is it — a quick test including a column layout.
diff --git a/docs/src/content/docs/ko/guides/slide-demo.mdx b/docs/src/content/docs/ko/guides/slide-demo.mdx
@@ -0,0 +1,77 @@
+---
+title: 슬라이드 모드 데모
+description: 수평선(---)으로 나눈 전체 화면 슬라이드와 2열 레이아웃 예시입니다.
+slides: true
+---
+
+import { Callout, Columns, Column } from "@barodoc/theme-docs";
+
+## 최소 템플릿 (복사용)
+
+**파일 맨 위**에 YAML frontmatter를 두고, **닫는 `---` 다음 본문**에서 슬라이드마다 `---` 한 줄로 나눕니다. Quick mode의 **`.md`** 만으로도 됩니다(MDX 불필요).
+
+<Callout type="info">
+맨 앞의 `---` … `---` 는 메타데이터만 해당합니다. 그 아래에서 단독으로 쓰인 `---` 는 슬라이드 구분(가로줄)입니다.
+</Callout>
+
+````markdown
+---
+title: 내 슬라이드
+description: 한 줄 요약
+slides: true
+---
+
+# 첫 슬라이드
+
+내용.
+
+---
+
+# 두 번째 슬라이드
+
+추가 내용.
+
+---
+
+# 세 번째 슬라이드
+
+끝.
+````
+
+`pnpm create barodoc` 으로 만든 프로젝트에는 같은 형태의 `docs/en/example-slides.md` 가 포함됩니다. 복사해 쓰거나 수정하면 됩니다.
+
+## 첫 번째 슬라이드
+
+**첫 번째** 슬라이드입니다. 본문 **위쪽 툴바**에서 책 / 슬라이드 아이콘으로 **슬라이드 모드**를 켜세요.
+
+**방향키**로 슬라이드를 이동하고, **Esc**로 나갑니다.
+
+---
+
+## 두 번째 슬라이드
+
+두 번째 슬라이드입니다. 마크다운에서 `---`로 구간을 나눕니다(가로 구분선으로 렌더링).
+
+---
+
+## 한 슬라이드 안에서 2열
+
+MDX 레이아웃은 슬라이드 안에서도 그대로 적용됩니다. `<Columns>` 블록 전체가 **한 슬라이드**에 들어갑니다. 열 사이에 `---`를 넣으면 안 됩니다(슬라이드가 갈라짐).
+
+<Columns columns={2}>
+  <Column>
+    ![Barodoc 로고](/logo.svg)
+  </Column>
+  <Column>
+    **왼쪽:** 이미지나 다이어그램. **오른쪽:** 글머리나 설명.
+
+    - 열은 한 슬라이드 안에서만 나누기
+    - `@barodoc/theme-docs`의 `Columns` / `Column` 사용
+  </Column>
+</Columns>
+
+---
+
+## 마지막 슬라이드
+
+2열 예시를 포함한 짧은 테스트입니다.
diff --git a/packages/barodoc/src/commands/create.ts b/packages/barodoc/src/commands/create.ts
@@ -31,7 +31,7 @@ export async function create(name: string): Promise<void> {
       navigation: [
         {
           group: "Getting Started",
-          pages: ["introduction", "quickstart"],
+          pages: ["introduction", "quickstart", "example-slides"],
         },
       ],
       i18n: {
@@ -89,6 +89,32 @@ barodoc preview
 `
   );
 
+  await fs.writeFile(
+    path.join(targetDir, "docs/en/example-slides.md"),
+    `---
+title: Example slides
+description: Minimal slide deck — frontmatter plus --- between slides in the body.
+slides: true
+---
+
+# First slide
+
+Edit \`docs/en/example-slides.md\`. Use the **Slides** control on the page (with \`slides: true\` in frontmatter) to open full-screen mode. Arrow keys move between slides; **Escape** exits.
+
+---
+
+# Second slide
+
+In the **body**, a line with only \`---\` starts the next slide (not the YAML block at the top).
+
+---
+
+# Third slide
+
+Copy this file or see the Barodoc docs **Slide mode demo** for MDX layouts (e.g. columns).
+`
+  );
+
   // Create logo
   await fs.writeFile(
     path.join(targetDir, "public/logo.svg"),

diff --git a/packages/barodoc/src/runtime/agentRules.ts b/packages/barodoc/src/runtime/agentRules.ts
@@ -79,7 +79,7 @@ After creating a new file, register it in \`barodoc.config.json\`:
     {
       "group": "Getting Started",
       "group:ko": "시작하기",
-      "pages": ["introduction", "quickstart"]
+      "pages": ["introduction", "quickstart", "example-slides"]
     },
     {
       "group": "Guides",

diff --git a/packages/barodoc/src/runtime/project.ts b/packages/barodoc/src/runtime/project.ts
@@ -268,6 +268,7 @@ const contentSchema = `z.object({
     deprecated: z.union([z.boolean(), z.string()]).optional(),
     experimental: z.boolean().optional(),
     changelogUrl: z.string().optional(),
+    slides: z.boolean().optional(),
   })`;
 
 function generateContentConfig(config: BarodocConfig): string {

diff --git a/packages/core/src/config/schema.ts b/packages/core/src/config/schema.ts
@@ -100,6 +100,11 @@ export const docsFrontmatterSchema = z.object({
   experimental: z.boolean().optional(),
   /** Override site `changelogUrl` for this page only. */
   changelogUrl: z.string().optional(),
+  /**
+   * Enable slide mode for this page (full-screen slides split by horizontal rules `---` in Markdown).
+   * When false or omitted, the slide control is hidden.
+   */
+  slides: z.boolean().optional(),
 });
 
 export type DocsFrontmatter = z.infer<typeof docsFrontmatterSchema>;

diff --git a/packages/core/src/i18n/defaultStrings.ts b/packages/core/src/i18n/defaultStrings.ts
@@ -42,6 +42,21 @@ export const DEFAULT_UI_STRINGS: Record<string, string> = {
   copySectionLink: "Copy link to section",
   feedbackThanks: "Thanks for your feedback!",
   reportIssue: "Report an issue",
+  readingMode: "Reading mode",
+  exitReadingMode: "Exit reading mode",
+  docViewToolbar: "View options",
+  slideMode: "Slides",
+  exitSlideMode: "Exit slide mode",
+  slidePrevious: "Previous slide",
+  slideNext: "Next slide",
+  slidesEmpty: "No slide breaks — add horizontal rules (---) between sections.",
+  slidesHint: "Add --- in your Markdown to separate slides.",
+  pageNavReading: "Page navigation",
+  slideCopyLink: "Copy link to this slide",
+  slideLinkCopied: "Link copied",
+  slideKeyboardHint: "← → navigate · Esc exit",
+  slideGoFirst: "First slide",
+  slideGoLast: "Last slide",
 };
 
 /** Optional default strings for other locales (partial overrides). */
@@ -86,6 +101,21 @@ export const DEFAULT_UI_STRINGS_KO: Record<string, string> = {
   copySectionLink: "섹션 링크 복사",
   feedbackThanks: "피드백 감사합니다!",
   reportIssue: "이슈 등록",
+  readingMode: "읽기 모드",
+  exitReadingMode: "읽기 모드 종료",
+  docViewToolbar: "보기 옵션",
+  slideMode: "슬라이드",
+  exitSlideMode: "슬라이드 종료",
+  slidePrevious: "이전 슬라이드",
+  slideNext: "다음 슬라이드",
+  slidesEmpty: "슬라이드 구분이 없습니다. 섹션 사이에 ---(수평선)을 넣으세요.",
+  slidesHint: "Markdown에서 ---로 슬라이드를 나눌 수 있습니다.",
+  pageNavReading: "문서 이동",
+  slideCopyLink: "이 슬라이드 링크 복사",
+  slideLinkCopied: "링크를 복사했습니다",
+  slideKeyboardHint: "← → 이동 · Esc 종료",
+  slideGoFirst: "첫 슬라이드",
+  slideGoLast: "마지막 슬라이드",
 };
 
 export function getDefaultUIStringsForLocale(locale: string): Record<string, string> {

diff --git a/packages/theme-docs/src/components/DocHeader.tsx b/packages/theme-docs/src/components/DocHeader.tsx
@@ -101,7 +101,7 @@ export function DocHeader({
 
   return (
     <TooltipProvider>
-      <header className="sticky top-0 z-50 w-full min-w-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--bd-bg)]/80">
+      <header className="bd-site-header sticky top-0 z-50 w-full min-w-0 border-b border-[var(--bd-border)] bg-[var(--bd-bg)]/95 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--bd-bg)]/80">
         <div className="flex h-14 items-center justify-between gap-2 px-4 sm:px-6 lg:px-8 w-full min-w-0">
           {/* Left: hamburger (mobile) + logo + tabs */}
           <div className="flex items-center gap-3 md:gap-6 min-w-0 shrink">