typeit isn't working

content/_index.md

@@ -8,17 +8,17 @@ Teens For Christ Connection (TFC) is a rural ministry reaching out to the missio
 <!-- ////////CAMP STUFF//////// -->
 <div class="flex flex-wrap items-center">
 <span class="basis-full md:basis-3/4 items-center">
-{{< typeit tag=h2 lifeLike=true >}}
+{% typeit(tag="h2" lifeLike="true") %}
 Camp registration is now open!!
-{{< /typeit >}}
+{% end %}
 </span>
 
 <!-- <span class="grow"> -->
 
 <span class="basis-full md:basis-1/4 items-center mt-6">
-{{< button href="/camp-form" >}}
+{% button(href="/camp-form") %}
 Fill out now!
-{{< /button >}}
+{% end %}
 </span>
 </div>
 
@@ -28,6 +28,7 @@ Fill out now!
 
 > If you need to pay for your camp form, pay for registration ($85) [here](https://secure.myvanco.com/L-Z772/campaign/C-13JPJ) or pay for the full price ($185) [here](https://secure.myvanco.com/L-Z772/campaign/C-13JQE).
 
+{{ spacing(height="h-8") }}
 {{ pt(src="https://videos.tfcconnection.org/videos/embed/0e6378c4-bb58-4fb1-8edf-72b73efc5ad2") }}
 
 <!-- ////////MT  STUFF//////// -->

static/css/main.css

@@ -312,15 +312,6 @@
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
-  .mx-10 {
-    margin-inline: calc(var(--spacing) * 10);
-  }
-  .mx-16 {
-    margin-inline: calc(var(--spacing) * 16);
-  }
-  .mx-24 {
-    margin-inline: calc(var(--spacing) * 24);
-  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -472,9 +463,6 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
-  .h-80 {
-    height: calc(var(--spacing) * 80);
-  }
   .h-full {
     height: 100%;
   }
@@ -526,9 +514,6 @@
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
-  .w-80 {
-    width: calc(var(--spacing) * 80);
-  }
   .w-auto {
     width: auto;
   }
@@ -697,6 +682,9 @@
   .\!rounded-lg {
     border-radius: var(--radius-lg) !important;
   }
+  .\!rounded-md {
+    border-radius: var(--radius-md) !important;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }

templates/layout.html

@@ -321,5 +321,6 @@
   {% endif %}
   {% block extra_js %}
   {% endblock extra_js %}
+
   </body>
 </html>

templates/shortcodes/button.html

@@ -0,0 +1,8 @@
+<a
+  class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+  {% if href %}href="{{ href }}"{% endif %}
+  {% if target %}target="{{ target }}"{% endif %}
+  role="button"
+>
+  {{ body }}
+</a>

templates/shortcodes/typeit.html

@@ -1,37 +1,19 @@
-{{- $content := split .Inner "\n" -}}
+{% set id = "typeit-{% get_random(0, 100) %}"  %}
-{{- $initialString := .Get "initialString" | default "" -}}
-{{- $speed := .Get "speed" | default 100 -}}
-{{- $lifeLike := .Get "lifeLike" | default false -}}
-{{- $startDelay := .Get "startDelay" | default 0 -}}
-{{- $breakLines := .Get "breakLines" | default true -}}
-{{- $waitUntilVisible := .Get "waitUntilVisible" | default true -}}
-{{- $loop := .Get "loop" | default false -}}                                                                    
 
-{{- $classList := slice -}}
+<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
-{{- with .Get "class" -}}
-    {{- $classList = $classList | append . -}}
-{{- end -}}
-{{- $tag := .Get "tag" | default "div" -}}
-
-{{ $id := delimit (slice "typeit" .Ordinal now.UnixNano) "-" }}
-
-{{- $attrs := printf `id="%v"` $id -}}
-{{- with $classList -}}
-    {{- $attrs = delimit $classList " " | printf `%v class="%v"` $attrs -}}
-{{- end -}}
-
-{{ printf `<%v %v>%s</%v>` $tag $attrs $initialString $tag | safeHTML }}
 
+<h2 id="type">{{ body }}</h2>
 <script>
+    console.log("type");
     document.addEventListener("DOMContentLoaded", function () {
-      new TypeIt("#{{ $id }}", {
+      new TypeIt("#type", {
-        strings: {{ $content }},
+        strings: {{ body }},
-        speed: {{ $speed }},
+        speed: 100,
-        lifeLike: {{ $lifeLike }},
+        lifeLike: true,
-        startDelay: {{ $startDelay }},
+        startDelay: 0,
-        breakLines: {{ $breakLines }},
+        breakLines: true,
-        waitUntilVisible: {{ $waitUntilVisible }},
+        waitUntilVisible: true,
-        loop: {{ $loop }}
+        loop: false
       }).go();
     });
 </script>