Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 331 additions & 0 deletions demo/showcase.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,331 @@
---

@section {
flex: 2
}
@column {
align: center
}
# SuperDeck {.heading}
# Presentations Reimagined {.subheading}

---

## What is SuperDeck? {.heading}

@column

SuperDeck is a presentation framework that transforms how developers create slides.

- Write slides in **Markdown** - familiar syntax, version-controlled
- Render with **Flutter** - cross-platform, beautiful UI
- Extend with **custom widgets** - interactive, live demos
- Export to **PDF** - share anywhere

---

@column {
flex: 2
align: center_left
}
### Traditional Tools {.heading}

@column {
flex: 3
}

#### PowerPoint/Keynote

- Binary files, poor version control
- Limited code formatting
- No live components
- Platform-dependent

#### SuperDeck

- Plain text Markdown
- Git-friendly diffs
- Live Flutter widgets
- Runs everywhere Flutter runs

---

@section {
flex: 2
}
@column {
align: center
}
## "Write once, present anywhere. Version control everything." {.heading}

##### The SuperDeck Philosophy {.subheading}

---

@column {
flex: 2
align: center_left
}
### Hot Reload {.heading}

Edit your slides and see changes instantly - no rebuild needed.

@column {
flex: 3
}

- **Live Preview** - Changes appear in milliseconds
- **State Preserved** - Stay on current slide while editing
- **Error Recovery** - Graceful handling of syntax errors
- **Watch Mode** - CLI monitors file changes automatically

---

### Markdown Syntax {.heading}

@column {
flex: 2
}

```markdown
---

## Slide Title {.heading}

@column

Your content here with **bold**
and *italic* text.

- Bullet points
- Code blocks
- Mermaid diagrams

---
```{.code}

---

@section

@column {
flex: 1
}
## Layout System {.heading}

How SuperDeck organizes content on slides.

@section {
flex: 3
align: top_left
}

@column {
flex: 1
}
#### Sections

Horizontal rows that divide the slide vertically.

```markdown
@section {
flex: 2
}
```

@column {
flex: 1
}
#### Columns

Vertical divisions within sections.

```markdown
@column {
flex: 3
align: center
}
```

@column {
flex: 1
}
#### Blocks

Content containers with markdown or widgets.

```markdown
@widget {
name: "chart"
}
```

---

## Layout Types {.heading}

@column

| Layout | Structure | Best For |
|--------|-----------|----------|
| Title | Single centered section | Opening, section dividers |
| Standard | Title row + body row | Default content slides |
| Two-Column | Side-by-side blocks | Comparisons, pros/cons |
| Three-Column | Three equal blocks | Categories, options |
| Title-Left | Title block + content | Feature highlights |
| Quote | Centered large text | Key takeaways, transitions |
| Table | Markdown table | Structured data comparisons |

---

### The Block System {.heading}

@column

SuperDeck uses three core block types:

- **Content Blocks** (`@column`) - Render markdown text, lists, tables
- **Widget Blocks** (`@widget`) - Embed custom Flutter components
- **Built-in Widgets** (`@image`, `@dartpad`, `@qrcode`) - Pre-configured widgets

Each block supports:
- `flex` - Relative sizing (default: 1)
- `align` - Content positioning (e.g., `center`, `top_left`)
- `scrollable` - Enable overflow scrolling

---

### Build Pipeline {.heading}

@column

```mermaid
flowchart LR
A["slides.md"] --> B["Parser"]
B --> C["Blocks"]
C --> D["Widgets"]
D --> E["Flutter UI"]
E --> F["PDF Export"]

style A fill:#4CAF50,stroke:#2E7D32,color:#fff
style E fill:#2196F3,stroke:#1565C0,color:#fff
style F fill:#FF9800,stroke:#F57C00,color:#fff
```

The CLI processes your markdown through multiple stages:
1. **Parse** - Extract frontmatter and block directives
2. **Transform** - Convert to widget tree
3. **Render** - Flutter builds the UI
4. **Export** - Generate PDF and thumbnails

---

@column {
flex: 2
align: center_left
}
### Getting Started {.heading}

@column {
flex: 3
}

#### Installation

```bash
# Add to your Flutter project
flutter pub add superdeck

# Create your slides
touch slides.md

# Build and watch
dart run superdeck_cli:main watch
```

#### Run

```bash
flutter run -d macos # or chrome, windows, linux
```

---

## Styling System {.heading}

@section {
flex: 3
}

@column {
flex: 1
}

#### Global Themes

Define in `superdeck.yaml`:

```yaml
styles:
default:
background: '#1a1a2e'
primaryColor: '#4CAF50'
```

@column {
flex: 1
}

#### Per-Slide Styles

Apply via frontmatter:

```markdown
---
style: quote
---

> Your quote here
```

---

## Advanced Features {.heading}

@column

- **Mermaid Diagrams** - Flowcharts, sequences, mind maps
- **Code Highlighting** - Syntax-aware formatting
- **Custom Widgets** - Embed any Flutter widget
- **PDF Export** - Print-ready output
- **Thumbnails** - Auto-generated previews
- **Responsive** - Adapts to any screen size

---

@section {
flex: 2
}
@column {
align: center
}
## "The best presentation tool is the one that gets out of your way." {.heading}

##### Focus on content, not formatting {.subheading}

---

@section {
flex: 2
align: bottom_center
}
# Start Building {.heading}
## github.com/leoafarias/superdeck {.subheading}

@section

@column {
align: center
}
MIT License | Flutter & Dart

10 changes: 2 additions & 8 deletions packages/core/lib/src/models/block_model.dart
Original file line number Diff line number Diff line change
Expand Up @@ -144,14 +144,11 @@ class SectionBlock extends Block {
}

/// Validation schema for section blocks.
///
/// Note: 'blocks' is required (not optional) to satisfy Google AI schema
/// requirements which reject OBJECT types with all-optional properties.
static final schema = Ack.object({
'align': ContentAlignment.schema.optional(),
'flex': Ack.integer().optional(),
'scrollable': Ack.boolean().optional(),
'blocks': Ack.list(Block.discriminatedSchema),
'blocks': Ack.list(Block.discriminatedSchema).optional(),
}, additionalProperties: true);

@override
Expand Down Expand Up @@ -234,14 +231,11 @@ class ContentBlock extends Block {
}

/// Validation schema for content blocks.
///
/// Note: 'content' is required (not optional) to satisfy Google AI schema
/// requirements which reject OBJECT types with all-optional properties.
static final schema = Ack.object({
'align': ContentAlignment.schema.optional(),
'flex': Ack.integer().optional(),
'scrollable': Ack.boolean().optional(),
'content': Ack.string(),
'content': Ack.string().optional(),
}, additionalProperties: true);

@override
Expand Down
4 changes: 3 additions & 1 deletion packages/superdeck/lib/src/export/async_thumbnail.dart
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ class AsyncThumbnail {
_status.value = AsyncFileStatus.loading;
final currentFile = _imageFile.value;
if (currentFile != null) {
// Clear all cached images to ensure stale thumbnails don't linger
imageCache.clear();
FileImage(currentFile).evict();
}
_imageFile.value = null;
Expand Down Expand Up @@ -123,7 +125,7 @@ class AsyncThumbnail {
}

return Image(
gaplessPlayback: true,
gaplessPlayback: false,
image: provider,
errorBuilder: (context, error, _) => _errorWidget(context, this),
);
Expand Down
Loading