Customization

sac-theme is a Base Theme of Slides as Code.

Hugo Template and Configuration, VS Code Snippets and Contents are the composable parts of the Base Theme.

A Theme is a Git repository or tarball that could contains one or more composable parts. Composable part adds or overrides features from previous theme(s) in the configured list (when slides deck has been created by sac deck new command).

A Theme within Git repository could be named sac-theme-<name> or simply <name>.
git describe --tags command is used to get its version (e.g. x.y.z).

A Theme within tarball should contain a VERSION file that contains one line with its name (name) and version (x.y.z):

name/x.y.z

When installing it with sac theme install command, the Theme will be installed into /usr/local/share/sac/themes/name/x.y.z directory.

Hugo Template and Configuration composition is managed by Hugo command-line.

Thereby, assets (containing CSS and Javascript), layout (containing HTML and Shortcodes) and static (containing logos, images), config.yaml elements can be added or override by the Theme .

A Theme should contains theme.toml file as required by Hugo.

See Hugo documentation page for further information.

sac deck new command copies contents (from each content directory, if exists) from given themes into content directory of your slides deck directory.

This composable part can be used to get predefined content for different usages such as sales pitch deck, reference architecture design…

sac deck code command merges VS Code snippets from previously configured themes into .vscode/sac.code-snippets file of your slides deck directory.

An example of Theme is available on sac-theme-acme project.

ACME theme contains some overrides for Hugo:

• HTML in layouts/partials/sac/body.html to create a branding layer for the slides.
• Shortcodes in layouts/shortcodes to manage title and subtitle layers.
• SCSS in assets/sac/scss/custom.scss file.
• Javascript in sac-theme-acme/assets/sac/js/custom.js to manage brand layer.
• Logo and image in static/acme directory.

ACME theme contains a cover slide for every slides deck created with it, stored in content/_index.md file.

ACME theme contains VS Code snippets in .vscode/sac.code-snippets file. It contains:

• palette colors override for *Color snippets
• layer* snippets to implement layer and layer-logo shortcodes

• Install Slides as Code CLI

$ brew install sacproj/sac/sac

• Install Slides as Code Theme

$ sac theme install github sacproj/sac-theme

• Install Slides as Code ACME Theme

$ sac theme install git https://github.com/sacproj/sac-theme-acme.git 1.0.0

• Check installed themes

$ sac theme installed
/usr/local/share/sac/themes
├── acme
│   └── 1.0.0
└── sac
    └── 2.0.0

• Create a new slides deck in example directory

$ sac deck new example sac/2.0.0 acme/1.0.0

• Create some slides content files

$ cd example
$ sac content new content.md
$ sac content new end.md

• Open content/home/content.md file and write following content:

---
weight: 10
markup: "html"
---
{{< layer type="title" title="Palette" subtitle="Colors" >}}

------
{{< layer title="Colors" >}}

{{< div "text-highlight-orange" >}}orange{{< /div >}}
{{< div "text-highlight-blue" >}}blue{{< /div >}}
{{< div "text-highlight-gray" >}}gray{{< /div >}}
{{< div "text-highlight-yellow" >}}yellow{{< /div >}}
{{< div "text-highlight-brown" >}}brown{{< /div >}}

• Open content/home/end.md file and write following content:

---
weight: 20
markup: "html"
---
{{< menu-title "End" >}}
{{< layer-logo >}}

• Show slides deck and open your browser to show customized theme in action.

$ sac deck code