Implement the elsewhere page

package.json

@@ -4,7 +4,7 @@
 	"dependencies": {
 		"@weborigami/origami": "^0.2.7",
 		"highlight.js": "^11.11.1",
-		"marked": "^15.0.6",
+		"marked": "^15.0.7",
 		"marked-alert": "^2.1.2",
 		"marked-footnote": "^1.2.4",
 		"marked-gfm-heading-id": "^4.1.1",

src/assets/styles/pages/elsewhere.css

@@ -0,0 +1,41 @@
+.writing {
+	padding: 1rem 0;
+	border-bottom: 2px solid var(--bright_grey);
+	text-decoration: none;
+	text-transform: uppercase;
+	display: block;
+
+	h2 {
+		font-size: 1.5rem;
+		line-height: inherit;
+	}
+
+	.contribution {
+		text-transform: none;
+	}
+
+	&:focus,
+	&:hover {
+		color: var(--blue);
+		border-color: var(--blue);
+	}
+
+	&::after {
+		display: none;
+	}
+}
+
+.pagination {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	align-items: center;
+	text-align: center;
+
+	a {
+		padding: 2rem;
+	}
+
+	@media (max-width: 26rem) {
+		grid-template-columns: none;
+	}
+}

src/assets/styles/pages/firehose.css

@@ -34,6 +34,10 @@ article {
 	}
 }
 
+.elsewhere {
+	background: light-dark(oklch(from var(--yellow) l c h / calc(alpha - 0.8)), oklch(from var(--yellow) l c h / calc(alpha - 0.9)));
+}
+
 .micro {
 	background: light-dark(oklch(from var(--blue) l c h / calc(alpha - 0.8)), oklch(from var(--blue) l c h / calc(alpha - 0.9)));
 }

src/blogs.ori

@@ -5,7 +5,7 @@
 	stylesheet: "pages/links.css"
 
 @text:
-`<span id="section" data-pagefind-filter="Content Type">Links</span>
+`<span id="section" data-pagefind-ignore data-pagefind-filter="Content Type">Links</span>
 
 <div class="readable-width">
 	<h1>Blog Links</h1>

src/elsewhere_data.yaml

@@ -0,0 +1,16 @@
+- title: DOGE's Website Is Just One Big X Ad
+  location: WIRED
+  url: www.wired.com/story/doge-website-is-just-one-big-x-ad/
+  pub_time: 2025-02-13
+  sort: contributed
+  contribution: Provided reference regarding technical details of the Department of Government Efficiency website.
+- title: My favourite colour is Chuck Norris red
+  location: HTMHell
+  url: www.htmhell.dev/adventcalendar/2024/20/
+  pub_time: 2024-12-20
+  sort: wrote
+- title: 100K Users
+  location: Revolt
+  url: revolt.chat/updates/100k-users
+  pub_time: 2023-05-13
+  sort: wrote

src/elsewhere_syndication.ori

@@ -0,0 +1,15 @@
+(elsewhere) => {
+  version: "https://jsonfeed.org/version/1.1"
+  title: "Vale.Rocks Elsewhere"
+  description: "My writing external to Vale.Rocks."
+  home_page_url: "https://vale.rocks"
+  feed_url: "https://vale.rocks/elsewhere/feed.json"
+
+  items: values(map(elsewhere, (elsewhere, fileName) => {
+	id: `https://${ elsewhere/url }`
+	url: `https://${ elsewhere/url }`
+	title: elsewhere/title
+	content_html: `${ elsewhere/sort === 'wrote' ? `<p>I wrote <a href="https://${ elsewhere/url }">${ elsewhere/title }</a> over on ${ elsewhere/location }.</p>` : '' } ${ elsewhere/sort === 'contributed' ? `<p>I contributed to <a href="https://${ elsewhere/url }">${ elsewhere/title }</a> on ${ elsewhere/location }.</p>` : '' } ${ elsewhere/contribution ? `<p>${ elsewhere/contribution }</p>` : '' }`
+    date_published: elsewhere/pub_time
+  }))
+}

src/firehose_data.ori

