slipway-theme 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d0d2d52540ddd0bc4f734b24076c53ad9e68005db52c4842fd48c085cf598a9
-  data.tar.gz: 5bbd56dcba755da1884d0342f7b0362679e42f14fd2fa21eddd0bdad8258f4e8
+  metadata.gz: 64b99b877b27e499613f86eb450b90ce4aae6ed4c2e2b642d1d833bcc55bb36e
+  data.tar.gz: b37ab500062b1ac43f76cc0564f29dfbddfcfdc2722983498d692f803c283ae7
 SHA512:
-  metadata.gz: ad5b45c3c0328902ddbc3f525474efbbcea4005ea4cc38d67a653fe6bdf96a7c8224a6553cd5d452240cf27b6574449ac80c3266338e44ad5d060422e070977b
-  data.tar.gz: cd0beb748c32d545fafb6d463491d55080b45d5c28def720b80e3947c32640ac3ee3db4339f98be07cf3b2d5f8fd39b570ea3b66a95947261684bc8f6d7b3c7e
+  metadata.gz: '09d4c106d92a85cefbb0448022df7007d73c0d8aaa1d385f2e36deebe9db3116f9ae85c20162e018fa0497f323b965cb761b269e466ee716248a9cdbb04280a6'
+  data.tar.gz: 82db65e365fedc536ab3bc8990bfe63063bf150b07e76720b31045930e57baa70454b9d27400922db5265627dc9afb1fd8f8d3e5749f53d859e9d7427f5f1257

data/_includes/blocks/annotations.html

@@ -0,0 +1,18 @@
+{%- if include.code.size > 0 -%}
+{%- include component-css.html name="annotations" -%}
+{%- assign language = include.language | default: "text" -%}
+{%- assign id_prefix = include.id_prefix | default: "sl-annotation" -%}
+<figure class="sl-annotations">
+  {%- if include.caption %}
+  <figcaption>{{ include.caption }}</figcaption>
+  {%- endif %}
+  <pre dir="ltr"><code class="language-{{ language }}">{{ include.code | escape }}</code></pre>
+  {%- if include.notes.size > 0 %}
+  <ol class="sl-annotations-notes">
+    {%- for note in include.notes %}
+    <li id="{{ id_prefix }}-{{ forloop.index }}">{%- assign note_text = note.text | default: note -%}{{ note_text }}</li>
+    {%- endfor %}
+  </ol>
+  {%- endif %}
+</figure>
+{%- endif -%}

data/_includes/blocks/audio.html

@@ -0,0 +1,22 @@
+{%- if include.src -%}
+{%- include component-css.html name="audio" -%}
+<figure class="sl-audio">
+  <audio controls preload="metadata" src="{{ include.src | relative_url | escape }}"></audio>
+  {%- if include.chapters %}
+  <ol class="sl-audio-chapters">
+    {%- for chapter in include.chapters %}
+    <li><time>{{ chapter.time | escape }}</time> {{ chapter.title | escape }}</li>
+    {%- endfor %}
+  </ol>
+  {%- endif %}
+  {%- if include.transcript and include.transcript_label %}
+  <details class="sl-audio-transcript">
+    <summary>{{ include.transcript_label | escape }}</summary>
+    {{ include.transcript | markdownify }}
+  </details>
+  {%- endif %}
+  {%- if include.title %}
+  <figcaption>{{ include.title | escape }}</figcaption>
+  {%- endif %}
+</figure>
+{%- endif -%}

data/_includes/blocks/badge.html

@@ -0,0 +1,2 @@
+{%- assign status = include.status | default: "stable" -%}
+<span class="sl-badge sl-badge-{{ status }}">{{ include.label }}</span>

data/_includes/blocks/chart.html

