more examples
This commit is contained in:
madrilene
parent
b05d6840ee
commit
26716ad48d
10 changed files with 75 additions and 104 deletions
69
.eleventy.js
69
.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 -----------------------
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<picture class="${pcls}">
|
||||
${Object.values(metadata)
|
||||
.map(imageFormat => {
|
||||
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
|
||||
.map(entry => entry.srcset)
|
||||
.join(', ')}" sizes="${sizes}">`;
|
||||
})
|
||||
.join('\n')}
|
||||
<img
|
||||
src="${lowsrc.url}"
|
||||
class="${cls}"
|
||||
width="${lowsrc.width}"
|
||||
height="${lowsrc.height}"
|
||||
alt="${alt}"
|
||||
loading="${loading}"
|
||||
decoding="async">
|
||||
</picture>`;
|
||||
};
|
||||
|
||||
module.exports = imageShortcode;
|
||||
|
|
@ -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(
|
||||
`<figure class="${fcls}">
|
||||
<picture class="${pcls}">
|
||||
`<figure>
|
||||
<picture>
|
||||
${Object.values(metadata)
|
||||
.map(imageFormat => {
|
||||
return ` <source type="${imageFormat[0].sourceType}" srcset="${imageFormat
|
||||
|
|
@ -52,7 +44,6 @@ const imageShortcodePlaceholder = async (
|
|||
<img
|
||||
src="/assets/images/image-placeholder.png"
|
||||
data-src="${lowsrc.url}"
|
||||
class="${cls}"
|
||||
width="${lowsrc.width}"
|
||||
height="${lowsrc.height}"
|
||||
alt="${alt}"
|
||||
|
|
@ -61,8 +52,7 @@ const imageShortcodePlaceholder = async (
|
|||
</picture>
|
||||
${
|
||||
caption
|
||||
? `<figcaption class="cluster font-display"><p>${caption}</p> <img
|
||||
src="/assets/svg/arrow.svg" alt="Arrow icon" width="78" height="75" aria-hidden="true" />
|
||||
? `<figcaption class="cluster font-display"><p>${caption}</p>
|
||||
</figcaption>`
|
||||
: ``
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -45,5 +45,13 @@
|
|||
|
||||
<!-- footer -->
|
||||
{% include "partials/footer.njk" %}
|
||||
|
||||
<!-- youtube if actvated in yaml -->
|
||||
{% if youtube %}
|
||||
<script
|
||||
type="module"
|
||||
src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
|
||||
></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,3 +9,7 @@
|
|||
.blog h3 {
|
||||
font-size: var(--size-step-2);
|
||||
}
|
||||
.blog img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
---
|
||||
|
|
|
|||
21
src/posts/2022-10-12-post-with-image.md
Normal file
21
src/posts/2022-10-12-post-with-image.md
Normal file
|
|
@ -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." %}
|
||||
8
src/posts/2022-10-31-post-with-youtube.md
Normal file
8
src/posts/2022-10-31-post-with-youtube.md
Normal file
|
|
@ -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' %}
|
||||
Loading…
Reference in a new issue