view-source:aria.dog

This is not a template. This is not a "theme" or a "skin". This is not code you can use easily. This code is provided for analysis, not for reuse.

If you think re-using this code will save you effort, you are wrong: it is difficult to use in practice and will waste your time.

If my sharing this source code causes me more unpleasant than pleasant interactions, i will stop publishing it.

About this code

This is the source of my web sight, made with Astro as its static site generator.
I'm constantly tweaking it.
The live version is at https://aria.dog/ and its compiled view-source is more or less useless to analyze, hence this repo.

Being only meant as a view-source option, this is not the full canonical latest revision of my site: some posts are missing. But it's close enough for you to see how i do things and play with it at home. I aim to always keep this repo in a state you can play with it locally after a npm install.

Don't use the codebase and design directly, but make yours any useful technique you see. Use them without or with credit, but in either case, i'd like to hear from you if my code helped or inspired, or if you have a complex question about my code that shows you're eager to learn something and have done your homework.

On the other hand, i do not want to hear from you if you're expecting "support" to get this code to "work". Use a theme if you want code that "works".

Posts i wrote about astro and how i use it

• Astro for my Fan-site: Some Fun Party Tricks
• Residual Slop

Structure & design principles

Multiple independent sub-sites that all have their own style.

The Barks blog and Demon's Worlds received the most effort: Modular was made earlier and is a complete shitshow needs a fair bit of restructuring.

Layouts of sub-sites explicitly provide a bunch of components to make available to MDX files: look at the autoImport.ts files.

Bundling multiple sites in a single repo means you have only one astro.config.mjs to work with that you can't override, but you can generally work around the limitation in practice.

As a general rule, Svelte components are always used client-side, while Astro components are always pre-rendered server-side and never hydrated.
Client-side JS follows the progressive enhancement doctrine: things remain usable without JS unless they have a damn good reason to require interactivity. This is sometimes taken to the extreme: where random values are needed in pages, content is hashed to ensure reproducible builds.

Components rarely bundle their own CSS to keep them reusable across sub-sites.

Flexibility is key, so i do not adhere to rigid principles.

Death before detransition or using Tailwind.

Current homepage is just a placeholder until i make something better.

I'm culturally far from the modern javascript scene, i don't do things the way bootcamp kids do. I avoid abstractions that do not make my life easier.

If you peep the code, feel free to suggest improvements, but i might ignore them, especially if they entail new dependencies or increased complexity. This is my personal site, not a collaborative project.

I know doing things my way might fly against conventional wisdom, but having a personal hobby website without a business model already flies against conventional wisdom.

TODO-list

Find the FIXME and TODO strings in the project (best done with an editor extension to that effect) + read ./src/content/barks/internal/todo-list/index.mdx.

Excluded files

Among others, the following files present on my end are not bundled:

• Post drafts
• Big downloads in ./public/downloads/ - just get them off my site
• Big internal files (like the Blender sources of my 3D icons)
• Spicy posts i don't want some fuckboy to waste the time of git.gay peeps by demanding a takedown. View them on my site!

See ./.gitignore

You should still have everything you need to play with the code.

Spellbook

To generate cards, run these while the dev server is running:

node src/scripts/demons/generate-cards.js
node src/scripts/barks/generate-cards.js

Credits

Resources embedded in this project are credited within the published site itself, and generally within the mdx files present in the same subfolder. Let me know if you have trouble finding the credit for specific resources. Bear in mind that most images used are originals.

Fonts and graphics used in Demon's Worlds are credited on its about page (./src/content/demons/about/index.mdx).

The Barks blog embeds the variable font Amstelvar. You can play with its variable axes on v-fonts.com.

You can find the fonts used via a @fontsource npm package in ./package.json and more info about them on Google Fonts.

Contact

Send me dog gifs here: woof@aria.dog