@@ -1,3 +1,11 @@
-{ ...post_data.ori, ...micro_data.ori, ...photography_data.ori }
+{
+	...post_data.ori,
+	...micro_data.ori,
+	...photography_data.ori,
+	...(elsewhere_data.yaml → =map(_, (elsewhere) => {
+		  ...elsewhere
+		  type: "elsewhere"
+	}))
+}
 → =sort(_, (item) => new:Date(item/pub_time))
 → reverse

src/main_template.ori

@@ -119,6 +119,7 @@
 						<li><a href="/firehose/1">Firehose</a></li>
 						<li><a href="/syndication">Syndication</a></li>
 						<li><a href="/photography">Photography</a></li>
+						<li><a href="/elsewhere/1">Elsewhere</a></li>
 						<li><a href="/links">Links</a></li>
 						<li><a href="/uses">Uses</a></li>
 						<li><a href="/sitemap.xml">Sitemap</a></li>

src/miscellaneous.ori

@@ -5,7 +5,7 @@
 	stylesheet: "pages/links.css"
 
 @text:
-`<span id="section" data-pagefind-filter="Content Type">Links</span>
+`<span id="section" data-pagefind-ignore data-pagefind-filter="Content Type">Links</span>
 
 <div class="readable-width">
 	<h1>Miscellaneous Links</h1>

src/pages/elsewhere.ori

@@ -0,0 +1,34 @@
+(paginated_elsewhere) => main_template.ori({
+	title: "Elsewhere"
+	description: "Vale's writing or writing Vale has contributed to published externally to Vale.Rocks. Read tech journalism, web development insights, digital culture analysis, and more from Declan Chidlow."
+	og_description: "My writing external to Vale.Rocks."
+	stylesheet: "pages/elsewhere.css"
+
+@text:
+`<h1 id="section" data-pagefind-filter="Content Type">Elsewhere</h1>
+
+<div class="readable-width">
+	${ paginated_elsewhere/previousPage	? `` : `<p>Writing external to this website that I have worked on, contributed to, or otherwise directly been involved with.</p>` }
+
+	${ map(paginated_elsewhere/items,
+	(item, key) =>
+		`<a href="https://${ item/url }" class="writing">
+			<h2>${ item/title }</h2>
+			<p>${ item/location } | <time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></p>
+			${item/contribution ? `<p class="contribution">${ item/contribution }</p>` : '' }
+		</a>`)}
+
+	<div data-pagefind-ignore="all" class="pagination">
+		${ paginated_elsewhere/previousPage
+			? `<a href="/elsewhere/${ paginated_elsewhere/previousPage }"><span aria-hidden="true"><</span> Newer</a>`
+			: "<span></span>"
+		}
+
+		<p>Page ${ paginated_elsewhere/pageNumber} of ${ paginated_elsewhere/pageCount}</p>
+
+		${ paginated_elsewhere/nextPage
+			? `<a href="/elsewhere/${ paginated_elsewhere/nextPage }">Older <span aria-hidden="true">></span></a>`
+			: "<span></span>"
+		}
+	</div>
+</div>`})

src/pages/firehose.ori

