elva

• Status: ✅ Active
• Contributors: @scott
• Description: A multilingual, clean, green 11ty starter theme.
• Author: Scott Evans
• Author URI: https://scott.ee

About

A multilingual, clean, green, 11ty starter theme. elva provides solid foundations for your next web project and a built in CMS (Front Matter CMS) for managing content. Try the demo!

Features include:

Performance things

• Optimised CSS, JS and HTML
• Responsive image shortcode that supports lazy loading and modern formats (avif, webp)
• Support for the Photon CDN (can be turned on via settings)

Accessibility things

• Multilingual
• Dark / light mode
• Skip link and ARIA hints

Standards things

• RSS feed with XSLT styles
• JSON feeds
• Sitemap
• Web manifest for PWAs
• humans.txt
• robots.txt
• Discourage AI bots

Other things

• Front Matter CMS
• Open graph image generation from within Front Matter CMS (dev server must be running)
• Draft support
• Syntax highlighting
• Simplified embeds for YouTube, Vimeo etc
• Plenty of helpful filters and functions
• Alpine.js
• Eleventy Fetch

Still to come:

• Critical CSS or per collection or per page CSS (1)
• Fix: Make the random filter choose the same article for both languages
• Accessible tooltip component
• Reading time filter
• Markdown-It — Support multilingual quote styles
• Images — Size presets (full width, half etc that set the sizes attribute automatically)
• Support markdown style images
• Profile verification / .well-known support for the Fediverse and Nostr
• Serve assets and styles for YouTube lite locally
• Language redirect based on browser setting?
• Cleaner language selector
• Allow for variable subsitution in translations e.g. Hello, {{name}} (still needs to handle plurals!)
• Front Matter CMS — Fix previews when customising the post/page slug (1, 2)
• Front Matter CMS — More data managed from the CMS
• Front Matter CMS — Better support for templates, default templates etc
• Front Matter CMS — Generated open graph images (1)
• twtxt feeds (1)

Getting Started

Make a directory and navigate to it:

mkdir my-site-name
cd my-site-name

Clone this repository:

git clone https://github.com/scottsweb/elva.git .

Install dependencies:

npm install

Run Eleventy for site development. View the site at http://localhost:8080:

npm run dev

Generate a production-ready build to the dist folder:

npm run build

To use Front Matter CMS, install VSCodium or Visual Studio Code and enable the extension (if it doesn't enable automatically). It will open each time you launch your project.

Personalisation Checklist

• At the top of .eleventy.js you'll see some dynamic settings for url, isProduction and isStaging. Make sure these environment variables are set in staging and production and tweak as necessary
• Configure your sites settings in /src/_data/settings.json or in Front Matter CMS (under Data)
• Add your chosen languages (the demo site will soon guide you through this)
• Configure your sites navigation in /src/_data/navigation.js
• Set your own default images, icons and favicon by replacing the images in /src/assets/img/
• Add your content — it's easiest to do this with Front Matter CMS which exposes all front matter in the UI
• Setup a custom template for your open graph images (.frontmatter/scripts/opengraph-template.html)
• Design your site by customising the CSS (/src/assets/css/), layouts (/src/_layouts/) and includes (/src/_includes/)

Optional

• Set your preferred image sizes and formats in the image shortcode /src/_config/shortcodes/image.js
• If you add more front matter, you may wish to edit frontmatter.json to add Front Matter CMS support
• You many not need Alpine.js which can be removed from /src/assets/js/bundle.njk
• Use Eleventy Fetch to grab some API data
• If you enable Photon CDN support familiarise yourself with these limitations