Merge pull request #3 containing cleanup eleventy config & updated de…

…pendencies

.eleventy.js

@@ -1,43 +1,73 @@
 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.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'
   })
-  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)
-  })
+  /*=================*/
+  /*     Layouts     */
+  /*=================*/
+  eleventyConfig.addLayoutAlias('page', 'layouts/page')
+  eleventyConfig.addLayoutAlias('article', 'layouts/article')
 
-  /* 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'))
+
+  /*=================*/
+  /*   Collections   */
+  /*=================*/
+  eleventyConfig.addCollection('blog', getAllPosts)
+  eleventyConfig.addCollection('categoryList', getCategoryList)
+  eleventyConfig.addCollection('categorisedPosts', getCategorisedPosts)
+
+
+  /*=================*/
+  /*     Filters     */
+  /*=================*/
+  eleventyConfig.addFilter('readableDate', readableDate)
+
+
+  /*=================*/
+  /*    shortcodes   */
+  /*=================*/
+  eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode)
 
 
-  eleventyConfig.setFrontMatterParsingOptions({
-    excerpt: true,
-    excerpt_separator: "<!-- excerpt -->",
-    excerpt_alias: 'excerpt'
-  })
 
   return {
     dir: {

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-img": "^2.0.1",
+    "@11ty/eleventy": "^2.0.0",
+    "@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/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" %}