[WIP Tokens] Create a tokens file and transform it into css variables

_config/eleventy-plugin-tokens.js

@@ -0,0 +1,41 @@
+/**
+ * Inspired by CSS { In Real Life }'s blog post 
+ * https://css-irl.info/creating-css-variables-from-a-js-file/
+ */
+import fs  from 'fs';
+import { writeFile } from 'fs/promises';
+
+let config = {}
+export default function (eleventyConfig, pluginOptions) {
+	config = pluginOptions;
+
+  eleventyConfig.on("eleventy.before", () => {
+    let theme = fs.readFileSync(`./${config.tokens || 'src/_data/tokens.json'}`, 'utf-8');
+    buildTheme(JSON.parse(theme))
+  });
+};
+
+const mapTheme = ([key, value]) => {
+  if (typeof value === 'string') {
+    return `--${key}: ${value}`
+  }
+
+  return Object.entries(value).flatMap(([nestedKey, nestedValue]) => {
+    const newKey = nestedKey === 'DEFAULT' ? key : `${key}-${nestedKey}`
+
+    return mapTheme([newKey, nestedValue])
+  })
+}
+
+const buildTheme = async (theme) => {
+  try {
+    const result = Object.entries(theme).flatMap(mapTheme)
+
+    let content = result.map((line) => `\t${line};`)
+    content = [':root {', ...content, '}'].join('\n')
+
+    await writeFile(`./${config.destination || 'src/css/theme.css'}`, content, { encoding: 'utf-8' })
+  } catch (e) {
+    console.error(e)
+  }
+}

eleventy.config.js

@@ -1,6 +1,7 @@
 import { inspect } from "util";
 import pluginIcons from 'eleventy-plugin-icons';
