Update and style blog.

It's still very rudimentary, but now there's enough there that it's feasible to post new content.
n-rook · Mar 26, 2023 · 83ec0fb · 83ec0fb
1 parent f87b2d3
commit 83ec0fb
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 16 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -5,6 +5,7 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginBundle = require("@11ty/eleventy-plugin-bundle");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const eleventy = require("@11ty/eleventy");
+const sass = require("sass");
 
 // Thanks to https://github.com/11ty/eleventy-base-blog
 // for providing a lot of inspiration!
@@ -26,17 +27,33 @@ module.exports = function(config) {
 		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
 	});
 
+    config.addExtension("sass", {
+        outputFileExtension: "css",
+
+        compile: async function(inputContent) {
+            const result = sass.compileString(
+                inputContent,
+                {
+                    syntax: 'indented'
+                });
+            return async (data) => result.css;
+        }
+    });
+
     return {
         dir: {
             input: "content",
             includes: "../_includes",
+            data: "../_data",
             output: "_site",
         },
 
 		markdownTemplateEngine: "njk",
 
 		htmlTemplateEngine: "njk",
 
+        templateFormats: ["html", "md", "njk", "sass"],
+
         pathPrefix: "/",
     }
 }
diff --git a/_data/site_info.js b/_data/site_info.js
@@ -0,0 +1,4 @@
+module.exports = {
+    title: 'Silent Selene Blog',
+    description: 'Keep up with Silent Selene news and new features.'
+}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -1,25 +1,22 @@
 <!doctype html>
-<html lang="{{ metadata.language }}">
+<html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>{{ title or metadata.title }}</title>
-        <meta name="description" content="{{ description or metadata.description }}">
+        <title>{{ title or site_info.title }}</title>
+        <meta name="description" content="{{ description or site_info.description }}">
 
-        <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
-		<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+        <link rel="alternate" href="/feed.xml" type="application/atom+xml" title="{{ site_info.title }}">
 
         <meta name="generator" content="{{ eleventy.generator }}">
 
-        <!-- For best performance, fetch CSS inline -->
-        <style>{% getBundle "css" %}</style>
+        <link rel="stylesheet" href="/main.css">
     </head>
 <body>
 
     <header>
-        <a href="/" class="home-link">{{ metadata.title }}</a>
+        <a href="/" class="home-link">{{ site_info.title }}</a>
 
         <nav>
-            <h2 class="visually-hidden">Top level navigation menu</h2>
             <ul class="nav">
             {%- for entry in collections.all | eleventyNavigation %}
                 <li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>

diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk
@@ -3,10 +3,6 @@ layout: layouts/base.njk
 permalink: "articles/{{ title | slugify }}/index.html"
 ---
 <h1>{{ title }}</h1>
-
-<ul class="post-metadata">
-	<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
-    <li>{{ author }}</li>
-</ul>
+<h2 class="post-metadata">Posted by {{ author }} on <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></h2>
 
 {{ content | safe }}
diff --git a/content/feed.njk b/content/feed.njk
@@ -0,0 +1,34 @@
+---json
+{
+  "permalink": "feed.xml",
+  "eleventyExcludeFromCollections": true,
+  "metadata": {
+    "subtitle": "I am writing about my experiences as a naval navel-gazer.",
+    "language": "en",
+    "url": "https://news.silentselene.net/",
+    "author": {
+      "name": "Boaty McBoatFace",
+      "email": "[email protected]"
+    }
+  }
+}
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.url }}">
+  <title>{{ site_info.title }}</title>
+  <subtitle>News and new features at Silent Selene.</subtitle>
+  <link href="{{ permalink | absoluteUrl(metadata.url) }}" rel="self"/>
+  <link href="{{ metadata.url }}"/>
+  <updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+  <id>{{ metadata.url }}</id>
+  {%- for post in collections.posts | reverse %}
+  {%- set absolutePostUrl = post.url | absoluteUrl(metadata.url) %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ post.date | dateToRfc3339 }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content xml:lang="{{ metadata.language }}" type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+  </entry>
+  {%- endfor %}
+</feed>
diff --git a/content/index.md → content/index.html b/content/index.md → content/index.html
@@ -5,6 +5,10 @@
   order: 1
 ---
 
+<p>Welcome to the Silent Selene blog. We'll post updates about new features and development here.</p>
+
+<p>If you're looking for the main site, <a href="https://www.silentselene.net">go here instead</a>.</p>
+
 <h1>Posts</h1>
 
 <ol reversed class="postlist">

diff --git a/content/main.sass b/content/main.sass
@@ -0,0 +1,24 @@
+
+// TODO: Import fonts from main site
+
+header
+    background-color: #420080
+    min-height: 50px
+    display: flex
+    align-items: center
+    margin: 0 0 5px
+
+    .home-link
+        display: block
+        color: white
+        // TODO: Import EB Garamond from main site
+        font: 600 27px "EB Garamond", "Times New Roman", serif
+        margin: auto 10px
+        margin-block: 5px 5px
+        text-decoration: none
+
+main
+    max-width: 800px
+
+.post-metadata
+    font: 200 14px "Lato", "Arial", sans-serif
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-bundle": "^1.0.4",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
-    "luxon": "^3.3.0"
+    "luxon": "^3.3.0",
+    "sass": "^1.60.0"
   }
 }