feat: add accessible markup/css

biome.json

@@ -0,0 +1,34 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"ignoreUnknown": false
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	}
+}

package.json

@@ -24,6 +24,7 @@
 		"@11ty/eleventy": "^3.1.2"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "2.2.5",
 		"autoprefixer": "^10.4.21",
 		"postcss": "^8.5.6",
 		"postcss-csso": "^6.0.1",

src/content/_data/metadata.js

@@ -1,8 +1,25 @@
 export default {
+    // Basic site identity
     siteUrl: 'https://j-m.es',
     siteName: 'James Loveridge',
     jobTitle: 'Software Engineer',
-    bluesky: 'j-m.es',
-    github: 'j-mes',
-    linkedin: 'j-mes'
+
+    // Short description used in meta description and social previews
+    description: 'Intermittent notes written by James Loveridge',
+
+    // Social / federated profiles (fill with full profile URLs if you prefer)
+    bluesky: 'https://bsky.app/profile/j-m.es',
+    mastodon: '',
+    github: 'https://github.com/j-mes',
+    linkedin: 'https://www.linkedin.com/in/j-mes',
+
+    // Social embed / sharing defaults
+    // socialImage: '/images/social-share.png',
+    // twitterHandle: '', // include @ if you wish, e.g. '@jmes'
+    // fbAppId: '',
+
+    // Misc
+    robots: 'index, follow',
+    // themeColor: '#0a0a0a',
+    // manifest: '/manifest.json'
 };

src/layouts/archive.njk

@@ -1,12 +1,12 @@
 {% extends "main.njk" %}
 {% block content %}
-<main class="archive">
-	<h1>{{ entries.title }}</h1>
+<main role="main" aria-labelledby="archive-title">
+	<h1 id="archive-title">{{ entries.title }}</h1>
 
 	{% if content %}
-	<div class="archive-intro">
+	<section>
 		{{ content | safe }}
-	</div>
+	</section>
 	{% endif %}
 
 	{% if collectionKey %}
@@ -15,12 +15,14 @@
 	{% if items and items | length > 0 %}
 	{% if groupByYear %}
 		{% for year in items | groupByYear %}
-			<section id="year-{{ year.year }}">
-			<h2>{{ year.year }}</h2>
+			<section id="year-{{ year.year }}" aria-labelledby="year-{{ year.year }}-heading">
+			<h2 id="year-{{ year.year }}-heading">{{ year.year }}</h2>
 			<ul>
 				{% for entry in year.items %}
 				<li>
-					<a href="{{ entry.url }}">{{ entry.data.title }}</a> &ndash; <time>{{ entry.date.toLocaleDateString('en-GB', { day: "numeric", month: "long" }) }}</time>
+					<a href="{{ entry.url }}">{{ entry.data.title }}</a>
+					&ndash;
+					<time datetime="{{ entry.date.toISOString() }}">{{ entry.date.toLocaleDateString('en-GB', { day: "numeric", month: "long" }) }}</time>
 				</li>
 				{% endfor %}
 			</ul>
@@ -30,16 +32,20 @@
 		<ul>
 			{% for entry in items %}
 			<li>
-				<a href="{{ entry.url }}">{{ entry.data.title }}</a> &ndash; <time>{{ entry.date.toLocaleDateString('en-GB', { day: "numeric", month: "long" }) }}</time>
+				<a href="{{ entry.url }}">{{ entry.data.title }}</a>
+				&ndash;
+				<time datetime="{{ entry.date.toISOString() }}">{{ entry.date.toLocaleDateString('en-GB', { day: "numeric", month: "long" }) }}</time>
 			</li>
 			{% endfor %}
 		</ul>
 		{% endif %}
 	{% else %}
-		<p>No entries found.</p>
+		<p role="status">No entries found.</p>
 	{% endif %}
 	{% else %}
-		<pre><code>No collectionKey set in frontmatter or data file for this archive page.</code></pre>
+		<section aria-live="polite">
+			<pre><code>No collectionKey set in frontmatter or data file for this archive page.</code></pre>
+		</section>
 	{% endif %}
 
 </main>

src/layouts/home.njk

@@ -1,7 +1,7 @@
 {# src/layouts/home.njk #}
 {% extends "main.njk" %}
 {% block content %}
-<article class="post">
+<article>
 	{{ content | safe }}
 
 	{%- if collections.notes -%}
@@ -12,17 +12,17 @@
 	{%- endif -%}
 
 	{% if latest %}
-	<section class="latest-intermittent-note">
-		<h2>Latest intermittent note</h2>
+	<section aria-labelledby="latest-heading">
+		<h2 id="latest-heading">Latest intermittent note</h2>
 		<h3><a href="{{ latest.url }}">{{ latest.data.title or latest.data.page.title or latest.fileSlug }}</a></h3>
-		<div class="note-content">
-			{{ latest.templateContent | striptags(true) | truncateWords(80)| safe }}
+		<div aria-describedby="latest-excerpt">
+			<p id="latest-excerpt">{{ latest.templateContent | striptags(true) | truncateWords(80)| safe }}</p>
 		</div>
 	</section>
 	{% endif %}
 
-	<section class="archives">
-		<h2>Here's the other things for intermittent notes</h2>
+	<section aria-labelledby="archives-heading">
+		<h2 id="archives-heading">Here's the other things for intermittent notes</h2>
 		<ul>
 			{% if collections.notes %}
 				<li><a href="/notes/">Archives</a></li>

src/layouts/main.njk

@@ -2,16 +2,24 @@
 <html lang="en-GB">
 	<head>
 		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>{{ title }} | {{ metadata.siteName }} &ndash; {{ metadata.jobTitle }}</title>
-		<link rel="stylesheet" href="/style.css" />
+		{% include 'meta-tags.njk' %}
 	</head>
 	<body>
-		<header>
-			<a href="/" title="{{ metadata.siteName }} &ndash; {{ metadata.jobTitle }}">{{ metadata.siteName }} &ndash; {{ metadata.jobTitle }}</a>
-			<h1>{{ title }}</h1>
+		<a href="#main-content">Skip to main content</a>
+		<header role="banner" aria-label="Site header">
+			<div>
+				<a href="/" title="{{ metadata.siteName }} &ndash; {{ metadata.jobTitle }}">{{ metadata.siteName }} &ndash; {{ metadata.jobTitle }}</a>
+			</div>
+			<h1 id="page-title">{{ title }}</h1>
 		</header>
+
+		<main id="main-content" role="main" aria-labelledby="page-title">
 			{% block content %}{% endblock %}
-		<footer>
+		</main>
+
+		<footer role="contentinfo" aria-label="Site footer">
 			{# Do something nice here? #}
 		</footer>
 	</body>