joshdholtz/deckui

Swift DSL for writing slide decks in Xcode

✨ DeckUI

DeckUI is a Swift DSL (domain specific language) for writing slide decks in Xcode. It allows for quick creation of slides and content in a language and environment you are familiar with.

But why?

Well, I made this because:

• I was bored on an airplane
• Wanted to use this as a demo for future conference talk on Swift DSLs
• Need something more customizable than markdown for writing slide decks and more codey than Keynote

👉 Watch Introducing DeckUI - Write slide decks in Swift on my YouTube channel for more explaination and full demo

✨ Features

• Create slide decks in pure Swift code
• Decks are presented in SwiftUI with Presenter
• Build decks without knowing any SwiftUI
  • With Deck, Slide, Title, Words, Bullets, Media, Columns
• Use RawView to drop any SwiftUI view
  • Fully interactable and great for demos
• Display code with Code
  • Use up and down arrows to highlight lines of code as your talking about them
• Support videos on Media

🐌 Future Features

• Support iOS and maybe tvOS
• Fix bug with Media remote image loading and slide transitions
• Animations within a slide
• More customization on Words
• Nesting of Bullets
• Syntax highlighting for Code
• Documentation
• More examples

Simple Demo

import SwiftUI
import DeckUI

struct ContentView: View {
    var body: some View {
        Presenter(deck: self.deck)
    }
}

extension ContentView {
    var deck: Deck {
        Deck(title: "SomeConf 2023") {
            Slide(alignment: .center) {
                Title("Welcome to DeckUI")
            }

            Slide {
                Title("Quick Demo")
                Columns {
                    Column {
                        Bullets {
                            Words("Bullets")
                            Words("Words")
                            Words("Images")
                            Words("Columns")
                        }
                    }

                    Column {
                        Media(.remoteImage(URL(string: "https://www.fillmurray.com/g/200/300")!))
                    }
                }
            }
        }
    }
}

Screen.Recording.2022-09-08.at.12.40.41.AM.mov

💻 Installing

Swift Package Manager

• File > Swift Packages > Add Package Dependency
• Add https://github.com/joshdholtz/DeckUI.git
• Select "Up to Next Major" with "1.0.0"

🚀 Getting Started

There are no official "Getting Started" docs yet 😅 But look at...

• Demo app for usage
• Sources/DeckUI/DSL for how the Deck, Slide, and all slide components are built
• Sources/DeckUI/Views for how Presenter is built

📖 Documentation

100% not documented yet but I'll get there 🤷‍♂️

🏎 Performance

Probably bad and never production ready 😈 Please only use DeckUI for a single presentation and never at any scale.

👨‍💻 Contributing

Yes please! I'm happy to discuss issues and review/merge pull requests 🙂 I will do my best to get to the but I am a dad, work at RevenueCat, and the lead maintainer of fastlane so I might not respond right away.

📚 Examples

Slide

Slide can be used without any parameters but can be given a custom alignment, padding, and theme.

Slide {
    // Content
}

Slide(alignment: .center, padding: 80, theme: .white) {
    // Content
}

Title

Title can be used by itself or with an optional subtitle. It was real similar to Words but larger.

Slide(alignment: .center) {
    Title("Introducing...")
}

Slide {
    Title("Introduction", subtitle: "What is it?")
    // Content
}

Words

Words are similar to what a textbox would be in Keynote, PowerPoint, or Google Slides. There will eventually be more style configurations for words.

Slide(alignment: .center) {
    Title("Center alignment")
    Words("Slides can be center aligned")
    Words("And more words")
}

Bullets

Bullets turns Words into a list. It takes an optional style parameter where you can choose between .bullets and .dash. Bullets cannot be nested yet but soon™️.

Slide {
    Title("Introduction", subtitle: "What is it?")
    Bullets {
        Words("A custom Swift DSL to make slide decks")
        Words("Distributed as a Swift Package")
        Words("Develop your slide deck in Xcode with Swift")
    }
}

Slide {
    Title("Introduction", subtitle: "What is it?")
    Bullets(style: .dash) {
        Words("A custom Swift DSL to make slide decks")
        Words("Distributed as a Swift Package")
        Words("Develop your slide deck in Xcode with Swift")
    }
}

Media

Media provides a few ways to display images from various source types. This will eventually support videos.

Slide {
    Media(.assetImage("some-asset-name"))
    Media(.bundleImage("some-file-name.jpg"))
    Media(.remoteImage(URL(string: "http://placekitten.com/g/200/300"))!)
}

