diff --git a/.eleventy.js b/.eleventy.js
index db902c1..55b293d 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -25,7 +25,6 @@ const {
const {
asideShortcode,
insertionShortcode,
- imageShortcode,
imageShortcodePlaceholder,
liteYoutube
} = require('./config/shortcodes/index.js');
@@ -77,7 +76,6 @@ module.exports = eleventyConfig => {
// --------------------- Custom shortcodes ---------------------
eleventyConfig.addPairedShortcode('aside', asideShortcode);
eleventyConfig.addPairedShortcode('insertion', insertionShortcode);
- eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode);
eleventyConfig.addNunjucksAsyncShortcode('imagePlaceholder', imageShortcodePlaceholder);
eleventyConfig.addShortcode('youtube', liteYoutube);
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`); // current year, stephanie eckles
@@ -102,46 +100,33 @@ module.exports = eleventyConfig => {
// social images to root
- [
- 'src/assets/images/favicon/site.webmanifest',
- 'src/assets/images/favicon/favicon.ico',
- 'src/assets/images/favicon/favicon.svg',
- 'src/assets/images/favicon/apple-touch-icon.png',
- 'src/assets/images/favicon/favicon-32x32.png',
- 'src/assets/images/favicon/favicon-16x16.png',
- 'src/assets/images/favicon/android-chrome-192x192.png',
- 'src/assets/images/favicon/android-chrome-512x512.png',
- 'src/assets/images/favicon/maskable.png'
- ].forEach(path => eleventyConfig.addPassthroughCopy(path.replace('assets', '')));
-
- // social icons von images zu root
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/site.webmanifest': 'site.webmanifest'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/favicon.ico': 'favicon.ico'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/favicon.svg': 'favicon.svg'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/apple-touch-icon.png': 'apple-touch-icon.png'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/favicon-32x32.png': 'favicon-32x32.png'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/favicon-16x16.png': 'favicon-16x16.png'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/android-chrome-192x192.png': 'android-chrome-192x192.png'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/android-chrome-512x512.png': 'android-chrome-512x512.png'
- // });
- // eleventyConfig.addPassthroughCopy({
- // 'src/assets/images/favicon/maskable.png': 'maskable.png'
- // });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/site.webmanifest': 'site.webmanifest'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/favicon.ico': 'favicon.ico'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/favicon.svg': 'favicon.svg'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/apple-touch-icon.png': 'apple-touch-icon.png'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/favicon-32x32.png': 'favicon-32x32.png'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/favicon-16x16.png': 'favicon-16x16.png'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/android-chrome-192x192.png': 'android-chrome-192x192.png'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/android-chrome-512x512.png': 'android-chrome-512x512.png'
+ });
+ eleventyConfig.addPassthroughCopy({
+ 'src/assets/images/favicon/maskable.png': 'maskable.png'
+ });
// --------------------- Config -----------------------
diff --git a/config/shortcodes/image/index.js b/config/shortcodes/image/index.js
deleted file mode 100644
index 01e0389..0000000
--- a/config/shortcodes/image/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const Image = require('@11ty/eleventy-img');
-const path = require('path');
-
-const imageShortcode = async (src, pcls, cls, alt, loading, sizes = '100vw') => {
- if (!alt) {
- throw new Error(`Missing \`alt\` on Image from: ${src}`);
- }
-
- let metadata = await Image(src, {
- widths: [400, 700, 1280],
- formats: ['avif', 'webp', 'jpeg'],
- urlPath: '/assets/images/',
- outputDir: './dist/assets/images/',
- // Custom Image Filename
- filenameFormat: function (id, src, width, format, options) {
- const extension = path.extname(src);
- const name = path.basename(src, extension);
-
- return `${name}-${width}w.${format}`;
- }
- });
-
- let lowsrc = metadata.jpeg[0];
-
- return `
- ${Object.values(metadata)
- .map(imageFormat => {
- return ` `;
- })
- .join('\n')}
-
- `;
-};
-
-module.exports = imageShortcode;
diff --git a/config/shortcodes/imagePlaceholder/index.js b/config/shortcodes/imagePlaceholder/index.js
index dae3b82..d4c0388 100644
--- a/config/shortcodes/imagePlaceholder/index.js
+++ b/config/shortcodes/imagePlaceholder/index.js
@@ -2,15 +2,7 @@ const Image = require('@11ty/eleventy-img');
const path = require('path');
const htmlmin = require('html-minifier');
-const imageShortcodePlaceholder = async (
- src,
- fcls,
- pcls,
- cls,
- alt,
- caption,
- sizes = '100vw'
-) => {
+const imageShortcodePlaceholder = async (src, alt, caption, sizes = '100vw') => {
if (!alt) {
throw new Error(`Missing \`alt\` on myImage from: ${src}`);
}
@@ -40,8 +32,8 @@ const imageShortcodePlaceholder = async (
}
return htmlmin.minify(
- `
-
+ `
+
${Object.values(metadata)
.map(imageFormat => {
return `
${
caption
- ? `${caption}
+ ? `${caption}
`
: ``
}
diff --git a/config/shortcodes/index.js b/config/shortcodes/index.js
index 0414c45..31cebe6 100644
--- a/config/shortcodes/index.js
+++ b/config/shortcodes/index.js
@@ -1,10 +1,8 @@
-const imageShortcode = require('./image');
const imageShortcodePlaceholder = require('./imagePlaceholder');
const insertionShortcode = require('./insertion');
const asideShortcode = require('./aside');
const liteYoutube = require('./youtube-lite');
module.exports = {
- imageShortcode,
imageShortcodePlaceholder,
insertionShortcode,
asideShortcode,
diff --git a/readme.md b/readme.md
index 867bf89..db2b46e 100644
--- a/readme.md
+++ b/readme.md
@@ -25,7 +25,8 @@ https://eleventy-excellent.netlify.app/
This starter includes:
- Accessible site navigation, editable in \_data/navigation.js
-- Image optimisation with Eleventy-img
+- Image optimization with Eleventy-img (see blog post)
+- Youtube embed with lite-youtube (see blog post)
- Syntax highliting via eleventy-plugin-syntaxhighlight
- SEO (XML-sitemap, metadata)
- dayjs handling dates & times
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index 1906cf8..9dc5cd8 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -45,5 +45,13 @@
{% include "partials/footer.njk" %}
+
+
+ {% if youtube %}
+
+ {% endif %}