/elva-11ty

✅ A multilingual, clean, green 11ty starter theme.

Primary LanguageNunjucks

elva logo

elva

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

Standards things

  • RSS feed with XSLT styles
  • JSON feeds
  • Sitemap
  • Web manifest for PWAs
  • humans.txt
  • robots.txt
  • Discourage Google AI from indexing your content

Other things

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