KANAPURO / COLOPHON

COLOPHON

credits, software, fonts, scripts, widgets, hosting, and the core principles driving the development of kanapuro.com

WHAT IS A COLOPHON?

a colophon answers three questions; how is it made, with what tools, and supporting what technologies?*

PRINCIPLES

EXPRESSION YOUR. SPACE. SHOULD. BELONG. TO. YOU. your work, identity, and history should not depend on another platform you cannot trust
FREEDOM BEING YOURSELF SHOULD BE FREEING AND NOT DANGEROUS. a personal site is a lot more comfortable than regular social media
LEGACY EVERYTHING WORTH CREATING IS WORTH DOCUMENTING. you should have complete control of who you're remembered for
ORGANIZATION ORGANIZATION IS A FORM OF SELF-CARE. it is so much easier to be creative when you have your shit under control
PERSONALIZATION BUILD FOR YOURSELF. this is a fucking canvas, bro. do whatever you want and worry about your own comfort
RESILIENCE BUILD THINGS TO LAST. at it's core, make shit simple! make sure there's something there if everything falls apart
MULTI-USE USEFUL IS NOT BORING! you are not required to stick to one use, your website can be anything!
HAVE FUN WE ARE NOT CORPORATIONS! pages can be silly, specific, decorative, and just for you!

SUMMARY

SITE: kanapuro.com is my personal site, and i use it however i please
CHUNK #1: the main portion of the site is plain HTML files in main-site/, with shared CSS and small JavaScript tidbits
CHUNK #2: Eleventy builds the "wiki" portion of the site from the wiki/ folder, holding all of my worldbuilding in one neat place
BUILD: npm run build rebuilds generated data, builds the wiki, resolves the shared header and footer, and writes output/
HOSTING: the public site is hosted through Cloudflare, and media can load from cdn.kanapuro.com

SOFTWARE

HTML: most pages are ordinary files that can be opened, read, copied, archived, and repaired without a special app
CSS: controls the shared colors, type, layout, buttons, page shells, and colophon styles
JavaScript: small scripts handle advanced tasks involving user settings, search systems, menus, and other interactive tools
Node.js / npm: runs the build scripts on my computer and allows visitors to receive static files
Eleventy: builds the wiki from Obsidian notes. the wiki package requires Node 22.x
Sass: compiles the wiki stylesheet before the combined build copies the wiki into the finished site
markdown-it: turns wiki Markdown into HTML
Eleventy RSS plugin: creates the wiki Atom feed at /wiki/feed.xml
Git: keeps track of my changes across devices and pushes said changes to Cloudflare
Cloudflare: hosts the public site and supports the CDN setup

VISUAL

Chakra Petch: interface headings and labels
Iceberg: larger display text
Google Fonts: serves Chakra Petch and Iceberg on the main site
Tabler Icons: previously included through a CDN stylesheet
Lucide: used in the wiki interface through unpkg.com

SCRIPTS

theme.js: saves a visitor's theme choice! dark is the default unless light mode was already saved
more-menu.js: opens the more menu by click and closes it on outside click or escape pressed
random-page.js: sends visitors to a random page from main-site/data/random-pages.json
generate-random-pages.js: rebuilds the random page list from eligible main-site HTML files
generate-character-index.js: reads character page metadata and writes the character browsing index
freezeframe.js: helps motion.js pause animated gifs where the browser and image format allow it
Bravenet: provides the guestbook widget (temporary)

BUILD

MAIN SITE

the build copies main-site/ into output/. pages can use comments like ; the build replaces them with files from main-site/_partials/

WIKI

Eleventy writes the wiki to wiki/dist/. the combined build rewrites root links so the wiki appears at /wiki/

CHARACTERS

character pages are plain HTML. generate-character-index.js reads their metadata and writes the browsing index

OUTPUT

output/ is what's deployed and pushed: HTML, CSS, JavaScript, images, JSON, XML, and icons

DO IT YOURSELF

HOW DID U DO IT KANAPURO?

make a folder
make an index.html
make a pretty (or ugly) style.css
write anotha page
link one page to anotha page
put it online with a static host
badda bing badda boom

RESOURCES

OK BUT ACTUALLY HOW????