Add slides documentation and video (#9464)

## 📝 Summary

<!--
If this PR closes any issues, list them here by number (e.g., Closes
#123).

Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
<img width="779" height="758" alt="image"
src="https://github.com/user-attachments/assets/f222f914-46f7-41ef-a035-4d5f21ea9790"
/>

Added docs for the new feature. Also fixed a bug when trying to run docs
locally.

## 📋 Pre-Review Checklist
<!-- These checks need to be completed before a PR is reviewed -->

- [x] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [] Video or media evidence is provided for any visual changes
(optional). <!-- PR is more likely to be merged if evidence is provided
for changes made -->

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] Documentation has been updated where applicable, including
docstrings for API changes.
- [ ] Tests have been added for the changes made.

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: 3 people

docs/_static/docs-slides-view.mp4

@@ -80,11 +80,19 @@ Enable the grid editor in the app preview, via a dropdown:
 
 If you prefer a slideshow-like experience, you can use the slides layout. Enable the slides layout in the app preview, via the same dropdown as above.
 
-Unlike the grid layout, the slides are much less customizable:
+<video muted controls loop playsinline width="100%" src="/_static/docs-slides-view.mp4" aria-label="Video showing the slides layout editor">
+</video>
+
+#### Features
+
+- A slide minimap on the left where you can drag and drop slides to rearrange them.
+- A config sidebar on the right where you can configure the type of each slide.
+- Edit code and run cells by clicking the Code toggle or using the keyboard shortcut `C`.
+- Powered by [reveal.js](https://revealjs.com/), so you can use most of its features like keyboard shortcuts, navigation, etc.
+
+#### Notes
 
 - The order of the slides is determined by the order of the cells in the notebook.
-- The slides do not support drag-and-drop rearrangement or resizing.
-- All outputs are shown and all code is hidden.
 - For PDF export, use `marimo export pdf notebook.py --as=slides --raster-server=live` for slide-style output with better capture compatibility.
 
 If you need more control over the layout, please file an issue on [GitHub](https://github.com/marimo-team/marimo/issues),

docs/guides/apps.md

@@ -1,6 +1,6 @@
 # Lint Rules
 
-<!-- Autogenerated! Please edit scripts/generate_lint_docs.py instead --!>
+<!-- Autogenerated! Please edit scripts/generate_lint_docs.py instead -->
 
 marimo includes a linter that helps you write better notebooks. The linter checks for various issues that could prevent your notebook from running correctly or cause confusion.
 

docs/guides/lint_rules/index.md

@@ -8,6 +8,7 @@ import {
   CookieIcon,
   PanelRightCloseIcon,
   PanelRightOpenIcon,
+  KeyboardIcon,
 } from "lucide-react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
@@ -28,6 +29,7 @@ import type {
 import { useState } from "react";
 import { Tooltip } from "../ui/tooltip";
 import { Button } from "../ui/button";
+import { Kbd } from "../ui/kbd";
 import type { RuntimeCell } from "@/core/cells/types";
 
 export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
@@ -132,10 +134,51 @@ const SlidesForm = ({
       <TabsContent value="deck" className="mt-0 flex-1">
         <DeckConfigForm layout={layout} setLayout={setLayout} />
       </TabsContent>
+      <hr />
+      <KeyboardTips />
     </Tabs>
   );
 };
 
+const KEYBOARD_TIPS: { keys: string[]; description: string }[] = [
+  { keys: ["F"], description: "Enter fullscreen" },
+  { keys: ["C"], description: "Toggle code editor" },
+];
+
+const KEYBOARD_SHORTCUTS_URL =
+  "https://vlaaad.github.io/reveal/keyboard-shortcuts";
+
+const KeyboardTips = () => {
+  return (
+    <div className="flex flex-col gap-2 text-xs text-muted-foreground">
+      <div className="flex items-center gap-1.5 font-medium text-foreground/80">
+        <KeyboardIcon className="h-3.5 w-3.5" />
+        <span>Shortcuts</span>
+      </div>
+      <ul className="flex flex-col gap-1.5">
+        {KEYBOARD_TIPS.map(({ keys, description }) => (
+          <li key={description} className="flex items-center justify-between">
+            <span>{description}</span>
+            <span className="flex gap-1">
+              {keys.map((key) => (
+                <Kbd key={key}>{key}</Kbd>
+              ))}
+            </span>
+          </li>
+        ))}
+      </ul>
+      <a
+        href={KEYBOARD_SHORTCUTS_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-link hover:underline"
+      >
+        See all shortcuts
+      </a>
+    </div>
+  );
+};
+
 const SlideConfigForm = ({
   layout,
   setLayout,

frontend/src/components/slides/slide-form.tsx

@@ -274,7 +274,7 @@ def generate_main_index_page(rules_by_severity: dict[Severity, list[dict[str, An
     """Generate the main lint rules index page."""
     content = """# Lint Rules
 
-<!-- Autogenerated! Please edit scripts/generate_lint_docs.py instead --!>
+<!-- Autogenerated! Please edit scripts/generate_lint_docs.py instead -->
 
 marimo includes a linter that helps you write better notebooks. The linter checks for various issues that could prevent your notebook from running correctly or cause confusion.