implemented eleventy filter for links

This commit is contained in:
sundae 2025-10-19 15:55:35 +03:00
parent fb24c6a302
commit c8223447a0
No known key found for this signature in database
41 changed files with 230 additions and 205 deletions

View file

@ -1,3 +1,4 @@
{ {
"name": "sunny's bunspace" "name": "sunny's bunspace",
"mastodon": "https://denden.world/@fossilisk"
} }

View file

@ -15,8 +15,8 @@ theme: "M16 6a1 1 0 010 20Zm0-4a1 1 0 000 28A1 1 0 0016 2"
{% endif %} {% endif %}
{{ site.name | safe }} {{ site.name | safe }}
</title> </title>
<link rel="icon" href="/assets/img/icon/sundae.png">
{% include "meta.njk" %} {% include "meta.njk" %}
<link rel="icon" href="/assets/img/icon/sundae.png">
<link rel="stylesheet" href="/assets/css/reset.css"> <link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="/assets/css/default/default.css"> <link rel="stylesheet" href="/assets/css/default/default.css">
<link rel="preload" href="/assets/css/citrus/default.css" as="style"> <link rel="preload" href="/assets/css/citrus/default.css" as="style">

View file

@ -4,7 +4,7 @@ layout: base
<article> <article>
{{content|safe}} {{content|safe}}
<section aria-label="Postscript"> <section class="postscript">
{{blurb|safe}} <span><img src="{{avatar}}" alt="Profile picture"/></span> {{blurb|safe}} <span><img src="{{avatar}}" alt="Profile picture"/></span>
</section> </section>
</article> </article>

View file

@ -14,10 +14,7 @@ layout: base
<ul> <ul>
{% for program in programs %} {% for program in programs %}
<li> <li>
<span> {{ program.name | link(program.src) | safe }}
<img src="https://www.google.com/s2/favicons?domain={{ program.src }}" alt="">
<a href="{{ program.src }}">{{ program.name }}</a>
</span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -27,14 +24,11 @@ layout: base
{% for palette in palettes %} {% for palette in palettes %}
<ul> <ul>
<li> <li>
<span>
{% if palette.src %} {% if palette.src %}
<img src="https://www.google.com/s2/favicons?domain={{ palette.src }}" alt=""> {{ palette.name | link(palette.src) | safe }}
<a href="{{ palette.src }}">
{% endif %} {% endif %}
{{ palette.name }}</a>
</span>
</li> </li>
</ul>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}

View file

@ -13,12 +13,24 @@
background-size: auto; background-size: auto;
background-repeat: repeat; background-repeat: repeat;
box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy); box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy);
& aside { & aside, .addendum {
border-width: 2px;
border-style: solid;
background-color: var(--citrus-mix-light);
border-color: var(--citrus-mix);
border-radius: 0; border-radius: 0;
border-width: 4px;
border-style: solid;
}
& aside {
border-color: var(--citrus-mix-light);
background-image: linear-gradient(135deg,
var(--citrus-light-extra) 5%,
var(--citrus-light) 50%, var(--citrus-light-extra)
);
}
& .addendum {
border-color: var(--citrus-primary);
background-image: linear-gradient(135deg,
var(--citrus-mix-light) 5%,
var(--citrus-light) 50%, var(--citrus-mix-light)
);
} }
& pre { & pre {
border-radius: 4px; border-radius: 4px;
@ -26,21 +38,13 @@
background-color: var(--citrus-dark-extra); background-color: var(--citrus-dark-extra);
background-size: 4px; background-size: 4px;
} }
& [aria-label="Post warning"] { & .post-warning {
background-color: var(--citrus-primary);
}
& [aria-label="Addendum"] {
border-image-source: linear-gradient(
45deg,
var(--citrus-primary),
var(--citrus-secondary)
);
background-color: var(--citrus-primary); background-color: var(--citrus-primary);
} }
& s { & s {
text-decoration-color: #d00; text-decoration-color: #d00;
} }
& [aria-label="Postscript"] { & .postscript {
& span:has([alt]) { & span:has([alt]) {
&::after { &::after {
content: ""; content: "";
@ -72,7 +76,8 @@
ellipse at 50% -0%, ellipse at 50% -0%,
var(--light) 20%, var(--light) 20%,
var(--dark) 150% var(--dark) 150%
), var(--pansexual); ),
var(--pansexual);
background-blend-mode: overlay, normal; background-blend-mode: overlay, normal;
background-size: cover, 100%; background-size: cover, 100%;
background-position: center; background-position: center;
@ -101,6 +106,3 @@
} }
} }
} }
#blog:not(:has(#posts)) header {
text-align: initial !important;
}

View file

@ -4,8 +4,7 @@
@import url("./nav.css"); @import url("./nav.css");
@import url("./variables.css"); @import url("./variables.css");
:is(a, button):not(span *, [aria-label="Postscript"] *, body nav *), :is(a, button):not(span *, .postscript *, body nav *),.link,
span:has(a),
#posts a { #posts a {
color: var(--citrus-dark); color: var(--citrus-dark);
transition: background-color var(--trans); transition: background-color var(--trans);

View file