@@ -0,0 +1,32 @@
+{%- include component-css.html name="chart" -%}
+{%- if include.data and include.data.size > 0 -%}
+  {%- assign _sl_max = include.max | default: 0 | plus: 0.0 -%}
+  {%- if _sl_max <= 0 -%}
+    {%- for row in include.data -%}
+      {%- assign _sl_value = row.value | default: 0 | plus: 0.0 -%}
+      {%- if _sl_value > _sl_max -%}{%- assign _sl_max = _sl_value -%}{%- endif -%}
+    {%- endfor -%}
+  {%- endif -%}
+  <figure class="sl-chart">
+    {%- if include.caption -%}
+      <figcaption>{{ include.caption | escape }}</figcaption>
+    {%- endif -%}
+    <table class="sl-chart-table">
+      <tbody>
+        {%- for row in include.data -%}
+          {%- assign _sl_percent = 0 -%}
+          {%- if _sl_max > 0 -%}
+            {%- assign _sl_value = row.value | default: 0 | plus: 0.0 -%}
+            {%- assign _sl_percent = _sl_value | times: 100.0 | divided_by: _sl_max | round: 1 -%}
+            {%- if _sl_percent > 100 -%}{%- assign _sl_percent = 100 -%}{%- endif -%}
+            {%- if _sl_percent < 0 -%}{%- assign _sl_percent = 0 -%}{%- endif -%}
+          {%- endif -%}
+          <tr>
+            <th scope="row">{{ row.label | escape }}</th>
+            <td>{{ row.value }}<span class="sl-chart-bar" style="--sl-chart-value: {{ _sl_percent }}%"></span></td>
+          </tr>
+        {%- endfor -%}
+      </tbody>
+    </table>
+  </figure>
+{%- endif -%}

data/_includes/blocks/citation.html

@@ -0,0 +1,12 @@
+{%- if include.references -%}
+{%- include component-css.html name="citation" -%}
+<ol class="sl-citation-list" id="{{ include.id | default: 'references' }}">
+  {%- for reference in include.references -%}
+    {%- assign reference_id = reference.id | default: forloop.index -%}
+    <li id="ref-{{ reference_id }}">{{ reference.text }}{% if reference.url %} <a href="{{ reference.url }}" dir="ltr">{{ reference.url }}</a>{% endif %}</li>
+  {%- endfor -%}
+</ol>
+{%- endif -%}
+{%- if include.ref -%}
+<span class="sl-citation"><a href="#ref-{{ include.ref }}">[{{ include.text | default: include.ref }}]</a></span>
+{%- endif -%}

data/_includes/blocks/code-group.html

@@ -0,0 +1,10 @@
+{%- include component-css.html name="code-group" -%}
+{%- assign group_id = include.id | default: "code-group" -%}
+<div class="sl-code-group" role="radiogroup" aria-labelledby="{{ group_id }}-label">
+  <span class="sl-code-group-label" id="{{ group_id }}-label">{{ include.label | default: "Code examples" | escape }}</span>
+  {%- for item in include.items -%}
+    <input class="sl-code-group-input" type="radio" name="{{ group_id }}" id="{{ group_id }}-{{ forloop.index }}"{% if forloop.first %} checked{% endif %}>
+    <label class="sl-code-group-tab" for="{{ group_id }}-{{ forloop.index }}">{{ item.label | escape }}</label>
+    <pre class="sl-code-group-panel" dir="ltr"><code class="language-{{ item.language | escape }}">{{ item.code | escape }}</code></pre>
+  {%- endfor -%}
+</div>

data/_includes/blocks/compare.html

@@ -0,0 +1,64 @@
+{%- if include.pros or include.cons -%}
+  <div class="sl-compare sl-compare-pros-cons">
+    {%- if include.pros -%}
+      <div class="sl-compare-pros">
+        <ul>
+          {%- for pro in include.pros -%}
+            <li>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="sl-icon" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
+              <span>{{ pro }}</span>
+            </li>
+          {%- endfor -%}
+        </ul>
+      </div>
+    {%- endif -%}
+    {%- if include.cons -%}
+      <div class="sl-compare-cons">
+        <ul>
+          {%- for con in include.cons -%}
+            <li>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="sl-icon" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>
+              <span>{{ con }}</span>
+            </li>
+          {%- endfor -%}
+        </ul>
+      </div>
+    {%- endif -%}
+  </div>
+{%- elsif include.features and include.headers -%}
+  <div class="sl-compare sl-compare-matrix">
+    <div class="sl-compare-table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <td></td>
+            {%- for header in include.headers -%}
+              <th scope="col">{{ header }}</th>
+            {%- endfor -%}
+          </tr>
+        </thead>
+        <tbody>
+          {%- for feature in include.features -%}
+            <tr>
+              <th scope="row">{{ feature.label }}</th>
+              {%- for val in feature.values -%}
+                <td class="sl-compare-cell-{{ val }}">
+                  {%- if val == "yes" -%}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="sl-icon" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>
+                    <span class="sl-sr-only">{% include i18n-builtin.html key="yes" %}</span>
+                  {%- elsif val == "no" -%}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="sl-icon" viewBox="0 0 16 16"><path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/></svg>
+                    <span class="sl-sr-only">{% include i18n-builtin.html key="no" %}</span>
+                  {%- elsif val == "partial" -%}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="sl-icon" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/></svg>
+                    <span class="sl-sr-only">{% include i18n-builtin.html key="partial" %}</span>
+                  {%- endif -%}
+                </td>
+              {%- endfor -%}
+            </tr>
+          {%- endfor -%}
+        </tbody>
+      </table>
+    </div>
+  </div>
+{%- endif -%}

