Update project structure + new shortcodes

10 files changed, 94 insertions, 11 deletions

diff --git a/content/projects/file-drop.md b/content/projects/file-drop/index.md
index a754cbc..de565f9 100644
--- a/content/projects/file-drop.md
+++ b/content/projects/file-drop/index.md
@@ -1,7 +1,7 @@
 ---
 title: "File Drop"
 date: 2023-10-23T23:18:30-04:00
-draft: false
+draft: true
 ---
 
 Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
diff --git a/content/projects/guitar-hero.md b/content/projects/guitar-hero.md
deleted file mode 100644
index 7b0d2fb..0000000
--- a/content/projects/guitar-hero.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: "Guitar Hero"
-date: 2023-10-23T23:18:05-04:00
-draft: false
----
-
-This is a project
diff --git a/content/projects/guitar-hero/index.md b/content/projects/guitar-hero/index.md
new file mode 100644
index 0000000..4603a4b
--- /dev/null
+++ b/content/projects/guitar-hero/index.md
@@ -0,0 +1,69 @@
+---
+title: "Guitar Hero"
+date: 2023-10-23T23:18:05-04:00
+mermaid: true
+draft: false
+---
+
+One of my University classes tasked me with creating a custom pcb remote as
+well as a GUI software that interfaced with it. I decided to create a *Guitar
+Hero* clone capable of reading files created for the similar project *Clone
+Hero* using C++ and QT.
+
+The goal of this class was to teach Computer Science students about GUI design
+as well as teach electrical engineers about PCB design. Both type of students
+would also get to learn about software and hardware integration. On the
+hardware side, the requirements were quite simple:
+
+- The designed PCB needed to be less then or equal to 10x15cm
+- A minimum of 5 switches were needed
+- A joystick as well as an accelerometer had to get integrated
+- We could choose wether to integrate a 5 segment or a bar graph display
+
+{{<mermaid>}}
+classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }
+{{</mermaid>}}
+
+After a little back and forth with our teachers, we came to an agreement that
+we could configure some of our switches outside the pcb and mount them directly
+to the guitar. This way, the pcb itself could be located at the base of a guitar
+and host the strumming mechanism. We also convinced them it would be best for our
+usecase to also mount the accelerometer on a guitar shaft and configure it as some
+sort of trigger for a bonus streak. In the end, this is what we came up with:
+
+<!-- Integration   https://youtu.be/FKOd6nEcEC8 -->
+<!-- Song          https://youtu.be/G2GX4o7dhNY -->
+<!-- Accelerometer https://youtu.be/xl-ZMSSMalw -->
+<!-- Bar Graph     https://youtu.be/WZeAdRM9tGo -->
+<!-- Strumming     https://youtu.be/TxubEPih7yw -->
+<!-- Joystick      https://youtu.be/q-Qc5jLBBzU -->
+<!-- Demo1         https://youtu.be/c_Gxq5UKYd4 -->
+<!-- Demo2         https://youtu.be/69InfsTlqqA -->
+
+
+On the software side of things, requirements were even more forgiving. All we
+needed was to use the QT C++ library without any QML or QSS. It took very
+little convincing to get my team on board with the *Guitar Hero* clone idea.
+
+
+{{< youtubepl PLGcbRdKslprBkKg2NyGtS4AGuB2Ng_22e >}}
diff --git a/content/projects/music-robot.md b/content/projects/music-robot/index.md
index 692c866..692c866 100644
--- a/content/projects/music-robot.md
+++ b/content/projects/music-robot/index.md
diff --git a/content/projects/python-encryption/index.md b/content/projects/python-encryption/index.md
index 3ebd70b..c8207c6 100644
--- a/content/projects/python-encryption/index.md
+++ b/content/projects/python-encryption/index.md
@@ -31,11 +31,11 @@ viewed from that perspective, an entire article could be thought of as one big
 integer in base255. I decided to start by converting the source message one
 might want to encrypt into decimal form as shown by this animation:
 
-![How the message gets encoded](msg-encode.gif)
+{{< img src="msg-encode.gif" alt="How the message gets encoded" caption="" >}}
 
 The thing is, if a message can be converted from base255 to decimal, so can
 the password protecting the original message. You would then have both the message
 and the password in a format that feels much more intuitive to manipulate.
 So this is what I did:
 
-![How the password gets encoded](psswd-encode.gif)
+{{< img src="psswd-encode.gif" alt="How the password gets encoded" >}}
diff --git a/content/projects/uebersicht-todoist/index.md b/content/projects/uebersicht-todoist/index.md
index d30c0ae..dbfd2b0 100644
--- a/content/projects/uebersicht-todoist/index.md
+++ b/content/projects/uebersicht-todoist/index.md
@@ -1,7 +1,7 @@
 ---
 title: "Todoist Task Viewer"
 date: 2023-10-23T23:20:05-04:00
-draft:
+draft: false
 ---
 
 Back in 2018, I daily drove a mac and I really wanted my daily tasks
diff --git a/hugo.toml b/hugo.toml
index 8f35eae..75e79e1 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -5,3 +5,5 @@ theme = 'cranky'
 [markup]
   [markup.highlight]
     style='onedark'
+    lineNos = true
+    tabWidth=2
diff --git a/themes/cranky/layouts/shortcodes/img.html b/themes/cranky/layouts/shortcodes/img.html
index ff7959b..7d57af3 100644
--- a/themes/cranky/layouts/shortcodes/img.html
+++ b/themes/cranky/layouts/shortcodes/img.html
@@ -10,6 +10,7 @@
 	<img src="{{ .Get "src" }}"
 	     {{- with .Get "mouse" }} title="{{.}}"{{ end -}}
 	     {{- with .Get "alt" }} alt="{{.}}"{{ end -}}
+       loading="lazy"
 	>
 	{{- if .Get "link"}}</a>{{ end -}}
 	{{- with .Get "caption" -}}
diff --git a/themes/cranky/layouts/shortcodes/mermaid.html b/themes/cranky/layouts/shortcodes/mermaid.html
new file mode 100644
index 0000000..a752e38
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/mermaid.html
@@ -0,0 +1,8 @@
+{{ if ($.Page.Params.mermaid) }}
+<script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>!window.mermaid && document.write(unescape('%3Cscript src="/js/mermaid-8.9.1/mermaid.min.js"%3E%3C/script%3E'))</script>
+<script>mermaid.initialize({startOnLoad:true,theme:'dark'});</script>
+{{ end }}
+<div class="mermaid">
+  {{.Inner}}
+</div>
diff --git a/themes/cranky/layouts/shortcodes/youtubepl.html b/themes/cranky/layouts/shortcodes/youtubepl.html
new file mode 100644
index 0000000..c0e3d7c
--- /dev/null
+++ b/themes/cranky/layouts/shortcodes/youtubepl.html
@@ -0,0 +1,10 @@
+{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
+{{- if not $pc.Disable -}}
+{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
+{{- $id := .Get "id" | default (.Get 0) -}}
+{{- $class := .Get "class" | default (.Get 1) -}}
+{{- $title := .Get "title" | default "YouTube Video" }}
+<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
+  <iframe src="https://{{ $ytHost }}/embed/videoseries?list={{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
+</div>
+{{ end -}}