buncha progress

_config/filters.js

@@ -1,3 +1,5 @@
+import { DateTime } from "luxon";
+
 export default function(eleventyConfig) {
 	// Return the keys used in an object
 	eleventyConfig.addFilter("getKeys", target => {
@@ -9,33 +11,44 @@ export default function(eleventyConfig) {
 		let tagline;
 		switch (tag) {
 			case "animals and the outdoors":
-				tagline = "grass touchin'";
+				tagline = "touchin' grass";
 				break;
 			case "art and crafts":
-				/* tagline = */
+				tagline = "makin' stuff";
 				break;
 			case "food and drink":
 				tagline = "good eatin'";
 				break;
 			case "history and science":
-				/* tagline = */
+				tagline = "book learnin'"
 				break;
-			case "home improvement and diy":
+			case "repair and diy":
 				tagline = "fixin' stuff";
 				break;
 			case "interpersonal and life":
-				/* tagline = */
+				tagline = "better livin'";
 				break;
 			case "technology":
 				tagline = "computer touchin'";
 				break;
-			case "writing, editing, and literature":
+			case "writing editing and literature":
-				/* tagline = */
+				tagline = "wordsmithin'";
 				break;
 		};
 		return tagline;
 	});
 
+	/* For <time> elements */
+	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
+		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat('yyyy-LL-dd');
+	});
+
+	/* Human-readable dates */
+	eleventyConfig.addFilter("readableDate", (dateObj, zone) => {
+		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
+			.toLocaleString(DateTime.DATE_FULL);
+	});
+
 	/* Filter out structural tags */
 	eleventyConfig.addFilter("removeCoreTags", (tags) => {
 		return tags.filter(tag => ["all"].indexOf(tag) === -1);

_data/metadata.js

@@ -1,5 +1,5 @@
 export default {
-	title: "Fedi Classifieds",
+	title: "Fediverse Skillshare Classifieds",
 	description: "Skillshares and more",
 	url: "",
 	author: "Lee Cattarin"

_includes/footer.njk

@@ -1,2 +1,13 @@
 <footer>
+  <ul>
+    <li>
+      maintained by <a href="https://leecat.art">lee</a>
+    </li>
+    <li>
+      <a href="https://heckin.technology/inherentlee/fedi-classifieds">source code</a>
+    </li>
+    <li>
+      <a href="/submit/">submit your own</a>
+    </li>
+  </ul>
 </footer>

_includes/layouts/base.njk

@@ -37,6 +37,8 @@
     {% include "header.njk" %}
 
     <main id="main">
+      <h1>{{ title }}</h1>
+
       {{ content | safe }}
     </main>
 

css/home.css

@@ -0,0 +1,108 @@
+#ads {
+	columns: 3;
+}
+
+@media (max-width: 1050px) {
+	#ads {
+		columns: 2;
+	}
+}
+
+@media (max-width: 650px) {
+	#ads {
+		columns: 1;
+	}
+}
+
+/* jump links */
+#jump-links {
+	padding-bottom: 1rem;
+	margin-bottom: 1rem;
+	border-bottom: solid var(--color-purple);
+}
+
+#jump-links h2,
+#category-list li {
+	font-family: "Bebas Neue";
+	font-size: 1.3rem;
+	font-weight: normal;
+}
+
+#jump-links * {
+	display: inline;
+}
+
+#category-list li {
+	list-style: none;
+  margin: 0;
+}
+
+#category-list li:not(:last-child)::after {
+	content: "..." / "";
+}
+
+/* categories */
+
+.category {
+	break-inside: avoid;
+	border-bottom: solid var(--color-purple);
+	margin-bottom: 1rem;
+}
+
+.category-title {
+	background-color: var(--color-gray);
+	padding: .25rem;
+	margin-bottom: .5rem;
+}
+
+/* references highlighting */
+/* drawn from https://aarontgrogg.com/blog/2012/05/18/pure-css-highlight-for-link-target/ */
+.category-title:has(h2:target) {
+  animation: hilite 2.5s;
+}
+
+@keyframes hilite {
+	0% {background-color: var(--color-gray);}
+	10% {background-color: var(--color-cyan-flipped);}
+	100% {background-color: var(--color-gray);}
+}
+
+/* remove animation for reduced motion viewers */
+@media (prefers-reduced-motion: reduce) {
+	.category-title:has(h2:target) {
+		animation: none;
+		font-weight: bold;
+	}
+}
+
+.category-title h2 {
+	scroll-margin-top: 4rem;
+	font-family: "Bebas Neue";
+}
+
+.category-title p {
+	text-align: right;
+	font-weight: bold;
+}
+
+/* individual ads */
+
+.ad {
+	margin-bottom: 1rem;
+}
+.ad:not(:last-child) {
+	border-bottom: thin solid var(--color-purple);
+	padding-bottom: 1rem;
+}
+
+.blurb {
+	margin-bottom: .5rem;
+}
+.blurb a {
+	font-weight: bold;
+}
+
+.listed-on {
+	font-size: .85rem;
+	text-align: right;
+}

