11ty project for my website.

Based on eleventy-sample.

Development

Install dependencies

npm install

Run local development server

npm run dev

Production build

npm run build

Linting

npm run lint

Type checking (via tsc)

npm run check:types

Check for broken links

Run build first.

npm run check:links

Generate Icon Font

This project uses iconism to strip down fontawesomes big icon library.

It runs automatically with the eleventy build, but you can also call it manually:

npm run generate:font

Tool for checking the file:

ttx -t cmap -o - ./_site/styles/icons/icons.ttf
ttx -t cmap -o - ./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf
font-manager ./_site/styles/icons/icons.ttf

Add new icon

Find codepoint by name:

Open ./node_modules/@fortawesome/fontawesome-free/scss/_variables.scss and search for the name of the icon, for example for copy:

$fa-var-copy: \f0c5;

Then, add an entry to ./icon-font.json:

  {
    "name": "copy",
    "unicode": "\uf0c5",
    "path": "./node_modules/@fortawesome/fontawesome-free/svgs/solid/copy.svg"
  }

Last, use your icon in the HTML:

<i class="icon icon-copy"></i>

Navigation

To add a navigation page, add a front matter key navigationWeight to the page. It will automatically show up in the navigation. The navigation is sorted by the weights.

Pre-commit hook

Linting and type checking is also done by the npm package pre-commit. It does this checks when a git commit is triggered.

You can bypass the checks by passing --no-verify to git commit. See here.

Update base

git remote add base git@github.com:andreas-mausch/eleventy-sample.git
git remote -v
git fetch base
git branch -a
git merge base/main