initial commit
This commit is contained in:
@@ -0,0 +1,348 @@
|
|||||||
|
:root {
|
||||||
|
--color-background: rgba( 18, 15, 18, 1);
|
||||||
|
--color-dark: rgba( 9, 7, 9, 1);
|
||||||
|
--color-text: rgba(255, 255, 255, 1);
|
||||||
|
--color-purple: rgba(171, 90, 237, 1);
|
||||||
|
--color-purple-translucent: rgba(171, 90, 237, 0.8);
|
||||||
|
--color-purple-transparent: rgba(171, 90, 237, 0.3);
|
||||||
|
--color-purple-hover: rgba(194, 135, 242, 1);
|
||||||
|
|
||||||
|
--content-width: 800px;
|
||||||
|
--extra-width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "linja-pona-4";
|
||||||
|
src: url('https://ajlee2006.github.io/linjaponasandbox/linja-pona-4.2.otf') format('opentype');
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 3 1.7320508076"><path d="M0 0.8660254038h1L1.5 0h1L3 0.8660254038L2.5 1.7320508076h-1L1 0.8660254038" stroke="%232D3931" stroke-width="0.05" fill="none"/></svg>');
|
||||||
|
background-position: 1.25em 0.5em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
& *::selection {
|
||||||
|
background-color: var(--color-purple-transparent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
border: 1px solid var(--color-purple-translucent);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 1em auto;
|
||||||
|
padding: 0;
|
||||||
|
max-width: var(--content-width);
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
padding: 2em;
|
||||||
|
|
||||||
|
& > :first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
& > :last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > * + * {
|
||||||
|
border-top: 1px solid var(--color-purple-translucent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
h2 { font-size: 1.25rem; }
|
||||||
|
h3 { font-size: 1rem; }
|
||||||
|
|
||||||
|
sup {
|
||||||
|
vertical-align: baseline;
|
||||||
|
position: relative;
|
||||||
|
top: -0.4em;
|
||||||
|
font-size: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--color-purple);
|
||||||
|
transition-property: color;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
text-underline-offset: 2.5px;
|
||||||
|
text-underline-thickness: 1px;
|
||||||
|
|
||||||
|
&:hover, &:focus, &:active {
|
||||||
|
color: var(--color-purple-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span.t {
|
||||||
|
font-family: linja-pona-4;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-size-adjust: from-font;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-dark);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0.05em 0.35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
& > code {
|
||||||
|
display: block;
|
||||||
|
overflow-x: scroll;
|
||||||
|
|
||||||
|
background-color: transparent !important;
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: var(--color-purple-translucent);
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 1em 0.5em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
|
||||||
|
& li:before {
|
||||||
|
content: "–";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dl {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 6em 1fr;
|
||||||
|
gap: 0.25em 2em;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
& > dd {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img, video {
|
||||||
|
max-width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
& > h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
& > p:last-child {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
border-radius: 8px;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
height: 5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 0.7ch;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
|
||||||
|
& a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > ul {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
font-size: smaller;
|
||||||
|
gap: 0.25em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.25em;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
border-radius: 2em;
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
|
||||||
|
border-radius: 1.25em;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
color: var(--color-text);
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: var(--color-purple);
|
||||||
|
color: var(--color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding-top: 1.5em;
|
||||||
|
padding-bottom: 1.5em;
|
||||||
|
|
||||||
|
& * {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 881px) {
|
||||||
|
section {
|
||||||
|
& > div {
|
||||||
|
margin-left: calc(var(--extra-width) * -1);
|
||||||
|
width: calc(var(--content-width) + var(--extra-width));
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 6px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: var(--color-background);
|
||||||
|
border: 1px solid var(--color-purple-translucent);
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
clip-path: polygon(
|
||||||
|
-1px -1px,
|
||||||
|
calc(var(--extra-width) / 2) -1px,
|
||||||
|
calc(var(--extra-width) / 2) 3px,
|
||||||
|
calc(100% - 2px - var(--extra-width) / 2) 3px,
|
||||||
|
calc(100% - 2px - var(--extra-width) / 2) -1px,
|
||||||
|
calc(100% + 1px) -1px,
|
||||||
|
calc(100% + 1px) calc(100% + 1px),
|
||||||
|
calc(100% - 2px - var(--extra-width) / 2) calc(100% + 1px),
|
||||||
|
calc(100% - 2px - var(--extra-width) / 2) calc(100% - 3px),
|
||||||
|
calc(var(--extra-width) / 2) calc(100% - 3px),
|
||||||
|
calc(var(--extra-width) / 2) calc(100% + 1px),
|
||||||
|
-1px calc(100% + 1px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > pre > code, & > img, & > video {
|
||||||
|
padding: 1em 1.5em;
|
||||||
|
padding-bottom: calc(0.85em);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > img, & > video {
|
||||||
|
width: calc(100% - 2.85em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
pre > code, div > img, div > video {
|
||||||
|
margin: 0 -2em;
|
||||||
|
padding: 1.5em 2em;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code, div > img, div > video {
|
||||||
|
margin: 0 -1em;
|
||||||
|
padding: 1.5em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr { display: none; }
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: counter;
|
||||||
|
padding-left: 2em;
|
||||||
|
|
||||||
|
& > li {
|
||||||
|
counter-increment: counter;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "[" counter(counter) "]";
|
||||||
|
position: absolute;
|
||||||
|
left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
---
|
||||||
|
title: "Lilac's Website"
|
||||||
|
description: "Computer Engineer & [Certified Punk Rocker](https://youtu.be/z9LiPuVRyU8&t=261)"
|
||||||
|
---
|
||||||
|
# About Me
|
||||||
|
|
||||||
|
Howdy! My name is Lilac, and this is my website. I am interested in low-level
|
||||||
|
computing, networking, and Linux. When not tinkering with 'puters, I birdwatch,
|
||||||
|
crochet, and garden.
|
||||||
|
|
||||||
|
# Technology
|
||||||
|
|
||||||
|
I write embedded firmware and POSIX/Linux applications using C and several
|
||||||
|
dialects of assembly. I do the server administration for all my own web services
|
||||||
|
using Linux and Nix.
|
||||||
|
|
||||||
|
Here is some of the software I've written:
|
||||||
|
|
||||||
|
[Tanager](https://code.grasswren.net/Lilac/Tanager)
|
||||||
|
: QMK keyboard firmware with flashy backlighting
|
||||||
|
|
||||||
|
[grasswren.net](https://code.grasswren.net/Lilac/grasswren.net)
|
||||||
|
: Content and Hugo theme for this website
|
||||||
|
|
||||||
|
# Music
|
||||||
|
|
||||||
|
My favourite genres of music are grunge, punk, hyperpop, breakcore, and digital
|
||||||
|
hardcore. I really enjoy the music scene where I live; I think everybody should
|
||||||
|
get out there and interact with their local artists.
|
||||||
|
|
||||||
|
I self-host my music library, so I don't have opportunities to discover new
|
||||||
|
music very often. If you are visiting this site for the first time, [shoot me an
|
||||||
|
email](mailto:lilac@grasswren.net) telling me what I should listen to next!
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: Lilac's Birds
|
||||||
|
description: They're cute little guys, aren't they?
|
||||||
|
---
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: "Lilac's Blog"
|
||||||
|
description: "I love pretending I know what's going on!"
|
||||||
|
---
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
---
|
||||||
|
title: "Building Custom Keyboard Backlighting"
|
||||||
|
description: "Upgrading my [Ergodox EZ](https://ergodox-ez.com/) using [QMK](https://github.com/qmk/qmk_firmware)"
|
||||||
|
date: 2026-07-09
|
||||||
|
---
|
||||||
|
# Intro
|
||||||
|
|
||||||
|
I own an Ergodox EZ, a very comfortable, split, columnar keyboard. I bought it
|
||||||
|
because I gave myself carpal tunnel typing on my last keyboard, and I wanted to
|
||||||
|
see if I could type any faster on a split board.[^1] Ergodox keyboards run
|
||||||
|
open-source QMK firmware, meaning they are extensively configurable for a
|
||||||
|
programmer like me! I love my keyboard, and I would recommend a split keyboard
|
||||||
|
to anybody looking for something more comfortable than a standard keyboard.
|
||||||
|
|
||||||
|
# Key Layout
|
||||||
|
|
||||||
|
My key layout isn't the main focus of this post, but I wanted to highlight it
|
||||||
|
because it uses some cool features QMK offers.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The first thing to notice is that I have plenty of thumb keys for common
|
||||||
|
keycodes. I never really liked that common keys like Enter, Backspace, and
|
||||||
|
Escape[^2] were off to the side, so I moved them to be more easily accessible.
|
||||||
|
|
||||||
|
On the bottom left side, there is a key labelled Layer. QMK has a concept called
|
||||||
|
[layers](https://docs.qmk.fm/feature_layers), not unlike how a phone keyboard
|
||||||
|
works: tap or hold a layer key, and access different keys. I use this for my
|
||||||
|
function keys because I use them so infrequently, and I don't want them wasting
|
||||||
|
space normally.
|
||||||
|
|
||||||
|
Finally, I have a key labelled Macro. I commonly type `->` when programming, so
|
||||||
|
I made this key type both characters in a single stroke. I also modified the
|
||||||
|
handling of the Backspace key so it deletes both characters if the previous
|
||||||
|
keycode was Macro.
|
||||||
|
|
||||||
|
# Backlighting
|
||||||
|
|
||||||
|
All the default backlighting options provided by QMK are too boring for me, so I
|
||||||
|
rolled my own. It works like this, with each keyboard half operating
|
||||||
|
independently:
|
||||||
|
|
||||||
|
- Every keystroke changes the backlight colour
|
||||||
|
- When all keys are released, the backlight LEDs fade out nicely
|
||||||
|
- Backlight LEDs closer to the most recently pressed key are brighter than
|
||||||
|
those further from it
|
||||||
|
|
||||||
|
Every time a keystroke is detected, the following function runs, tracking which
|
||||||
|
key was pressed and updating the colours:
|
||||||
|
|
||||||
|
```c
|
||||||
|
void post_process_record_user(uint16_t keycode, keyrecord_t *record)
|
||||||
|
{
|
||||||
|
if (!backlight || !record->event.pressed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (record->event.key.row < 7) {
|
||||||
|
hue_left = rand();
|
||||||
|
brightness_left = 255;
|
||||||
|
|
||||||
|
if (record->event.key.col != 5) {
|
||||||
|
position_left = 29 - 2 * record->event.key.row;
|
||||||
|
} else {
|
||||||
|
position_left = 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
color(hue_left, brightness_left, position_left, 15);
|
||||||
|
} else {
|
||||||
|
hue_right = rand();
|
||||||
|
brightness_right = 255;
|
||||||
|
|
||||||
|
if (record->event.key.col != 5) {
|
||||||
|
position_right = 26 - 2 * record->event.key.row;
|
||||||
|
} else {
|
||||||
|
position_right = 14;
|
||||||
|
}
|
||||||
|
|
||||||
|
color(hue_right, brightness_right, position_right, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This function is rather long because I have to control the keyboard halves
|
||||||
|
independently, but the main idea is simple. Every keystroke:
|
||||||
|
|
||||||
|
- Randomize the colour hue
|
||||||
|
- Maximize the brightness
|
||||||
|
- Record the column the key is in
|
||||||
|
- Turn on the LEDs using those values
|
||||||
|
|
||||||
|
In another function, I keep track of how many keys are pressed at any given
|
||||||
|
time, so I can dim the LEDs once no more are pressed:
|
||||||
|
|
||||||
|
```c
|
||||||
|
if (record->event.key.row < 7) {
|
||||||
|
count_left += record->event.pressed ? 1 : -1;
|
||||||
|
} else {
|
||||||
|
count_right += record->event.pressed ? 1 : -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Brightness Calculation
|
||||||
|
|
||||||
|
Now that I track these values, I need to use them to calculate the brightness of
|
||||||
|
each LED:
|
||||||
|
|
||||||
|
```c
|
||||||
|
static void color(uint8_t hue, uint8_t brightness, uint8_t position,
|
||||||
|
uint8_t index)
|
||||||
|
{
|
||||||
|
for (int i = index; i < (index + 15); ++i) {
|
||||||
|
const uint32_t cube = (uint32_t)brightness * brightness * brightness;
|
||||||
|
const uint8_t distance = position > i ? position - i : i - position;
|
||||||
|
sethsv(hue, 255, cube / 65025 * 5 / (5 + distance), i);
|
||||||
|
}
|
||||||
|
rgblight_set();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This function takes in a hue, brightness, position, and starting index. There
|
||||||
|
are 30 LEDs on an Ergodox EZ, meaning that I can pass either `0` or `15` as the
|
||||||
|
starting index to have the function loop over the right or left LEDs
|
||||||
|
respectively.
|
||||||
|
|
||||||
|
The `brightness` and `position` parameters contribute to the brightness of the
|
||||||
|
LED. First, the brightness is passed through a cubic ease-out function. This
|
||||||
|
produces a more pleasing dimming as opposed to linearly dimming the LED, as the
|
||||||
|
human eye senses brightness on a logarithmic scale. Second, the brightness is
|
||||||
|
scaled down by an amount proportional to its distance from the last key pressed.
|
||||||
|
The scaling function being used is `5 / (5 + n)` where `n` is the distance in
|
||||||
|
LED index from the brightest LED, which is not dimmed because its scaling
|
||||||
|
fraction evaluates to `1`.
|
||||||
|
|
||||||
|
The `sethsv` function can then be passed a hue (given as a parameter and
|
||||||
|
unchanging as the LED is dimmed), a saturation (always the maximum), the value
|
||||||
|
(or brightness, as just calculated), and the index of the LED. Finally, I flush
|
||||||
|
my LED settings out to the LED peripheral with the `rgblight_set` function.
|
||||||
|
|
||||||
|
# Result
|
||||||
|
|
||||||
|
With a little logic, the backlights on each keyboard half act just as I wanted,
|
||||||
|
lighting up reactively and fading when no more keys are pressed.
|
||||||
|
|
||||||
|
Take a look!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Footnotes
|
||||||
|
|
||||||
|
[^1]: Quite a bit!
|
||||||
|
|
||||||
|
[^2]: I use the [Helix](https://helix-editor.com/) editor, meaning I type
|
||||||
|
Escape almost as much as I type Space.
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@@ -0,0 +1,12 @@
|
|||||||
|
title: 'grasswren.net'
|
||||||
|
baseURL: 'https://grasswren.net'
|
||||||
|
|
||||||
|
uglyURLs: true
|
||||||
|
disableKinds:
|
||||||
|
- RSS
|
||||||
|
- sitemap
|
||||||
|
- taxonomy
|
||||||
|
- term
|
||||||
|
|
||||||
|
markup: { goldmark: { parser: { wrapStandAloneImageWithinParagraph: false } } }
|
||||||
|
minify: { minifyOutput: true }
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<h{{ add .Level 1 }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ add .Level 1 }}>
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
{{- if eq (path.Ext .Destination) ".mp4" -}}
|
||||||
|
<div><video src='{{ .Destination | safeURL }}' alt='{{ .Text }}' title='{{ .Text }}' controls preload="metadata" playsinline></video></div>
|
||||||
|
{{- else -}}
|
||||||
|
<div><img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" title="{{ .Text }}"></div>
|
||||||
|
{{- end -}}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
<meta name='viewport' content='width=device-width'>
|
||||||
|
<meta name='theme-color' content='#ab5aed'>
|
||||||
|
<meta name='og:type' content='website'>
|
||||||
|
<meta name='og:title' content='{{ .Title }}'>
|
||||||
|
<meta name='og:description' content='{{ .Description | markdownify | plainify }}'>
|
||||||
|
<meta name='og:url' content='{{ .Permalink }}'>
|
||||||
|
<meta name='og:image' content='/espurr.png'>
|
||||||
|
<link rel='preconnect' href='https://rsms.me'>
|
||||||
|
<link rel='preconnect' href='https://ajlee2006.github.io'>
|
||||||
|
<link rel='stylesheet' href='https://rsms.me/inter/inter.css'>
|
||||||
|
{{ $css := resources.Get "style.css" | resources.Minify | resources.Fingerprint }}
|
||||||
|
<link rel='stylesheet' href='{{ $css.RelPermalink }}'>
|
||||||
|
<link rel='icon' href='/espurr.png'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<div><a href='https://grasswren.net'>grasswren.net</a></div>
|
||||||
|
<ul>
|
||||||
|
<li><a {{ if .IsHome }}class='active'{{ end }} href='https://grasswren.net'>Home</a></li>
|
||||||
|
<li><a {{ if eq .Type "blog" }}class='active'{{ end }} href='https://blog.grasswren.net'>Blog</a></li>
|
||||||
|
<li><a {{ if eq .Type "birds" }}class='active'{{ end }} href='https://birds.grasswren.net'>Birds</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<header>
|
||||||
|
<div>
|
||||||
|
<h1>{{ .Title }} {{ if eq .Page.BundleType "branch" }}<span class='t'>[_lipu_pi_soweli_kili]</span>{{ end }}</h1>
|
||||||
|
<p>{{ .Description | markdownify }}</p>
|
||||||
|
</div>
|
||||||
|
<img src='/espurr.png' alt='Espurr'>
|
||||||
|
</header>
|
||||||
|
{{ block "main" . }}
|
||||||
|
{{ end }}
|
||||||
|
<footer>
|
||||||
|
<div><p>by <a href='mailto:lilac@grasswren.net'>Lilac</a> <small>(she/her)</small></p></div>
|
||||||
|
<div><p>ΘΔ ⸱ 🏳️⚧️</p></div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
{{ $sections := split .Content "<h2" }}
|
||||||
|
{{ range after 1 $sections }}
|
||||||
|
<section>
|
||||||
|
{{ print "<h2" . | safeHTML }}
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
<section>
|
||||||
|
<dl>
|
||||||
|
{{ range .Pages }}
|
||||||
|
<time>{{ time.Format "2006-01-02" .Date }}</time>
|
||||||
|
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
|
||||||
|
{{ end }}
|
||||||
|
</dl>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
{{ define "main" }}
|
||||||
|
{{- $content := .Content -}}
|
||||||
|
{{- $content = replaceRE `<div class="footnotes" role="doc-endnotes">` "" $content -}}
|
||||||
|
{{- $content = replaceRE `</div>\s*$` "" $content -}}
|
||||||
|
{{- $tmp := $content | safeHTML -}}
|
||||||
|
{{ $sections := split $tmp "<h2" }}
|
||||||
|
{{ range after 1 $sections }}
|
||||||
|
<section>
|
||||||
|
{{ print "<h2" . | safeHTML }}
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
Reference in New Issue
Block a user