feat(tag): collaspable

index.ts

@@ -1 +1,7 @@
-console.log("Hello via Bun!");
+const tags = document.querySelectorAll<HTMLElement>(".tag")
+
+tags?.forEach(t => {
+    t.addEventListener("click", _ => {
+        t.classList.toggle("active")
+    })
+})

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "build-sass": "sass --no-source-map --style=compressed scss/main.scss dist/styles.css",
     "watch-sass": "sass --watch scss/main.scss dist/styles.css",
-    "build": "bun run build-sass"
+    "build-js": "bun build ./index.ts --outdir ./dist --minify",
+    "build": "bun run build-sass && bun run build-js"
   },
   "devDependencies": {
     "@types/bun": "latest"

scss/main.scss

@@ -107,6 +107,10 @@ h3 {
   font-size: 1.5rem;
 }
 
+h4 {
+  font-size: 1.25rem;
+}
+
 .presentation {
   position: relative;
   display: flex;
@@ -194,6 +198,32 @@ h3 {
   }
 }
 
+.tags {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 1rem;
+  column-gap: 2rem;
+  row-gap: 1rem;
+  & h4 {
+    //text-align: center;
+  }
+  & p {
+    display: none;
+  }
+}
+
+.tag {
+  cursor: pointer;
+  &.active {
+    & h4 {
+      margin-bottom: 0.5rem;
+    }
+    & p {
+      display: block;
+    }
+  }
+}
+
 .credits-legal {
   width: 70%;
 }

templates/base/base.gohtml

@@ -18,7 +18,7 @@
         <p><a href="{{ .Data.Legal.LegalInformationLink }}">Legal information</a></p>
         <p><a href="/credits">Credits</a></p>
     </footer>
-{{/*    <script type="module" src="{{getAssetPath "index.js"}}" defer></script>*/}}
+    <script type="module" src="{{getAssetPath "index.js"}}" defer></script>
     </body>
     </html>
 {{end}}