diff --git a/content/bases.tsx b/content/bases.tsx index 9e81ea7..0a70bf2 100644 --- a/content/bases.tsx +++ b/content/bases.tsx @@ -14,7 +14,10 @@ export function BasePage(props: BaseProps) {
{props.children} diff --git a/content/ideas.txt b/content/ideas.txt new file mode 100644 index 0000000..7884e61 --- /dev/null +++ b/content/ideas.txt @@ -0,0 +1,18 @@ +- Words + - Making a website with HTML + - What you want to have + - A way to write components that can be reused in pages with an HTML like syntax. + - You need this to maintain headers, footers, widgets and consistent site wide content without going insane. + - You want it to be HTML like so that you don't have to learn another language to write and inspect your HTML. + - A way to easily render those components into HTML files that you can open with your browser to test. + - A programming language you can use to write arbitrary code to combines your HTML components with data. + - A system that watches for changes during development and shows it in the browser immediately. + - How I implemented this with Node.js and TypeScript. + - Mention React+JSX, Vue.js, and Svelte. +- Projects + - Buddhabrot renderer. + - Wodden Drawing Board. + - Flying Hornwitser papercraft. + - Prototype Soren Plush. + - Blender to CSS export script. +- Download Archive: A zip file containing every page so that you can browse the site locally and keep it. diff --git a/content/pages.tsx b/content/pages.tsx index 4b77366..53b0b83 100644 --- a/content/pages.tsx +++ b/content/pages.tsx @@ -1,12 +1,15 @@ import type { Page } from "./types.js"; import { index } from "./index.js"; import { updates, updatesIndex } from "./updates.js"; +import { words, wordsIndex } from "./words.js"; import { projects, projectsIndex } from "./projects.js"; export const pages: Page[] = [ index, updatesIndex, ...updates, + wordsIndex, + ...words, projectsIndex, ...projects, ]; diff --git a/content/projects.tsx b/content/projects.tsx index 43b12b5..6f6d009 100644 --- a/content/projects.tsx +++ b/content/projects.tsx @@ -1,33 +1,15 @@ import { BasePage } from "./bases.js"; import type { Page } from "./types.js"; +import mySite from "./projects/my-site.js"; export const projects: Page[] = [ - { - title: "Buddhabrot renderer", - ref: "/projects/buddhabrot.html", - }, - { - title: "Wooden Drawing Board", - ref: "/projects/drafting-board.html", - }, - { - title: "Flying Hornwitser Paper Craft", - ref: "/projects/paper-hornwitser.html", - }, - { - title: "Prototype Soren Plush", - ref: "/projects/plush-soren.html", - }, - { - title: "Blender to CSS export script", - ref: "/projects/blender-css.html", - }, + mySite, ].map(page => ({ title: page.title, ref: page.ref, content:

{page.title}

-

Placeholder content

+ {page.content} })); diff --git a/content/projects/my-site.tsx b/content/projects/my-site.tsx new file mode 100644 index 0000000..564c9c7 --- /dev/null +++ b/content/projects/my-site.tsx @@ -0,0 +1,50 @@ +import type { ProjectMeta } from "../types.js"; +const project: ProjectMeta = { + status: "draft", + title: "My Website", + ref: "/projects/my-site.html", + startedAt: "2025-01-20", +}; +const content = <> +

+ A decade ago I tried making my own website. I got a domain, wrote some code to generate my site, put some content on it and had big aspirations for what I would do with my very own place on the internet. Unfortunately that project lost steam more or less as soon as it started and was left abandoned gathering dust ever since. +

+

+ This is my second attempt at making a website for myself. Inspired in large part when I surfed the small web and discovered personal pages like Melvian's beautiful site, the insanity that is MelonLand, and whole communities centred around small personal pages and projects like Nekoweb, and tidleverse.org. +

+

Architecture

+

+ I've decided to use my website as a place to experiment with a hybrid architecture that sits in-between a static site generator and a fully dynamic site. Instead of having custom code generate the whole response on every request, my code instead generates the HTML and then writes it to a folder just like a static site generator would, but in response to requests from web clients. +

+

+ This has some interesting advantages: +

+ +

+ Of course, this would only work for a site who's content changes only rarely. Which is precisely what I expect the vast majority of the content on my site to be: Content that once made is rarely revised. +

+

Frameworks on a diet

+

+ I thought about options for languages and frameworks to build my site on and eventually settled on using TypeScript with JSX running on Node.js to generate static pages. I wanted my site to be as close to working with plain HTML as practical, while still being easy to compose and reuse different parts together. +

+

+ I opted to use JSX because I don't want to gouge my eyes out writing HTML with pure JavaScript notation (something I incidentally have tried to do before). To represent the HTML as data I wrote antihtml, a tiny library that only does one thing: Treat HTML as a data structure that can be serialised. +

+

+ What that means is that I write my content mostly as if it was plain HTML, but get to combine the parts that make up my site using JavaScript logic. +

+ +export default { ...project, content }; diff --git a/content/types.ts b/content/types.ts index 0ee1b88..333a403 100644 --- a/content/types.ts +++ b/content/types.ts @@ -1,7 +1,29 @@ -import { Element } from "antihtml"; +import type { Node, Element } from "antihtml"; export interface Page { title: string, ref: string, content: Element, } + +export interface ProjectMeta { + status: 'draft' | 'published', + title: string, + ref: string, + startedAt: string, + endedAt?: string, +}; + +export interface Project extends ProjectMeta { + content: Node, +}; + +export interface WordsMeta { + status: "draft" | "published", + title: string, + ref: string, +} + +export interface Words extends WordsMeta { + content: Node, +}; diff --git a/content/words.tsx b/content/words.tsx new file mode 100644 index 0000000..982530a --- /dev/null +++ b/content/words.tsx @@ -0,0 +1,29 @@ +import { BasePage } from "./bases.js"; +import type { Page } from "./types.js"; +import uselessDashboard from "./words/useless-dashboard.js"; + +export const words: Page[] = [ + uselessDashboard, +].map(page => ({ + title: page.title, + ref: page.ref, + content: +

{page.title}

+ {page.content} + +})); + + +const title = "Ramblings and other wordy content"; +export const wordsIndex: Page = { + title, + ref: "/words.html", + content: +
+

{title}

+ +
+ +} diff --git a/content/words/useless-dashboard.tsx b/content/words/useless-dashboard.tsx new file mode 100644 index 0000000..9570ed5 --- /dev/null +++ b/content/words/useless-dashboard.tsx @@ -0,0 +1,33 @@ +import type { WordsMeta } from "../types.js"; +const words: WordsMeta = { + status: "draft", + title: "Useless Dashboards", + ref: "/words/useless-dashboard.html", +}; +const content = <> +

+ I have had the misfortune of trying to work with the Google Workspace's Admin panel and it was not a pleasant experience. +

+

+ Key points + - Slow and sluggish to use, seemingly every interaction is behind extra clicks on panels that take seconds to load. + - No way to get a list of overrides for permissions. You need to click through every section of every sub-category of every app to just see if a group has different configs! + - No way to list the groups an external account is member of, you have to go wade through every group to check, or write code to do it. +

+

+ A few notable bugs: +

+ +; + +export default { ...words, content };