/showroom_template_default

The default template repo for Red Hat Showroom based lab, workshop and demo content. An Antora based Asciidoc template for creating demos, labs and other interactive browser based UIs

Primary LanguageJavaScript

Getting Started

This template is designed to be used as a base for your showroom lab guides.

The content is built using Antora, a static site generator for creating documentation sites from AsciiDoc documents.

This git repo template was created to make it easy for you to start developing your lab instructions.

Features:

  1. 0% cruft

  2. Red Hat Demo Platform UI Bundle default

  3. Dev Mode extension that displays the asciidoc attributes you have to work with

  4. Content is generated using Antora, a static site generator for creating documentation sites from AsciiDoc documents.

Getting Started

Using Containers (Recommended)

In order to test and develop on your local machine, you can use a specially built container with Podman or Docker as follows.

  1. Create a git repo from this template

    1. Suggested naming: showroom_<lab-name>

  2. Clone your new repo and cd into it

  3. When you make changes to the content, all you need is to kill the container and run it again.

    podman run --rm --name antora -v $PWD:/antora -p 8080:8080 -i -t ghcr.io/juliaaano/antora-viewer

Live-reload is not supported.

Using Local Files (Less Recommended)

  1. Create a git repo from this template

  2. Clone the repo and cd into it

  3. Run ./utilities/lab-serve

  4. Open http://localhost:8080 in your browser

  5. Run ./utilities/lab-build to build your html

To rebuild your html, run ./utilites/build.

Editing Files

Now you are ready to go! You can start editing the files in the content/modules/ROOT/pages/ directory.

Many modern editors such as Visual Studio Code offer live Asciidoc Preview extensions.

Understanding the Basic Template Directory Structure

./content/modules/ROOT/
├── assets
│   └── images                       # Images used in your content
│       └── example-image.png
├── examples                         # You can add downloadable assets here
│   └── example-bash-script.sh       # e.g. an example bash script
├── nav.adoc                         # Navigation for your lab
├── pages                            # Your content goes here
│   ├── index.adoc                   # First page of your lab, e.g. overview etc
│   ├── module-01.adoc
│   └── module-02.adoc               # Sample lab has 2 modules including index.adoc
└── partials                         # You can add partials here, reusable content inserted inline into your modules
    └── example_partial.adoc

Adding Additional Links

You can add links to external content in the convenient "Links" drop-down on the upper-right of the Showroom Summit 2024 UI.

./content/antora.yml
asciidoc:
  attributes:
    page-links:
    - url: https://redhat.com
      text: Red Hat
ui links

Dev Mode

As a convenience to developers, the Dev Mode Extention (disabled by default) displays the asciidoc attributes you have to work with while writing your lab instructions.

  1. Disable/Enable Dev Mode by changing enabled: true or enabled: false

    default-site.yml
    extensions:
  - id: dev-mode
    require: ./content/lib/dev-mode.js
    enabled: false

  2. Produces

    dev mode