@nera-static/plugin-navigation 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +83 -22
  2. package/index.js +13 -13
  3. package/package.json +8 -5
  4. package/views/helper/mixins.pug +1 -1
  5. package/views/helper/setup.pug +2 -2
  6. package/views/partials/link-list-navigation.pug +2 -2
package/README.md CHANGED
@@ -2,6 +2,19 @@
2
2
 
3
3
  A plugin for the [Nera](https://github.com/seebaermichi/nera) static site generator to create navigations from config files. Supports mixins and templates for easy rendering.
4
4
 
5
+ ## ✨ Features
6
+
7
+ - **Flexible Navigation Structure**: Define one or more navigations via YAML config
8
+ - **Template Integration**: Access navigation data in your templates (`app.nav`)
9
+ - **Multi-Level Support**: Support for multi-level navigations (e.g. main, footer)
10
+ - **Built-in Templates**: Includes ready-to-use Pug templates and mixins:
11
+ - Pipe-separated links
12
+ - Link lists
13
+ - Mixin-powered flexible layout
14
+ - **Active State Management**: Automatic active/path highlighting support
15
+ - **Zero Runtime**: Static navigation structure, no client-side processing
16
+ - **Nera v4.1.0 Compatible**: Optimized for the latest Nera architecture
17
+
5
18
  ## 🚀 Installation
6
19
 
7
20
  You can install this plugin by running the following in the root folder of your Nera project:
@@ -27,16 +40,16 @@ Example `navigation/config/navigation.yaml`:
27
40
 
28
41
  ```yaml
29
42
  elements:
30
- - href: /index.html
31
- name: Home
32
- - href: /service/service.html
33
- name: Service
34
- - href: /prices.html
35
- name: Prices
36
- - href: /contact.html
37
- name: Contact
38
- - href: /about-us/index.html
39
- name: About us
43
+ - href: /index.html
44
+ name: Home
45
+ - href: /service/service.html
46
+ name: Service
47
+ - href: /prices.html
48
+ name: Prices
49
+ - href: /contact.html
50
+ name: Contact
51
+ - href: /about-us/index.html
52
+ name: About us
40
53
  ```
41
54
 
42
55
  Access it in your templates via:
@@ -49,14 +62,14 @@ app.nav.elements
49
62
 
50
63
  ```yaml
51
64
  elements:
52
- main:
53
- - href: /index.html
54
- name: Home
55
- - href: /service/service.html
56
- name: Service
57
- footer:
58
- - href: /imprint.html
59
- name: Imprint
65
+ main:
66
+ - href: /index.html
67
+ name: Home
68
+ - href: /service/service.html
69
+ name: Service
70
+ footer:
71
+ - href: /imprint.html
72
+ name: Imprint
60
73
  ```
61
74
 
62
75
  Use:
@@ -83,8 +96,9 @@ include ../../src/plugins/navigation/views/simple-navigation
83
96
  ```
84
97
 
85
98
  Other available templates:
86
- - `pipe-separated-navigation.pug`
87
- - `link-list-navigation.pug`
99
+
100
+ - `pipe-separated-navigation.pug`
101
+ - `link-list-navigation.pug`
88
102
 
89
103
  ### Built-in Mixins
90
104
 
@@ -105,10 +119,57 @@ npm install
105
119
  npm run test
106
120
  ```
107
121
 
122
+ ## 🎨 CSS Classes (BEM Methodology)
123
+
124
+ The generated HTML uses BEM (Block Element Modifier) CSS classes for consistent styling:
125
+
126
+ ```css
127
+ /* Navigation Block */
128
+ .nav {
129
+ /* Main navigation container */
130
+ }
131
+
132
+ /* Navigation Elements */
133
+ .nav__list {
134
+ /* Navigation list container */
135
+ }
136
+ .nav__item {
137
+ /* Individual navigation item */
138
+ }
139
+ .nav__item--inline {
140
+ /* Inline item modifier */
141
+ }
142
+ .nav__link {
143
+ /* Navigation link */
144
+ }
145
+ .nav__separator {
146
+ /* Pipe separator element */
147
+ }
148
+
149
+ /* Navigation Modifiers */
150
+ .nav__link--active {
151
+ /* Currently active link */
152
+ }
153
+ .nav__link--active-path {
154
+ /* Parent path link */
155
+ }
156
+ ```
157
+
158
+ ## 📋 Version History
159
+
160
+ All changes are documented in [CHANGELOG.md](./CHANGELOG.md).
161
+
108
162
  ## 🧑‍💻 Author
109
163
 
110
- Michael Becker
111
- [GitHub](https://github.com/seebaermichi)
164
+ Michael Becker
165
+ [https://github.com/seebaermichi](https://github.com/seebaermichi)
166
+
167
+ ## 🔗 Links
168
+
169
+ - [Plugin Repository](https://github.com/seebaermichi/nera-plugin-navigation)
170
+ - [NPM Package](https://www.npmjs.com/package/@nera-static/plugin-navigation)
171
+ - [Nera Static Site Generator](https://github.com/seebaermichi/nera)
172
+ - [Plugin Documentation](https://github.com/seebaermichi/nera-plugins#plugins)
112
173
 
113
174
  ## 📦 License
114
175
 
package/index.js CHANGED
@@ -1,35 +1,35 @@
1
- import path from 'path';
2
- import { getConfig } from '@nera-static/plugin-utils';
1
+ import path from 'path'
2
+ import { getConfig } from '@nera-static/plugin-utils'
3
3
 
4
4
  // Default location to look for navigation.yaml in host project
5
- const HOST_CONFIG_PATH = path.resolve(process.cwd(), 'config/navigation.yaml');
5
+ const HOST_CONFIG_PATH = path.resolve(process.cwd(), 'config/navigation.yaml')
6
6
 
7
7
  function getNavElements(elements) {
8
8
  return elements.map((element) => ({
9
9
  ...element,
10
10
  path: path.posix.dirname(element.href),
11
- }));
11
+ }))
12
12
  }
13
13
 
14
14
  function getMainNav() {
15
- const navConfig = getConfig(HOST_CONFIG_PATH);
15
+ const navConfig = getConfig(HOST_CONFIG_PATH)
16
16
 
17
- navConfig.activeClass = navConfig.active_class || 'active';
18
- navConfig.activePathClass = navConfig.active_path_class || 'active-path';
19
- navConfig.navClass = navConfig.nav_class || 'nav';
17
+ navConfig.activeClass = navConfig.active_class || 'active'
18
+ navConfig.activePathClass = navConfig.active_path_class || 'active-path'
19
+ navConfig.navClass = navConfig.nav_class || 'nav'
20
20
 
21
21
  if (Array.isArray(navConfig.elements)) {
22
- navConfig.elements = getNavElements(navConfig.elements);
22
+ navConfig.elements = getNavElements(navConfig.elements)
23
23
  } else {
24
24
  for (const key in navConfig.elements) {
25
25
  navConfig[key] = {
26
26
  className: `${key}-${navConfig.navClass}`,
27
27
  elements: getNavElements(navConfig.elements[key]),
28
- };
28
+ }
29
29
  }
30
30
  }
31
31
 
32
- return navConfig;
32
+ return navConfig
33
33
  }
34
34
 
35
35
  export function getAppData(data) {
@@ -37,8 +37,8 @@ export function getAppData(data) {
37
37
  return {
38
38
  ...data.app,
39
39
  nav: getMainNav(),
40
- };
40
+ }
41
41
  }
42
42
 
43
- return data.app;
43
+ return data.app
44
44
  }
package/package.json CHANGED
@@ -1,8 +1,12 @@
1
1
  {
2
2
  "name": "@nera-static/plugin-navigation",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "A plugin for Nera static site generator to generate navigations with optional templates and mixins.",
5
5
  "main": "index.js",
6
+ "scripts": {
7
+ "lint": "eslint .",
8
+ "test": "vitest"
9
+ },
6
10
  "type": "module",
7
11
  "exports": {
8
12
  ".": "./index.js"
@@ -31,18 +35,17 @@
31
35
  },
32
36
  "homepage": "https://github.com/seebaermichi/nera-plugin-navigation#readme",
33
37
  "dependencies": {
34
- "@nera-static/plugin-utils": "^1.0.3"
38
+ "@nera-static/plugin-utils": "^1.1.0"
35
39
  },
36
40
  "engines": {
37
41
  "node": ">=18"
38
42
  },
39
43
  "devDependencies": {
40
44
  "cheerio": "^1.1.0",
45
+ "eslint": "^9.17.0",
46
+ "husky": "^9.1.7",
41
47
  "pug": "^3.0.3",
42
48
  "vitest": "^3.2.4"
43
49
  },
44
- "scripts": {
45
- "test": "vitest"
46
- },
47
50
  "sideEffects": false
48
51
  }
package/views/helper/mixins.pug CHANGED
@@ -1,2 +1,2 @@
1
1
  mixin link(item, activeClass, activePathClass)
2
- a(href=item.href, class=`${activeClass}${activePathClass}`) #{ item.name }
2
+ a.nav__link(href=item.href, class=`${activeClass} ${activePathClass}`.trim()) #{ item.name }
package/views/helper/setup.pug CHANGED
@@ -1,6 +1,6 @@
1
1
  each item, index in elements || app.nav.elements
2
2
  - const isActive = item.href === meta.fullPath
3
- - const activeClass = isActive ? app.nav.activeClass : ''
3
+ - const activeClass = isActive ? 'nav__link--active' : ''
4
4
  - const isNotHome = meta.dirname !== '/'
5
5
  - const isParent = isNotHome && item.href.indexOf(meta.dirname) === 0
6
- - const activePathClass = !isActive && isParent ? app.nav.activePathClass : ''
6
+ - const activePathClass = !isActive && isParent ? 'nav__link--active-path' : ''
package/views/partials/link-list-navigation.pug CHANGED
@@ -1,7 +1,7 @@
1
1
  include ../helper/mixins
2
2
 
3
3
  mixin linkListNav(elements=app.nav.elements, className='')
4
- ul.nav(class=`${className}`)
4
+ ul.nav.nav--list(class=`${className}`)
5
5
  include ../helper/setup
6
- li.nav-item
6
+ li.nav__item
7
7
  +link(item, activeClass, activePathClass)