data/_includes/blocks/diff.html

@@ -0,0 +1,31 @@
+{%- include component-css.html name="diff" -%}
+{%- assign removed = include.removed | default: "" -%}
+{%- assign added = include.added | default: "" -%}
+{%- assign language = include.language | default: "plaintext" -%}
+{%- assign nl = "
+" -%}
+<figure class="sl-diff">
+  {%- if include.caption -%}
+    <figcaption>{{ include.caption | escape }}</figcaption>
+  {%- endif -%}
+  {%- if removed != "" -%}
+    {%- assign removed_lines = removed | escape | split: nl -%}
+    <div class="sl-diff-side sl-diff-removed">
+      <pre dir="ltr"><code class="language-{{ language }}">
+        {%- for line in removed_lines -%}
+          <span class="sl-diff-line"><span class="sl-diff-sign" aria-hidden="true">−</span>{{ line }}</span>
+        {%- endfor -%}
+      </code></pre>
+    </div>
+  {%- endif -%}
+  {%- if added != "" -%}
+    {%- assign added_lines = added | escape | split: nl -%}
+    <div class="sl-diff-side sl-diff-added">
+      <pre dir="ltr"><code class="language-{{ language }}">
+        {%- for line in added_lines -%}
+          <span class="sl-diff-line"><span class="sl-diff-sign" aria-hidden="true">+</span>{{ line }}</span>
+        {%- endfor -%}
+      </code></pre>
+    </div>
+  {%- endif -%}
+</figure>

data/_includes/blocks/download.html

@@ -0,0 +1,28 @@
+{%- if include.url -%}
+  {%- include component-css.html name="download" -%}
+  {%- assign has_meta = false -%}
+  {%- if include.name and include.name_label -%}{%- assign has_meta = true -%}{%- endif -%}
+  {%- if include.size and include.size_label -%}{%- assign has_meta = true -%}{%- endif -%}
+  {%- if include.checksum and include.checksum_label -%}{%- assign has_meta = true -%}{%- endif -%}
+  <div class="sl-download">
+    {%- if include.label -%}
+      <a class="sl-download-button" href="{{ include.url | relative_url }}" download>{{ include.label | escape }}</a>
+    {%- endif -%}
+    {%- if has_meta -%}
+      <dl class="sl-download-meta">
+        {%- if include.name and include.name_label -%}
+          <dt>{{ include.name_label | escape }}</dt>
+          <dd>{{ include.name | escape }}</dd>
+        {%- endif -%}
+        {%- if include.size and include.size_label -%}
+          <dt>{{ include.size_label | escape }}</dt>
+          <dd>{{ include.size | escape }}</dd>
+        {%- endif -%}
+        {%- if include.checksum and include.checksum_label -%}
+          <dt>{{ include.checksum_label | escape }}</dt>
+          <dd class="sl-download-checksum"><code dir="ltr">{{ include.checksum | escape }}</code></dd>
+        {%- endif -%}
+      </dl>
+    {%- endif -%}
+  </div>
+{%- endif -%}

data/_includes/blocks/endpoint.html

@@ -0,0 +1,50 @@
+{%- include component-css.html name="endpoint" -%}
+{%- assign method = include.method | upcase | default: "GET" -%}
+<div class="sl-endpoint">
+  <div class="sl-endpoint-header" dir="ltr">
+    <span class="sl-endpoint-method sl-endpoint-method-{{ method | downcase }}">{{ method }}</span>
+    <code class="sl-endpoint-path">{{ include.path }}</code>
+  </div>
+  {%- if include.parameters -%}
+    <div class="sl-endpoint-parameters">
+      <h2>{% include i18n-builtin.html key="parameters" %}</h2>
+      <div class="sl-endpoint-table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">{% include i18n-builtin.html key="name" %}</th>
+              <th scope="col">{% include i18n-builtin.html key="type" %}</th>
+              <th scope="col">{% include i18n-builtin.html key="description" %}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {%- for param in include.parameters -%}
+              <tr>
+                <td class="sl-endpoint-param-name">
+                  <code>{{ param.name }}</code>
+                  {%- if param.required -%}
+                    <span class="sl-endpoint-param-required">{% include i18n-builtin.html key="required" %}</span>
+                  {%- endif -%}
+                </td>
+                <td class="sl-endpoint-param-type"><code>{{ param.type }}</code></td>
+                <td class="sl-endpoint-param-description">{{ param.description | markdownify }}</td>
+              </tr>
+            {%- endfor -%}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {%- endif -%}
+  {%- if include.request -%}
+    <div class="sl-endpoint-request">
+      <h2>{% include i18n-builtin.html key="example_request" %}</h2>
+      <pre><code>{{ include.request | escape }}</code></pre>
+    </div>
+  {%- endif -%}
+  {%- if include.response -%}
+    <div class="sl-endpoint-response">
+      <h2>{% include i18n-builtin.html key="example_response" %}</h2>
+      <pre><code>{{ include.response | escape }}</code></pre>
+    </div>
+  {%- endif -%}
+</div>

data/_includes/blocks/file-tree.html

@@ -0,0 +1,52 @@
+<div class="sl-file-tree">
+  {%- if include.list -%}
+    {{ include.list | markdownify }}
+  {%- elsif include.items -%}
+    <ul>
+      {%- for item1 in include.items -%}
+        <li>
+          <span class="sl-file-name">{{ item1.name }}</span>
+          {%- if item1.note -%}
+            <span class="sl-file-note">{{ item1.note }}</span>
+          {%- endif -%}
+          {%- if item1.children -%}
+            <ul>
+              {%- for item2 in item1.children -%}
+                <li>
+                  <span class="sl-file-name">{{ item2.name }}</span>
+                  {%- if item2.note -%}
+                    <span class="sl-file-note">{{ item2.note }}</span>
+                  {%- endif -%}
+                  {%- if item2.children -%}
+                    <ul>
+                      {%- for item3 in item2.children -%}
+                        <li>
+                          <span class="sl-file-name">{{ item3.name }}</span>
+                          {%- if item3.note -%}
+                            <span class="sl-file-note">{{ item3.note }}</span>
+                          {%- endif -%}
+                          {%- if item3.children -%}
+                            <ul>
+                              {%- for item4 in item3.children -%}
+                                <li>
+                                  <span class="sl-file-name">{{ item4.name }}</span>
+                                  {%- if item4.note -%}
+                                    <span class="sl-file-note">{{ item4.note }}</span>
+                                  {%- endif -%}
+                                </li>
+                              {%- endfor -%}
+                            </ul>
+                          {%- endif -%}
+                        </li>
+                      {%- endfor -%}
+                    </ul>
+                  {%- endif -%}
+                </li>
+              {%- endfor -%}
+            </ul>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
+</div>

data/_includes/blocks/gallery.html

@@ -0,0 +1,18 @@
+{%- include component-css.html name="gallery" -%}
+<div class="sl-gallery">
+  {%- for image in include.images %}
+  <figure class="sl-gallery-item">
+    <img src="{{ image.src | relative_url | escape }}" alt="{{ image.alt | escape }}"{% if image.srcset %} srcset="{{ image.srcset | escape }}"{% endif %}{% if image.width %} width="{{ image.width }}"{% endif %}{% if image.height %} height="{{ image.height }}"{% endif %}{% if image.lazy %} loading="lazy"{% endif %}>
+    {%- if image.caption or image.credit %}
+    <figcaption>
+      {%- if image.caption %}
+      <span class="sl-gallery-caption">{{ image.caption | escape }}</span>
+      {%- endif %}
+      {%- if image.credit %}
+      <span class="sl-gallery-credit">{{ image.credit | escape }}</span>
+      {%- endif %}
+    </figcaption>
+    {%- endif %}
+  </figure>
+  {%- endfor %}
+</div>

data/_includes/blocks/hero.html

@@ -0,0 +1,30 @@
+{%- include component-css.html name="hero" -%}
+<section class="sl-hero"{% if include.id %} id="{{ include.id | escape }}"{% endif %}{% if include.id and include.title %} aria-labelledby="{{ include.id | escape }}-title"{% endif %}>
+  <div class="sl-hero-body">
+    {%- if include.title %}
+    <h2 class="sl-hero-title"{% if include.id %} id="{{ include.id | escape }}-title"{% endif %}>{{ include.title }}</h2>
+    {%- endif %}
+    {%- if include.lead %}
+    <p class="sl-hero-lead">{{ include.lead }}</p>
+    {%- endif %}
+    {%- assign show_primary = false -%}
+    {%- if include.primary_url and include.primary_label -%}{%- assign show_primary = true -%}{%- endif -%}
+    {%- assign show_secondary = false -%}
+    {%- if include.secondary_url and include.secondary_label -%}{%- assign show_secondary = true -%}{%- endif -%}
+    {%- if show_primary or show_secondary %}
+    <div class="sl-hero-actions">
+      {%- if show_primary %}
+      <a class="sl-hero-action sl-hero-action-primary" href="{{ include.primary_url | relative_url }}">{{ include.primary_label }}</a>
+      {%- endif %}
+      {%- if show_secondary %}
+      <a class="sl-hero-action sl-hero-action-secondary" href="{{ include.secondary_url | relative_url }}">{{ include.secondary_label }}</a>
+      {%- endif %}
+    </div>
+    {%- endif %}
+  </div>
+  {%- if include.image %}
+  <div class="sl-hero-media">
+    <img src="{{ include.image | relative_url | escape }}" alt="{{ include.image_alt | escape }}"{% if include.image_width and include.image_height %} width="{{ include.image_width }}" height="{{ include.image_height }}"{% endif %}>
+  </div>
+  {%- endif %}
+</section>

data/_includes/blocks/kbd.html

@@ -0,0 +1,27 @@
+<kbd class="sl-kbd" data-mac="{{ include.mac | escape }}" data-other="{{ include.other | escape }}">
+  <span class="sl-kbd-mac">{{ include.mac }}</span>
+  <span class="sl-kbd-sep">/</span>
+  <span class="sl-kbd-other">{{ include.other }}</span>
+</kbd>
+<script>
+  (function() {
+    var scripts = document.getElementsByTagName('script');
+    var script = scripts[scripts.length - 1];
+    var kbd = script.previousElementSibling;
+    if (!kbd || kbd.tagName !== 'KBD' || !kbd.classList.contains('sl-kbd')) return;
+
+    var isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform) || /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
+
+    var macSpan = kbd.querySelector('.sl-kbd-mac');
+    var sepSpan = kbd.querySelector('.sl-kbd-sep');
+    var otherSpan = kbd.querySelector('.sl-kbd-other');
+
+    if (isMac) {
+      if (otherSpan) otherSpan.hidden = true;
+      if (sepSpan) sepSpan.hidden = true;
+    } else {
+      if (macSpan) macSpan.hidden = true;
+      if (sepSpan) sepSpan.hidden = true;
+    }
+  })();
+</script>

