Merge pull request #2 from Mangamaui/refactor-2023-1

Refactor 2023/1 Cleanup eleventy config & updated dependencies

.eleventy.js

@@ -1,44 +1,74 @@
 const eleventyNavigationPlugin = require('@11ty/eleventy-navigation')
 const pluginRss = require('@11ty/eleventy-plugin-rss')
 
-const { DateTime } = require('luxon')
+const { 
+  getAllPosts, 
+  getCategoryList,
+  getCategorisedPosts 
+} = require('./config/collections')
+
+const { 
+  readableDate 
+} = require('./config/filters')
+
+const { 
+  imageShortcode 
+} = require('./config/shortcodes')
+
 
 module.exports = function(eleventyConfig) {
+  
+  /*================================*/
+  /*   plugins and configurations   */
+  /*================================*/
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
   eleventyConfig.addPlugin(pluginRss)
 
-  eleventyConfig.addLayoutAlias('page', 'layouts/page')
-  eleventyConfig.addLayoutAlias('article', 'layouts/article')
-
-  eleventyConfig.addPassthroughCopy('./src/assets/icons')
-  eleventyConfig.addPassthroughCopy('./src/assets/sprite.svg')
-  eleventyConfig.addPassthroughCopy({
-      'node_modules/svg-icon-sprite/dist/svg-icon-sprite.js': 'assets/svg-icon-sprite.js'
-  })
-  eleventyConfig.addPassthroughCopy('./src/assets/social-image.jpg')
-
-  eleventyConfig.addNunjucksAsyncShortcode('image', require('./src/_11ty/imageShortcode').imageShortcode)
-
-  eleventyConfig.addFilter('readableDate', dateObj => {
-    return DateTime.fromJSDate(dateObj, {
-      zone: 'Europe/Paris',
-    }).setLocale('en').toLocaleString(DateTime.DATE_FULL)
-  })
-
-  /* Creating a collection of blogposts by filtering based on folder and filetype */
-  eleventyConfig.addCollection('blog', (collectionApi) => {
-    return collectionApi.getFilteredByGlob('./src/blog/*.md').reverse()
-  })
-  eleventyConfig.addCollection('categoryList', require('./src/_11ty/getCategoryList'))
-  eleventyConfig.addCollection('categories', require('./src/_11ty/createCategories'))
-
-
   eleventyConfig.setFrontMatterParsingOptions({
     excerpt: true,
     excerpt_separator: "<!-- excerpt -->",
     excerpt_alias: 'excerpt'
   })
 
+  /*===================================================*/
+  /* files that need to be copied to the build folder  */
+  /*===================================================*/
+  eleventyConfig.addPassthroughCopy('./src/assets/social-image.jpg')
+  eleventyConfig.addPassthroughCopy('./src/assets/icons')
+  eleventyConfig.addPassthroughCopy('./src/assets/sprite.svg')
+  eleventyConfig.addPassthroughCopy({
+      'node_modules/svg-icon-sprite/dist/svg-icon-sprite.js': 'assets/svg-icon-sprite.js'
+  })
+
+
+  /*=================*/
+  /*     Layouts     */
+  /*=================*/
+  eleventyConfig.addLayoutAlias('page', 'layouts/page')
+  eleventyConfig.addLayoutAlias('article', 'layouts/article')
+
+
+  /*=================*/
+  /*   Collections   */
+  /*=================*/
+  eleventyConfig.addCollection('blog', getAllPosts)
+  eleventyConfig.addCollection('categoryList', getCategoryList)
+  eleventyConfig.addCollection('categorisedPosts', getCategorisedPosts)
+
+  
+  /*=================*/
+  /*     Filters     */
+  /*=================*/
+  eleventyConfig.addFilter('readableDate', readableDate)
+
+
+  /*=================*/
+  /*    shortcodes   */
+  /*=================*/
+  eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode)
+
+
+
   return {
     dir: {
       input: 'src',

config/collections.js

@@ -0,0 +1,77 @@
+const slugify = require('slugify')
+
+/* Creating a collection containing all blogposts by filtering based on folder and filetype */
+const getAllPosts = (collectionApi) => {
+  return collectionApi.getFilteredByGlob('./src/blog/*.md')
+  .reverse()
+}
+
+const getCategoryList = (collectionApi) => {
+  const catPages = []
+  let categories = []
+  const blogPosts = collectionApi.getFilteredByGlob('./src/blog/*.md')
+
+  blogPosts.map((item) => {
+    categories.push(item.data.category)
+  })
+
+  categories = categories.sort(sortAlphabetically)
+  const temp = [...new Set(categories)]
+
+  temp.forEach((category) => {
+    const slug = strToSlug(category);
+
+    if(slug !== 'in-the-spotlight') {
+      catPages.push({
+        'key': slug,
+        'name': category 
+      })
+    }
+  })
+
+  return catPages
+}
+
+const getCategorisedPosts = (collectionApi) => {
+  const categorisedPosts = {}
+
+  collectionApi.getFilteredByGlob('./src/blog/*.md').forEach(item => {
+    const category = item.data.category
+      
+    // Ignore the ones without a category
+    if (typeof category !== 'string')
+    return
+
+    const slug = strToSlug(category)
+
+    if (Array.isArray(categorisedPosts[slug])) {
+      categorisedPosts[slug].push(item)
+    } else {
+      categorisedPosts[slug] = [item]
+    }
+  })
+
+  return categorisedPosts
+}
+
+module.exports = {
+  getAllPosts,
+  getCategoryList,
+  getCategorisedPosts
+}
+
+
+function strToSlug(str) {
+  const options = {
+      replacement: "-",
+      remove: /[&,+()$~%.'":*?<>{}]/g,
+      lower: true,
+  }
+  
+  return slugify(str, options)
+}
+
+
+function sortAlphabetically(a, b) {
+  return a.localeCompare(b, "en", { sensitivity: "base" })
+}

config/filters.js

@@ -0,0 +1,11 @@
+const { DateTime } = require('luxon')
+
+const readableDate = (dateObj) => {
+  return DateTime.fromJSDate(dateObj, {
+    zone: 'Europe/Paris',
+  }).setLocale('en').toLocaleString(DateTime.DATE_FULL)
+}
+
+module.exports = {
+  readableDate
+}

config/shortcodes.js

@@ -0,0 +1,30 @@
+const Image = require('@11ty/eleventy-img')
+
+const imageShortcode = async (imageObj = {}) => {
+  const widths = imageObj.widths || [300, 600, 900, 1200]
+  const className = imageObj.className || "image"
+
+  const sizes = "(min-width: 100px) 50vw, 100vw"
+  const metadata =  await Image(imageObj.src, {
+      formats: ["webp"],
+      outputDir: "./_site/assets/images/generated/",
+      urlPath: "/assets/images/generated/",
+      widths: widths
+  })
+  const alt = imageObj.alt;
+
+  const imageAttributes = {
+      class: className,
+      alt,
+      sizes,
+      loading: "lazy",
+      decoding: "async",
+  }
+
+  return Image.generateHTML(metadata, imageAttributes)
+}
+
+
+module.exports = {
+  imageShortcode
+}

package.json

@@ -19,13 +19,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@11ty/eleventy": "^1.0.2",
+    "@11ty/eleventy": "^2.0.0",
-    "@11ty/eleventy-img": "^2.0.1",
+    "@11ty/eleventy-img": "^3.0.0",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
     "luxon": "^3.2.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "svg-icon-sprite": "^1.1.1"
   }
 }

src/_11ty/createCategories.js

@@ -1,33 +0,0 @@
-const slugify = require('slugify')
-
-module.exports = (collectionApi) => {
-  const categories = {}
-
-  collectionApi.getFilteredByGlob('./src/blog/*.md').forEach(item => {
-    let category = item.data.category
-      
-    // Ignore the ones without a category
-    if (typeof category !== 'string')
-    return
-
-    const slug = strToSlug(category)
-
-    if (Array.isArray(categories[slug])) {
-      categories[slug].push(item)
-    } else {
-      categories[slug] = [item]
-    }
-  })
-
-  return categories  
-}
-
-function strToSlug(str) {
-  const options = {
-    replacement: '-',
-    remove: /[&,+()$~%.'':*?<>{}]/g,
-    lower: true,
-  }
-  
-  return slugify(str, options);
-}

src/_11ty/getCategoryList.js

@@ -1,43 +0,0 @@
-const slugify = require('slugify')
-
-module.exports = (collectionApi) => {
-  const catPages = []
-  let categories = []
-  const blogPosts = collectionApi.getFilteredByGlob('./src/blog/*.md')
-
-  blogPosts.map((item) => {        
-    let category = item.data.category
-    categories.push(category)
-  })
-
-  categories = categories.sort(sortAlphabetically)
-  let temp = [...new Set(categories)]
-
-  temp.forEach((category) => {
-    let slug = strToSlug(category);
-
-    if(slug !== 'in-the-spotlight') {
-      catPages.push({
-        'key': slug,
-        'name': category 
-      })
-    }
-  })
-
-  return catPages  
-}
-
-function strToSlug(str) {
-  const options = {
-    replacement: '-',
-    remove: /[&,+()$~%.'':*?<>{}]/g,
-    lower: true,
-  }
-    
-  return slugify(str, options)
-}
-
-
-function sortAlphabetically(a, b) {
-  return a.localeCompare(b, 'en', { sensitivity: 'base' });
-}

src/_11ty/imageShortcode.js

@@ -1,31 +0,0 @@
-const Image = require('@11ty/eleventy-img')
-
-const imageShortcode = async (
-  relativeSrc,
-  alt,
-  className,
-  widths = [null, 300, 800, 1280],
-  formats = ['webp'],
-  sizes = '(min-width: 100px)'
-) => {
-  const imageMetadata = await Image(relativeSrc, {
-    widths,
-    formats,
-    outputDir: './_site/assets/images/generated/',
-    urlPath: '/assets/images/generated/',
-  })
-
-  const imageAttributes = {
-    alt,
-    sizes,
-    loading: 'lazy',
-    decoding: 'async',
-  }
-
-  if(className) {imageAttributes['class'] = className }
-
-  return Image.generateHTML(imageMetadata, imageAttributes)
-}
-
-
-module.exports.imageShortcode = imageShortcode;

src/blog/article1.md

@@ -8,5 +8,5 @@ category: "cat1"
 Having landed on this Eleventy starter, you probably are no stranger to Eleventy. But if you are, you should definitely check out its benefits. Getting started with Eleventy is quick and easy.
 <!-- excerpt -->
 
-{% image "https://images.unsplash.com/photo-1555066931-4365d14bab8c", "A laptop with some lines of code on the screen", "image", [300, 600] %}
+{% image {src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c", alt: "A laptop with some lines of code on the screen", className: "image", widths: [300, 600] } %}
 

src/category.njk

@@ -13,5 +13,5 @@ eleventyComputed:
 <h1>{{ title }}</h1>
 
 {% include "./_includes/components/categoryNav.njk" %}
-{% set articles = collections.categories[cat.key] | reverse %}
+{% set articles = collections.categorisedPosts[cat.key] | reverse %}
 {% include "./_includes/components/articleList.njk" %}