From a65a26ebe4168c5dbcd40ac9ec54044a5f464916 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Sat, 3 Feb 2024 21:33:21 -0800
Subject: [PATCH] feat: add post layout (wip)

---
 config/filters/index.js                      | 13 ++++++++++++-
 eleventy.config.js                           | 10 ++++++++--
 package.json                                 |  1 +
 src/_data/colors.js                          | 13 ++++++++++++-
 src/_layouts/post.html                       | 14 ++++++++++++++
 src/assets/css/global/variables.css          |  4 ++--
 src/content/posts/posts.json                 |  2 +-
 src/content/posts/switching-to-protonmail.md |  8 --------
 yarn.lock                                    |  5 +++++
 9 files changed, 55 insertions(+), 15 deletions(-)
 create mode 100644 src/_layouts/post.html

diff --git a/config/filters/index.js b/config/filters/index.js
index 9f23f4e..98a77af 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -1,17 +1,28 @@
+const dayjs = require("dayjs");
+const utc = require("dayjs/plugin/utc");
+
 const postcss = require("postcss");
 const cssnano = require("cssnano");
 
 const values = Object.values;
 const entries = Object.entries;
 
+dayjs.extend(utc);
+
 const minifyCss = async (css) => {
   const output = await postcss([cssnano]).process(css, { from: undefined });
 
   return output.css;
 };
 
+const formatDate = (date, format) => {
+  console.log(date);
+  return dayjs.utc(date).format(format);
+};
+
 module.exports = {
   entries,
-  values,
+  formatDate,
   minifyCss,
+  values,
 };
diff --git a/eleventy.config.js b/eleventy.config.js
index 54c4458..6079537 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,4 +1,9 @@
-const { entries, values, minifyCss } = require("./config/filters/index.js");
+const {
+  entries,
+  formatDate,
+  minifyCss,
+  values,
+} = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
 
@@ -10,8 +15,9 @@ module.exports = (eleventyConfig) => {
   );
 
   // 	--------------------- Custom Filters -----------------------
-  eleventyConfig.addFilter("minifyCss", minifyCss);
   eleventyConfig.addFilter("entries", entries);
+  eleventyConfig.addFilter("formatDate", formatDate);
+  eleventyConfig.addFilter("minifyCss", minifyCss);
   eleventyConfig.addFilter("values", values);
 
   // 	--------------------- Passthrough File Copy -----------------------
diff --git a/package.json b/package.json
index ee7398a..ead9c8d 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@11ty/eleventy-img": "^3.1.8",
     "autoprefixer": "^10.4.17",
     "cssnano": "^6.0.3",
+    "dayjs": "^1.11.10",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
diff --git a/src/_data/colors.js b/src/_data/colors.js
index 847c096..c7248ae 100644
--- a/src/_data/colors.js
+++ b/src/_data/colors.js
@@ -19,7 +19,18 @@ const colors = {
   carotte: {
     400: "#ed5215",
   },
-  neutrals: {
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a",
     white: "#ffffff",
     black: "#000000",
   },
diff --git a/src/_layouts/post.html b/src/_layouts/post.html
new file mode 100644
index 0000000..4bc1565
--- /dev/null
+++ b/src/_layouts/post.html
@@ -0,0 +1,14 @@
+---
+layout: base
+---
+
+<p>{{ date }}</p>
+
+<h1>{{ title }}</h1>
+
+<ul>
+  {% for category in categories %}
+  <li>#{{ category }}</li>
+  {% endfor %}
+</ul>
+{{ content | safe }}
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
index 767ab3b..3bbee7d 100644
--- a/src/assets/css/global/variables.css
+++ b/src/assets/css/global/variables.css
@@ -3,8 +3,8 @@
   --transition-duration: 250ms;
   --transition-timing: ease;
 
-  --color-light: var(--color-neutrals-white);
-  --color-dark: var(--color-neutrals-black);
+  --color-light: var(--color-neutral-50);
+  --color-dark: var(--color-neutral-950);
 
   --color-bg: var(--color-light);
   --color-text: var(--color-dark);
diff --git a/src/content/posts/posts.json b/src/content/posts/posts.json
index 610174a..1031729 100644
--- a/src/content/posts/posts.json
+++ b/src/content/posts/posts.json
@@ -1,5 +1,5 @@
 {
-  "layout": "base",
+  "layout": "post",
   "tags": "posts",
   "permalink": "posts/{{ page.fileSlug }}/index.html"
 }
diff --git a/src/content/posts/switching-to-protonmail.md b/src/content/posts/switching-to-protonmail.md
index fe0b352..76e804b 100644
--- a/src/content/posts/switching-to-protonmail.md
+++ b/src/content/posts/switching-to-protonmail.md
@@ -5,14 +5,6 @@ excerpt: The beginning of a quest to take back my data.
 categories: [email, protonmail]
 ---
 
-{{ date }}
-
-{% for category in categories %}
-{{ category }}
-{% endfor %}
-
-# Switching from Gmail to Protonmail
-
 I've been an avid Gmail user since its inception sometime in 2004. I remember hunting for a beta invite back when they were highly coveted. I have received 25,467 emails and sent 1,738. The first email I sent was to a local shop to buy my old G3 iMac.
 
 {% image "https://cdn.wonderfulfrog.com/Pasted%20image%2020231125192342.png", "A screenshot of the 'Welcome to Gmail' email everyone received when they first opened their account" %}
diff --git a/yarn.lock b/yarn.lock
index 7d67e6c..ee7b94e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -717,6 +717,11 @@ csso@^5.0.5:
   dependencies:
     css-tree "~2.2.0"
 
+dayjs@^1.11.10:
+  version "1.11.10"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"