css/main.css

@@ -1,3 +1,21 @@
+:root {
+	color-scheme: light dark;
+
+	--color-dark: #222;
+	--color-light: #ddd;
+	--color-cyan-dark: #134947;
+	--color-cyan-light: #40c5be;
+	--color-purple-dark: #6007b1;
+	--color-purple-light: #ba99fe;
+
+	--color-text: light-dark(var(--color-dark), var(--color-light));
+	--color-bg: light-dark(var(--color-light), var(--color-dark));
+	--color-gray: rgb(0 0 0 / 15%);
+	--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
+	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
+	--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
+}
+
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -5,29 +23,87 @@
 }
 
 body {
+	color: var(--color-text);
+	background-color: var(--color-bg);
 	width: 65%;
+	max-width: 1400px;
 	margin: 0 auto;
+	font-family: "Fraunces";
+	font-weight: 300;
 }
 
-#ads {
+main {
-	columns: 3;
+	padding-bottom: 2rem;
+	border-bottom: solid var(--color-purple);
+}
+
+@media (max-width: 1050px) {
+	body {
+		width: 85%
+	}
+}
+
+@media (max-width: 650px) {
+	body {
+		width: 92%;
+	}
+}
+
+h1, h3 {
+	font-weight: 400;
 }
 
 h1 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-align: center;
-	font-size: 4rem;
+	font-size: 3rem;
-	margin: 3rem auto 1rem;
+	margin: 3rem auto;
 }
 
