refactor: v0.2

A few things happened: - switched to 11ty v2 - using eleventy-base-blog as a base - restructuring 11ty folder - implementing new design (based on cactus) - new colors used - no fonts loaded - adding sitemap - adding rss feed - using eleventy bundle plugin - playing around with content This should be considered WIP, as things are still looking pretty experimental, but pushing so it gets only quickly :)
codenomnom · Sep 12, 2023 · 23556b8 · 23556b8
1 parent 1b92116
commit 23556b8
Show file tree

Hide file tree

Showing 62 changed files with 7,061 additions and 1,437 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,5 @@
 .idea
 node_modules
-src/styles/main.css
+public/styles/main.css
 dist
 .parcel-cache
diff --git a/src/_includes/footer.njk → 11ty/_includes/footer.njk b/src/_includes/footer.njk → 11ty/_includes/footer.njk
diff --git a/11ty/_includes/header.njk b/11ty/_includes/header.njk
@@ -0,0 +1,17 @@
+{#<header class="full-width {{ 'nav' if page.url == '/' else 'back' }}">#}
+{#  {% if page.url == '/' or page.url == '/404.html' %}#}
+{#    <div class="left">#}
+{#      <a href="/about">about</a>#}
+{#      <span class="point">•</span>#}
+{#      <a href="/contribute">contribute</a>#}
+{#      <span class="point">•</span>#}
+{#      <a href="/contribute">join</a>#}
+{#      —#}
+{#    </div>#}
+{#    <div class="right">#}
+{#      <a href="/">• back</a>#}
+{#    </div>#}
+{#  {% else %}#}
+{#    <a href="/">• back</a>#}
+{#  {% endif %}#}
+{#</header>#}
diff --git a/src/_includes/layouts/blank.njk → 11ty/_includes/layouts/blank.njk b/src/_includes/layouts/blank.njk → 11ty/_includes/layouts/blank.njk
diff --git a/src/_includes/layouts/page.njk → 11ty/_includes/layouts/page.njk b/src/_includes/layouts/page.njk → 11ty/_includes/layouts/page.njk
diff --git a/11ty/_includes/layouts/post.njk b/11ty/_includes/layouts/post.njk
@@ -0,0 +1,22 @@
+---
+layout: 'layouts/root.njk'
+---
+
+{# Only include the syntax highlighter CSS on blog posts #}
+{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
+{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
+
+<section>
+  <h1 class="glitch" data-text="{{ title | stripCodeTag }}">{{ title | safe }}</h1>
+
+  <ul class="post-metadata">
+    <li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+    {%- for tag in tags | filterTagList %}
+      {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+      <li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</li>
+    {%- endfor %}
+  </ul>
+
+  {{ content | safe }}
+</section>
+
diff --git a/11ty/_includes/layouts/root.njk b/11ty/_includes/layouts/root.njk
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>{{ (title or metadata.title) | stripCodeTag }}</title>
+    <meta name="description" content="{{ description or metadata.description }}">
+
+    <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
+    <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
+
+    <meta name="generator" content="{{ eleventy.generator }}">
+
+    {%- css %}
+      {% include "public/css/normalize.css" %}
+      {% include "public/css/index.css" %}
+    {% endcss %}
+    <style>{% getBundle "css" %}</style>
+
+{#    <link rel="preconnect" href="https://fonts.googleapis.com">#}
+{#    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>#}
+{#    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@0;1&family=Montserrat:wght@400;500;600;700;800;900&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Catamaran:wght@400;600;700&display=swap" rel="stylesheet">#}
+{#    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;0,900;1,400;1,500&display=swap" rel="stylesheet">#}
+{#    <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet">#}
+{#    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">#}
+
+{#    <link href="https://fonts.googleapis.com/css2?family=Barriecito&family=Barrio&family=Major+Mono+Display&family=Rampart+One&family=Rubik+Glitch&family=Rubik+Moonrocks&display=swap" rel="stylesheet">#}
+  </head>
+  <body
+    data-layout="{{ layout | parseLayoutName }}"
+    class="
+      {%- if page.url == '/' -%}home {% endif %}
+      {%- if templateClass -%}{{ templateClass }}{%- endif -%}
+      glitch-{%- if config.enableGlitch -%}enabled{%- else -%}disabled{%- endif -%}"
+  >
+    {%- if not hideHeader -%}
+      {%- include "header.njk" -%}
+    {%- endif -%}
+
+    <header>
+      {%- include "nav.njk" -%}
+    </header>
+
+    <main>
+      {{ content | safe }}
+    </main>
+
+    <footer>
+      <div>footer</div>
+      {%- include "nav.njk" -%}
+    </footer>
+  </body>
+</html>
diff --git a/11ty/_includes/nav.njk b/11ty/_includes/nav.njk
@@ -0,0 +1,12 @@
+<nav>
+  <h2 class="visually-hidden">Top level navigation menu</h2>
+  <ul class="nav">
+    {%- for entry in collections.all | eleventyNavigation %}
+      <li class="nav-item">
+        <span style="pointer-events: none;">{% if entry.url == page.url %}.{% else %}&nbsp;{% endif %}</span><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
+{#      ˙#}
+{#      •#}
+{#      ¬#}
+    {%- endfor %}
+  </ul>
+</nav>
diff --git a/src/_includes/newsletter.njk → 11ty/_includes/newsletter.njk b/src/_includes/newsletter.njk → 11ty/_includes/newsletter.njk
diff --git a/src/_includes/pages-in-tag.njk → 11ty/_includes/pages-in-tag.njk b/src/_includes/pages-in-tag.njk → 11ty/_includes/pages-in-tag.njk
diff --git a/src/_includes/pages-list.njk → 11ty/_includes/pages-list.njk b/src/_includes/pages-list.njk → 11ty/_includes/pages-list.njk
diff --git a/11ty/_includes/posts-list.njk b/11ty/_includes/posts-list.njk
@@ -0,0 +1,18 @@
+{%- css %}
+	.posts-list li {
+		display: flex;
+		/* align-items: center; */
+		margin-top: 8px; /* 16 on mobile */
+	}
+{% endcss %}
+
+{% include "tags-list.njk" %}
+
+<ul class="posts-list">
+{% for post in postslist | reverse %}
+	<li class="posts-list-item{% if post.url == url %} posts-list-item-active{% endif %}">
+		<time class="posts-list-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("dd MMM yyyy") }}</time>
+		<a href="{{ post.url }}" class="posts-list-link">{% if post.data.title %}{{ post.data.title | stripCodeTag }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
+	</li>
+{% endfor %}
+</ul>
diff --git a/11ty/_includes/tags-list.njk b/11ty/_includes/tags-list.njk
@@ -0,0 +1,7 @@
+<div style="margin-bottom: 2rem; font-size: 12px;">
+  [<a href="/tags/">all</a>,
+  {% for tag in collections.tags | filterTagsList %}
+  <a href="/tags/{{ tag | slugify | url }}">{{ tag }}</a>
+  {%- if not loop.last -%},{%- endif -%}
+  {% endfor %}]
+</div>
diff --git a/11ty/config.js b/11ty/config.js
@@ -1,8 +1,12 @@
 const dir = {
-  input: 'src',
+  input: 'content',
+  data: "../11ty/data",
   output: 'dist',
-  content: 'pages/kinks',
-  layoutsFolder: 'layouts',
+  content: 'quirks',
+
+  // both are relative to input directory
+  includes: '../11ty/_includes',
+  layoutsFolder: 'layouts', // TODO: this is not relative?
 };
 dir.contentFull = `./${dir.input}/${dir.content}/`;
 

diff --git a/11ty/data/metadata.js b/11ty/data/metadata.js
@@ -0,0 +1,11 @@
+module.exports = {
+	title: "Eleventy Base Blog v8",
+	url: "https://example.com/",
+	language: "en",
+	description: "I am writing about my experiences as a naval navel-gazer.",
+	author: {
+		name: "Your Name Here",
+		email: "[email protected]",
+		url: "https://example.com/about-me/"
+	}
+}
diff --git a/11ty/filters.js → 11ty/filters/index.js b/11ty/filters.js → 11ty/filters/index.js
@@ -1,6 +1,6 @@
 const util = require('util');
 const { DateTime } = require('luxon');
-const { dir, TEMPLATE_ENGINE } = require('./config');
+const { dir, TEMPLATE_ENGINE } = require('../config');
 
 const LAYOUT_REGEX = new RegExp(`${dir.layoutsFolder}\\/(.*?)\\.${TEMPLATE_ENGINE}`, 'g');
 const CODE_REGEX = new RegExp('<code>(.*?)<\\/code>', 'g');
@@ -22,10 +22,22 @@ exports.getPageIndex = (name) => {
   return name;
 };
 
-exports.registerFilters = (eleventyConfig) => {
+exports.getTagsFromCollection = (collection) => {
+  let tagSet = new Set();
+  for(let item of collection) {
+    (item.data.tags || []).forEach(tag => tagSet.add(tag));
+  }
+  return Array.from(tagSet);
+};
+
+exports.filterTagsList = (tags) => (tags || []).filter(tag => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1);
+
+exports.register = (eleventyConfig) => {
   eleventyConfig.addFilter('toJSON', exports.toJSON);
   eleventyConfig.addFilter('postDate', exports.postDate);
   eleventyConfig.addFilter('getPageIndex', exports.getPageIndex);
+  eleventyConfig.addFilter('getTagsFromCollection', exports.getTagsFromCollection);
+  eleventyConfig.addFilter('filterTagsList', exports.filterTagsList);
   eleventyConfig.addFilter('last', exports.last);
   eleventyConfig.addFilter('reverse', exports.reverse);
   eleventyConfig.addFilter('parseLayoutName', exports.parseLayoutName);

diff --git a/11ty/plugins/drafts.plugin.js b/11ty/plugins/drafts.plugin.js
@@ -0,0 +1,50 @@
+function eleventyComputedPermalink() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		// Always skip during non-watch/serve builds
+		if(data.draft && !process.env.BUILD_DRAFTS) {
+			return false;
+		}
+
+		return data.permalink;
+	}
+}
+
+function eleventyComputedExcludeFromCollections() {
+	// When using `addGlobalData` and you *want* to return a function, you must nest functions like this.
+	// `addGlobalData` acts like a global data file and runs the top level function it receives.
+	return (data) => {
+		// Always exclude from non-watch/serve builds
+		if(data.draft && !process.env.BUILD_DRAFTS) {
+			return true;
+		}
+
+		return data.eleventyExcludeFromCollections;
+	}
+}
+
+module.exports.eleventyComputedPermalink = eleventyComputedPermalink;
+module.exports.eleventyComputedExcludeFromCollections = eleventyComputedExcludeFromCollections;
+
+module.exports = eleventyConfig => {
+	eleventyConfig.addGlobalData("eleventyComputed.permalink", eleventyComputedPermalink);
+	eleventyConfig.addGlobalData("eleventyComputed.eleventyExcludeFromCollections", eleventyComputedExcludeFromCollections);
+
+	let logged = false;
+	eleventyConfig.on("eleventy.before", ({runMode}) => {
+		let text = "Excluding";
+		// Only show drafts in serve/watch modes
+		if(runMode === "serve" || runMode === "watch") {
+			process.env.BUILD_DRAFTS = true;
+			text = "Including";
+		}
+
+		// Only log once.
+		if(!logged) {
+			console.log( `[11ty/eleventy-base-blog] ${text} drafts.` );
+		}
+
+		logged = true;
+	});
+}
diff --git a/11ty/plugins/images.plugin.js b/11ty/plugins/images.plugin.js
@@ -0,0 +1,34 @@
+const path = require("path");
+const eleventyImage = require("@11ty/eleventy-img");
+
+module.exports = eleventyConfig => {
+	function relativeToInputPath(inputPath, relativeFilePath) {
+		let split = inputPath.split("/");
+		split.pop();
+
+		return path.resolve(split.join(path.sep), relativeFilePath);
+	}
+
+	// Eleventy Image shortcode
+	// https://www.11ty.dev/docs/plugins/image/
+	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
+		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
+		// Warning: Avif can be resource-intensive so take care!
+		let formats = ["avif", "webp", "auto"];
+		let file = relativeToInputPath(this.page.inputPath, src);
+		let metadata = await eleventyImage(file, {
+			widths: widths || ["auto"],
+			formats,
+			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
+		});
+
+		// TODO loading=eager and fetchpriority=high
+		let imageAttributes = {
+			alt,
+			sizes,
+			loading: "lazy",
+			decoding: "async",
+		};
+		return eleventyImage.generateHTML(metadata, imageAttributes);
+	});
+};
diff --git a/11ty/plugins/index.js b/11ty/plugins/index.js
@@ -0,0 +1,25 @@
+const pluginRSS = require('@11ty/eleventy-plugin-rss');
+const pluginSyntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const pluginBundle = require('@11ty/eleventy-plugin-bundle');
+const pluginNavigation = require('@11ty/eleventy-navigation');
+
+const { EleventyHtmlBasePlugin } = require('@11ty/eleventy');
+
+const pluginDrafts = require('./drafts.plugin');
+const pluginImages = require('./images.plugin');
+
+exports.install = (eleventyConfig) => {
+    // App plugins
+    eleventyConfig.addPlugin(pluginDrafts);
+    eleventyConfig.addPlugin(pluginImages);
+
+    // Official plugins
+    eleventyConfig.addPlugin(pluginRSS);
+    eleventyConfig.addPlugin(pluginSyntaxHighlight, {
+        preAttributes: { tabindex: 0 }
+    });
+    eleventyConfig.addPlugin(pluginNavigation);
+    eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
+    console.log('hello');
+    eleventyConfig.addPlugin(pluginBundle);
+};
diff --git a/src/404.md → content/404.md b/src/404.md → content/404.md
diff --git a/content/about.md b/content/about.md
@@ -0,0 +1,47 @@
+---
+permalink: /about/
+layout: layouts/page.njk
+title: About
+eleventyNavigation:
+  key: about
+---
+
+Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
+
+## Code
+
+### Styled (with Syntax)
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+```js
+// this is a command
+function myCommand() {
+	let counter = 0;
+	counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+### Unstyled
+
+Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
+
+```
+// this is a command
+function myCommand() {
+	let counter = 0;
+	counter++;
+}
+
+// Test with a line break above this line.
+console.log('Test');
+```
+
+## Section Header
+
+Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
+
+
diff --git a/content/content.11tydata.js b/content/content.11tydata.js
@@ -0,0 +1,3 @@
+module.exports = {
+  // layout: 'layouts/page.njk'
+}
diff --git a/content/feed/feed.11tydata.js b/content/feed/feed.11tydata.js
@@ -0,0 +1,3 @@
+module.exports = {
+	eleventyExcludeFromCollections: true
+}
diff --git a/content/feed/feed.njk b/content/feed/feed.njk
@@ -0,0 +1,27 @@
+---
+# Metadata comes from _data/metadata.js
+permalink: /feed/feed.xml
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" xml:base="{{ metadata.language }}">
+	<title>{{ metadata.title }}</title>
+	<subtitle>{{ metadata.description }}</subtitle>
+	<link href="{{ permalink | htmlBaseUrl(metadata.url) }}" rel="self"/>
+	<link href="{{ metadata.url | addPathPrefixToFullUrl }}"/>
+	<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>
+	<id>{{ metadata.url }}</id>
+	<author>
+		<name>{{ metadata.author.name }}</name>
+		<email>{{ metadata.author.email }}</email>
+	</author>
+	{%- for post in collections.posts | reverse %}
+	{% set absolutePostUrl %}{{ post.url | htmlBaseUrl(metadata.url) }}{% endset %}
+	<entry>
+		<title>{{ post.data.title }}</title>
+		<link href="{{ absolutePostUrl }}"/>
+		<updated>{{ post.date | dateToRfc3339 }}</updated>
+		<id>{{ absolutePostUrl }}</id>
+		<content type="html">{{ post.templateContent | transformWithHtmlBase(absolutePostUrl, post.url) }}</content>
+	</entry>
+	{%- endfor %}
+</feed>