@ -6,9 +6,13 @@ article#badges {
} }
} }
#interests li { #interests li {
width: 16ch;
margin: var(--pad-sm); margin: var(--pad-sm);
box-shadow: var(--shadow-light); box-shadow: var(--shadow-light);
background: color-mix(in lch, #ff0, #fff); background-image: linear-gradient(color-mix(in lch, var(--citrus-light-extra), var(--citrus-primary) 50%), var(--citrus-primary) 200%);
& img {
filter: drop-shadow(0 0 1px var(--citrus-dark));
}
&:nth-child(odd) { &:nth-child(odd) {
transform: rotate(1deg); transform: rotate(1deg);
} }

View file

@ -1,13 +1,15 @@
:root { :root {
--avatar: 3rem; --avatar: 3rem;
} }
#blog:not(:has(#posts)) header { article:not(#blog:has(#posts) *) {
text-align: center; margin: 0 auto;
} }
article { article {
margin: 0 auto;
max-width: var(--post); max-width: var(--post);
& > [aria-label="Postscript"]::after { & ul {
margin: 0;
}
& > .postscript::after {
background-color: var(--primary); background-color: var(--primary);
} }
& section:not(section:has(p)) { & section:not(section:has(p)) {
@ -27,7 +29,7 @@ article {
h6 { h6 {
margin-bottom: var(--pad-m); margin-bottom: var(--pad-m);
} }
& [aria-label="Post warning"] { & .post-warning {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1.4rem; font-size: 1.4rem;
@ -42,19 +44,19 @@ article {
} }
} }
} }
[aria-label="Addendum"], .addendum,
[aria-label="Post warning"], .post-warning,
article aside { article aside {
margin: var(--pad-l) 0; margin: var(--pad-l) 0;
padding: var(--pad-l); padding: var(--pad-l);
} }
article > [aria-label="Addendum"] { article > .addendum {
border-image-slice: 1; border-image-slice: 1;
border-image-width: 2px; border-image-width: 2px;
border-image-outset: 4px; border-image-outset: 4px;
} }
article > [aria-label="Postscript"] { article > .postscript {
margin: 0 0 auto auto; margin: 0 0 auto auto;
padding: 2rem 0 4rem 0; padding: 2rem 0 4rem 0;
&::after { &::after {
@ -127,10 +129,6 @@ article > [aria-label="Postscript"] {
padding: 0; padding: 0;
} }
& li p {
margin-block-start: 0;
}
& a { & a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -162,7 +160,7 @@ article > [aria-label="Postscript"] {
max-width: unset; max-width: unset;
width: auto; width: auto;
} }
article > [aria-label="Postscript"] { article > .postscript {
& p { & p {
margin-right: var(--pad-sm); margin-right: var(--pad-sm);
& > a img { & > a img {
@ -173,7 +171,7 @@ article > [aria-label="Postscript"] {
} }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
article > [aria-label="Postscript"] { article > .postscript {
& p, & p,
p > img { p > img {
transition: none; transition: none;

View file

@ -100,6 +100,7 @@ details {
} }
article { article {
color: inherit;
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-radius: var(--round); border-radius: var(--round);
@ -170,8 +171,7 @@ article {
padding: 0; padding: 0;
margin: 0 0 var(--pad-sm) var(--pad-xl); margin: 0 0 var(--pad-sm) var(--pad-xl);
} }
& li:is(#art *, #bio *) { & li:not([role] *, #changelog *) {
display: flex;
&::marker { &::marker {
content: none; content: none;
} }
@ -224,13 +224,17 @@ img[src*="/assets/img/flag/"] {
} }
} }
span:has(img[src*="https://www.google.com/s2/favicons"]) img .link {
{ display: inline-flex;
position: relative; & a {
top: 2px;
left: 2px;
margin-right: 4px; margin-right: 4px;
} }
& img {
position: relative;
vertical-align: sub;
margin: 0 4px;
}
}
@media screen and (max-width: 920px) { @media screen and (max-width: 920px) {
body::after { body::after {

View file

@ -10,11 +10,10 @@
article#bio { article#bio {
& .emoji { & .emoji {
height: 24px; height: 20px;
width: 24px; width: 20px;
display: inline-flex; display: inline-flex;
margin: 0 0 0 var(--pad-sm); vertical-align: middle;
align-self: center;
&::after, &::after,
img { img {
filter: drop-shadow(0 0 0.5px #000a); filter: drop-shadow(0 0 0.5px #000a);
@ -131,15 +130,15 @@ article#interests {
} }
#agender { #agender {
background-image: var(--agender) background-image: var(--agender);
} }
#aromantic { #aromantic {
background-image: var(--aromantic) background-image: var(--aromantic);
} }
#pansexual { #pansexual {
background-image: var(--pansexual) background-image: var(--pansexual);
} }
#badges img { #badges img {
max-height: 31px; max-height: 31px;

View file

@ -16,6 +16,7 @@
background-size: contain; background-size: contain;
& footer { & footer {
position: sticky;
bottom: 0; bottom: 0;
} }
@ -24,7 +25,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-self: center; justify-self: center;
& a, img { & a,
img {
z-index: 1; z-index: 1;
display: inherit; display: inherit;
flex-direction: inherit; flex-direction: inherit;

View file

@ -39,7 +39,7 @@
} }
/* blog.css */ /* blog.css */
& [aria-label="Post warning"] { & .post-warning {
background-color: var(--secondary); background-color: var(--secondary);
color: var(--secondary-100); color: var(--secondary-100);
@ -49,7 +49,7 @@
} }
} }
& [aria-label="Addendum"] { & .addendum {
box-shadow: inset 0 0 0 2px var(--secondary); box-shadow: inset 0 0 0 2px var(--secondary);
border-image-source: linear-gradient( border-image-source: linear-gradient(
45deg, 45deg,
@ -69,7 +69,7 @@
/* default.css */ /* default.css */
body { body {
background-color: var(--secondary-100); background-color: var(--secondary-100);
& :is(a, button):not(span *, [aria-label="Postscript"] *), & :is(a, button):not(span *, .postscript *),
span:has(a) { span:has(a) {
color: var(--secondary-light-400); color: var(--secondary-light-400);
border-color: var(--secondary-600); border-color: var(--secondary-600);
@ -121,7 +121,8 @@
} }
} }
&::after, & > nav::before { &::after,
& > nav::before {
background-color: var(--secondary); background-color: var(--secondary);
} }
} }

View file

@ -39,7 +39,7 @@
} }
/* blog.css */ /* blog.css */
& [aria-label="Post warning"] { & .post-warning {
background-color: var(--primary); background-color: var(--primary);
color: var(--primary-dark-100); color: var(--primary-dark-100);
@ -49,7 +49,7 @@
} }
} }
& [aria-label="Addendum"] { & .addendum {
box-shadow: inset 0 0 0 2px var(--primary); box-shadow: inset 0 0 0 2px var(--primary);
border-image-source: linear-gradient( border-image-source: linear-gradient(
45deg, 45deg,
@ -69,7 +69,7 @@
/* default.css */ /* default.css */
body { body {
background-color: var(--primary-100); background-color: var(--primary-100);
& :is(a, button):not(span *, [aria-label="Postscript"] *), & :is(a, button):not(span *, .postscript *),
span:has(a) { span:has(a) {
color: var(--primary-dark-400); color: var(--primary-dark-400);
border-color: var(--primary-600); border-color: var(--primary-600);

View file

@ -13,9 +13,9 @@ programs:
Incredibly proud of this! Incredibly proud of this!
I used <span>![](https://www.google.com/s2/favicons?domain=https://tombofnull.itch.io/stipple-beast-brush-pack)[TOMBOFNULL's stipple beast brush pack](https://tombofnull.itch.io/stipple-beast-brush-pack)</span>, which I'd been meaning to try out before. I used {{"TOMBOFNULL's stipple beast brush pack"|link:"https://tombofnull.itch.io/stipple-beast-brush-pack"}} which I'd been meaning to try out before.
Inspired by one of <span>![](https://www.google.com/s2/favicons?domain=https://kaitty.com)[kaitty's](https://kaitty.com)</span> avatars (specifically from their bandcamp), which I thought was really cute. Inspired by one of {{"kaitty's"|link:"https://kaitty.com"}} avatars (specifically from their bandcamp), which I thought was really cute.
It first started out as a doodle, referencing their avatar. Although, I wasn't that happy since the colors I used were a bit flat. It first started out as a doodle, referencing their avatar. Although, I wasn't that happy since the colors I used were a bit flat.

View file

@ -11,6 +11,6 @@ programs:
src: https://gimp.org/ src: https://gimp.org/
--- ---
I got bored one day and I decided on a whim to make my own lick icon from <span>![](https://www.google.com/s2/favicons?domain=https://deviantart.com)[Michi's lick icon base](https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097)</span>. I got bored one day and I decided on a whim to make my own lick icon from {{"Michi's lick icon base"|link:"https://www.deviantart.com/sketchmichi/art/Lick-icon-base-201253097"}}.
Pretty happy with it! Pretty happy with it!

View file

@ -8,6 +8,6 @@ programs:
src: https://krita.org/ src: https://krita.org/
--- ---
I was incredibly surprised to discover that I could create the space background in-program with Krita, just by using different built-in presets from the [Halftone filter](https://docs.krita.org/en/reference_manual/filters/artistic.html). I was incredibly surprised to discover that I could create the space background in-program with Krita, just by using different built-in presets from the {{"Halftone filter"|link:"https://docs.krita.org/en/reference_manual/filters/artistic.html"}}.
This is one of my favorite artworks that I've spent time working on! This is one of my favorite artworks that I've spent time working on!

View file

@ -13,4 +13,4 @@ The first doodle of the boy, done in Microsoft Paint.
I'm not sure when I actually made this, due to lack of chat logs and file dates being wiped. I'm not sure when I actually made this, due to lack of chat logs and file dates being wiped.
The earliest I could point to is during 2020, when I made a secondary youtube channel to upload <span>![](https://www.google.com/s2/favicons?domain=https://youtube.com)[Cave Story's soundtracks](https://youtube.com/@fosstracks/videos)</span>, since at the time, there weren't any great uploads. The earliest I could point to is during 2020, when I made a secondary youtube channel to upload {{"Cave Story's soundtracks"|link:"https://youtube.com/@fosstracks/videos"}}, since at the time, there weren't any great uploads.

View file

@ -8,6 +8,6 @@ programs:
src: https://krita.org/ src: https://krita.org/
--- ---
For this, I took reference from the work of <span>![](https://www.google.com/s2/favicons?domain=https://twitter.com)[Dr. Presto (18+ warning)](https://twitter.com/presswer)</span>, specifically with how they used to create model sheets of their characters, during 2020. For this, I took reference from the work of {{"Dr. Presto (18+ warning)"|link:"https://twitter.com/presswer"}}, specifically with how they used to create model sheets of their characters, during 2020.
They're a huge inspiration for me to start drawing, and I haven't made proper reference models until this. They're a huge inspiration for me to start drawing, and I haven't made proper reference models until this.

View file

@ -14,4 +14,4 @@ palettes:
This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using lvllvl, which is to say that this is done using a bitmap character set, despite it looking like pixel art. This isn't so much PETSCII as it is pixel art, but it's my first artwork that I've done using lvllvl, which is to say that this is done using a bitmap character set, despite it looking like pixel art.
<span>![](https://www.google.com/s2/favicons?domain=https://archives.bulbagarden.net)[Lurantis don't have a mouth](https://archives.bulbagarden.net/wiki/Category:Lurantis)</span>, but I thought I'd give them one anyway, because they look cute with. {{"Lurantis don't have a mouth"|link:"https://archives.bulbagarden.net/wiki/Category:Lurantis"}}, but I thought I'd give them one anyway, because they look cute with.

View file

@ -7,6 +7,6 @@ palettes:
- name: Commodore 64 - name: Commodore 64
--- ---
Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of <span>![](https://www.google.com/s2/favicons?domain=https://lvllvl.com)[lvllvl](https://lvllvl.com/)</span>, using a much less user-friendly tool. Cave Story!!! The first PETSCII artwork that I've done before knowing the existence of lvllvl, using a much less user-friendly tool.
Inspired by <span>![](https://www.google.com/s2/favicons?domain=https://mileshouse.neocities.org)[kiophen](https://mileshouse.neocities.org)</span> and <span>![](https://www.google.com/s2/favicons?domain=https://creature0354.neocities.org)[lati](https://creature0354.neocities.org)</span>'s first PETSCII works! Inspired by {{"kiophen"|link:"https://mileshouse.neocities.org"}} and {{"lati's"|link:"https://creature0354.neocities.org"}} first PETSCII works!

View file

@ -7,7 +7,7 @@ programs:
- name: Krita - name: Krita
src: https://krita.org/ src: https://krita.org/
--- ---
<span>![](https://www.google.com/s2/favicons?domain=https://caverncrusher.com)[Mallow!](https://caverncrusher.com/Mallow)</span> I love this goober. It's from a ROBLOX game titled <span>![](https://www.google.com/s2/favicons?domain=https://roblox.com)[Cavern Crusher](https://www.roblox.com/games/15121756860/CAVERN-CRUSHER)</span> that's in development (as of writing). {{"Mallow!"|link:"https://caverncrusher.com/Mallow"}} I love this goober. It's from a ROBLOX game titled {{"Cavern Crusher"|link:"https://www.roblox.com/games/15121756860/CAVERN-CRUSHER"}} that's in development (as of writing).
It has a lot of really cute character designs and I just had to draw one of them. It has a lot of really cute character designs and I just had to draw one of them.

View file

@ -8,9 +8,12 @@ avatar: /assets/img/art/sundae_glistening.png
## {{page.fileSlug}} ## {{page.fileSlug}}
<time datetime="{{date|ISO}}">{{date|readable}}</time> <time datetime="{{date|ISO}}">Published: {{date|readable}}</time>
{%if modified%}
<time datetime="{{modified|ISO}}">Last modified: {{modified|readable}}</time>
{%endif%}
<section aria-label="Post warning"> <section class="post-warning">
WARNING: BORING NERD TOPIC AHOY WARNING: BORING NERD TOPIC AHOY
@ -28,17 +31,17 @@ Actually, it had been mostly finished for a while (since July 1st), but I hit a
### I have <s>no</s> some idea what I'm doing ### I have <s>no</s> some idea what I'm doing
For starters, porting a website (at least one that's paw-written by yours truly) to a static site generator like [Eleventy](https://11ty.dev/) was definitely something, having only dabbled with editing `.html` and `.css` files without hosting a local server. For starters, porting a website (at least one that's paw-written by yours truly) to a static site generator like {{"Eleventy"|link:"https://11ty.dev/"}} was definitely something, having only dabbled with editing `.html` and `.css` files without hosting a local server.
Initially I went looking around for a base (as to not start from complete scratch) to use and found [Smol 11ty Starter by 5t3ph](https://github.com/5t3ph/smol-11ty-starter) and set it up. Initially I went looking around for a base (as to not start from complete scratch") to use and found {{"Smol 11ty Starter by 5t3ph"|link:"https://github.com/5t3ph/smol-11ty-starter"}} and set it up.
I was **very eager** to start working on it, and because I decided to do so late at night, I didn't consult any documentation and thus felt like it would be impossible to learn [Nunjucks](https://mozilla.github.io/nunjucks/) (one of the [templating languages](https://www.11ty.dev/docs/languages/) used in Eleventy) got upset, settled down and slept. I was **very eager** to start working on it, and because I decided to do so late at night, I didn't consult any documentation and thus felt like it would be impossible to learn {{"Nunjucks"|link:"https://mozilla.github.io/nunjucks/"}} (one of the {{"templating languages"|link:"https://www.11ty.dev/docs/languages/"}} used in Eleventy") got upset, settled down and slept.
### You're telling me that Java scripted this? ### You're telling me that Java scripted this?
I still don't understand JavaScript that well, got stumped on a couple of things, and as a result I took some time off working on the re-write. I still don't understand JavaScript that well, got stumped on a couple of things, and as a result I took some time off working on the re-write.
Regardless, I had ported over the base layout and most pages, which would be around 90% of the work done within the first couple of days. The last 10% that was left being: having to tackle date conversion with [Luxon](https://github.com/moment/luxon), setting custom filters for Eleventy to use them and forgetting to port a few page elements to `.json` data tables. Regardless, I had ported over the base layout and most pages, which would be around 90% of the work done within the first couple of days. The last 10% that was left being: having to tackle date conversion with {{"Luxon"|link:"https://github.com/moment/luxon"}}, setting custom filters for Eleventy to use them and forgetting to port a few page elements to `.json` data tables.
Currently, my filters are handled really shittily, but they work whenever I build my site. Currently, my filters are handled really shittily, but they work whenever I build my site.

View file

@ -5,19 +5,23 @@ blurb: <p>i hate luxon</p><p><a href="/assets/img/blog/luxon.png"><img src="/ass
avatar: /assets/img/art/sundae_lick.gif avatar: /assets/img/art/sundae_lick.gif
--- ---
## {{page.fileSlug}} ## {{page.fileSlug}}
<time datetime="{{date|ISO}}">{{date|readable}}</time>
<time datetime="{{date|ISO}}">Published: {{date|readable}}</time>
{%if modified%}
<time datetime="{{modified|ISO}}">Last modified: {{modified|readable}}</time>
{%endif%}
I haven't worked on much of anything the past 8+ months, and out of the blue, I decided that I wasn't happy with how my website was looking, so I've been spending a couple of weeks working on rewriting the site and writing this post up. I haven't worked on much of anything the past 8+ months, and out of the blue, I decided that I wasn't happy with how my website was looking, so I've been spending a couple of weeks working on rewriting the site and writing this post up.
### So, what's new? ### So, what's new?
It's now [open source](https://bunsin.space/forgejo/sundae/website) under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>! It's now {{"open source"|link:"https://bunsin.space/forgejo/sundae/website"}} under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!
Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of [Eleventy 3.1.0](https://github.com/11ty/eleventy/releases/tag/v3.1.0), which was way easier than I expected, [since I originally started from a base](/blog/break-time#i-have-no-some-idea-what-i'm-doing). Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/blog/break-time#i-have-no-some-idea-what-i'm-doing"}}.
I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to [markdown-it](https://github.com/markdown-it/markdown-it) and [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor). I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to {{"markdown-it"|link:"https://github.com/markdown-it/markdown-it"}} and {{"markdown-it-anchor"|link:"https://github.com/valeriangalliat/markdown-it-anchor"}}.
I switched to using [date-fns](https://date-fns.org) aswell, instead of [Luxon](https://github.com/moment/luxon/). This library is just way better documented, for someone that still sort of struggles with JavaScript. I switched to using {{"date-fns"|link:"https://date-fns.org"}} aswell, instead of {{"Luxon"|link:"https://github.com/moment/luxon/"}}. This library is just way better documented, for someone that still sort of struggles with JavaScript.
Here's a snippet of my time filters in my `eleventy.config.js`: Here's a snippet of my time filters in my `eleventy.config.js`:
@ -32,7 +36,7 @@ eleventyConfig.addFilter("readable", (dateObj) => {
}); });
``` ```
They're just two, which I previously [struggled to achieve with Luxon](/blog/break-time/#you're-telling-me-that-java-scripted-this%3F), requiring me to end up writing an extra filter, which I still do not know why it was erroring. They're just two, which I [previously struggled to achieve with Luxon](/blog/break-time/#you're-telling-me-that-java-scripted-this%3F), requiring me to end up writing an extra filter, which I still do not know why it was erroring.
### Smaller stuff ### Smaller stuff
@ -40,7 +44,7 @@ I wasn't exactly a fan of how I laid out my [interests](/home#interests), previo
I've changed them to be more minimal, mimicking Windows desktop entries with the shortcut icon. I've changed them to be more minimal, mimicking Windows desktop entries with the shortcut icon.
If you'd like to implement the shelving for your own website, you can find the source files in the [old branch](https://bunsin.space/forgejo/sundae/website/src/branch/old). If you'd like to implement the shelving for your own website, you can find the source files in the {{"old branch"|link:"https://bunsin.space/forgejo/sundae/website/src/branch/old"}}.
<section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png" alt=""><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a> <section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png" alt=""><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a>
<a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png" alt=""><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section> <a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png" alt=""><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section>

View file

@ -1,21 +1,31 @@
--- ---
description: Working with Linux description: Working with Linux
date: 2024-06-22 date: 2024-06-22
modified: 2025-09-09 modified: 2025-10-19
blurb: <p><a href="https://blog.codinghorror.com/the-works-on-my-machine-certification-program/"><img src="/assets/img/blog/works-on-my-machine.png" alt="Shiny golden stamp with text 'Works on my machine'"></a></p><p>whatever i'm using might not necessarily work for you</p> blurb: <p><a href="https://blog.codinghorror.com/the-works-on-my-machine-certification-program/"><img src="/assets/img/blog/works-on-my-machine.png" alt="Shiny golden stamp with text 'Works on my machine'"></a></p><p>whatever i'm using might not necessarily work for you</p>
avatar: /assets/img/art/sundae_glistening.png avatar: /assets/img/art/sundae_glistening.png
--- ---
## {{page.fileSlug}} ## {{page.fileSlug}}
<time datetime="{{date|ISO}}">{{date|readable}}</time> <time datetime="{{date|ISO}}">Published: {{date|readable}}</time>
{%if modified%}
<time datetime="{{modified|ISO}}">Last modified: {{modified|readable}}</time>
{%endif%}
<section aria-label="Addendum"> <section class="addendum">
With Microsoft announcing that <span>![](https://www.google.com/s2/favicons?domain=https://microsoft.com)[Windows 10 will stop being supported after October 14, 2025](https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281)</span>, I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of 11. **Addendum:**
<span>![](https://www.google.com/s2/favicons?domain=https://kde.org)[Here's a handy resource](https://kde.org/for/w10-exiles/)</span> if you aren't sure how to proceed. {{"Microsoft has ended Windows 10 support on October 14, 2025"|link:"https://support.microsoft.com/en-us/windows/windows-10-support-ends-on-october-14-2025-2ca8b313-1946-43d3-b55c-2b95b107f281"}}
I'm not paid or anything to mention this, I just think **we shouldn't have to put up with capitalist bullshit to continue using a device.** I highly recommend looking into Linux if your device is on Windows 10 and you don't want to buy a whole new device that meets the system requirements of Windows 11.
Here's a few resources if you aren't sure what to do:
- {{"KDE For Windows 10 Exiles"|link:"https://kde.org/for/w10-exiles/"}}
- {{"Distrochooser"|link:"https://distrochooser.de/"}}
- {{"iFixit guide on installing Linux on Windows PCs"|link:"https://www.ifixit.com/Guide/How+to+Install+Linux+on+a+Windows+PC/196722"}}
I'm not paid or anything to mention these, I just think **we shouldn't have to put up with capitalist bullshit to continue using a device.**
</section> </section>
I've been using Linux exclusively for the past 3 months and the switch to it has been pretty fun! I've been using Linux exclusively for the past 3 months and the switch to it has been pretty fun!
@ -38,17 +48,19 @@ So... the hardest part about moving is, well, how would I move to Linux? There's
### Decisions ### Decisions
I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out <span>![](https://www.google.com/s2/favicons?domain=https://fedoraproject.org)[Fedora Workstation](https://fedoraproject.org/#editions)</span> at first and it felt pretty seamless, I didn't have to use the terminal for much of anything. I went to set up a virtual machine to understand what I'd want out of a "new" operating system, so I tried out {{"Fedora Workstation"|link:"https://fedoraproject.org/#editions"}} at first and it felt pretty seamless, I didn't have to use the terminal for much of anything.
I tinkered with it for a couple of days before deciding to look up system/media installers for Linux distributions (that are able to be run on Windows) and coming up empty-handed, cluelessly thinking that somehow only Windows manages to offer one. I tinkered with it for a couple of days before deciding to look up system/media installers for Linux distributions (that are able to be run on Windows) and coming up empty-handed, cluelessly thinking that somehow only Windows manages to offer one.
...Until I found <span>![](https://www.google.com/s2/favicons?domain=https://debian.org)[Debian's System Installer for Windows (win32loader)](https://wiki.debian.org/DebianInstaller/Loader)</span>, which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't! ...Until I found {{"Debian's System Installer for Windows (win32-loader)"|link:"https://en.wikipedia.org/wiki/Debian-Installer"}}, which I tried running under a Windows 11 virtual machine to see if it would fail to install, and it didn't!
So I just went ahead and installed it over my actual Windows partition (backing up my documents prior). So I just went ahead and installed it over my actual Windows partition (backing up my documents prior).
<aside><span><img src="https://www.google.com/s2/favicons?domain=https://ventoy.net" alt=""><a href="https://www.ventoy.net/en/faq.html">Ventoy is able to boot from a HDD/SSD</a></span> if you are willing to sacrifice one (temporarily) to install it on there. <aside>{{"Ventoy is able to boot from a HDD/SSD"|link:"https://www.ventoy.net/en/faq.html"}} if you are willing to sacrifice one (temporarily) to install it on there.
<b>I didn't know this</b>, and I've hardly seen anyone bring up solutions, besides off-handed suggestions about using a flash drive—and every guide basically centering around that notion, but a flash drive is <em>not necessary.</em></aside> <b>I didn't know this</b>, and I've hardly seen anyone bring up solutions, besides off-handed suggestions about using a flash drive—and every guide basically centering around that notion, but a flash drive is <em>not necessary.</em></aside>
I would <u>not recommend</u> installing <span>![](https://www.google.com/s2/favicons?domain=https://debian.org)[Debian](https://www.debian.org)</span> to anyone new to Linux whatsoever, or with the method I used. I would <u>not recommend</u> installing {{"Debian"|link:"https://www.debian.org"}} to anyone new to Linux whatsoever, or with the method I used.
<hr>
Here's a little anecdote: Here's a little anecdote:
@ -63,11 +75,11 @@ If anything, at least I got some experience with the terminal, which I thought i
Besides Debian, so far I've tried: Besides Debian, so far I've tried:
* <span>![](https://www.google.com/s2/favicons?domain=https://fedoraproject.org)[Fedora](https://fedoraproject.org)</span> * {{"Fedora"|link:"https://fedoraproject.org"}}
_(Aforementioned in a virtual machine. Overall very solid, might come around to using it again)_ _(Aforementioned in a virtual machine. Overall very solid, might come around to using it again)_
* <span>![](https://www.google.com/s2/favicons?domain=https://manjaro.org)[Manjaro](https://manjaro.org/)</span> * {{"Manjaro"|link:"https://manjaro.org/"}}
_(Tries too hard being beginner-friendly, needed to tinker to get my Nvidia GPU to work) as of v24/Wynsdey_ _(Tries too hard being beginner-friendly, needed to tinker to get my Nvidia GPU to work) as of v24/Wynsdey_
* <span>![](https://www.google.com/s2/favicons?domain=https://endeavouros.com)[EndeavourOS](https://endeavouros.com/)</span> * {{"EndeavourOS"|link:"https://endeavouros.com/"}}
_(Works out of the box with my Nvidia GPU, minimal issues)_ _(Works out of the box with my Nvidia GPU, minimal issues)_
And out of them, Endeavour has been the most comfortable experience for me, so far. And out of them, Endeavour has been the most comfortable experience for me, so far.
@ -81,29 +93,29 @@ It's personally been no cost to me with the hobbies I have, keyword: <u>personal
Here's a few programs I used before switching over, that didn't/won't have a Linux port: Here's a few programs I used before switching over, that didn't/won't have a Linux port:
* <span>![](https://www.google.com/s2/favicons?domain=https://notepad-plus-plus.org)[Notepad++](https://notepad-plus-plus.org)</span>, replaced by <span>![](https://www.google.com/s2/favicons?domain=https://vscodium.com)[VSCodium](https://vscodium.com/)</span> * {{"Notepad++"|link:"https://notepad-plus-plus.org"}}, replaced by {{"VSCodium"|link:"https://vscodium.com/"}}
* <span>![](https://www.google.com/s2/favicons?domain=https://getpaint.net)[paint.net](https://getpaint.net/)</span>, replaced by <span>![](https://www.google.com/s2/favicons?domain=https://gimp.org)[GIMP](https://www.gimp.org)</span> * {{"paint.net"|link:"https://getpaint.net/"}}, replaced by {{"GIMP"|link:"https://www.gimp.org"}}
* <span>![](https://www.google.com/s2/favicons?domain=https://foobar2000.org)[foobar2000](https://www.foobar2000.org)</span>, replaced by [DeaDBeeF](https://deadbeef.sourceforge.io/) * {{"foobar2000"|link:"https://www.foobar2000.org"}}, replaced by {{"DeaDBeeF"|link:"https://deadbeef.sourceforge.io/"}}
* <span>![](https://www.google.com/s2/favicons?domain=https://nvidia.com)[Nvidia ShadowPlay](https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/)</span>, replaced by <span>![](https://www.google.com/s2/favicons?domain=https://obsproject.com)[OBS Studio](https://obsproject.com)</span>, which I achieved by toggling "Enable Replay Buffer" in the Output settings and setting up keybinds associated. * {{"Nvidia ShadowPlay"|link:"https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/"}}, replaced by {{"OBS Studio"|link:"https://obsproject.com"}}, which I achieved by toggling "Enable Replay Buffer" in the Output settings and setting up keybinds associated.
... that being said, the programs that I do miss using from Windows are: ... that being said, the programs that I do miss using from Windows are:
* <span>![](https://www.google.com/s2/favicons?domain=https://getsharex.com)[ShareX](https://getsharex.com/)</span> * {{"ShareX"|link:"https://getsharex.com"}}
_(screenshotting utility)_ _(screenshotting utility)_
* <span>![](https://www.google.com/s2/favicons?domain=https://voidtools.com)[Everything by voidtools](https://www.voidtools.com/)</span> * {{"Everything by voidtools"|link:"https://www.voidtools.com/"}}
_(fast file search/indexer)_ _(fast file search/indexer)_
<aside>If you are curious about what kind of programs Linux offers, take a look at <span><img src="https://www.google.com/s2/favicons?domain=https://kde.org" alt=""><a href="https://apps.kde.org">KDE apps</a></span>, <span><img src="https://www.google.com/s2/favicons?domain=https://gnome.org" alt=""><a href="https://apps.gnome.org">GNOME apps</a></span> and <span><img src="https://www.google.com/s2/favicons?domain=https://flathub.org" alt=""><a href="https://flathub.org">Flathub</a></span>.</aside> <aside>If you are curious about what kind of programs Linux offers, take a look at {{"KDE apps"|link:"https://apps.kde.org"}}, {{"GNOME apps"|link:"https://apps.gnome.org"}} and {{"Flathub"|link:"https://flathub.org"}}.</aside>
ShareX is by and large the most useful tool for taking screenshots and packed with some miscellaneous multi-purpose tools inside, both [Spectacle](https://apps.kde.org/spectacle/) and [Flameshot](https://flathub.org/apps/org.flameshot.Flameshot) felt a bit lackluster in comparison. ShareX is by and large the most useful tool for taking screenshots and packed with some miscellaneous multi-purpose tools inside, both {{"Spectacle"|link:"https://invent.kde.org/plasma/spectacle"}} and {{"Flameshot"|link:"https://flameshot.org/"}} felt a bit lackluster in comparison.
Despite that, I've been using Spectacle and it's pretty good if I look past that. Despite that, I've been using Spectacle and it's pretty good if I look past that.
Everything by voidtools is just muscle memory as a result of Windows's slow search indexer. Everything by voidtools is just muscle memory as a result of Windows's slow search indexer.
[Dolphin](https://apps.kde.org/dolphin) can list any file I know the filename of way quicker than Windows ever could. {{"Dolphin"|link:"https://apps.kde.org/dolphin"}} can list any file I know the filename of way quicker than Windows ever could.
### GAMING ### GAMING
Linux can run a ton of games with [Proton](https://www.protondb.com) Linux can run a ton of games with {{"Proton"|link:"https://www.protondb.com"}}
I'm not super knowledgeable about its inner workings, so I'm not gonna try to sound like I do. I'm not super knowledgeable about its inner workings, so I'm not gonna try to sound like I do.
...yeah I don't have much to say about this at the time of writing, I've basically been shuffling 3 games whenever I do play something lately. It's not been bad so far! ...yeah I don't have much to say about this at the time of writing, I've basically been shuffling 3 games whenever I do play something lately. It's not been bad so far!

View file

@ -14,4 +14,4 @@ title: Version 0
- Tiled icon of Sunny for the inner background - Tiled icon of Sunny for the inner background
- Attribution: - Attribution:
- [Terence Eden's SuperTinyIcons GitHub repository](https://github.com/edent/SuperTinyIcons) (MIT) - {{"Terence Eden's SuperTinyIcons GitHub repository"|link:"https://github.com/edent/SuperTinyIcons"}} (MIT)

View file

@ -1,6 +1,6 @@
## {{page.fileSlug|readable}} ## {{page.fileSlug|readable}}
- Changed [Gallery](/gallery) - Changed [Gallery](/gallery)
- Implemented [CSS Grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) - Now implementing {{"CSS grid layout"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}}
- Removed Sunny's portrait from the sidebar - Removed Sunny's portrait from the sidebar
- Drafted ~~About~~ - Drafted ~~About~~

View file

@ -5,4 +5,4 @@
- Added 88x31 buttons to the footer of the page - Added 88x31 buttons to the footer of the page
- Attribution: - Attribution:
- [LaunchBox Games Database](https://gamesdb.launchbox-app.com/) Klonoa 1 & 2 box art covers - {{"LaunchBox Games Database"|link:"https://gamesdb.launchbox-app.com/"}} - Klonoa 1 & 2 box art covers

View file

@ -6,7 +6,7 @@ title: Version 3
![](/assets/img/changelog/ver3.png) ![](/assets/img/changelog/ver3.png)
Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to [semantic HTML](https://developer.mozilla.org/en-US/curriculum/core/semantic-html/). Some considerations were put into making page elements stand out more. I tried to remove redundant rules and nesting when necessary, and tried my best to conform to {{"semantic HTML"|link:"https://developer.mozilla.org/en-US/curriculum/core/semantic-html/"}}.
- Added [Changelog](/changelog)! - Added [Changelog](/changelog)!
- Merged Sidebar and topbar into a single `js` file - Merged Sidebar and topbar into a single `js` file

View file

@ -5,4 +5,4 @@
- Artworks now work (ha) with keyboard navigation - Artworks now work (ha) with keyboard navigation
- Added pride flag stickers to my ~~art notes~~ - Added pride flag stickers to my ~~art notes~~
- Attribution: - Attribution:
- [treehouse.systems Gitea pride emoji repository](https://gitea.treehouse.systems/treehouse/emoji) (CC0 1.0) - {{"treehouse.systems Gitea pride emoji repository"|link:"https://gitea.treehouse.systems/treehouse/emoji"}} (CC0 1.0)

View file

@ -14,8 +14,8 @@ title: Version 4
- Added [Blog](/blog) - Added [Blog](/blog)
- Removed ~~Favorite Pokémon~~ - Removed ~~Favorite Pokémon~~
- Moved back to ~~About~~ as randomized on-page-load sprites. It felt a bit excessive to have a whole page dedicated to something I don't think about that often - Moved back to ~~About~~ as randomized on-page-load sprites. It felt a bit excessive to have a whole page dedicated to something I don't think about that often
- Replaced all `webp` images with lossy `png` via [pngquant](https://pngquant.org/) and optimized most images with [oxipng](https://github.com/shssoichiro/oxipng) - Replaced all `webp` images with lossy `png` via {{"pngquant"|link:"https://pngquant.org/"}} and optimized most images with {{"oxipng"|link:"https://github.com/shssoichiro/oxipng"}}
- Fixed weird behaviour with the [float property](https://developer.mozilla.org/en-US/docs/Web/CSS/float) on the sidebar - Fixed weird behaviour with the {{"float property"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/float"}} on the sidebar
- Hovering over items would sometimes reset the value back to initial. Substituted it with padding on the `main` and `aside` elements - Hovering over items would sometimes reset the value back to initial. Substituted it with padding on the `main` and `aside` elements
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- Changelog is now Windows 98-themed - Changelog is now Windows 98-themed
@ -36,11 +36,11 @@ title: Version 4
- Attributions: - Attributions:
- CSS - CSS
- [Jordan Scales's 98.css GitHub repository](https://github.com/jdan/98.css) (MIT) - {{"Jordan Scales's 98.css GitHub repository"|link:"https://github.com/jdan/98.css"}} (MIT)
- Footer stickers - Footer stickers
- [Konqi thumbs up by Drakonic](https://drakonic.zone/) (CC-BY-SA) - {{"Konqi thumbs up by Drakonic"|link:"https://drakonic.zone/"}} (CC-BY-SA)
- [Rabbit emoji by Twitter (Twemoji)](https://github.com/twitter/twemoji) (CC-BY 4.0) - {{"Rabbit emoji by Twitter (Twemoji)"|link:"https://github.com/twitter/twemoji"}} (CC-BY 4.0)
- Fonts - Fonts
- [Urbanist](https://github.com/coreyhu/Urbanist) (OFL 1.1) - {{"Urbanist"|link:"https://github.com/coreyhu/Urbanist"}} (OFL 1.1)
- [Rubik](https://github.com/googlefonts/rubik) (OFL 1.1) - {{"Rubik"|link:"https://github.com/googlefonts/rubik"}} (OFL 1.1)
- [Pangolin](https://github.com/googlefonts/pangolin) (OFL 1.1) - {{"Pangolin"|link:"https://github.com/googlefonts/pangolin"}} (OFL 1.1)

View file

@ -6,7 +6,7 @@ title: Version 5
![](/assets/img/changelog/ver5.png) ![](/assets/img/changelog/ver5.png)
Re-wrote the website with [Eleventy](https://11ty.dev/). Re-wrote the website with {{"Eleventy"|link:"https://11ty.dev/"}}.
Read the [accompanying blog post](/blog/break-time/) Read the [accompanying blog post](/blog/break-time/)
- Changed image directory - Changed image directory
@ -16,7 +16,7 @@ Read the [accompanying blog post](/blog/break-time/)
- Previously, every post was under one page - Previously, every post was under one page
- An attempt at more accessible elements - An attempt at more accessible elements
- Renamed website - Renamed website
- Going forward, I'm [sunbun](https://neocities.org/site/sunbun) on here - Going forward, I'm {{"sunbun"|link:"https://neocities.org/site/sunbun"}} on here
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- Made it look a lot less bootleg-y Win98. Unfortunately the text is way smaller now - Made it look a lot less bootleg-y Win98. Unfortunately the text is way smaller now
- Removed randomized on-page-load stickers and backgrounds for the footer - Removed randomized on-page-load stickers and backgrounds for the footer

View file

@ -30,9 +30,9 @@ Read the [accompanying blog post](/blog/rewrite-2.0)
- Artworks now direct to their own page, with artist's notes - Artworks now direct to their own page, with artist's notes
- Previously, they were a direct link to the artwork - Previously, they were a direct link to the artwork
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- Fixed trailing nests and now processed using [Prettier](https://github.com/prettier/prettier) - Fixed trailing nests and now processed using {{"Prettier"|link:"https://github.com/prettier/prettier"}}
- Made to be data-driven - Made to be data-driven
- Previously, everything was written manually under one page - Previously, everything was written manually under one page
- Updated my 88x31 button [![](/assets/img/button/sunbun_d.gif "sunbun")](/) - Updated my 88x31 button [![](/assets/img/button/sunbun_d.gif "sunbun")](/)
- Attribution: - Attribution:
- [Mat's 88x31 button crawler](https://matdoes.dev/buttons) - {{"Mat's 88x31 button crawler"|link:"https://matdoes.dev/buttons"}}

View file

@ -11,4 +11,4 @@
- Animated the rabbit emoji - Animated the rabbit emoji
- Added new albums to [interests](/home#interests) - Added new albums to [interests](/home#interests)
- Attribution: - Attribution:
- [Google Noto Animated Emoji](https://googlefonts.github.io/noto-emoji-animation/) (CC-BY 4.0) - {{"Google Noto Animated Emoji"|link:"https://googlefonts.github.io/noto-emoji-animation/"}} (CC-BY 4.0)

View file

@ -11,5 +11,5 @@ Website (hopefully) fixed for Chromium-based browsers _...grr_
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- **Actually** processed with [Prettier](https://github.com/prettier/prettier), now. - **Actually** processed with [Prettier](https://github.com/prettier/prettier), now.
- Attribution: - Attribution:
- [PokéSprite GitHub repository](https://github.com/msikma/pokesprite) (MIT) - {{"PokéSprite GitHub repository"|link:"https://github.com/msikma/pokesprite"}} (MIT)
- [PokéSprite - generated spritesheet](https://github.com/msikma/pokesprite-spritesheet/) - {{"PokéSprite - generated spritesheet"|link:"https://github.com/msikma/pokesprite-spritesheet/"}}

View file

@ -7,4 +7,4 @@ Actively trying to accommodate for accessibility
- Changed [Changelog](/changelog) - Changed [Changelog](/changelog)
- Added permalinks - Added permalinks
- Attribution: - Attribution:
- [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/) - {{"WAVE Web Accessibility Evaluation Tools"|link:"https://wave.webaim.org/"}}

View file

@ -8,7 +8,7 @@ title: Version 7
Overhauled the old theme Overhauled the old theme
- Various animated page elements are now using [media queries that respect reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) - Various animated page elements are now using {{"media queries that respect reduced motion"|link:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"}}
- I can't apply them to `gifs` as much as I want to. - I can't apply them to `gifs` as much as I want to.
- Changed [Home](/home) - Changed [Home](/home)
- Changed pride flag text in my [Bio](/home#bio) to be more readable - Changed pride flag text in my [Bio](/home#bio) to be more readable
@ -25,8 +25,8 @@ Overhauled the old theme
- `header` now looks like it's part of the sidebar, again - `header` now looks like it's part of the sidebar, again
- Removed animated tiled paw background for the new theme - Removed animated tiled paw background for the new theme
- Added a new font - Added a new font
- Added very basic [OpenGraph](https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol) `properties` to the site - Added very basic {{"OpenGraph"|link:"https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol"}} `properties` to the site
- Basically, rich embeds for when you link my website on other platforms. Should make it look a bit less ugly - Basically, rich embeds for when you link my website on other platforms. Should make it look a bit less ugly
- Attribution: - Attribution:
- Font - Font
- [Nosey Rodent](https://pal-m.micenest.xyz/nro/) (CC-BY-NC, I think?) - {{"Nosey Rodent"|link:"https://pal-m.micenest.xyz/nro/"}} (CC-BY-NC, I think?)

View file

@ -0,0 +1,5 @@
## {{page.fileSlug|readable}}
- Changed [Index](/) and [Blog](/blog)
- Updated with miscellaneous disclaimers
- Implemented proper off-site links everywhere with favicons as an Eleventy filter **(FINALLY)**

View file

@ -1,9 +1,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{{site.name}}{% if title %} - {{title}}{% endif %}</title> <title>{{site.name}}{% if title %} - {{title}}{% endif %}</title>
<link rel="icon" href="/assets/img/icon/sundae.png" />
{% include "meta.njk" %} {% include "meta.njk" %}
<meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/assets/img/icon/sundae.png">
<link rel="stylesheet" href="/assets/css/reset.css" /> <link rel="stylesheet" href="/assets/css/reset.css" />
<link rel="stylesheet" href="/assets/css/default/index.css" /> <link rel="stylesheet" href="/assets/css/default/index.css" />
</head> </head>
@ -16,9 +15,7 @@
</h1> </h1>
</header> </header>
<main> <main>
<a rel="me" href="https://denden.world/@fossilisk" style="display: none" <a rel="me" href="{{site.mastodon}}" style="display: none">Mastodon</a>
>Mastodon</a
>
</main> </main>
<footer> <footer>
<p> <p>
@ -27,6 +24,7 @@
<i>*nom nom nom*</i> <i>*nom nom nom*</i>
<br /> <br />
<sub>(only used for simple interactivity)</sub> <sub>(only used for simple interactivity)</sub>
<br>Best viewed with an up-to-date browser!
</p> </p>
</footer> </footer>
</body> </body>

View file

@ -7,14 +7,18 @@ icon: "m5 3h15l7 7v20H5zm5 22h12v-3H10zm0-6h12v-3H10zm0-6h9v-3h-9z"
<ul role="list"> <ul role="list">
{% for post in collections.posts reversed %} {% for post in collections.posts reversed %}
<li> <li>
<a href="{{post.url}}"></svg>{{post.fileSlug}} <a href="{{post.url}}">
</svg>{{post.fileSlug}}
<p>published:<time datetime="{{post.data.date|ISO}}">{{post.data.date|readable}}</time></p> <p>published:<time datetime="{{post.data.date|ISO}}">{{post.data.date|readable}}</time></p>
{% if post.data.modified %} {% if post.data.modified %}
<p>last edited:<time datetime="{{post.data.modified}}">{{post.data.modified|readable}}</time></p> <p>last modified:<time datetime="{{post.data.modified}}">{{post.data.modified|readable}}</time></p>
{%endif%} {%endif%}
<p>{{post.data.description}}</p> <p>{{post.data.description}}</p>
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
<article>
<p>...I'll eventually write more stuff worth talking about on here when the motivation strikes.</p>
</article>
</ul> </ul>
</section> </section>

View file

@ -3,35 +3,30 @@ import markdownItAnchor from "markdown-it-anchor";
import { format } from "date-fns"; import { format } from "date-fns";
export default async function (eleventyConfig) { export default async function (eleventyConfig) {
const markdownItOptions = { const markdownItOptions = {
html: true html: true
}; };
const markdownItAnchorOptions = { const markdownItAnchorOptions = {
permalink: true, permalinkBefore: true, permalinkSymbol: '#' permalink: true, permalinkBefore: true, permalinkSymbol: '#'
}; };
const markdownLib = markdownIt(markdownItOptions).use( const markdownLib = markdownIt(markdownItOptions).use(
markdownItAnchor, markdownItAnchor,
markdownItAnchorOptions markdownItAnchorOptions
); );
eleventyConfig.setLibrary("md", markdownLib); eleventyConfig.setLibrary("md", markdownLib);
const assets = "./_src/assets/"; const assets = "./_src/assets/";
eleventyConfig.addPassthroughCopy(assets); eleventyConfig.addPassthroughCopy(assets);
eleventyConfig.addWatchTarget(assets); eleventyConfig.addWatchTarget(assets);
eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date))); eleventyConfig.addFilter("sortByFirstDate", items => items.sort((a, b) => new Date(b.data.images[0].date) - new Date(a.data.images[0].date)));
eleventyConfig.addFilter("link", function(text, url) {
return `<span class="link"><a href="${url}"><img src="https://www.google.com/s2/favicons?domain=${url}" alt=""/>${text}</a></span>`;
});
eleventyConfig.addFilter("ISO", (dateObj) => { eleventyConfig.addFilter("ISO", (dateObj) => {
return format(dateObj, ("yyyy-LL-dd")); return format(dateObj, ("yyyy-LL-dd"));
}); });
eleventyConfig.addFilter("readable", (dateObj) => { eleventyConfig.addFilter("readable", (dateObj) => {
return format(dateObj, ("LLLL do, yyyy")); return format(dateObj, ("LLLL do, yyyy"));
}); });
eleventyConfig.setBrowserSyncConfig({ eleventyConfig.setBrowserSyncConfig({
open: true, open: true,
}); });