Columns

Columns allow you to use one to infinte Columns. Put other slide content in Column.

Slide {
    Title("Columns")
    Columns {
        Column {
            // Content
        }

        Column {
            // Content
        }
    }
}

Slide {
    Title("Columns")
    Columns {
        Column {
            // Content
        }

        Column {
            // Content
        }

        Column {
            // Content
        }

        Column {
            // Content
        }
    }
}

Code

Code is a super specifi version Words. It will:

• Display text as monospace
• Scroll vertical if bigger than screen
• Highlight lines of code when up and down arrows are pressed

Slide {
    Code("""
    struct ContentView: View {
        var body: some View {
            Text("Hello slides")
        }
    }
    """)
}

Slide {
    Code("""
    struct ContentView: View {
        var body: some View {
            Text("Hello slides")
        }
    }
    """, , enableHighlight: false)
}

RawView

Drop any SwiftUI view inside of RawView. Could be built-in SwiftUI views like Text or Button but can also be any custom SwiftUI view.

Slide {
    RawView {
        CounterView()
    }
}

struct CounterView: View {
    @State var count = 0

    var body: some View {
        Button {
            self.count += 1
        } label: {
            Text("Press me - \(self.count)")
                .font(.system(size: 60))
                .padding(.horizontal, 40)
                .padding(.vertical, 20)
                .foregroundColor(.white)
                .overlay(
                    RoundedRectangle(cornerRadius: 25)
                    .stroke(Color.white, lineWidth: 2)
                )
        }.buttonStyle(.plain)
    }
}

Themes

A Theme can be set in Presenter or individually on Slide. There are three default themes (.dark, .black, .white) but feel free to use your own.

struct ContentView: View {
    var body: some View {
        Presenter(deck: self.deck, showCamera: true)
    }
}

extension Theme {
    public static let venonat: Theme = Theme(
        background: Color(hex: "#624a7b"),
        title: Foreground(
            color: Color(hex: "#ff5a5a"),
            font: Font.system(size: 80,
                              weight: .bold,
                              design: .default)
        ),
        subtitle: Foreground(
            color: Color(hex: "#a48bbd"),
            font: Font.system(size: 50,
                              weight: .light,
                              design: .default).italic()
        ),
        body: Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 50,
                              weight: .regular,
                              design: .default)
        ),
        code: Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 26,
                              weight: .regular,
                              design: .monospaced)
        ),
        codeHighlighted: (Color(hex: "#312952"), Foreground(
            color: Color(hex: "#FFFFFF"),
            font: Font.system(size: 26,
                              weight: .heavy,
                              design: .monospaced)
        ))
    )
}

DeckUI in the real world

1. FullQueueDeveloper presents "Pushing to the App Store using Swift" with Swish & Sh at GDG Omaha! Watch the YouTube recording of the presentation, and checkout the source code on GitHub.

deckui's Issues

Crash when using arrows to go to next slide in full screen mode

Error:Thread 1: "-[__NSCFNumber length]: unrecognized selector sent to instance 0xbe41e94ca1efe8ee"

Works fine in non-full screen mode.
Works fine when Presenter notes and Slides are in full screen mode and Presenter notes have the focus

DeckUI: main
macOS: 13.4.1

Add export options

I think it would be nice to be able to export the deck to a PDF to share after the presentation with people.

Public `init` for `CodeTheme`

Currently, there's no public initializer for CodeTheme. This is required for people to create their own code themes without requiring them to update DeckUI itself.

`Code` element is sometimes doesn't scroll

See a live demo at https://youtu.be/SxozYjWMhgU?t=161 at the ~2:45 mark.

Here is a link the slide deck: https://github.com/FullQueueDeveloper/Deck-2022-09-13

Syntax highlighting support for Python code

After Swift support is added, I would be interested in having support for Python syntax highlighting.

I'm also working on a PythonGrammar for my website, which would plug right into the syntax highlight support added in PR #16... so we could use that, once I finish it.

Custom transitions per `Slide`

