summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitignore1
-rw-r--r--Makefile33
-rw-r--r--include/footer.html4
-rw-r--r--include/head.html5
-rw-r--r--include/nav.html4
-rw-r--r--src/index.html62
-rw-r--r--src/srp/fw-ec/index.html98
-rw-r--r--src/srp/fw-ec/led.diff.html32
-rw-r--r--src/srp/index.html49
-rw-r--r--src/style.css162
10 files changed, 450 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..89f9ac0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+out/
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..da2a9b6
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,33 @@
+.PHONY: check clean serve
+
+srcdirs := ${shell find src -type d}
+outdirs := ${srcdirs:src%=out%}
+sources := ${shell find src -type f -name 'index.html' -or -name '*.css' -or -name '*.svg'}
+outputs := ${sources:src/%=out/%}
+
+all: ${outdirs} ${outputs}
+
+${outdirs}:
+ @mkdir -p $@
+ @printf 'MKDIR\t%s\n' "$@"
+
+out/%: src/%
+ @cp $< $@
+ @printf 'CP\t%s\n' "$@"
+
+out/%.html: src/%.html include/head.html
+ @m4 -P ${foreach dir,${^D},-I${dir}} $< >$@
+ @printf 'M4\t%s\n' "$@"
+
+src/srp/fw-ec/index.html: src/srp/fw-ec/led.diff.html
+ @touch $@
+
+check:
+ LANG=en_US find src -name 'index.html' -exec \
+ aspell --home-dir=./ --ignore-case check {} \;
+
+clean:
+ rm -rf out
+
+serve:
+ darkhttpd out --daemon
diff --git a/include/footer.html b/include/footer.html
new file mode 100644
index 0000000..c1c20e2
--- /dev/null
+++ b/include/footer.html
@@ -0,0 +1,4 @@
+<small>
+ Page last edited:
+ m4_esyscmd(git log -1 --pretty='format:%cI' Makefile | xargs date +'%A %d %B %Y — %T %Z' -d)
+</small>
diff --git a/include/head.html b/include/head.html
new file mode 100644
index 0000000..97aa283
--- /dev/null
+++ b/include/head.html
@@ -0,0 +1,5 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="/favicon.svg" rel="shortcut icon" type="image/svg">
+<link href="/style.css" rel="stylesheet">
+<title>The Mango Tree</title>
diff --git a/include/nav.html b/include/nav.html
new file mode 100644
index 0000000..9f8f2c2
--- /dev/null
+++ b/include/nav.html
@@ -0,0 +1,4 @@
+<menu>
+ <li><a href="/">Home</a></li>
+ <li><a href="..">Back</a></li>
+</menu>
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..cbbbf20
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ m4_include(head.html)
+ </head>
+ <body>
+ <header>
+ <h1>Root Page</h1>
+
+ <figure class="quote">
+ <blockquote>
+ <p>If Java had true garbage collection, most programs would
+ delete themselves upon execution.</p>
+ </blockquote>
+ <figcaption>
+ Robert Sewell
+ </figcaption>
+ </figure>
+ </header>
+
+ <main>
+ <p>
+ Welcome to my plot of the internet. This site is mostly oriented
+ towards topics related to software development, but you might
+ eventually find some things that are completely unrelated as
+ well. The “source code” for the site (if you can call
+ <abbr class="html">HTML</abbr><x-ref>1</x-ref> and a basic build
+ system source code)
+ <a href="https://git.thomasvoss.com/www.thomasvoss.com"
+ target="_blank">
+ are available through git
+ </a>.
+ </p>
+
+ <aside>
+ <p data-ref="1">
+ This site doesn’t even have any JavaScript.
+ There truly is no code.
+ </p>
+ </aside>
+
+ <p>
+ Now go branch off to a subsection of the site:
+ </p>
+
+ <ul>
+ <li><a href="prj">My Projects</a></li>
+ <li><a href="srp">Software-Related Posts</a></li>
+ <li><a href="www">Other Websites</a></li>
+ <li><a href="ame">About Me</a></li>
+ </ul>
+ </main>
+
+ <hr>
+
+ <footer>
+ <small>
+ Page last edited: 30th July 2023, 01:00 CEST
+ </small>
+ </footer>
+ </body>
+</html>
diff --git a/src/srp/fw-ec/index.html b/src/srp/fw-ec/index.html
new file mode 100644
index 0000000..c04da7f
--- /dev/null
+++ b/src/srp/fw-ec/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ m4_include(head.html)
+ </head>
+ <body>
+ <header>
+ <div>
+ <h1>Framework is Awesome</h1>
+ m4_include(nav.html)
+ </div>
+
+ <figure class="quote">
+ <blockquote>
+ <p>UNIX was not designed to stop its users from doing stupid
+ things, as that would also stop them from doing clever
+ things.</p>
+ </blockquote>
+ <figcaption>
+ Doug Gywn
+ </figcaption>
+ </figure>
+ </header>
+
+ <main>
+ <h2>Framework and the <abbr class="ec">EC</abbr></h2>
+
+ <p>
+ <a href="https://frame.work" target="_blank">
+ Framework
+ </a>
+ — for those unaware — is the coolest laptop manufacturer ever.
+ Their whole <em>shtick</em> is producing laptops that give the
+ user the ability to easily and effortlessly disassemble, repair,
+ and modify their hardware. I highly suggest checking them out if
+ you’re interested in computer hardware at all. The laptops even
+ have hotswappable I/O!
+ </p>
+
+ <p>
+ Anyways getting back on topic, Framework has also been giving
+ power to the user on the software-side of things too! A good
+ while ago they open-sourced the
+ <a href="https://github.com/FrameworkComputer/EmbeddedController">
+ code for the embedded controller
+ </a>
+ of their laptops, which offers all sorts of possibilities for
+ customization of the keyboard,
+ <abbr class="led">LED</abbr>
+ lights, and more.
+ </p>
+
+ <h2><abbr class="led">LED</abbr> Fun!</h2>
+
+ <p>
+ This is an area of the
+ <abbr class="ec">EC</abbr>
+ which I have not really looked at or touched much. I do want to
+ play around with this a lot more in the coming future though! So
+ far just for shits-and-giggles, I’ve patched the
+ <abbr class="ec">EC</abbr>
+ to make the power-button
+ <abbr class="ec">LED</abbr>
+ green instead of the normal boring white:
+ </p>
+
+ <aside>
+ <p>
+ Just a tip: if you want to try any of these patches out,
+ simply copy the diffs and paste them
+ into <code>git&nbsp;apply</code>.
+ </p>
+ </aside>
+
+ <figure>
+ <figcaption>
+ <code>~/board/hx20/led.c</code>
+ </figcaption>
+ <pre>m4_include(led.diff.html)</pre>
+ </figure>
+
+ <p>
+ As you can see, it’s all fairly simple. I just had to change our
+ <code>EC_LED_COLOR_WHITE</code> for
+ <code>EC_LED_COLOR_GREEN</code>. The codebase defines a few
+ colors, but they’re defined as <abbr class="rgb">RGB</abbr>
+ tuples which is awesome, because it opens the door to
+ custom <abbr class="rgb">RGB</abbr> effects in the future!
+ </p>
+ </main>
+
+ <hr>
+
+ <footer>
+ m4_include(footer.html)
+ </footer>
+ </body>
+</html>
diff --git a/src/srp/fw-ec/led.diff.html b/src/srp/fw-ec/led.diff.html
new file mode 100644
index 0000000..43f4e4f
--- /dev/null
+++ b/src/srp/fw-ec/led.diff.html
@@ -0,0 +1,32 @@
+<code><span class="diff-meta">diff --git a/board/hx20/led.c b/board/hx20/led.c</span></code>
+<code><span class="diff-meta">index a4dc4564e..dacf73fda 100644</span></code>
+<code><span class="diff-meta">--- a/board/hx20/led.c</span></code>
+<code><span class="diff-meta">+++ b/board/hx20/led.c</span></code>
+<code><span class="diff-loc">@@ -283,22 +283,22 @@ static void led_set_power(void)</span></code>
+<code> /* don't light up when at lid close */</code>
+<code> if (!lid_is_open()) {</code>
+<code> set_pwr_led_color(PWM_LED2, -1);</code>
+<code><span class="diff-del">- enable_pwr_breath(PWM_LED2, EC_LED_COLOR_WHITE, breath_led_length, 0)</span>;</code>
+<code><span class="diff-ins">+ enable_pwr_breath(PWM_LED2, EC_LED_COLOR_GREEN, breath_led_length, 0)</span>;</code>
+<code> return;</code>
+<code> }</code>
+<code></code>
+<code> if (chipset_in_state(CHIPSET_STATE_ANY_SUSPEND))</code>
+<code><span class="diff-del">- enable_pwr_breath(PWM_LED2, EC_LED_COLOR_WHITE, breath_led_length, 1)</span>;</code>
+<code><span class="diff-ins">+ enable_pwr_breath(PWM_LED2, EC_LED_COLOR_GREEN, breath_led_length, 1)</span>;</code>
+<code> else</code>
+<code><span class="diff-del">- enable_pwr_breath(PWM_LED2, EC_LED_COLOR_WHITE, breath_led_length, 0)</span>;</code>
+<code><span class="diff-ins">+ enable_pwr_breath(PWM_LED2, EC_LED_COLOR_GREEN, breath_led_length, 0)</span>;</code>
+<code></code>
+<code> if (chipset_in_state(CHIPSET_STATE_ON) | power_button_enable) {</code>
+<code> if (charge_prevent_power_on(0))</code>
+<code> set_pwr_led_color(PWM_LED2, (power_tick %</code>
+<code> LED_TICKS_PER_CYCLE < LED_ON_TICKS) ?</code>
+<code><span class="diff-del">- EC_LED_COLOR_WHITE : -1);</span></code>
+<code><span class="diff-ins">+ EC_LED_COLOR_GREEN : -1);</span></code>
+<code> else</code>
+<code><span class="diff-del">- set_pwr_led_color(PWM_LED2, EC_LED_COLOR_WHITE);</span></code>
+<code><span class="diff-ins">+ set_pwr_led_color(PWM_LED2, EC_LED_COLOR_GREEN);</span></code>
+<code> } else</code>
+<code> set_pwr_led_color(PWM_LED2, -1);</code>
+<code> }</code>
diff --git a/src/srp/index.html b/src/srp/index.html
new file mode 100644
index 0000000..aaf72b1
--- /dev/null
+++ b/src/srp/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ m4_include(head.html)
+ </head>
+ <body>
+ <header>
+ <div>
+ <h1>Software-Related Posts</h1>
+ m4_include(nav.html)
+ </div>
+
+ <figure class="quote">
+ <blockquote>
+ <p>Object-oriented programming is an exceptionally bad idea
+ which could only have originated in California.</p>
+ </blockquote>
+ <figcaption>
+ Edsgar W. Dijkstra
+ </figcaption>
+ </figure>
+ </header>
+
+ <main>
+ <p>
+ In this section of the website I cover random software-related
+ stuff that isn’t related to actual projects of mine. Posts here
+ could be about anything from a cool program I found, to a patch I
+ wrote, to me complaining about bad software design.
+ </p>
+
+ <p>
+ Posts:
+ </p>
+
+ <ul>
+ <li><a href="fw-ec">Patching My Laptops’ Embedded Controller</a></li>
+ </ul>
+ </main>
+
+ <hr>
+
+ <footer>
+ <small>
+ Page last edited: 30th July 2023, 01:00 CEST
+ </small>
+ </footer>
+ </body>
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..2b67620
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,162 @@
+:root {
+ --serif: Vollkorn;
+ --mono: 'Iosevka Custom';
+ --bg: #1D1F21;
+ --fg: #C5C8C6;
+ --bg-accent: #222427;
+ --accent: #DE935F;
+ --lesser: #969896;
+ --green: #B5BD68;
+ --red: #C66;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+body {
+ font-family: var(--serif);
+ font-size: 1.2rem;
+ font-variant-numeric: lining-nums;
+ line-height: 1.5;
+ text-align: justify;
+ color: var(--fg);
+ background-color: var(--bg);
+ display: grid;
+ grid-template-columns: 1fr min(800px, 90%) 1fr;
+}
+body > * { grid-column: 2; }
+
+pre, code, kbd, samp {
+ font-family: var(--mono);
+ font-size: 1rem;
+ color: var(--accent);
+}
+pre > code { color: var(--fg); }
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 0;
+}
+h2 { font-size: 2.5rem; }
+
+h1, h2, p { overflow-wrap: break-word; }
+
+a { color: var(--accent); }
+a:hover { text-decoration: none; }
+
+blockquote > p:first-child::before { content: '“'; }
+blockquote > p:last-child::after { content: '”'; }
+blockquote + figcaption::before { content: '— '; }
+
+blockquote, blockquote + figcaption { font-style: italic; }
+
+.quote {
+ border-left: 4px solid var(--accent);
+ padding: .4rem .8rem;
+ margin-inline: 2rem 0;
+ margin-block: 2rem;
+}
+
+.quote blockquote { margin-inline-start: 1rem; }
+.quote blockquote, .quote blockquote p { margin-block: .5rem; }
+
+.quote figcaption {
+ margin-inline-start: 2rem;
+ margin-block: .5rem;
+}
+
+figure:not(.quote) figcaption {
+ text-align: center;
+ text-decoration: underline;
+}
+
+hr { width: 100%; }
+main { margin-block-end: 5rem; }
+
+footer {
+ margin-block: 2rem;
+ text-align: center;
+ font-style: italic;
+ color: var(--lesser);
+}
+
+aside {
+ font-style: italic;
+ color: var(--lesser);
+ position: relative;
+ margin-block: 1.5rem;
+}
+
+aside > p::before,
+x-ref {
+ vertical-align: super;
+ font-size: .8rem;
+}
+
+aside > p::before {
+ content: attr(data-ref);
+ position: absolute;
+ left: -1.5ch;
+}
+
+abbr {
+ cursor: help;
+ position: relative;
+ text-decoration-line: underline;
+ text-decoration-style: dotted;
+}
+
+abbr:hover::before {
+ opacity: 1;
+ pointer-events: inherit;
+}
+
+abbr::before {
+ opacity: 0;
+ position: absolute;
+ bottom: 100%;
+ transition: .15s ease opacity;
+ white-space: nowrap;
+ padding: .15em .25em;
+ border: 1px solid var(--fg);
+ border-radius: 2px;
+ background: var(--bg-accent);
+ pointer-events: none;
+}
+
+abbr.ec::before { content: 'Embedded Controller'; }
+abbr.html::before { content: 'Hypertext Markup Language'; }
+abbr.led::before { content: 'Light-Emitting Diode'; }
+abbr.rgb::before { content: 'Red Green Blue'; }
+
+.diff-ins { color: var(--green); }
+.diff-del { color: var(--red); }
+.diff-loc { color: var(--lesser); }
+.diff-meta { font-weight: bold; }
+
+figure > pre { margin-left: 4ch; overflow-x: scroll; }
+figure > pre > code { counter-increment: line; }
+figure > pre > code::before {
+ position: absolute;
+ content: counter(line);
+ padding-right: .5ch;
+ margin-left: -4ch;
+ width: 3ch;
+ text-align: right;
+ display: inline-block;
+ border-right: 1px solid var(--lesser);
+ color: var(--lesser);
+ z-index: 1;
+ background-color: var(--bg);
+}
+
+header > div {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+header > div menu {
+ display: flex;
+ gap: 2ch;
+}
+header > div li { list-style: none; }