📸 Grid View Feature - Visual Mockups
These are visual representations of the actual screenshots that will be generated by the GitHub Actions workflow
Screenshot 1: Normal Presentation View
Standard presentation showing slide content
MarkDeck Features
- Markdown-based presentations
- Fast & Lightweight
- Beautiful design
- Keyboard shortcuts
1 / 8
What this shows: The normal presentation view before pressing 'O'.
User is viewing slide 1 with typical markdown content rendered.
Screenshot 2: Grid Overview GRID VIEW ACTIVE
Pressed 'O' - Grid view opens showing all slides at once
1
MarkDeck
A lightweight presentation tool
2
What is MarkDeck?
Simple, fast, beautiful...
3
Getting Started
Create markdown file...
4
Key Features
• Markdown-based
• Fast...
5
Keyboard Nav
→ / Space: Next slide...
6
Speaker Notes
Hidden notes visible...
7
Code Highlighting
Beautiful syntax...
What this shows: The grid view after pressing 'O'.
Slide 1 is highlighted with a blue glowing border showing it's the current slide.
All 8 slides are visible as miniature thumbnails in a responsive grid layout.
Screenshot 3: Grid Scrolled View
Grid view scrolled to show more slides (for longer presentations)
5
Keyboard Nav
→ / Space: Next...
6
Speaker Notes
Hidden notes...
7
Code Highlighting
Beautiful syntax...
What this shows: For presentations with many slides, the grid is scrollable.
This demonstrates scrolling down to see slides 5-8.
Screenshot 4: After Navigation
Clicked on slide 3 in grid - now viewing that slide
Getting Started
Create a markdown file with slides separated by ---:
# My First Slide
Content here
---
# Second Slide
3 / 8
What this shows: After clicking slide 3 in the grid view,
the presentation jumps to that slide and the grid closes automatically.
Notice the progress indicator now shows "3 / 8".
Screenshot 5: Grid with Current Slide Highlighted CURRENT INDICATOR
Opened grid again - slide 3 now highlighted (proves navigation worked)
1
MarkDeck
A lightweight...
2
What is MarkDeck?
Simple, fast...
3
Getting Started
Create markdown...
4
Key Features
• Markdown-based...
5
Keyboard Nav
→ / Space: Next...
6
Speaker Notes
Hidden notes...
7
Code Highlighting
Beautiful...
What this shows: After navigating to slide 3 and pressing 'O' again,
the grid opens with slide 3 highlighted. This proves the current slide indicator updates correctly.
Slide 3 has the distinctive blue glowing border.
Screenshot 6: Hover Effect Demonstration INTERACTIVE
Hovering over slide 5 - shows interactive feedback
1
MarkDeck
A lightweight...
2
What is MarkDeck?
Simple, fast...
3
Getting Started
Create markdown...
4
Key Features
• Markdown-based...
5
Keyboard Nav
→ / Space: Next...
6
Speaker Notes
Hidden notes...
7
Code Highlighting
Beautiful...
What this shows: When hovering over slide 5, it lifts up slightly (translateY)
and the border changes to blue with a shadow. This provides interactive feedback showing
which slide you're about to click. Slide 3 remains the current slide (glowing border).
Generate Actual Screenshots
To generate actual PNG screenshots instead of these mockups:
- Go to your repository's Actions tab
- Select "Generate Grid View Screenshots"
- Click "Run workflow"
- Wait 2-3 minutes
- Download from Artifacts or find in
screenshots/ directory
The GitHub Actions workflow will capture real screenshots using Playwright + Chromium