data/_includes/blocks/logos.html

@@ -0,0 +1,21 @@
+{%- if include.logos -%}
+  {%- include component-css.html name="logos" -%}
+  <div class="sl-logos">
+    {%- if include.title -%}
+      <p class="sl-logos-title">{{ include.title | escape }}</p>
+    {%- endif -%}
+    <ul>
+      {%- for logo in include.logos -%}
+        <li>
+          {%- if logo.url -%}
+            <a href="{{ logo.url | relative_url }}">
+          {%- endif -%}
+          <img src="{{ logo.image | relative_url }}" alt="{{ logo.alt | default: logo.name | escape }}"{% if logo.width and logo.height %} width="{{ logo.width }}" height="{{ logo.height }}"{% endif %} loading="lazy">
+          {%- if logo.url -%}
+            </a>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+    </ul>
+  </div>
+{%- endif -%}

data/_includes/blocks/people.html

@@ -0,0 +1,47 @@
+{%- comment -%} A grid of people from include.people: a list of { name, role, avatar, avatar_alt, url, links }, or a map shaped like _data/authors.yml { name, bio, avatar, links[].title }. include.id sets the list id. {%- endcomment -%}
+{%- include component-css.html name="people" -%}
+{%- if include.people -%}
+<ul class="sl-people"{% if include.id %} id="{{ include.id | escape }}"{% endif %}>
+  {%- for sl_person in include.people -%}
+    {%- assign sl_p = sl_person -%}
+    {%- if sl_person[1].name -%}{%- assign sl_p = sl_person[1] -%}{%- endif -%}
+    {%- if sl_p.name -%}
+      <li class="sl-person">
+        {%- if sl_p.avatar -%}
+          {%- assign sl_avatar = sl_p.avatar -%}
+          {%- unless sl_avatar contains '://' -%}{%- assign sl_avatar = sl_avatar | relative_url -%}{%- endunless -%}
+          {%- assign sl_alt = sl_p.avatar_alt | default: sl_p.name -%}
+        <img class="sl-person-avatar" src="{{ sl_avatar | escape }}" alt="{{ sl_alt | escape }}" width="64" height="64" loading="lazy">
+        {%- endif -%}
+        <div class="sl-person-body">
+          <span class="sl-person-name">
+            {%- if sl_p.url -%}
+              {%- assign sl_url = sl_p.url -%}
+              {%- unless sl_url contains '://' -%}{%- assign sl_url = sl_url | relative_url -%}{%- endunless -%}
+              <a href="{{ sl_url | escape }}">{{ sl_p.name | escape }}</a>
+            {%- else -%}
+              {{ sl_p.name | escape }}
+            {%- endif -%}
+          </span>
+          {%- assign sl_role = sl_p.role | default: sl_p.bio -%}
+          {%- if sl_role -%}
+          <span class="sl-person-role">{{ sl_role | escape }}</span>
+          {%- endif -%}
+          {%- if sl_p.links.size > 0 -%}
+          <ul class="sl-person-links">
+            {%- for sl_link in sl_p.links -%}
+              {%- if sl_link.url -%}
+                {%- assign sl_href = sl_link.url -%}
+                {%- unless sl_href contains '://' -%}{%- assign sl_href = sl_href | relative_url -%}{%- endunless -%}
+                {%- assign sl_label = sl_link.label | default: sl_link.title -%}
+            <li><a href="{{ sl_href | escape }}">{{ sl_label | escape }}</a></li>
+              {%- endif -%}
+            {%- endfor -%}
+          </ul>
+          {%- endif -%}
+        </div>
+      </li>
+    {%- endif -%}
+  {%- endfor -%}
+</ul>
+{%- endif -%}

