a fresh start

i'm really liking makko!

there's many nice features (like the live reload), and it's super tidy too!

a lot cleaner than the shell hackery i was using previously :P

thanks to alexia for recommending ^^

getting started

the quickstart is pretty handy

grabbed a binary from the releases page, then pointed it at a new dir to generate all the necessary stuffs

from there on it's customizing the templates and migrating blogposts!

styling

the previous html/css was rather dull and messy...

i tried tweaking makko's default, but some of the provided styles kept getting in the way

so in the end i made a new stylesheet and cherry-picked whatever i needed

you may still be able to spot a few holdovers like the dotted <hr>'s :P

layout

the original site design was quite mobile-oriented, in that every page was a single skinny column... it looked kinda ugly on wider screens though

so, i decided to make it more adaptive, and put that screen space to good use as a sidebar

fun fact: the blog index and blogposts share the same sidebar layout!

previously it was using two different layouts, and the duplicated-but-not-quite-mergeable css and html looked incredibly ugly

so i went to sleep and woke up with the realization that wait, for the index i could just stick the title and buttons on the side as well! then i could just use the same css for both ^^

funny how sleeping solves so many problems :P

blogpost filtering

you may have noticed that the index has a bunch of clickable buttons (these #filters!)

it's all thanks to makko's support for tagging posts! kinda...

you see, makko keeps track of which post has which tags, and helpfully groups them. this lets you generate separate post feeds for each tag, if you don't like keeping everything in the same feed

however, that doesn't allow for filtering... so how did i implement it?

css crimes :P

first i referenced this guide by solaria on js-free filtering (do check it out, the presentation and demo is pretty good ^^)

that one's single-select because it uses radio buttons, but i want multi-select so i'll use checkboxes instead

the basic idea:

• checkboxes are toggleable
• css can see if checkboxes are toggled (via :checked property)
• for each post, class it with its tags
• use css to show the respective tag classes!

/* cosmetic niceties for filter buttons */
.filters {
    label:has(> input[type=checkbox]) {
        /* hide checkbox since we can already click label */
        > input[type=checkbox] {
            display: none;
        }

        /* don't accidentally select text when clicking label button */
        user-select: none;

        /* change outline on hover */
        border: 1px solid var(--block-outline);
        &:hover {
            border: 1px solid var(--block-fill);
        }

        /* change colour when clicked */
        &:has(> input[type=checkbox]:checked) {
            background-color: var(--block-fill);
        }
    }
}

/* show all posts by default, unless a filter is enabled */
:has(input[type=checkbox]:is(:checked)) .tags {
    display: none;
}

/*
    here's the mustache templating part!
    `tags` is a list of every tag used in this blog,
    so the following would copypaste for each tag name
*/
{{#tags}} /* for each tag... */
    /* if checkbox of this tag is checked... */
    :has(#tags-{{name}}:checked) .tags-{{name}} {
        /* show all posts with this tag */
        display: revert; /* undoes the display:none earlier */
    }
{{/tags}}

<!-- group filter buttons so that we know when none of them are checked -->
<section class="filters">
    {{#tags}}  <!-- for each tag... -->
        <!-- create a button (label + checkbox with id) -->
        <label for="tags-{{name}}">
            <input type="checkbox" id="tags-{{name}}">
            <!-- name for the button -->
            #{{name}}
        </label>
    {{/tags}}
</section>

{{#posts}}  <!-- for each post... -->
    <article
        class="tags
            {{#tags}}  <!-- for each post tag... -->
                tags-{{.}}  <!-- add the tag to the post's classes -->
            {{/tags}}"
        >
        ...
    </article>
{{/posts}}

<head>
    ...

    <style type="text/css">
        ...
        {{#tags}}
        :has(#tags-{{name}}:checked) .tags-{{name}} {
            display: revert;
        }
        {{/tags}}
    </style>

    ...
</head>

<head> tags

explore random sites and steal what looks sensible :P

<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="website" property="og:type">
<meta content="noai, noimageai" name="robots">

<meta content="{{website.title}}" property="og:site_name">

{{#custom.image}}
<meta content="{{src}}" property="og:image">
<meta content="{{alt}}" property="og:image:alt">
<link href="{{src}}" rel="icon">
{{/custom.image}}

<meta name="fediverse:creator" content="{{custom.fedi}}">

<!-- specific to `templates/feed.html` -->
{{#website}}
<meta content="{{custom.author}}" name="author">
<meta content="{{description}}" name="description">

<meta content="{{url}}" property="og:url">
<meta content="{{title}}" property="og:title">
<meta content="{{description}}" property="og:description">
{{/website}}

<!-- specific to `templates/post.html` -->
{{#post}}
<meta content="{{author}}" name="author">
<meta content="{{description}}" name="description">

<meta content="{{website.url}}{{url}}" property="og:url">
<meta content="{{title}}" property="og:title">
<meta content="{{description}}" property="og:description">
{{/post}}

{
    "title": "notchoc's site!",
    "description": "ramblings and projects and stuff",
    "url": "https://notchoc.codeberg.page",
    ...
    "custom": {
        "author": "notchoc",
        "image": {
            "src": "/favicon.png",
            "alt": "a slugcat resting under the leaf of a flowering plant"
        },
        "fedi": "@notchoc@app.wafrn.net",
    },
    ...
}

buttons!

there's a lot of dedicated 88x31 sites, but i didn't have the patience to sift through em

so i went around various sites (again) to collect buttons ^^

having it all in raw html is kinda ugly though... that's why i decided to put em in the makko.json:

"buttons": [
    {
        "who": "notchoc",
        "lnk": "https://notchoc.codeberg.page",
        "img": "/buttons/notchoc.svg",
        "alt": "a teal-coloured button, with a slugcat resting under the leaf of a flowering plant, and some poorly-drawn text which boldly proclaims: notchoc's site!!",
        "ttp": "notchoc's site!! (you are here)"
    },
    {
        "who": "makkosite",
        "lnk": "https://makko.starlightnet.work",
        "img": "/buttons/makkosite.webp",
        "alt": "'makkosite' is written in a playful font on-top a pink hollow circle",
        "ttp": "built with makko :D"
    },
]

then i use this to display them:

{{#custom.buttons}} <!-- for each button... -->
<a href="{{lnk}}">  <!-- make it link to the site -->
    <img
        width="88"
        height="31"
        <!-- img path --> src="{{img}}"
        <!-- tooltip  --> {{#ttp}}title="{{.}}"{{/ttp}}
        <!-- alt text --> alt="{{who}}'s button{{#alt}}: {{.}}{{/alt}}"
        <!-- style    --> {{#style}}style="{{.}}"{{/style}}"
        />
</a>
{{/custom.buttons}}

making my site button

1. fire up libresprite
2. get creative!

the 88x31's the limit :D

putting it up!

# make repo in output dir (do not wipe it!!!)
cd web/
git init

# setup git lfs
cat << EOF > .gitattributes
buttons/** filter=lfs diff=lfs merge=lfs -text
static/** filter=lfs diff=lfs merge=lfs -text
EOF

# copy previous site config
cp ~/src/oldsite/.git/config .git/config

# force-push
git push -f

and it's done ^^