refactor: move static assets + rework syntax themes

README.md

@@ -0,0 +1,114 @@
+<p align="center">
+    <img src="./assets/dark-gruvbox.png#gh-dark-mode-only" alt="blog.cstef.dev" width="100%">
+    <img src="./assets/light-gruvbox.png#gh-light-mode-only" alt="blog.cstef.dev" width="100%">
+</p>
+
+A collection of notes, thoughts, and ideas, or whatever I feel like writing about. 
+
+<p align="center">
+    <b><a href="https://blog.cstef.dev">Visit the blog</a></b>
+</p>
+
+## Making this blog yours
+
+This blog is built using a fork of [zola](https://www.getzola.org/), a static site generator written in Rust. You can read about the changes I made in the [README](https://github.com/cestef/zola).
+
+### Getting up and running
+
+1. Clone the repository
+
+```bash
+git clone https://github.com/cestef/blog.cstef.dev.git
+cd blog.cstef.dev
+```
+
+2. Install `zola`
+
+#### Homebrew
+
+```bash
+brew install cestef/tap/zola
+```
+
+#### Cargo (manual)
+
+```bash
+git clone https://github.com/cestef/zola
+cd zola
+cargo install --path .
+```
+
+3. Install `node` dependencies
+
+```bash
+pnpm install
+```
+
+4. Start the development server
+
+```bash
+pnpm dev
+```
+
+This will start both `zola` and `tailwindcss` in watch mode.
+
+### Writing content
+
+This blog uses an extended version of the `markdown` syntax.
+
+#### Frontmatter
+
+Front matter is a block of TOML at the beginning of a file that specifies metadata (title, date, etc.) about the file. It is delimited by `+++`.
+
+```markdown
++++
+title = "My awesome post"
+description = "A short description of the post"
+date = 2021-08-01
+
+[taxonomies]
+tags = ["rust", "zola"]
++++
+```
+
+#### Math (SSR)
+
+Currently, only rendering via [`typst`](https://github.com/typst/typst) is supported. To render math, use the following syntax:
+
+##### Display math
+
+```markdown
+$$
+lim_(x->oo) (1 + 1/x)^x
+$$
+```
+
+##### Inline math
+
+```markdown
+$lim_(x->oo) (1 + 1/x)^x$
+```
+
+##### Raw math
+
+Raw math is rendered using `typst` but without any additional formatting. See it as just rendering a file.
+
+~~~markdown
+```typ
+#set text(20pt)
+#align(center + horizon)[
+    $ lim_(x->oo) (1 + 1/x)^x $
+]
+```
+~~~
+
+#### Diagrams (SSR)
+
+Diagrams are rendered using [`pikchr`](https://pikchr.org). To render a diagram, use the following syntax:
+
+~~~markdown
+```pikchr
+box "Hello, World!"
+```
+~~~
+

config.toml

@@ -14,17 +14,16 @@ bottom_footnotes = true
 highlight_theme = "css"
 highlight_code = true
 
-highlight_themes_css = [
-    { theme = "gruvbox-dark", filename = "../styles/syntax-theme-dark.css" },
-    { theme = "gruvbox-light", filename = "../styles/syntax-theme-light.css" },
-]
+# highlight_themes_css = [
+#     { theme = "gruvbox-dark", filename = "../styles/syntax-theme-dark.css" },
+#     { theme = "gruvbox-light", filename = "../styles/syntax-theme-light.css" },
+# ]
 
 math_rendering = "typst"
-math_svgo = true
+math_svgo = true                               # Optimize the SVGs
 math_svgo_config = "svgo.config.mjs"
-math_dark_mode = true
-
-math_dark_mode_css = "styles/typst-dark.css"
+math_dark_mode = true                          # Render both dark and light mode
+math_dark_mode_css = "styles/typst-dark.css"   # injected inside the svgs
 math_light_mode_css = "styles/typst-light.css"
 
 pikchr_dark_mode = true

content/adaptor/index.md

@@ -6,7 +6,7 @@ date = 2024-12-03
 tags = ["crypto"]
 +++
 
-> [!INFO]
+> [!NOTE]
 > I am not a cryptographer, nor a mathematician. This article is the result of my own research and understanding of the subject. If you find any mistakes, [please let me know](mailto:hi@cstef.dev)!
 >
 > The vast majority of what is written here is taken from various sources, which are listed at the [end of this article](#references-and-suggested-readings). I highly recommend you to read them if you want to dive deeper into the subject.

content/elliptic-curve/index.md

@@ -6,7 +6,7 @@ date = 2024-11-29
 tags = ["crypto"]
 +++
 
-> [!INFO]
+> [!NOTE]
 > I am not a cryptographer, nor a mathematician. This article is the result of my own research and understanding of the subject. If you find any mistakes, [please let me know](mailto:hi@cstef.dev)!
 >
 > The vast majority of what is written here is taken from various sources, which are listed at the [end of this article](#references-and-suggested-readings). I highly recommend you to read them if you want to dive deeper into the subject.

content/miele.md → content/miele/index.md

@@ -8,15 +8,15 @@ tags = ["re"]
 
 The TMS 220 is a payment system used in Miele washing machines and dryers. It's a simple device that allows users to pay for laundry cycles using so-called "Touch" devices. These devices are essentially iButtons ([_sold for 40 bucks btw_](https://www.fust.ch/de/p/haushalt/waschmaschinen-und-waeschetrockner/zubehoer-waeschepflege/miele/benutzer-touch-91800158-8386593.html)) that can be loaded with credit and used to pay for laundry cycles.
 
-![Miele TMS 220](/images/miele-tms-220.png)
+![Miele TMS 220](./images/miele-tms-220.png)
 
 As the payment device is completely independent (not connected via GSM or whatever), I was curious to see how it works and if I could reverse-engineer it. I happened to have just bought a [Flipper Zero](https://flipperzero.one/), which is basically a Swiss Army knife for nerds, and it seemed like the perfect device for the job as it supports iButton reading, writing, and emulation.
 
 ## _Touch_ Device
 
 The _Touch_ device is a small iButton in a plastic holder. Underneath the plastic, there's a DS1992 iButton, which is a 1-wire device with 1Kb (128 bytes) of NVRAM. The device is powered by the reader, which provides power through the 1-wire interface.
 
-![Miele Touch Device](/images/miele-touch-device.png)
+![Miele Touch Device](./images/miele-touch-device.png)
 
 It provides 4 pages of 32 bytes each, with an additional 32 bytes scratchpad (used for checking the data before actually writing it).
 

content/multi-sig/index.md

@@ -6,7 +6,7 @@ date = 2024-11-29
 tags = ["crypto"]
 +++
 
-> [!INFO]
+> [!NOTE]
 > I am not a cryptographer, nor a mathematician. This article is the result of my own research and understanding of the subject. If you find any mistakes, [please let me know](mailto:hi@cstef.dev)!
 >
 > The vast majority of what is written here is taken from various sources, which are listed at the [end of this article](#references-and-suggested-readings). I highly recommend you to read them if you want to dive deeper into the subject.

content/rsa.md

@@ -7,7 +7,7 @@ description = "We use RSA every day to secure our online transactions, but how d
 tags = ["crypto"]
 +++
 
-> [!INFO]
+> [!NOTE]
 > I am not a cryptographer, nor a mathematician. This article is the result of my own research and understanding of the subject. If you find any mistakes, [please let me know](mailto:hi@cstef.dev)!
 
 

content/shamir/index.md

@@ -6,7 +6,7 @@ date = 2024-11-29
 tags = ["crypto"]
 +++
 
-> [!INFO]
+> [!NOTE]
 > I am not a cryptographer, nor a mathematician. This article is the result of my own research and understanding of the subject. If you find any mistakes, [please let me know](mailto:hi@cstef.dev)!
 >
 > The vast majority of what is written here is taken from various sources, which are listed at the [end of this article](#references-and-suggested-readings). I highly recommend you to read them if you want to dive deeper into the subject.

content/traefik.md → content/traefik/index.md

@@ -15,7 +15,7 @@ even featuring [Kubernetes](https://kubernetes.io/) Ingress support, or [Let's E
 By digging a little more on their website, I found a [developer job application form](https://traefik.io/careers/developers-systems-engineers).
 I was surprised to see that there was no traditional CV to send, but a docker command to run.
 
-[![Traefik docker command](/images/traefik-docker.png)](/images/traefik-docker.png)
+[![Traefik docker command](./images/traefik-docker.png)](./images/traefik-docker.png)
 
 ## The challenge
 
@@ -52,7 +52,7 @@ I was now sure that I was on the right track.
 The image was kindly asking us to give it more permissions, so I naturally gave it the `cluster-admin` role.
 (I know, I know, it's not a good practice, but it's just for a CTF, right?)
 
-```yml,copy
+```yaml,copy
 # service-account.yml
 
 ---
@@ -83,7 +83,7 @@ kubectl apply -f service-account.yml
 
 We now have a service account with the `cluster-admin` role, so let's set it to the pod.
 
-```yml,copy
+```yaml,copy
 # pod.yml
 
 ---
@@ -125,7 +125,7 @@ Look at me by the 8888 ingress 🚪
 
 Setting up an ingress on port `8888` should do the trick.
 
-```yml,copy 
+```yaml,copy 
 # ingress.yml
 
 ---
@@ -195,7 +195,7 @@ Well, well, well... Let's create a Traefik Proxy. I followed the [quick-start gu
 
 Various resources are created:
 
-```yml,copy
+```yaml,copy
 # traefik/00-role.yml
 
 kind: ClusterRole
@@ -233,7 +233,7 @@ rules:
           - update
 ```
 
-```yml,copy
+```yaml,copy
 # traefik/00-account.yml
 
 apiVersion: v1
@@ -242,7 +242,7 @@ metadata:
     name: traefik-account
 ```
 
-```yml,copy
+```yaml,copy
 # traefik/01-role-binding.yml
 
 kind: ClusterRoleBinding
@@ -262,7 +262,7 @@ subjects:
 
 The Traefik deployment itself:
 
-```yml,copy
+```yaml,copy
 # traefik/02-traefik.yml
 
 kind: Deployment
@@ -298,7 +298,7 @@ spec:
 
 And finally, the service:
 
-```yml,copy
+```yaml,copy
 # traefik/02-traefik-services.yml
 
 apiVersion: v1
@@ -346,7 +346,7 @@ kubectl port-forward deployments/traefik-deployment 8080:8080
 
 The HTTP Service for our pod is effectively listed in the dashboard:
 
-[![Traefik dashboard](/images/traefik-dashboard.png)](/images/traefik-dashboard.png)
+[![Traefik dashboard](./images/traefik-dashboard.png)](./images/traefik-dashboard.png)
 
 Forwarding the proxy port to something fancy:
 
@@ -443,7 +443,7 @@ kubectl create secret generic helmsman --from-literal=helmsman=dcc9c530767c10276
 
 Restarting the pod, port-forwarding the proxy, and visiting [`localhost:1337`](http://localhost:1337) again, we now get a nice form to fill and submit.
 
-[![Traefik form](/images/traefik-form.png)](/images/traefik-form.png)
+[![Traefik form](./images/traefik-form.png)](./images/traefik-form.png)
 
 ## Conclusion