feat(init): Initial dump commit

.gitignore

@@ -0,0 +1,2 @@
+pushl-cache
+

Makefile

@@ -0,0 +1,8 @@
+all: build pushl
+
+build:
+	yes | ~/zola build -o ~/public_html
+
+pushl:
+	. /home/ydreniv/venv-pushl/bin/activate ; pushl -c pushl-cache/ "https://tilde.town/~ydreniv/atom.xml"
+

README.md

@@ -0,0 +1,5 @@
+# README
+
+## External resources
+
+* [Old English](https://www.dafont.com/fr/old-london.font) by Dieter Steffmann

authors.yaml

@@ -0,0 +1,3 @@
+authors:
+  - name: Ydreniv
+    url: "https://tilde.town/~ydreniv"

config.toml

@@ -0,0 +1,18 @@
+# The URL the site will be built for
+base_url = "https://tilde.town/~ydreniv"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+generate_feed = true
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+
+[extra]
+# Put all your custom variables here

content/_index.md

@@ -0,0 +1,69 @@
++++
+title = " Welcome to my ~~~~~~~~ homepage !"
+template = "index.html"
+date = "2022-10-26"
+updated = "2022-12-14"
+extra = { "theme" = "pink-right.css" }
++++
+
+<section id="section-stuff-about-me">
+
+## Basic stuff about me
+
+* I like rocks, especially the imprints of long gone species.
+* I like metals, especially when it's black, heavy and dead.
+I have a [music blog](https://masuksa.github.io/blog/).
+* I like birds. I should put a bird picture somewhere.
+* I like doing miniature stuff.
+* I have a [blog on the subject](https://minis.kestrels-and-roses.rocks/).
+It's all in french, but I'd like to translate it eventually.
+* I like computers, but I don't like the modern web.
+* I think you can use they/them pronouns for me, but he/him or she/her would be fine too.
+* I speak french, english, a bit of german and esperanto, and I know a couple morse and japanese stuff.
+* I also have a [homepage](https://matthias4217.github.io/) that I need to update.
+* You can find the feed of
+  [Webmentions](https://en.wikipedia.org/wiki/WebMention) to this website here :
+  [Webmention.io](https://webmention.io/api/mentions.html?token=acmD8qoePApJNDAgaftB8Q)
+
+</section>
+
+<section id="section-contact">
+
+## Contact
+
+* tilde.town : ~ydreniv
+
+</section>
+
+<section id="section-tilde-town">
+
+## What to do on Tilde Town ?
+
+* I'd like to do some visual HTML/CSS experiments, starting with this website.
+* I will use a static site generator, but I don't know if I'll use Zola or something else.
+* I could host a twtxt account here.
+* RSS feeds : To use with [Feels](https://tilde.town/wiki/socializing/feels.html)
+(for quick general updates) or after setting a more serious blog.
+
+</section>
+
+<section id="section-questions">
+
+## Questions
+
+*These are some questions I ask myself.*
+*If you have answers, even partial ones, feel free to send them to me !*
+
+* *How do electric cars compare to thermic ones, taking into account all their lifespan,
+  including the construction, use and recycling.*
+  Of course, this is a complex question, requiring several parameters : which car model ?
+  how is electricity produced ? where do the resources come from ?
+  In terms of pure energy, thermic cars are much more efficient than electric cars, but
+  the electricity may be produced from renewable energy, which would make them better at
+  first glance.
+  But how much better ?
+  And what about the cost of production and disposal ?
+* *From how many people is it better to use the train instead of cars ?*
+
+</section>
+

content/blog/2022-11-02-hello-world.md

@@ -0,0 +1,124 @@
++++
+title = "Hello World"
+date = "2022-11-02"
+updated = "2022-11-02"
+[extra]
+authors = ["Ydreniv"]
++++
+
+Hello !
+This is my first blog post on this website.
+I will talk about my plans for it.
+
+## Current state of blogging
+
+Let's begin by taking a look at my current blogging situation.
+First off, I currently maintain two blogs :
+[Minis](https://minis.kestrels-and-roses.rocks), about wargaming and
+miniatures, and [I am the Fog in the Forest](https://masuksa.github.io/blog),
+a music blog.
+However, I also have a [personal website](https://matthias4217.github.io), and
+this Tilde website as well.
+I am planning to transfer my personal website from
+[Jekyll](https://jekyllrb.com/) to [Zola](https://www.getzola.org/), and I will
+probably setup a blog on it then.
+But as you can see with this post, I am also starting a Tilde blog.
+I'm worried that I'll be able to keep up with so many platforms.
+However, I'm not planning to regularly update my personal or Tilde blog.
+Concerning *Minis*, I'm trying to post a new article every week.
+I haven't been able to follow this schedule, but I've posted more than an
+article per month on average, so I'm okay with this.
+As for *I am the Fog in the Forest*, until yesterday, it had had no update for
+more than a year.
+There are still a couple of technical things to work on, and this has bothered
+me, to the pouint of not publishing anything.
+So adding to more blogs may not be the best idea ever.
+I'll see how that goes.
+
+In the future, I am still not sure what I will post on which platform.
+I know that I will try to regularly write pieces of fiction.
+I also want to talk a bit about computer stuff.
+Yet I am not sure where to put these two.
+They are well within the genre of content of [Tilde Town](https://tilde.town),
+so would fit nicely there.
+But I want to store my projects, whether technical or artistic on my own
+server, and so talking about them there would make more sense.
+Thus, my plan is to post news of my projects on my personal server.
+This would also serve as a sort of portfolio.
+On this Tilde I would mostly talk about this Tilde, and maybe some silly
+experiments, smaller pieces of things and various stuff.
+As you can see, I don't have any clear plan yet, but I'll get there.
+
+## The future of this site
+
+Given that you're reading my blog, you may already have noticed that there are
+several pages on my  Tilde site.
+None are truly finished, but I've fleshed out the basic concept.
+I want every single page to have a different style, except the blog part.
+The index is a pink page with a static right column, and a retro vibe.
+I don't know where this will lead me.
+For my Ideas page (more on this later), I want to give it the look of a
+parchment.
+The colors are there, as is the layout, but I'll need to add the texture and
+the font.
+As I want to keep it as lightweight as possible, I don't want to have a 4K
+parchment texture background image, so I don't know yet how I will do this.
+The last page I have created so far is this blog, or rather, this *newspaper*.
+This is quite simple to do, and I'd say 95% of it is done.
+
+[Lucidiot](http://tilde.town/~lucidiot/), the one who introduced the concept
+of tildes to me, maintains a list of [his
+ideas](http://tilde.town/~lucidiot/ideas).
+They are mostly the abandoned ones, given to the public, and with some
+explanations about what made him abandon them.
+I think it's neat, both on a personal scale and on a public one.
+Such a list allows to get an overview of things one has undertaken, with a
+reminder of the purpose of the project as well as the challenges.
+It also means anyone can come and potentially finish one of the ideas one day.
+I've decided I'd do an idea page as well.
+For now, it's mostly new ideas, that I haven't even started.
+This serves both as a project todo list and as a brain dump.
+Indeed, the issues with ideas is that I don't want to abandon them.
+If I don't write them down, they will just poison my mind, until I forget all
+about them.
+By giving them such a space, it should ease my mind.
+
+In a similar vein to this ideas page, I've started a question section on my
+homepage, which will eventually become a fully-fledged page.
+I will write there things I wonder, but haven't got time to do research yet.
+If anybody reads it and has some answers, or elements of them, I'd like to be
+contacted to get them !
+
+Another thing I want to work on there is feeds.
+I've been using feeds for years, and I regret that they aren't more used on
+the web.
+Too often, I find blogs, or websites posting news on a subject, and they don't
+have any kind of feeds.
+It's usually because of a lack of time by the webmaster, or a will to monetize
+content by having people come directly to the site.
+The latter is quite a bad capitalist practice in my opinion, and social media
+have made it worse.
+So I try having feeds on my weblogs.
+For now, every static-site generator I have used had this feature, so setting
+this up has been relatively painless.
+With Zola, all I needed was to add a line in the `config.toml` file :
+
+```toml
+generate_feed = true
+```
+
+But while I was at it, something came to my mind, which I immediately wrote to
+my [ideas](@/ideas.md) : between my blogs, Github, Gitlab, Wikipedia,
+Openstreetmaps and all kind of other accounts, I probably generate quite a
+number of feeds.
+I'd like to list them, and see if that tells me something.
+
+## Tilde Town
+
+I've been on Tilde Town for about a week now.
+It's a nice place, and there are lots of cyberstuff to learn and experiment
+with.
+I'm not the most outgoing person, and my time has been taken by various other
+activities, but I've still been able to mail a couple people and chat on IRC.
+So far, I'd say my presence here has been quite positive to me.
+

content/blog/2022-12-11-project-spg.md

@@ -0,0 +1,55 @@
++++
+title = "PROJECT SPG"
+date = "2022-12-11"
+updated = "2022-12-11"
+[extra]
+authors = ["Ydreniv"]
++++
+
+[`PROJECT SPG`](@/project-spg.md) is an art project I've begun a couple years
+ago, though I haven't produced a ton.
+The core concept is simple : using a lot of Gimp filters.
+Previously, when producing pictures in Gimp, I've relied on the pencil to
+create pixel-art stuff.
+As a challenge to myself, I decided to minimize my use of manual tools, and
+instead rely on Gimps filters and selection tools.
+I've still only brushed the outer edge of it.
+
+As I wanted to publish something in the 6th issue of [Tilde Town
+Zine](http://tilde.town/~zine/), and faced with very short time, I've decided
+to create a new piece for this project.
+My original plan was very different, but a busy month ensured I didn't have
+time to complete it peacefully, so I put it on standby.
+Instead, I made the (currently redacted) `TSS-001`.
+I am unfortunately under very strict orders to not divulge any information
+about it yet.
+
+However, there are still news that I can publish about this project : I've
+created a page on [Tilde.Town](https://tilde.town) to showcase the publicly
+available ones.
+Each art piece is sorted and put into precise categories.
+Moreover, they are all composed of a picture and some text.
+On my computer, they are all organized in a structured folder, with README.md
+and the like.
+However, I've decided to put it all on a single page here.
+Indeed, I want to keep my work more manageable by having a "one page equals
+one topic".
+But there was still the question on how to display here, preferably with some
+cool CSS stuff, as I'm trying to do around here.
+Given the theme of `PROJECT SPG`, I've settled on a "green on black computer"
+aesthetic.
+And what better than to having a computer *inside your computer* ?
+So I created a greyish computer, had it display an overflowing block of
+contents, and the core of my concept was done.
+I've added some shadows and reflections on the screen, to better sell the
+effect.
+I'm pleased with the end result, although the outer computer is still a work
+in progress.
+I want to add a power button and some more texture.
+But the more important thing is that you may enjoy `PROJECT SPG` immediately,
+without having to wait for me to get this page in a more ready form.
+
+In due time, `TSS-001` will join its simblings.
+And from the few information I've got, we've never been closer to said time.
+I hope to make more in the future, and not only for the Zine.
+

content/blog/2022-12-13-beginner-hcard-hentry.md

@@ -0,0 +1,163 @@
++++
+title = "A beginner h-card and h-entry usage"
+date = "2022-12-13T20:05:00Z"
+updated = "2022-12-13T20:05:00Z"
+[extra]
+authors = ["Ydreniv"]
++++
+
+I've just got started on discovering what [Indieweb](https://indieweb.org/) is.
+I've been making static sites for years now, and I've always been interested
+in "small-scale web".
+Thus, it was only natural that I got into IndieWeb.
+I won't go into too much details about this initiative.
+I'm still only a beginner, and you will have more accurate information looking
+at their website.
+But it's basically a set of tools and practices to build a decentralized
+version of the web, far from the big social media.
+The specificity, compared to what one could simply do with a classic static
+sites, is adding ways to interact and understand content.
+I will cover interaction in another blog post.
+Today, I want to focus on microformats, and especially `h-card` and `h-entry`.
+
+In <a href="https://brainshit.fr/read/326" lang="fr">Une tranche de console
+dans Internet Explorer 8</a>, [lucidiot](https://tilde.town/~lucidiot) talked
+about WebSlices, and introduced for the first time the notion of [microformats](https://microformats.org) to me.
+Later on, while browsing some IndieWeb stuff, microformats appeared once
+again.
+That's why, on one chilly winter night, I began to try harness this mysterious
+knowledge.
+However I didn't know where to really start.
+I first read the [IndieWeb Getting Started](https://indieweb.org/Getting_Started), then tried [Indie Webify](https://indiewebify.me).
+The latter is a linear and interactive introduction.
+The sequential steps are great at progressively introducing new notions.
+With the help of the [IndieWeb wiki](https://indieweb.org/) and the
+[Microformats wiki](https://microformats.org/wiki/Main_Page), I've been able to
+get going.
+
+## h-card
+
+So I've started implementing `h-card` on this website.
+This is a static site, generated using [Zola](https://www.getzola.org/).
+I won't teach you all about Zola.
+Basically, you can right Markdown content, which will then be formatted using
+templated HTML.
+While I use a different template for each page, they all use a `base.html`
+template, to put in the basic structure (`head` block for instance).
+Thus, I simply included a `include/h-card.html` in this base template.
+The `h-card` template is fairly simple :
+
+```html
+<div class="h-card hidden">
+  <span class="p-name">Ydreniv</span>
+  <span class="p-nickname">masuksa, Ombre</span>
+  <a class="u-url" rel="me" href="https://tilde.town/~ydreniv">Homepage</a>
+  <a class="u-url" rel="me" href="https://minis.kestrels-and-roses.rocks">Minis Blog</a>
+  <a class="u-url" rel="me" href="https://masuksa.github.io/blog">I Am The Fog In The Forest</a>
+  <a href="{{ config.base_url }}/mg-key.asc"  rel="pgpkey authn">PGP Key</a>
+  <time class="dt-bday">2022-10-26</time>
+</div>
+```
+
+The `hidden` class just means there is a `display: none` associated with the
+block in my CSS file.
+It's not necessary, and some people show these informations on their website,
+but I felt they were mostly redundant.
+
+As for the `h-card` itself, it is simply added with a `h-card` class on a
+block.
+Then, classes are added to various elements in the block to specify the
+`h-card` attributes.
+A full list of attributes can be found in the
+[documentation](https://microformats.org/wiki/h-card).
+Here, I have a `p-name` to list my name, and nicknames in `p-nickname`.
+I've put some urls to my websites.
+The fact that they are urls useful to the `hCard` is shown with the class
+`u-url`.
+And since these various links represent sites of mine, I've added a
+`rel="me"`.
+This is an attribute used in authentication on the IndieWeb, and thus is quite
+important.
+I will talk a bit more about it in the Webmention article.
+I've also added a public GPG key, which can also be used in authentication.
+And lastly is my birthday here, with the appropriate class : `dt-bday`.
+
+There are many more attributes I could have used, but for various reasons,
+decided to leave out.
+The most important ones are `p-name` and `u-url` anyway.
+While this simple block doesn't seem like much, it provides the basic
+information for IndieWeb apps to use.
+Moreover, it can help you sort out your various online presences.
+
+# h-entry
+
+The second microformat I've tackled is `h-entry`
+Here, I went into my `blog.html` template.
+
+```html
+<article class="h-entry">
+  <header>
+    <h1 class="p-name">
+      <a class="u-url" href="{{ page.permalink }}">{{ page.title }}</a>
+    </h1>
+    <p><time class="dt-published">{{ page.date }}</time>, by {{ authors_macros::authors_inline(authors=page.extra.authors) }}</p>
+    {% if page.updated != page.date -%}
+    <p>This article has been edited on <time class="dt-updated">{{ page.updated }}</time>.</p>
+    {% endif %}
+  </header>
+  <section class="e-content">
+    {{ page.content | safe }}
+  </section>
+</article>
+```
+
+I'm using a macro to generate the author field. I've shown it below, but this
+simply outputs the author name as a link, with some `hCard` classes to give a
+couple information about the author.
+As I'm the only one writing articles here, this is a bit overkill, but if
+people ever publish articles on this blog, at least I'll be able to let them
+do easily.
+
+```html
+{% macro authors_inline(authors) %}
+  {% set authors_infos = load_data(path="authors.yaml") %}
+  {% for author in authors %}
+    {% for author_infos in authors_infos.authors %}
+      {% if author_infos.name == author %}
+        {% set_global author = author_infos %}
+      {% endif %}
+    {% endfor %}
+<span class="h-card u-author"><a class="u-url p-name" href="{{ author.url }}">{{ author.name }}</a></span>
+  {% endfor %}
+{% endmacro authors_inline %}
+```
+
+There are a lot more Zola templating stuff involved here.
+I believe you can however understand or ignor most of it, but wanted to include
+it if someone having a go at Zola wanted some example.
+Like the `h-card`, everything is in a `h-entry` block.
+I then use several classes for the different attributes :
+
+* `p-name` : Name of the entry, here a post title. Entries could be used for
+  other kind of contents. `p-name` is also used in other microformats,
+  including `h-product` or `h-recipe`.
+* `u-url` indicates a URL.
+* `dt-published` : Publication date
+* `dt-updated` : Last update. This will appear optionally, if the article has
+  been updated.
+* `e-content` : Body of the article.
+
+## Wrap-up
+
+On Tilde Town, you can always access the (non-compilated) sources in
+`/home/ydreniv/tilde-site`.
+Feel free to browse it if you want to know more, or if you read this in the
+far future, what changes I did bring.
+I'll be working on a Webmention article for later. It will probably be split
+in halves.
+I would talk first about the basic manual setup, then write about how one can
+automate things.
+Oh, and lastly, a disclaimer : I'm quite new to IndieWeb, so I may be mistaken
+on some things.
+Feel free to contact me if you want to inform me on the subject.
+

content/blog/_index.md

@@ -0,0 +1,10 @@
++++
+title = "Blog"
+date = "2022-11-02"
+updated = "2022-11-02"
+sort_by = "date"
+template = "blog.html"
+page_template = "blog.html"
+paginate_by = 10
+extra = { "theme" = "/~ydreniv/blog.css" }
++++

content/blog/draft-opengraph.md

@@ -0,0 +1,57 @@
++++
+draft = true
+title = "Using OpenGraph with Zola"
+[extra]
+image = "/img/blogposts/opengraph-example-2022-12-16.png"
+tags = ["web", "zola", "opengraph"]
++++
+
+## What is OpenGraph
+
+After having [tried Microformats](@/blog/2022-12-13-beginner-hcard-hentry.md), I've made a first implementation of [OpenGraph]().
+This is an initiative launched by Facebook, and widely adopted, to give some metadata about webpages.
+This allows external applications to preview the links, displaying the title, linked to the url, a description, a picture etc.
+
+![Two links to two different pages of this website]({{ config.base_url }}/img/blogposts/opengraph-example-2022-12-16.png)
+
+## How I did it with Zola
+
+```html
+{% macro opengraph(title, url, content, type="", image="") %}
+<meta property="og:title" content="{{ title }}" />
+<meta property="og:url" content="{{ url }}" />
+<meta property="og:description" content="{{ content | safe | truncate(length=144) }}" />
+{% if image %}
+<meta property="og:image" content="{{ image }}" />
+{% endif %}
+{% if type %}
+<meta property="og:type" content="{{ type }}" />
+{% endif %}
+{% endmacro %}
+```
+
+In the templates where I want it, I can then do something along the following :
+
+```html
+{% import "macros/opengraph.html" as opengraph_macros %}
+
+...
+
+{% block head_extra %}
+{{ opengraph_macros::opengraph(title=page.title, url=page.permalink, content=page.content, type="website", image=config.base_url ~ "/img/project-spg/%5BMCS-003%5D%20Window%20to%20the%20Fire.png") }}
+{% endblock %}
+```
+
+## Comparison with Microformats
+
+While OpenGraph is not meant to be the same as Microformats, they do share some similarities.
+I use them both on my blog posts, to semantically represent various metadata about those posts.
+However, while mainstream applications (Discord, Twitter, Facebook etc) support OpenGraph, they tend not to support Microformats.
+This greatly diminishes the use of it.
+
+But I prefer Microformats nonetheless.
+I feel like they are better standardized, and suit the "small-scale" web better.
+they don't require additional html elements, only some more classes.
+And Microformats are more versatile.
+There are more properties available, and one can represent several objects on a single webpage, contrary to Opengraph.
+

content/blog/draft-origin-of-ydreniv.md

@@ -0,0 +1,9 @@
++++
+draft = true
+title = "The Origin of Ydreniv"
+date = "2022-11-03"
+updated = "2022-11-03"
+[extra]
+author = "Ydreniv"
++++
+

content/blog/draft-tss-001.md

@@ -0,0 +1,37 @@
++++
+draft = true
+title = "TSS-001 - The Pearled Gates"
+[extra]
+image = "/img/project-spg/[TSS-001] The Pearled Gates.png"
+tags = ["project-spg", "art"]
++++
+
+This is part of [PROJECT SPG](@/project-spg.md).
+This particular synthetic picture has been created for [Tilde Town Zine](https://tilde.town/~zine/) n°6.
+It's my first contribution to this zine, and about the first time I've
+published anything in a collaborative thing.
+When I discovered this zine, I was pretty excited, and thought about creating
+various things.
+However, time constraints amid a busy month forced me to find a quick project.
+With that in mind, I've resurrected PROJECT SPG.
+I had started this a couple years ago, but it had remained without activity
+for about a year.
+
+I've started this serie of artworks with the goal of using as much automatic
+filters as possible in Gimp.
+My previous art experiment in Gimp had mostly been pixel-art, and I wanted
+this to change.
+I've rapidly started to classify the different pieces of art, and started
+developing a loose universe.
+
+I don't know what synthetic picture I will do next, and when that will happen,
+but I'll be sure to notify you.
+
+![](/~ydreniv/img/project-spg/[TSS-001]%20The%20Pearled%20Gates.png)
+
+The Pearled Gates are a B55 TSS-class SYNTHETIC PICTURE.
+The Pearled Gates are a fabled gateway to a mystical land where the sky always shines blue.
+Strange cybercreatures dwell there, including standing manatees.
+They use their hypnotizing shroud-daemons to catch weakly-protected programs.
+Then they use the entropy of their preys to feed their favourite food : the rare iridescent netmoss.
+

content/buttons.md

@@ -0,0 +1,15 @@
++++
+title = "Buttons !"
+template = "buttons.html"
+date = "2022-11-02"
+updated = "2022-12-13"
++++
+
+Buttons with a <span class="me">yellow outline</span> are one I made myself.
+I should properly license them, but basically, you're free to use and modify
+them.
+
+You can find other buttons on the websites below :
+* [Web Badges World](https://web.badges.world/)
+* [Sh2.us web buttons](https://sh2.us/buttons/)
+

content/ideas.md

@@ -0,0 +1,112 @@
++++
+title = "Ideas"
+template = "ideas.html"
+date = "2022-11-01"
+updated = "2022-12-13"
+extra = { "theme" = "ideas.css" }
++++
+
+<section>
+
+## Computer stuff
+
+### Web
+
+* A page to gather all my personal feeds. I've already got a couple blogs,
+  plus my Shaarli, and I could add Gitlab or social media feeds.
+  I'm not sure such a list would be truly useful, but it would be nice to have
+  it, as I currently lack such an overview.
+* Take a look at [IndieWeb](https://indieweb.org/)
+* Learn more about [Microformats](https://indieweb.org/microformats)
+  ([Microformats](https://microformats.org/wiki/microformats2))
+  * `h-card` and `h-entry` have been implemented here.
+  * To be implemented on my other static websites
+* Learn about [Micropub](https://indieweb.org/Micropub)
+* Learn about [Webmention](https://indieweb.org/Webmention)
+  * Self-host a Webmention service :
+    * [Telegraph](https://github.com/aaronpk/Telegraph)
+    * [Webmention Receiver](https://github.com/capjamesg/webmention-receiver)
+    * [Webmention.io](https://webmention.io/)
+  * Alternatively, [use
+    cURL](https://indieweb.org/Webmention-developer#How_to_send_webmentions_with_cURL)
+  * Or [Pushl](https://indieweb.org/Pushl)
+  * See also [article
+    1](https://mxb.dev/blog/using-webmentions-on-static-sites/) or [article
+    2](https://gabriellazcano.com/blog/why-you-might-replace-disqus-with-webmentions/). They use Webmention.io (hosted version), which may be enough for now ?
+* A
+  [/feeds](https://marcus.io/blog/making-rss-more-visible-again-with-slash-feeds)
+  page.
+* A standard Zola development base for my websites
+* [Documentation about
+  self-hosting](https://unknown-artist-selfhost.frama.io/selfhost-wiki/)
+* A `/uses` page, explaining how this website works (Zola, IndieWeb etc)
+* A contact page, to tell people to not be afraid to contact me, and using
+  which platform.
+
+### Web design
+
+* A page using <span style="font-family: 'Comic Sans'">Comic Sans</span>.
+* A CLI-like page (green on black).
+* A page with all kinds of blinkies, 80x15 buttons and the like. I'm already
+  collecting some in the footer of this site, but I'd like a page with the
+  ones I make and the other cool I find.
+  * [Web Badges World](https://web.badges.world/) has some nice stuff.
+  * [SH2/Buttons](https://sh2.us/buttons) too
+  * Done [here](@/buttons.md)
+* Buttons for my various websites
+
+### Miscellaneous
+
+* **Ponysay files** : There are [a lot
+  of](https://framagit.org/matthias4217/custom-ponysay/-/issues/?label_name%5B%5D=New%20pony)
+  new ponies I would like to add. Unfortunatly, I haven't found the time and
+  motivation to do so in a long time.
+* **Ponysay development** : [Ponysay](https://github.com/erkin/ponysay) is not
+  dead, but not often updated either.
+  I'd like to help, but a lack of time, motivation and knowledge in the
+  codebase prevent me to do so unfortunately.
+* A shell script to get statistics about my `feels` entries :
+  * Total number of chars/words/lines
+  * Same but per months
+
+</section>
+
+<section>
+
+## Data
+
+* **Large fire numbers**
+  Last summer, I've started doing a spreadsheet of burnt area by state, using
+  mostly wikipedia as a source.
+  I wanted to get some better understanding of the scale of it, and the
+  evolution, if I kept tallying the numbers every year.
+  However, Wikipedia data is far from being complete, and it took too much of
+  my time to collect them.
+  I'd need to find some better sources, on which I could do some automation to
+  import them in Grafana or a similar thing.
+
+</section>
+
+<section>
+
+## Fiction
+
+* In a Cyberpunk world, there may be technophobic communities living outside the huge cities.
+  Although strongly opposed to the invasive technology pushed by megacorporation, they could
+  maintain a cast of techno-druids.
+  Indeed, they would need to defend themselves against said megacorporations, which would attack
+  them to get access to resources.
+  Thus having people able to fight them with more advanced technology would be very useful.
+  These druids could nevertheless be seen as pariahs, not fully integrated in the anti-technology
+  communities, despite their usefulness.
+
+</section>
+
+<section>
+
+## Miniature and Modelism
+
+* A *Munitorum Armoured Container* painted in blue, with a whale logo on it.
+  Docker reference !
+
+</section>

content/project-spg.md

@@ -0,0 +1,138 @@
++++
+title = "PROJECT SPG"
+template = "project-spg.html"
+date = "2022-12-01"
+updated = "2022-12-03"
++++
+
+<section id="gallery">
+<div id="screen">
+
+<div id="screen-content">
+
+## NAME
+
+the name SYNTH3T1C P1CTUR3 G3N3R4T0R embodies the project. manipulating the
+image signals, combining filters and other tools, a picture is made.
+
+## CLASSES
+
+* CDP : CURRENT DEVEL0PEMENT PR0JECT - unfinished projects being developed
+* ADP : ARCHIVED AND DR0PPED PR0JECT - CDP which have been discontinued
+* TSS : TRANSISTOR SEGMENT - The TSS-class contains pixel-art images, multiple
+  of 8 for each one of its dimension : 8, 16, 32, 64, 128
+* MCS : MIVRO-CONTROLLER SEGMENT - The MCS-class contains small images
+* MPS : MICRO-PROCESSOR SEGMENT - The MPS-class contains wallpaper-sized
+  images.
+* CPS : COMPUTER SEGMENT - Bigger
+* SCS : SUPER COMPUTER SEGMENT - Legendary projects, usually many pictures
+
+## SIZES
+
+* Bnm: `2^n` \* `2^m`, for `n` and `m` between 3 and 7 (bounds included)
+* SAS: STANDARD AVATAR SIZE, 120 \* 120
+* FHD: 1920 \* 1080
+* UHD-2: 7680 × 4320
+
+## PROJECTS
+
+### CDP
+
+\*\*\* DO NOT PUBLISH - SECRET LEVEL 1\*\*\*
+
+* `CDP-001` -> went on to become `MPS-001`
+* `CDP-002` -> went on to become `TSS-001`
+
+### TSS
+
+* [`TSS-001`](#tss-001) (previously `CDP-002`) - The Pearled Gates
+
+### MCS
+
+* [`MCS-001`](#mcs-001) - Fuzzy Wave
+* [`MCS-002`](#mcs-002) - Dark Glitched Sierpinski
+* [`MCS-003`](#mcs-003) - Window to the Fire
+
+### MPS
+
+* [`MPS-001`](#mps-001) (previously `CDP-001`) - Purple Depths
+* [`MPS-002`](#mps-002) - Sierpinski Whale
+* [`MPS-003`](#mps-003) - Cosmic Microwave Background Over Silica Mountains
+
+## Objects
+
+### MCS-001 - Fuzzy Wave {#mcs-001}
+
+![A noisy colourful gradient](/~ydreniv/img/project-spg/[MCS-001]%20Fuzzy%20Wave.png "[MCS-001] Fuzzy Wave")
+
+small rough project.
+it may not really count as a full-scale project, but it served as an
+inspiration.
+using no filter
+
+### MPS-001 - Purple Depths {#mps-001}
+
+![A purple on black fractal, with a lot of noise](/~ydreniv/img/project-spg/[MPS-001]%20Purple%20Depths.png "[MPS-001] Purple Depths")
+
+* Previously known as CDP-001
+
+*two touches of color, two layers, and some nice filters*
+
+The cyberverse is chaotic, and such is this representation.
+Things may seem organized from above, but once you dive into the details,
+everything is just a random patch of blinking lights.
+
+### MCS-002 - Dark Glitched Sierpinski {#mcs-002}
+
+![A purple fractal triangle on a dark green cloudy background](/~ydreniv/img/project-spg/[MCS-002]%20Dark%20Glitched%20Sierpinski.png "[MCS-002] Dark Glitched Sierpinski")
+
+MCS-002 Dark Glitch Sierpinski is a SAS MCS-class standard, take on the
+classical Sierpinski fractal.
+Adding a fourth GIMP IFS Sierpinski fractal with the lowest asymmetry
+possible, the System was able to create the glitch effects seen on the
+SYNTHETIC PICTURE.
+
+### MCS-003 - Window to the Fire {#mcs-003}
+
+![A tesselated red and purple picture](/~ydreniv/img/project-spg/[MCS-003]%20Window%20to%20the%20Fire.png "[MCS-002] Window to the Fire")
+
+Windows to the Fire is a SAS MCS-class SYNTHETIC PICTURE.
+Past the first puzzling barrier, the cybernaute can take a glance to the
+forges of the craftworlds, where the solder is always burning to produce more
+electronic components.
+
+### MPS-002 - Sierpinski Whale {#mps-002}
+
+![A whale made of triangular Sierpinski fractal, floating through space](/~ydreniv/img/project-spg/[MPS-002]%20Sierpinski%20Whale.png "[MPS-002] Sierpinski Whale")
+
+Sierpinski Whale is a FHD-sized MPS-class SYNTHETIC PICTURE.
+After stepping into the quantum sea, cybernauts are often amazed by the size,
+magnificence and tranquility of the Sierpinski Whales.
+These mathematic curiosities are only studied from an outside perspective, as
+none of the adventurers who dared go into their depths have returned, for the
+triangular pattern continue to go deeper and deeper forever.
+
+### MPS-003 - Cosmic Microwave Background Over Silica Mountains {#mps-003}
+
+![A noisy colourful gradient](/~ydreniv/img/project-spg/[MPS-003]%20Cosmic%20Microwave%20Background%20Over%20Silica%20Mountains.png "[MPS-003] Cosmic Microwave Background Over Silica Mountains")
+
+Cosmic Microwave Background Over Silica Mountains is a FHD-sized MPS-class
+SYNTHETIC PICTURE.
+Sometimes, the sky over the cyberspace is not filled with cables, myriads of
+dashing electrons or glowing hot processors.
+When it's open, the cybernauts may see a glimpse of the rest of the universe.
+Please be aware that the contrast between the depths of the void and the
+sharpness of the silica piles may put a strain on your vision.
+
+### TSS-001 - The Pearled Gates {#tss-001}
+
+```
+### REDACTED ###
+```
+
+</div>
+</div>
+<p id="brand">SUPER ELECTRIC 3900</p>
+</section>
+
+

content/test.md

@@ -0,0 +1,30 @@
++++
+title = "Test"
+author = "ydreniv"
+date = "2022-12-13"
+updated = "2022-12-13"
+template = "test.html"
++++
+
+This is a test page.
+
+## Webmention tests
+
+1. <a href="https://tilde.town/~ydreniv/ideas">Ydreniv's Ideas</a>
+2. <a href="https://tilde.town/~ydreniv/ideas/">Ydreniv's Ideas</a>
+3. This ?
+  <div class="h-entry">
+  <a href="https://tilde.town/~ydreniv/ideas/">Ydreniv's Ideas</a>
+  </div>
+
+<div class="h-entry">
+<h3 class="p-name">Testing webmention.js</h3>
+<time class="dt-published">2022-12-13</time>
+<p class="e-content">
+I've quickly setup <a href="https://github.com/PlaidWeb/webmention.js">Webmention.js</a> on the blog.
+I'm not sure it works yet, but I'm still linking
+<a href="https://tilde.town/~ydreniv/blog/hello-world/"
+class="u-in-reply-to">my Hello World</a> to try.
+
+</div>
+

sass/base.scss

@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}

sass/blog.scss

@@ -0,0 +1,133 @@
+$text-color: black;
+$background-color: white;
+$link-color: black;
+$base_url: "https://tilde.town/~ydreniv";
+
+@font-face {
+  font-family: 'Old English';
+  src: url($base_url + "/fonts/OldLondon.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  margin: 4em;
+  color: $text-color;
+  background-color: $background-color;
+  font-family: serif;
+  text-align: justify;
+}
+
+h1 {
+  margin: 0;
+}
+
+a {
+  color: $link-color;
+  font-weight: bold;
+}
+
+article {
+  padding: 1em;
+  border: 1px solid $text-color;
+
+  .last-updated {
+    margin-top: 0;
+    font-style: italic;
+  }
+
+  pre {
+    padding: 1rem;
+    overflow: auto;
+  }
+  // The line numbers already provide some kind of left/right padding
+  pre[data-linenos] {
+    padding: 1rem 0;
+  }
+  pre table td {
+    padding: 0;
+  }
+  // The line number cells
+  pre table td:nth-of-type(1) {
+    text-align: center;
+    user-select: none;
+  }
+  pre mark {
+    // If you want your highlights to take the full width.
+    display: block;
+    // The default background colour of a mark is bright yellow
+    background-color: rgba(254, 252, 232, 0.9);
+  }
+  pre table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+}
+
+header {
+  padding-bottom: 1em;
+
+  #title-date {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 2em;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 1em;
+    border-bottom: 1px solid $text-color;
+
+    .newspaper-title {
+      margin: 0;
+      font-family: "Old English", serif;
+      font-size: 4em;
+      a {
+        text-decoration: none;
+      }
+    }
+  }
+  nav {
+    width: 100%;
+    padding: .4em 0;
+    border-top: 3px double $text-color;
+    border-bottom: 1px solid $text-color;
+
+    ul {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 2em;
+      justify-content: space-between;
+
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.pagination-navigation {
+  margin: auto;
+
+  ul {
+    list-style-type: none;
+    margin: 0 auto;
+    padding: 0;
+    width: fit-content;
+  }
+
+  li {
+    display: inline-block;
+    // border: 1px solid black;
+    margin: 0;
+    padding: .2em .5em;
+  }
+}
+
+footer {
+  img {
+     filter: grayscale(100%);
+   }
+}

sass/buttons.scss

@@ -0,0 +1,98 @@
+$colour-my-shadow: rgba(224, 196, 58, 0.5);
+$accent-colour: chocolate;
+$border-colour: grey;
+$border-colour-light: silver;
+$dark-blue: midnightblue;
+
+body {
+  background-color: lavender;
+  margin: 0;
+  max-width: 100vw;
+  font-family: sans-serif;
+}
+
+.me {
+  box-shadow: 0 0 .3em .1em $colour-my-shadow;
+}
+
+a {
+  color: $accent-colour;
+}
+
+header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: lightsteelblue;
+  box-shadow: 0 -4em 5em 2em rgba(25,25,112,0.5);
+
+  h1 {
+    margin-left: 4em;
+  }
+
+  nav {
+    width: 100%;
+    max-width: 100%;
+    border-bottom: 1px solid $border-colour;
+
+    ul {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+
+      list-style-type: none;
+      border-top: 1px solid $border-colour;
+      padding: 0;
+      margin: 0;
+
+      li {
+        display: inline-block;
+        padding: 1em 2em;
+        border-left: 1px solid $border-colour;
+        //background-image: radial-gradient(rgba(0,0,0,0), rgba(0,0,0,0.03));
+        box-shadow: 0 0 1em rgba(0,0,0,0.07) inset;
+      }
+
+      li:last-child {
+        border-right: 1px solid $border-colour;
+      }
+    }
+  }
+}
+
+#main {
+  width: 100%;
+  padding-top: 10em;
+  padding-bottom: 2em;
+  background-image: linear-gradient(thistle, lavender);
+
+  p {
+    margin: 0 1em 0;
+  }
+
+  section {
+    margin: 0 1em 0;
+  }
+}
+
+footer {
+  position: relative;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  background-color: $dark-blue;
+  color: cornsilk;
+  box-shadow: 0 1em 1em 1em $dark-blue;
+  padding: .5em 1em;
+
+  p {
+    margin: 1em;
+  }
+
+  #tilde_ring {
+    border: 1px dotted $border-colour-light !important;
+    margin-bottom: 2em;
+  }
+}

sass/ideas.scss

@@ -0,0 +1,53 @@
+$text-color: #000066;
+$text-accent-color: #990000;
+$background-color: #e5d5ba;
+$base_url: "https://tilde.town/~ydreniv";
+
+@font-face {
+  font-family: 'Old English';
+  src: url($base_url + "/fonts/OldLondon.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  margin: 4em;
+  background-color: $background-color;
+  color: $text-color;
+  font-family: cursive;
+  font-size: 1.6em;
+  text-align: justify;
+}
+
+a {
+  color: $text-accent-color;
+}
+
+li {
+  list-style-type: square;
+}
+
+header {
+  border-bottom: 2px solid $text-color;
+  padding-bottom: 1em;
+
+  nav {
+    width: 100%;
+
+    ul {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 2em;
+      justify-content: space-between;
+
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      
+      li {
+        display: inline-block;
+      }
+    }
+  }
+}
+

sass/index.scss

@@ -0,0 +1,76 @@
+body {
+  margin: 0;
+  background-color: pink;
+  font-family: courier;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 20%;
+  border-left: 3px double black;
+  background-color: plum;
+}
+
+header nav {
+  margin: 1em;
+}
+
+header nav ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#main {
+  width: 80%;
+  overflow: scroll;
+}
+
+section {
+  max-width: 100%;
+  padding: 1em;
+  border-top: 3px dashed grey;
+}
+
+footer {
+  border-top: 2px solid black;
+  max-width: 100%;
+  padding: 10px;
+  margin: auto;
+}
+
+.identity-card {
+  font-size: 0.7em;
+  width: 90%;
+  margin: 1em auto;
+  background-color: #d3d3d3;
+  border: 3px double black;
+  box-shadow: .5em .5em;
+}
+
+.row {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+}
+
+.col {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+}
+
+.cell {
+  border: 1px solid grey;
+  flex-grow: 1;
+  padding: 0.2em;
+}
+
+.identity-picture {
+  width: 256px;
+}
+
+

sass/project-spg.scss

@@ -0,0 +1,102 @@
+$accent-color: greenyellow;
+$green: green;
+$grey: grey;
+$light-grey: lightgrey;
+$dark-grey: darkgrey;
+
+body {
+  width: 100vw;
+  margin: 0;
+  background-color: black;
+  color: $green;
+  font-family: monospace;
+}
+
+a {
+  color: $accent-color;
+}
+
+h1 {
+  margin: .5em auto;
+  width: fit-content;
+}
+
+header {
+  nav {
+    width: 100%;
+    max-width: 100%;
+
+    ul {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        display: inline-block;
+        padding: 1em 2em;
+      }
+    }
+  }
+}
+
+#gallery {
+  width: 90%;
+  height: 72vh;
+  background-color: $light-grey;
+  margin: auto;
+  padding: 1em;
+
+  #screen {
+    position: relative;
+    width: 90%;
+    height: calc(90% - 2em);
+    margin: auto;
+
+    #screen-content {
+      width: 100%;
+      height: 100%;
+      padding: 1em;
+      overflow: scroll;
+      background-color: #111;
+      border: 2px solid $dark-grey;
+      border-radius: 5px;
+
+      img {
+        max-width: 90%;
+        margin: auto;
+      }
+    }
+  }
+
+  // this has been done thanks to this :
+  // https://stackoverflow.com/questions/13188828/inset-box-shadow-beneath-content
+  #screen::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    padding: calc(1em + 2px); // padding + border of #screen-content
+    border-radius: 5px;
+    box-shadow: 0 0 3em 0 black inset;
+    background-image: radial-gradient(rgba(70,70,70,0.5),rgba(0,0,0,0));
+    pointer-events: none;
+  }
+
+  #brand {
+    position: relative;
+    color: dimgray;
+    margin: auto;
+    width: fit-content;
+    bottom: -3em;
+    font-weight: 900;
+    font-family: sans-serif;
+  }
+}

static/README.md

@@ -0,0 +1,8 @@
+# README.md
+
+As this directory is public, I figure some people may stumble upon it.
+So I'll try to describe it, although I cannot guarantee it will be up-to-date.
+
+For now, this is my personal website, comprising of a single index.html.
+So there isn't much to say here...
+