data/_includes/blocks/pricing.html

@@ -0,0 +1,28 @@
+{%- include component-css.html name="pricing" -%}
+<ul class="sl-pricing"{% if include.id %} id="{{ include.id | escape }}"{% endif %}>
+  {%- for plan in include.plans -%}
+    <li class="sl-pricing-plan{% if plan.highlighted %} sl-pricing-featured{% endif %}">
+      {%- if plan.highlighted and plan.highlight_label -%}
+        <p class="sl-pricing-badge">{{ plan.highlight_label }}</p>
+      {%- endif -%}
+      <h3 class="sl-pricing-name">{{ plan.name }}</h3>
+      <p class="sl-pricing-price">
+        <span class="sl-pricing-amount">{{ plan.price }}</span>
+        {%- if plan.period %} <span class="sl-pricing-period">{{ plan.period }}</span>{% endif -%}
+      </p>
+      {%- if plan.description -%}
+        <p class="sl-pricing-description">{{ plan.description }}</p>
+      {%- endif -%}
+      {%- if plan.features -%}
+        <ul class="sl-pricing-features">
+          {%- for feature in plan.features -%}
+            <li>{{ feature }}</li>
+          {%- endfor -%}
+        </ul>
+      {%- endif -%}
+      {%- if plan.cta_label and plan.cta_url -%}
+        <a class="sl-button sl-pricing-cta" href="{{ plan.cta_url | relative_url }}">{{ plan.cta_label }}</a>
+      {%- endif -%}
+    </li>
+  {%- endfor -%}
+</ul>

