blog: Rubiks' Cube Scrambler post

Implement the rubiks-cube-scrambler custom element, including JS and template
files. Put these things in the body-extras.html partial that the termlite theme
added.

resource-builders: Update submodule commit
termlite: Update submodule commit

layouts/partials/base/body-extras.html

@@ -0,0 +1,4 @@
+{{ if .HasShortcode "rubiks/scrambler" }}
+  {{ partial "rubiks/scrambler-template.html" . }}
+  {{ partial "resource_builders/script.html" (dict "resource" "scripts/rubiks/scrambler.js") }}
+{{ end }}

layouts/partials/rubiks/scrambler-template.html

@@ -0,0 +1,61 @@
+<template id="rubiks-cube-scrambler-template">
+  <ol class="scrambler__move-list"></ol>
+  <div class="scrambler__pattern-length">
+    <label for="pattern-length" class="scrambler__label">Length</label>
+    <input type="text" name="pattern-length">
+  </div>
+  <div class="scrambler__scramble">
+    <button name="scramble" class="scrambler__button">Scramble!</button>
+  </div>
+  <style>
+    .scrambler__move-list {
+      display: grid;
+      font-family: var(--font-family-monospace);
+      gap: var(--space-xxs);
+      grid-template-columns: repeat(7, 3ch);
+      list-style: none;
+      margin-block: 0;
+      padding-inline: 0;
+
+      .scrambler__move {
+        justify-self: center;
+        margin: 1px;
+      }
+
+      .scrambler__move--start {
+        justify-self: start;
+      }
+
+      .scrambler__move--end {
+        justify-self: end;
+      }
+    }
+
+    .scrambler__scramble,
+    .scrambler__pattern-length
+    {
+      font-size: var(--text-s);
+      margin-block-start: var(--space-s);
+    }
+
+    .scrambler__button {
+      font-size: var(--text-s);
+    }
+
+    .scrambler__label {
+      color: var(--text-color-secondary);
+      font-family: var(--font-family-monospace);
+      text-transform: uppercase;
+
+      &::after {
+        content: " = ";
+      }
+    }
+
+    input[name="pattern-length"] {
+      font-size: var(--text-s);
+      text-align: end;
+      width: 4ch;
+    }
+  </style>
+</template>

layouts/shortcodes/rubiks/scrambler.html

@@ -0,0 +1 @@
+<rubiks-cube-scrambler></rubiks-cube-scrambler>