base on Presentation slides for Flutter with Flutter   # SuperDeck SuperDeck enables you to craft visually appealing and interactive presentations directly within your Flutter apps, using the simplicity and power of Markdown.  ### [View demo here](https://superdeck-dev.web.app) ### [Example code](https://github.com/leoafarias/superdeck/blob/main/demo/slides.md) ## Getting Started Follow these steps to integrate SuperDeck into your Flutter project: 1. Install the CLI to set up your project: ```bash dart pub global activate superdeck_cli ``` 2. In your Flutter project, run the setup command: ```bash superdeck setup ``` This command will: - Configure your pubspec.yaml with required assets - Set up macOS entitlements if applicable - Create a basic slides.md file if none exists - Set up a custom index.html for web with loading indicator 3. Add the `superdeck` package to your project: ```bash flutter pub add superdeck ``` 4. Import the package and initialize SuperDeck: ```dart import 'package:superdeck/superdeck.dart'; void main() async { await SuperDeckApp.initialize(); runApp( MaterialApp( title: 'Superdeck', debugShowCheckedModeBanner: false, home: SuperDeckApp( options: DeckOptions( baseStyle: BaseStyle(), widgets: { 'twitter': (args) { return TwitterWidget( username: args.getString('username'), tweetId: args.getString('tweetId'), ); }, }, debug: false, styles: { 'announcement': AnnouncementStyle(), 'quote': QuoteStyle(), }, parts: const SlideParts( header: HeaderPart(), footer: FooterPart(), background: BackgroundPart(), ), ), ), ), ); } ``` ## Block-Based System SuperDeck uses a powerful block-based system for arranging content in your slides. This provides flexible layouts and composition options. ### Block Types - `@column` - For text and markdown content - `@section` - Container for organizing multiple blocks - `@image` - For displaying images with various options - `@dartpad` - Embed DartPad examples - `@widget` - Embed custom widgets with arguments ### Basic Layout Example ```markdown --- @column # Welcome to SuperDeck Your awesome slides start here! @column - Create beautiful slides using markdown - Arrange content using the block-based system - Customize with images, widgets, and more --- ``` ### Multiple Columns Example ```markdown --- @column { align: center_left flex: 2 } ## Left Column Content - Item 1 - Item 2 - Item 3 @column { align: center_right } ## Right Column Content With some explanatory text. --- ``` ### Custom Alignment Options Blocks support various alignment options: - `topLeft`, `topCenter`, `topRight` - `centerLeft`, `center`, `centerRight` - `bottomLeft`, `bottomCenter`, `bottomRight` ### Flex Property Use the `flex` property to control relative sizing of blocks: ```markdown @section @column { flex: 2 } This column takes up twice the space @column Normal sized column ``` ### Image Block Example ```markdown @column ## Image Example @column  {.cover} ``` ### DartPad Block Example ```markdown @dartpad { id: your_dartpad_id theme: dark run: true } ``` ### Widget Block Example ```markdown @widget { name: colorPalette schema: true prompts: [tropical, vibrant, pastel] } ``` ## Slide Examples ### Simple Slide with a Single Column ```markdown --- @column # My Slide Title - Point 1 - Point 2 - Point 3 --- ``` ### Multi-Column Layout ```markdown --- @column { align: center_left flex: 2 } # Left Content - More content on the left side - With a larger flex value @column { align: center_right } # Right Content This content takes up less space due to the default flex value of 1. --- ``` ### Slide with Custom Widget ```markdown --- @column # Tweet Example @twitter { username: username tweetId: 1234567890 } @column # More content --- ``` ### Slide with Mermaid Diagram ```markdown --- @column # Diagram Example ```mermaid graph TD A[Start] --> B[Input] B --> C[Process] C --> D[Output] D --> E[End] ``` {.code} --- ``` ### Slide with DartPad ```markdown --- @column # DartPad Example @dartpad { id: example-dartpad-id theme: dark } @column # Explanation This code demonstrates how to use Flutter widgets. --- ``` ### Slide with Image ```markdown --- @column # Image Example  {.cover} @column # Text alongside the image --- ``` ### Advanced Layout with Nested Sections ```markdown --- @section @column { align: center } # Main Header @section { flex: 2 } @column { align: center_left } ## Left Content @column { align: center_right } ## Right Content --- ``` ## SuperDeck App Options ### DeckOptions When initializing SuperDeck, configure deck-level behavior with `DeckOptions`: ```dart SuperDeckApp( options: DeckOptions( baseStyle: BaseStyle(), widgets: { 'twitter': (args) { return TwitterWidget( username: args.getString('username'), tweetId: args.getString('tweetId'), ); }, }, styles: { 'announcement': AnnouncementStyle(), 'quote': QuoteStyle(), }, parts: const SlideParts( header: HeaderPart(), footer: FooterPart(), background: BackgroundPart(), ), debug: false, ), ); ``` ### Custom Widgets You can register custom widgets and reference them directly from markdown: ```dart widgets: { 'twitter': (args) { return TwitterWidget( username: args.getString('username'), tweetId: args.getString('tweetId'), ); }, }, ``` ```markdown @twitter { username: username tweetId: 1234567890 } ``` ### Generated Assets SuperDeck can generate and manage rich assets for your deck: - Image formats including PNG, JPEG, GIF, WEBP, and SVG - Auto-generated thumbnails for quick previews - Mermaid diagram renderings ## Styles and Customization Apply global themes and per-slide styling through `DeckOptions`: ```dart baseStyle: BaseStyle(), styles: { 'announcement': AnnouncementStyle(), 'quote': QuoteStyle(), }, ``` You can also add CSS classes to individual elements using the `{.class-name}` syntax: ```markdown ## Styled Heading {.highlight}  {.cover} ``` ## Slide Parts Slide parts let you add consistent UI chrome to every slide: ```dart parts: const SlideParts( header: HeaderPart(), footer: FooterPart(), background: BackgroundPart(), ) ``` ## API Reference ### Block Model The `Block` hierarchy powers the SuperDeck renderer: - `SectionBlock`: Containers that organize other blocks - `ColumnBlock`: Renders markdown content within a column - `ImageBlock`: Displays local or remote images - `DartPadBlock`: Embeds live DartPad snippets - `WidgetBlock`: Hosts custom Flutter widgets registered in `DeckOptions` ### Asset Model `GeneratedAsset` instances represent resources produced during builds: - Image variants (PNG, JPEG, GIF, WEBP, SVG) - Slide thumbnails for quick previews - Mermaid diagrams rendered from fenced markdown blocks ### Slide Model Each `Slide` captures the structure of a presentation segment: - `key`: Unique identifier for lookup and navigation - `options`: Slide-level configuration and metadata - `sections`: Ordered collection of section blocks - `comments`: Optional presenter notes or annotations ## Advanced Features ### Code Highlighting Add the `.code` class to code fences for consistent formatting: ```markdown ```dart void main() { print('Hello, world!'); } ``` {.code} ``` ### Animations Animate individual elements with the `.animate` helper: ```markdown # This title will animate {.animate} ``` ### Notes and Alerts Call out supplemental information directly in markdown: ```markdown > [!NOTE] > This is a note. > [!WARNING] > This is a warning. > [!CAUTION] > This is a caution. ``` ## Configuration You can configure SuperDeck by creating a `superdeck.yaml` file in the root of your project. This allows you to set default options for all slides. ## Development ### Running the CLI Locally The SuperDeck CLI is included as a dev dependency in the demo app, making it easy to run locally: ```bash # From the demo app directory, run the CLI directly cd demo dart ../packages/cli/bin/main.dart <command> [arguments] # Example: Build slides dart ../packages/cli/bin/main.dart build # Example: Watch for changes and rebuild automatically dart ../packages/cli/bin/main.dart build --watch ``` ### Developing with the Demo App The demo app located at `demo/` is a complete Flutter application that showcases SuperDeck functionality: #### Running the Demo App 1. **Navigate to the demo directory:** ```bash cd demo ``` 2. **Build the slides using the local CLI:** ```bash dart ../packages/cli/bin/main.dart build ``` 3. **Run the Flutter app:** ```bash flutter run ``` #### Development Workflow For an efficient development workflow when working on SuperDeck: 1. **Start the CLI in watch mode** (in one terminal): ```bash cd demo dart ../packages/cli/bin/main.dart build --watch ``` 2. **Run the Flutter app** (in another terminal): ```bash cd demo flutter run ``` 3. **Edit slides:** Modify `demo/slides.md` and the CLI will automatically rebuild the assets. 4. **Hot reload:** Use Flutter's hot reload (`r`) to see changes in the app immediately. #### Available CLI Commands for Development - `dart ../packages/cli/bin/main.dart build` - Build slides once - `dart ../packages/cli/bin/main.dart build --watch` - Build and watch for changes - `dart ../packages/cli/bin/main.dart setup` - Set up SuperDeck configuration - `dart ../packages/cli/bin/main.dart --help` - Show all available commands #### Demo App Structure - `demo/slides.md` - The main presentation content - `demo/superdeck.yaml` - Configuration file for SuperDeck - `demo/lib/main.dart` - Flutter app entry point - `demo/assets/` - Static assets for the presentation ## For More Details Check out `demo/slides.md` for a complete deck walkthrough and explore the API documentation for advanced usage scenarios. ", Assign "at most 3 tags" to the expected json: {"id":"9620","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"