first ;3
This commit is contained in:
aggie
commit
a805fadc7a
91 changed files with 10538 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
.env
|
||||||
|
deploy-to-neocities.json
|
||||||
68
_data/site.json
Normal file
68
_data/site.json
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
{
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien.",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"author": "Agnes the Alien",
|
||||||
|
"email": "alienhospitals@gmail.com",
|
||||||
|
"social": {
|
||||||
|
|
||||||
|
"mastodon": "https://lesbian.alien.dentist/@alien"
|
||||||
|
|
||||||
|
},
|
||||||
|
"repo": {
|
||||||
|
"url": "https://treasurechest.alien.town/agnes/agnes-love",
|
||||||
|
"branch": "main"
|
||||||
|
},
|
||||||
|
"bio": {
|
||||||
|
"short": "Agnes the Alien, a writer, artist, and hobbyist computerperson.",
|
||||||
|
"long": "I'm Agnes the Alien. I write about fandom, tech, disability and mental health, alterhumanity, and pretty much anything."
|
||||||
|
},
|
||||||
|
"location": "Michigan, USA",
|
||||||
|
"timezone": "America/Detroit",
|
||||||
|
"newsletter": {
|
||||||
|
"enabled": true,
|
||||||
|
"provider": "buttondown",
|
||||||
|
"action": "https://buttondown.email/api/emails/embed-subscribe/agnesthealien",
|
||||||
|
"title": "Subscribe",
|
||||||
|
"description": "Subscribe to get new posts delivered directly to your email."
|
||||||
|
},
|
||||||
|
"donate": {
|
||||||
|
"enabled": true,
|
||||||
|
"kofi": "agnesthealien",
|
||||||
|
"message": "If you like what I do and are interested in supporting me, that'd be cool."
|
||||||
|
},
|
||||||
|
"analytics": {
|
||||||
|
"enabled": false,
|
||||||
|
"provider": "plausible",
|
||||||
|
"domain": "",
|
||||||
|
"siteId": ""
|
||||||
|
},
|
||||||
|
"webmentions": {
|
||||||
|
"enabled": true,
|
||||||
|
"domain": "agnes.love"
|
||||||
|
},
|
||||||
|
"webring": {
|
||||||
|
"enabled": false,
|
||||||
|
"url": "https://indieweb.org/webring"
|
||||||
|
},
|
||||||
|
"lighthouse": {
|
||||||
|
"enabled": false,
|
||||||
|
"url": "https://pagespeed.web.dev/"
|
||||||
|
},
|
||||||
|
"indieweb": {
|
||||||
|
"h_card": true,
|
||||||
|
"rel_me": true,
|
||||||
|
"microformats": true
|
||||||
|
},
|
||||||
|
"sections": {
|
||||||
|
"notes": { "enabled": false, "title": "Notes", "path": "/notes/" },
|
||||||
|
"journal": { "enabled": false, "title": "Journal", "path": "/journal/" },
|
||||||
|
"poetry": { "enabled": true, "title": "Poetry and Writing", "path": "/poetry/" },
|
||||||
|
"portfolio": { "enabled": false, "title": "Portfolio", "path": "/portfolio/" },
|
||||||
|
"projects": { "enabled": true, "title": "Projects", "path": "/projects/" },
|
||||||
|
"resume": { "enabled": false, "title": "Résumé", "path": "/resume/" },
|
||||||
|
"type": { "enabled": false, "title": "Type", "path": "/type/" },
|
||||||
|
"links": { "enabled": true, "title": "Links", "path": "/links/" },
|
||||||
|
"bookshelf": { "enabled": false, "title": "Bookshelf", "path": "/bookshelf/" }
|
||||||
|
}
|
||||||
|
}
|
||||||
22
_data/tagColors.json
Normal file
22
_data/tagColors.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"intro": "#3b82f6",
|
||||||
|
"meta": "#8b5cf6",
|
||||||
|
"javascript": "#f59e0b",
|
||||||
|
"css": "#06b6d4",
|
||||||
|
"html": "#ef4444",
|
||||||
|
"eleventy": "#10b981",
|
||||||
|
"tailwind": "#06b6d4",
|
||||||
|
"tutorial": "#f97316",
|
||||||
|
"guide": "#84cc16",
|
||||||
|
"tips": "#eab308",
|
||||||
|
"review": "#6366f1",
|
||||||
|
"opinion": "#ec4899",
|
||||||
|
"personal": "#14b8a6",
|
||||||
|
"tech": "#6b7280",
|
||||||
|
"web": "#3b82f6",
|
||||||
|
"design": "#8b5cf6",
|
||||||
|
"accessibility": "#10b981",
|
||||||
|
"performance": "#f59e0b",
|
||||||
|
"seo": "#ef4444",
|
||||||
|
"indieweb": "#06b6d4"
|
||||||
|
}
|
||||||
345
_includes/layouts/base.njk
Normal file
345
_includes/layouts/base.njk
Normal file
|
|
@ -0,0 +1,345 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
{% if title %}
|
||||||
|
<title>{{ title }} — {{ site.name }}</title>
|
||||||
|
{% else %}
|
||||||
|
<title>{{ site.name }}</title>
|
||||||
|
{% endif %}
|
||||||
|
<meta name="description" content="{{ description or site.description }}" />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
{# Canonical URL #}
|
||||||
|
{% if site.url %}
|
||||||
|
<link rel="canonical" href="{{ site.url }}{{ page.url or '/' }}" />
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Open Graph (Facebook, LinkedIn, etc.) #}
|
||||||
|
{% set ogTitle = title or site.name %}
|
||||||
|
{% set ogDescription = description or site.description %}
|
||||||
|
{% set ogUrl = (site.url and (site.url + (page.url or '/'))) or '' %}
|
||||||
|
{# Resolve image: allow per-page front matter `image` or default to /screenshot.png #}
|
||||||
|
{% set rawImage = image or '/screenshot.png' %}
|
||||||
|
{% if site.url %}
|
||||||
|
{% if rawImage | slice(0,4) == 'http' %}
|
||||||
|
{% set ogImage = rawImage %}
|
||||||
|
{% elseif rawImage | slice(0,1) == '/' %}
|
||||||
|
{% set ogImage = site.url + rawImage %}
|
||||||
|
{% else %}
|
||||||
|
{% set ogImage = site.url + '/' + rawImage %}
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
{% set ogImage = rawImage %}
|
||||||
|
{% endif %}
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="{{ site.name }}" />
|
||||||
|
{% if ogUrl %}<meta property="og:url" content="{{ ogUrl }}" />{% endif %}
|
||||||
|
<meta property="og:title" content="{{ ogTitle }}" />
|
||||||
|
<meta property="og:description" content="{{ ogDescription }}" />
|
||||||
|
<meta property="og:image" content="{{ ogImage }}" />
|
||||||
|
<meta property="og:image:alt" content="{{ site.name }} preview" />
|
||||||
|
|
||||||
|
{# Twitter Card #}
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
{% if site.social and site.social.twitter %}
|
||||||
|
<meta name="twitter:site" content="{{ site.social.twitter }}" />
|
||||||
|
<meta name="twitter:creator" content="{{ site.social.twitter }}" />
|
||||||
|
{% endif %}
|
||||||
|
<meta name="twitter:title" content="{{ ogTitle }}" />
|
||||||
|
<meta name="twitter:description" content="{{ ogDescription }}" />
|
||||||
|
<meta name="twitter:image" content="{{ ogImage }}" />
|
||||||
|
<meta name="twitter:image:alt" content="{{ site.name }} preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/{{ site.url | replace('https://', '') | replace('http://', '') }}/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/{{ site.url | replace('https://', '') | replace('http://', '') }}/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="{{ site.name }} Feed" href="/feed.xml" />
|
||||||
|
{# Favicon and theme color #}
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
{# Syntax highlighting via Highlight.js CDN - vivid color scheme #}
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
{% include "partials/analytics.njk" %}
|
||||||
|
|
||||||
|
{# SEO: Structured Data (JSON-LD) #}
|
||||||
|
{% if site.url %}
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "{{ site.url }}",
|
||||||
|
"name": "{{ site.name }}",
|
||||||
|
"description": "{{ site.description }}"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "{{ site.author }}",
|
||||||
|
"url": "{{ site.url }}",
|
||||||
|
"sameAs": [
|
||||||
|
{% set sameAs = [] %}
|
||||||
|
{% if site.social and site.social.github %}
|
||||||
|
{% set sameAs = sameAs.concat(['https://github.com/' + site.social.github]) %}
|
||||||
|
{% endif %}
|
||||||
|
{% if site.social and site.social.twitter %}
|
||||||
|
{% set sameAs = sameAs.concat(['https://twitter.com/' + (site.social.twitter | replace('@',''))]) %}
|
||||||
|
{% endif %}
|
||||||
|
{% for link in sameAs %}
|
||||||
|
"{{ link }}"{% if not loop.last %},{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{# Breadcrumbs: Home > Current #}
|
||||||
|
{% set isHome = (page.url or '/') == '/' %}
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "{{ site.url }}"
|
||||||
|
}{% if not isHome %},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "{{ title or site.name }}",
|
||||||
|
"item": "{{ site.url }}{{ page.url or '/' }}"
|
||||||
|
}
|
||||||
|
{% endif %}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{# BlogPosting for content pages (#blog, #notes, #poetry, #journal) #}
|
||||||
|
{% set url = page.url or '/' %}
|
||||||
|
{% set isPostLike = (url | slice(0,6) == '/blog/' ) or (url | slice(0,7) == '/notes/' ) or (url | slice(0,8) == '/poetry/' ) or (url | slice(0,9) == '/journal/' ) %}
|
||||||
|
{% if isPostLike %}
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BlogPosting",
|
||||||
|
"mainEntityOfPage": {
|
||||||
|
"@type": "WebPage",
|
||||||
|
"@id": "{{ (site.url and (site.url + (page.url or '/'))) or '' }}"
|
||||||
|
},
|
||||||
|
"headline": "{{ title or site.name }}",
|
||||||
|
{% if ogImage %}"image": ["{{ ogImage }}"],{% endif %}
|
||||||
|
"datePublished": "{{ page.date }}",
|
||||||
|
"dateModified": "{{ page.date }}",
|
||||||
|
"author": {
|
||||||
|
"@type": "Person",
|
||||||
|
"name": "{{ author or site.author }}"
|
||||||
|
},
|
||||||
|
"publisher": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "{{ site.name }}"
|
||||||
|
},
|
||||||
|
"description": "{{ description or site.description }}"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">{{ site.name }}</a>
|
||||||
|
|
||||||
|
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
{% set url = page.url or '/' %}
|
||||||
|
{% set isHome = url == '/' %}
|
||||||
|
{% set isBlog = (url and (url | slice(0, 6) == '/blog/')) %}
|
||||||
|
{% set isAbout = url == '/about/' %}
|
||||||
|
{% set isUses = url == '/uses/' %}
|
||||||
|
{% set isNow = url == '/now/' %}
|
||||||
|
{% set isContact = url == '/contact/' %}
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isHome %}underline font-semibold{% endif %}"
|
||||||
|
{% if isHome %}aria-current="page"{% endif %}>🛸 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isBlog %}underline font-semibold{% endif %}"
|
||||||
|
{% if isBlog %}aria-current="page"{% endif %}>🛸 Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isAbout %}underline font-semibold{% endif %}"
|
||||||
|
{% if isAbout %}aria-current="page"{% endif %}>🛸 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isUses %}underline font-semibold{% endif %}"
|
||||||
|
{% if isUses %}aria-current="page"{% endif %}>🛸 Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isNow %}underline font-semibold{% endif %}"
|
||||||
|
{% if isNow %}aria-current="page"{% endif %}>🛸 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 {% if isContact %}underline font-semibold{% endif %}"
|
||||||
|
{% if isContact %}aria-current="page"{% endif %}>🛸 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div rols="marquee" aria-label="Scrolling message" class="overflow-hidden whitespace-nowrap py-2">
|
||||||
|
<div class="inline-block animate-[marquee_18s_linear_infinite]">
|
||||||
|
updates: june 24, '26: site established (for real this time)</div>
|
||||||
|
</div></div> </nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
{{ content | safe }}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
{% set cleanedPath = (page.inputPath or '') | replace('./', '') %}
|
||||||
|
{% if site.repo and site.repo.url %}
|
||||||
|
{% set editUrl = site.repo.url + '/edit/' + (site.repo.branch or 'main') + '/' + cleanedPath %}
|
||||||
|
{% set guideUrl = site.repo.url + '/blob/' + (site.repo.branch or 'main') + '/GUIDE.md' %}
|
||||||
|
{% else %}
|
||||||
|
{% set editUrl = '#' %}
|
||||||
|
{% set guideUrl = '#' %}
|
||||||
|
{% endif %}
|
||||||
|
</ul><a href="https://treasurechest.alien.town/agnes/agnes-love"><img src="https://img.shields.io/badge/forgejo-%23FB923C.svg?style=for-the-badge&logo=forgejo&logoColor=white" alt="forgejo badge" title="forgejo badge"></a><img src="https://pride-badges.pony.workers.dev/static/v1?label=lesbian&labelColor=%23555&stripeWidth=6&stripeColors=D52D00%2CEF7627%2CFF9A56%2CFFFFFF%2CD162A4%2CB55690%2CA30262" alt="lesbian badge" title="lesbian badge"><img src="https://img.shields.io/badge/Fictosexual-loving%20fictional%20characters%20since%202001-ffffff?style=flat&color=ff87b6" alt="fictosexual badge" title=
|
||||||
|
fictosexual badge">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
{% from "partials/icons.njk" import icon %}
|
||||||
|
{% if site.webring and site.webring.enabled %}
|
||||||
|
<li><a href="{{ site.webring.url }}" target="_blank" rel="noopener" class="hover:text-blue-600">Indie Webring</a></li>
|
||||||
|
{% endif %}
|
||||||
|
<li>
|
||||||
|
<a href="mailto:{{ site.email }}" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
{{ icon('mail', 'w-4 h-4') }} <span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% if site.social.github %}
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/{{ site.social.github }}" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
{{ icon('github', 'w-4 h-4') }} <span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.social.mastodon %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ site.social.mastodon | replace('@', 'https://') | replace('@', '/') }}" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
{{ icon('mastodon', 'w-4 h-4') }} <span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.social.twitter %}
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/{{ site.social.twitter | replace('@','') }}" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
{{ icon('x', 'w-4 h-4') }} <span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 {{ site.name }} •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
_includes/layouts/journal.njk
Normal file
27
_includes/layouts/journal.njk
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
---
|
||||||
|
<a href="/journal/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-3">← Back to Journal</a>
|
||||||
|
|
||||||
|
<nav class="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
|
||||||
|
<ol class="flex space-x-2">
|
||||||
|
<li><a href="/" class="hover:text-blue-600">Home</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li><a href="/journal/" class="hover:text-blue-600">Journal</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li class="text-gray-900 dark:text-gray-100">{{ title }}</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="h-entry">
|
||||||
|
<header class="mb-4">
|
||||||
|
<h1 class="p-name text-2xl font-bold mb-2">{{ title }}</h1>
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<time class="dt-published" datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
|
||||||
|
<a class="u-url hidden" href="{{ page.url }}">Permalink</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="e-content prose max-w-none">
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
27
_includes/layouts/note.njk
Normal file
27
_includes/layouts/note.njk
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
---
|
||||||
|
<a href="/notes/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-3">← Back to Notes</a>
|
||||||
|
|
||||||
|
<nav class="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
|
||||||
|
<ol class="flex space-x-2">
|
||||||
|
<li><a href="/" class="hover:text-blue-600">Home</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li><a href="/notes/" class="hover:text-blue-600">Notes</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li class="text-gray-900 dark:text-gray-100">{{ title }}</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="h-entry">
|
||||||
|
<header class="mb-4">
|
||||||
|
<h1 class="p-name text-2xl font-bold mb-2">{{ title }}</h1>
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<time class="dt-published" datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
|
||||||
|
<a class="u-url hidden" href="{{ page.url }}">Permalink</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="e-content prose max-w-none">
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
27
_includes/layouts/poem.njk
Normal file
27
_includes/layouts/poem.njk
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
---
|
||||||
|
<a href="/poetry/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-3">← Back to Poetry</a>
|
||||||
|
|
||||||
|
<nav class="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
|
||||||
|
<ol class="flex space-x-2">
|
||||||
|
<li><a href="/" class="hover:text-blue-600">Home</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li><a href="/poetry/" class="hover:text-blue-600">Poetry</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li class="text-gray-900 dark:text-gray-100">{{ title }}</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="h-entry">
|
||||||
|
<header class="mb-4">
|
||||||
|
<h1 class="p-name text-2xl font-bold mb-2">{{ title }}</h1>
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<time class="dt-published" datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
|
||||||
|
<a class="u-url hidden" href="{{ page.url }}">Permalink</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="e-content prose max-w-none">
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
103
_includes/layouts/post.njk
Normal file
103
_includes/layouts/post.njk
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
---
|
||||||
|
<a href="/blog/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-3">
|
||||||
|
← Back to Blog
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
|
||||||
|
<ol class="flex space-x-2">
|
||||||
|
<li><a href="/" class="hover:text-blue-600">Home</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li><a href="/blog/" class="hover:text-blue-600">Blog</a></li>
|
||||||
|
<li><span aria-hidden="true">›</span></li>
|
||||||
|
<li class="text-gray-900 dark:text-gray-100">{{ title }}</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="h-entry">
|
||||||
|
{% if featuredImage %}
|
||||||
|
<img class="u-photo w-full rounded-lg mb-6" src="{{ featuredImage }}" alt="Featured image for {{ title }}" />
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<header class="mb-6">
|
||||||
|
<h1 class="p-name text-3xl font-bold mb-2">{{ title }}</h1>
|
||||||
|
{% if subtitle %}
|
||||||
|
<p class="text-xl text-gray-600 dark:text-gray-400 mb-4">{{ subtitle }}</p>
|
||||||
|
{% endif %}
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Published on <time class="dt-published" datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
|
||||||
|
by <span class="p-author h-card"><a class="u-url p-name hover:text-blue-600" href="/about/">{{ author or site.author }}</a></span>
|
||||||
|
• <span class="reading-time">{{ content | readingTime }} min read</span>
|
||||||
|
</div>
|
||||||
|
<a class="u-url hidden" href="{{ page.url }}">Permalink</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="e-content prose max-w-none">
|
||||||
|
{{ content | safe }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if tags %}
|
||||||
|
<div class="post-tags mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Tags</h3>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{% for tag in tags %}
|
||||||
|
<a class="p-category px-3 py-1 text-sm rounded-full text-white hover:opacity-80"
|
||||||
|
style="background-color: {{ tag | tagColor }}"
|
||||||
|
href="/tags/{{ tag | slug }}/">#{{ tag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<section class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
{% include "partials/share-links.njk" %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<img class="w-16 h-16 rounded-full" src="https://file.garden/Zw17vw8ctXTQw7PV/meicon.png" alt="{{ site.author }}" />
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold text-lg">{{ site.author }}</h3>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mt-1"></p>
|
||||||
|
<div class="mt-3 flex space-x-4 text-sm">
|
||||||
|
<a href="/about/" class="text-blue-600 hover:text-blue-800">More about me</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mt-8">
|
||||||
|
{% if site.bio.long %}
|
||||||
|
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6 mb-8">
|
||||||
|
<h3 class="text-lg font-semibold mb-2">About {{ site.author }}</h3>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
{{ site.bio.long }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.newsletter.enabled %}
|
||||||
|
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6 text-center">
|
||||||
|
<h3 class="font-semibold text-lg mb-2">{{ site.newsletter.title }}</h3>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ site.newsletter.description }}</p>
|
||||||
|
<form action="{{ site.newsletter.action }}" method="post" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
||||||
|
<input type="email" name="email" placeholder="your@email.com" class="flex-1 px-4 py-2 border rounded-lg" required />
|
||||||
|
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Subscribe</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{% include "partials/related-posts.njk" %}
|
||||||
|
|
||||||
|
<section id="webmentions" class="mt-12">
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Responses</h2>
|
||||||
|
<div id="webmentions-list">
|
||||||
|
<div class="text-center py-4 text-gray-500">
|
||||||
|
<div class="animate-pulse">Loading webmentions...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
29
_includes/partials/analytics.njk
Normal file
29
_includes/partials/analytics.njk
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
{#
|
||||||
|
Analytics integration - Choose one:
|
||||||
|
1. Plausible Analytics (privacy-friendly)
|
||||||
|
2. Fathom Analytics (privacy-friendly)
|
||||||
|
3. Simple Analytics (privacy-friendly)
|
||||||
|
|
||||||
|
To enable, uncomment one of the sections below and configure in site.json
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% if site.analytics and site.analytics.enabled %}
|
||||||
|
{% if site.analytics.provider == 'plausible' %}
|
||||||
|
<!-- Plausible Analytics -->
|
||||||
|
<script defer data-domain="{{ site.analytics.domain or (site.url | replace('https://', '') | replace('http://', '')) }}" src="https://plausible.io/js/script.js"></script>
|
||||||
|
{% elif site.analytics.provider == 'fathom' %}
|
||||||
|
<!-- Fathom Analytics -->
|
||||||
|
<script src="https://cdn.usefathom.com/script.js" data-site="{{ site.analytics.siteId }}" defer></script>
|
||||||
|
{% elif site.analytics.provider == 'simple' %}
|
||||||
|
<!-- Simple Analytics -->
|
||||||
|
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
|
||||||
|
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{#
|
||||||
|
Privacy notice: Add this to your privacy policy
|
||||||
|
- We use privacy-friendly analytics that don't track personal information
|
||||||
|
- No cookies are stored
|
||||||
|
- Data is aggregated and anonymous
|
||||||
|
#}
|
||||||
|
{% endif %}
|
||||||
24
_includes/partials/icons.njk
Normal file
24
_includes/partials/icons.njk
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{% macro icon(name, class="w-4 h-4", title="") %}
|
||||||
|
{% set t = title or name %}
|
||||||
|
{% if name == 'github' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M12 .5a12 12 0 0 0-3.79 23.39c.6.11.82-.26.82-.58v-2.03c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.2.08 1.83 1.25 1.83 1.25 1.07 1.83 2.81 1.3 3.5.99.11-.78.42-1.3.76-1.6-2.67-.3-5.47-1.34-5.47-5.95 0-1.32.47-2.39 1.24-3.23-.13-.3-.54-1.52.12-3.17 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.3-1.55 3.3-1.23 3.3-1.23.66 1.65.25 2.87.12 3.17.77.84 1.24 1.91 1.24 3.23 0 4.62-2.8 5.65-5.48 5.95.43.37.81 1.1.81 2.22v3.29c0 .32.21.69.82.58A12 12 0 0 0 12 .5z"/></svg>
|
||||||
|
{% elseif name == 'mastodon' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
{% elseif name == 'linkedin' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V23h-4V8zm7.5 0h3.8v2.05h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V23h-4v-5.3c0-1.26-.02-2.88-1.76-2.88-1.77 0-2.04 1.38-2.04 2.8V23h-4V8z"/></svg>
|
||||||
|
{% elseif name == 'x' or name == 'twitter' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M18.244 2H21l-6.54 7.48L22 22h-6.9l-4.52-5.9L4.44 22H2l7.05-8.06L2 2h6.9l4.09 5.47L18.244 2Zm-2.42 18h1.89L8.27 4H6.38l9.444 16Z"/></svg>
|
||||||
|
{% elseif name == 'rss' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M6.18 17.82A2.18 2.18 0 1 1 2 17.82a2.18 2.18 0 0 1 4.18 0Zm5.46 2.18H8.73A8.73 8.73 0 0 0 0 11.27V8.36A11.64 11.64 0 0 1 11.64 20Zm6.36 0h-3.27A15.09 15.09 0 0 0 0 10.91V7.64A18.36 18.36 0 0 1 18 20Z"/></svg>
|
||||||
|
{% elseif name == 'mail' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
{% elseif name == 'link' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M10 13a5 5 0 0 1 7 7l-3 3a5 5 0 0 1-7-7l1-1"/><path d="M14 11a5 5 0 0 1-7-7l3-3a5 5 0 0 1 7 7l-1 1"/></svg>
|
||||||
|
{% elseif name == 'copy' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||||
|
{% elseif name == 'share' %}
|
||||||
|
<svg class="{{ class }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.59 13.51l6.83 3.98"/><path d="M15.41 6.51L8.59 10.49"/></svg>
|
||||||
|
{% else %}
|
||||||
|
<span class="{{ class }}" aria-hidden="true"></span>
|
||||||
|
{% endif %}
|
||||||
|
{% endmacro %}
|
||||||
47
_includes/partials/related-posts.njk
Normal file
47
_includes/partials/related-posts.njk
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
{% set relatedPosts = [] %}
|
||||||
|
{% if tags %}
|
||||||
|
{% for post in collections.posts %}
|
||||||
|
{% if post.url != page.url %}
|
||||||
|
{% set commonTags = 0 %}
|
||||||
|
{% for tag in tags %}
|
||||||
|
{% if post.data.tags and post.data.tags.includes(tag) %}
|
||||||
|
{% set commonTags = commonTags + 1 %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% if commonTags > 0 %}
|
||||||
|
{% set relatedPosts = (relatedPosts.push({post: post, score: commonTags}), relatedPosts) %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if relatedPosts.length > 0 %}
|
||||||
|
{% set sortedPosts = relatedPosts | sort(false, false, 'score') | reverse %}
|
||||||
|
<section class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 class="text-xl font-semibold mb-6">Related Posts</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
{% for item in sortedPosts | slice(0, 3) %}
|
||||||
|
{% set post = item.post %}
|
||||||
|
<article class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||||||
|
<h3 class="font-semibold mb-2">
|
||||||
|
<a href="{{ post.url }}" class="hover:text-blue-600">{{ post.data.title }}</a>
|
||||||
|
</h3>
|
||||||
|
<time class="text-sm text-gray-500" datetime="{{ post.date | htmlDateString }}">
|
||||||
|
{{ post.date | readableDate }}
|
||||||
|
</time>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
||||||
|
{{ post.data.description or (post.templateContent | striptags | truncate(100)) }}
|
||||||
|
</p>
|
||||||
|
{% if post.data.tags %}
|
||||||
|
<div class="mt-3 flex flex-wrap gap-1">
|
||||||
|
{% for tag in post.data.tags | slice(0, 2) %}
|
||||||
|
<span class="text-xs px-2 py-0.5 rounded text-white"
|
||||||
|
style="background-color: {{ tag | tagColor }}">#{{ tag }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
24
_includes/partials/share-links.njk
Normal file
24
_includes/partials/share-links.njk
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<div class="flex items-center space-x-4 text-sm">
|
||||||
|
<span class="text-gray-600 dark:text-gray-400">Share:</span>
|
||||||
|
{% from "partials/icons.njk" import icon %}
|
||||||
|
<a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ page.url }}&text={{ title | urlencode }}"
|
||||||
|
target="_blank" rel="noopener"
|
||||||
|
class="inline-flex items-center gap-1 text-blue-500 hover:text-blue-700">
|
||||||
|
{{ icon('x', 'w-4 h-4') }} <span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}{{ page.url }}"
|
||||||
|
target="_blank" rel="noopener"
|
||||||
|
class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800">
|
||||||
|
{{ icon('linkedin', 'w-4 h-4') }} <span>LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://mastodon.social/share?text={{ title | urlencode }}%20{{ site.url }}{{ page.url }}"
|
||||||
|
target="_blank" rel="noopener"
|
||||||
|
class="inline-flex items-center gap-1 text-purple-600 hover:text-purple-800">
|
||||||
|
{{ icon('mastodon', 'w-4 h-4') }} <span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
<button onclick="navigator.share ? navigator.share({title: '{{ title }}', url: '{{ site.url }}{{ page.url }}'}) : navigator.clipboard.writeText('{{ site.url }}{{ page.url }}')"
|
||||||
|
class="inline-flex items-center gap-1 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
|
||||||
|
{{ icon('copy', 'w-4 h-4') }} <span>Copy Link</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
59
_includes/partials/webmentions.njk
Normal file
59
_includes/partials/webmentions.njk
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
{% if webmentions and webmentions.length > 0 %}
|
||||||
|
<div class="space-y-4">
|
||||||
|
{% for mention in webmentions %}
|
||||||
|
<article class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
{% if mention.author.photo %}
|
||||||
|
<img src="{{ mention.author.photo }}" alt="{{ mention.author.name }}" class="w-10 h-10 rounded-full" />
|
||||||
|
{% else %}
|
||||||
|
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-medium">{{ mention.author.name | first }}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<a href="{{ mention.author.url }}" class="font-medium hover:text-blue-600" target="_blank" rel="noopener">
|
||||||
|
{{ mention.author.name }}
|
||||||
|
</a>
|
||||||
|
<span class="text-gray-500">
|
||||||
|
{% if mention['wm-property'] == 'like-of' %}
|
||||||
|
liked this
|
||||||
|
{% elif mention['wm-property'] == 'repost-of' %}
|
||||||
|
reposted this
|
||||||
|
{% elif mention['wm-property'] == 'bookmark-of' %}
|
||||||
|
bookmarked this
|
||||||
|
{% elif mention['wm-property'] == 'mention-of' %}
|
||||||
|
mentioned this
|
||||||
|
{% else %}
|
||||||
|
replied
|
||||||
|
{% endif %}
|
||||||
|
</span>
|
||||||
|
<time class="text-gray-500" datetime="{{ mention.published }}">
|
||||||
|
{{ mention.published | readableDate }}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
{% if mention.content and mention.content.text %}
|
||||||
|
<div class="mt-2 text-gray-700 dark:text-gray-300">
|
||||||
|
{{ mention.content.text | truncate(280) | safe }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="mt-2">
|
||||||
|
<a href="{{ mention.url }}" class="text-sm text-blue-600 hover:text-blue-800" target="_blank" rel="noopener">
|
||||||
|
View original
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="text-center py-8 text-gray-500">
|
||||||
|
<p>No webmentions yet. Be the first to respond!</p>
|
||||||
|
<p class="text-sm mt-2">
|
||||||
|
<a href="https://indieweb.org/Webmention" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">
|
||||||
|
Learn about webmentions
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
335
_site/about/index.html
Normal file
335
_site/about/index.html
Normal file
|
|
@ -0,0 +1,335 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>About — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/about/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/about/" />
|
||||||
|
<meta property="og:title" content="About" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="About" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "About",
|
||||||
|
"item": "https://agnes.love/about/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 underline font-semibold"
|
||||||
|
aria-current="page">👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<div class="h-card">
|
||||||
|
<img class="u-photo w-24 h-24 rounded-full" src="/assets/profile.jpg" alt="Agnes the Alien" />
|
||||||
|
<h1 class="p-name text-2xl font-bold mt-2">Agnes the Alien</h1>
|
||||||
|
<p class="p-note mt-2">Your bio goes here. Describe yourself, your interests, and what you write about.</p>
|
||||||
|
<div class="contact-info mt-2 flex flex-wrap gap-3 items-center">
|
||||||
|
|
||||||
|
<a class="u-url inline-flex items-center gap-1" href="https://agnes.love" rel="me">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M10 13a5 5 0 0 1 7 7l-3 3a5 5 0 0 1-7-7l1-1"/><path d="M14 11a5 5 0 0 1-7-7l3-3a5 5 0 0 1 7 7l-1 1"/></svg>
|
||||||
|
|
||||||
|
<span>agnes.love</span>
|
||||||
|
</a>
|
||||||
|
<a class="u-email inline-flex items-center gap-1" href="mailto:alienhospitals@gmail.com">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>alienhospitals@gmail.com</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="u-url inline-flex items-center gap-1" rel="me" href="https://alienhttps://lesbian.alien.dentist">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="p-locality mt-2">Your City</p>
|
||||||
|
<p class="p-country-name">Your Country</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/about.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
299
_site/accessibility/index.html
Normal file
299
_site/accessibility/index.html
Normal file
|
|
@ -0,0 +1,299 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Accessibility — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/accessibility/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/accessibility/" />
|
||||||
|
<meta property="og:title" content="Accessibility" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Accessibility" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Accessibility",
|
||||||
|
"item": "https://agnes.love/accessibility/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Accessibility</h1>
|
||||||
|
<p>This site aims for WCAG 2.1 AA. Use the A11y menu in the header to adjust font size, contrast, and motion preferences. Preferences are saved in your browser.</p>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/accessibility.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
311
_site/archive/index.html
Normal file
311
_site/archive/index.html
Normal file
|
|
@ -0,0 +1,311 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Archive — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/archive/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/archive/" />
|
||||||
|
<meta property="og:title" content="Archive" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Archive" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Archive",
|
||||||
|
"item": "https://agnes.love/archive/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Archive</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none mb-8">
|
||||||
|
<p>A chronological archive of all posts, organized by year and month.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">No posts found.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/archive.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
348
_site/blogroll/index.html
Normal file
348
_site/blogroll/index.html
Normal file
|
|
@ -0,0 +1,348 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Blogroll — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/blogroll/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/blogroll/" />
|
||||||
|
<meta property="og:title" content="Blogroll" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Blogroll" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Blogroll",
|
||||||
|
"item": "https://agnes.love/blogroll/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Blogroll</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<p>Here are some blogs and websites I follow and recommend. This is a curated list of quality content creators in the web development, design, and IndieWeb communities.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 space-y-8">
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Web Development</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Example Blog</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Description of the blog and why you recommend it.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Add more blogs here -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Design & UX</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Design Blog</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Great insights on design and user experience.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">IndieWeb & Personal Sites</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Personal Site</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Excellent example of IndieWeb principles in action.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||||
|
<p class="text-sm">
|
||||||
|
<strong>Want to be added?</strong> If you have a blog that fits these categories, feel free to
|
||||||
|
<a href="/contact/" class="text-blue-600 hover:text-blue-800">reach out</a> and let me know!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/blogroll.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
338
_site/bookshelf/index.html
Normal file
338
_site/bookshelf/index.html
Normal file
|
|
@ -0,0 +1,338 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Bookshelf — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/bookshelf/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/bookshelf/" />
|
||||||
|
<meta property="og:title" content="Bookshelf" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Bookshelf" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Bookshelf",
|
||||||
|
"item": "https://agnes.love/bookshelf/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Bookshelf</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A living reading list. Track what you're reading, want to read, and your notes/reviews.</p>
|
||||||
|
|
||||||
|
<section class="grid md:grid-cols-3 gap-6">
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Reading</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Designing for Accessibility</span>
|
||||||
|
<div class="text-gray-500">Notes: practical patterns for forms and focus</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">The Pragmatic Programmer</span>
|
||||||
|
<div class="text-gray-500">Notes: small steps, continuous improvement</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Finished</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Atomic Habits</span>
|
||||||
|
<div class="text-gray-500">Takeaway: environment design beats willpower</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Refactoring UI</span>
|
||||||
|
<div class="text-gray-500">Takeaway: spacing & contrast are the 80/20</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Want to Read</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li><span class="font-medium">Inclusive Components</span></li>
|
||||||
|
<li><span class="font-medium">Every Layout</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/bookshelf.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
302
_site/categories/index.html
Normal file
302
_site/categories/index.html
Normal file
|
|
@ -0,0 +1,302 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Categories — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/categories/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/categories/" />
|
||||||
|
<meta property="og:title" content="Categories" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Categories" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Categories",
|
||||||
|
"item": "https://agnes.love/categories/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Categories</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<p class="text-gray-500">No categories yet.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/categories/index.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
344
_site/contact/index.html
Normal file
344
_site/contact/index.html
Normal file
|
|
@ -0,0 +1,344 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Contact — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/contact/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/contact/" />
|
||||||
|
<meta property="og:title" content="Contact" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Contact" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Contact",
|
||||||
|
"item": "https://agnes.love/contact/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 underline font-semibold"
|
||||||
|
aria-current="page">💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Get in Touch</h1>
|
||||||
|
|
||||||
|
<p>I'd love to hear from you! Whether you have questions, feedback, or just want to say hello,
|
||||||
|
feel free to reach out through any of the channels below.</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||||||
|
<div>
|
||||||
|
<h2>Get in Touch</h2>
|
||||||
|
<ul class="space-y-3 mt-4">
|
||||||
|
<li class="flex items-center gap-3">
|
||||||
|
<span class="text-blue-600">📧</span>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" class="hover:text-blue-600">alienhospitals@gmail.com</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li class="flex items-center gap-3">
|
||||||
|
<span class="text-blue-600">🐘</span>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="noopener" class="hover:text-blue-600">Mastodon</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Quick Message</h2>
|
||||||
|
<form class="space-y-4" action="#" method="POST">
|
||||||
|
<div>
|
||||||
|
<label for="name" class="block text-sm font-medium mb-1">Name</label>
|
||||||
|
<input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="email" class="block text-sm font-medium mb-1">Email</label>
|
||||||
|
<input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="message" class="block text-sm font-medium mb-1">Message</label>
|
||||||
|
<textarea id="message" name="message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
|
||||||
|
Note: Configure with Netlify Forms or similar service for functionality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/contact.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
334
_site/donate/index.html
Normal file
334
_site/donate/index.html
Normal file
|
|
@ -0,0 +1,334 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Support My Work — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/donate/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/donate/" />
|
||||||
|
<meta property="og:title" content="Support My Work" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Support My Work" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Support My Work",
|
||||||
|
"item": "https://agnes.love/donate/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Support My Work</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
|
||||||
|
<p>If you like what I do and are interested in supporting me, that'd be cool.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>One-time Support</h2>
|
||||||
|
<p>Buy me a coffee or make a one-time contribution to help fuel my writing:</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-4 my-6">
|
||||||
|
|
||||||
|
<a href="https://ko-fi.com/agnesthealien" target="_blank" rel="noopener"
|
||||||
|
class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
|
||||||
|
☕ Ko-fi
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Other Ways to Help</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Share my posts</strong> with others who might find them valuable</li>
|
||||||
|
<li><strong>Subscribe to my newsletter</strong> to stay updated on new content</li>
|
||||||
|
<li><strong>Follow me on social media</strong> and engage with my content</li>
|
||||||
|
<li><strong>Send feedback</strong> via email or webmentions</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-8">
|
||||||
|
Every contribution, no matter how small, helps me continue creating thoughtful content
|
||||||
|
and maintaining this blog. Thank you for your support! 🙏
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/donate.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
369
_site/index.html
Normal file
369
_site/index.html
Normal file
|
|
@ -0,0 +1,369 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Indieweb Starter Blog — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/" />
|
||||||
|
<meta property="og:title" content="Indieweb Starter Blog" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Indieweb Starter Blog" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 underline font-semibold"
|
||||||
|
aria-current="page">🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<div class="h-feed">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="text-center mb-12 py-8">
|
||||||
|
<h1 class="p-name text-4xl font-bold mb-4 float-animation">Agnes the Alien</h1>
|
||||||
|
<p class="p-summary text-xl text-gray-600 dark:text-gray-400 mb-6">Personal website and blog of Agnes the Alien.</p>
|
||||||
|
<a class="u-url hidden" href="https://agnes.love/"></a>
|
||||||
|
|
||||||
|
<div class="max-w-2xl mx-auto mb-8">
|
||||||
|
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
||||||
|
Welcome to my corner of the independent web! This is where I share thoughts, discoveries, and conversations
|
||||||
|
away from the noise of social media algorithms.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 text-sm">
|
||||||
|
<span class="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 px-3 py-1 rounded-full">
|
||||||
|
🌱 IndieWeb
|
||||||
|
</span>
|
||||||
|
<span class="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 px-3 py-1 rounded-full">
|
||||||
|
📡 RSS Ready
|
||||||
|
</span>
|
||||||
|
<span class="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 px-3 py-1 rounded-full">
|
||||||
|
🔒 Privacy First
|
||||||
|
</span>
|
||||||
|
<span class="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-200 px-3 py-1 rounded-full">
|
||||||
|
♿ Accessible
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<a href="/about/" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition-colors">
|
||||||
|
👋 Learn more about me
|
||||||
|
</a>
|
||||||
|
<a href="/feed.xml" class="border border-purple-600 text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 px-6 py-2 rounded-lg transition-colors">
|
||||||
|
📡 Subscribe via RSS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Posts -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-2xl font-semibold mb-6 flex items-center gap-2">
|
||||||
|
✍️ Recent Posts
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="text-center py-12 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 text-lg mb-4">No posts yet!</p>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">This is where thoughtful writing will appear. Stay tuned! 📝</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12">
|
||||||
|
<a href="/now/" class="block p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
|
||||||
|
<div class="text-2xl mb-2">📍</div>
|
||||||
|
<h3 class="font-semibold text-blue-800 dark:text-blue-200">What I'm up to now</h3>
|
||||||
|
<p class="text-sm text-blue-600 dark:text-blue-300">Current projects and focus</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/uses/" class="block p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors">
|
||||||
|
<div class="text-2xl mb-2">🛠️</div>
|
||||||
|
<h3 class="font-semibold text-green-800 dark:text-green-200">Tools I use</h3>
|
||||||
|
<p class="text-sm text-green-600 dark:text-green-300">Hardware, software, and setup</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/sitemap/" class="block p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors">
|
||||||
|
<div class="text-2xl mb-2">🗺️</div>
|
||||||
|
<h3 class="font-semibold text-purple-800 dark:text-purple-200">Explore this site</h3>
|
||||||
|
<p class="text-sm text-purple-600 dark:text-purple-300">Complete directory of pages</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/index.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
329
_site/links/index.html
Normal file
329
_site/links/index.html
Normal file
|
|
@ -0,0 +1,329 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Links — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/links/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/links/" />
|
||||||
|
<meta property="og:title" content="Links" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Links" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Links",
|
||||||
|
"item": "https://agnes.love/links/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Links</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A curated index of sites, references, and tools. Replace these with your own favorites or wire up a bookmarks feed.</p>
|
||||||
|
|
||||||
|
<section class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Web Development</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://www.11ty.dev/">Eleventy</a> — Static site generator with a small, flexible core.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://playwright.dev/">Playwright</a> — Reliable end‑to‑end testing across browsers.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://web.dev/">web.dev</a> — Guides on performance and modern web APIs.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">IndieWeb & Publishing</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://indieweb.org/">IndieWeb Wiki</a> — Build on your own domain with open standards.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://microformats.org/">microformats</a> — Semantic markup for people and posts.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://mehdix.ir/awesome-static-generators/">Awesome Static Generators</a> — Explore SSGs.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Design & Accessibility</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://www.a11yproject.com/">The A11Y Project</a> — Practical accessibility resources.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://type-scale.com/">Type Scale</a> — Visualize typographic scales.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://colorandcontrast.com/">Color & Contrast</a> — Understand accessible color usage.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/links.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
317
_site/now/index.html
Normal file
317
_site/now/index.html
Normal file
|
|
@ -0,0 +1,317 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Now — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/now/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/now/" />
|
||||||
|
<meta property="og:title" content="Now" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Now" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Now",
|
||||||
|
"item": "https://agnes.love/now/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 underline font-semibold"
|
||||||
|
aria-current="page">📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">What I'm Doing Now</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<p>This is a <a href="https://nownownow.com/about" target="_blank" rel="noopener">/now page</a>, inspired by Derek Sivers. It's a snapshot of what I'm focused on right now.</p>
|
||||||
|
|
||||||
|
<h2>Current Focus</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Add your current projects</li>
|
||||||
|
<li>What you're learning</li>
|
||||||
|
<li>Books you're reading</li>
|
||||||
|
<li>Goals you're working toward</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Location</h2>
|
||||||
|
<p>Currently based in: <em>Your Location</em></p>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-8">
|
||||||
|
Last updated: <time datetime="2024-01-01">January 1, 2024</time>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/now.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
322
_site/portfolio/index.html
Normal file
322
_site/portfolio/index.html
Normal file
|
|
@ -0,0 +1,322 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Portfolio — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/portfolio/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/portfolio/" />
|
||||||
|
<meta property="og:title" content="Portfolio" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Portfolio" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Portfolio",
|
||||||
|
"item": "https://agnes.love/portfolio/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Portfolio</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Showcase selected work. Replace with your own projects and case studies.</p>
|
||||||
|
|
||||||
|
<section class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold">Static Blog Template</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">An Eleventy starter focused on accessibility, IndieWeb features, and reliable E2E tests.</p>
|
||||||
|
<ul class="list-disc pl-5 text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
<li>Accessible navigation and skip links</li>
|
||||||
|
<li>Open Graph/Twitter meta defaults</li>
|
||||||
|
<li>Playwright tests (responsive, a11y flows, search)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold">Design System Pages</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">A living style guide to keep typography and components consistent.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<p class="font-medium">Interested in working together?</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">Add your services and contact details here.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/portfolio.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
317
_site/projects/index.html
Normal file
317
_site/projects/index.html
Normal file
|
|
@ -0,0 +1,317 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Projects — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/projects/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/projects/" />
|
||||||
|
<meta property="og:title" content="Projects" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Projects" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Projects",
|
||||||
|
"item": "https://agnes.love/projects/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Projects</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Open-source and personal experiments. Replace with your own projects or migrate to a <code>projects</code> collection.</p>
|
||||||
|
|
||||||
|
<ul class="space-y-6">
|
||||||
|
<li class="border rounded p-4">
|
||||||
|
<h2 class="text-lg font-semibold">Eleventy Blog Starter</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">Accessible, IndieWeb-friendly, and tested with Playwright.</p>
|
||||||
|
<div class="mt-2 text-xs space-x-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-blue-600 text-white">eleventy</span>
|
||||||
|
<span class="px-2 py-0.5 rounded bg-green-600 text-white">a11y</span>
|
||||||
|
<span class="px-2 py-0.5 rounded bg-pink-600 text-white">testing</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="border rounded p-4">
|
||||||
|
<h2 class="text-lg font-semibold">Minimal Style Guide</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">A living page to document typography and components.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/projects.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
337
_site/resume/index.html
Normal file
337
_site/resume/index.html
Normal file
|
|
@ -0,0 +1,337 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Résumé — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/resume/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/resume/" />
|
||||||
|
<meta property="og:title" content="Résumé" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Résumé" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Résumé",
|
||||||
|
"item": "https://agnes.love/resume/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Résumé</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A template CV you can adapt. Replace section content with your details or link to a PDF.</p>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3 mb-8">
|
||||||
|
<a href="#" class="inline-flex items-center px-3 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-700">Download PDF</a>
|
||||||
|
<span class="text-sm text-gray-500">Add your static PDF at <code>src/assets/</code> and update this link.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="prose dark:prose-invert">
|
||||||
|
<h2>Summary</h2>
|
||||||
|
<p>Front-end oriented web developer focused on accessibility, performance, and maintainable static sites. Comfortable with modern tooling and progressive enhancement.</p>
|
||||||
|
|
||||||
|
<h2>Experience</h2>
|
||||||
|
<h3>Senior Web Developer · Company Name</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">2023 — Present</p>
|
||||||
|
<ul>
|
||||||
|
<li>Built static-first sites with Eleventy and automated deployments.</li>
|
||||||
|
<li>Established a11y testing and CI checks.</li>
|
||||||
|
<li>Collaborated with design on a living style guide.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Front-end Engineer · Organization</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">2020 — 2023</p>
|
||||||
|
<ul>
|
||||||
|
<li>Implemented component libraries with semantic HTML and utility CSS.</li>
|
||||||
|
<li>Optimized web vitals via preloading and code-splitting.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<ul>
|
||||||
|
<li>HTML, CSS (Tailwind), JavaScript</li>
|
||||||
|
<li>Eleventy, Nunjucks, Markdown</li>
|
||||||
|
<li>Accessibility, Testing (Playwright)</li>
|
||||||
|
<li>SEO, Open Graph, microformats2</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Education</h2>
|
||||||
|
<p>Degree / Program — School Name</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/resume.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
_site/search.json
Normal file
1
_site/search.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[]
|
||||||
551
_site/search/index.html
Normal file
551
_site/search/index.html
Normal file
|
|
@ -0,0 +1,551 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Search Results — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/search/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/search/" />
|
||||||
|
<meta property="og:title" content="Search Results" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Search Results" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Search Results",
|
||||||
|
"item": "https://agnes.love/search/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<h1 class="text-3xl font-bold mb-6 flex items-center gap-2">
|
||||||
|
🔍 Search Results
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Search form -->
|
||||||
|
<form class="mb-8" role="search" aria-label="Site search">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
id="search-query"
|
||||||
|
name="q"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search posts, pages, and content..."
|
||||||
|
class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors font-medium"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Search results container -->
|
||||||
|
<div id="search-results-container" class="hidden">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p id="results-count" class="text-gray-600 dark:text-gray-400"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="search-results-list" class="space-y-6">
|
||||||
|
<!-- Results will be populated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- No results message -->
|
||||||
|
<div id="no-results" class="hidden text-center py-12">
|
||||||
|
<div class="text-6xl mb-4">🔍</div>
|
||||||
|
<h2 class="text-xl font-semibold mb-2">No results found</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
Try different keywords or browse our content below.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<a href="/blog/" class="px-4 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors">
|
||||||
|
Browse All Posts
|
||||||
|
</a>
|
||||||
|
<a href="/archive/" class="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors">
|
||||||
|
View Archive
|
||||||
|
</a>
|
||||||
|
<a href="/sitemap/" class="px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors">
|
||||||
|
Site Directory
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading state -->
|
||||||
|
<div id="search-loading" class="hidden text-center py-12">
|
||||||
|
<div class="text-4xl mb-4">⏳</div>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400">Searching...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Default content when no search -->
|
||||||
|
<div id="default-content">
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<div class="text-6xl mb-4">🔍</div>
|
||||||
|
<h2 class="text-xl font-semibold mb-2">Search the site</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
Find posts, pages, and content across the entire site.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Popular content -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-purple-700 dark:text-purple-300">📝 Recent Posts</h3>
|
||||||
|
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No posts yet.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-blue-700 dark:text-blue-300">🏷️ Popular Tags</h3>
|
||||||
|
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No tags yet.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search tips -->
|
||||||
|
<div class="bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-6">
|
||||||
|
<h3 class="text-lg font-semibold mb-3">💡 Search Tips</h3>
|
||||||
|
<ul class="text-sm space-y-1 text-gray-700 dark:text-gray-300">
|
||||||
|
<li>• Use specific keywords for better results</li>
|
||||||
|
<li>• Search works across post titles, content, and tags</li>
|
||||||
|
<li>• Try different variations of your search terms</li>
|
||||||
|
<li>• Browse by tags or the archive for discovery</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Search results page functionality
|
||||||
|
(function() {
|
||||||
|
let searchIndex = null;
|
||||||
|
let flexSearch = null;
|
||||||
|
|
||||||
|
// Get query parameter from URL
|
||||||
|
function getQueryParam(param) {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
return urlParams.get(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize search on page load
|
||||||
|
async function initSearchPage() {
|
||||||
|
try {
|
||||||
|
// Load search index
|
||||||
|
const response = await fetch('/search.json');
|
||||||
|
searchIndex = await response.json();
|
||||||
|
|
||||||
|
// Initialize FlexSearch
|
||||||
|
if (typeof FlexSearch !== 'undefined') {
|
||||||
|
flexSearch = new FlexSearch.Index({
|
||||||
|
tokenize: 'forward',
|
||||||
|
cache: true,
|
||||||
|
resolution: 9
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add documents to search index
|
||||||
|
searchIndex.forEach((item, index) => {
|
||||||
|
if (item && item.title) {
|
||||||
|
const searchText = `${item.title} ${item.description || ''} ${item.content || ''} ${(item.tags || []).join(' ')}`;
|
||||||
|
flexSearch.add(index, searchText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for query parameter and perform search
|
||||||
|
const query = getQueryParam('q');
|
||||||
|
if (query) {
|
||||||
|
document.getElementById('search-query').value = query;
|
||||||
|
performSearch(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up form submission
|
||||||
|
const form = document.querySelector('form[role="search"]');
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const query = document.getElementById('search-query').value.trim();
|
||||||
|
if (query) {
|
||||||
|
// Update URL
|
||||||
|
const newUrl = new URL(window.location);
|
||||||
|
newUrl.searchParams.set('q', query);
|
||||||
|
window.history.pushState({}, '', newUrl);
|
||||||
|
|
||||||
|
performSearch(query);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search initialization failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function performSearch(query) {
|
||||||
|
if (!flexSearch || !searchIndex) return;
|
||||||
|
|
||||||
|
// Show loading
|
||||||
|
showElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
hideElement('search-results-container');
|
||||||
|
hideElement('no-results');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const results = flexSearch.search(query, { limit: 20 });
|
||||||
|
const items = results.map(index => searchIndex[index]);
|
||||||
|
|
||||||
|
displayResults(items, query);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search failed:', error);
|
||||||
|
showNoResults();
|
||||||
|
}
|
||||||
|
}, 300); // Small delay for better UX
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayResults(items, query) {
|
||||||
|
hideElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
|
||||||
|
if (items.length === 0) {
|
||||||
|
showNoResults();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show results container
|
||||||
|
showElement('search-results-container');
|
||||||
|
|
||||||
|
// Update results count
|
||||||
|
const count = document.getElementById('results-count');
|
||||||
|
count.textContent = `Found ${items.length} result${items.length === 1 ? '' : 's'} for "${query}"`;
|
||||||
|
|
||||||
|
// Display results
|
||||||
|
const container = document.getElementById('search-results-list');
|
||||||
|
container.innerHTML = items.map(item => `
|
||||||
|
<article class="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
|
||||||
|
<h2 class="text-xl font-semibold mb-2">
|
||||||
|
<a href="${item.id}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
|
||||||
|
${highlightMatch(item.title, query)}
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-3 leading-relaxed">
|
||||||
|
${highlightMatch(item.description || item.content, query)}
|
||||||
|
</p>
|
||||||
|
${item.tags && item.tags.length > 0 ? `
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
${item.tags.map(tag => `
|
||||||
|
<a href="/tags/${tag.toLowerCase().replace(/\s+/g, '-')}/" class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-xs hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
|
||||||
|
#${tag}
|
||||||
|
</a>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
</article>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNoResults() {
|
||||||
|
hideElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
hideElement('search-results-container');
|
||||||
|
showElement('no-results');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showElement(id) {
|
||||||
|
document.getElementById(id).classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideElement(id) {
|
||||||
|
document.getElementById(id).classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightMatch(text, query) {
|
||||||
|
if (!text || !query) return text || '';
|
||||||
|
|
||||||
|
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
||||||
|
return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-1 rounded">$1</mark>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', initSearchPage);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/search-results.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
398
_site/sitemap/index.html
Normal file
398
_site/sitemap/index.html
Normal file
|
|
@ -0,0 +1,398 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Site Directory — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/sitemap/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/sitemap/" />
|
||||||
|
<meta property="og:title" content="Site Directory" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Site Directory" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Site Directory",
|
||||||
|
"item": "https://agnes.love/sitemap/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<h1 class="text-3xl font-bold mb-2 flex items-center gap-2">
|
||||||
|
🗺️ Site Directory
|
||||||
|
</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
||||||
|
A complete map of everything on this site. Explore and discover!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Main Pages -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-purple-200 dark:border-purple-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-purple-700 dark:text-purple-300">📚 Main Pages</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">🏠 Home</a></li>
|
||||||
|
<li><a href="/blog/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">✍️ Blog</a></li>
|
||||||
|
<li><a href="/about/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">👋 About</a></li>
|
||||||
|
<li><a href="/contact/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">💬 Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Personal Pages -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-blue-200 dark:border-blue-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-blue-700 dark:text-blue-300">👤 Personal</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/uses/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🛠️ Uses</a></li>
|
||||||
|
<li><a href="/now/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">📍 Now</a></li>
|
||||||
|
<li><a href="/donate/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">💖 Support</a></li>
|
||||||
|
<li><a href="/notes/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🗒️ Notes</a></li>
|
||||||
|
<li><a href="/journal/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">📓 Journal</a></li>
|
||||||
|
<li><a href="/poetry/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🖋️ Poetry</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Discovery -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-green-200 dark:border-green-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-green-700 dark:text-green-300">🔍 Discovery</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/archive/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">📅 Archive</a></li>
|
||||||
|
<li><a href="/blogroll/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🔗 Blogroll</a></li>
|
||||||
|
<li><a href="/feed.xml" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">📡 RSS Feed</a></li>
|
||||||
|
<li><a href="/links/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🧭 Links</a></li>
|
||||||
|
<li><a href="/bookshelf/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">📚 Bookshelf</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Meta -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-orange-200 dark:border-orange-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-orange-700 dark:text-orange-300">⚙️ Meta</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/style/" class="flex items-center gap-2 hover:text-orange-600 dark:hover:text-orange-400">🎨 Style Guide</a></li>
|
||||||
|
<li><a href="/accessibility/" class="flex items-center gap-2 hover:text-orange-600 dark:hover:text-orange-400">♿ Accessibility</a></li>
|
||||||
|
<li><a href="/sitemap/" class="flex items-center gap-2 hover:text-orange-600 dark:hover:text-orange-400 font-semibold">🗺️ This Page</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Work -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-teal-200 dark:border-teal-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-teal-700 dark:text-teal-300">🧰 Work</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/portfolio/" class="flex items-center gap-2 hover:text-teal-600 dark:hover:text-teal-400">🧩 Portfolio</a></li>
|
||||||
|
<li><a href="/projects/" class="flex items-center gap-2 hover:text-teal-600 dark:hover:text-teal-400">🛠️ Projects</a></li>
|
||||||
|
<li><a href="/resume/" class="flex items-center gap-2 hover:text-teal-600 dark:hover:text-teal-400">📄 Résumé</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Posts -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-pink-200 dark:border-pink-800 md:col-span-2">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-pink-700 dark:text-pink-300">📝 Recent Posts</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No posts yet. Start writing!</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fun Stuff -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-indigo-200 dark:border-indigo-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-indigo-300">🎪 Fun Stuff</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🎮 Try the Konami code</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🖱️ Click the logo 7 times</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">⌨️ Type "blog" anywhere</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🌙 Toggle dark mode</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-12 p-6 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg">
|
||||||
|
<h2 class="text-xl font-semibold mb-2">🧭 Lost?</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">
|
||||||
|
This site is built with <a href="https://11ty.dev" class="text-purple-600 dark:text-purple-400 hover:underline">Eleventy</a>
|
||||||
|
and follows <a href="https://indieweb.org" class="text-purple-600 dark:text-purple-400 hover:underline">IndieWeb</a> principles.
|
||||||
|
It's designed to be a calm, thoughtful space for writing and connecting.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/sitemap.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
397
_site/style/index.html
Normal file
397
_site/style/index.html
Normal file
|
|
@ -0,0 +1,397 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Style Guide — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/style/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/style/" />
|
||||||
|
<meta property="og:title" content="Style Guide" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Style Guide" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Style Guide",
|
||||||
|
"item": "https://agnes.love/style/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Style Guide</h1>
|
||||||
|
|
||||||
|
<div class="space-y-12">
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Typography</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold">Heading 1</h1>
|
||||||
|
<h2 class="text-2xl font-semibold">Heading 2</h2>
|
||||||
|
<h3 class="text-xl font-medium">Heading 3</h3>
|
||||||
|
<h4 class="text-lg">Heading 4</h4>
|
||||||
|
</div>
|
||||||
|
<p class="text-base">This is regular paragraph text. It should be readable and comfortable for extended reading sessions.</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">This is smaller text used for metadata and secondary information.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Colors</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-blue-600 rounded"></div>
|
||||||
|
<p class="text-sm">Primary Blue</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-gray-600 rounded"></div>
|
||||||
|
<p class="text-sm">Gray</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-green-600 rounded"></div>
|
||||||
|
<p class="text-sm">Success Green</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-red-600 rounded"></div>
|
||||||
|
<p class="text-sm">Error Red</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Components</h2>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Buttons</h3>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Primary</button>
|
||||||
|
<button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">Secondary</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Tags</h3>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">#example</span>
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">#tag</span>
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">#demo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Cards</h3>
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 max-w-md">
|
||||||
|
<h4 class="font-semibold mb-2">Card Title</h4>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400">This is an example card component with some content.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Prose Styles</h2>
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<p>This section demonstrates the prose styling used for blog content.</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>This is a blockquote. It should stand out from regular text and be easily identifiable.</p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item one</li>
|
||||||
|
<li>Unordered list item two</li>
|
||||||
|
<li>Unordered list item three</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item one</li>
|
||||||
|
<li>Ordered list item two</li>
|
||||||
|
<li>Ordered list item three</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<pre><code>// Code block example
|
||||||
|
function example() {
|
||||||
|
return "Hello, world!";
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<p>Here's some text with <code>inline code</code> and a <a href="#">link example</a>.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/style.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
302
_site/tags/index.html
Normal file
302
_site/tags/index.html
Normal file
|
|
@ -0,0 +1,302 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Tags — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/tags/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/tags/" />
|
||||||
|
<meta property="og:title" content="Tags" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Tags" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Tags",
|
||||||
|
"item": "https://agnes.love/tags/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Tags</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<p class="text-gray-500">No tags yet.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/tags/index.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
358
_site/type/index.html
Normal file
358
_site/type/index.html
Normal file
|
|
@ -0,0 +1,358 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Type — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/type/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/type/" />
|
||||||
|
<meta property="og:title" content="Type" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Type" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Type",
|
||||||
|
"item": "https://agnes.love/type/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Type Scale & Components</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A living typography page for quick visual checks. Tweak sizes in <code>tailwind.config.cjs</code> or override via utilities.</p>
|
||||||
|
|
||||||
|
<section class="bg-[var(--surface)] border rounded p-4 mb-8">
|
||||||
|
<h2 class="text-xl font-semibold">Fonts Used</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">This template uses the system UI font stack by default for speed and readability, and a system monospace stack for code.</p>
|
||||||
|
<ul class="text-sm text-gray-600 dark:text-gray-400 list-disc pl-6">
|
||||||
|
<li><strong>Body/UI:</strong> -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif</li>
|
||||||
|
<li><strong>Monospace:</strong> the browser's default <code>monospace</code> stack via Tailwind's <code>font-mono</code> utility</li>
|
||||||
|
</ul>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Defined in <code>src/assets/css/tailwind.css</code>:</p>
|
||||||
|
<pre class="mt-2"><code class="language-css">/* src/assets/css/tailwind.css */
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
.system-fonts {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">To change fonts, you can:</p>
|
||||||
|
<ol class="text-sm text-gray-600 dark:text-gray-400 list-decimal pl-6">
|
||||||
|
<li>Swap the <code>body { font-family: ... }</code> in <code>src/assets/css/tailwind.css</code>.</li>
|
||||||
|
<li>Optionally add <code>fontFamily</code> under <code>theme.extend</code> in <code>tailwind.config.cjs</code> and use Tailwind utilities (e.g., <code>font-sans</code>, <code>font-mono</code>).</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="prose dark:prose-invert max-w-none">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<p>
|
||||||
|
Body copy with <strong>bold</strong> and <em>emphasis</em>. Links look like
|
||||||
|
<a href="#">this inline link</a>. Small text appears as
|
||||||
|
<small>supporting detail</small>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Lists</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item</li>
|
||||||
|
<li>With sufficient spacing</li>
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item</li>
|
||||||
|
<li>Use lists for steps</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Blockquote</h3>
|
||||||
|
<blockquote>
|
||||||
|
Ship small improvements often. The garden grows one commit at a time.
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<h3>Code</h3>
|
||||||
|
<pre><code class="language-js">// Syntax highlighting is provided client-side via Highlight.js
|
||||||
|
function greet(name) {
|
||||||
|
return `Hello, ${name}!`;
|
||||||
|
}
|
||||||
|
console.log(greet('world'));
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/type.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
334
_site/uses/index.html
Normal file
334
_site/uses/index.html
Normal file
|
|
@ -0,0 +1,334 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Uses — Agnes the Alien</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="generator" content="Eleventy" />
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://agnes.love/uses/" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="Agnes the Alien" />
|
||||||
|
<meta property="og:url" content="https://agnes.love/uses/" />
|
||||||
|
<meta property="og:title" content="Uses" />
|
||||||
|
<meta property="og:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta property="og:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta property="og:image:alt" content="Agnes the Alien preview" />
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="Uses" />
|
||||||
|
<meta name="twitter:description" content="Personal website and blog of Agnes the Alien." />
|
||||||
|
<meta name="twitter:image" content="https://agnes.love//screenshot.png" />
|
||||||
|
<meta name="twitter:image:alt" content="Agnes the Alien preview" />
|
||||||
|
<link rel="webmention" href="https://webmention.io/agnes.love/webmention" />
|
||||||
|
<link rel="pingback" href="https://webmention.io/agnes.love/xmlrpc" />
|
||||||
|
<link rel="stylesheet" href="/assets/css/build.css" />
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Agnes the Alien Feed" href="/feed.xml" />
|
||||||
|
|
||||||
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||||
|
<link rel="mask-icon" href="/assets/favicon.svg" color="#a78bfa">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
|
||||||
|
<meta name="theme-color" content="#a78bfa" />
|
||||||
|
<link rel="manifest" href="/manifest.webmanifest">
|
||||||
|
|
||||||
|
<link id="hljs-light" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.min.css">
|
||||||
|
<link id="hljs-dark" rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.min.css" disabled>
|
||||||
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js" defer></script>
|
||||||
|
<script defer>
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const light = document.getElementById('hljs-light');
|
||||||
|
const dark = document.getElementById('hljs-dark');
|
||||||
|
function applyTheme() {
|
||||||
|
const isDark = html.classList.contains('dark');
|
||||||
|
if (light && dark) {
|
||||||
|
light.disabled = !!isDark;
|
||||||
|
dark.disabled = !isDark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Initial apply
|
||||||
|
applyTheme();
|
||||||
|
// Observe class changes on <html> to react to dark-mode toggle
|
||||||
|
const observer = new MutationObserver(applyTheme);
|
||||||
|
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
|
||||||
|
// Highlight code blocks
|
||||||
|
document.querySelectorAll('pre code').forEach((el) => {
|
||||||
|
if (window.hljs && typeof window.hljs.highlightElement === 'function') {
|
||||||
|
window.hljs.highlightElement(el);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.contrast { filter: contrast(1.2) saturate(1.1); }
|
||||||
|
.reduce-motion * { transition: none !important; animation: none !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@graph": [
|
||||||
|
{
|
||||||
|
"@type": "WebSite",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"description": "Personal website and blog of Agnes the Alien."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "Agnes the Alien",
|
||||||
|
"url": "https://agnes.love",
|
||||||
|
"sameAs": [
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "Home",
|
||||||
|
"item": "https://agnes.love"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "Uses",
|
||||||
|
"item": "https://agnes.love/uses/"
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-[var(--bg)] text-[var(--text)] min-h-screen flex flex-col">
|
||||||
|
<div id="progress-bar" aria-hidden="true"></div>
|
||||||
|
<header class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 flex items-center gap-3">
|
||||||
|
<button id="hamburger" class="md:hidden p-2 rounded border border-gray-300 dark:border-gray-600" aria-label="Toggle menu" aria-controls="primary-nav" aria-expanded="false">
|
||||||
|
<span class="bar-1 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-transform"></span>
|
||||||
|
<span class="bar-2 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 mb-1 transition-opacity"></span>
|
||||||
|
<span class="bar-3 block w-5 h-0.5 bg-gray-700 dark:bg-gray-200 transition-transform"></span>
|
||||||
|
</button>
|
||||||
|
<a class="text-lg font-semibold" href="/">Agnes the Alien</a>
|
||||||
|
<form class="ml-auto hidden sm:block" role="search" aria-label="Site" action="/search/" method="get">
|
||||||
|
<label class="sr-only" for="q">Search</label>
|
||||||
|
<input id="q" name="q" type="search" placeholder="Search…" class="px-3 py-2 border rounded w-64" />
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-2 ml-2">
|
||||||
|
<button id="dark-toggle" class="px-2 py-1 text-sm border rounded" aria-pressed="false" aria-label="Toggle dark mode">🌙</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button id="a11y-toggle" class="px-2 py-1 text-sm border rounded" aria-expanded="false" aria-controls="a11y-menu">A11y</button>
|
||||||
|
<div id="a11y-menu" class="absolute right-0 mt-1 bg-[var(--surface)] border rounded p-2 text-sm space-x-2 whitespace-nowrap hidden">
|
||||||
|
<button id="font-dec" class="px-2 py-1 border rounded">A-</button>
|
||||||
|
<button id="font-inc" class="px-2 py-1 border rounded">A+</button>
|
||||||
|
<button id="contrast-toggle" class="px-2 py-1 border rounded">Contrast</button>
|
||||||
|
<button id="motion-toggle" class="px-2 py-1 border rounded">Reduce motion</button>
|
||||||
|
<button id="font-toggle" type="button" aria-pressed="false" class="px-2 py-1 border rounded hidden md:inline-block">System Fonts</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="bg-[var(--surface)] border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div id="primary-nav" class="container mx-auto px-4 py-2 hidden md:block">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="flex flex-col md:flex-row text-base md:text-sm space-y-3 md:space-y-0 md:space-x-6">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>🏠 Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>✍️ Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/about/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>👋 About</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/uses/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 underline font-semibold"
|
||||||
|
aria-current="page">🛠️ Uses</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/now/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>📍 Now</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/contact/" class="nav-item block py-2 text-purple-600 dark:text-purple-400 "
|
||||||
|
>💬 Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 py-6 max-w-4xl flex-1">
|
||||||
|
<main>
|
||||||
|
<h1 class="text-2xl font-bold mb-6">What I Use</h1>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Development</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><strong>Editor:</strong> Your preferred code editor</li>
|
||||||
|
<li><strong>Terminal:</strong> Your terminal setup</li>
|
||||||
|
<li><strong>Browser:</strong> Your development browser</li>
|
||||||
|
<li><strong>Version Control:</strong> Git + GitHub</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Hardware</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><strong>Computer:</strong> Your computer specs</li>
|
||||||
|
<li><strong>Monitor:</strong> Your monitor setup</li>
|
||||||
|
<li><strong>Keyboard:</strong> Your keyboard</li>
|
||||||
|
<li><strong>Mouse:</strong> Your mouse/trackpad</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Software</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><strong>OS:</strong> Your operating system</li>
|
||||||
|
<li><strong>Notes:</strong> Your note-taking app</li>
|
||||||
|
<li><strong>Design:</strong> Your design tools</li>
|
||||||
|
<li><strong>Productivity:</strong> Your productivity apps</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-8 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
This page is inspired by <a href="https://uses.tech/" class="text-blue-600 hover:text-blue-800" target="_blank" rel="noopener">uses.tech</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="bg-[var(--surface)] border-t border-gray-200 dark:border-gray-700 mt-12">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Technical</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="https://11ty.dev" target="_blank" rel="noopener">Built with Eleventy</a></li>
|
||||||
|
<li><a href="/style/" class="hover:text-blue-600">Style Guide</a></li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/edit/main/uses.njk" class="hover:text-blue-600" target="_blank" rel="noopener">Edit This Page</a></li>
|
||||||
|
<li><a href="https://treasurechest.alien.town/agnes/agnes-love/blob/main/GUIDE.md" class="hover:text-blue-600" target="_blank" rel="noopener">Project Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Navigation</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
<li><a href="/sitemap/" class="hover:text-blue-600">Sitemap</a></li>
|
||||||
|
<li><a href="/archive/" class="hover:text-blue-600">Archive</a></li>
|
||||||
|
<li><a href="/categories/" class="hover:text-blue-600">Categories</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-semibold mb-2">Connect</h3>
|
||||||
|
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="mailto:alienhospitals@gmail.com" rel="me" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="img"><path d="M4 4h16v16H4z"/><path d="m22 6-10 7L2 6"/></svg>
|
||||||
|
|
||||||
|
<span>Email</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://alienhttps://lesbian.alien.dentist" target="_blank" rel="me noopener" class="inline-flex items-center gap-2 hover:text-blue-600">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" role="img"><path d="M21.57 13.11c-.3 1.55-2.7 3.25-5.46 3.58-1.44.17-2.86.33-4.37.26-2.47-.11-4.43-.59-4.43-.59 0 .24.02.48.05.71.35 2.67 2.64 2.83 4.8 2.9 2.18.07 4.12-.54 4.12-.54l.09 1.99s-1.52.81-4.23.96c-1.5.08-3.36-.04-5.52-.65-4.69-1.26-5.5-6.33-5.63-11.46-.04-1.5-.02-2.92-.02-4.12 0-5.3 3.47-6.86 3.47-6.86 1.74-.8 4.72-1.14 7.83-1.16h.08c3.11.02 6.09.36 7.83 1.16 0 0 3.47 1.56 3.47 6.86 0 0 .04 3.01-.08 4.98-.05.82-.16 1.63-.34 2.41z"/></svg>
|
||||||
|
|
||||||
|
<span>Mastodon</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-6 pt-6 text-center text-gray-500">
|
||||||
|
<p>
|
||||||
|
2025 Agnes the Alien •
|
||||||
|
<a href="/feed.xml" class="hover:text-blue-600">RSS</a> •
|
||||||
|
Code: <a href="https://opensource.org/license/mit" target="_blank" rel="noopener" class="hover:text-blue-600">MIT</a> •
|
||||||
|
Content: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener" class="hover:text-blue-600">CC BY-NC-SA 4.0</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="/assets/js/main.js"></script>
|
||||||
|
<script src="/assets/js/flexsearch.min.js"></script>
|
||||||
|
<script src="/assets/js/search.js"></script>
|
||||||
|
<script src="/assets/js/easter-eggs.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
about.njk
Executable file
45
about.njk
Executable file
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/about/"
|
||||||
|
title: About
|
||||||
|
---
|
||||||
|
<div class="h-card">
|
||||||
|
<img class="u-photo w-24 h-24 rounded-full" src="https://file.garden/Zw17vw8ctXTQw7PV/meicon.png" alt="{{ site.author }}" />
|
||||||
|
<h1 class="p-name text-2xl font-bold mt-2">{{ site.author }}</h1>
|
||||||
|
<p class="p-note mt-2">
|
||||||
|
<img src="https://file.garden/Zw17vw8ctXTQw7PV/button-88x31(24).gif" alt="My site button, a very small drawing of myself (a white feminine individual with pink and green hair) that says Agnes on the side." title="My site button, a very small drawing of myself (a white feminine
|
||||||
|
individual with pink and green hair) that says Agnes on the side."><br>
|
||||||
|
<a href="https://lesbian.alien.dentist/">Fediverse</a> | <a href="https://ko-fi.com/agnesthealien">Ko-Fi</a> | <a href="https://bsky.app/profile/alien.town">Bluesky</a> | <a href="https://archiveofourown.org/users/telescopefish">AO3</a> | <a href="https://toothpastepancake.dreamwidth.org/">Dreamwidth</a><br>
|
||||||
|
</center><hr>
|
||||||
|
Hi! I'm Agnes the Alien (it/zhe). I also go by Holiday and a bunch of other names sometimes too :-P I'm a disabled nonbinary extraterrestrial lesbian and I live in the Midwestern USA, unfortunately. I'm not very good at writing about myself, but I'll try. <br><br>
|
||||||
|
The main love of my life is creative writing. I've been writing since I was about four years old and I learned how to open Microsoft Word on our dinosaur desktop PC. I write pretty much everything - poetry, fanfiction, short stories, video games, scripts, things that can't be described very well. I love to write horror, sci-fi, and sci-fi horror, and I love to write about dissociation and bad people and aliens and healing in nontraditional ways. I just love <i>writing.</i><br><br>Because of that a lot of my internet activity is focused around writing, usually fanfiction. I <a href="https://sunset.femslash.club">run a fork of OTW-Archive, the software behind Archive of Our Own, the largest fanfiction site in the world (and mine has status updates!), dedicated to fan and original works centered around F/F, NB/F and NB/NB sapphic relationships.</a> I run a lot of fandom events on Dreamwidth, like Rarest of Rarepairs and (as of 2025) Sapphic Summer. I also <a href="/badges">participate </a>in a lot of fandom events.<br><br>
|
||||||
|
I'm Quaker and currently in my freshman year of college studying theology. I'm about to start taking, for this upcoming semester: African American Literature, Intro to Ethics, and Intro to World Religions. I was originally going to be an English major, but. I think I should keep writing a hobby.
|
||||||
|
<br><br>
|
||||||
|
I have three cats, a dog, and a pet Goffin Cockatoo named Saira who I adore with my entire soul. I have a serious passion for the natural world and animals (I have a devil's hole pupfish/white spotted pufferfish tattoo on my chest...) I'm in love with the world and with love and I try to be the best and most pleasant person I can be.<br><br>
|
||||||
|
I'm a bit "cringe", but I don't care; I'm alterhuman and semi-fictosexual, and these things are major aspects of my identity! I'm an alien and that is very important to me. My fictional others are Caleb Mir from Starfleet Academy and the Negative Spirit from Doom Patrol TV, among other less serious beloveds. If you'd ever like to talk about it, hit me up at the contact information provided above. I'm very open about my identity and the things that make me who I am, so if you're respectfully curious, just ask!!
|
||||||
|
<br><br>
|
||||||
|
I’m multiply disabled–physically, intellectually, mentally. I have dissociative identity disorder. These aspects of me impact pretty much every area of my life; outside of creativity and computer stuff, I really don’t have the ability to do much at all, and am pretty limited. So, I’m housebound and often bedbound, and I talk about this a lot and how it shapes my relationship with the world, internet, technology, and fandom.<br><br>
|
||||||
|
Anyway, that's me. It's nice to meet you.
|
||||||
|
<br><br>
|
||||||
|
<div class="contact-info mt-2 flex flex-wrap gap-3 items-center">
|
||||||
|
{% from "partials/icons.njk" import icon %}
|
||||||
|
<a class="u-url inline-flex items-center gap-1" href="{{ site.url }}" rel="me">
|
||||||
|
{{ icon('link','w-4 h-4') }} <span>{{ site.url | replace('https://', '') | replace('http://', '') }}</span>
|
||||||
|
</a>
|
||||||
|
<a class="u-email inline-flex items-center gap-1" href="mailto:{{ site.email }}">
|
||||||
|
{{ icon('mail','w-4 h-4') }} <span>{{ site.email }}</span>
|
||||||
|
</a>
|
||||||
|
{% if site.social.github %}
|
||||||
|
<a class="u-url inline-flex items-center gap-1" rel="me" href="https://github.com/{{ site.social.github }}">
|
||||||
|
{{ icon('github','w-4 h-4') }} <span>GitHub</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.social.twitter %}
|
||||||
|
<a class="u-url inline-flex items-center gap-1" rel="me" href="https://twitter.com/{{ site.social.twitter | replace('@','') }}">
|
||||||
|
{{ icon('x','w-4 h-4') }} <span>Twitter</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<p class="p-locality mt-2">Michigan</p>
|
||||||
|
<p class="p-country-name">USA</p>
|
||||||
|
</div>
|
||||||
7
accessibility.njk
Executable file
7
accessibility.njk
Executable file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/accessibility/"
|
||||||
|
title: Accessibility
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Accessibility</h1>
|
||||||
|
<p>This site aims for WCAG 2.1 AA. Use the A11y menu in the header to adjust font size, contrast, and motion preferences. Preferences are saved in your browser.</p>
|
||||||
62
archive.njk
Executable file
62
archive.njk
Executable file
|
|
@ -0,0 +1,62 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/archive/"
|
||||||
|
title: Archive
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Archive</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none mb-8">
|
||||||
|
<p>A chronological archive of all posts, organized by year and month.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% set postsByYear = collections.posts | groupby("date.getFullYear()") %}
|
||||||
|
{% for year, posts in postsByYear %}
|
||||||
|
<section class="mb-8">
|
||||||
|
<h2 class="text-xl font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2">{{ year }}</h2>
|
||||||
|
|
||||||
|
{% set postsByMonth = posts | groupby("date.getMonth()") %}
|
||||||
|
{% for month, monthPosts in postsByMonth %}
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg font-medium mb-3 text-gray-700 dark:text-gray-300">
|
||||||
|
{{ monthPosts[0].date | readableDate("MMMM") }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="space-y-2">
|
||||||
|
{% for post in monthPosts %}
|
||||||
|
<article class="flex items-start gap-4 py-2">
|
||||||
|
<time class="text-sm text-gray-500 dark:text-gray-400 font-mono min-w-[4rem]">
|
||||||
|
{{ post.date | readableDate("MMM dd") }}
|
||||||
|
</time>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h4 class="font-medium">
|
||||||
|
<a href="{{ post.url }}" class="hover:text-blue-600 dark:hover:text-blue-400">
|
||||||
|
{{ post.data.title }}
|
||||||
|
</a>
|
||||||
|
</h4>
|
||||||
|
{% if post.data.description %}
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ post.data.description }}</p>
|
||||||
|
{% endif %}
|
||||||
|
{% if post.data.tags %}
|
||||||
|
<div class="flex flex-wrap gap-1 mt-2">
|
||||||
|
{% for tag in post.data.tags %}
|
||||||
|
<span class="inline-block px-2 py-1 text-xs rounded-full text-white"
|
||||||
|
style="background-color: {{ tag | tagColor }}">
|
||||||
|
{{ tag }}
|
||||||
|
</span>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% if collections.posts.length == 0 %}
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<p class="text-gray-500 dark:text-gray-400">No posts found.</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
BIN
assets/apple-touch-icon.png
Executable file
BIN
assets/apple-touch-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
1
assets/css/build.css
Executable file
1
assets/css/build.css
Executable file
File diff suppressed because one or more lines are too long
286
assets/css/tailwind.css
Executable file
286
assets/css/tailwind.css
Executable file
|
|
@ -0,0 +1,286 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
@keyframes marquee {
|
||||||
|
0% { transform: translateX(100%); }
|
||||||
|
100% { transform: translateX(-100%); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.currently {
|
||||||
|
float: right;
|
||||||
|
height: 190px;
|
||||||
|
width: 190px;
|
||||||
|
overflow: scroll;
|
||||||
|
position: absolute;}
|
||||||
|
.webring {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 400px;
|
||||||
|
height: 220px;
|
||||||
|
border: 1px #000 solid;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
/* Blog post typography styles */
|
||||||
|
.prose {
|
||||||
|
@apply max-w-none text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose p {
|
||||||
|
@apply mb-6 leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h1 {
|
||||||
|
@apply text-3xl font-bold mb-6 mt-8 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h2 {
|
||||||
|
@apply text-2xl font-bold mb-4 mt-8 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h3 {
|
||||||
|
@apply text-xl font-semibold mb-3 mt-6 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h4 {
|
||||||
|
@apply text-lg font-semibold mb-2 mt-4 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h5 {
|
||||||
|
@apply text-base font-semibold mb-2 mt-4 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h6 {
|
||||||
|
@apply text-sm font-semibold mb-2 mt-4 text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul {
|
||||||
|
@apply mb-6 pl-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ol {
|
||||||
|
@apply mb-6 pl-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose li {
|
||||||
|
@apply mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ul li {
|
||||||
|
@apply list-disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose ol li {
|
||||||
|
@apply list-decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose blockquote {
|
||||||
|
@apply border-l-4 border-purple-500 pl-6 py-2 mb-6 italic text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-800/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose code {
|
||||||
|
@apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono text-purple-700 dark:text-purple-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre {
|
||||||
|
@apply bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 rounded-lg mb-6 overflow-x-auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose pre code {
|
||||||
|
@apply bg-transparent p-0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure HLJS themes don't override background/text inside prose blocks */
|
||||||
|
.prose pre code.hljs,
|
||||||
|
.prose code.hljs,
|
||||||
|
.prose pre .hljs {
|
||||||
|
background: transparent !important;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile hamburger animation */
|
||||||
|
#hamburger .bar-1,
|
||||||
|
#hamburger .bar-3 { transition: transform 200ms ease; }
|
||||||
|
#hamburger .bar-2 { transition: opacity 150ms ease; }
|
||||||
|
#hamburger.open .bar-1 { transform: translateY(6px) rotate(45deg); }
|
||||||
|
#hamburger.open .bar-2 { opacity: 0; }
|
||||||
|
#hamburger.open .bar-3 { transform: translateY(-6px) rotate(-45deg); }
|
||||||
|
|
||||||
|
/* Wrap long links in blog posts to prevent overflow */
|
||||||
|
.prose a {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.prose img {
|
||||||
|
@apply rounded-lg mb-6 shadow-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose table {
|
||||||
|
@apply w-full mb-6 border-collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose th {
|
||||||
|
@apply bg-gray-100 dark:bg-gray-800 px-4 py-2 text-left font-semibold border border-gray-300 dark:border-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose td {
|
||||||
|
@apply px-4 py-2 border border-gray-300 dark:border-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose hr {
|
||||||
|
@apply my-8 border-gray-300 dark:border-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose strong {
|
||||||
|
@apply font-bold text-gray-900 dark:text-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose em {
|
||||||
|
@apply italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose del {
|
||||||
|
@apply line-through text-gray-500 dark:text-gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header anchors */
|
||||||
|
.prose .header-anchor {
|
||||||
|
@apply text-purple-500 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-200 no-underline ml-2 opacity-0 transition-opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prose h1:hover .header-anchor,
|
||||||
|
.prose h2:hover .header-anchor,
|
||||||
|
.prose h3:hover .header-anchor,
|
||||||
|
.prose h4:hover .header-anchor {
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #dcfcf4;
|
||||||
|
--text: #1a1625;
|
||||||
|
--surface: #f7f2fa;
|
||||||
|
--accent: #ffd1f0;
|
||||||
|
--accent-light:#ffd1f0;
|
||||||
|
--border: hotpink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--bg: #0f0a1a;
|
||||||
|
--text: #f1e8ff;
|
||||||
|
--surface: #1a0f2e;
|
||||||
|
--accent: #a855f7;
|
||||||
|
--accent-light: #c084fc;
|
||||||
|
--border: #4c1d95;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-bar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, #7c3aed, #ec4899, #f59e0b);
|
||||||
|
z-index: 9999;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav items - no hover effects to prevent jitter */
|
||||||
|
.nav-item {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove hover transform that could cause layout shifts */
|
||||||
|
|
||||||
|
/* Subtle animations */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-3px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-animation {
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* System fonts toggle */
|
||||||
|
.system-fonts {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
overflow-y: scroll;
|
||||||
|
width: 100vw;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base accessibility improvements */
|
||||||
|
@layer base {
|
||||||
|
a {
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:focus-visible {
|
||||||
|
outline: 2px solid #7c3aed; /* purple accent focus ring */
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
/* Global link hover/active behavior (non-prose, non-nav links) */
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
a:active {
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
a:hover:not(.nav-item) {
|
||||||
|
color: var(--accent);
|
||||||
|
transition: color 150ms ease-in-out;
|
||||||
|
}
|
||||||
|
.dark a:hover:not(.nav-item) {
|
||||||
|
color: var(--accent-light);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prose improvements */
|
||||||
|
@layer components {
|
||||||
|
.prose {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.prose a {
|
||||||
|
color: #2563eb; /* readable blue on light */
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
text-decoration-thickness: 1.5px;
|
||||||
|
transition: color 150ms ease-in-out; /* color-only to avoid layout shift */
|
||||||
|
}
|
||||||
|
.prose a:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
}
|
||||||
|
.prose a:active {
|
||||||
|
text-decoration-thickness: 2px;
|
||||||
|
}
|
||||||
|
.prose a:focus-visible {
|
||||||
|
outline: 2px solid #7c3aed;
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.dark .prose a {
|
||||||
|
color: #60a5fa;
|
||||||
|
}
|
||||||
|
.dark .prose a:hover {
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
.dark .prose a:focus-visible {
|
||||||
|
outline-color: #a855f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
assets/favicon-16x16.png
Executable file
BIN
assets/favicon-16x16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
BIN
assets/favicon-32x32.png
Executable file
BIN
assets/favicon-32x32.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1,005 B |
20
assets/favicon.svg
Executable file
20
assets/favicon.svg
Executable file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Cute favicon">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0%" stop-color="#a78bfa"/>
|
||||||
|
<stop offset="100%" stop-color="#f472b6"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="s" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-color="#000" flood-opacity="0.2"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<rect x="4" y="4" width="56" height="56" rx="14" fill="url(#g)"/>
|
||||||
|
<!-- Smiley face heart -->
|
||||||
|
<g transform="translate(32 34)" filter="url(#s)">
|
||||||
|
<path d="M0 12 C -10 6 -16 0 -16 -6 C -16 -12 -11 -15 -7 -15 C -4 -15 -2 -13 0 -11 C 2 -13 4 -15 7 -15 C 11 -15 16 -12 16 -6 C 16 0 10 6 0 12 Z" fill="#fff"/>
|
||||||
|
<circle cx="-5" cy="-8" r="1.5" fill="#f472b6"/>
|
||||||
|
<circle cx="5" cy="-8" r="1.5" fill="#f472b6"/>
|
||||||
|
<path d="M -6 -4 Q 0 2 6 -4" stroke="#f472b6" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1 KiB |
238
assets/js/easter-eggs.js
Normal file
238
assets/js/easter-eggs.js
Normal file
|
|
@ -0,0 +1,238 @@
|
||||||
|
// Easter eggs and fun interactions
|
||||||
|
class EasterEggs {
|
||||||
|
constructor() {
|
||||||
|
this.konamiCode = [
|
||||||
|
'ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown',
|
||||||
|
'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight',
|
||||||
|
'KeyB', 'KeyA'
|
||||||
|
];
|
||||||
|
this.konamiIndex = 0;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.setupKonamiCode();
|
||||||
|
this.setupClickEasterEgg();
|
||||||
|
this.setupTypingEasterEgg();
|
||||||
|
}
|
||||||
|
|
||||||
|
setupKonamiCode() {
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.code === this.konamiCode[this.konamiIndex]) {
|
||||||
|
this.konamiIndex++;
|
||||||
|
if (this.konamiIndex === this.konamiCode.length) {
|
||||||
|
this.triggerKonamiEasterEgg();
|
||||||
|
this.konamiIndex = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.konamiIndex = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerKonamiEasterEgg() {
|
||||||
|
// Create rainbow effect
|
||||||
|
document.body.style.animation = 'rainbow 2s infinite';
|
||||||
|
|
||||||
|
// Add rainbow keyframes if not already present
|
||||||
|
if (!document.querySelector('#rainbow-styles')) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'rainbow-styles';
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% { filter: hue-rotate(0deg); }
|
||||||
|
25% { filter: hue-rotate(90deg); }
|
||||||
|
50% { filter: hue-rotate(180deg); }
|
||||||
|
75% { filter: hue-rotate(270deg); }
|
||||||
|
100% { filter: hue-rotate(360deg); }
|
||||||
|
}
|
||||||
|
.easter-egg-message {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: rainbow-bg 2s ease infinite;
|
||||||
|
color: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 9999;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
@keyframes rainbow-bg {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show message
|
||||||
|
const message = document.createElement('div');
|
||||||
|
message.className = 'easter-egg-message';
|
||||||
|
message.innerHTML = '🎉 Konami Code Activated! 🎉<br><small>You found the secret!</small>';
|
||||||
|
document.body.appendChild(message);
|
||||||
|
|
||||||
|
// Remove effects after 3 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.style.animation = '';
|
||||||
|
message.remove();
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
setupClickEasterEgg() {
|
||||||
|
let clickCount = 0;
|
||||||
|
let resetTimer;
|
||||||
|
|
||||||
|
// Use a more specific selector that won't interfere with navigation
|
||||||
|
const logo = document.querySelector('header h1 a, header .site-title a');
|
||||||
|
|
||||||
|
if (logo) {
|
||||||
|
logo.addEventListener('click', (e) => {
|
||||||
|
// Only trigger easter egg if we're already on the home page
|
||||||
|
if (window.location.pathname === '/') {
|
||||||
|
clickCount++;
|
||||||
|
if (clickCount === 7) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.triggerClickEasterEgg();
|
||||||
|
clickCount = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset counter after 3 seconds of no clicks
|
||||||
|
clearTimeout(resetTimer);
|
||||||
|
resetTimer = setTimeout(() => {
|
||||||
|
clickCount = 0;
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerClickEasterEgg() {
|
||||||
|
// Make all images spin
|
||||||
|
const images = document.querySelectorAll('img');
|
||||||
|
images.forEach(img => {
|
||||||
|
img.style.transition = 'transform 2s ease';
|
||||||
|
img.style.transform = 'rotate(360deg)';
|
||||||
|
setTimeout(() => {
|
||||||
|
img.style.transform = '';
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show message
|
||||||
|
this.showTemporaryMessage('🌟 Images are spinning! 🌟');
|
||||||
|
}
|
||||||
|
|
||||||
|
setupTypingEasterEgg() {
|
||||||
|
let typedSequence = '';
|
||||||
|
const secretWord = 'nahleb';
|
||||||
|
|
||||||
|
document.addEventListener('keypress', (e) => {
|
||||||
|
typedSequence += e.key.toLowerCase();
|
||||||
|
|
||||||
|
if (typedSequence.length > secretWord.length) {
|
||||||
|
typedSequence = typedSequence.slice(-secretWord.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typedSequence === secretWord) {
|
||||||
|
this.triggerTypingEasterEgg();
|
||||||
|
typedSequence = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerTypingEasterEgg() {
|
||||||
|
// Add floating hearts
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.createFloatingHeart();
|
||||||
|
}, i * 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showTemporaryMessage('💖 You typed the magic word! They are in love 💖');
|
||||||
|
}
|
||||||
|
|
||||||
|
createFloatingHeart() {
|
||||||
|
const heart = document.createElement('div');
|
||||||
|
heart.innerHTML = '💖';
|
||||||
|
heart.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
font-size: 24px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 9999;
|
||||||
|
left: ${Math.random() * window.innerWidth}px;
|
||||||
|
top: ${window.innerHeight}px;
|
||||||
|
animation: float-up 3s ease-out forwards;
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Add floating animation if not present
|
||||||
|
if (!document.querySelector('#float-styles')) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'float-styles';
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes float-up {
|
||||||
|
to {
|
||||||
|
transform: translateY(-${window.innerHeight + 100}px) rotate(360deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(heart);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
heart.remove();
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
showTemporaryMessage(text) {
|
||||||
|
const message = document.createElement('div');
|
||||||
|
message.style.cssText = `
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
z-index: 9999;
|
||||||
|
animation: slideIn 0.3s ease;
|
||||||
|
`;
|
||||||
|
message.textContent = text;
|
||||||
|
|
||||||
|
// Add slide animation if not present
|
||||||
|
if (!document.querySelector('#slide-styles')) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'slide-styles';
|
||||||
|
style.textContent = `
|
||||||
|
@keyframes slideIn {
|
||||||
|
from { transform: translateX(100%); opacity: 0; }
|
||||||
|
to { transform: translateX(0); opacity: 1; }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(message);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
message.style.animation = 'slideIn 0.3s ease reverse';
|
||||||
|
setTimeout(() => message.remove(), 300);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize easter eggs when DOM is loaded
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', () => new EasterEggs());
|
||||||
|
} else {
|
||||||
|
new EasterEggs();
|
||||||
|
}
|
||||||
48
assets/js/flexsearch.min.js
vendored
Normal file
48
assets/js/flexsearch.min.js
vendored
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
/**!
|
||||||
|
* FlexSearch.js v0.7.41 (Es5)
|
||||||
|
* Author and Copyright: Thomas Wilkerling
|
||||||
|
* Licence: Apache-2.0
|
||||||
|
* Hosted by Nextapps GmbH
|
||||||
|
* https://github.com/nextapps-de/flexsearch
|
||||||
|
*/
|
||||||
|
(function(self){'use strict';var t;function aa(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}}var v="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};
|
||||||
|
function ba(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var x=ba(this);function y(a,b){if(b)a:{var c=x;a=a.split(".");for(var d=0;d<a.length-1;d++){var e=a[d];if(!(e in c))break a;c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&v(c,a,{configurable:!0,writable:!0,value:b})}}
|
||||||
|
y("Symbol",function(a){function b(g){if(this instanceof b)throw new TypeError("Symbol is not a constructor");return new c(d+(g||"")+"_"+e++,g)}function c(g,f){this.h=g;v(this,"description",{configurable:!0,writable:!0,value:f})}if(a)return a;c.prototype.toString=function(){return this.h};var d="jscomp_symbol_"+(1E9*Math.random()>>>0)+"_",e=0;return b});
|
||||||
|
y("Symbol.iterator",function(a){if(a)return a;a=Symbol("Symbol.iterator");for(var b="Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array".split(" "),c=0;c<b.length;c++){var d=x[b[c]];"function"===typeof d&&"function"!=typeof d.prototype[a]&&v(d.prototype,a,{configurable:!0,writable:!0,value:function(){return ca(aa(this))}})}return a});function ca(a){a={next:a};a[Symbol.iterator]=function(){return this};return a}
|
||||||
|
function da(a,b){a instanceof String&&(a+="");var c=0,d=!1,e={next:function(){if(!d&&c<a.length){var g=c++;return{value:b(g,a[g]),done:!1}}d=!0;return{done:!0,value:void 0}}};e[Symbol.iterator]=function(){return e};return e}y("Array.prototype.keys",function(a){return a?a:function(){return da(this,function(b){return b})}});
|
||||||
|
function ea(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];if(b)return b.call(a);if("number"==typeof a.length)return{next:aa(a)};throw Error(String(a)+" is not an iterable or ArrayLike");}
|
||||||
|
y("Promise",function(a){function b(f){this.l=0;this.m=void 0;this.h=[];this.M=!1;var h=this.o();try{f(h.resolve,h.reject)}catch(k){h.reject(k)}}function c(){this.h=null}function d(f){return f instanceof b?f:new b(function(h){h(f)})}if(a)return a;c.prototype.l=function(f){if(null==this.h){this.h=[];var h=this;this.m(function(){h.D()})}this.h.push(f)};var e=x.setTimeout;c.prototype.m=function(f){e(f,0)};c.prototype.D=function(){for(;this.h&&this.h.length;){var f=this.h;this.h=[];for(var h=0;h<f.length;++h){var k=
|
||||||
|
f[h];f[h]=null;try{k()}catch(l){this.o(l)}}}this.h=null};c.prototype.o=function(f){this.m(function(){throw f;})};b.prototype.o=function(){function f(l){return function(m){k||(k=!0,l.call(h,m))}}var h=this,k=!1;return{resolve:f(this.S),reject:f(this.D)}};b.prototype.S=function(f){if(f===this)this.D(new TypeError("A Promise cannot resolve to itself"));else if(f instanceof b)this.U(f);else{a:switch(typeof f){case "object":var h=null!=f;break a;case "function":h=!0;break a;default:h=!1}h?this.R(f):this.I(f)}};
|
||||||
|
b.prototype.R=function(f){var h=void 0;try{h=f.then}catch(k){this.D(k);return}"function"==typeof h?this.V(h,f):this.I(f)};b.prototype.D=function(f){this.N(2,f)};b.prototype.I=function(f){this.N(1,f)};b.prototype.N=function(f,h){if(0!=this.l)throw Error("Cannot settle("+f+", "+h+"): Promise already settled in state"+this.l);this.l=f;this.m=h;2===this.l&&this.T();this.O()};b.prototype.T=function(){var f=this;e(function(){if(f.P()){var h=x.console;"undefined"!==typeof h&&h.error(f.m)}},1)};b.prototype.P=
|
||||||
|
function(){if(this.M)return!1;var f=x.CustomEvent,h=x.Event,k=x.dispatchEvent;if("undefined"===typeof k)return!0;"function"===typeof f?f=new f("unhandledrejection",{cancelable:!0}):"function"===typeof h?f=new h("unhandledrejection",{cancelable:!0}):(f=x.document.createEvent("CustomEvent"),f.initCustomEvent("unhandledrejection",!1,!0,f));f.promise=this;f.reason=this.m;return k(f)};b.prototype.O=function(){if(null!=this.h){for(var f=0;f<this.h.length;++f)g.l(this.h[f]);this.h=null}};var g=new c;b.prototype.U=
|
||||||
|
function(f){var h=this.o();f.J(h.resolve,h.reject)};b.prototype.V=function(f,h){var k=this.o();try{f.call(h,k.resolve,k.reject)}catch(l){k.reject(l)}};b.prototype.then=function(f,h){function k(n,q){return"function"==typeof n?function(r){try{l(n(r))}catch(u){m(u)}}:q}var l,m,p=new b(function(n,q){l=n;m=q});this.J(k(f,l),k(h,m));return p};b.prototype.catch=function(f){return this.then(void 0,f)};b.prototype.J=function(f,h){function k(){switch(l.l){case 1:f(l.m);break;case 2:h(l.m);break;default:throw Error("Unexpected state: "+
|
||||||
|
l.l);}}var l=this;null==this.h?g.l(k):this.h.push(k);this.M=!0};b.resolve=d;b.reject=function(f){return new b(function(h,k){k(f)})};b.race=function(f){return new b(function(h,k){for(var l=ea(f),m=l.next();!m.done;m=l.next())d(m.value).J(h,k)})};b.all=function(f){var h=ea(f),k=h.next();return k.done?d([]):new b(function(l,m){function p(r){return function(u){n[r]=u;q--;0==q&&l(n)}}var n=[],q=0;do n.push(void 0),q++,d(k.value).J(p(n.length-1),m),k=h.next();while(!k.done)})};return b});
|
||||||
|
y("Object.is",function(a){return a?a:function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c}});y("Array.prototype.includes",function(a){return a?a:function(b,c){var d=this;d instanceof String&&(d=String(d));var e=d.length;c=c||0;for(0>c&&(c=Math.max(c+e,0));c<e;c++){var g=d[c];if(g===b||Object.is(g,b))return!0}return!1}});
|
||||||
|
y("String.prototype.includes",function(a){return a?a:function(b,c){if(null==this)throw new TypeError("The 'this' value for String.prototype.includes must not be null or undefined");if(b instanceof RegExp)throw new TypeError("First argument to String.prototype.includes must not be a regular expression");return-1!==this.indexOf(b,c||0)}});
|
||||||
|
var fa="function"==typeof Object.assign?Object.assign:function(a,b){for(var c=1;c<arguments.length;c++){var d=arguments[c];if(d)for(var e in d)Object.prototype.hasOwnProperty.call(d,e)&&(a[e]=d[e])}return a};y("Object.assign",function(a){return a||fa});function C(a){return"undefined"!==typeof a?a:!0}function ha(a){for(var b=Array(a),c=0;c<a;c++)b[c]=D();return b}function D(){return Object.create(null)}function ia(a,b){return b.length-a.length}function E(a){return"string"===typeof a}function F(a){return"object"===typeof a}function G(a){return"function"===typeof a};function ja(a,b){var c=ka;if(a&&(b&&(a=I(a,b)),this.K&&(a=I(a,this.K)),this.L&&1<a.length&&(a=I(a,this.L)),c||""===c)){a=a.split(c);if(this.filter){b=this.filter;c=a.length;for(var d=[],e=0,g=0;e<c;e++){var f=a[e];f&&!b[f]&&(d[g++]=f)}a=d}return a}return a}var ka=/[\p{Z}\p{S}\p{P}\p{C}]+/u,la=/[\u0300-\u036f]/g;
|
||||||
|
function ma(a,b){for(var c=Object.keys(a),d=c.length,e=[],g="",f=0,h=0,k,l;h<d;h++)k=c[h],(l=a[k])?(e[f++]=J(b?"(?!\\b)"+k+"(\\b|_)":k),e[f++]=l):g+=(g?"|":"")+k;g&&(e[f++]=J(b?"(?!\\b)("+g+")(\\b|_)":"("+g+")"),e[f]="");return e}function I(a,b){for(var c=0,d=b.length;c<d&&(a=a.replace(b[c],b[c+1]),a);c+=2);return a}function J(a){return new RegExp(a,"g")}function na(a){for(var b="",c="",d=0,e=a.length,g=void 0;d<e;d++)(g=a[d])!==c&&(b+=c=g);return b};var pa={encode:oa,G:!1,H:""};function oa(a){return ja.call(this,(""+a).toLowerCase(),!1)};var qa={},K={};function ra(a){L(a,"add");L(a,"append");L(a,"search");L(a,"update");L(a,"remove")}function L(a,b){a[b+"Async"]=function(){var c=this,d=arguments,e=d[d.length-1];if(G(e)){var g=e;delete d[d.length-1]}e=new Promise(function(f){setTimeout(function(){c.async=!0;var h=c[b].apply(c,d);c.async=!1;f(h)})});return g?(e.then(g),this):e}};function sa(a,b,c,d){var e=a.length,g=[],f,h=0;d&&(d=[]);for(var k=e-1;0<=k;k--){for(var l=a[k],m=l.length,p=D(),n=!B,q=0;q<m;q++){var r=l[q],u=r.length;if(u)for(var A=0,w,z;A<u;A++)if(z=r[A],B){if(B[z]){if(!k)if(c)c--;else if(g[h++]=z,h===b)return g;if(k||d)p[z]=1;n=!0}d&&(w=(f[z]||0)+1,f[z]=w,w<e&&(w=d[w-2]||(d[w-2]=[]),w[w.length]=z))}else p[z]=1}if(d)B||(f=p);else if(!n)return[];var B=p}if(d)for(a=d.length-1;0<=a;a--)for(e=d[a],f=e.length,k=0;k<f;k++)if(l=e[k],!B[l]){if(c)c--;else if(g[h++]=l,
|
||||||
|
h===b)return g;B[l]=1}return g}function ta(a,b){for(var c=D(),d=D(),e=[],g=0;g<a.length;g++)c[a[g]]=1;for(a=0;a<b.length;a++){g=b[a];for(var f=0,h;f<g.length;f++)h=g[f],c[h]&&!d[h]&&(d[h]=1,e[e.length]=h)}return e};function M(a){this.l=!0!==a&&a;this.cache=D();this.h=[]}function ua(a,b,c){F(a)&&(a=a.query);var d=this.cache.get(a);d||(d=this.search(a,b,c),this.cache.set(a,d));return d}M.prototype.set=function(a,b){if(!this.cache[a]){var c=this.h.length;c===this.l?delete this.cache[this.h[c-1]]:c++;for(--c;0<c;c--)this.h[c]=this.h[c-1];this.h[0]=a}this.cache[a]=b};M.prototype.get=function(a){var b=this.cache[a];if(this.l&&b&&(a=this.h.indexOf(a))){var c=this.h[a-1];this.h[a-1]=this.h[a];this.h[a]=c}return b};var va={memory:{charset:"latin:extra",F:3,C:4,s:!1},performance:{F:3,C:3,B:!1,context:{depth:2,F:1}},match:{charset:"latin:extra",H:"reverse"},score:{charset:"latin:advanced",F:20,C:3,context:{depth:3,F:9}},"default":{}};function wa(a,b,c,d,e,g,f,h){setTimeout(function(){var k=a(c?c+"."+d:d,JSON.stringify(f));k&&k.then?k.then(function(){b.export(a,b,c,e,g+1,h)}):b.export(a,b,c,e,g+1,h)})};function N(a,b){if(!(this instanceof N))return new N(a);var c;if(a){E(a)?a=va[a]:(c=a.preset)&&(a=Object.assign({},c[c],a));c=a.charset;var d=a.lang;E(c)&&(-1===c.indexOf(":")&&(c+=":default"),c=K[c]);E(d)&&(d=qa[d])}else a={};var e,g,f=a.context||{};this.encode=a.encode||c&&c.encode||oa;this.register=b||D();this.F=e=a.resolution||9;this.H=b=c&&c.H||a.tokenize||"strict";this.depth="strict"===b&&f.depth;this.l=C(f.bidirectional);this.B=g=C(a.optimize);this.s=C(a.fastupdate);this.C=a.minlength||1;this.o=
|
||||||
|
a.boost;this.map=g?ha(e):D();this.m=e=f.resolution||1;this.h=g?ha(e):D();this.G=c&&c.G||a.rtl;this.K=(b=a.matcher||d&&d.K)&&ma(b,!1);this.L=(b=a.stemmer||d&&d.L)&&ma(b,!0);if(c=b=a.filter||d&&d.filter){c=b;d=D();f=0;for(e=c.length;f<e;f++)d[c[f]]=1;c=d}this.filter=c;this.cache=(b=a.cache)&&new M(b)}t=N.prototype;t.append=function(a,b){return this.add(a,b,!0)};
|
||||||
|
t.add=function(a,b,c,d){if(b&&(a||0===a)){if(!d&&!c&&this.register[a])return this.update(a,b);b=this.encode(b);if(d=b.length){for(var e=D(),g=D(),f=this.depth,h=this.F,k=0;k<d;k++){var l=b[this.G?d-1-k:k],m=l.length;if(l&&m>=this.C&&(f||!g[l])){var p=O(h,d,k),n="";switch(this.H){case "full":if(2<m){for(p=0;p<m;p++)for(var q=m;q>p;q--)if(q-p>=this.C){var r=O(h,d,k,m,p);n=l.substring(p,q);P(this,g,n,r,a,c)}break}case "reverse":if(1<m){for(q=m-1;0<q;q--)n=l[q]+n,n.length>=this.C&&P(this,g,n,O(h,d,k,
|
||||||
|
m,q),a,c);n=""}case "forward":if(1<m){for(q=0;q<m;q++)n+=l[q],n.length>=this.C&&P(this,g,n,p,a,c);break}default:if(this.o&&(p=Math.min(p/this.o(b,l,k)|0,h-1)),P(this,g,l,p,a,c),f&&1<d&&k<d-1)for(m=D(),n=this.m,p=l,q=Math.min(f+1,d-k),r=m[p]=1;r<q;r++)if((l=b[this.G?d-1-k-r:k+r])&&l.length>=this.C&&!m[l]){m[l]=1;var u=this.l&&l>p;P(this,e,u?p:l,O(n+(d/2>n?0:1),d,k,q-1,r-1),a,c,u?l:p)}}}}this.s||(this.register[a]=1)}}return this};
|
||||||
|
function O(a,b,c,d,e){return c&&1<a?b+(d||0)<=a?c+(e||0):(a-1)/(b+(d||0))*(c+(e||0))+1|0:0}function P(a,b,c,d,e,g,f){var h=f?a.h:a.map;if(!b[c]||f&&!b[c][f])a.B&&(h=h[d]),f?(b=b[c]||(b[c]=D()),b[f]=1,h=h[f]||(h[f]=D())):b[c]=1,h=h[c]||(h[c]=[]),a.B||(h=h[d]||(h[d]=[])),g&&h.includes(e)||(h[h.length]=e,a.s&&(a=a.register[e]||(a.register[e]=[]),a[a.length]=h))}
|
||||||
|
t.search=function(a,b,c){c||(!b&&F(a)?(c=a,a=c.query):F(b)&&(c=b));var d=[],e=0;if(c){a=c.query||a;b=c.limit;e=c.offset||0;var g=c.context;var f=c.suggest}if(a){a=this.encode(""+a);var h=a.length;if(1<h){c=D();for(var k=[],l=0,m=0,p;l<h;l++)if((p=a[l])&&p.length>=this.C&&!c[p])if(this.B||f||this.map[p])k[m++]=p,c[p]=1;else return d;a=k;h=a.length}}if(!h)return d;b||(b=100);g=this.depth&&1<h&&!1!==g;c=0;if(g){var n=a[0];c=1}else 1<h&&a.sort(ia);for(;c<h;c++){l=a[c];g?(k=xa(this,d,f,b,e,2===h,l,n),
|
||||||
|
f&&!1===k&&d.length||(n=l)):k=xa(this,d,f,b,e,1===h,l);if(k)return k;if(f&&c===h-1){k=d.length;if(!k){if(g){g=0;c=-1;continue}return d}if(1===k)return ya(d[0],b,e)}}return sa(d,b,e,f)};
|
||||||
|
function xa(a,b,c,d,e,g,f,h){var k=[],l=h?a.h:a.map;a.B||(l=za(l,f,h,a.l));if(l){for(var m=0,p=Math.min(l.length,h?a.m:a.F),n=0,q=0,r,u;n<p;n++)if(r=l[n])if(a.B&&(r=za(r,f,h,a.l)),e&&r&&g&&(u=r.length,u<=e?(e-=u,r=null):(r=r.slice(e),e=0)),r&&(k[m++]=r,g&&(q+=r.length,q>=d)))break;if(m){if(g)return ya(k,d,0);b[b.length]=k;return}}return!c&&k}function ya(a,b,c){a=1===a.length?a[0]:[].concat.apply([],a);return c||a.length>b?a.slice(c,c+b):a}
|
||||||
|
function za(a,b,c,d){c?(d=d&&b>c,a=(a=a[d?b:c])&&a[d?c:b]):a=a[b];return a}t.contain=function(a){return!!this.register[a]};t.update=function(a,b){return this.remove(a).add(a,b)};
|
||||||
|
t.remove=function(a,b){var c=this.register[a];if(c){if(this.s)for(var d=0,e;d<c.length;d++)e=c[d],e.splice(e.indexOf(a),1);else Q(this.map,a,this.F,this.B),this.depth&&Q(this.h,a,this.m,this.B);b||delete this.register[a];if(this.cache)for(b=this.cache,c=0;c<b.h.length;c++)e=b.h[c],d=b.cache[e],d.includes(a)&&(b.h.splice(c--,1),delete b.cache[e])}return this};
|
||||||
|
function Q(a,b,c,d,e){var g=0;if(a.constructor===Array)if(e)b=a.indexOf(b),-1!==b?1<a.length&&(a.splice(b,1),g++):g++;else{e=Math.min(a.length,c);for(var f=0,h;f<e;f++)if(h=a[f])g=Q(h,b,c,d,e),d||g||delete a[f]}else for(f in a)(g=Q(a[f],b,c,d,e))||delete a[f];return g}t.searchCache=ua;
|
||||||
|
t.export=function(a,b,c,d,e,g){var f=!0;"undefined"===typeof g&&(f=new Promise(function(m){g=m}));switch(e||(e=0)){case 0:var h="reg";if(this.s){var k=D();for(var l in this.register)k[l]=1}else k=this.register;break;case 1:h="cfg";k={doc:0,opt:this.B?1:0};break;case 2:h="map";k=this.map;break;case 3:h="ctx";k=this.h;break;default:"undefined"===typeof c&&g&&g();return}wa(a,b||this,c,h,d,e,k,g);return f};
|
||||||
|
t.import=function(a,b){if(b)switch(E(b)&&(b=JSON.parse(b)),a){case "cfg":this.B=!!b.opt;break;case "reg":this.s=!1;this.register=b;break;case "map":this.map=b;break;case "ctx":this.h=b}};ra(N.prototype);function Aa(a){a=a.data;var b=self._index,c=a.args,d=a.task;switch(d){case "init":d=a.options||{};a=a.factory;b=d.encode;d.cache=!1;b&&0===b.indexOf("function")&&(d.encode=Function("return "+b)());a?(Function("return "+a)()(self),self._index=new self.FlexSearch.Index(d),delete self.FlexSearch):self._index=new N(d);break;default:a=a.id,b=b[d].apply(b,c),postMessage("search"===d?{id:a,msg:b}:{id:a})}};var Ba=0;function R(a){if(!(this instanceof R))return new R(a);var b;a?G(b=a.encode)&&(a.encode=b.toString()):a={};(b=(self||window)._factory)&&(b=b.toString());var c="undefined"===typeof window&&self.exports,d=this;this.A=Ca(b,c,a.worker);this.h=D();if(this.A){if(c)this.A.on("message",function(e){d.h[e.id](e.msg);delete d.h[e.id]});else this.A.onmessage=function(e){e=e.data;d.h[e.id](e.msg);delete d.h[e.id]};this.A.postMessage({task:"init",factory:b,options:a})}}S("add");S("append");S("search");
|
||||||
|
S("update");S("remove");function S(a){R.prototype[a]=R.prototype[a+"Async"]=function(){var b=this,c=[].slice.call(arguments),d=c[c.length-1];if(G(d)){var e=d;c.splice(c.length-1,1)}d=new Promise(function(g){setTimeout(function(){b.h[++Ba]=g;b.A.postMessage({task:a,id:Ba,args:c})})});return e?(d.then(e),this):d}}
|
||||||
|
function Ca(a,b,c){try{var d=b?new (require("worker_threads")["Worker"])(__dirname + "/node/node.js"):a?new Worker(URL.createObjectURL(new Blob(["onmessage="+Aa.toString()],{type:"text/javascript"}))):new Worker(E(c)?c:"worker/worker.js",{type:"module"})}catch(e){}return d};function T(a){if(!(this instanceof T))return new T(a);var b=a.document||a.doc||a,c;this.I=[];this.h=[];this.m=[];this.register=D();this.key=(c=b.key||b.id)&&U(c,this.m)||"id";this.s=C(a.fastupdate);this.o=(c=b.store)&&!0!==c&&[];this.store=c&&D();this.D=(c=b.tag)&&U(c,this.m);this.l=c&&D();this.cache=(c=a.cache)&&new M(c);a.cache=!1;this.A=a.worker;this.async=!1;c=D();var d=b.index||b.field||b;E(d)&&(d=[d]);for(var e=0,g,f=void 0;e<d.length;e++)g=d[e],E(g)||(f=g,g=g.field),f=F(f)?Object.assign({},
|
||||||
|
a,f):a,this.A&&(c[g]=new R(f),c[g].A||(this.A=!1)),this.A||(c[g]=new N(f,this.register)),this.I[e]=U(g,this.m),this.h[e]=g;if(this.o)for(a=b.store,E(a)&&(a=[a]),b=0;b<a.length;b++)this.o[b]=U(a[b],this.m);this.index=c}function U(a,b){for(var c=a.split(":"),d=0,e=0;e<c.length;e++)a=c[e],0<=a.indexOf("[]")&&(a=a.substring(0,a.length-2))&&(b[d]=!0),a&&(c[d++]=a);d<c.length&&(c.length=d);return 1<d?c:c[0]}function V(a,b){if(E(b))a=a[b];else for(var c=0;a&&c<b.length;c++)a=a[b[c]];return a}
|
||||||
|
function W(a,b,c,d,e){a=a[e];if(d===c.length-1)b[e]=a;else if(a)if(a.constructor===Array)for(b=b[e]=Array(a.length),e=0;e<a.length;e++)W(a,b,c,d,e);else b=b[e]||(b[e]=D()),e=c[++d],W(a,b,c,d,e)}function X(a,b,c,d,e,g,f,h){if(a=a[f])if(d===b.length-1){if(a.constructor===Array){if(c[d]){for(b=0;b<a.length;b++)e.add(g,a[b],!0,!0);return}a=a.join(" ")}e.add(g,a,h,!0)}else if(a.constructor===Array)for(f=0;f<a.length;f++)X(a,b,c,d,e,g,f,h);else f=b[++d],X(a,b,c,d,e,g,f,h)}t=T.prototype;
|
||||||
|
t.add=function(a,b,c){F(a)&&(b=a,a=V(b,this.key));if(b&&(a||0===a)){if(!c&&this.register[a])return this.update(a,b);for(var d=0,e,g;d<this.h.length;d++)g=this.h[d],e=this.I[d],E(e)&&(e=[e]),X(b,e,this.m,0,this.index[g],a,e[0],c);if(this.D){d=V(b,this.D);e=D();E(d)&&(d=[d]);g=0;for(var f;g<d.length;g++)if(f=d[g],!e[f]&&(e[f]=1,f=this.l[f]||(this.l[f]=[]),!c||!f.includes(a)))if(f[f.length]=a,this.s){var h=this.register[a]||(this.register[a]=[]);h[h.length]=f}}if(this.store&&(!c||!this.store[a])){if(this.o){var k=
|
||||||
|
D();for(c=0;c<this.o.length;c++)d=this.o[c],E(d)?k[d]=b[d]:W(b,k,d,0,d[0])}this.store[a]=k||b}}return this};t.append=function(a,b){return this.add(a,b,!0)};t.update=function(a,b){return this.remove(a).add(a,b)};
|
||||||
|
t.remove=function(a){F(a)&&(a=V(a,this.key));if(this.register[a]){for(var b=0;b<this.h.length&&(this.index[this.h[b]].remove(a,!this.A),!this.s);b++);if(this.D&&!this.s)for(var c in this.l){b=this.l[c];var d=b.indexOf(a);-1!==d&&(1<b.length?b.splice(d,1):delete this.l[c])}this.store&&delete this.store[a];delete this.register[a]}return this};
|
||||||
|
t.search=function(a,b,c,d){c||(!b&&F(a)?(c=a,a=""):F(b)&&(c=b,b=0));var e=[],g=[],f,h=0;if(c)if(c.constructor===Array){var k=c;c=null}else{a=c.query||a;k=(f=c.pluck)||c.index||c.field;var l=c.tag;var m=this.store&&c.enrich;var p="and"===c.bool;b=c.limit||b||100;var n=c.offset||0;if(l&&(E(l)&&(l=[l]),!a)){g=0;for(f=void 0;g<l.length;g++)if(f=Da.call(this,l[g],b,n,m))e[e.length]=f,h++;return h?e:[]}E(k)&&(k=[k])}k||(k=this.h);p=p&&(1<k.length||l&&1<l.length);for(var q=!d&&(this.A||this.async)&&[],r=
|
||||||
|
0,u=void 0,A=void 0,w=void 0;r<k.length;r++)if(w=void 0,A=k[r],E(A)||(w=A,A=w.field,a=w.query||a,b=w.limit||b,m=w.enrich||m),q)q[r]=this.index[A].searchAsync(a,b,w||c);else{d?u=d[r]:u=this.index[A].search(a,b,w||c);w=u&&u.length;if(l&&w){var z=[],B=0;p&&(z[0]=[u]);var Y=0,H=void 0;for(H=void 0;Y<l.length;Y++)if(H=l[Y],w=(H=this.l[H])&&H.length)B++,z[z.length]=p?[H]:H;B&&(u=p?sa(z,b||100,n||0):ta(u,z),w=u.length)}if(w)g[h]=A,e[h++]=u;else if(p)return[]}if(q){var Ka=this;return new Promise(function(La){Promise.all(q).then(function(Ma){La(Ka.search(a,
|
||||||
|
b,c,Ma))})})}if(!h)return[];if(f&&(!m||!this.store))return e[0];l=0;for(n=void 0;l<g.length;l++){n=e[l];n.length&&m&&(n=Ea.call(this,n));if(f)return n;e[l]={field:g[l],result:n}}return e};function Da(a,b,c,d){var e=this.l[a],g=e&&e.length-c;if(g&&0<g){if(g>b||c)e=e.slice(c,c+b);d&&(e=Ea.call(this,e));return{tag:a,result:e}}}function Ea(a){for(var b=Array(a.length),c=0,d;c<a.length;c++)d=a[c],b[c]={id:d,doc:this.store[d]};return b}t.contain=function(a){return!!this.register[a]};t.get=function(a){return this.store[a]};
|
||||||
|
t.set=function(a,b){this.store[a]=b;return this};t.searchCache=ua;t.export=function(a,b,c,d,e,g){var f;"undefined"===typeof g&&(f=new Promise(function(p){g=p}));e||(e=0);d||(d=0);if(d<this.h.length){var h=this.h[d],k=this.index[h];b=this;setTimeout(function(){k.export(a,b,e?h:"",d,e++,g)||(d++,e=1,b.export(a,b,h,d,e,g))})}else{switch(e){case 1:var l="tag";var m=this.l;c=null;break;case 2:l="store";m=this.store;c=null;break;default:g();return}wa(a,this,c,l,d,e,m,g)}return f};
|
||||||
|
t.import=function(a,b){if(b)switch(E(b)&&(b=JSON.parse(b)),a){case "tag":this.l=b;break;case "reg":this.s=!1;this.register=b;a=0;for(var c;a<this.h.length;a++)c=this.index[this.h[a]],c.register=b,c.s=!1;break;case "store":this.store=b;break;default:a=a.split("."),c=a[0],a=a[1],c&&a&&this.index[c].import(a,b)}};ra(T.prototype);var Ga={encode:Fa,G:!1,H:""},Ha=[J("[\u00e0\u00e1\u00e2\u00e3\u00e4\u00e5]"),"a",J("[\u00e8\u00e9\u00ea\u00eb]"),"e",J("[\u00ec\u00ed\u00ee\u00ef]"),"i",J("[\u00f2\u00f3\u00f4\u00f5\u00f6\u0151]"),"o",J("[\u00f9\u00fa\u00fb\u00fc\u0171]"),"u",J("[\u00fd\u0177\u00ff]"),"y",J("\u00f1"),"n",J("[\u00e7c]"),"k",J("\u00df"),"s",J(" & ")," and "];function Fa(a){var b=a=""+a;b.normalize&&(b=b.normalize("NFD").replace(la,""));return ja.call(this,b.toLowerCase(),!a.normalize&&Ha)};var Ja={encode:Ia,G:!1,H:"strict"},Na=/[^a-z0-9]+/,Oa={b:"p",v:"f",w:"f",z:"s",x:"s","\u00df":"s",d:"t",n:"m",c:"k",g:"k",j:"k",q:"k",i:"e",y:"e",u:"o"};function Ia(a){a=Fa.call(this,a).join(" ");var b=[];if(a)for(var c=a.split(Na),d=c.length,e=0,g,f=0;e<d;e++)if((a=c[e])&&(!this.filter||!this.filter[a])){g=a[0];for(var h=Oa[g]||g,k=h,l=1;l<a.length;l++)g=a[l],(g=Oa[g]||g)&&g!==k&&(h+=g,k=g);b[f++]=h}return b};var Qa={encode:Pa,G:!1,H:""},Ra=[J("ae"),"a",J("oe"),"o",J("sh"),"s",J("th"),"t",J("ph"),"f",J("pf"),"f",J("(?![aeo])h(?![aeo])"),"",J("(?!^[aeo])h(?!^[aeo])"),""];function Pa(a,b){a&&(a=Ia.call(this,a).join(" "),2<a.length&&(a=I(a,Ra)),b||(1<a.length&&(a=na(a)),a&&(a=a.split(" "))));return a||[]};var Ta={encode:Sa,G:!1,H:""},Ua=J("(?!\\b)[aeo]");function Sa(a){a&&(a=Pa.call(this,a,!0),1<a.length&&(a=a.replace(Ua,"")),1<a.length&&(a=na(a)),a&&(a=a.split(" ")));return a||[]};K["latin:default"]=pa;K["latin:simple"]=Ga;K["latin:balance"]=Ja;K["latin:advanced"]=Qa;K["latin:extra"]=Ta;var Z={Index:N,Document:T,Worker:R,registerCharset:function(a,b){K[a]=b},registerLanguage:function(a,b){qa[a]=b}},Va;(Va=self.define)&&Va.amd?Va([],function(){return Z}):self.exports?self.exports=Z:self.FlexSearch=Z;}(this));
|
||||||
141
assets/js/main.js
Normal file
141
assets/js/main.js
Normal file
|
|
@ -0,0 +1,141 @@
|
||||||
|
(function(){
|
||||||
|
// Progress bar - debounced to prevent layout thrashing
|
||||||
|
const bar = document.getElementById('progress-bar');
|
||||||
|
let scrollTimeout;
|
||||||
|
const onScroll = () => {
|
||||||
|
if (!bar) return;
|
||||||
|
clearTimeout(scrollTimeout);
|
||||||
|
scrollTimeout = setTimeout(() => {
|
||||||
|
const scrollTop = window.scrollY;
|
||||||
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
||||||
|
const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
|
||||||
|
bar.style.width = progress + '%';
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||||||
|
onScroll();
|
||||||
|
|
||||||
|
// Dark mode toggle
|
||||||
|
const darkToggle = document.getElementById('dark-toggle');
|
||||||
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
const setToggleUI = (isDark) => {
|
||||||
|
if (!darkToggle) return;
|
||||||
|
darkToggle.textContent = isDark ? '☀️' : '🌙';
|
||||||
|
darkToggle.setAttribute('aria-pressed', isDark ? 'true' : 'false');
|
||||||
|
darkToggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
|
||||||
|
};
|
||||||
|
const applyTheme = (isDark) => {
|
||||||
|
document.documentElement.classList.toggle('dark', isDark);
|
||||||
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||||
|
setToggleUI(isDark);
|
||||||
|
};
|
||||||
|
const savedTheme = localStorage.getItem('theme');
|
||||||
|
const initialDark = savedTheme ? savedTheme === 'dark' : prefersDark.matches;
|
||||||
|
applyTheme(initialDark);
|
||||||
|
if (darkToggle) {
|
||||||
|
darkToggle.addEventListener('click', () => applyTheme(!document.documentElement.classList.contains('dark')));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accessibility controls
|
||||||
|
const fontInc = document.getElementById('font-inc');
|
||||||
|
const fontDec = document.getElementById('font-dec');
|
||||||
|
const contrastToggle = document.getElementById('contrast-toggle');
|
||||||
|
const motionToggle = document.getElementById('motion-toggle');
|
||||||
|
|
||||||
|
const applyA11y = () => {
|
||||||
|
const size = parseFloat(localStorage.getItem('fontScale') || '1');
|
||||||
|
const highContrast = localStorage.getItem('highContrast') === '1';
|
||||||
|
const reduceMotion = localStorage.getItem('reduceMotion') === '1';
|
||||||
|
|
||||||
|
// Apply all changes in a single batch to prevent layout thrashing
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.documentElement.style.setProperty('font-size', (size * 100) + '%');
|
||||||
|
document.documentElement.classList.toggle('contrast', highContrast);
|
||||||
|
document.documentElement.classList.toggle('reduce-motion', reduceMotion);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
applyA11y();
|
||||||
|
|
||||||
|
if (fontInc) fontInc.addEventListener('click', () => {
|
||||||
|
const size = Math.min(1.5, (parseFloat(localStorage.getItem('fontScale') || '1') + 0.1));
|
||||||
|
localStorage.setItem('fontScale', String(size));
|
||||||
|
applyA11y();
|
||||||
|
});
|
||||||
|
if (fontDec) fontDec.addEventListener('click', () => {
|
||||||
|
const size = Math.max(0.8, (parseFloat(localStorage.getItem('fontScale') || '1') - 0.1));
|
||||||
|
localStorage.setItem('fontScale', String(size));
|
||||||
|
applyA11y();
|
||||||
|
});
|
||||||
|
if (contrastToggle) contrastToggle.addEventListener('click', () => {
|
||||||
|
const v = localStorage.getItem('highContrast') === '1' ? '0' : '1';
|
||||||
|
localStorage.setItem('highContrast', v);
|
||||||
|
applyA11y();
|
||||||
|
});
|
||||||
|
if (motionToggle) motionToggle.addEventListener('click', () => {
|
||||||
|
const v = localStorage.getItem('reduceMotion') === '1' ? '0' : '1';
|
||||||
|
localStorage.setItem('reduceMotion', v);
|
||||||
|
applyA11y();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mobile navigation toggle
|
||||||
|
const hamburger = document.getElementById('hamburger');
|
||||||
|
const primaryNav = document.getElementById('primary-nav');
|
||||||
|
if (hamburger && primaryNav) {
|
||||||
|
// Ensure initial aria state
|
||||||
|
hamburger.setAttribute('aria-expanded', primaryNav.classList.contains('hidden') ? 'false' : 'true');
|
||||||
|
hamburger.addEventListener('click', () => {
|
||||||
|
const isHidden = primaryNav.classList.toggle('hidden');
|
||||||
|
hamburger.classList.toggle('open', !isHidden);
|
||||||
|
hamburger.setAttribute('aria-expanded', isHidden ? 'false' : 'true');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// A11y popover (button + menu)
|
||||||
|
const a11yToggle = document.getElementById('a11y-toggle');
|
||||||
|
const a11yMenu = document.getElementById('a11y-menu');
|
||||||
|
if (a11yToggle && a11yMenu) {
|
||||||
|
const closeMenu = () => {
|
||||||
|
a11yMenu.classList.add('hidden');
|
||||||
|
a11yToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
};
|
||||||
|
const openMenu = () => {
|
||||||
|
a11yMenu.classList.remove('hidden');
|
||||||
|
a11yToggle.setAttribute('aria-expanded', 'true');
|
||||||
|
};
|
||||||
|
a11yToggle.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const isHidden = a11yMenu.classList.contains('hidden');
|
||||||
|
if (isHidden) openMenu(); else closeMenu();
|
||||||
|
});
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!a11yMenu.classList.contains('hidden')) {
|
||||||
|
const within = a11yMenu.contains(e.target) || a11yToggle.contains(e.target);
|
||||||
|
if (!within) closeMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') closeMenu();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font toggle for footer
|
||||||
|
const fontToggle = document.getElementById('font-toggle');
|
||||||
|
if (fontToggle) {
|
||||||
|
const applyFontPref = (enabled) => {
|
||||||
|
document.documentElement.classList.toggle('system-fonts', enabled);
|
||||||
|
fontToggle.textContent = enabled ? 'Web Fonts' : 'System Fonts';
|
||||||
|
fontToggle.setAttribute('aria-pressed', enabled ? 'true' : 'false');
|
||||||
|
};
|
||||||
|
|
||||||
|
fontToggle.addEventListener('click', () => {
|
||||||
|
const currentlyEnabled = document.documentElement.classList.contains('system-fonts');
|
||||||
|
const next = !currentlyEnabled;
|
||||||
|
applyFontPref(next);
|
||||||
|
localStorage.setItem('systemFonts', next ? '1' : '0');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Apply saved font preference
|
||||||
|
const savedFontPref = localStorage.getItem('systemFonts');
|
||||||
|
applyFontPref(savedFontPref === '1');
|
||||||
|
}
|
||||||
|
})();
|
||||||
195
assets/js/search.js
Normal file
195
assets/js/search.js
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
(function() {
|
||||||
|
let searchIndex = null;
|
||||||
|
let flexSearch = null;
|
||||||
|
|
||||||
|
// Initialize search when DOM is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', initializeSearch);
|
||||||
|
|
||||||
|
async function initializeSearch() {
|
||||||
|
const searchInput = document.getElementById('q');
|
||||||
|
const searchResults = document.getElementById('search-results');
|
||||||
|
|
||||||
|
if (!searchInput) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// FlexSearch should already be loaded via script tag
|
||||||
|
if (typeof FlexSearch === 'undefined') {
|
||||||
|
throw new Error('FlexSearch library not found. Make sure flexsearch.min.js is loaded.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load search index
|
||||||
|
const response = await fetch('/search.json');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to load search index: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
searchIndex = await response.json();
|
||||||
|
|
||||||
|
if (!Array.isArray(searchIndex) || searchIndex.length === 0) {
|
||||||
|
console.warn('Search index is empty or invalid');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize FlexSearch
|
||||||
|
flexSearch = new FlexSearch.Index({
|
||||||
|
tokenize: 'forward',
|
||||||
|
cache: true,
|
||||||
|
resolution: 9
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add documents to search index
|
||||||
|
searchIndex.forEach((item, index) => {
|
||||||
|
if (item && item.title) {
|
||||||
|
const searchText = `${item.title} ${item.description || ''} ${item.content || ''} ${(item.tags || []).join(' ')}`;
|
||||||
|
flexSearch.add(index, searchText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set up search event listeners
|
||||||
|
setupSearchListeners(searchInput, searchResults);
|
||||||
|
|
||||||
|
console.log(`Search initialized with ${searchIndex.length} items`);
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search initialization failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupSearchListeners(searchInput, searchResults) {
|
||||||
|
let searchTimeout;
|
||||||
|
|
||||||
|
searchInput.addEventListener('input', (e) => {
|
||||||
|
clearTimeout(searchTimeout);
|
||||||
|
const query = e.target.value.trim();
|
||||||
|
|
||||||
|
if (query.length < 2) {
|
||||||
|
hideSearchResults(searchResults);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
performSearch(query, searchResults);
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
searchInput.addEventListener('focus', (e) => {
|
||||||
|
if (e.target.value.trim().length >= 2) {
|
||||||
|
performSearch(e.target.value.trim(), searchResults);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide results when clicking outside
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!searchInput.contains(e.target) && !searchResults?.contains(e.target)) {
|
||||||
|
hideSearchResults(searchResults);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
searchInput.addEventListener('keydown', (e) => {
|
||||||
|
if (!searchResults) return;
|
||||||
|
|
||||||
|
const items = searchResults.querySelectorAll('a');
|
||||||
|
const currentFocus = document.activeElement;
|
||||||
|
let currentIndex = Array.from(items).indexOf(currentFocus);
|
||||||
|
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
currentIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
|
||||||
|
items[currentIndex]?.focus();
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
currentIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
|
||||||
|
items[currentIndex]?.focus();
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
hideSearchResults(searchResults);
|
||||||
|
searchInput.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function performSearch(query, searchResults) {
|
||||||
|
if (!flexSearch || !searchIndex) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const results = flexSearch.search(query, { limit: 8 });
|
||||||
|
const items = results.map(index => searchIndex[index]);
|
||||||
|
|
||||||
|
displaySearchResults(items, query, searchResults);
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Search failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displaySearchResults(items, query, searchResults) {
|
||||||
|
if (!searchResults) {
|
||||||
|
// Create search results container if it doesn't exist
|
||||||
|
searchResults = createSearchResultsContainer();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.length === 0) {
|
||||||
|
searchResults.innerHTML = `
|
||||||
|
<div class="p-4 text-gray-500">
|
||||||
|
No results found for "${query}"
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else {
|
||||||
|
searchResults.innerHTML = items.map(item => `
|
||||||
|
<a href="${item.id}" class="block p-3 hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-700 last:border-b-0">
|
||||||
|
<div class="font-medium text-gray-900 dark:text-gray-100">${highlightMatch(item.title, query)}</div>
|
||||||
|
<div class="text-sm text-gray-600 dark:text-gray-400 mt-1">${highlightMatch(item.description || item.content, query)}</div>
|
||||||
|
${item.tags.length > 0 ? `
|
||||||
|
<div class="flex flex-wrap gap-1 mt-2">
|
||||||
|
${item.tags.slice(0, 3).map(tag => `<span class="text-xs px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">#${tag}</span>`).join('')}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
</a>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
searchResults.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSearchResultsContainer() {
|
||||||
|
const searchForm = document.querySelector('form[role="search"]');
|
||||||
|
if (!searchForm) return null;
|
||||||
|
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.id = 'search-results';
|
||||||
|
container.className = 'absolute top-full left-0 right-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-b-md shadow-lg z-50 max-h-96 overflow-y-auto hidden';
|
||||||
|
|
||||||
|
searchForm.style.position = 'relative';
|
||||||
|
searchForm.appendChild(container);
|
||||||
|
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideSearchResults(searchResults) {
|
||||||
|
if (searchResults) {
|
||||||
|
searchResults.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightMatch(text, query) {
|
||||||
|
if (!text || !query) return text || '';
|
||||||
|
|
||||||
|
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
||||||
|
return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800">$1</mark>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadScript(src) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = src;
|
||||||
|
script.onload = () => {
|
||||||
|
console.log('Script loaded successfully:', src);
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
script.onerror = (error) => {
|
||||||
|
console.error('Script failed to load:', src, error);
|
||||||
|
reject(error);
|
||||||
|
};
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
117
assets/js/webmentions.js
Normal file
117
assets/js/webmentions.js
Normal file
|
|
@ -0,0 +1,117 @@
|
||||||
|
(function() {
|
||||||
|
// Webmentions functionality
|
||||||
|
async function loadWebmentions() {
|
||||||
|
const webmentionsContainer = document.getElementById('webmentions-list');
|
||||||
|
if (!webmentionsContainer) return;
|
||||||
|
|
||||||
|
const currentUrl = window.location.href;
|
||||||
|
const domain = window.location.hostname;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Fetch webmentions from webmention.io
|
||||||
|
const response = await fetch(`https://webmention.io/api/mentions.jf2?target=${encodeURIComponent(currentUrl)}&per-page=50`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.children && data.children.length > 0) {
|
||||||
|
displayWebmentions(data.children, webmentionsContainer);
|
||||||
|
} else {
|
||||||
|
showEmptyState(webmentionsContainer);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('Failed to load webmentions:', error);
|
||||||
|
showEmptyState(webmentionsContainer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayWebmentions(mentions, container) {
|
||||||
|
const likes = mentions.filter(m => m['wm-property'] === 'like-of');
|
||||||
|
const reposts = mentions.filter(m => m['wm-property'] === 'repost-of');
|
||||||
|
const replies = mentions.filter(m => m['wm-property'] === 'in-reply-to');
|
||||||
|
const bookmarks = mentions.filter(m => m['wm-property'] === 'bookmark-of');
|
||||||
|
const general = mentions.filter(m => m['wm-property'] === 'mention-of');
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
// Show counts
|
||||||
|
if (likes.length > 0 || reposts.length > 0 || bookmarks.length > 0) {
|
||||||
|
html += '<div class="flex items-center space-x-4 mb-6 text-sm text-gray-600 dark:text-gray-400">';
|
||||||
|
if (likes.length > 0) html += `<span>❤️ ${likes.length} like${likes.length !== 1 ? 's' : ''}</span>`;
|
||||||
|
if (reposts.length > 0) html += `<span>🔄 ${reposts.length} repost${reposts.length !== 1 ? 's' : ''}</span>`;
|
||||||
|
if (bookmarks.length > 0) html += `<span>🔖 ${bookmarks.length} bookmark${bookmarks.length !== 1 ? 's' : ''}</span>`;
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show replies and mentions
|
||||||
|
const conversationMentions = [...replies, ...general].sort((a, b) => new Date(a.published) - new Date(b.published));
|
||||||
|
|
||||||
|
if (conversationMentions.length > 0) {
|
||||||
|
html += '<div class="space-y-4">';
|
||||||
|
conversationMentions.forEach(mention => {
|
||||||
|
html += renderMention(mention);
|
||||||
|
});
|
||||||
|
html += '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderMention(mention) {
|
||||||
|
const author = mention.author || {};
|
||||||
|
const content = mention.content || {};
|
||||||
|
const published = mention.published ? new Date(mention.published).toLocaleDateString() : '';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<article class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
${author.photo ?
|
||||||
|
`<img src="${author.photo}" alt="${author.name || 'Anonymous'}" class="w-10 h-10 rounded-full" />` :
|
||||||
|
`<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-medium">${(author.name || 'A')[0].toUpperCase()}</span>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center space-x-2 text-sm">
|
||||||
|
<a href="${author.url || '#'}" class="font-medium hover:text-blue-600" target="_blank" rel="noopener">
|
||||||
|
${author.name || 'Anonymous'}
|
||||||
|
</a>
|
||||||
|
<span class="text-gray-500">
|
||||||
|
${mention['wm-property'] === 'in-reply-to' ? 'replied' : 'mentioned this'}
|
||||||
|
</span>
|
||||||
|
${published ? `<time class="text-gray-500">${published}</time>` : ''}
|
||||||
|
</div>
|
||||||
|
${content.text ?
|
||||||
|
`<div class="mt-2 text-gray-700 dark:text-gray-300">
|
||||||
|
${content.text.length > 280 ? content.text.substring(0, 280) + '...' : content.text}
|
||||||
|
</div>` : ''
|
||||||
|
}
|
||||||
|
<div class="mt-2">
|
||||||
|
<a href="${mention.url}" class="text-sm text-blue-600 hover:text-blue-800" target="_blank" rel="noopener">
|
||||||
|
View original
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEmptyState(container) {
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="text-center py-8 text-gray-500">
|
||||||
|
<p>No webmentions yet. Be the first to respond!</p>
|
||||||
|
<p class="text-sm mt-2">
|
||||||
|
<a href="https://indieweb.org/Webmention" target="_blank" rel="noopener" class="text-blue-600 hover:text-blue-800">
|
||||||
|
Learn about webmentions
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize webmentions when DOM is ready
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', loadWebmentions);
|
||||||
|
} else {
|
||||||
|
loadWebmentions();
|
||||||
|
}
|
||||||
|
})();
|
||||||
BIN
assets/og-default.png
Executable file
BIN
assets/og-default.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/profile.jpg
Executable file
BIN
assets/profile.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
assets/retro-stars.png
Executable file
BIN
assets/retro-stars.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
39
blog.njk
Executable file
39
blog.njk
Executable file
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
pagination:
|
||||||
|
data: collections.posts
|
||||||
|
size: 10
|
||||||
|
alias: posts
|
||||||
|
permalink: "/blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||||
|
title: Blog
|
||||||
|
---
|
||||||
|
<div class="h-feed">
|
||||||
|
<h1 class="p-name text-2xl font-bold mb-6">Blog</h1>
|
||||||
|
<a class="u-url hidden" href="{{ site.url }}/blog/"></a>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
{% for post in posts %}
|
||||||
|
<article class="h-entry border-b pb-6">
|
||||||
|
<h2 class="p-name text-xl font-semibold"><a class="u-url" href="{{ post.url }}">{{ post.data.title }}</a></h2>
|
||||||
|
<time class="dt-published text-sm text-gray-500 dark:text-gray-400" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
|
||||||
|
<div class="p-summary mt-2 text-gray-700 dark:text-gray-300">{{ post.data.description or (post.templateContent | striptags | truncate(160)) }}</div>
|
||||||
|
<div class="mt-2 text-sm space-x-2">
|
||||||
|
{% for tag in post.data.tags %}
|
||||||
|
<a class="p-category px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800" href="/tags/{{ tag | slug }}/">#{{ tag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="mt-8 flex items-center justify-between" aria-label="Pagination">
|
||||||
|
{% if pagination.href.previous %}
|
||||||
|
<a class="px-3 py-2 border rounded" href="{{ pagination.href.previous }}">Newer</a>
|
||||||
|
{% else %}
|
||||||
|
<span></span>
|
||||||
|
{% endif %}
|
||||||
|
{% if pagination.href.next %}
|
||||||
|
<a class="px-3 py-2 border rounded" href="{{ pagination.href.next }}">Older</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
58
blog/fandom-sucks.md
Normal file
58
blog/fandom-sucks.md
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
---
|
||||||
|
layout: layouts/post.njk
|
||||||
|
title: Fandom Sucks Now, and Other Laments
|
||||||
|
author: Agnes the Alien
|
||||||
|
date: 2026-03-14
|
||||||
|
description: You know, these days, I am getting sort of tired. I don’t really know how else to describe it, so we’ll just go with the simplicity of I’m really just kind of tired. And the worst, most unsightly aspect of it all is this - I don’t really know what I’m tired of. I can give you a list of reasons without hesitation - 1) I spend my entire time in fandom....
|
||||||
|
tags: [fandom, essays, media]
|
||||||
|
category: fandom
|
||||||
|
---
|
||||||
|
<i><b>Content warnings: child sex trafficking/PTSD.
|
||||||
|
</b></i>
|
||||||
|
|
||||||
|
You know, these days, I am getting sort of tired.
|
||||||
|
|
||||||
|
I don’t really know how else to describe it, so we’ll just go with the simplicity of *I’m really just kind of tired.* And the worst, most unsightly aspect of it all is this: I don’t really know what I’m tired _of._
|
||||||
|
|
||||||
|
I can give you a list of reasons without hesitation:
|
||||||
|
|
||||||
|
1) I spend my entire time in fandom, because fandom is my passion. I run a fanfiction archive with ~360 users and around 500 different fandoms. Fandom is, quite literally, what I have dedicated my life to for the past fifteen years. And fandom, apparently, fucking hates me. Yeah, so it turns out that if you’re different from what is considered Normal and Acceptable in any way, you deserve to die and are subhuman, according to others. This widespread harassment is reminiscent of my days being beaten up and nearly murdered as a child at my Waldorf elementary school—unfathomable, needless cruelty fueled by a hatred of anything they don’t want to understand. So what if I like to cope by writing dark fanfiction? So what if I just fucking like dark fanfiction? What are you going to do about it? Stop me?
|
||||||
|
|
||||||
|
But unfortunately, there are actual repercussions for openly liking dark content. People can and will try to ruin your life, your source of income, your relationships, your safety. And I’m a sensitive alien, okay! I’m a goddamn child trafficking survivor and to be called a pedophile over fictional aliens shatters my soul in ways no one can even begin to comprehend unless they’re in the same situation.
|
||||||
|
|
||||||
|
I shouldn’t say that, probably. I shouldn’t let people know about that weakness. It’s like a KICK ME sign taped to my back, a big red arrow pointing right to my Achilles heel. Come and cut me. But I am in a human body in this life, and so I am human. And as a human thing, the comparison still will never leave me. It haunts, vivisects. I know who I am, and I cannot control how others perceive me, and I cannot handle being seen as a being of the same depravity of the people who hurt me. I just can’t.
|
||||||
|
|
||||||
|
I think this is a valid reason to be tired. It is still only one facet of the crystal.
|
||||||
|
|
||||||
|
I do so much for fandom. What does fandom do for me? It brought me my beloved. My amazing friends. But what else? What lately?
|
||||||
|
|
||||||
|
2) I just do nothing. I have nothing to do all day. Oh, sure, I have tons to do, actually. I have ideas and I have projects and I have embroidery supplies and music software and cute little $5 kits from the store where you knit an ugly ass ladybug. I simply never have the wherewithal to actually do any of them. Is it the fatigue and pain I am constantly in? Am I just depressed and unmotivated because everything seems worthless? Is my psychosis acting up again? Do I need to have my meds adjusted, is what my family will say, if I tell them I’m struggling with motivation, so of course I don’t tell them.
|
||||||
|
|
||||||
|
I can’t ever get the spark going. Like a wind-up toy that just gets tighter and tigher until it snaps, never moving forward. And I have no goddamn idea why.
|
||||||
|
|
||||||
|
I’m tired of being so tired.
|
||||||
|
|
||||||
|
3) My family is aging and ill and my mother will not go to the doctor because she is scared. She’s sixty one, her thyroid is dead, she needs to be on medication for it (hypocritical of me perhaps, since my thyroid is also dead and I don’t take _my_ synthroid, but I’m going to start!!!), but she refuses to get a perscription. I’m terrified about what will happen when her body can’t take it anymore.
|
||||||
|
|
||||||
|
My nana has anxiety worse than mine. It’s so bad she stays up multiple nights having intrusive thoughts. She refuses to take any sort of medication for this or bring it up to her doctor. I’m terrified about what will happen when she gets too terrified.
|
||||||
|
|
||||||
|
I’m tired of being so scared.
|
||||||
|
|
||||||
|
4) Oh, yeah, and there’s that whole I-have-dissociative-identity-disorder-and-CPTSD thing. I’ve been having flashbacks almost every day lately. I’m tired of feeling broken. I’m tired of letting it break me, but I just don’t know how to stop thinking about it, writing about it, recreating it in fiction, thinking about it, throwing up about it, obsessing over it, thinking about it. I’m obsessed with it all, the pain that I went through and the siphoning of my innocence and the portioning of my body and so on. It’s all I ever think about. When will it stop? When will I stop feeling it?
|
||||||
|
|
||||||
|
Torturing fictional characters in the same way makes it feel better for a little while. Like a band-aid over an autopsy incison.
|
||||||
|
|
||||||
|
I guess maybe I’m just tired of all of it. Of this frozen life I’m living. I keep thinking something needs to change, and I keep trying to make small changes to my daily routine, you know, build new habits, start a schedule, but it’s all futile, I fall out of everything eventually. I really need to start preparing for my future, because I guess I’m going to have one? And preparing for my future is not sitting here writing toxic yuri fanfiction all day, as fun as it is. I don’t know. I keep clawing at the walls of my brain, trying to find a solution.
|
||||||
|
|
||||||
|
I see a lot of my friends taking steps back from fandom these days. A lot of them are also creatives, and they’re choosing to focus more on original works instead. I find that option more and more appealing with each cruel post I see pass my Tumblr dashboard. I can’t decide if I really want to step back from fandom, or if I only feel a need to do so because still being so deeply entrenched in fandom when everyone else I know has moved on makes me feel a little self-conscious, and I feel like I have to follow suit or I will be left behind. But I suspect that while my insecurities are probably a factor, it has more to do with the harassment I’ve been facing over being a Nahla/Caleb(/Anisha) shipper, and the terrible things people have said about me because of it.
|
||||||
|
|
||||||
|
I don’t want to enjoy things in fear. I have my own personal archive using the AO3 software now; I rarely post to AO3 outside of exchanges. I keep my fics locked down to my friends and people I trust not to judge me. And… I’m someone who loves attention! I kind of need it to survive, clinically. But I just struggle to stay sane when horrible accusation after horrible accusation is thrown at me, and all I’m trying to do is enjoy myself in peace. I don’t want to have to hide or water myself down to be accepted, but unfortunately that is the reality of the world. We’re all paranoid, we’re all pointing fingers and pointing fingers and gnawing off fingers, we’re all cruel. I just can’t take it anymore.
|
||||||
|
|
||||||
|
The issue is that I run that aforementioned somewhat-popular fanfiction archive. And I enjoy running this archive! I want to do so much more with it! And the people I have met through it are absolutely wonderful. I don’t want to step back from Sunset and I don’t see myself doing so in the future. At the same time, though, I think Sunset and Dreamwidth and my tiny little Discord server will be the extent of my fandom participation for a while.
|
||||||
|
|
||||||
|
I want to focus on my original works and build a real career in writing. I want to make video games and finish my novella I’ve been working on for a year now that is still only at 4,400 words and I want to make music and I want to learn how to hand quilt and I want to have more things in my life than just television and fictional characters, but it’s kind of hard for me to focus on anything besides them. Or – it has been in the past. Maybe I’m finally so disillusioned with fandom that I’ll be able to focus on something else for a change. I don’t know.
|
||||||
|
|
||||||
|
I don’t really know how to talk to people outside of fandom, and in all honesty, I don’t know a lot about myself outside of it just in general. I don’t have much of an identity beyond that, at least in my own perception of myself, and that’s… well, obviously unhealthy. I want to go back to school and go to writer’s groups in the city and I want a life worth living. I want to make websites that aren’t AO3-based or shoddy things I threw together based on outdated Rails guides; I want to actually _know_ what I’m doing with web development, because it’s something I find very fun and rewarding.
|
||||||
|
|
||||||
|
I just so desperately want things to change, but I don’t know how to change them. The only thing I can think of for now is that I must focus on building a life for myself that isn’t attached to a fictional character. It’s long overdue.
|
||||||
|
|
||||||
39
blog/traumaloop.md
Normal file
39
blog/traumaloop.md
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
layout: layouts/post.njk
|
||||||
|
title: (Nus Braka Voice) how's that for a trauma loop?
|
||||||
|
author: Agnes the Alien
|
||||||
|
date: 2026-03-03
|
||||||
|
description: I’ve been thinking a lot lately about my creativity. I don’t do a lot of original work – Ice Dancer was my first poem in… way too long, maybe a YEAR? – I’ve only been focusing on fanworks. I do have ideas for original works! Many, in fact! But every time I sit down to write, there’s a block. I don’t really know why.
|
||||||
|
tags: [personal, creativity]
|
||||||
|
category: personal
|
||||||
|
---
|
||||||
|
<i><b>Content warning: childhood sexual abuse & trafficking.</b></i>
|
||||||
|
|
||||||
|
I’ve been thinking a lot lately about my creativity. I don’t do a lot of original work – [Ice Dancer](https://kissing.computer/2026/02/27/poem-ice-dancer/) was my first poem in… way too long, maybe a YEAR? – I’ve only been focusing on fanworks. I do have ideas for original works! Many, in fact! But every time I sit down to write, there’s a block. I don’t really know why.
|
||||||
|
|
||||||
|
Maybe it’s that I feel like my original writing is futile.
|
||||||
|
|
||||||
|
I’ve been published before. But because I was suicidal for so long and genuinely didn’t plan on being alive for it to matter, I never really learned how to separate my fandom persona from my professional writing self. And that was a bad idea. When I started to finally heal – around the time I started using dark fiction to cope with past trauma – I realized that the people I surrounded myself with would try to ruin my career and life if they could tie me to that pen name. So I had to rebuild, and none of my previously published works could be tied to my current pen name. I had to remake everything – my author site, my itch.io, etc. Some of my favorite creations can no longer be tied to me because of this, including a piece of interactive art that means… well… just about everything to me. I had about 2k followers on those accounts; now I barely have 200. It all just feels utterly useless.
|
||||||
|
|
||||||
|
I also feel like a lot of my original work is just horribly repetitive these days. I use the same metaphors and the same pains and the same words and the same events, over and over and over again.
|
||||||
|
|
||||||
|
I’m stuck. And not just creatively.
|
||||||
|
|
||||||
|
I’m chained to these things. I’m living a time loop where I’m forced to re-experience them over and over again every day of my pitiful damn existence. I’m being buried alive and when I suffocate I’ll wake up in a television show but for me I really have run out of time!!! Or at least it feels that way. I try not to let fiction write my story for me but it is a little bit easier that way.
|
||||||
|
|
||||||
|
Even my fanworks, honestly, to a lesser extent. I find myself hyperfixated on portrayals of childhood sexual abuse in fiction, and finding ways to project my experiences with it onto characters who haven’t explicitly been through it but also have backstories that would realistically involve it. Take Caleb Mir from Star Trek: SFA for example; he’s been on his own, on the run, and in and out of prison since age six. You don’t escape that unmolested.
|
||||||
|
|
||||||
|
I find myself projecting onto him deeply. I find myself getting unhealthily attached to him. I think about this stuff way way too much. I see myself in him, even if I shouldn’t, even if my life has been paradise compared to his. Thinking about characters having the same pain I have, and overcoming it, gives me some illusion of hope’s tangibility. Illusion, delusion? I don’t know. It just makes me feel like healing can be in reach for me if I try really hard enough – like maybe if I squint really hard and believe and click my heels together I can imagine up a portal into a world where I’m not in this much agony.
|
||||||
|
|
||||||
|
I love SFA because it’s the first time I’ve seen a show with a cast of characters that I feel like would genuinely accept me as a person if they knew me. I relate to SAM so deeply; to see her accepted by everyone – loved by everyone – makes me soar. Caleb comforts fat anxious cadets (even if I have beef with Pickford now.) People are given space to deal with their traumas, given empathy. I’ve never wanted to live in a show more than this (except maybe Doom Patrol, for ficto reasons.)
|
||||||
|
|
||||||
|
But as I go deeper and deeper into escapism here, I find myself just ouroborosing my trauma. Like I just keep throwing it up and then eating the vomit and then throwing it back up and eating it again and so on and so forth, like my dog did when my dad died. The projection helps me cope, but it also keeps me trapped there, in a way.
|
||||||
|
|
||||||
|
And then I wonder if there is a key to release the trap anywhere when you’re a trafficking survivor, or if it’s sort of like how sometimes when people get shot they have to leave bullet fragments in the body because it’s too dangerous to try and remove them. You know? Like, maybe it’s just something you have to carry inside of you as you try to move forward, because going back through it would just make things worse. Maybe coping with fiction is as far as I’m going to get.
|
||||||
|
|
||||||
|
I am in therapy. I see two therapists! I do ketamine therapy twice a week. I literally have appointments 4/5 days a week. Yet here I remain, just barely hanging on, handcuffed to the pole.
|
||||||
|
|
||||||
|
Sometimes I find myself getting confused. I forget that Star Trek technology – and Star Trek peace – isn’t real. I forget that it isn’t that easy. I forget that the peace in Star Trek is just as precarious and blood-soaked as it would be in real life. But it’s easier to live somewhere I feel accepted than live in this universe where the only hobby I’m truly capable of having is retraumatizing myself.
|
||||||
|
|
||||||
|
I want to write about something else now.
|
||||||
|
|
||||||
56
blogroll.njk
Executable file
56
blogroll.njk
Executable file
|
|
@ -0,0 +1,56 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/blogroll/"
|
||||||
|
title: Blogroll
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Blogroll</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<p>Here are some blogs and websites I follow and recommend. This is a curated list of quality content creators in the web development, design, and IndieWeb communities.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 space-y-8">
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Web Development</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Example Blog</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Description of the blog and why you recommend it.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Add more blogs here -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Design & UX</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Design Blog</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Great insights on design and user experience.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">IndieWeb & Personal Sites</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||||
|
<h3 class="font-semibold">
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener" class="hover:text-blue-600">Personal Site</a>
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Excellent example of IndieWeb principles in action.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||||
|
<p class="text-sm">
|
||||||
|
<strong>Want to be added?</strong> If you have a blog that fits these categories, feel free to
|
||||||
|
<a href="/contact/" class="text-blue-600 hover:text-blue-800">reach out</a> and let me know!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
46
bookshelf.njk
Executable file
46
bookshelf.njk
Executable file
|
|
@ -0,0 +1,46 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Bookshelf
|
||||||
|
permalink: /bookshelf/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Bookshelf</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A living reading list. Track what you're reading, want to read, and your notes/reviews.</p>
|
||||||
|
|
||||||
|
<section class="grid md:grid-cols-3 gap-6">
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Reading</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Designing for Accessibility</span>
|
||||||
|
<div class="text-gray-500">Notes: practical patterns for forms and focus</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">The Pragmatic Programmer</span>
|
||||||
|
<div class="text-gray-500">Notes: small steps, continuous improvement</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Finished</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Atomic Habits</span>
|
||||||
|
<div class="text-gray-500">Takeaway: environment design beats willpower</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="font-medium">Refactoring UI</span>
|
||||||
|
<div class="text-gray-500">Takeaway: spacing & contrast are the 80/20</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<h2 class="font-semibold mb-2">Want to Read</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li><span class="font-medium">Inclusive Components</span></li>
|
||||||
|
<li><span class="font-medium">Every Layout</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
13
buttonwall.md
Normal file
13
buttonwall.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/buttonwall/"
|
||||||
|
title: Button Wall
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1>Button Wall</h1>
|
||||||
|
Would you like to add my button?
|
||||||
|
|
||||||
|
<a href="https://agnes.love"><img src="https://file.garden/Zw17vw8ctXTQw7PV/button-88x31(24).gif" alt="button for the site agnes.love" title="button for this site, agnes.love"></a>
|
||||||
|
<textarea><a href="https://agnes.love"><img src="https://file.garden/Zw17vw8ctXTQw7PV/button-88x31(24).gif" alt="button for the site agnes.love" title="button for this site, agnes.love"></a></textarea>
|
||||||
|
|
||||||
|
friends, mutuals, cool internet people i like:<br> <br><a href="https://serpentinemalign.neocities.org/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/smbutton.png" alt="button for serpentinemalign" title="button for serpentinemalign"></a><a href="https://eunoia.sayitditto.net/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/eunoia.png" alt="button for euonoia" title="button for euonoia"></a><a href="https://linkyblog.neocities.org/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/linkybanner.png" alt="button for linky" title="button for linky"></a><a href="https://www.hellomei.dev/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/hellomei.gif" alt="button for hellomei" title="button for hellomei"></a><a href="https://maevedarcy.neocities.org/"><img src="https://hospital.alien.town/lib/exe/fetch.php?w=68&tok=84e143&media=https%3A%2F%2Ffile.garden%2FaJzQmzrHVB4BLKwu%2Fmaeve.png" width="63px" alt="button for maevedarcy" title="button for maevedarcy"></a><a href="https://overmore.neocities.org/"><img src="https://file.garden/aJzQmzrHVB4BLKwu/ul9xd6.png" title="button for overmore" alt="button for overmore"></a><a href="https://herewithin.neocities.org/"><img src="https://file.garden/Zw17vw8ctXTQw7PV/link-banner.png" alt="button for herewithin" title="button for herewithin"></a>
|
||||||
50
categories.njk
Executable file
50
categories.njk
Executable file
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
pagination:
|
||||||
|
data: collections.categoryList
|
||||||
|
size: 1
|
||||||
|
alias: category
|
||||||
|
addAllPagesToCollections: true
|
||||||
|
permalink: /categories/{{ category | slug }}/
|
||||||
|
eleventyComputed:
|
||||||
|
title: "Posts in '{{ category }}'"
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Posts in
|
||||||
|
<span class="inline-block px-3 py-1 text-sm rounded-full bg-purple-600 text-white">{{ category }}</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{% set catPosts = [] %}
|
||||||
|
{% for post in collections.posts %}
|
||||||
|
{% if post.data.category and post.data.category == category %}
|
||||||
|
{% set catPosts = (catPosts.push(post), catPosts) %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% if catPosts.length > 0 %}
|
||||||
|
<div class="space-y-6">
|
||||||
|
{% for post in catPosts %}
|
||||||
|
<article class="border-b pb-6">
|
||||||
|
<h2 class="text-xl font-semibold">
|
||||||
|
<a href="{{ post.url }}" class="hover:text-blue-600">{{ post.data.title }}</a>
|
||||||
|
</h2>
|
||||||
|
<time class="text-sm text-gray-500" datetime="{{ post.date | htmlDateString }}">
|
||||||
|
{{ post.date | readableDate }}
|
||||||
|
</time>
|
||||||
|
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||||
|
{{ post.data.description or (post.templateContent | striptags | truncate(160)) }}
|
||||||
|
</p>
|
||||||
|
<div class="mt-2 text-sm space-x-2">
|
||||||
|
{% if post.data.tags %}
|
||||||
|
{% for postTag in post.data.tags %}
|
||||||
|
<a class="px-2 py-0.5 rounded text-white text-xs hover:opacity-80"
|
||||||
|
style="background-color: {{ postTag | tagColor }}"
|
||||||
|
href="/tags/{{ postTag | slug }}/">#{{ postTag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500">No posts found in this category.</p>
|
||||||
|
{% endif %}
|
||||||
25
categories/index.njk
Normal file
25
categories/index.njk
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Categories
|
||||||
|
permalink: /categories/
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Categories</h1>
|
||||||
|
|
||||||
|
{% if collections.categoryList and collections.categoryList.length %}
|
||||||
|
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{% for cat in collections.categoryList %}
|
||||||
|
{% set count = 0 %}
|
||||||
|
{% for post in collections.posts %}
|
||||||
|
{% if post.data.category and post.data.category == cat %}
|
||||||
|
{% set count = count + 1 %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<li class="border rounded p-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||||
|
<a class="font-medium hover:text-blue-600" href="/categories/{{ cat | slug }}/">{{ cat }}</a>
|
||||||
|
<span class="text-xs text-gray-500">{{ count }} post{% if count != 1 %}s{% endif %}</span>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500">No categories yet.</p>
|
||||||
|
{% endif %}
|
||||||
8
category.njk
Executable file
8
category.njk
Executable file
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
permalink: false
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
---
|
||||||
|
{#
|
||||||
|
This file is intentionally disabled to avoid output conflicts.
|
||||||
|
Per-category pages are generated by `src/categories.njk`.
|
||||||
|
#}
|
||||||
36
contact.njk
Executable file
36
contact.njk
Executable file
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/contact/"
|
||||||
|
title: Contact
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Get in Touch</h1>
|
||||||
|
|
||||||
|
<p>Feel free to reach out to me about pretty much anything.
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||||||
|
<div>
|
||||||
|
<h2>Get in Touch</h2>
|
||||||
|
<ul class="space-y-3 mt-4">
|
||||||
|
<li class="flex items-center gap-3">
|
||||||
|
<span class="text-blue-600">📧</span>
|
||||||
|
<a href="mailto:{{ site.email }}" class="hover:text-blue-600">{{ site.email }}</a>
|
||||||
|
</li>
|
||||||
|
{% if site.social.github %}
|
||||||
|
<li class="flex items-center gap-3">
|
||||||
|
<span class="text-blue-600">🐙</span>
|
||||||
|
<a href="https://github.com/{{ site.social.github }}" target="_blank" rel="noopener" class="hover:text-blue-600">GitHub</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% if site.social.mastodon %}
|
||||||
|
<li class="flex items-center gap-3">
|
||||||
|
<span class="text-blue-600">🐘</span>
|
||||||
|
<a href="{{ site.social.mastodon }}" target="_blank" rel="noopener" class="hover:text-blue-600">Mastodon</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
<li class="flex items-center gap-3"> <span class="text-blue-600">❓</span>
|
||||||
|
<a href="https://cheesecake.kissing.computer/">Ask me anonymous questions!</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
29
donate.njk
Executable file
29
donate.njk
Executable file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/donate/"
|
||||||
|
title: Support My Work
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Support My Work</h1>
|
||||||
|
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
{% if site.donate.message %}
|
||||||
|
<p>{{ site.donate.message }}</p>
|
||||||
|
{% else %}
|
||||||
|
<p>If you like what I do or any of the sites I host, and you'd like to support me, you can do so here:</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a href='https://ko-fi.com/L4L41BD0U8' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
|
||||||
|
{% if site.donate.github %}
|
||||||
|
<h2>Ongoing Support</h2>
|
||||||
|
<p>For ongoing support, consider sponsoring me on GitHub:</p>
|
||||||
|
|
||||||
|
<div class="my-6">
|
||||||
|
<a href="https://github.com/sponsors/{{ site.donate.github }}" target="_blank" rel="noopener"
|
||||||
|
class="inline-flex items-center px-6 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors">
|
||||||
|
💖 GitHub Sponsors
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
38
feed.xml
Executable file
38
feed.xml
Executable file
|
|
@ -0,0 +1,38 @@
|
||||||
|
---
|
||||||
|
permalink: /feed.xml
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
templateEngine: njk
|
||||||
|
---
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||||
|
<title>{{ site.name }}</title>
|
||||||
|
<subtitle>{{ site.description }}</subtitle>
|
||||||
|
<link href="{{ site.url }}/feed.xml" rel="self"/>
|
||||||
|
<link href="{{ site.url }}/"/>
|
||||||
|
{% if collections.posts and (collections.posts | length) %}
|
||||||
|
<updated>{{ collections.posts[0].date | htmlDateString }}T00:00:00Z</updated>
|
||||||
|
{% else %}
|
||||||
|
<updated>{{ '1970-01-01' }}</updated>
|
||||||
|
{% endif %}
|
||||||
|
<id>{{ site.url }}/</id>
|
||||||
|
<author>
|
||||||
|
<name>{{ site.author }}</name>
|
||||||
|
</author>
|
||||||
|
{% if collections.posts and (collections.posts | length) %}
|
||||||
|
{% for post in collections.posts | slice(0, 20) %}
|
||||||
|
<entry>
|
||||||
|
<title>{{ post.data.title }}</title>
|
||||||
|
<link href="{{ site.url }}{{ post.url }}"/>
|
||||||
|
<updated>{{ post.date | htmlDateString }}T00:00:00Z</updated>
|
||||||
|
<id>{{ site.url }}{{ post.url }}</id>
|
||||||
|
<content type="html">{{ post.templateContent | htmlToAbsoluteUrls(site.url) }}</content>
|
||||||
|
{% if post.data.description %}
|
||||||
|
<summary>{{ post.data.description }}</summary>
|
||||||
|
{% endif %}
|
||||||
|
{% for tag in post.data.tags %}
|
||||||
|
<category term="{{ tag }}"/>
|
||||||
|
{% endfor %}
|
||||||
|
</entry>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</feed>
|
||||||
19
hosted.njk
Normal file
19
hosted.njk
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/hosted/"
|
||||||
|
title: Hosted
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1> SERVICES I HOST!!</h1>
|
||||||
|
|
||||||
|
Here is a long list of all the things I do on the web.<br><br>
|
||||||
|
|
||||||
|
<li><a href="https://sillywordz.anteater.monster">Sillywordz, a fork of statuscafe that lets you embed your current word count into your site</a></li>
|
||||||
|
<li><a href="https://cheesy.alien.town">Cheesy, food microblogging</a>
|
||||||
|
<li><a href="https://minty.anteater.monster">Status.cafe (regular)</a></li>
|
||||||
|
<li><a href="https://fandom.cooking/">Fandom.cooking, public multifandom cookbook</a></li>
|
||||||
|
<li><a href="https://sunset.femslash.club">Sunset Archive, an archive running on the same code as <a href="https://archiveofourown.org/">AO3</a> dedicated to F/F, NB/F and NB/NB sapphic fanworks</a></li>
|
||||||
|
<br><br>
|
||||||
|
<li><a href="https://clouds.alien.town/">Personal fanart archive</a></li>
|
||||||
|
<li><a href="https://library.alien.town/">Bookmarks and resources</a></li><br>
|
||||||
|
More coming soon....
|
||||||
113
index.njk
Executable file
113
index.njk
Executable file
|
|
@ -0,0 +1,113 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/"
|
||||||
|
title: "AGNES THE ALIEN!"
|
||||||
|
---
|
||||||
|
<div class="currently"> currently...<br><b>reading:</b> the orange eats creeps,
|
||||||
|
serious weakness<br><b>watching:</b>star trek: voyager, paradise<br><b>listening to</b>: bloc party, cupcakke</div><div class="h-feed">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<div class="text-center mb-12 py-8"><center><img src="https://file.garden/Zw17vw8ctXTQw7PV/mewelcome.png" width="250px" alt="A stylized bust-level drawing of me, a white feminine individual with heart shaped glasses, pink and green pigtails, and a teal halter top. I am saying WELCOME which is written in stylized pink text" title="A stylized bust-level drawing of me, a white feminine individual with heart shaped glasses, pink and green pigtails, and a teal halter top. I am saying WELCOME which is written in stylized pink text.">
|
||||||
|
</center><h1 class="p-name text-4xl font-bold mb-4 float-animation">{{ site.name }}</h1>
|
||||||
|
<p class="p-summary text-xl text-gray-600 dark:text-gray-400 mb-6">{{ site.description }}</p>
|
||||||
|
<a class="u-url hidden" href="{{ site.url }}/"></a>
|
||||||
|
|
||||||
|
<div class="max-w-2xl mx-auto mb-8">
|
||||||
|
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
||||||
|
Hey, I'm Agnes! I'm a writer, artist, hobbyist computerdyke, and real life alien from outer space. This is my personal site and weblog. Feel free to check out what I have here! </p>
|
||||||
|
|
||||||
|
<div class="etc">
|
||||||
|
Current status: <script src="https://status.lol/agnes.js?link&no-emoji&time"></script><hr>{% postGraph collections.posts %}
|
||||||
|
<hr> <div class="webring">
|
||||||
|
<i>webrings, cliques & more...</i><br><a href="https://lockheart.love/collections/cliques">Language Learning</a> 💚 Japanese, Python & Welsh<br>
|
||||||
|
<span class="problematic"><strike>un</strike>problematic blorbo <a href="https://reef.kingdra.net">❥</a> <span class="blorbo">teleya</span><br></span>
|
||||||
|
<hr><a href="https://alien.holiday/femslashring"> FEMSLASH FANS ONLINE WEBRING</a><br>
|
||||||
|
<b>MY</b> femslash OTP is...<br><b><i>
|
||||||
|
💞 NAHLA X ANISHA ! 💞 </b></i><br>
|
||||||
|
<a href="https://alien.holiday/femslashring?action=previous">previous</a> |
|
||||||
|
<a href="https://alien.holiday/femslashring?action=random">random</a> |
|
||||||
|
<a href="https://alien.holiday/femslashring?action=next">next</a><hr>
|
||||||
|
<div id="queersoffaith">
|
||||||
|
<a href="https://alien.holiday/queerreligious"><b>QUEERS OF FAITH💞</b></a><br />
|
||||||
|
<a href="https://alien.holiday/queerreligious?action=previous">previous</a> |
|
||||||
|
<a href="https://alien.holiday/queerreligious?action=random">random</a> |
|
||||||
|
<a href="https://alien.holiday/queerreligious?action=next">next</a> </div> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<a href="/feed.xml" class="border border-purple-600 text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 px-6 py-2 rounded-lg transition-colors">
|
||||||
|
📡 Subscribe via RSS
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Posts -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-2xl font-semibold mb-6 flex items-center gap-2">
|
||||||
|
🌌 Recent Posts
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{% set recent = collections.posts | default([]) %}
|
||||||
|
{% if (recent | length) == 0 %}
|
||||||
|
{% set recent = collections.searchIndex | default([]) %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if recent | length > 0 %}
|
||||||
|
<div class="space-y-8">
|
||||||
|
{% for post in recent | head(5) %}
|
||||||
|
{% set url = post.url or post.id %}
|
||||||
|
{% set title = (post.data and post.data.title) or post.title %}
|
||||||
|
{% set dateVal = post.date %}
|
||||||
|
{% set desc = (post.data and post.data.description) or post.description or (post.templateContent | default('') | striptags | truncate(160)) %}
|
||||||
|
{% set tags = (post.data and post.data.tags) or post.tags or [] %}
|
||||||
|
<article class="h-entry border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
|
||||||
|
<h3 class="p-name text-xl font-semibold mb-2">
|
||||||
|
<a class="u-url hover:text-purple-600 dark:hover:text-purple-400 transition-colors" href="{{ url }}">
|
||||||
|
{{ title }}
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
{% if dateVal %}
|
||||||
|
<time class="dt-published text-sm text-gray-500 dark:text-gray-400 block mb-3" datetime="{{ dateVal | htmlDateString }}">
|
||||||
|
{{ dateVal | readableDate }}
|
||||||
|
</time>
|
||||||
|
{% endif %}
|
||||||
|
{% if desc %}
|
||||||
|
<p class="p-summary text-gray-700 dark:text-gray-300 mb-3 leading-relaxed">
|
||||||
|
{{ desc }}
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
{% if tags %}
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{% for tag in tags %}
|
||||||
|
<a class="p-category px-2 py-1 rounded text-white text-xs hover:opacity-80 transition-opacity"
|
||||||
|
style="background-color: {{ tag | tagColor }}"
|
||||||
|
href="/tags/{{ tag | slug }}/">#{{ tag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a href="/blog/" class="inline-flex items-center gap-2 text-purple-600 dark:text-purple-400 hover:underline">
|
||||||
|
View all posts →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div class="text-center py-12 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 text-lg mb-4">No posts yet!</p>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">This is where thoughtful writing will appear. Stay tuned! 📝</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links -->
|
||||||
|
|
||||||
|
|
||||||
|
<a href="/sitemap/" class="block p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors">
|
||||||
|
<div class="text-2xl mb-2">🌌</div>
|
||||||
|
<h3 class="font-semibold text-purple-800 dark:text-purple-200">Explore the galaxy...</h3>
|
||||||
|
<p class="text-sm text-purple-600 dark:text-purple-300">All pages on this site</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
7
journal/day-one.md
Normal file
7
journal/day-one.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/journal.njk
|
||||||
|
title: Day One
|
||||||
|
description: Starting the journal as a collection.
|
||||||
|
---
|
||||||
|
|
||||||
|
Today I migrated the Journal section into a proper Eleventy collection. Each entry gets its own permalink and shows up on the listing page.
|
||||||
7
journal/week-two.md
Normal file
7
journal/week-two.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/journal.njk
|
||||||
|
title: Week Two
|
||||||
|
description: Settling into a rhythm.
|
||||||
|
---
|
||||||
|
|
||||||
|
Second week of writing. The collections pattern keeps things tidy and discoverable. Next up: pagination and tests.
|
||||||
37
links.njk
Executable file
37
links.njk
Executable file
|
|
@ -0,0 +1,37 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Links
|
||||||
|
permalink: /links/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Links</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A curated index of sites, references, and tools. Replace these with your own favorites or wire up a bookmarks feed.</p>
|
||||||
|
|
||||||
|
<section class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Web Development</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://www.11ty.dev/">Eleventy</a> — Static site generator with a small, flexible core.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://playwright.dev/">Playwright</a> — Reliable end‑to‑end testing across browsers.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://web.dev/">web.dev</a> — Guides on performance and modern web APIs.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">IndieWeb & Publishing</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://indieweb.org/">IndieWeb Wiki</a> — Build on your own domain with open standards.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://microformats.org/">microformats</a> — Semantic markup for people and posts.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://mehdix.ir/awesome-static-generators/">Awesome Static Generators</a> — Explore SSGs.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold">Design & Accessibility</h2>
|
||||||
|
<ul class="list-disc pl-6">
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://www.a11yproject.com/">The A11Y Project</a> — Practical accessibility resources.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://type-scale.com/">Type Scale</a> — Visualize typographic scales.</li>
|
||||||
|
<li><a class="text-blue-600 dark:text-blue-400 hover:underline" href="https://colorandcontrast.com/">Color & Contrast</a> — Understand accessible color usage.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
14
manifest.webmanifest
Executable file
14
manifest.webmanifest
Executable file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "Indieweb Starter Blog",
|
||||||
|
"short_name": "Indieweb Blog",
|
||||||
|
"start_url": "/",
|
||||||
|
"scope": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"theme_color": "#a78bfa",
|
||||||
|
"icons": [
|
||||||
|
{ "src": "/assets/favicon-16x16.png", "sizes": "16x16", "type": "image/png" },
|
||||||
|
{ "src": "/assets/favicon-32x32.png", "sizes": "32x32", "type": "image/png" },
|
||||||
|
{ "src": "/assets/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
|
||||||
|
]
|
||||||
|
}
|
||||||
48
notes.njk
Executable file
48
notes.njk
Executable file
|
|
@ -0,0 +1,48 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Notes
|
||||||
|
pagination:
|
||||||
|
data: collections.notes
|
||||||
|
size: 10
|
||||||
|
alias: items
|
||||||
|
reverse: true
|
||||||
|
permalink: "/notes/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Notes</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Short, linkable thoughts. Each note has its own permalink.</p>
|
||||||
|
|
||||||
|
{% set items = items | default([]) %}
|
||||||
|
{% if (items | length) == 0 %}
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No notes yet. Add files under <code>src/notes/</code>.</p>
|
||||||
|
{% else %}
|
||||||
|
<section class="space-y-6">
|
||||||
|
{% for item in items %}
|
||||||
|
<article class="border-b pb-4 h-entry">
|
||||||
|
<h2 class="text-lg font-semibold"><a class="u-url" href="{{ item.url }}">{{ item.data.title or 'Untitled' }}</a></h2>
|
||||||
|
{% if item.date %}
|
||||||
|
<time class="text-xs text-gray-500 dt-published" datetime="{{ item.date | htmlDateString }}">{{ item.date | readableDate }}</time>
|
||||||
|
{% endif %}
|
||||||
|
{% if item.data.description %}
|
||||||
|
<p class="mt-1 p-summary">{{ item.data.description }}</p>
|
||||||
|
{% endif %}
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<nav class="mt-8 flex items-center justify-between" aria-label="Pagination">
|
||||||
|
{% if pagination.href.previous %}
|
||||||
|
<a class="px-4 py-2 rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200" href="{{ pagination.href.previous }}">← Newer</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="px-4 py-2 text-gray-400">← Newer</span>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages | length }}</span>
|
||||||
|
|
||||||
|
{% if pagination.href.next %}
|
||||||
|
<a class="px-4 py-2 rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200" href="{{ pagination.href.next }}">Older →</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="px-4 py-2 text-gray-400">Older →</span>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
7
notes/first-note.md
Normal file
7
notes/first-note.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/note.njk
|
||||||
|
title: First Note
|
||||||
|
description: A tiny note to kick off the notes collection.
|
||||||
|
---
|
||||||
|
|
||||||
|
A small thought to test the notes collection. Links, ideas, and references belong here.
|
||||||
7
notes/second-note.md
Normal file
7
notes/second-note.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/note.njk
|
||||||
|
title: Second Note
|
||||||
|
description: Another brief thought to test pagination and listing.
|
||||||
|
---
|
||||||
|
|
||||||
|
Design with constraints: a short page title, a clear hierarchy, and readable line length go a long way.
|
||||||
7
notes/third-note.md
Normal file
7
notes/third-note.md
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
layout: layouts/note.njk
|
||||||
|
title: Third Note
|
||||||
|
description: Shortcuts make habits stick.
|
||||||
|
---
|
||||||
|
|
||||||
|
Create keyboard shortcuts for frequent tasks. Friction is the enemy of consistency.
|
||||||
46
now.njk
Executable file
46
now.njk
Executable file
|
|
@ -0,0 +1,46 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/now/"
|
||||||
|
title: Now
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">What I'm Doing Now</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<i>inspired by <a href="https://nownownow.com/about">nownownow.com</a></i>
|
||||||
|
<hr>
|
||||||
|
Life... <br><br>
|
||||||
|
Currently finally moving on from 20 years of treatment resistant depression, which is nice, and finally getting treatment for my lifelong PMDD, which will hopefully take care of the <i>rest</i> of my suffering. I'm writing this on June 20, 2026, which means I'm turning 25 in exactly a week. That's pretty wild, considering I never planned to make it past the age of eighteen.<br><br>
|
||||||
|
I'm at peace with my life currently. I'm frightened by the current state of the world, but I have hope. I love my friends and family and partner and pets. I finally feel like I have some sort of tangible, beautiful future? AGAIN: crazy, because I've never known this kind of contentment and hope. I'm squeezing all the juice I can out of every second of my life; I'm not going to let it go to waste.
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
Something a lot of people don't talk about is the post-suicidal phase of life. You know, what happens when you've been suicidal since the single digits and it's all you know how to be, and now you have to learn what it's like to want to be around. It might not sound like it, but it's a real adjustment! For so long I have felt like my life is ephemeral, but it isn't. I can make something of it. I just need to figure out how.
|
||||||
|
<br><br>
|
||||||
|
My life is relatively limited by my health issues, but I want to do as much as I possibly can, both inside and outside of the home. I'm about to start college this August, where I'll be a religious studies major with the goal of volunteering in medical chaplaincy. The one field I can do that I do not think will be replaced by AI any time soon...<br><br>
|
||||||
|
I'm excited for what comes next.
|
||||||
|
|
||||||
|
<hr class="now">
|
||||||
|
|
||||||
|
Projects... <br><br>
|
||||||
|
|
||||||
|
In October 2025, I launched <a href="https://sunset.femslash.club">Sunset Archive</a>, a fanfiction archive using <a href="https://archiveofourown.org/">AO3</a>'s code dedicated to F/F, F/NB and NB/NB sapphic fanworks. It was rocky at the start, but it has ended up being incredibly rewarding. Now, as I move forward with my mental health and continue to improve, I'm thinking of launching an entire "femslash web"; a cluster of social services and tools made by and for femslash fans, where we come first, and where femslash is freely accessible to those who are looking as opposed to being a needle in a haystack.
|
||||||
|
I'm very passionate about fandom and sapphic works. I don't know if this will come to fruition, but it is my dream...
|
||||||
|
<br><br>
|
||||||
|
I'm currently working on a cluster of short stories and am brainstorming a novel, and I recently got a v-gen artist account and plan to open writing commissions soon.
|
||||||
|
As I write this, it is late June, so <a href="https://artfight.net/~bearcat" title="my profile">ArtFight</a> will be starting soon! This year I'm getting into making jewelry so I can do craft attacks, and just because I want to make jewelry in general, since so many people in my family work with it.
|
||||||
|
<br><br> In fact, here's a practice necklace I made:<br>
|
||||||
|
<img src="https://64.media.tumblr.com/1cde0ff69c3f2f19f584846230bb15b8/0be8ddd22aa1c887-fd/s540x810/fc6aabf1410e336436fcef13d6be3dcb1e05a6f2.jpg" width="450px" alt="A necklace composed of red heart shaped gems. It has a blue UFO pendant." title="A necklace composed of red heart shaped gems. It has a blue UFO pendant.">
|
||||||
|
<br><br>I'm pretty proud of it :-)
|
||||||
|
<hr class="now">
|
||||||
|
Goals...
|
||||||
|
<br><br>
|
||||||
|
<li>To successfully use my DBT skills when necessary to avoid having a breakdown</li>
|
||||||
|
<li>To finish a novel by June 2027</li>
|
||||||
|
<li>To write at least 150k by the end of the year</li>
|
||||||
|
<li>To get a short story professionally published</li>
|
||||||
|
<li>To continue to improve with my digital art and my crafts</li>
|
||||||
|
<li>To learn music theory</li>
|
||||||
|
<li>To finish my freshman year of college with at least a 3.8 GPA.</li>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-8">
|
||||||
|
Last updated: <time datetime="2026-06-24">June 24, 2026</time>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
44
poetry.njk
Executable file
44
poetry.njk
Executable file
|
|
@ -0,0 +1,44 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Poetry
|
||||||
|
pagination:
|
||||||
|
data: collections.poetry
|
||||||
|
size: 10
|
||||||
|
alias: items
|
||||||
|
reverse: true
|
||||||
|
permalink: "/poetry/{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber + 1 }}/{% endif %}"
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Poetry</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Collected poems with their own pages.</p>
|
||||||
|
|
||||||
|
{% set items = items | default([]) %}
|
||||||
|
{% if items | length == 0 %}
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No poems yet. Add files under <code>src/poetry/</code>.</p>
|
||||||
|
{% else %}
|
||||||
|
<section class="space-y-6">
|
||||||
|
{% for item in items %}
|
||||||
|
<article class="border-b pb-4">
|
||||||
|
<h2 class="text-lg font-semibold"><a href="{{ item.url }}">{{ item.data.title or 'Untitled' }}</a></h2>
|
||||||
|
{% if item.date %}
|
||||||
|
<time class="text-xs text-gray-500" datetime="{{ item.date | htmlDateString }}">{{ item.date | readableDate }}</time>
|
||||||
|
{% endif %}
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
<nav class="mt-8 flex items-center justify-between" aria-label="Pagination">
|
||||||
|
{% if pagination.href.previous %}
|
||||||
|
<a class="px-4 py-2 rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200" href="{{ pagination.href.previous }}">← Newer</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="px-4 py-2 text-gray-400">← Newer</span>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages | length }}</span>
|
||||||
|
|
||||||
|
{% if pagination.href.next %}
|
||||||
|
<a class="px-4 py-2 rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200" href="{{ pagination.href.next }}">Older →</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="px-4 py-2 text-gray-400">Older →</span>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
12
poetry/build-logs.md
Normal file
12
poetry/build-logs.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
layout: layouts/poem.njk
|
||||||
|
title: Build Logs
|
||||||
|
description: On learning by walking the meadow of errors.
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
Errors bloom
|
||||||
|
like wildflowers —
|
||||||
|
you learn the meadow
|
||||||
|
by walking it.
|
||||||
|
```
|
||||||
12
poetry/night-shift.md
Normal file
12
poetry/night-shift.md
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
layout: layouts/poem.njk
|
||||||
|
title: Night Shift
|
||||||
|
description: A late session at the keyboard.
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
Cursor blinks —
|
||||||
|
the room hums low —
|
||||||
|
ideas compile
|
||||||
|
into morning.
|
||||||
|
```
|
||||||
13
poetry/static-garden.md
Normal file
13
poetry/static-garden.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
layout: layouts/poem.njk
|
||||||
|
title: Static Garden
|
||||||
|
description: A short poem about websites as gardens.
|
||||||
|
---
|
||||||
|
|
||||||
|
```
|
||||||
|
I plant pages
|
||||||
|
in a quiet repo —
|
||||||
|
permalinks
|
||||||
|
growing paths
|
||||||
|
to places worth returning.
|
||||||
|
```
|
||||||
30
portfolio.njk
Executable file
30
portfolio.njk
Executable file
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Portfolio
|
||||||
|
permalink: /portfolio/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Portfolio</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Showcase selected work. Replace with your own projects and case studies.</p>
|
||||||
|
|
||||||
|
<section class="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold">Static Blog Template</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">An Eleventy starter focused on accessibility, IndieWeb features, and reliable E2E tests.</p>
|
||||||
|
<ul class="list-disc pl-5 text-gray-600 dark:text-gray-400 text-sm">
|
||||||
|
<li>Accessible navigation and skip links</li>
|
||||||
|
<li>Open Graph/Twitter meta defaults</li>
|
||||||
|
<li>Playwright tests (responsive, a11y flows, search)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold">Design System Pages</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">A living style guide to keep typography and components consistent.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] border rounded p-4">
|
||||||
|
<p class="font-medium">Interested in working together?</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">Add your services and contact details here.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
25
projects.njk
Executable file
25
projects.njk
Executable file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Projects
|
||||||
|
permalink: /projects/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Projects</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">Open-source and personal experiments. Replace with your own projects or migrate to a <code>projects</code> collection.</p>
|
||||||
|
|
||||||
|
<ul class="space-y-6">
|
||||||
|
<li class="border rounded p-4">
|
||||||
|
<h2 class="text-lg font-semibold">Eleventy Blog Starter</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">Accessible, IndieWeb-friendly, and tested with Playwright.</p>
|
||||||
|
<div class="mt-2 text-xs space-x-2">
|
||||||
|
<span class="px-2 py-0.5 rounded bg-blue-600 text-white">eleventy</span>
|
||||||
|
<span class="px-2 py-0.5 rounded bg-green-600 text-white">a11y</span>
|
||||||
|
<span class="px-2 py-0.5 rounded bg-pink-600 text-white">testing</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="border rounded p-4">
|
||||||
|
<h2 class="text-lg font-semibold">Minimal Style Guide</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">A living page to document typography and components.</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
45
resume.njk
Executable file
45
resume.njk
Executable file
|
|
@ -0,0 +1,45 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Résumé
|
||||||
|
permalink: /resume/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Résumé</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A template CV you can adapt. Replace section content with your details or link to a PDF.</p>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3 mb-8">
|
||||||
|
<a href="#" class="inline-flex items-center px-3 py-1.5 rounded bg-blue-600 text-white hover:bg-blue-700">Download PDF</a>
|
||||||
|
<span class="text-sm text-gray-500">Add your static PDF at <code>src/assets/</code> and update this link.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="prose dark:prose-invert">
|
||||||
|
<h2>Summary</h2>
|
||||||
|
<p>Front-end oriented web developer focused on accessibility, performance, and maintainable static sites. Comfortable with modern tooling and progressive enhancement.</p>
|
||||||
|
|
||||||
|
<h2>Experience</h2>
|
||||||
|
<h3>Senior Web Developer · Company Name</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">2023 — Present</p>
|
||||||
|
<ul>
|
||||||
|
<li>Built static-first sites with Eleventy and automated deployments.</li>
|
||||||
|
<li>Established a11y testing and CI checks.</li>
|
||||||
|
<li>Collaborated with design on a living style guide.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>Front-end Engineer · Organization</h3>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">2020 — 2023</p>
|
||||||
|
<ul>
|
||||||
|
<li>Implemented component libraries with semantic HTML and utility CSS.</li>
|
||||||
|
<li>Optimized web vitals via preloading and code-splitting.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Skills</h2>
|
||||||
|
<ul>
|
||||||
|
<li>HTML, CSS (Tailwind), JavaScript</li>
|
||||||
|
<li>Eleventy, Nunjucks, Markdown</li>
|
||||||
|
<li>Accessibility, Testing (Playwright)</li>
|
||||||
|
<li>SEO, Open Graph, microformats2</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Education</h2>
|
||||||
|
<p>Degree / Program — School Name</p>
|
||||||
|
</section>
|
||||||
278
search-results.njk
Executable file
278
search-results.njk
Executable file
|
|
@ -0,0 +1,278 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/search/"
|
||||||
|
title: "Search Results"
|
||||||
|
---
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<h1 class="text-3xl font-bold mb-6 flex items-center gap-2">
|
||||||
|
🔍 Search Results
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- Search form -->
|
||||||
|
<form class="mb-8" role="search" aria-label="Site search">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
id="search-query"
|
||||||
|
name="q"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search posts, pages, and content..."
|
||||||
|
class="flex-1 px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors font-medium"
|
||||||
|
>
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Search results container -->
|
||||||
|
<div id="search-results-container" class="hidden">
|
||||||
|
<div class="mb-4">
|
||||||
|
<p id="results-count" class="text-gray-600 dark:text-gray-400"></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="search-results-list" class="space-y-6">
|
||||||
|
<!-- Results will be populated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- No results message -->
|
||||||
|
<div id="no-results" class="hidden text-center py-12">
|
||||||
|
<div class="text-6xl mb-4">🔍</div>
|
||||||
|
<h2 class="text-xl font-semibold mb-2">No results found</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
Try different keywords or browse our content below.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-4">
|
||||||
|
<a href="/blog/" class="px-4 py-2 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors">
|
||||||
|
Browse All Posts
|
||||||
|
</a>
|
||||||
|
<a href="/archive/" class="px-4 py-2 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-lg hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors">
|
||||||
|
View Archive
|
||||||
|
</a>
|
||||||
|
<a href="/sitemap/" class="px-4 py-2 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-lg hover:bg-green-200 dark:hover:bg-green-900/50 transition-colors">
|
||||||
|
Site Directory
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading state -->
|
||||||
|
<div id="search-loading" class="hidden text-center py-12">
|
||||||
|
<div class="text-4xl mb-4">⏳</div>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400">Searching...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Default content when no search -->
|
||||||
|
<div id="default-content">
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<div class="text-6xl mb-4">🔍</div>
|
||||||
|
<h2 class="text-xl font-semibold mb-2">Search the site</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
Find posts, pages, and content across the entire site.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Popular content -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-purple-700 dark:text-purple-300">📝 Recent Posts</h3>
|
||||||
|
{% if collections.posts.length > 0 %}
|
||||||
|
<ul class="space-y-2">
|
||||||
|
{% for post in collections.posts | slice(0, 5) %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ post.url }}" class="block hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
|
||||||
|
<span class="font-medium">{{ post.data.title }}</span>
|
||||||
|
<span class="text-sm text-gray-500 dark:text-gray-400 block">{{ post.date | readableDate }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No posts yet.</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-semibold mb-4 text-blue-700 dark:text-blue-300">🏷️ Popular Tags</h3>
|
||||||
|
{% if collections.tagList.length > 0 %}
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{% for tag in collections.tagList | slice(0, 10) %}
|
||||||
|
<a href="/tags/{{ tag | slug }}/" class="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded text-sm hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors">
|
||||||
|
#{{ tag }}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No tags yet.</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Search tips -->
|
||||||
|
<div class="bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-6">
|
||||||
|
<h3 class="text-lg font-semibold mb-3">💡 Search Tips</h3>
|
||||||
|
<ul class="text-sm space-y-1 text-gray-700 dark:text-gray-300">
|
||||||
|
<li>• Use specific keywords for better results</li>
|
||||||
|
<li>• Search works across post titles, content, and tags</li>
|
||||||
|
<li>• Try different variations of your search terms</li>
|
||||||
|
<li>• Browse by tags or the archive for discovery</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Search results page functionality
|
||||||
|
(function() {
|
||||||
|
let searchIndex = null;
|
||||||
|
let flexSearch = null;
|
||||||
|
|
||||||
|
// Get query parameter from URL
|
||||||
|
function getQueryParam(param) {
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
return urlParams.get(param);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize search on page load
|
||||||
|
async function initSearchPage() {
|
||||||
|
try {
|
||||||
|
// Load search index
|
||||||
|
const response = await fetch('/search.json');
|
||||||
|
searchIndex = await response.json();
|
||||||
|
|
||||||
|
// Initialize FlexSearch
|
||||||
|
if (typeof FlexSearch !== 'undefined') {
|
||||||
|
flexSearch = new FlexSearch.Index({
|
||||||
|
tokenize: 'forward',
|
||||||
|
cache: true,
|
||||||
|
resolution: 9
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add documents to search index
|
||||||
|
searchIndex.forEach((item, index) => {
|
||||||
|
if (item && item.title) {
|
||||||
|
const searchText = `${item.title} ${item.description || ''} ${item.content || ''} ${(item.tags || []).join(' ')}`;
|
||||||
|
flexSearch.add(index, searchText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for query parameter and perform search
|
||||||
|
const query = getQueryParam('q');
|
||||||
|
if (query) {
|
||||||
|
document.getElementById('search-query').value = query;
|
||||||
|
performSearch(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up form submission
|
||||||
|
const form = document.querySelector('form[role="search"]');
|
||||||
|
form.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const query = document.getElementById('search-query').value.trim();
|
||||||
|
if (query) {
|
||||||
|
// Update URL
|
||||||
|
const newUrl = new URL(window.location);
|
||||||
|
newUrl.searchParams.set('q', query);
|
||||||
|
window.history.pushState({}, '', newUrl);
|
||||||
|
|
||||||
|
performSearch(query);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search initialization failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function performSearch(query) {
|
||||||
|
if (!flexSearch || !searchIndex) return;
|
||||||
|
|
||||||
|
// Show loading
|
||||||
|
showElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
hideElement('search-results-container');
|
||||||
|
hideElement('no-results');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
const results = flexSearch.search(query, { limit: 20 });
|
||||||
|
const items = results.map(index => searchIndex[index]);
|
||||||
|
|
||||||
|
displayResults(items, query);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Search failed:', error);
|
||||||
|
showNoResults();
|
||||||
|
}
|
||||||
|
}, 300); // Small delay for better UX
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayResults(items, query) {
|
||||||
|
hideElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
|
||||||
|
if (items.length === 0) {
|
||||||
|
showNoResults();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show results container
|
||||||
|
showElement('search-results-container');
|
||||||
|
|
||||||
|
// Update results count
|
||||||
|
const count = document.getElementById('results-count');
|
||||||
|
count.textContent = `Found ${items.length} result${items.length === 1 ? '' : 's'} for "${query}"`;
|
||||||
|
|
||||||
|
// Display results
|
||||||
|
const container = document.getElementById('search-results-list');
|
||||||
|
container.innerHTML = items.map(item => `
|
||||||
|
<article class="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
|
||||||
|
<h2 class="text-xl font-semibold mb-2">
|
||||||
|
<a href="${item.id}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">
|
||||||
|
${highlightMatch(item.title, query)}
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-3 leading-relaxed">
|
||||||
|
${highlightMatch(item.description || item.content, query)}
|
||||||
|
</p>
|
||||||
|
${item.tags && item.tags.length > 0 ? `
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
${item.tags.map(tag => `
|
||||||
|
<a href="/tags/${tag.toLowerCase().replace(/\s+/g, '-')}/" class="px-2 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded text-xs hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
|
||||||
|
#${tag}
|
||||||
|
</a>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
</article>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNoResults() {
|
||||||
|
hideElement('search-loading');
|
||||||
|
hideElement('default-content');
|
||||||
|
hideElement('search-results-container');
|
||||||
|
showElement('no-results');
|
||||||
|
}
|
||||||
|
|
||||||
|
function showElement(id) {
|
||||||
|
document.getElementById(id).classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideElement(id) {
|
||||||
|
document.getElementById(id).classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightMatch(text, query) {
|
||||||
|
if (!text || !query) return text || '';
|
||||||
|
|
||||||
|
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
||||||
|
return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-yellow-800 px-1 rounded">$1</mark>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', initSearchPage);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
0
search.json
Executable file
0
search.json
Executable file
9
search.njk
Executable file
9
search.njk
Executable file
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
permalink: /search.json
|
||||||
|
eleventyExcludeFromCollections: true
|
||||||
|
---
|
||||||
|
{%- if collections.searchIndex -%}
|
||||||
|
{{ collections.searchIndex | json | safe }}
|
||||||
|
{%- else -%}
|
||||||
|
[]
|
||||||
|
{%- endif -%}
|
||||||
92
sitemap.njk
Executable file
92
sitemap.njk
Executable file
|
|
@ -0,0 +1,92 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/sitemap/"
|
||||||
|
title: Site Directory
|
||||||
|
---
|
||||||
|
<div class="max-w-4xl">
|
||||||
|
<h1 class="text-3xl font-bold mb-2 flex items-center gap-2">
|
||||||
|
🌌 Sitemap </h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
||||||
|
All pages in the galaxy.</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Main Pages -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-purple-200 dark:border-purple-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-purple-700 dark:text-purple-300">🌌 Main Pages</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">🌌 Home</a></li>
|
||||||
|
<li><a href="/blog/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">🌌Blog</a></li>
|
||||||
|
<li><a href="/about/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">🌌 About</a></li>
|
||||||
|
<li><a href="/contact/" class="flex items-center gap-2 hover:text-purple-600 dark:hover:text-purple-400">🌌 Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Personal Pages -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-blue-200 dark:border-blue-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-blue-700 dark:text-blue-300">🌌 Personal</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/uses/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🌌Uses</a></li>
|
||||||
|
<li><a href="/now/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🌌 Now</a></li>
|
||||||
|
<li><a href="/donate/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🌌 Support</a></li>
|
||||||
|
<li><a href="/poetry/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🌌 Poetry</a></li>
|
||||||
|
<li><a href="/hosted/" class="flex items-center gap-2 hover:text-blue-600 dark:hover:text-blue-400">🌌 Hosted</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Discovery -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-green-200 dark:border-green-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-green-700 dark:text-green-300">🌌 Discovery</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="/archive/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🌌 Archive</a></li>
|
||||||
|
<li><a href="/buttonwall/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🌌 Button Wall</a></li>
|
||||||
|
<li><a href="/feed.xml" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🌌 RSS Feed</a></li>
|
||||||
|
<li><a href="/links/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🌌 Links</a></li>
|
||||||
|
<li><a href="/bookshelf/" class="flex items-center gap-2 hover:text-green-600 dark:hover:text-green-400">🌌 Bookshelf</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Recent Posts -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-pink-200 dark:border-pink-800 md:col-span-2">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-pink-700 dark:text-pink-300">📝 Recent Posts</h2>
|
||||||
|
|
||||||
|
{# Fallback to searchIndex like homepage if posts collection is empty #}
|
||||||
|
{% set recent = collections.posts | default([]) %}
|
||||||
|
{% if (recent | length) == 0 %}
|
||||||
|
{% set recent = collections.searchIndex | default([]) %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if recent | length > 0 %}
|
||||||
|
<ul class="space-y-2">
|
||||||
|
{% for post in recent | head(5) %}
|
||||||
|
{% set url = post.url or post.id %}
|
||||||
|
{% set title = (post.data and post.data.title) or post.title %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ url }}" class="block hover:text-pink-600 dark:hover:text-pink-400">
|
||||||
|
<span class="font-medium">{{ title }}</span>
|
||||||
|
{% if post.date %}
|
||||||
|
<span class="text-sm text-gray-500 dark:text-gray-400 block">{{ post.date | readableDate }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500 dark:text-gray-400 italic">No posts yet. Start writing!</p>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Fun Stuff -->
|
||||||
|
<div class="bg-[var(--surface)] rounded-lg p-6 border border-indigo-200 dark:border-indigo-800">
|
||||||
|
<h2 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-indigo-300">🎪 Fun Stuff</h2>
|
||||||
|
<ul class="space-y-2 text-sm">
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🎮 Try the Konami code</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🖱️ Click the logo 7 times</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">⌨️ Type nahleb anywhere</li>
|
||||||
|
<li class="text-gray-600 dark:text-gray-400">🌙 Toggle dark mode</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
105
style.njk
Executable file
105
style.njk
Executable file
|
|
@ -0,0 +1,105 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/style/"
|
||||||
|
title: Style Guide
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Style Guide</h1>
|
||||||
|
|
||||||
|
<div class="space-y-12">
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Typography</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold">Heading 1</h1>
|
||||||
|
<h2 class="text-2xl font-semibold">Heading 2</h2>
|
||||||
|
<h3 class="text-xl font-medium">Heading 3</h3>
|
||||||
|
<h4 class="text-lg">Heading 4</h4>
|
||||||
|
</div>
|
||||||
|
<p class="text-base">This is regular paragraph text. It should be readable and comfortable for extended reading sessions.</p>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400">This is smaller text used for metadata and secondary information.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Colors</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-blue-600 rounded"></div>
|
||||||
|
<p class="text-sm">Primary Blue</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-gray-600 rounded"></div>
|
||||||
|
<p class="text-sm">Gray</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-green-600 rounded"></div>
|
||||||
|
<p class="text-sm">Success Green</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="w-full h-16 bg-red-600 rounded"></div>
|
||||||
|
<p class="text-sm">Error Red</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Components</h2>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Buttons</h3>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Primary</button>
|
||||||
|
<button class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50">Secondary</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Tags</h3>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">#example</span>
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">#tag</span>
|
||||||
|
<span class="px-3 py-1 text-sm rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">#demo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-medium mb-2">Cards</h3>
|
||||||
|
<div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6 max-w-md">
|
||||||
|
<h4 class="font-semibold mb-2">Card Title</h4>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400">This is an example card component with some content.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-xl font-semibold mb-4">Prose Styles</h2>
|
||||||
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<p>This section demonstrates the prose styling used for blog content.</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>This is a blockquote. It should stand out from regular text and be easily identifiable.</p>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item one</li>
|
||||||
|
<li>Unordered list item two</li>
|
||||||
|
<li>Unordered list item three</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item one</li>
|
||||||
|
<li>Ordered list item two</li>
|
||||||
|
<li>Ordered list item three</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<pre><code>// Code block example
|
||||||
|
function example() {
|
||||||
|
return "Hello, world!";
|
||||||
|
}</code></pre>
|
||||||
|
|
||||||
|
<p>Here's some text with <code>inline code</code> and a <a href="#">link example</a>.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
35
sw.js
Executable file
35
sw.js
Executable file
|
|
@ -0,0 +1,35 @@
|
||||||
|
/* Basic offline-first service worker */
|
||||||
|
const CACHE_NAME = 'indieweb-blog-v1';
|
||||||
|
const OFFLINE_URLS = [
|
||||||
|
'/',
|
||||||
|
'/assets/css/build.css',
|
||||||
|
'/assets/js/main.js',
|
||||||
|
'/assets/favicon-32x32.png',
|
||||||
|
'/assets/apple-touch-icon.png'
|
||||||
|
];
|
||||||
|
|
||||||
|
self.addEventListener('install', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(CACHE_NAME).then((cache) => cache.addAll(OFFLINE_URLS)).then(() => self.skipWaiting())
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('activate', (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.keys().then((keys) => Promise.all(keys.map((k) => (k === CACHE_NAME ? null : caches.delete(k))))).then(() => self.clients.claim())
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('fetch', (event) => {
|
||||||
|
const { request } = event;
|
||||||
|
if (request.method !== 'GET') return;
|
||||||
|
event.respondWith(
|
||||||
|
caches.match(request).then((cached) =>
|
||||||
|
cached || fetch(request).then((resp) => {
|
||||||
|
const respClone = resp.clone();
|
||||||
|
caches.open(CACHE_NAME).then((cache) => cache.put(request, respClone));
|
||||||
|
return resp;
|
||||||
|
}).catch(() => caches.match('/'))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
});
|
||||||
58
tags.njk
Executable file
58
tags.njk
Executable file
|
|
@ -0,0 +1,58 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
pagination:
|
||||||
|
data: collections.tagList
|
||||||
|
size: 1
|
||||||
|
alias: tag
|
||||||
|
addAllPagesToCollections: true
|
||||||
|
permalink: /tags/{{ tag | slug }}/
|
||||||
|
eleventyComputed:
|
||||||
|
title: "Posts tagged '{{ tag }}'"
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Posts tagged
|
||||||
|
<span class="inline-block px-3 py-1 text-sm rounded-full text-white"
|
||||||
|
style="background-color: {{ tag | tagColor }}">#{{ tag }}</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{% set currentSlug = (tag | slug) %}
|
||||||
|
{% set taggedPosts = [] %}
|
||||||
|
{% for post in collections.posts %}
|
||||||
|
{% set matched = false %}
|
||||||
|
{% if post.data.tags %}
|
||||||
|
{% for t in post.data.tags %}
|
||||||
|
{% if (t | slug) == currentSlug %}
|
||||||
|
{% set matched = true %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% if matched %}
|
||||||
|
{% set taggedPosts = (taggedPosts.push(post), taggedPosts) %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% if taggedPosts.length > 0 %}
|
||||||
|
<div class="space-y-6">
|
||||||
|
{% for post in taggedPosts %}
|
||||||
|
<article class="border-b pb-6">
|
||||||
|
<h2 class="text-xl font-semibold">
|
||||||
|
<a href="{{ post.url }}" class="hover:text-blue-600">{{ post.data.title }}</a>
|
||||||
|
</h2>
|
||||||
|
<time class="text-sm text-gray-500" datetime="{{ post.date | htmlDateString }}">
|
||||||
|
{{ post.date | readableDate }}
|
||||||
|
</time>
|
||||||
|
<p class="mt-2 text-gray-700 dark:text-gray-300">
|
||||||
|
{{ post.data.description or (post.templateContent | striptags | truncate(160)) }}
|
||||||
|
</p>
|
||||||
|
<div class="mt-2 text-sm space-x-2">
|
||||||
|
{% for postTag in post.data.tags %}
|
||||||
|
<a class="px-2 py-0.5 rounded text-white text-xs hover:opacity-80"
|
||||||
|
style="background-color: {{ postTag | tagColor }}"
|
||||||
|
href="/tags/{{ postTag | slug }}/">#{{ postTag }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500">No posts found with this tag.</p>
|
||||||
|
{% endif %}
|
||||||
25
tags/index.njk
Normal file
25
tags/index.njk
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Tags
|
||||||
|
permalink: /tags/
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Tags</h1>
|
||||||
|
|
||||||
|
{% if collections.tagList and collections.tagList.length %}
|
||||||
|
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||||
|
{% for t in collections.tagList %}
|
||||||
|
{% set count = 0 %}
|
||||||
|
{% for post in collections.posts %}
|
||||||
|
{% if post.data.tags and (t in post.data.tags) %}
|
||||||
|
{% set count = count + 1 %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<li class="border rounded p-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||||
|
<a class="font-medium hover:text-blue-600" href="/tags/{{ t | slug }}/">#{{ t }}</a>
|
||||||
|
<span class="text-xs text-gray-500">{{ count }} post{% if count != 1 %}s{% endif %}</span>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<p class="text-gray-500">No tags yet.</p>
|
||||||
|
{% endif %}
|
||||||
66
type.njk
Executable file
66
type.njk
Executable file
|
|
@ -0,0 +1,66 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
title: Type
|
||||||
|
permalink: /type/
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1 class="text-2xl font-bold mb-4">Type Scale & Components</h1>
|
||||||
|
<p class="text-gray-600 dark:text-gray-400 mb-6">A living typography page for quick visual checks. Tweak sizes in <code>tailwind.config.cjs</code> or override via utilities.</p>
|
||||||
|
|
||||||
|
<section class="bg-[var(--surface)] border rounded p-4 mb-8">
|
||||||
|
<h2 class="text-xl font-semibold">Fonts Used</h2>
|
||||||
|
<p class="text-gray-700 dark:text-gray-300">This template uses the system UI font stack by default for speed and readability, and a system monospace stack for code.</p>
|
||||||
|
<ul class="text-sm text-gray-600 dark:text-gray-400 list-disc pl-6">
|
||||||
|
<li><strong>Body/UI:</strong> -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif</li>
|
||||||
|
<li><strong>Monospace:</strong> the browser's default <code>monospace</code> stack via Tailwind's <code>font-mono</code> utility</li>
|
||||||
|
</ul>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">Defined in <code>src/assets/css/tailwind.css</code>:</p>
|
||||||
|
<pre class="mt-2"><code class="language-css">/* src/assets/css/tailwind.css */
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
}
|
||||||
|
.system-fonts {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-3">To change fonts, you can:</p>
|
||||||
|
<ol class="text-sm text-gray-600 dark:text-gray-400 list-decimal pl-6">
|
||||||
|
<li>Swap the <code>body { font-family: ... }</code> in <code>src/assets/css/tailwind.css</code>.</li>
|
||||||
|
<li>Optionally add <code>fontFamily</code> under <code>theme.extend</code> in <code>tailwind.config.cjs</code> and use Tailwind utilities (e.g., <code>font-sans</code>, <code>font-mono</code>).</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="prose dark:prose-invert max-w-none">
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
|
<p>
|
||||||
|
Body copy with <strong>bold</strong> and <em>emphasis</em>. Links look like
|
||||||
|
<a href="#">this inline link</a>. Small text appears as
|
||||||
|
<small>supporting detail</small>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Lists</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Unordered list item</li>
|
||||||
|
<li>With sufficient spacing</li>
|
||||||
|
</ul>
|
||||||
|
<ol>
|
||||||
|
<li>Ordered list item</li>
|
||||||
|
<li>Use lists for steps</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<h3>Blockquote</h3>
|
||||||
|
<blockquote>
|
||||||
|
Ship small improvements often. The garden grows one commit at a time.
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<h3>Code</h3>
|
||||||
|
<pre><code class="language-js">// Syntax highlighting is provided client-side via Highlight.js
|
||||||
|
function greet(name) {
|
||||||
|
return `Hello, ${name}!`;
|
||||||
|
}
|
||||||
|
console.log(greet('world'));
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
33
uses.njk
Executable file
33
uses.njk
Executable file
|
|
@ -0,0 +1,33 @@
|
||||||
|
---
|
||||||
|
layout: layouts/base.njk
|
||||||
|
permalink: "/uses/"
|
||||||
|
title: Uses
|
||||||
|
---
|
||||||
|
<h1 class="text-2xl font-bold mb-6">Things I Use</h1>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<section>
|
||||||
|
<b>What I Use For... a personal laptop:</b> HP 15.6" touchscreen business & home laptop, 8GB RAM, 512GB SSD, Windows 10
|
||||||
|
<b>What I Use For... an MP3 player:</b> AiMoonsa MP3 player, 64GB, Black<br>
|
||||||
|
<b>What I Use For... a digital calendar:</b> <a href="https://www.amazon.com/dp/B0FLDY5Q9D">Anyuse 10.1" digital calendar chore chart</a><br>
|
||||||
|
<b>What I Use For... TV and Media</b>: 40" onn. Roku TV, Panasonic DVD Bluray player, YOTON portable 9" DVD player<br>
|
||||||
|
<b>What I Use For... a digital typewriter</b>: Freewrite Alpha<br>
|
||||||
|
<b>What I Use For... a smart watch</b> <a href="https://www.amazon.com/dp/B0GPW96VPJ?th=1">Tesky smart watch</a><br>
|
||||||
|
<b>What I Use For.. drawing:</b> Samsung Galaxy Tab A7, IbispaintX<br>
|
||||||
|
<b>What I Use For... e-books</b>: XTE Ink X4<br>
|
||||||
|
<b>What I Use For... gaming</b>: Nintendo Switch<br><br>
|
||||||
|
<b>What I Use For... this site</b>: Eleventy with CLI deployment to Neocities, using <a href="https://github.com/brennanbrown/11ty-Indie-Web-Blog-Starter/blob/main/GUIDE.md">this blog theme (thank you Brennan!)</a><br>
|
||||||
|
<b>What I Use For... servers</b>:
|
||||||
|
|
||||||
|
<li>2x HP ProBooks, 8GB RAM, 512GB/EA SSD || Runs: personal fediverse, piefed, beszel</li>
|
||||||
|
<li>HP Envy, 12GB RAM, 1TB SSD || Runs: Sunset</li>
|
||||||
|
<li>2x HP Pavilion, 16GB RAM, 1TB SSD || Runs: Cheesy, Rails sites, Fandom.Cooking, UptimeKuma, fanart archive</li>
|
||||||
|
<li>Dell Inspiron All in one desktop, 64GB RAM, 4TB SSD || Runs: Dreamwidth clone, PHPbb forums, forgejo, BookWyrm, FreshRSS, LinkDing, SillyWordz, Status.cafe, personal archive, Ovumcy<br>
|
||||||
|
<li>HP 255 G10 Professional Business Laptop, 64GB RAM, 2TB SSD || Runs: nothing yet...</li>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-8 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
This page is inspired by <a href="https://uses.tech/" class="text-blue-600 hover:text-blue-800" target="_blank" rel="noopener">uses.tech</a>
|
||||||
|
</p>
|
||||||
Loading…
Reference in a new issue