@@ -13,7 +13,6 @@
 	${ map(paginated_firehose/items,
 	(item, key) =>
 		`${ item/type === 'post' ? 
-		// if post
 			`<article class="post">
 				<header>
 					<div>
@@ -35,7 +34,6 @@
 				</article>`
 
 		: item/type === 'photo' ? 
-		// if photo
 			`<article class="photo">
 				<header>
 					<div>
@@ -58,8 +56,23 @@
 				<img src="${ item/image }" alt="${ item/alt_text }" />
 			</article>`
 
+		: item/type === 'elsewhere' ? 
+			`<article class="elsewhere">
+				<header>
+					<div>
+						<span class="icons">open_in_new</span>
+						<h2><a href="https://${ item/url }"><time datetime="${ item/pub_time }" title="Date of first publication.">${ functions/pretty-date.js(item/pub_time) }</time></a></h2>
+					</div>
+				</header>
+
+				<div class="readable-width">
+					${ item/sort === 'wrote' ? `<p>I wrote <a href="https://${ item/url }">${ item/title }</a> over on ${ item/location }.</p>` : '' }
+					${ item/sort === 'contributed' ? `<p>I contributed to <a href="https://${ item/url }">${ item/title }</a> on ${ item/location }.</p>` : '' }
+					${item/contribution ? `<p>${ item/contribution }</p>` : '' }
+				</div>
+			</article>`
+
 		:
-		// if micro (not post or photo)
 			`<article class="micro">
 				<header>
 					<div>

src/pages/syndication.md

@@ -19,9 +19,17 @@ I [write long-form on this site](/posts), which you can subscribe to via:
 - RSS: https://vale.rocks/posts/feed.xml
 - JSON Feed: https://vale.rocks/posts/feed.json
 
+## Elsewhere
+
+Sometimes I work on, contribute to, or am otherwise directly involved with writing that is [external to this website](/elsewhere/1). You can follow this content via:
+
+- RSS: https://vale.rocks/elsewhere/feed.xml
+- JSON Feed: https://vale.rocks/elsewhere/feed.json
+
 ## Photography
 
 I [take photos](/photography) sometimes. If you'd like to know when I take new ones, you can subscribe through:
+
 - RSS: https://vale.rocks/photography/feed.xml
 - JSON Feed: https://vale.rocks/photography/feed.json
 

src/site.ori

@@ -19,32 +19,42 @@
 		feed.xml = rss(post_syndication.ori(post_data.ori))
 	}
 
-	micros = {
-		...map(micro_data.ori, micro_template.ori)
-		feed.json = json(micro_syndication.ori(micro_data.ori))
-		feed.xml = rss(micro_syndication.ori(micro_data.ori))
+	(paginated_elsewhere) = paginate(elsewhere_data.yaml , 15)
+	elsewhere/ = {
+		...map(paginated_elsewhere, {
+			extension: "→.html"
+			value: pages/elsewhere.ori
+		})
+		feed.json = json(elsewhere_syndication.ori(elsewhere_data.yaml))
+		feed.xml = rss(elsewhere_syndication.ori(elsewhere_data.yaml))
 	}
 
+	portfolio.html = pages/portfolio.ori(portfolio_data.ori)
+	portfolio/ = map(portfolio_data.ori, portfolio_template.ori)
+
 	photography.html = pages/photography.ori(photography_data.ori)
 	photography = {
 		...map(photography_data.ori, photography_template.ori)
 		feed.json = json(photography_syndication.ori(photography_data.ori))
 		feed.xml = rss(photography_syndication.ori(photography_data.ori))
 	}
 
-	(paginated_firehose) = paginate(firehose_data.ori, 15)
-	firehose/ = map(paginated_firehose, {
-		extension: "→.html"
-		value: pages/firehose.ori
-	})
-
-	portfolio.html = pages/portfolio.ori(portfolio_data.ori)
-	portfolio/ = map(portfolio_data.ori, portfolio_template.ori)
-
 	links.html = pages/links.ori(blogs.yaml, tools-and-resources.yaml, miscellaneous.yaml)
 	links/ = {
 		blogs.html = blogs.ori(blogs.yaml)
 		tools-and-resources.html = tools-and-resources.ori(tools-and-resources.yaml)
 		miscellaneous.html = miscellaneous.ori(miscellaneous.yaml)
 	}
+
+	micros = {
+		...map(micro_data.ori, micro_template.ori)
+		feed.json = json(micro_syndication.ori(micro_data.ori))
+		feed.xml = rss(micro_syndication.ori(micro_data.ori))
+	}
+
+	(paginated_firehose) = paginate(firehose_data.ori, 15)
+	firehose/ = map(paginated_firehose, {
+		extension: "→.html"
+		value: pages/firehose.ori
+	})
 }

src/tools-and-resources.ori

@@ -5,7 +5,7 @@
 	stylesheet: "pages/links.css"
 
 @text:
-`<span id="section" data-pagefind-filter="Content Type">Links</span>
+`<span id="section" data-pagefind-ignore data-pagefind-filter="Content Type">Links</span>
 
 <div class="readable-width">
 	<h1>Tools and Resources</h1>