All for groups on cheatsheet

Signed-off-by: lucperkins <lucperkins@gmail.com>

data/cheatsheet.yaml

@@ -1,4 +1,13 @@
-forbidden-thing:
-  title: Do a thing
-other-thing:
-  title: Some other thing
+groups:
+- name: Group 1
+  cheats:
+  - filename: forbidden-thing
+    title: Do a thing
+  - filename: other-thing
+    title: A different thing
+  - filename: other-thing
+    title: A different thing
+- name: Group 2
+  cheats:
+  - filename: other-thing
+    title: Some other thing

themes/falco-fresh/assets/cheatsheet.sass

@@ -1,27 +1,32 @@
 .cheatsheet
-  display: flex
+  &-group
+    &-title
+      font-size: 1.75rem
+
+    & + &
+      margin-top: 2rem
 
-  +desktop
-    flex-flow: row nowrap
-  +mobile
-    flex-flow: column nowrap
+  &-cheats
+    display: flex
+    justify-content: space-between
 
-  flex-flow: row nowrap
-  justify-content: space-between
+    .cheat
+      padding: 1rem
+      background-color: $light
 
-  .cheat
-    padding: 1rem
-    background-color: $light
+      &-title
+        font-weight: 700
+        font-size: 1.25rem
 
     +desktop
-      width: calc(50% - .25rem)
-    +mobile
-      width: 100%
+      flex-flow: row wrap
 
-      & + .cheat
-        margin-top: 1rem
+      .cheat
+        margin-bottom: 1rem
+        width: calc(50% - .25rem)
 
-    &-title
-      font-size: 1.25rem
-      font-weight: 700
+    +mobile
+      flex-flow: column nowrap
 
+      .cheat + .cheat
+        margin-top: 1rem

themes/falco-fresh/layouts/shortcodes/cheatsheet.html

@@ -1,14 +1,24 @@
-{{ $cheats := site.Data.cheatsheet }}
+{{ $groups := site.Data.cheatsheet.groups }}
 <div class="cheatsheet">
-  {{ range $k, $v := $cheats }}
-  {{ $yaml  := readFile (printf "cheatsheet/%s.yaml" $k) }}
-  {{ $title := $v.title | markdownify }}
-  <div class="cheat">
-    <p class="cheat-title">
-      {{ $title }}
+  {{ range $groups }}
+  <div class="cheatsheet-group">
+    <p class="cheatsheet-group-title">
+      {{ .name }}
     </p>
 
-    {{ highlight $yaml "yaml" "" }}
+    <div class="cheatsheet-cheats">
+      {{ range .cheats }}
+      {{ $yaml  := readFile (printf "cheatsheet/%s.yaml" .filename) }}
+      {{ $title := .title | markdownify }}
+      <div class="cheat">
+        <p class="cheat-title">
+          {{ $title }}
+        </p>
+
+        {{ highlight $yaml "yaml" "" }}
+      </div>
+      {{ end }}
+    </div>
   </div>
   {{ end }}
 </div>