feat: add post layout (wip)

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,
 };

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 -----------------------

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",

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",
   },

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 }}

src/assets/css/global/variables.css

@@ -3,8 +3,8 @@
   --transition-duration: 250ms;
   --transition-timing: ease;
 
-  --color-light: var(--color-neutrals-white);
+  --color-light: var(--color-neutral-50);
-  --color-dark: var(--color-neutrals-black);
+  --color-dark: var(--color-neutral-950);
 
   --color-bg: var(--color-light);
   --color-text: var(--color-dark);

src/content/posts/posts.json

@@ -1,5 +1,5 @@
 {
-  "layout": "base",
+  "layout": "post",
   "tags": "posts",
   "permalink": "posts/{{ page.fileSlug }}/index.html"
 }

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" %}

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"