Organize the 11ty utilities and bigger font

.eleventy.js

@@ -1,79 +1,34 @@
-const markdownIt = require("markdown-it");
-const eleventyPluginFilesMinifier = require("@sherby/eleventy-plugin-files-minifier");
-
-function slugify(text) {
-  return text.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "");
-}
-
-module.exports = function(eleventyConfig) {
-
-  eleventyConfig.addPlugin(eleventyPluginFilesMinifier);
-
-  eleventyConfig.addFilter("urlEncode", function(value) {
-    return encodeURIComponent(value);
-  });
-
-  const md = markdownIt({ html: true }).use((md) => {
-    const defaultRender = md.renderer.rules.heading_close || function (tokens, idx) {
-      return md.renderer.renderToken(tokens, idx);
-    };
-
-    md.renderer.rules.heading_open = (tokens, idx) => {
-      const content = tokens[idx + 1] && tokens[idx + 1].content ? tokens[idx + 1].content : "heading";
-      const slug = slugify(content);
-      tokens[idx].attrSet("id", slug);
-      return `<${tokens[idx].tag} id="${slug}">`;
-    };
-
-    md.renderer.rules.heading_close = (tokens, idx) => {
-      const content = tokens[idx - 1] && tokens[idx - 1].content ? tokens[idx - 1].content : "heading";
-      const slug = slugify(content);
-      return `<a href="#${slug}" class="header-anchor" aria-label="Permalink to ${content}"><div class="tooltip">Permanent link</div></a></${tokens[idx].tag}>`;
-    };
-  });
-
-  eleventyConfig.setLibrary("md", md);
-
-  eleventyConfig.addFilter("date", (dateObj) => {
-    const year = dateObj.getFullYear();
-    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
-    const day = String(dateObj.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  });
-
-  eleventyConfig.addCollection("posts", (collectionApi) => 
-    collectionApi.getFilteredByGlob("src/posts/*.md")
-  );
-
-  eleventyConfig.addFilter("filterByTag", (posts, tag) => 
-    posts.filter(post => post.data.tags?.includes(tag))
-  );
-
-  eleventyConfig.addCollection("tagsList", (collectionApi) => {
-    const tagsSet = new Set();
-    collectionApi.getAll().forEach(item => {
-      item.data.tags?.forEach(tag => tagsSet.add(tag));
-    });
-    return [...tagsSet];
-  });
-
-  eleventyConfig.addLiquidShortcode('image', (filename, alt, size, loading) => {
-    const [width, height] = size.split('x');
-    return `<img src="${filename}" alt="${alt}" width="${width}" height="${height}" loading="${loading}" />`;
-  });  
+const slugify = require("slugify");
+const configureMarkdown = require("./_utilities/markdown");
+const filesMinifier = require("./_utilities/filesMinifier");
+const dateFilter = require("./_utilities/dateFilter");
+const urlEncode = require("./_utilities/urlEncode");
+const postsCollection = require("./_utilities/postsCollection");
+const tagsListCollection = require("./_utilities/tagsListCollection");
+const filterByTag = require("./_utilities/filterByTag");
+const imageShortcode = require("./_utilities/imageShortcode");
+
+module.exports = function (eleventyConfig) {
+
+  configureMarkdown(eleventyConfig, slugify);
+  filesMinifier(eleventyConfig);
+  eleventyConfig.addFilter("date", dateFilter);
+  eleventyConfig.addFilter("urlEncode", urlEncode);
+  eleventyConfig.addCollection("posts", postsCollection);
+  eleventyConfig.addCollection("tagsList", tagsListCollection);
+  eleventyConfig.addFilter("filterByTag", filterByTag);
+  eleventyConfig.addLiquidShortcode("image", imageShortcode);
 
   eleventyConfig.addPassthroughCopy({
+    "src/public": "/",
     "node_modules/beercss/dist/cdn": "/modules/beercss",
     "node_modules/material-dynamic-colors/dist/cdn": "/modules/material-dynamic-colors",
-    "node_modules/simple-icons-font/font": "/modules/simple-icons-font"
   });
 
-  eleventyConfig.addPassthroughCopy({ "src/public": "/" });
-
   return {
     dir: {
       input: "src",
       output: "_site",
     },
   };
-};
+};

_utilities/dateFilter.js

@@ -0,0 +1,8 @@
+function dateFilter(dateObj) {
+    const year = dateObj.getFullYear();
+    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
+    const day = String(dateObj.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+module.exports = dateFilter;

_utilities/filesMinifier.js

@@ -0,0 +1,7 @@
+const filesMinifier = require("@sherby/eleventy-plugin-files-minifier");
+
+function configureFilesMinifier(eleventyConfig) {
+    eleventyConfig.addPlugin(filesMinifier);
+}
+
+module.exports = configureFilesMinifier;

_utilities/filterByTag.js

@@ -0,0 +1,5 @@
+function filterByTag(posts, tag) {
+    return posts.filter((post) => post.data.tags?.includes(tag));
+}
+
+module.exports = filterByTag;

_utilities/imageShortcode.js

@@ -0,0 +1,6 @@
+function imageShortcode(filename, alt, size, loading = "lazy") {
+    const [width, height] = size.split("x");
+    return `<img src="${filename}" alt="${alt}" width="${width}" height="${height}" loading="${loading}" />`;
+}
+
+module.exports = imageShortcode;

_utilities/markdown.js

@@ -0,0 +1,22 @@
+const markdownIt = require("markdown-it");
+
+function configureMarkdown(eleventyConfig, slugify) {
+  const md = markdownIt({ html: true }).use((md) => {
+    md.renderer.rules.heading_open = (tokens, idx) => {
+      const content = tokens[idx + 1]?.content || "heading";
+      const slug = slugify(content);
+      tokens[idx].attrSet("id", slug);
+      return `<${tokens[idx].tag} id="${slug}">`;
+    };
+
+    md.renderer.rules.heading_close = (tokens, idx) => {
+      const content = tokens[idx - 1]?.content || "heading";
+      const slug = slugify(content);
+      return `<a href="#${slug}" class="header-anchor" aria-label="Permalink to ${content}"><div class="tooltip">Permanent link</div></a></${tokens[idx].tag}>`;
+    };
+  });
+
+  eleventyConfig.setLibrary("md", md);
+}
+
+module.exports = configureMarkdown;

_utilities/postsCollection.js

@@ -0,0 +1,5 @@
+function postsCollection(collectionApi) {
+    return collectionApi.getFilteredByGlob("src/posts/*.md");
+}
+
+module.exports = postsCollection;

_utilities/slugify.js

@@ -0,0 +1,5 @@
+function slugify(text) {
+    return text.toLowerCase().trim().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "");
+}
+
+module.exports = slugify;

_utilities/tagsListCollection.js

@@ -0,0 +1,9 @@
+function tagsListCollection(collectionApi) {
+    const tagsSet = new Set();
+    collectionApi.getAll().forEach((item) => {
+        item.data.tags?.forEach((tag) => tagsSet.add(tag));
+    });
+    return [...tagsSet];
+}
+
+module.exports = tagsListCollection;

_utilities/urlEncode.js

@@ -0,0 +1,5 @@
+function urlEncode(value) {
+    return encodeURIComponent(value);
+}
+
+module.exports = urlEncode;

src/_includes/components/dialog-posts.njk

@@ -19,8 +19,8 @@
     {% for post in collections.posts | reverse %}
     <article class="s12 m12 l6{% if page.url == post.url %} secondary-container active{% endif %}">
         <h2><a class="link" href="{{ post.url }}">{{ post.data.title }}</a></h2>
-        <p>{{ post.date | date }} - by {{ site.author }}</p>
-        <p class="text-sm">{{ post.data.description }}</p>
+        <p class="date">{{ post.date | date }} - by {{ site.author }}</p>
+        <p class="no-margin">{{ post.data.description }}</p>
         <nav class="wrap">
             {% for tag in post.data.tags %}
             <a class="chip" href="/tags/{{ tag }}/">#{{ tag }}</a>

src/_includes/components/footer.njk

@@ -1,9 +1,9 @@
 <div class="space"></div>
-<footer class="grid padding">
+<footer class="grid large-padding">
 
   <div class="s12 m8 l8">
     <a class="name" href="{{ site.url }}">{{ site.title }}</a>
-    <p class="text-sm">{{ site.description }}</p>
+    <p class="no-margin">{{ site.description }}</p>
   </div>
   <div class="s12 m4 l4 row right-align">
     {% for item in site.socialItems %}

src/_includes/components/style.css

@@ -1,3 +1,20 @@
+body,
+:is(table) {
+    font-family: var(--font);
+    font-size: 1.15rem;
+    letter-spacing: 0;
+    line-height: 1.675;
+}
+
+body.light i.light,
+body.dark i.dark {
+    display: none;
+}
+
+::selection {
+    background: var(--inverse-primary);
+}
+
 img {
     max-width: 100%;
 }
@@ -6,9 +23,8 @@ img[width][height] {
     height: auto;
 }
 
-body.light i.light,
-body.dark i.dark {
-    display: none;
+table {
+    overflow-x: auto;
 }
 
 i {
@@ -21,40 +37,24 @@ i.si {
     font-display: fallback;
 }
 
-.name {
-    display: block;
-    font-size: 2.25rem;
-    padding-top: 1.25rem;
-}
-
-.post {
-    font-size: .975rem;
-    letter-spacing: 0;
-    line-height: 1.75;
-}
-
-.post h1 {
-    font-size: 3.0625rem
+.date {
+    font-size: .875rem;
+    margin-block-end: .25rem;
 }
 
-.post h2 {
-    font-size: 2.3125rem
-}
-
-.post h3 {
-    font-size: 1.75rem
-}
-
-.post h4 {
-    font-size: 1.5rem
+.name {
+    display: block;
+    font-size: 2.8125rem;
 }
 
-.post h5 {
-    font-size: 1.25rem
+nav:is(.left,.right,.top,.bottom):not(.drawer)>a:not(.button,.chip) {
+    font-size: .875rem;
 }
 
-.post h6 {
-    font-size: 1rem
+.post p+:not(p), 
+.post p:has(>*) {
+    display: block;
+    margin: 1.5rem 0;
 }
 
 .post a:not(.button) {

src/_includes/layouts/post.njk

@@ -19,8 +19,8 @@ date: 2016-01-01
 <div class="space"></div>
 
 <h1>{{ title }}</h1>
-<p>{{ description }}</p>
-<p>{{ date | date }} - by {{ site.author }} </p>
+<p class="date">{{ date | date }} - by {{ site.author }} </p>
+<p class="no-margin">{{ description }}</p>
 <nav class="gap-sm">
     {% for tag in tags %}
     <a class="btn chip" href="/tags/{{ tag }}/">#{{ tag }}</a>

src/pages/index.njk

@@ -23,42 +23,42 @@ title: "My home page"
     <div class="grid">
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">markdown</i></button>
-            <h2 class="small">Simply write in Markdown</h2>
+            <h2>Simply write in Markdown</h2>
             <p>You don't need to know HTML, CSS, or Javascript. Simply set the site.json and start writing, 11ty GMX gonna do it all.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">devices</i></button>
-            <h2 class="small">Desktop and Mobile-friendly</h2>
+            <h2>Desktop and Mobile-friendly</h2>
             <p>No matter where your users gonna read, simply adapts and perfectly fit to any devices viewing.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">palette</i></button>
-            <h2 class="small">Your Material</h2>
+            <h2>Your Material</h2>
             <p>Make the website yours. From author, name, logo, url, sidebar list and even the themes. Change it all with our powerful config file (site.json).</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">magnification_small</i></button>
-            <h2 class="small">Micro and fast</h2>
+            <h2>Micro and fast</h2>
             <p>11ty GMX give an smallest possible and minified result, to increase the performance. No more waiting for a second or the loading bar.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">groups</i></button>
-            <h2 class="small">For all humans</h2>
+            <h2>For all humans</h2>
             <p>11ty GMX gives an built in accessibility features like aria-label to layouts, make it easier to understand for all humans.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">install_mobile</i></button>
-            <h2 class="small">Native-like app</h2>
+            <h2>Native-like app</h2>
             <p>Don't need make more apps for iOS, Android, Windows, or Linux. With PWA, you can built a simple web-based app without changes the potion.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">touch_app</i></button>
-            <h2 class="small">Easier navigation</h2>
+            <h2>Easier navigation</h2>
             <p>When users found your post, they may just focus on that post and leave. With the modals for <a class="underline" href="javascript:ui('#dialog-posts');">posts</a> and <a class="underline" href="javascript:ui('#dialog-tags');">tags</a>, give users more attention and easily navigate the sitemap.</p>
         </article>
         <article class="s12 m6 l6">
             <button class="square round extra no-margin"><i class="extra">construction</i></button>
-            <h2 class="small">Designed bold</h2>
+            <h2>Designed bold</h2>
             <p>Designed to works in any situation, for personal or bussiness use, 11ty Beer gives an bold identity with Material Design implementation, so you can built a beautiful and professional website.</p>
         </article>
     </div>

src/pages/posts.njk

@@ -13,8 +13,8 @@ description: All my posts i write in this website.
     {% for post in collections.posts | reverse %}
     <article class="s12 m12 l6">
         <h2><a class="link" href="{{ post.url }}">{{ post.data.title }}</a></h2>
-        <p>{{ post.date | date }} - by {{ site.author }}</p>
-        <p class="text-sm">{{ post.data.description }}</p>
+        <p class="date">{{ post.date | date }} - by {{ site.author }}</p>
+        <p class="no-margin">{{ post.data.description }}</p>
         <nav class="wrap">
             {% for tag in post.data.tags %}
             <a class="chip" href="/tags/{{ tag }}/">#{{ tag }}</a>