madwizard.io Web Site

This repository houses the logic for the web site https://madwizard.io. It showcases madwizard, which is a way to automate turning markdown source into a wizard user experience.

This repo uses the Kui project to generate a static single page web app. Kui includes a plugin that visualizes the madwizard wizard experience.

Using this repo as a template

You may use this repo as a starting point for crafting your own (similar) site. After cloning, start the watcher:

npm run watch

then visit http://localhost:9080. We use Playwright for tests. Run the tests via npm test.

Production Builds

This repository uses a GitHub Actions workflow to build the webpack bundles and deploy them to a site managed by GitHub Pages.

If you want to build the bundles manually, use npm run build, and look in dist/webpack for the index.html, etc.

Customizing your web app

You can customize your web app in the following ways:

1. Custom list of guidebooks: guidebook config; you can also specify which of these should be displayed onload via autoplay config. Drop any new guidebooks in plugins/plugin-client-offline/config.d/notebooks/, and they will automatically be available on the filepath e.g. /kui/client/foo.md for a file foo.md that you dropped into the notebooks/ directory. Use this filepath in the autoplay.json and notebooks.json config files.

2. Custom name: name config

3. Custom icon: icon files and icon config

4. Custom bottom stripe widgets: modify the React client code. In particular, look for the ContextWidgets and MeterWidgets bits. Here are some example bottom stripe widgets:

   • <MadeWithKui/>
   • <CurrentContext/>
   • <CurrentWorkingDirectory/>

   Beware that the latter two may make less sense (in their current form) in an offline static-single-page web application. Hopefully they can provide at least some inspiration.

5. Custom info to be displayed when pasting your URL in Slack, Twitter, etc. OpenGraph config.