data/_includes/blocks/pull-quote.html

@@ -0,0 +1,22 @@
+<figure class="sl-pull-quote">
+  <blockquote>
+    <p>{{ include.text }}</p>
+  </blockquote>
+  {%- if include.author or include.source -%}
+  <figcaption>
+    {%- if include.author -%}
+    <span class="sl-pull-quote-author">{{ include.author }}</span>
+    {%- endif -%}
+    {%- if include.source -%}
+    {%- if include.author -%}<span class="sl-pull-quote-sep">, </span>{%- endif -%}
+    <cite>
+      {%- if include.url -%}
+      <a href="{{ include.url }}">{{ include.source }}</a>
+      {%- else -%}
+      {{ include.source }}
+      {%- endif -%}
+    </cite>
+    {%- endif -%}
+  </figcaption>
+  {%- endif -%}
+</figure>

data/_includes/blocks/stats.html

@@ -0,0 +1,14 @@
+<div class="sl-stats">
+  {%- for item in include.items -%}
+    <div class="sl-stat">
+      <div>
+        <span class="sl-stat-value">{%- include num.html value=item.value -%}</span>
+        {%- if item.unit -%}<span class="sl-stat-unit">{{ item.unit }}</span>{%- endif -%}
+      </div>
+      <div class="sl-stat-footer">
+        <span class="sl-stat-label">{{ item.label }}</span>
+        {%- if item.trend -%}<span class="sl-stat-trend">{%- include num.html value=item.trend -%}</span>{%- endif -%}
+      </div>
+    </div>
+  {%- endfor -%}
+</div>

