From c9018fa45bfde4f684f7de5b70673f47912672de Mon Sep 17 00:00:00 2001
From: Zach Leatherman <zachleatherman@gmail.com>
Date: Mon, 11 Nov 2019 15:39:48 -0600
Subject: [PATCH] Use `eleventy-navigation` plugin for navigation menu
---
.eleventy.js | 2 ++
_includes/layouts/base.njk | 12 +++++++-----
about/index.md | 6 +++---
archive.njk | 6 +++---
index.njk | 6 +++---
package.json | 2 ++
6 files changed, 20 insertions(+), 14 deletions(-)
diff --git a/.eleventy.js b/.eleventy.js
index 1d3dbc1..5c7fdd4 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -2,10 +2,12 @@ const { DateTime } = require("luxon");
const fs = require("fs");
const pluginRss = require("@11ty/eleventy-plugin-rss");
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginNavigation = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginRss);
eleventyConfig.addPlugin(pluginSyntaxHighlight);
+ eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.setDataDeepMerge(true);
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 85c274b..e144570 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -12,11 +12,13 @@
<body>
<header>
<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
- <ul class="nav">
- {%- for nav in collections.nav | reverse -%}
- <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
- {%- endfor -%}
- </ul>
+ <!-- Read more about `eleventy-navigation` at https://github.com/11ty/eleventy-navigation -->
+ {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
+ listClass: "nav",
+ listItemClass: "nav-item",
+ activeListItemClass: "nav-item-active",
+ activeKey: eleventyNavigation.key
+ }) | safe }}
</header>
<main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
diff --git a/about/index.md b/about/index.md
index 4ccc204..56eb2c5 100644
--- a/about/index.md
+++ b/about/index.md
@@ -1,9 +1,9 @@
---
layout: layouts/post.njk
title: About Me
-tags:
- - nav
-navtitle: About
+eleventyNavigation:
+ key: About Me
+ order: 2
templateClass: tmpl-post
---
diff --git a/archive.njk b/archive.njk
index 61c48d9..5dbd42e 100644
--- a/archive.njk
+++ b/archive.njk
@@ -1,8 +1,8 @@
---
layout: layouts/home.njk
-tags:
- - nav
-navtitle: Archive
+eleventyNavigation:
+ key: Archive
+ order: 3
permalink: /posts/
---
diff --git a/index.njk b/index.njk
index 24ca51c..69b53ab 100644
--- a/index.njk
+++ b/index.njk
@@ -1,8 +1,8 @@
---
layout: layouts/home.njk
-tags:
- - nav
-navtitle: Home
+eleventyNavigation:
+ key: Home
+ order: 1
---
<h1>Latest 3 Posts</h1>
diff --git a/package.json b/package.json
index f88d030..ac0c313 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"scripts": {
"build": "npx eleventy",
"watch": "npx eleventy --watch",
+ "serve": "npx eleventy --serve",
"debug": "DEBUG=* npx eleventy"
},
"repository": {
@@ -23,6 +24,7 @@
"homepage": "https://github.com/11ty/eleventy-base-blog#readme",
"devDependencies": {
"@11ty/eleventy": "^0.9.0",
+ "@11ty/eleventy-navigation": "^0.1.0",
"@11ty/eleventy-plugin-rss": "^1.0.7",
"@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
"luxon": "^1.12.0",