https://github.com/icanzilb/markwalkthrough

A SwiftUI package to quickly build app walkthroughs
https://github.com/icanzilb/markwalkthrough

swift swiftui

Last synced: 21 days ago
JSON representation

A SwiftUI package to quickly build app walkthroughs

• Host: GitHub
• URL: https://github.com/icanzilb/markwalkthrough
• Owner: icanzilb
• License: other
• Created: 2023-12-03T09:45:45.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-12-06T06:36:32.000Z (11 months ago)
• Last Synced: 2024-10-04T12:50:02.573Z (about 1 month ago)
• Topics: swift, swiftui
• Language: Swift
• Homepage: https://underplot.com
• Size: 2.85 MB
• Stars: 27
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MarkWalkthrough

A SwiftUI package to quickly build app walkthroughs.

This is some code I extracted from my app Rex Tables — the demo app in this repo is the original Rex Tables walkthrough.

MarkWalkthrough uses a list of images, text and transitions and displays a walkthrough window letting the user navigate through the "slides".

You define the walkthrough slides in Markdown like so:

```markdown

| image          | sticker  | stickerOffset | stickerScale | transition    | text                                                                                                                                                     |

| -------------- | -------- | ------------- | ------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |

| Icon_256x256   |          |               |              | swoosh,vanish | Welcome to Rex Tables!  Rex allows you to work with ad-hoc spreadsheets generated on-the-fly from your text files.  Click the arrows to advance          |

| app-window-1   |          |               |              | skid,         | This is the Rex Tables window — write a regex at the top, the app finds matches in the source text and displays an interactive spreadsheet at the bottom |

...

```

A simple demo app could look like this:

```swift

struct DemoAppApp: App {

    let viewModel = try! MarkWalkthroughModel(

        from: Bundle.main.url(forResource: "Walkthrough", withExtension: "md")!

    )

    var body: some Scene {

        WindowGroup {

            MarkWalkthroughWindow(viewModel: viewModel, closeAction: {})

                .background(Color("BackgroundColor"))

                .frame(width: 650, height: 500, alignment: .top)

        }

        .windowResizability(.contentSize)

        .windowStyle(.hiddenTitleBar)

    }

}

```

MarkWalkthrough builds a view with the given slide image and text and optionally adds a sticker, if defined:

![A walkthrough window showing example data](etc/demo-app.png)

## Installation

Use the package directly in Xcode or via SwiftPM.

```swift

dependencies: [

  .package(url: "https://github.com/icanzilb/MarkWalkthrough", from: "0.6.0"),

]

```

## Credits

MIT License, Marin Todorov (2023)

https://www.underplot.com

[@icanzilb](https://mastodon.social/@icanzilb)