A feature that might be useful would be to customize a transition on a per slide basis. The Presenter could still be the source for the default transition for the entire Deck, but each Slide could contain their own preferred SlideDirection (or in the future SlideTransition #5), which would override the default.

This could be accomplished by including a:

public struct Slide: Identifiable {
    ...
    let slideDirection: SlideDirection?
    ...
}

And then changing Presenter.nextSlide() to look something like:

private func nextSlide() {
    let slides = self.deck.slides()
    if self.index >= (slides.count - 1) {
        if self.loop {
            self.index = 0
        }
    } else {
        self.index += 1
    }

    let newSlide = slides[self.index]
    self.activeTransition = (newSlide.slideDirection self.slideDirection).next
}

Something similar could be done for Presenter.prevSlide()

Possible syntax highlighting collaboration

I literally just finished watching the presentation of DeckUI at Deep Dish, and one part really spoke to me. I've worked a bunch with syntax highlighting, and in fact maintain a number of Swift packages that could potentially be useful. Now the stuff I do may not be a perfect fit, because it is all built to back a general-purpose text editing system. However, it can definitely still do static text.

Neon (https://github.com/chimeHQ/Neon) is a highlighting system.
SwiftTreeSitter (https://github.com/chimeHQ/SwiftTreeSitter) is the component that pulls out the syntactic info needed for highlighting.

I think the largest issue is probably with how the tree-sitter works, specifically how you support a language grammar. Each language requires its own Swift package. I've been (very slowly) SPM-ifying the language grammars themselves, but it isn't that hard and there's almost certainly tree-sitter support for whatever language might be of interest.

I figured I'd open up an issue first to talk about it, because in some ways this could be a great collaboration. Also, I’m not sure how this could be more of an over-engineered solution, so seemed appropriate.

Using camera leads to fatal error NSViewRepresentables must be value types

Hi all.

I am on a Mac mini M1, macOS Ventura 13.2, Xcode Version 14.1 (14B47b), fresh DeckUI package from GitHub added as a package to macOS app project. App deployment target is set to macOS 13.0.

Trying to enable presenter camera:

struct ContentView: View {
   var body: some View {
      Presenter(deck: self.deck, defaultResolution: Presenter.DefaultResolution(width: 2000, height: 1200), showCamera: true)
    }
}

App builds good, but crashes with error immediately:

SwiftUI/NSViewRepresentable.swift:243: Fatal error: NSViewRepresentables must be value types: PlayerContainerView

My App is sandboxed, has Camera and User selected files permissions, signed to run locally. Info.plist contains camera usage description (privacy). Have given permission to use camera when app launches (showCamera set to false).

App works wonderfully when setting showCamera: false.

Anything I am doing wrong?

Feature Request - Presenter Notes

Feature Request

I'm unsure if this is already possible however, having the ability to add presenter notes that are not visible to the viewer would be ideal.

The way I picture it working is... top left or right of my screen I would have a thumbnail of the slide I am displaying. Then on the main portion of my screen I have presenter notes which I can refer to on the topic as needed.

External Camera support (Apple Studio Display)

The camera input works for MacBook build-in camera, but doesn't work for Apple Studio Display camera (didn't check if this is the case for other external camera setup as well)

Syntax highlighting for code

I was looking at the CodeView and what it would take to do syntax highlighting for code. I think we could utilize parts of John Sundell's Splash repo. It takes Swift code and converts it to HTML, but in the process it tokenizes the code.

If we tap into this tokenization, we could use it to drive the syntax highlighting in DeckUI. I see two options for this:

1. AttributedString within a Text view
2. Iterate over the tokenized code and create a Text for each token with proper highlighting based on the token.

I think option number 2 should be easier.

The other nice thing about the Splash-style tokenization is that it's pretty easy to add grammar for other programming languages. For my blog, I'm currently creating one for Python, which then could also be used in DeckUI.

Modern SwiftUI need struct view

SwiftUI/NSViewRepresentable.swift:235: Fatal error: NSViewRepresentables must be value types: PlayerContainerView

the problem is that PlayerContainerView is a class and it suppose to be a struct

Feature Request - Support basic markdown

For example:
Title("`ClassName` is really important") would render a title where `ClassName` is highlighted like ClassName.
Text("\_This\_ is italicized") would render text where _This_ renders like This.
Words("\**What\** even is text") would render words where *What* renders like What.

I use these inline highlights a lot and I immediately was missing them when I tried using DeckUI because my title contained something I wanted to highlight.

Add slide thumbnails

I think it would be nice to have slides preview on the split view pane, similar to the Preview.app
It will help with fast navigation through the deck

`SlideDirection` -> `SlideTransition`

In the future, it might be handy to add more transitions between slides. For instance, in Keynote, I use Dissolve quite often, and would miss it here. This would require adding a new case to the SlideDirection enum.

However, at the point of adding more transition types, the name no longer makes sense. It might be better to rename it to SlideTransition to more accurately reflect the functionality.

Hack with transparent rectangle for context menu looks weird on the iOS

Introduced with #15