-h2 {
+@media (max-width: 650px) {
-	font-family: "Bebas Neue";
+	h1 {
-	background-color: lightgray;
+		font-size: 2.4rem;
+		margin-top: 1rem;
+	}
 }
 
 h3 {
-	font-family: "Fraunces";
-	font-weight: 400;
 	text-transform: capitalize;
+	margin-bottom: .5rem;
+}
+
+a {
+	color: var(--color-cyan);
+}
+
+a:visited {
+	color: var(--color-purple);
+}
+
+main ul {
+	margin-left: 1rem;
+}
+
+main li {
+	margin-left: 1rem;
+}
+
+footer {
+	padding: 1rem 0;
+}
+
+footer ul {
+	list-style: none;
+	display: flex;
+	justify-content: space-around;
+}
+
+footer li {
+	display: inline;
+	font-family: "Bebas Neue";
+	font-size: 1.15rem;
+}
+
+/* iframe is on submission page */
+iframe {
+	margin: 2rem 0;
 }

eleventy.config.js

@@ -1,3 +1,5 @@
+import { IdAttributePlugin } from "@11ty/eleventy";
+
 import pluginFilters from "./_config/filters.js";
 
 export default async function(eleventyConfig) {
@@ -23,6 +25,9 @@ export default async function(eleventyConfig) {
 	/* All filters from _config/filters.js */
 	eleventyConfig.addPlugin(pluginFilters);
 
+	/* `id` attributes */
+	eleventyConfig.addPlugin(IdAttributePlugin);
+
 	/* Shortcodes */
 	eleventyConfig.addShortcode("currentBuildDate", () => {
 		return (new Date()).toISOString();
@@ -44,4 +49,3 @@ export const config = {
 	htmlTemplateEngine: "njk",
 	templateFormats: ["html", "md", "njk"],
 };
-

node_modules/.package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Fediverse Classifieds",
+  "name": "fediverse-classifieds",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,

package-lock.json

@@ -1,15 +1,16 @@
 {
-  "name": "Fediverse Classifieds",
+  "name": "fediverse-classifieds",
   "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "Fediverse Classifieds",
+      "name": "fediverse-classifieds",
       "version": "1.0.0",
       "license": "AGPL-3.0-only",
       "devDependencies": {
-        "@11ty/eleventy": "^3.1.5"
+        "@11ty/eleventy": "^3.1.5",
+        "luxon": "^3.7.2"
       }
     },
     "node_modules/@11ty/dependency-tree": {

package.json

@@ -11,6 +11,7 @@
   "license": "AGPL-3.0-only",
   "type": "module",
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.5"
+    "@11ty/eleventy": "^3.1.5",
+    "luxon": "^3.7.2"
   }
 }

src/ads/00-test-test.md

@@ -4,4 +4,5 @@ handle: 00
 server: test.test
 tags: art and crafts
 blurb: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+date: 2026-04-21
 ---

src/ads/01-test-test.md

@@ -4,4 +4,5 @@ handle: 01
 server: test.test
 tags: history and science
 blurb: Quisque mauris erat, tempor non egestas sollicitudin, feugiat id risus. Duis eget ornare nunc. Cras sodales, eros quis finibus luctus, enim sem dictum ante, sed sodales ipsum ante a metus.
+date: 2026-04-22
 ---

src/ads/02-test-test.md

@@ -4,4 +4,5 @@ handle: 02
 server: test.test
 tags: interpersonal and life
 blurb: Fusce faucibus mauris ut metus molestie viverra. In varius erat in lectus scelerisque, vitae ornare sapien euismod. Pellentesque ornare aliquam erat, pellentesque eleifend tellus consequat ut. Donec mollis, lacus vitae bibendum hendrerit, nisi metus dignissim lacus, nec tincidunt nisl ligula vel metus.
+date: 2026-04-23
 ---

src/ads/03-test-test.md

@@ -4,4 +4,5 @@ handle: 03
 server: test.test
 tags: writing editing and literature
 blurb: Sed a commodo lectus. Curabitur tincidunt, eros vel mollis dapibus, mauris dui pharetra mauris, et dapibus leo nisi vitae eros.
+date: 2026-04-24
 ---

src/ads/04-test-test.md

@@ -4,4 +4,5 @@ handle: 04
 server: test.test
 tags: food and drink
 blurb: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus vitae augue ac neque congue pellentesque vitae a enim. Donec euismod dolor sit amet dui dapibus posuere. Donec eget blandit ligula, ac tempor nunc.
+date: 2026-04-25
 ---

src/ads/05-test-test.md

@@ -4,4 +4,5 @@ handle: 05
 server: test.test
 tags: animals and the outdoors
 blurb: Duis interdum purus non iaculis convallis. Nunc mi lorem, consequat sed luctus vitae, lobortis in arcu.
+date: 2026-04-26
 ---

src/ads/06-test-test.md

@@ -2,6 +2,7 @@
 title: fix your sink or toilet
 handle: 06
 server: test.test
-tags: home improvement and diy
+tags: repair and diy
 blurb: Aliquam justo justo, scelerisque a ligula sed, elementum pharetra quam. Ut augue nibh, finibus vel dui nec, sagittis bibendum leo. Quisque libero diam, maximus in dui ac, sollicitudin congue enim.
+date: 2026-04-27
 ---

src/ads/07-test-test.md

@@ -0,0 +1,8 @@
+---
+title: Navigating Workplace Transition
+handle: 07
+server: test.test
+tags: interpersonal and life
+blurb: Donec nisl ligula, mollis sit amet gravida eget, aliquam vitae nibh. Fusce diam nulla, interdum a ex a, semper lacinia elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia fermentum arcu, molestie ornare purus lobortis eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc convallis turpis nisi, nec volutpat dui semper at.
+date: 2026-04-28
+---

src/ads/inherentlee-flipping-rocks.md

@@ -1,7 +1,8 @@
 ---
-title: intro web development and terminal basics
+title: introductory web development and terminal basics
 handle: inherentlee
 server: flipping.rocks
 tags: technology
 blurb: I'm happy to help you set up a personal or hobby site with HTML, CSS, and JS basics, or maybe a static site generator! Alternately, I'll talk about git and the terminal.
+date: 2026-04-29
 ---

src/ads/template.md

@@ -4,4 +4,5 @@ handle:
 server:
 tags:
 blurb:
+date:
 ---

src/index.njk

@@ -1,18 +1,40 @@
 ---
 layout: base.njk
+title: Fediverse Skillshare Classifieds
 ---
+{% css %}{% include "css/home.css" %}{% endcss %}
 
-<h1>Fediverse Classifieds</h1>
+<div id="jump-links">
+  <h2>jump to...</h2>
+  <ul id="category-list">
+  {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
+    <li>
+      <a href="#{{ tag | slugify }}">{{ tag }}</a>
+    </li>
+  {% endfor %}
+  </ul>
+</div>
 
 <div id="ads">
   {% for tag in collections | getKeys | removeCoreTags | sortAlphabetically %}
-    <h2 class="category">{{ tag }}</h2>
+    <div class="category">
-    <p class="tagline">{{ tag | getTagline }}</p>
+      <div class="category-title">
-    {% for post in collections[tag] %}
+        <h2>{{ tag }}</h2>
-      <h3>{{ post.data.title }}</h3>
+        <p>{{ tag | getTagline }}</p>
-      <a href="https://{{ post.data.server }}/@{{ post.data.handle }}"
+      </div>
-        target="_blank">@{{ post.data.handle }}@{{ post.data.server}}</a>
+      {% for ad in collections[tag] %}
-      <p>{{ post.data.blurb }}</p>
+        <div class="ad">
-    {% endfor %}
+          <h3>{{ ad.data.title }}</h3>
+          <p class="blurb">
+            <a href="https://{{ ad.data.server }}/@{{ ad.data.handle }}"
+              target="_blank">@{{ ad.data.handle }}@{{ ad.data.server}}</a>
+            offers: {{ ad.data.blurb }}
+          </p>
+          <p class="listed-on">
+            listed on <time datetime="{{ ad.date | htmlDateString }}">{{ ad.date | readableDate() }}</time>
+          </p>
+        </div>
+      {% endfor %}
+    </div>
   {% endfor %}
 </div>

src/submit.njk

@@ -0,0 +1,21 @@
+---
+layout: base.njk
+title: Submit an Ad
+---
+
+<p>To submit to the Skillshare Classifieds, you'll need:</p>
+
+<ul>
+  <li>your fediverse handle</li>
+  <li>the most relevant category for your listing</li>
+  <li>a title for your offering</li>
+  <li>a short description</li>
+</ul>
+
+<p>See <a href="/">the home page</a> for inspiration.</p>
+
+<iframe class="airtable-embed"
+  src="https://airtable.com/embed/appbdRJ59MLprB1iC/pagfJTOl4KPwh7trd/form"
+  frameborder="0" onmousewheel="" width="100%" height="533"
+  style="background: transparent; border: 1px solid #ccc;">
+</iframe>