diff --git a/.eleventy.js b/.eleventy.js index 59bcd2e..f3ef86d 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,81 +1,80 @@ -const eleventyNavigationPlugin = require('@11ty/eleventy-navigation') -const pluginRss = require('@11ty/eleventy-plugin-rss') +import eleventyNavigationPlugin from "@11ty/eleventy-navigation" +import pluginRss from "@11ty/eleventy-plugin-rss" +import { eleventyImageTransformPlugin } from "@11ty/eleventy-img" +import pluginIcons from "eleventy-plugin-icons" -const { - getAllPosts, +import { + getAllPosts, getCategoryList, - getCategorisedPosts -} = require('./config/collections') + getCategorisedPosts, +} from "./config/collections.js" -const { - readableDate -} = require('./config/filters') +import { readableDate } from "./config/filters.js" -const { - imageShortcode -} = require('./config/shortcodes') +const imageConfig = { + extensions: "html", + formats: ["webp"], + widths: [300, 600, 900, "auto"], + defaultAttributes: { + loading: "lazy", + decoding: "async", + sizes: "100vw", + }, + urlPath: "/images/", +} -module.exports = function(eleventyConfig) { - +export default function (eleventyConfig) { /*================================*/ /* plugins and configurations */ /*================================*/ eleventyConfig.addPlugin(eleventyNavigationPlugin) eleventyConfig.addPlugin(pluginRss) + eleventyConfig.addPlugin(eleventyImageTransformPlugin, imageConfig) eleventyConfig.setFrontMatterParsingOptions({ excerpt: true, excerpt_separator: "", - excerpt_alias: 'excerpt' + excerpt_alias: "excerpt", }) + eleventyConfig.addPlugin(pluginIcons, { + sources: [{ name: "custom", path: "./src/assets/icons" }], + }) + /*===================================================*/ /* 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.addPassthroughCopy("./src/assets/icons") + eleventyConfig.addPassthroughCopy("./src/assets/sprite.svg") /*=================*/ /* Layouts */ /*=================*/ - eleventyConfig.addLayoutAlias('page', 'layouts/page') - eleventyConfig.addLayoutAlias('article', 'layouts/article') - + eleventyConfig.addLayoutAlias("page", "layouts/page") + eleventyConfig.addLayoutAlias("article", "layouts/article") /*=================*/ /* Collections */ /*=================*/ - eleventyConfig.addCollection('blog', getAllPosts) - eleventyConfig.addCollection('categoryList', getCategoryList) - eleventyConfig.addCollection('categorisedPosts', getCategorisedPosts) + eleventyConfig.addCollection("blog", getAllPosts) + eleventyConfig.addCollection("categoryList", getCategoryList) + eleventyConfig.addCollection("categorisedPosts", getCategorisedPosts) - /*=================*/ /* Filters */ /*=================*/ - eleventyConfig.addFilter('readableDate', readableDate) - - - /*=================*/ - /* shortcodes */ - /*=================*/ - eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode) - + eleventyConfig.addFilter("readableDate", readableDate) return { dir: { - input: 'src', - output: '_site', - includes: '_includes', - data: '_data' + input: "src", + output: "_site", + includes: "_includes", + data: "_data", }, - markdownTemplateEngine: 'njk' - } -} \ No newline at end of file + markdownTemplateEngine: "njk", + }; +} diff --git a/config/collections.js b/config/collections.js index ed43700..818e161 100644 --- a/config/collections.js +++ b/config/collections.js @@ -1,4 +1,4 @@ -const slugify = require('slugify') +import slugify from 'slugify' /* Creating a collection containing all blogposts by filtering based on folder and filetype */ const getAllPosts = (collectionApi) => { @@ -20,13 +20,12 @@ const getCategoryList = (collectionApi) => { temp.forEach((category) => { const slug = strToSlug(category); - - if(slug !== 'in-the-spotlight') { - catPages.push({ - 'key': slug, - 'name': category - }) - } + + catPages.push({ + 'key': slug, + 'name': category + }) + }) return catPages @@ -54,7 +53,7 @@ const getCategorisedPosts = (collectionApi) => { return categorisedPosts } -module.exports = { +export { getAllPosts, getCategoryList, getCategorisedPosts diff --git a/config/filters.js b/config/filters.js index d83c51e..524f266 100644 --- a/config/filters.js +++ b/config/filters.js @@ -1,4 +1,4 @@ -const { DateTime } = require('luxon') +import { DateTime } from 'luxon' const readableDate = (dateObj) => { return DateTime.fromJSDate(dateObj, { @@ -6,6 +6,6 @@ const readableDate = (dateObj) => { }).setLocale('en').toLocaleString(DateTime.DATE_FULL) } -module.exports = { +export { readableDate } \ No newline at end of file diff --git a/config/shortcodes.js b/config/shortcodes.js deleted file mode 100644 index 3b6fc00..0000000 --- a/config/shortcodes.js +++ /dev/null @@ -1,30 +0,0 @@ -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 -} diff --git a/package.json b/package.json index a838cf9..80b9d96 100644 --- a/package.json +++ b/package.json @@ -3,13 +3,13 @@ "version": "1.0.0", "description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.", "main": "index.md", + "type": "module", "scripts": { - "generate:sprite": "svg-icon-generate --folder=src/assets/icons --output=src/assets/sprite.svg", "watch:eleventy": "eleventy --serve", "watch:sass": "sass --watch src/assets/theming:_site/assets", "build:eleventy": "eleventy", "build:sass": "sass --no-source-map --style=compressed src/assets/theming:_site/assets", - "start": "npm-run-all build:sass generate:sprite --parallel watch:*", + "start": "npm-run-all build:sass --parallel watch:*", "build": "npm-run-all build:*", "debug": "DEBUG=* npx eleventy" }, @@ -19,13 +19,14 @@ }, "license": "MIT", "dependencies": { - "@11ty/eleventy": "^2.0.0", - "@11ty/eleventy-img": "^3.0.0", + "@11ty/eleventy": "^3.0.0", + "@11ty/eleventy-img": "^5.0.0", "@11ty/eleventy-navigation": "^0.3.5", - "@11ty/eleventy-plugin-rss": "^1.2.0", + "@11ty/eleventy-plugin-rss": "^2.0.2", + "@11ty/eleventy-upgrade-help": "^3.0.1", "luxon": "^3.2.1", "npm-run-all": "^4.1.5", "sass": "^1.58.3", - "svg-icon-sprite": "^1.1.1" + "eleventy-plugin-icons": "^4.5.1" } } diff --git a/src/_includes/components/footer.njk b/src/_includes/components/footer.njk index c9ae2da..8982900 100644 --- a/src/_includes/components/footer.njk +++ b/src/_includes/components/footer.njk @@ -3,13 +3,7 @@ - + {% icon "custom:twitter", class="icon" %} Twitter diff --git a/src/_includes/components/metadata.njk b/src/_includes/components/metadata.njk index ce6b95b..23984c6 100644 --- a/src/_includes/components/metadata.njk +++ b/src/_includes/components/metadata.njk @@ -3,6 +3,7 @@ + diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg deleted file mode 100644 index 307b30d..0000000 --- a/src/assets/sprite.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - twitter - - - - diff --git a/src/blog/article1.md b/src/blog/article1.md index ddf39ec..83dac26 100644 --- a/src/blog/article1.md +++ b/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. -{% 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] } %} +A laptop with some lines of code on the screen diff --git a/src/index.md b/src/index.md index c7baea1..c364492 100644 --- a/src/index.md +++ b/src/index.md @@ -12,7 +12,7 @@ This eleventy starter already includes: - Basic site navigation with eleventy-navigation - Blog categories & category based navigation - Image optimisation with Eleventy-img -- SVG icons with svg-icon-sprite +- SVG icons with Eleventy-plugin-icon - SEO (sitemap, metadata, robots.txt) - RSS feed - Luxon for handling dates & times