Add slide layout system with title and default layouts

Parse <!-- layout: title --> directives in slide content to switch
between centered title layout and left-aligned default layout.
Title slides use larger headings and centered text, matching the
common "title slide" pattern from PowerPoint/Keynote.

Author: schroneko

README.md

@@ -112,6 +112,26 @@ graph TD
 ```
 ````
 
+### Slide layouts
+
+Use `<!-- layout: title -->` to switch a slide to the title layout (centered, larger heading). Without the directive, slides use the default layout (left-aligned content).
+
+```md
+<!-- layout: title -->
+
+# My Presentation
+
+A subtitle or tagline
+
+---
+
+# Regular Slide
+
+This uses the default left-aligned layout.
+```
+
+Available layouts: `title`, `default` (implicit).
+
 ### Fragment lists
 
 Add `<!-- fragment -->` before a list to reveal items one at a time with arrow keys.
@@ -140,6 +160,7 @@ Press P to open it.
 
 ### Feature summary
 
+- Slide layouts -- `<!-- layout: title -->` for centered title slides, default for content slides
 - Syntax highlighting -- Fenced code blocks highlighted via Shiki (vitesse-dark theme)
 - Math -- Inline (`$...$`) and block (`$$...$$`) math rendered with KaTeX
 - Mermaid diagrams -- Fenced code blocks with `mermaid` language render as SVG

scripts/generate-templates.ts

@@ -188,6 +188,8 @@ title: ${title}
 theme: ${dirName}
 ---
 
+<!-- layout: title -->
+
 # ${title}
 
 Theme: ${dirName}

src/cli.ts

@@ -124,11 +124,11 @@ const exampleMarkdown = `---
 title: Example Slides
 ---
 
-# Example Slides
+<!-- layout: title -->
 
-Created with **create-slides-app**
+# Example Slides
 
-Slides are separated by \`---\` in Markdown
+Created with create-slides-app
 
 ---
 

templates/reveal.js-beige/example.md

@@ -3,6 +3,8 @@ title: Reveal.js Beige
 theme: reveal.js-beige
 ---
 
+<!-- layout: title -->
+
 # Reveal.js Beige
 
 Theme: reveal.js-beige

templates/reveal.js-beige/src/engine/parser.ts

@@ -6,9 +6,12 @@ export interface PresentationConfig {
   [key: string]: unknown;
 }
 
+export type SlideLayout = "default" | "title";
+
 export interface SlideData {
   index: number;
   content: string;
+  layout: SlideLayout;
   frontmatter: Record<string, unknown>;
   notes: string;
   fragmentCount: number;
@@ -69,6 +72,18 @@ function parseNotes(raw: string): { content: string; notes: string } {
   return { content, notes };
 }
 
+const validLayouts = new Set<SlideLayout>(["default", "title"]);
+
+function extractLayout(raw: string): { content: string; layout: SlideLayout } {
+  const pattern = /^<!--\s*layout:\s*(\S+)\s*-->\s*\n?/m;
+  const match = raw.match(pattern);
+  if (!match) return { content: raw, layout: "default" };
+  const name = match[1] as SlideLayout;
+  const layout = validLayouts.has(name) ? name : "default";
+  const content = raw.slice(0, match.index) + raw.slice(match.index! + match[0].length);
+  return { content, layout };
+}
+
 function countFragments(content: string): number {
   const lines = content.split("\n");
   let count = 0;
@@ -107,11 +122,13 @@ export function parseSlides(markdown: string): ParsedPresentation {
 
   const slides: SlideData[] = rawSlides.map((raw, index) => {
     const parsed = extractFrontmatter(raw);
-    const { content: slideContent, notes } = parseNotes(parsed.content.trim());
+    const { content: withoutNotes, notes } = parseNotes(parsed.content.trim());
+    const { content: slideContent, layout } = extractLayout(withoutNotes);
     const fragmentCount = countFragments(slideContent);
     return {
       index,
       content: slideContent,
+      layout,
       frontmatter: parsed.data as Record<string, unknown>,
       notes,
       fragmentCount,

templates/reveal.js-beige/src/engine/slide.tsx

@@ -184,5 +184,6 @@ export function Slide({ data, currentFragment }: SlideProps): React.ReactElement
     };
   }, [data.content, data.fragmentCount, currentFragment]);
 
-  return <div className="slide">{content}</div>;
+  const layoutClass = data.layout === "title" ? "slide slide-layout-title" : "slide";
+  return <div className={layoutClass}>{content}</div>;
 }

templates/reveal.js-beige/src/styles/base.css

@@ -84,6 +84,22 @@ body {
   transform-origin: center center;
 }
 
+.slide-layout-title {
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+
+.slide-layout-title h1 {
+  font-size: 4rem;
+  margin-bottom: 1.5rem;
+}
+
+.slide-layout-title p {
+  font-size: 1.5rem;
+  color: #888;
+}
+
 .slide-empty,
 .slide-fallback {
   align-items: center;

templates/reveal.js-black/example.md

@@ -3,6 +3,8 @@ title: Reveal.js Black
 theme: reveal.js-black
 ---
 
+<!-- layout: title -->
+
 # Reveal.js Black
 
 Theme: reveal.js-black