Snippets

Share code between Shortcodes and Custom Layouts.

Snippets are template abstractions enabling you to reuse the same markup and logic used to create Shortcodes in your Custom Layouts.

Take for example the included Button Group shortcode used for creating a set of styled buttons, which we’ll look at in detail here.

First the partial:

{{/*
Copyright (C) 2019  VHS <vhsdev@tutanota.com>

This file is part of After Dark.

After Dark is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

After Dark is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/ -}}

<div class="btn-group{{ if eq .formactions "true" }} form-actions{{ end }}{{ with .class }} {{ . }}{{ end }}">
  {{ .body }}
</div>

Now the shortcode:

{{/*
Copyright (C) 2019  VHS <vhsdev@tutanota.com>

This file is part of After Dark.

After Dark is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

After Dark is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/ -}}

{{ $formactions := .Get "formactions" }}
{{ $class := .Get "class" }}
{{ $body := .Inner }}
{{ partial "components/buttongroup.html" (dict "formactions" $formactions "class" $class "body" $body) }}

Notice how the shortcode serves only to collect input and call the partial, which contains all markup and display logic. This delegation of responsibility is the abstraction that enables reuse between content and template.

Now let’s see how to actually use it.

Use the Button Group shortcode to group buttons in content:

{{< hackcss-buttongroup >}}
  {{< hackcss-button text="Left" />}}
  {{< hackcss-button text="Middle" type="info" />}}
  {{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}

Which creates a styled button group with three buttons as shown here:

To reuse in layout mirror the partial call used inside the shortcode.

All Shortcodes implementing hackcss components are built using the snippets template abstraction enabling each of them to be reused in Custom Layouts.