This site is built using 11ty and tailwindcss based on 11ty base blog
Shortcodes
Responsive gallery or single image using srcset via cloudinary, output webp format. ]
{% respimg path, alt, style %}
<!-- settings: -->
eleventyConfig.srcsetWidths = [
{ w: 400, v: 400 },
{ w: 600, v: 600 },
{ w: 800, v: 800 },
{ w: 1200, v: 1200 },
{ w: 1440, v: 1440 }
(figure) Image with caption tag.
{% figure path, alt %}
Features
- Convert external links to target _blank and noreferrer for better SEO optimisation, using markdown-it & markdown-it-link-attributes plugins.
/* Markdown Overrides */
let markdownLibrary = markdownIt({
html: true,
breaks: true
}).use(markdownitlinkatt, {
pattern: /^(?!(https:\/\/kailoon\.com|#)).*$/gm,
attrs: {
target: '_blank',
rel: 'noreferrer'
}
})
eleventyConfig.setLibrary('md', markdownLibrary)
- Draft post enabled.
- Responsve images using srcset
- Cloudinary and Netlify ready.
- score 4 x 100 in Google lighthouse.
- CSSnano (minify) ready.
Installation
- Clone or download this repo and run
npm install. - Update the site info in
metadata.json. - Update the homepage info
in data.json. - Update
about.md. - Go nuts :)
Hope you like it