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')} - ${alt} - `; -}; - -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 %} diff --git a/src/assets/css/blocks/blog.css b/src/assets/css/blocks/blog.css index d5a3aa3..3f47109 100644 --- a/src/assets/css/blocks/blog.css +++ b/src/assets/css/blocks/blog.css @@ -9,3 +9,7 @@ .blog h3 { font-size: var(--size-step-2); } +.blog img { + width: 100%; + height: auto; +} diff --git a/src/posts/2022-09-01-a-post.md b/src/posts/2022-09-01-a-post.md index 14a0d55..6f8c815 100644 --- a/src/posts/2022-09-01-a-post.md +++ b/src/posts/2022-09-01-a-post.md @@ -1,5 +1,5 @@ --- -title: 'What an interesting title' +title: 'What a title' description: 'Every post starts with planning. Icing lemon drops macaroon sugar plum chupa chups. Bonbon cake chupa chups sugar plum brownie marshmallow jelly sweet roll.' date: 2022-09-01 --- diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md new file mode 100644 index 0000000..18d591d --- /dev/null +++ b/src/posts/2022-10-12-post-with-image.md @@ -0,0 +1,21 @@ +--- +title: 'Post with an image ' +description: 'Every post starts with planning. Gummi bears shortbread tootsie roll chupa chups cookie cheesecake sugar plum. Lemon drops brownie toffee fruitcake cotton candy.' +date: 2022-10-12 +--- + +## Some code + +Gummi bears shortbread tootsie roll chupa chups cookie cheesecake sugar plum. Lemon drops brownie toffee fruitcake cotton candy. Lollipop muffin cake tiramisu chocolate. Caramels icing bonbon marshmallow cake pie sweet roll biscuit. Dessert candy sweet roll dessert ice cream gummies gummies jelly beans. Dragée jelly gingerbread cake chupa chups chocolate cake muffin jelly-o. + +```js +function myFunction() { + return true; +} +``` + +Cake pastry jelly-o donut gummi bears toffee croissant chupa chups. Chocolate cake chocolate cotton candy tart biscuit. Ice cream sesame snaps cake bear claw toffee chocolate bar cheesecake toffee. Shortbread tart tart tart donut macaroon danish topping chocolate. Topping toffee chupa chups oat cake chupa chups. Candy jelly beans chocolate croissant sweet cupcake. Jujubes gummies macaroon shortbread jujubes candy canes cake. + +## Image with caption + +{% imagePlaceholder "./src/assets/images/opengraph-default.jpg", "Alt... The preview image for social media", "Caption.. An interesting caption." %} diff --git a/src/posts/2022-10-31-post-with-youtube.md b/src/posts/2022-10-31-post-with-youtube.md new file mode 100644 index 0000000..0ba2c4c --- /dev/null +++ b/src/posts/2022-10-31-post-with-youtube.md @@ -0,0 +1,8 @@ +--- +title: 'Post with a video ' +description: 'Every post starts with planning. Carrot cake chocolate sweet bear claw sesame snaps. Muffin cheesecake cotton candy lollipop bonbon oat cake chocolate bar. Chocolate bar gummi bears wafer.' +date: 2022-10-31 +youtube: true +--- + +{% youtube 'qvrNwWaNVGo', 'Alberto Ballesteros - Una Película A Medias' %}