moved static files necessary for web to web repo

server.js

@@ -2,6 +2,7 @@ const express = require('express')
 const app = express()
 const port = 3000
 var fs = require('fs')
+var path = require('path')
 const { bufferFile, wc, head } = require('./utils')
 
 app.engine('cosmic', function (filePath, options, callback) {
@@ -79,7 +80,7 @@ app.get('/atom.xml', async function (req, res) {
   res.render('raw', { content: content })
 })
 
-app.use(express.static('/var/cosmic/files'))
+app.use(express.static(path.join(__dirname, '/static')))
 app.use(express.static('/var/gopher'))
 
 app.listen(port, () => console.log(`listening on port ${port}!`))

static/scripts.js

@@ -0,0 +1,31 @@
+// I'm sorry you have to see JavaScript on this site, but it's here to
+// enable a manual dark mode toggle. When dark mode support improves I
+// can probably remove this again.
+function setMode(mode, val) {
+  if (val) document.body.classList.add(mode)
+  else document.body.classList.remove(mode)
+  Array.from(document.querySelectorAll('a'))
+  .filter( el => el.href.indexOf('cosmic.voyage') !== -1)
+  .map( el => {
+    var url = el.href
+    var p = url.indexOf('?') !== -1 ? url.substr(url.indexOf('?')) : ''
+    var baseURL = url.split('?')[0]
+    const params = new URLSearchParams(p)
+    if (val) {
+      params.append(mode, 1)
+    } else {
+      params.delete(mode)
+    }
+    p = params.toString()
+    el.href = baseURL + (p ? '?' + p : '')
+  })
+}
+
+window.addEventListener('DOMContentLoaded', function() {
+  var params = new URLSearchParams(window.location.search)
+  if (params.has('dark')) {
+    setMode('dark', true)
+  } else if (params.has('light')) {
+    setMode('light', true)
+  }
+})

static/styles.css

@@ -0,0 +1,141 @@
+@font-face {
+	font-family: 'inconsolata';
+	src: url('/inconsolata-regular-webfont.woff2') format('woff2'),
+			 url('/inconsolata-regular-webfont.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+html {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	color: #333;
+	background-color: #f2f4f4;
+	background-repeat: repeat;
+}
+
+a,
+a:visited,
+a:hover,
+a:active {
+	color: rgb(62, 231, 123);
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+
+.dim {
+	color: rgb(62, 231, 123, 0.5);
+}
+
+.mastodon {
+	display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		color: rgb(50, 200, 100);
+		background-color: #010;
+		background-image: none;
+	}
+
+	a,
+	a:visited,
+	a:hover,
+	a:active {
+		color: rgb(62, 231, 123);
+	}
+
+	.dim {
+		color: rgb(62, 231, 123, 0.5);
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	body {
+		color: #333;
+		background-color: #f2f4f4;
+		background-repeat: repeat;
+	}
+
+	a,
+	a:visited,
+	a:hover,
+	a:active {
+		color: #333;
+		font-weight: bold;
+	}
+
+	.dim {
+		color: rgba(30, 30, 30, 0.5);
+	}
+}
+
+/* Manually toggled dark class on body */
+body.dark {
+	color: rgb(50, 200, 100);
+	background-color: #010;
+	background-image: none;
+}
+.dark a,
+.dark a:visited,
+.dark a:hover,
+.dark a:active {
+	color: rgb(62, 231, 123);
+}
+.dark .dim {
+	color: rgb(62, 231, 123, 0.5);
+}
+
+/* Manually toggled light class on body */
+body.light {
+	color: #333;
+	background-color: #f2f4f4;
+	background-repeat: repeat;
+}
+
+.light a,
+.light a:visited,
+.light a:hover,
+.light a:active {
+	color: #333;
+	font-weight: bold;
+}
+
+.light .dim {
+	color: rgba(30, 30, 30, 0.5);
+}
+
+.page-wrapper {
+	text-align: center;
+}
+
+.inner-wrapper {
+	display: inline-block;
+	text-align: left;
+	white-space: pre;
+	font-family: 'inconsolata', monospace;
+	margin: 0 auto;
+	width: auto;
+}
+
+ol {
+	padding: 0;
+	line-height: 0.5em;
+}
+
+@media screen and (min-width: 700px) {
+	body, html {
+		font-size: 18px;
+	}
+}
+@media screen and (min-width: 900px) {
+	body, html {
+		font-size: 24px;
+	}
+}