data/_includes/blocks/steps.html

@@ -0,0 +1,24 @@
+<div class="sl-steps">
+  {%- if include.steps -%}
+    <ol>
+      {%- for step in include.steps -%}
+        <li>
+          <div class="sl-steps-content">
+            {%- if step.title -%}
+              <span class="sl-steps-title">
+                {%- if step.url -%}
+                  <a href="{{ step.url | relative_url }}">{{ step.title }}</a>
+                {%- else -%}
+                  {{ step.title }}
+                {%- endif -%}
+              </span>
+            {%- endif -%}
+            {%- if step.description -%}
+              <div class="sl-steps-description">{{ step.description | markdownify }}</div>
+            {%- endif -%}
+          </div>
+        </li>
+      {%- endfor -%}
+    </ol>
+  {%- endif -%}
+</div>

data/_includes/blocks/terminal.html

@@ -0,0 +1,14 @@
+{%- include component-css.html name="terminal" -%}
+{%- assign nl = "
+" -%}
+{%- assign prompt = include.prompt | default: "$" -%}
+{%- assign cmds = include.commands | split: nl -%}
+<div class="sl-terminal" dir="ltr">
+<pre><code class="sl-commands">
+{%- for cmd in cmds -%}
+<span class="sl-terminal-prompt" data-prompt="{{ prompt }}"></span>{{ cmd }}
+{% endfor -%}
+</code>{% if include.output %}
+<code class="sl-terminal-output">{{ include.output }}</code>
+{%- endif %}</pre>
+</div>

data/_includes/blocks/testimonial.html

@@ -0,0 +1,23 @@
+{%- assign sl_testimonial_quote = include.quote | strip -%}
+{%- if sl_testimonial_quote != "" -%}
+{%- include component-css.html name="testimonial" -%}
+<figure class="sl-testimonial">
+  <blockquote><p>{{ sl_testimonial_quote }}</p></blockquote>
+  {%- if include.avatar or include.name or include.role or include.source_url -%}
+  <figcaption class="sl-testimonial-credit">
+    {%- if include.avatar -%}
+    <img class="sl-testimonial-avatar" src="{{ include.avatar | relative_url | escape }}" alt="{{ include.avatar_alt | escape }}" width="48" height="48" loading="lazy">
+    {%- endif -%}
+    {%- if include.name or include.role -%}
+    <span class="sl-testimonial-person">
+      {%- if include.name -%}<cite class="sl-testimonial-name">{{ include.name }}</cite>{%- endif -%}
+      {%- if include.role -%}<span class="sl-testimonial-role">{{ include.role }}</span>{%- endif -%}
+    </span>
+    {%- endif -%}
+    {%- if include.source_url -%}
+    <a class="sl-testimonial-source" href="{{ include.source_url | escape }}">{{ include.source_label | default: include.source_url }}</a>
+    {%- endif -%}
+  </figcaption>
+  {%- endif -%}
+</figure>
+{%- endif -%}