From f339227c3d5399ffaeac9e904ea90d3083e0aea5 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Tue, 6 Feb 2024 12:22:15 -0800
Subject: [PATCH] feat: add footer

---
 src/_data/meta.js                   |  6 ++++++
 src/_data/navigation.js             | 16 +++++++++++++++-
 src/_includes/partials/footer.html  | 29 +++++++++++++++++++++++++++--
 src/assets/css/blocks/footer.css    | 11 +++++++++++
 src/assets/css/global/variables.css |  1 +
 src/assets/css/utils/list.css       | 11 +++++++++++
 6 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/css/blocks/footer.css
 create mode 100644 src/assets/css/utils/list.css

diff --git a/src/_data/meta.js b/src/_data/meta.js
index b7bb3f7..f085f9d 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -15,5 +15,11 @@ module.exports = {
   blog: {
     name: "wonderfulfrog",
     description: "Devin Haska's digital garden.",
+    feed: "",
+  },
+  social: {
+    rss: "",
+    github: "",
+    mastodon: "",
   },
 };
diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index f22fe6d..46cfb16 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -13,5 +13,19 @@ module.exports = {
       url: "/catalogue",
     },
   ],
-  bottom: [],
+  bottom: [
+    {
+      text: "Colophon",
+      url: "/colophon",
+    },
+    { text: "Blogroll", url: "/blogroll" },
+    {
+      text: "/uses",
+      url: "/uses",
+    },
+    {
+      text: "/now",
+      url: "/now",
+    },
+  ],
 };
diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
index a45e63a..31e56c1 100644
--- a/src/_includes/partials/footer.html
+++ b/src/_includes/partials/footer.html
@@ -1,3 +1,28 @@
-<footer>
-    Footer.
+{% set socialLinks = meta.social | entries %}
+<footer class="[ footer ]">
+    <div class="[ wrapper ] [ flex justify-between ]">
+        <div class="[ flow ]">
+            <p>&copy; {{ meta.author }} 2018-2024.</p>
+            <nav>
+                <ul class="[ footer-links ] [ flex list-none ]">
+                    {% for link in socialLinks %}
+                        {% set key = link | first %}
+                        {% set url = link | last %}
+                        <li>
+                            <a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{{ key }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </nav>
+        </div>
+        <nav>
+            <ul class="[ footer-links ] [ flex list-none ]">
+                {% for link in navigation.bottom %}
+                    <li>
+                        <a href="{{ link.url }}">{{ link.text }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </nav>
+    </div>
 </footer>
diff --git a/src/assets/css/blocks/footer.css b/src/assets/css/blocks/footer.css
new file mode 100644
index 0000000..89336d3
--- /dev/null
+++ b/src/assets/css/blocks/footer.css
@@ -0,0 +1,11 @@
+.footer {
+  background-color: var(--color-bg-soft);
+  margin-block-start: 1.5rem;
+  padding-block: 1.5rem;
+}
+
+.footer-links {
+  margin: 0;
+  padding: 0;
+  gap: 0.5rem;
+}
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
index 60029ff..214f9df 100644
--- a/src/assets/css/global/variables.css
+++ b/src/assets/css/global/variables.css
@@ -7,6 +7,7 @@
   --color-dark: var(--color-neutral-950);
 
   --color-bg: var(--color-light);
+  --color-bg-soft: var(--color-neutral-100);
   --color-text: var(--color-dark);
   --color-text-soft: var(--color-neutral-600);
   --color-primary: var(--color-aqua-400);
diff --git a/src/assets/css/utils/list.css b/src/assets/css/utils/list.css
new file mode 100644
index 0000000..f7845a7
--- /dev/null
+++ b/src/assets/css/utils/list.css
@@ -0,0 +1,11 @@
+.list-none {
+  list-style-type: none;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-decimal {
+  list-style-type: decimal;
+}