Skip to content

Latest commit

 

History

History
129 lines (95 loc) · 6.43 KB

readme.md

File metadata and controls

129 lines (95 loc) · 6.43 KB
Raw

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 AI bots

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
  • Markdown-It — Support multilingual quote styles
  • Images — Size presets (full width, half etc that set the sizes attribute automatically)
  • Support markdown style images (1)
  • Profile verification / .well-known support for the Fediverse and Nostr (1)
  • Language redirect based on browser setting (1)
  • Cleaner language selector and default language (that sets homepage)
  • Pagination examples
  • 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 — More helpful scripts
  • Front Matter CMS — Tagging and categories
  • twtxt feeds (1)
  • CLI tool for managing languages (and possibly importing content)

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:prod

You can set the environment variable NODE_ENV=production in your hosting control panel too and use npm run build as before.

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

  • In .eleventy.js you'll see some dynamic settings for url, isProduction and isStaging (under Global Settings). Make sure these environment variables are set in staging and production and tweak as necessary
  • Configure your sites settings in /content/_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 /content/_data/navigation.js
  • Set your own default images, icons and favicon by replacing the images in /content/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 (/theme/css/), layouts (/theme/_layouts/) and includes (/theme/_includes/)

Optional

Updates

As of version 3.0 of elva, there are now separate folders for the /theme, your sites /content and elva related stuff /elva. The idea is to make upgrades of elva simpler by seperating frequently changed things (the theme and content) from the guts of the project. Hopefully this is helpful, but please open an issue if you would like to see further improvements made.