Merge branch 'preview'

README.md

@@ -56,6 +56,7 @@ This site was inspired and built from many libraries. Mentioning all of them wou
 * Cloudflare Pages – Hosting.
 * imgflip – Quintessential Meme Generator.
 * Cloudflare Analytics.
+* [Yusuke Nakaya's Beautiful Shooting Star CSS Animation](https://codepen.io/YusukeNakaya/pen/XyOaBj).
 
 ### 3rd Party Libs
 * jQuery.

pages/profile.md → archive/profile/profile.md

@@ -1,7 +1,6 @@
 ---
 title: TrebledJ's Profile
-layout: profile
-permalink: /profile/
+layout: layouts/profile
 redirect_from:
   - /online-cv
   - /cv

_includes/author/awards.html → archive/profile/profile/awards.html

@@ -1,4 +1,5 @@
-<ul class="timeline">
+<h1>TODO</h1>
+{# <ul class="timeline">
     {% for award in site.data.profile.awards %}
     <li class="timeline-item rounded ms-3 p-4 pb-3 shadow">
         <div class="timeline-arrow"></div>
@@ -24,4 +25,4 @@ <h3 class="h6">
         <p class="text-small mt-2 font-weight-light">{{award.description | mdInline}}</p>
     </li>
     {% endfor %}
-</ul>
+</ul> #}

_includes/author/education.html → archive/profile/profile/education.html

@@ -1,4 +1,5 @@
-<ul class="timeline">
+<h1>TODO</h1>
+{# <ul class="timeline">
     {% for detail in site.data.profile.education_details %}
         <li class="timeline-item rounded ms-3 p-4 pb-3 shadow">
             <div class="timeline-arrow"></div>
@@ -30,4 +31,4 @@ <h2 class="h5 mb-1">
             {% endfor %}
         </li>
     {% endfor %}
-</ul>
+</ul> #}

_includes/author/experiences.html → archive/profile/profile/experiences.html

@@ -1,18 +1,18 @@
 <ul class="timeline">
-    {% for post in site.tags["experience"] %}
+    {% for post in collections.experience %}
         <li class="timeline-item rounded ms-3 p-4 pb-3 shadow">
             <div class="timeline-arrow"></div>
-            <h2 class="h5 mb-1"><a href="{{site.baseurl}}{{post.url}}">{{post.title | mdInline | safe}}</a></h2>
+            <h2 class="h5 mb-1"><a href="{{site.baseurl}}{{post.url}}">{{post.data.title | mdInline | safe}}</a></h2>
             <span class="small text-gray">
                 <i class="fas fa-calendar"></i>
-                {{post.date | date | safe }}
-                {% set nonproj_tags = post.tags | where_exp: "tag", "tag != 'experience'" %}
+                {{post.page.date | date | safe }}
+                {% set nonproj_tags = post.data.tags | exclude("experience") %}
                 {% for tag in nonproj_tags | head(3) %}
                     &nbsp;•&nbsp;
                     {% include "tag.html" %}
                 {% endfor %}
             </span>
-            <p class="text-small mt-2 font-weight-light">{{post.pitch}}</p>
+            <p class="text-small mt-2 font-weight-light">{{post.data.pitch}}</p>
         </li>
     {% endfor %}
 </ul>

_includes/author/projects.html → archive/profile/profile/projects.html

@@ -1,18 +1,18 @@
 <ul class="timeline">
-    {% for post in site.tags["project"] %}
+    {% for post in collections.project %}
         <li class="timeline-item rounded ms-3 p-4 pb-3 shadow">
             <div class="timeline-arrow"></div>
-            <h2 class="h5 mb-1"><a href="{{site.baseurl}}{{post.url}}">{{post.title | mdInline | safe}}</a></h2>
+            <h2 class="h5 mb-1"><a href="{{site.baseurl}}{{post.url}}">{{post.data.title | mdInline | safe}}</a></h2>
             <span class="small text-gray">
                 <i class="fas fa-calendar"></i>
-                {{post.date | date | safe }}
-                {% set nonproj_tags = post.tags | where_exp: "tag", "tag != 'project'" %}
+                {{post.page.date | date | safe }}
+                {% set nonproj_tags = post.data.tags | exclude("project") %}
                 {% for tag in nonproj_tags | head(3) %}
                     &nbsp;•&nbsp;
                     {% include "tag.html" %}
                 {% endfor %}
             </span>
-            <p class="text-small mt-2 font-weight-light">{{post.pitch}}</p>
+            <p class="text-small mt-2 font-weight-light">{{post.data.pitch}}</p>
         </li>
     {% endfor %}
 </ul>

_includes/author/skills.html → archive/profile/profile/skills.html

@@ -1,4 +1,5 @@
-{% for set in site.data.profile.skills %}
+<h1>TODO</h1>
+{# {% for set in site.data.profile.skills %}
     <div class="d-flex justify-content-between align-items-center">
         <small style="color: var(--light-text-color);">{{set.category}}</small>
         <div class="container-fluid mx-0"><hr/></div>
@@ -15,4 +16,4 @@
             {% endfor %}
         {% endfor %}
     {% endfor %}
-{% endfor %}
+{% endfor %} #}

_includes/author/work-experiences.html → archive/profile/profile/work-experiences.html

@@ -1,4 +1,5 @@
-<ul class="timeline">
+<h1>TODO</h1>
+{# <ul class="timeline">
     {% for exp in site.data.profile.work_experiences %}
         {% if exp.visibility %}
             <li class="timeline-item rounded ms-3 p-4 pb-3 shadow">
@@ -22,4 +23,4 @@ <h2 class="h5 mb-1">
             </li>
         {% endif %}
     {% endfor %}
-</ul>
+</ul> #}

assets/js.bundle/search.js

@@ -169,13 +169,13 @@ async function loadSearch(searchBox, resultDiv) {
 
     addResults(result);
   });
-
+  
   searchBox.trigger('keyup'); // Trigger a search and pre-fill results.
 }
 
 $(() => {
   const searchBox = $('input#search-box');
-  const resultDiv = $('#search-results-list');
+  const resultDiv = $('#search-results-list')
 
   $('.modal').on('shown.bs.modal', async function () {
     $(this).find('[autofocus]').trigger('focus');

assets/scss/_navbar.scss

@@ -9,10 +9,15 @@ header {
 .navbar {
     --bs-navbar-padding-x: 2vw !important;
     background-color: var(--main-background-color);
-    border-bottom: 1px solid var(--border-color);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, .05);
     width: 100vw;
 
+    html[data-theme="light"] & {
+        box-shadow: 0 25px 15px rgba(0, 0, 0, .05);
+    }
+    html[data-theme="dark"] & {
+        border-bottom: 1px solid var(--border-color);
+    }
+
     @include media-breakpoint-down(md) {
         --bs-navbar-padding-x: 0 !important;
     }

assets/scss/_posts.scss

@@ -98,6 +98,10 @@
         color: var(--bold-color);
     }
 
+    a b, a strong {
+        color: inherit;
+    }
+
     // Default most elements to have top margin instead of bottom margin.
     // *:not(ul, ol, li, hr, svg, p>a, .gist *) 
     p,

assets/scss/_variables.scss

@@ -88,14 +88,14 @@ html[data-theme="light"] {
     --accent-color-rgb: var(--link-color-rgb);
     --special-color-rgb: 120, 90, 200;
 
-    --main-background-color-rgb: 255, 255, 255;
+    --main-background-color-rgb: 235, 240, 255;
     --medium-background-color-rgb: 240, 240, 240;
     --light-background-color-rgb: 210, 210, 210;
 
     --bold-color-rgb: 0, 0, 0;
     --contrast-color-rgb: var(--bold-color-rgb);
     --highlight-color-rgb: 190, 190, 190;
-    --border-color-rgb: 230, 230, 230;
+    --border-color-rgb: 190, 190, 190;
 
     --main-text-color-rgb: 10, 10, 10;
     --light-text-color-rgb: 51, 51, 51;

assets/scss/main.scss

@@ -73,6 +73,15 @@ $carousel-transition: transform 2s ease, opacity 1.5s ease-out .5s;
 @import "toc-sidebar";
 
 
+html[data-theme="dark"] {
+    *::selection {
+        background-color: #1b1b84;
+    }
+    *::-moz-selection {
+        background-color: #1b1b84;
+    }
+}
+
 .jtag {
     display: inline-block;
     margin: 3px 2px;
@@ -109,7 +118,7 @@ $carousel-transition: transform 2s ease, opacity 1.5s ease-out .5s;
             color: var(--contrast-color) !important;
             --clr: var(--link-color);
             animation: tag-box 3s infinite;
-        
+
         }
         &.special:hover {
             color: var(--contrast-color) !important;
@@ -272,6 +281,7 @@ p.subheading {
     overflow-y: hidden;
 }
 
-a.lightbox-single, .lightbox-gallery > a {
+a.lightbox-single,
+.lightbox-gallery > a {
     background-image: none;
-}
+}

content/pages/postlike/about.md

@@ -55,7 +55,7 @@ Built this website. Tada?
 
 {% tag "composition" %}
 
-My composing journey began in Grade 10 (～中四) when my music teacher assigned composition homework. Not only that—he introduced us to interesting composition techniques and took us on a tour analysing Joe Hisashi's Studio Ghibli music. Since then, I've been writing down ideas and organising them into coherent pieces.
+My composing journey began in Grade 10 (～中四) when my music teacher assigned composition homework. Not only that—he introduced us to interesting composition techniques and took us on a (theoretical) tour analysing Joe Hisashi's Studio Ghibli music. Since then, I've been writing down ideas and organising them into coherent pieces.
 
 In uni, I picked up electronic music composition (mixing/production) during a course taught by Prof. Timothy Page.
 
@@ -208,4 +208,10 @@ Moreover, I want the site to be hackable (in the open-source sense) and approach
 
 #### Why did you choose Eleventy as your site generator?
 
-See [Site Migration to Eleventy](/posts/site-migration-to-eleventy/).
+- Framework-independent.
+- Nunjucks is a more powerful templating language compared to Liquid, so I get to iterate more quickly. Pains here are Nunjuck macros don't work with async (contributing to longer build times), and error message interop with Eleventy is hard to decipher.
+- Loads of decent Eleventy plugins by decent folks.
+- JS and Node are mature ecosystems, so some libraries just work™. The only major pains are import styles (ESM vs. CommonJS) and bloat (libraries/tooling).
+- Active community/development.
+
+See also: [Site Migration to Eleventy](/posts/site-migration-to-eleventy/).

content/posts/ctf/hitcon23/2023-09-20-hitcon-2023-the-blade.md

@@ -7,14 +7,14 @@ tags:
   - python
   - programming
 thumbnail_src: assets/hitcon-thumbnail.jpg
+preamble: |
+  This writeup is also intended for beginners. I’ll be taking a didactic approach to this writeup, with some sections starting with questions for guidance.^[Also, a good excuse for me to introduce !!spoilers!! to this site!] Anytime there's a set of questions, feel free to pause, challenge yourself, and think through them. :) If you want to follow along, you can grab the challenge binary [*here*](https://github.com/TrebledJ/ctf-binaries/tree/c8e9259c8f7d9cee149d99269d9b691cf54e53b9/hitcon-2023/the-blade).
+
+  I'll be mainly using [ghidra](https://ghidra-sre.org/) as my decompiler, along with GDB + GEF. For those unfamiliar with GDB, you may find my [recently posted cheatsheet](/posts/gdb-cheatsheet) helpful.
 ---
 
 My first Rust {% tag "rev", "reverse" %} solve! Though in hindsight, not much Rust knowledge was needed.
 
-This writeup is also intended for beginners. I’ll be taking a didactic approach to this writeup, with some sections starting with questions for guidance.^[Also, a good excuse for me to introduce !!spoilers!! to this site!] Anytime there's a set of questions, feel free to pause, challenge yourself, and try thinking through them. :) If you want to follow along, you can grab the challenge binary [*here*](https://github.com/TrebledJ/ctf-binaries/tree/c8e9259c8f7d9cee149d99269d9b691cf54e53b9/hitcon-2023/the-blade).
-
-I'll be mainly using [ghidra](https://ghidra-sre.org/) as my decompiler, along with GDB + GEF. For those unfamiliar with GDB, you may find my [recently posted cheatsheet](/posts/gdb-cheatsheet) helpful.
-
 ## Description
 
 > *A Rust tool for executing shellcode in a seccomp environment. Your goal is to pass the hidden flag checker concealed in the binary.*
@@ -28,7 +28,7 @@ Author: [wxrdnx](https://github.com/wxrdnx)
 
 Let’s start by running the binary. We can get a feel by navigating the program with `help` and other commands.
 
-Turns out we’re given a C2 (Command and Control) interface which sends shellcodes. Imagine we control a compromised machine. By running a malicious shellcode, we can trigger a reverse shell to our server, so that we can easily send more commands from the server.
+Turns out we’re given a C2 (Command and Control) interface which sends shellcode. Imagine we control a compromised machine. By running a malicious shellcode, we can trigger a reverse shell to our server, so that we can easily send more commands from the server.
 
 Anyhow, we can start the server with:
 
@@ -114,7 +114,7 @@ Time to play the UNO reverse card on this binary!
 - There are 3 parts to the encryption. What addresses do they begin and end?
 - What is each part doing?
 
-Let’s recognise some highs level patterns.
+Let’s recognise some high level patterns.
 
 It’s easy to be intimidated by the multitude of loops; but really, half the loops are the same, just wearing different clothes.
 

content/posts/infosec/writeup-likes/2024-02-15-attack-of-the-zip.md → content/posts/infosec/attack-of-the-zip/2024-02-15-attack-of-the-zip.md

@@ -10,7 +10,7 @@ tags:
   - ctf
   - linux
   - windows
-thumbnail_src: assets/attack-of-the-zip/thumbnail.jpg
+thumbnail_src: assets/attack-of-the-zip-thumbnail.jpg
 tocOptions: '{"tags":["h2","h3","h4"]}'
 preamble: |
   *Last month, I designed a CTF challenge involving zip file attacks. This post is a collection of the techniques, insights, and notes I've gathered. I've also uploaded the challenge on [GitHub](https://github.com/TrebledJ/attack-of-the-zip) along with a simplified playground.*
@@ -20,7 +20,7 @@ Zip files are *everywhere* in our daily lives, seamlessly integrated into our pe
 
 But as we know from *Silicon Valley*, zip files have the potential to be dangerous.
 
-{% image "assets/attack-of-the-zip/yikes-its-a-zip-bomb.jpg", "w-80", "Filmmakers' impression of a zip bomb." %}
+{% image "assets/yikes-its-a-zip-bomb.jpg", "w-80", "Filmmakers' impression of a zip bomb." %}
 <sup>YouTube: [Silicon Valley - The Ultimate Hack](https://www.youtube.com/watch?v=jnDk8BcqoR0)</sup>{.caption}
 
 In this post, we'll delve into the intriguing world of zip file attacks, exploring various attacks and mitigations involving zip files. These attacks allow attackers to potentially gain unauthorised file read/write privileges—or even cause denial of service. This calls for mitigations to bolster our systems’ defences.
@@ -33,7 +33,7 @@ Disclaimer: The content provided in this blog post is intended purely for educat
 
 ## Zip Attacks
 
-{% image "assets/attack-of-the-zip/evil-zip-unveiled.jpg", "w-50", "Fred dissects evil zip files. Spoofy-spoofy doo!" %}
+{% image "assets/evil-zip-unveiled.jpg", "w-50", "Fred dissects evil zip files. Spoofy-spoofy doo!" %}
 
 ### Zip Slip ⛸
 
@@ -301,7 +301,7 @@ Zip bombs are designed to cripple computers, systems, and virus scanners (rather
 {% images "h-auto" %}
 {% image "https://i.redd.it/68j4sr9h3dg21.jpg" %}
 {% image "https://img.devrant.com/devrant/rant/r_674011_CfdZB.jpg" %}
-{% image "assets/attack-of-the-zip/unzip42.jpg" %}
+{% image "assets/unzip42.jpg" %}
 {% endimages %}
 
 <sup>Some fork bomb memes. And zip bomb memes adapted from fork bomb memes. Zip bomb memes where?^[There probably aren't as many memes on zip bombs as they tend to be a software bug which can be swiftly patched.]</sup>
@@ -374,7 +374,7 @@ Let's explore a few ways to mitigate zip attacks. (Some of these can also be app
 ### Permissions
 *For sysadmins.*
 
-{% image "assets/attack-of-the-zip/you-guys-apply-hardening-question-mark.jpg", "w-60", "Input sanitisation? Never heard of it!" %}
+{% image "assets/you-guys-apply-hardening-question-mark.jpg", "w-60", "Input sanitisation? Never heard of it!" %}
 
 {% alert "success" %}
 1. Avoid running applications as `root` or `Administrator`. Instead, run it with a minimum privilege user.

content/posts/infosec/writeup-likes/2024-08-10-automating-boolean-sql-injection-with-python.md → content/posts/infosec/automating-boolean-sqli/2024-08-10-automating-boolean-sql-injection-with-python.md

@@ -7,7 +7,7 @@ tags:
   - web
   - programming
   - writeup
-thumbnail_src: assets/automating-sqli/bbb-sqli-thumbnail.png
+thumbnail_src: assets/automating-boolean-sqli-thumbnail.png
 thumbnail_banner: true
 preamble: |
   *This is meant as an introductory post on Boolean-Based SQLi and automation with Python; with ideas, tricks, and tips gleaned from developing [a custom SQLi script](https://github.com/TrebledJ/bsqli.py). More experienced scripters or pentesters may find the middle sections more informative.*
@@ -74,7 +74,7 @@ where everything after `--` is treated as a comment.
 
 Since `1=1` is always true, all users will be selected, and the page returns: "Login successful".
 
-{% image "assets/automating-sqli/login-success.png", "", "Basic Proof-of-Concept showing a *TRUE*/*FALSE* response from our demo server." %}
+{% image "assets/login-success.png", "", "Basic Proof-of-Concept showing a *TRUE*/*FALSE* response from our demo server." %}
 
 Using this, we can detect *TRUE* responses by checking if the body contains "success".
 
@@ -253,7 +253,7 @@ Common options are:
 - [`rich`](https://github.com/Textualize/rich), colourful, great look-and-feel
 - [`tqdm`](https://github.com/tqdm/tqdm), traditional rectangular progress bar
 
-{% image "assets/automating-sqli/progress-bar.png", "", "Example of a `rich` progress bar in action." %}
+{% image "assets/progress-bar.png", "", "Example of a `rich` progress bar in action." %}
 
 Some challenges arise when mixing progress bars with multithreading. In general...