Add "place" post, update some logic

content/posts/alexa-1.md

@@ -1,5 +1,5 @@
 ---
-title: "> Alexa, what is my Wi-Fi password?"
+title: "Alexa, what is my Wi-Fi password?"
 date: 2023-03-16
 draft: false
 header_image: "echo.jpeg"

content/posts/alexa-2.md

@@ -1,5 +1,5 @@
 ---
-title: "> Rooting the Amazon Echo Dot"
+title: "Rooting the Amazon Echo Dot"
 date: 2023-07-19
 draft: false
 header_image: root_cover.jpg
@@ -12,6 +12,7 @@ buttons:
   - href: "https://github.com/Dragon863/EchoCLI/"
     imgUrl: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
     text: "Github"
+left: true
 ---
 
 Rooting involves obtaining the highest level of permissions on a computer system. There has always been a large community of Android users looking to root their devices, whether it is for performance, privacy, compatibility or other reasons. Since the Amazon Echo is also based on Android, it makes sense that people would also be looking for a way to root it. In my [previous post](https://dragon863.github.io/blog/alexa.html), I described pulling Wi-Fi passwords from Amazon Echos using an exploit known as amonet. Thanks to a debug feature implemented by Lab126 (Amazon's hardware development company) it is now possible to obtain a tethered root on the device. Thanks to strong security practices enforced by the company such as a chain of trust from the beginning of the boot process, this should not be a major issue. However, it is a great opportunity for people wanting to run their own software on the device (such as open source voice assistants). I have provided a CLI and two examples in my code here: one is a [web server](https://github.com/Dragon863/EchoCLI/blob/main/internal/spyserver.py) and [client](https://github.com/Dragon863/EchoCLI/blob/main/shell/spy.sh) which records and uploads microphone data from the device, and one which acts as a [notification indicator](https://github.com/Dragon863/EchoCLI/blob/main/shell/led.sh) for Home Assistant.

content/posts/bcs.md

@@ -1,5 +1,5 @@
 ---
-title: "> New website designed"
+title: "New website designed"
 description: "I recently created a website for a local computer shop in Southport (England)"
 keywords: "Birkdale computers, repair, website, development, web dev"
 date: 2024-06-21T10:00:00+01:00

content/posts/ha-tizen.md

@@ -1,5 +1,5 @@
 ---
-title: "> New release: HA-Tizen"
+title: "New release: HA-Tizen"
 date: 2023-12-09T10:00:00+01:00
 buttons:
   - href: "https://github.com/Dragon863/Tizen-HA/"
@@ -9,5 +9,6 @@ header_image: "ha-tizen-screenshot.png"
 header_image_fit: contain
 description: "A companion app for Home Assistant on Tizen devices."
 keywords: "home assistant, tizen, samsung, smartwatch, companion app, flutter-tizen"
+left: true
 ---
  This is a small, unofficial companion app written using flutter-tizen to control lights and switches using Home Assistant. I created it because I wanted to use Home Assistant on my tizen watch which is no longer officially supported by Samsung, and wanted there to be a way to control devices without manually typing out tokens.

content/posts/instructable.md

@@ -1,5 +1,5 @@
 ---
-title: "> Bookshelf AI Instructable"
+title: "Bookshelf AI Instructable"
 description: "A small side project using a Pi 4B and opencv to recommend books."
 keywords: "AI, Raspberry Pi, opencv, bookshelf, instructable"
 date: 2024-06-21T10:00:00+01:00

content/posts/place.md

@@ -0,0 +1,38 @@
+---
+title: "How I made a physical r/place clone"
+date: 2024-12-28
+draft: false
+header_image: "place-cover.png"
+header_image_fit: cover
+summary: "I made a physical r/place clone using a Raspberry Pi, ESP32, 64x64 LED matrix and a Flask backend. Take a look at how I built it!"
+buttons:
+  - href: "https://place.danieldb.uk"
+    text: "Try now"
+left: true
+---
+
+This project was built for Hack Club's [High Seas](https://highseas.hackclub.com/) event!
+
+#### Introduction
+
+If you've never seen Reddit's [r/place](https://www.reddit.com/r/place/), it's a social experiment where users can place a pixel on a 1000x1000 canvas every 5 minutes. This leads to some interesting patterns and collaborations, as well as some... less interesting ones. I had the idea to recreate this effect on a smaller scale in real life, using a 64x64 LED matrix I bought from AliExpress, a Pi 4 and an ESP32.
+
+#### The hardware
+
+<img class="round m l" src="/content-res/images/test-place.jpg" style="width:30rem;height:30rem" alt="The main board of the echo"></img>
+<img class="round s" src="/content-res/images/test-place.jpg" style="width:100%;height:100%" alt="The main board of the echo"></img>
+
+I bought my 64x64 LED matrix from AliExpress for around £10. It's a P3 panel, which means the LEDs are 3mm apart. This is a decent balance between resolution and cost, and the panel is controlled by a HUB75 interface, which is a standard for LED panels. I've seen some pretty creative uses of these panels, and there are some great writeups on [aslak.net](https://www.aslak.net/index.php/2024/08/18/an-led-display-for-home-assistant-part-3/) detailing how to integrate them with Home Assistant.
+I went for an ESP32 and Raspberry Pi 4 to control the panel, but this wouldn't be my first choice. Ideally I wanted to use just a microcontroller, but the performance of the ESP32 wasn't quite enough to handle the web server and the LED panel at the same time. I ended up using Flask on the Pi to handle the web server, and send commands over serial to the board to update the display. Whilst this isn't the most efficient way to do it, it works well enough for my purposes and pixels won't be updated too frequently anyway.
+
+#### The software
+
+The software is split into two parts: the ESP32 firmware and the Flask backend. The ESP32 firmware is responsible for receiving commands over serial and updating the display accordingly. It's a simple program that listens for commands in the format `x y r g b`, where `x` and `y` are the coordinates of the pixel to update, and `r`, `g` and `b` are the red, green and blue values of the pixel. The Flask backend is responsible for serving the web interface and handling the logic of placing pixels. It's a simple app that serves a single HTML page with a canvas element, and listens for POST requests to `/set_pixel_color` with the coordinates and colour of the pixel to place. It then sends the command to the ESP32 over serial, which updates the display accordingly. All API responses are in JSON format, and rate limited by IP address; if there is a timeout, it will respond something like `{"success": False, "try_in": 5}`.
+
+#### Problems
+
+Unfortunately, the internet is the internet and so I had to implement a way for users to report the canvas' current state. Whilst I could've has this send me the reported content, I instead opted to use a LLM to review the content. To do this, I first had the code convert the canvas to a PNG before sending it off to Hack Club's "Jams" API, a service which provides HC members with a limited OpenAI token to use. This API then sends the PNG to OpenAI's GPT-4o model, which then returns a response. This response is then checked for any inappropriate content, and if found, the canvas will be reset. This is all done in a few seconds, and the user will be notified whether the canvas was cleared or not. I'm well aware that this isn't a scalable solution, but it works for now for a small amount of users.
+
+#### Conclusion
+
+This project was a lot of fun to build, and I'm really happy with how it turned out. It's a great conversation starter, and I can't wait to see what people create with it. If you want to try it out for yourself, you can visit [place.danieldb.uk](https://place.danieldb.uk) and start placing pixels. I hope you enjoy it as much as I enjoyed creating it!

content/posts/runshaw-app.md

@@ -1,5 +1,5 @@
 ---
-title: "> Building an App to make College Life Easier"
+title: "Building an App to make College Life Easier"
 date: 2024-12-02
 draft: false
 header_image: "runshaw-coverimg.png"

content/posts/thinkled.md

@@ -1,5 +1,5 @@
 ---
-title: "> New release: ThinkLED"
+title: "New release: ThinkLED"
 date: 2023-11-20T10:00:00+01:00
 buttons:
   - href: "https://github.com/Dragon863/ThinkLED/"

themes/dragon863/layouts/_default/list.html

@@ -10,6 +10,7 @@ <h3 style="padding-left:1rem;font-size:1.75rem;padding-bottom:1rem;">(Click / ta
     {{ $AltText := .Params.header_image_alt | default "Post Image" }}
     {{ $objFit := .Params.header_image_fit | default "cover" }}
     <div class="s12 m l">
+        {{ if eq .Params.left true }}
         <article class="no-padding">
             <div class="grid no-space">
                 <div class="s4">
@@ -19,7 +20,7 @@ <h3 style="padding-left:1rem;font-size:1.75rem;padding-bottom:1rem;">(Click / ta
                 <div class="s8">
                     <div class="padding">
                         <h5 class="bold">
-                            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+                            <a href="{{ .RelPermalink }}">> {{ .Title }}</a>
                         </h5>
                         {{ partial "metadata-date.html" . }}
                         <a href="{{ .RelPermalink }}">
@@ -32,6 +33,30 @@ <h5 class="bold">
                 </div>
             </div>
         </article>
+        {{ else }}
+        <article class="no-padding">
+            <div class="grid no-space">
+                <div class="s8">
+                    <div class="padding">
+                        <h5 class="bold">
+                            <a href="{{ .RelPermalink }}">> {{ .Title }}</a>
+                        </h5>
+                        {{ partial "metadata-date.html" . }}
+                        <a href="{{ .RelPermalink }}">
+                            <p class="summary">
+                                {{ .Summary }}
+                            </p>
+                        </a>
+                        {{ partial "buttons.html" . }}
+                    </div>
+                </div>
+                <div class="s4">
+                    <img class="responsive" src="/content-res/images/{{ .Params.header_image }}" alt="{{ $AltText }}"
+                        style="height:30vh;object-fit:{{ $objFit }};">
+                </div>
+            </div>
+        </article>
+        {{ end }}
     </div>
 
     <!-- Small Screen Layout -->
@@ -44,7 +69,7 @@ <h5 class="bold">
             <div>
                 <div class="padding">
                     <h5 class="bold">
-                        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+                        <a href="{{ .RelPermalink }}">> {{ .Title }}</a>
                     </h5>
                     <a href="{{ .RelPermalink }}">
                         <p class="summary">
@@ -62,7 +87,7 @@ <h5 class="bold">
         <article class="padding">
             <div>
                 <h5 class="bold">
-                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+                    <a href="{{ .RelPermalink }}">> {{ .Title }}</a>
                 </h5>
                 {{ partial "metadata-date.html" . }}
                 <a href="{{ .RelPermalink }}">

themes/dragon863/layouts/_default/single.html

@@ -58,6 +58,12 @@
     nav a {
         text-decoration: none !important;
     }
+
+    code {
+        color: #ffbe85;
+        background: #161f27;
+        font-size: 24px;
+    }
 </style>
 <h1 class="bold large-padding m l" id="header-large">{{ .Title }}</h1>
 <h1 class="bold large-padding s" id="header-small">{{ .Title }}</h1>
@@ -77,5 +83,6 @@ <h5 class="large-text" style="font-size: 24px;"><a class="link bold underline" h
 <br>
 <br>
 {{ partial "buttons.html" . }}
+<br>
 {{ .Content }}
 {{ end }}

themes/dragon863/layouts/partials/buttons.html

@@ -8,6 +8,9 @@
             {{ with .imgUrl }}
             <img class="responsive" src="{{ . }}" alt="Button Image">
             {{ end }}
+            {{ with not .imgUrl }}
+            <i style="color:white">link</i>
+            {{ end }}
             <span style="color:white">{{ .text }}</span>
         </button>
     </a>