11ty auto navigation book template

Setup

To contribute

git clone git@github.com:pietrop/11ty-auto-navigation-book-template.git

cd 11ty-auto-navigation-book-template

npm install

To use

click on Use this template. Will prompt you to create a new repo based on this one. And you can then name it, clone it and follow rest of the instructions.

Usage

npm start

System Architecture

Originally forked from adamduncan/eleventy-auto-navigation

Directory structure-based navigation concept for eleventy-plugin-navigation. Based on a moonshoot 🚀 in a discussion about automatic hierarchical navigation.

Eleventy Navigation plugin defines its tree structure based on key and parent data in a site's pages.

If we want the site tree to mimic the folder structure, we can automate the setting of these properties by leveraging Computed Data, and a little URL path wrangling. See eleventyComputed.js data, nav.njk include and startsWith filter for most of the action. (Also check the Eleventy log for details on the navigation structure.)

Under the hood here we're setting the key and parent values to their URL paths, which are inherently unique (whereas setting by page title could become problematic). We also pass the order property from the page's frontmatter to eleventyNavigation. This allows us to override the default sort order (based on date created in collections) should you want to manually re-order siblings (see Mammals child pages, for example).

Perhaps not a bullet-proof approach, but certainly gets us most the way there without breaking a sweat.

uses modified version of Simple Tree Menu for the collapsable sidebar navigation.

Development env

• npm > 6.14.13
• Node 14

Node version is set in node version manager .nvmrc

nvm use

Build

npm run build

It generates the _site folder

Tests

NA

Deployment

npm run build:deploy

or just npm run deploy if for some reason you don't need to build the site.

This publishes the site to github pages for this github repository.

---

TODOS:

• sidebar Navbar layout
• Tree navigation in sidebar
• add to github ass template site
• publish to github pages
• add other 11ty things, like syntax highlight etc.. and example pages
• Test local images, to see if needs extra configuration
• figure out why _data site.js is not working
• figure out why current page has stop showing up
• edit on github link
• support for font awesome icons
• optional footer
• ...
• ...

stretch goals

• add footer
• breakdown templates into parts, eg head.njk etc..
• make outward links open new tab
• show markdown alt image text as description of image?
• images embed for social media share options
• Other head social media tags
• optional Google analytics setup ~ (needs testing)
• figure out what to do about mobile ~
• see if can move content page inside src/content
• site search (~nice to have)
• 404 page
• ...

---

To use as a template

• Modify /src/_data/site.js
  • change pathPrefix on line 3
  • Change other site info
• Modify /manifest.json (TODO: minfest.json should pull a lot of the info from site.js)
• Markdown files and folder in /src folder. Eg replace with your content.
• Modify /CNAME file with name of your site
• Change the favicon if you wish. public/favicon.ico
• ...