DX-Slides

Generate Google Slides presentations from code repository analysis to help developers onboard faster.

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Google Cloud project with Slides API enabled (see Setup Guide)

Installation

# Install dependencies
npm install

Google Cloud Setup

1. Create a Google Cloud project at https://console.cloud.google.com
2. Enable the Google Slides API
3. Create OAuth 2.0 credentials (Desktop app type)
4. Download credentials and save as credentials/credentials.json
5. Add your Google account as a test user in OAuth consent screen

See credentials/README.md for detailed setup instructions.

Usage

Generate Slides from Project Insights

# Generate presentation from insights JSON file
npx tsx src/generate-slides.ts examples/lepton-insights.json

# Use a specific template (default: 'default')
npx tsx src/generate-slides.ts examples/lepton-insights.json default

First run: You'll be prompted to authenticate with Google. The browser will open automatically for OAuth authorization.

Output:

• Google Slides presentation (link printed to console)
• Metadata JSON file saved as *.presentation.json

Validate Project Insights

# Validate insights JSON against schema
npx tsx examples/validate-lepton.ts

Expected output:

✓ Schema validation PASSED!
Validated Project: Lepton
Type: desktop
Core Components: 8
Onboarding Steps: 8
Key Insights: 12
✓ All fields conform to Schema 2 specification

Project Structure

dx-slides/
├── src/
│   ├── schemas/
│   │   └── project-insights.schema.ts   # Zod schema for project insights
│   ├── templates/
│   │   ├── types.ts                     # Template type definitions
│   │   ├── default.template.ts          # Default 12-slide template
│   │   └── index.ts                     # Template registry
│   ├── generators/
│   │   ├── slide-builder.ts             # Slide creation functions
│   │   └── slides-generator.ts          # Main presentation generator
│   ├── auth/
│   │   └── google-auth.ts               # OAuth 2.0 authentication
│   └── generate-slides.ts               # CLI tool
├── examples/
│   ├── lepton-insights.json             # Sample project insights
│   └── validate-lepton.ts               # Validation script
├── credentials/
│   └── credentials.json                 # Google OAuth credentials (gitignored)
├── project-discussions/                 # Architecture and design docs
├── package.json
├── tsconfig.json
└── README.md

Features

Slide Templates

• Default Template: 12-slide comprehensive onboarding presentation
  • Title slide
  • Tech stack overview
  • Architecture pattern and diagram
  • Project structure
  • Core components (2 slides)
  • Getting started guide
  • Onboarding reading path (2 slides)
  • Key insights and tips

Slide Types

• TITLE - Title slide with main title and subtitle
• TITLE_AND_BODY - Title with bullet points
• DIAGRAM - ASCII diagrams with monospace font (6pt Courier New)
• SECTION_HEADER - Section break slide
• BLANK - Blank slide for custom content

Design Features

• Professional blue/gray color scheme
• Optimized font sizes (title: 28pt, body: 14pt)
• Smart bullet points (skips blank lines)
• Emojis for visual interest
• Reduced content per slide for readability

Development

Available Scripts

• npm run build - Compile TypeScript to JavaScript
• npm run dev - Run TypeScript files directly with tsx

Creating Custom Templates

See src/templates/default.template.ts for an example. Templates are TypeScript files that define:

• Slide definitions with generator functions
• Slide types and layouts
• Content mapping from ProjectInsights schema

Roadmap

• Phase 1: Project initialization
• Phase 2: Schema definition (Zod)
• Phase 3: Google Slides generator
• Phase 4: CLI tool
• Phase 5: Template system
• Phase 6: Automated code analysis
• Phase 7: Multiple template options
• Phase 8: Custom styling and themes

Architecture

See project-discussion.md for detailed architecture and design decisions.

License

ISC