-import eleventyPDF from "./_config/eleventy-plugin-pdf.js";
+import pluginPDF from "./_config/eleventy-plugin-pdf.js";
+import pluginTokens from "./_config/eleventy-plugin-tokens.js";
 
 export default async function (eleventyConfig) {
   eleventyConfig.setUseGitIgnore(false);
@@ -23,12 +24,13 @@ export default async function (eleventyConfig) {
 
   eleventyConfig.addCollection('experiences', collection => {
     return [...collection.getFilteredByGlob('./src/experiences/*.md')]
-      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
+      .sort((a, b) => a.data.dates.start - b.data.dates.start).reverse();
   });
   
   eleventyConfig.addPassthroughCopy('src/favicon.ico')
   
-  eleventyConfig.addPlugin(eleventyPDF);
+  eleventyConfig.addPlugin(pluginTokens, { tokens: "./src/_data/tokens.json", destination: "./src/css/theme.css" });
+  eleventyConfig.addPlugin(pluginPDF);
   eleventyConfig.addPlugin(pluginIcons, {
     sources: [
       { name: 'lucide', path: 'node_modules/lucide-static/icons', default: true },

src/_data/tokens.json

@@ -0,0 +1,79 @@
+{
+    "color": {
+        "neutral": {
+            "50": "#fafafa",
+            "100": "#f5f5f5",
+            "200": "#e5e5e5",
+            "300": "#d4d4d4",
+            "400": "#a3a3a3",
+            "500": "#737373",
+            "600": "#525252",
+            "700": "#404040",
+            "800": "#262626",
+            "900": "#171717",
+            "950": "#0a0a0a"
+        },
+        "asparagus": {
+            "50": "#f4f7ee",
+            "100": "#e6eed9",
+            "200": "#d0dfb7",
+            "300": "#b1c98d",
+            "400": "#95b368",
+            "500": "#77984a",
+            "DEFAULT": "#77984a",
+            "600": "#5c7838",
+            "700": "#485d2e",
+            "800": "#3b4b29",
+            "900": "#344126",
+            "950": "#1a2211"
+        },
+        "wedgewood": {
+            "50": "#f5f7fa",
+            "100": "#e9eff5",
+            "200": "#cedde9",
+            "300": "#a4bfd5",
+            "400": "#739ebd",
+            "500": "#4a7798",
+            "DEFAULT": "#4a7798",
+            "600": "#3e688b",
+            "700": "#335471",
+            "800": "#2d475f",
+            "900": "#2a3e50",
+            "950": "#1c2835"
+        },
+        "jewel": {
+            "50": "#f3faf4",
+            "100": "#e3f5e7",
+            "200": "#c8ead1",
+            "300": "#9cd9ac",
+            "400": "#69bf80",
+            "500": "#45a25e",
+            "600": "#34854a",
+            "700": "#2e6f40",
+            "DEFAULT": "#2e6f40",
+            "800": "#275434",
+            "900": "#21462c",
+            "950": "#0e2515"
+        }
+    },
+    "font": {
+        "DEFAULT": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", sans-serif",
+        "size": "1.2rem",
+        "weight": {
+            "semibold": 700,
+            "bold": 900
+        }
+    },
+    "leading": 1.45,
+    "gutter": "clamp(1ch, 2.5vmax, 3ch)",
+    "stack": "clamp(1.25ex, 1ex + 2.5vmax, 1.75ex)",
+    "line-length": {
+        "DEFAULT": "75ch",
+        "small": "30ch",
+        "large": "115ch"
+    },
+    "border": {
+        "width": "1px",
+        "radius": "4px" 
+    }
+}

src/_includes/layouts/base.html

@@ -5,6 +5,7 @@
 
     {% css %}
       {% include "css/reset.css" %}
+      {% include "css/theme.css" %}
       {% include "css/variables.css" %}
       {% include "css/main.css" %}
 

src/_includes/partials/components/pdf/section.liquid

@@ -29,5 +29,6 @@
         <ul>
             <li>{{ item.data.description }}</li>
         </ul>
+        {{ item.templateContent }}
     {% endfor %}
 </section>

src/_includes/partials/components/timeline.liquid

@@ -3,8 +3,8 @@
     {%- for elements in timeline -%}
       {% assign data = elements.data %}
       {% render 'partials/components/timeline-item', 
-          start: data.startDate, 
-          end: data.endDate, 
+          start: data.dates.start, 
+          end: data.dates.end, 
           link: data.link, 
           title: data.title, 
           location: data.location, 

src/css/pdf.css

@@ -87,5 +87,5 @@ section ul {padding: 0;margin-left: 1.2rem;}
 .subtitle p { margin: 0; }
 .subtitle > :first-child {justify-self: start;}
 .subtitle > :last-child {justify-self: end;}
-.subtitle + ul {font-size: .9rem;}
+.subtitle ~ ul {font-size: .9rem;}
 .subtitle ~ .subtitle {margin-top: 1rem;}

src/css/theme.css

@@ -0,0 +1,58 @@
+:root {
+	--color-neutral-50: #fafafa;
+	--color-neutral-100: #f5f5f5;
+	--color-neutral-200: #e5e5e5;
+	--color-neutral-300: #d4d4d4;
+	--color-neutral-400: #a3a3a3;
+	--color-neutral-500: #737373;
+	--color-neutral-600: #525252;
+	--color-neutral-700: #404040;
+	--color-neutral-800: #262626;
+	--color-neutral-900: #171717;
+	--color-neutral-950: #0a0a0a;
+	--color-asparagus-50: #f4f7ee;
+	--color-asparagus-100: #e6eed9;
+	--color-asparagus-200: #d0dfb7;
+	--color-asparagus-300: #b1c98d;
+	--color-asparagus-400: #95b368;
+	--color-asparagus-500: #77984a;
+	--color-asparagus-600: #5c7838;
+	--color-asparagus-700: #485d2e;
+	--color-asparagus-800: #3b4b29;
+	--color-asparagus-900: #344126;
+	--color-asparagus-950: #1a2211;
+	--color-asparagus: #77984a;
+	--color-wedgewood-50: #f5f7fa;
+	--color-wedgewood-100: #e9eff5;
+	--color-wedgewood-200: #cedde9;
+	--color-wedgewood-300: #a4bfd5;
+	--color-wedgewood-400: #739ebd;
+	--color-wedgewood-500: #4a7798;
+	--color-wedgewood-600: #3e688b;
+	--color-wedgewood-700: #335471;
+	--color-wedgewood-800: #2d475f;
+	--color-wedgewood-900: #2a3e50;
+	--color-wedgewood-950: #1c2835;
+	--color-wedgewood: #4a7798;
+	--color-jewel-50: #f3faf4;
+	--color-jewel-100: #e3f5e7;
+	--color-jewel-200: #c8ead1;
+	--color-jewel-300: #9cd9ac;
+	--color-jewel-400: #69bf80;
+	--color-jewel-500: #45a25e;
+	--color-jewel-600: #34854a;
+	--color-jewel-700: #2e6f40;
+	--color-jewel-800: #275434;
+	--color-jewel-900: #21462c;
+	--color-jewel-950: #0e2515;
+	--color-jewel: #2e6f40;
+	--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
+	--font-size: 1.2rem;
+	--gutter: clamp(1ch, 2.5vmax, 3ch);
+	--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
+	--line-length: 75ch;
+	--line-length-small: 30ch;
+	--line-length-large: 115ch;
+	--border-width: 1px;
+	--border-radius: 4px;
+}

src/experiences/artionet-stage.md

@@ -7,6 +7,4 @@ link: https://www.artionet.ch
 dates:
   start: 2021
   end: 2022
-startDate: 2021
-endDate: 2022
 ---

src/experiences/artionet.md

@@ -7,6 +7,4 @@ link: https://www.artionet.ch
 dates:
   start: 2022
   end: Present
-startDate: 2022
-endDate: 2024
 ---

src/experiences/emt.md

@@ -6,6 +6,4 @@ location: Porrentruy
 dates:
   start: 2018
   end: 2022
-startDate: 2018
-endDate: 2022
 ---

src/pdf.liquid

@@ -5,19 +5,19 @@ eleventyComputed:
   title: "{{author.firstName}} {{author.name}}, {{author.occupation}}"
 links:
   - value: "thomas@amstutz.it"
-  - type: "link"
-    value: "github.com/TheThomaas"
+  - value: "github.com/TheThomaas"
+    url: "https://github.com/TheThomaas" 
   - value: "123 123 12 12"
-  - type: "link"
-    value: "amstutz.it"
+  - value: "amstutz.it"
+    url: "https://github.com/TheThomaas" 
 ---
 
 <section>
   <h1>{{ title }}</h1>
   <ul class="list-inline justify-center">
     {% for item in links %}
-      {% if item.type == "link" %}
-        <li><a href="{{item.value}}">{{item.value}}</a></li>
+      {% if item.url %}
+        <li><a href="{{item.url}}">{{item.value}}</a></li>
       {% else %}
         <li>{{item.value}}</li>
       {% endif %}

src/projects/cancre-simulator.md

@@ -6,3 +6,6 @@ links:
     link: https://github.com
     icon: simple-icons:github
 ---
+
+* desc1
+* desc2