Trivet

A simple starter kit for Eleventy-based static sites for the Fluid Project

This repository contains the files needed to build Eleventy-based static sites for the Fluid Project.

Usage

You can use this repository as a template for a new site hosted on Netlify with Netlify CMS pre-configured:

To run locally in development mode

1. Install the required NPM packages: npm install
2. Run Eleventy in development mode: npm start.

The website will be available at http://localhost:8080.

To build and serve using Docker

You can build and serve the website from a Docker container.

Once you have Docker installed, run the following commands to build a Docker image and start a container:

• Build the image: docker build -t trivet .
• Run the container: docker run --name trivet -p 8000:80 trivet

The website will be available at http://localhost:8000

If you make changes to the website, repeat the steps to build the image and start a new container.

To build for deployment to a personal web server

1. Install the required NPM packages: npm install
2. Run the build script: npm run build
3. Upload the contents of the ./dist/ directory to the web root of your server.

If you make changes to the website, repeat step 2 to build the website and upload any changed files from the ./dist/ directory to the web root of your server.

Features

• Integrated UI Options Preferences Editor.
• Basic static site configuration for developing project websites and blogs.
• Starter configuration for Netlify CMS.
• Internationalization support.

Notes

Modifications can be made to any source file or directory except for the contents of the ./dist/ directory. The ./dist/ directory is not versioned since it contains the built website that Eleventy generates from the source files, and files in dist are overwritten at build time.

Working with Netlify CMS

The Netlify CMS configuration can be edited in src/admin/config.yml. For full documentation, see the Netlify CMS documentation.

Internationalization

Trivet includes internationalization support for English (Canada) and French (Canada). To add a language, the following changes need to be made:

1. Update the languages object of src/_data/config.json to add the new language. For example, to add Farsi, you would use the IETF language code as the key, and add the following object values:

   • a short form of the language code for use in permalinks
   • a short form of the language code that corresponds to an available message bundle locale for Infusion's User Interface Options
   • the direction (ltr for left to right or rtl for right to left)
   • the localized language name (endonym)

   {
      "languages": {
         "fa-IR": {
            "slug": "fa",
            "uioSlug": "fa",
            "dir": "rtl",
            "name": "فارسی"
         }
      }
   }

   You can set the site's default language by changing the defaultLanguage value in src/_data/config.json to the IETF language code of the desired default language.

2. Add sections for the new language to src/_data/site.json and src/_data/translations.json, translating the content from the English source. The key will always be the language code as used in config.json.

3. Add folders in each collection for translated content. For example, you would add a folder called fa-IR to src/collections/pages and src/collections/posts.

4. Create a localized version of the posts archive page, following the example of src/posts.fr-CA.md. (Note: as per Eleventy's default configuration, Markdown files are processed with the Liquid template language. If for some reason one decides to modify this to use Nunjucks or another template language, the permalink syntax in all post archive pages will need to be modified to use the chosen template language.)

For more information about how Netlify CMS works with internationalized content, see the internationalization support documentation.

License

Trivet is available under the New BSD License.

Third Party Software in Trivet

Trivet is based on other publicly available software, categorized by license:

MIT License

• Eleventastic
• eleventy-webpack
• Hylia
• Supermaya