feat: reorg project

src/_data/colors.js

@@ -0,0 +1,28 @@
+/**
+ * Color namer https://colornamer.robertcooper.me/
+ */
+
+const colors = {
+  aqua: {
+    50: "#aae9d2",
+    100: "#99e5ce",
+    200: "#79ddcc",
+    300: "#58d4d0",
+    400: "#38bdcc",
+    500: "#2c8daa",
+    600: "#226186",
+    700: "#193d61",
+    800: "#10203d",
+    900: "#060a18",
+    950: "#020206",
+  },
+  carotte: {
+    400: "#ed5215",
+  },
+  neutrals: {
+    white: "#ffffff",
+    black: "#000000",
+  },
+};
+
+module.exports = colors;

src/_data/fonts.js

@@ -0,0 +1,102 @@
+/**
+ * This approach for managing Web Fonts was derived from
+ * Aleksandr Hovhannisyan.
+ * See more here: https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/
+ */
+
+const path = require("path");
+
+const FONT_STYLE = {
+  NORMAL: "normal",
+  ITALIC: "italic",
+};
+
+const FONT_DISPLAY = {
+  SWAP: "swap",
+};
+
+const FONT_VARIANT = {
+  BOLD: "Bold",
+  EXTRA_BOLD: "ExtraBold",
+  ITALIC: "Italic",
+  BOLD_ITALIC: "BoldItalic",
+  REGULAR: "Regular",
+};
+
+const getFontUrl = (src) => path.join("/assets/fonts", src);
+
+const fallbacks = [
+  "-apple-system",
+  "BlinkMacSystemFont",
+  "Segoe UI",
+  "Roboto",
+  "Ubuntu",
+  "Open Sans",
+  "Helvetica Neue",
+  "sans-serif",
+];
+
+const fonts = {
+  display: {
+    family: "Anek Latin",
+    fallbacks,
+    weights: {
+      extraBold: {
+        display: FONT_DISPLAY.SWAP,
+        format: "truetype",
+        style: FONT_STYLE.NORMAL,
+        url: getFontUrl("/aneklatin/AnekLatin-ExtraBold.ttf"),
+        variant: FONT_VARIANT.EXTRA_BOLD,
+        weight: 800,
+      },
+      bold: {
+        display: FONT_DISPLAY.SWAP,
+        format: "truetype",
+        style: FONT_STYLE.NORMAL,
+        url: getFontUrl("/aneklatin/AnekLatin-Bold.ttf"),
+        variant: FONT_VARIANT.BOLD,
+        weight: 700,
+      },
+    },
+  },
+  body: {
+    family: "iA Writer Quattro V",
+    fallbacks,
+    weights: {
+      regular: {
+        display: FONT_DISPLAY.SWAP,
+        format: "woff2",
+        style: FONT_STYLE.NORMAL,
+        url: getFontUrl("/quattro/iAWriterQuattroS-Regular.woff2"),
+        variant: FONT_VARIANT.REGULAR,
+        weight: 400,
+      },
+      italtic: {
+        display: FONT_DISPLAY.SWAP,
+        format: "woff2",
+        style: FONT_STYLE.ITALIC,
+        url: getFontUrl("/quattro/iAWriterQuattroS-Italic.woff2"),
+        variant: FONT_VARIANT.ITALIC,
+        weight: 400,
+      },
+      bold: {
+        display: FONT_DISPLAY.SWAP,
+        format: "woff2",
+        style: FONT_STYLE.NORMAL,
+        url: getFontUrl("/quattro/iAWriterQuattroS-Bold.woff2"),
+        variant: FONT_VARIANT.BOLD,
+        weight: 650,
+      },
+      boldItalic: {
+        display: FONT_DISPLAY.SWAP,
+        format: "woff2",
+        style: FONT_STYLE.ITALIC,
+        url: getFontUrl("/quattro/iAWriterQuattroS-BoldItalic.woff2"),
+        variant: FONT_VARIANT.BOLD_ITALIC,
+        weight: 650,
+      },
+    },
+  },
+};
+
+module.exports = fonts;

src/_data/helpers.js

@@ -0,0 +1,75 @@
+/** © Andy Bell - https://buildexcellentwebsit.es/ */
+
+module.exports = {
+  /**
+   * Returns back some attributes based on wether the
+   * link is active or a parent of an active item
+   *
+   * @param {String} itemUrl The link in question
+   * @param {String} pageUrl The page context
+   * @returns {String} The attributes or empty
+   */
+  getLinkActiveState(itemUrl, pageUrl) {
+    let response = "";
+
+    if (itemUrl === pageUrl) {
+      response = ' aria-current="page"';
+    }
+
+    if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) {
+      response += ' data-state="active"';
+    }
+
+    return response;
+  },
+  /**
+   * Filters out the passed item from the passed collection
+   * and randomises and limits them based on flags
+   *
+   * @param {Array} collection The 11ty collection we want to take from
+   * @param {Object} item The item we want to exclude (often current page)
+   * @param {Number} limit=3 How many items we want back
+   * @param {Boolean} random=true Wether or not this should be randomised
+   * @returns {Array} The resulting collection
+   */
+  getSiblingContent(collection, item, limit = 3, random = true) {
+    let filteredItems = collection.filter((x) => x.url !== item.url);
+
+    if (random) {
+      let counter = filteredItems.length;
+
+      while (counter > 0) {
+        // Pick a random index
+        let index = Math.floor(Math.random() * counter);
+
+        counter--;
+
+        let temp = filteredItems[counter];
+
+        // Swap the last element with the random one
+        filteredItems[counter] = filteredItems[index];
+        filteredItems[index] = temp;
+      }
+    }
+
+    // Lastly, trim to length
+    if (limit > 0) {
+      filteredItems = filteredItems.slice(0, limit);
+    }
+
+    return filteredItems;
+  },
+
+  /**
+   * Take an array of keys and return back items that match.
+   * Note: items in the collection must have a key attribute in
+   * Front Matter
+   *
+   * @param {Array} collection 11ty collection
+   * @param {Array} keys collection of keys
+   * @returns {Array} result collection or empty
+   */
+  filterCollectionByKeys(collection, keys) {
+    return collection.filter((x) => keys.includes(x.data.key));
+  },
+};

src/_data/meta.js

@@ -0,0 +1,19 @@
+module.exports = {
+  url: process.env.URL || "http://localhost:8080",
+  siteName: "wonderulfrog",
+  siteDescription: "Devin Haska's digital garden.",
+  locale: "en_EN",
+  lang: "en",
+  skipContent: "Skip to content",
+  author: "Devin Haska",
+  meta_data: {
+    opengraph_default: "/assets/images/opengraph-default.jpg",
+    opengraph_default_alt: "",
+    mastodonProfile: "https://mastodon.social/@wonderfulfrog",
+  },
+  // RSS feed details.
+  blog: {
+    name: "wonderfulfrog",
+    description: "Devin Haska's digital garden.",
+  },
+};

src/_data/navigation.js

@@ -0,0 +1,4 @@
+module.exports = {
+  top: [],
+  bottom: [],
+};

src/_data/preloads.js

@@ -0,0 +1,21 @@
+const fonts = require("./fonts");
+
+const preloads = [
+  {
+    as: "font",
+    href: fonts.display.weights.extraBold.url,
+    crossorigin: true,
+  },
+  {
+    as: "font",
+    href: fonts.display.weights.bold.url,
+    crossorigin: true,
+  },
+  {
+    as: "font",
+    href: fonts.body.weights.regular.url,
+    crossorigin: true,
+  },
+];
+
+module.exports = preloads;