fix: changes in the layout of the main page on github

.eleventy.js

@@ -1,17 +1,18 @@
 module.exports = config => {
+  config.setUseGitIgnore(false);
+  config.addWatchTarget('pages/static/bundles');
   config.addPassthroughCopy({
-    'pages/static/bundles': '/bundles',
-    'pages/static/assets': '/assets',
+    'pages/static/bundles': 'bundles',
+    'pages/static/assets': 'assets',
   });
 
-  const environment = process.env.ELEVENTY_ENV;
-
   return {
     dir: {
       input: 'pages/views-11ty',
       output: 'pages/dist',
       includes: 'includes',
       layouts: 'layouts',
+      data: 'data',
     },
     dataTemplateEngine: 'njk',
     htmlTemplateEngine: 'njk',

package.json

@@ -50,10 +50,10 @@
     "build-pages": "concurrently \"npm run build-pages:ts\" \"npm run build-pages:less\" && npm run build-pages:eleventy",
     "build-pages:ts": "cd pages && webpack",
     "build-pages:less": "lessc pages/src/localdev.less pages/static/bundles/localdev.css --source-map=pages/static/bundles/localdev.css.map",
-    "build-pages:eleventy": "eleventy",
+    "build-pages:eleventy": "npx @11ty/eleventy -- --env=production",
     "watch:ts": "cd pages && webpack --watch",
     "watch:less": "chokidar --initial \"**/*.less\" -c \"npm run build-pages:less\"",
-    "watch:eleventy": "eleventy --serve --port=3005",
+    "watch:eleventy": "npx @11ty/eleventy --serve --port=3005 -- --env=development",
     "test": "concurrently \"npm run lint\" \"npm run test:unit\"",
     "test:unit": "jest --silent --noStackTrace",
     "test:report": "jest --coverage",

pages/views-11ty/pages/basic/esl-alert.njk → pages/views-11ty/basic/esl-alert.njk

@@ -1,10 +1,9 @@
 ---
 layout: basic
 title: ESL Alert component
+name: ESL Alert
 containerCls: container
 tags: basic
-name: ESL Alert
-path: /basic/esl-alert.html
 ---
 
 <section class="row">

pages/views-11ty/pages/basic/esl-media.njk → pages/views-11ty/basic/esl-media.njk

@@ -1,9 +1,8 @@
 ---
 layout: basic
 title: ESL Media Component
-tags: basic
 name: ESL Media
-path: /basic/esl-media.html
+tags: basic
 ---
 
 <div class="description">

pages/views-11ty/data/env.js

@@ -0,0 +1,4 @@
+module.exports = {
+  environment: process.argv.find(arg => arg.startsWith('--env='))?.split('=')[1],
+  version: process.env.npm_package_version
+};

pages/views-11ty/pages/forms/esl-select-list.njk → pages/views-11ty/forms/esl-select-list.njk

@@ -1,10 +1,9 @@
 ---
 layout: basic
 title: ESL Select List
+name: ESL Select List
 containerCls: container
 tags: forms
-name: ESL Select List
-path: forms/esl-select-list.html
 ---
 
 <section class="row">

pages/views-11ty/includes/footer.njk

@@ -1,6 +1,6 @@
 <div class="container">
   <div class="text-center">
-    <div class="text-muted">ESL 2021 Exadel, Inc</div>
+    <div class="text-muted">ESL v{{ env.version }} © 2021 Exadel, Inc</div>
     <div class="text-muted">Core Team Contributors:
       <a href="mailto:[email protected]">Alexey Stsefanovich</a>,
       <a href="mailto:[email protected]">Julia Murashko</a>,

pages/views-11ty/includes/header-menu.njk

@@ -1,7 +1,17 @@
 {% macro menu(title, collection) %}
   <esl-trigger class="hd-dropdown-trigger" event="hover" target="::next">
-    <button class="btn btn-link hd-dropdown-btn hd-dropdown-arrow">
+    <button class="btn btn-link hd-dropdown-btn hd-dropdown-arrow {{ 'text-info' if collection in page.url}}">
       {{ title }}
     </button>
   </esl-trigger>
+  <esl-panel class="hd-dropdown-content" default-params="{hideDelay: 250}" fallback-duration="500">
+    <ul class="hd-dropdown-list">
+      {% for item in collections[collection] %}
+        {% set isActive = page.url == item.url %}
+        <li class="nav-item hd-dropdown-item {{ 'active' if isActive }}" {% if isActive %}aria-current="page"{% endif %}>
+          <a class="hd-dropdown-link" href="{{ item.url }}">{{ item.data.name }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </esl-panel>
 {% endmacro %}

pages/views-11ty/includes/header.njk

@@ -1,20 +1,20 @@
 <nav class="navbar navbar-expand-md navbar-dark bg-dark esl-demo-header">
   <div class="container">
-    <a class="navbar-brand logo-light mr-5" href="./index.html">
+    <a class="navbar-brand logo-light mr-5" href="/">
       {% include "img/logo.svg" %}
       <span class="ml-2">Exadel Smart Library</span>
     </a>
-    {% from 'header-menu.njk' import menu %}
+    {% from 'header-menu.njk' import menu with context %}
     <ul class="navbar-nav flex-grow-1">
       <li class="nav-item hd-dropdown">
-        {{ menu ("Components", "component") }}
+        {{ menu ("Components", "basic") }}
       </li>
       <li class="nav-item hd-dropdown">
-        {{ menu ("Form Components", "form") }}
+        {{ menu ("Form Components", "forms") }}
       </li>
-      {% if config.environment == "local" %}
+      {% if env.environment == "development" %}
         <li class="nav-item hd-dropdown">
-        {{ menu ("Drafts", "draft") }}
+          {{ menu ("Drafts", "draft") }}
         </li>
       {% endif %}
 

pages/views-11ty/index.njk

@@ -18,14 +18,14 @@ ui_playground: github.com/exadel-inc/ui-playground
 <h3 id="components">List of components</h3>
 <ul class="list-inline">
   {% for item in collections.basic %}
-    <li class="list-inline-item"><h5><a href="{{ item.data.path }}">{{ item.data.title }}</a></h5></li>
+    <li class="list-inline-item"><h5><a href="{{ item.url }}">{{ item.data.name }}</a></h5></li>
   {% endfor %}
 </ul>
 
 <h3 id="form-components">Form Components</h3>
 <ul class="list-inline">
   {% for item in collections.forms %}
-    <li class="list-inline-item"><h5><a href="{{ item.data.path }}">{{ item.data.title }}</a></h5></li>
+    <li class="list-inline-item"><h5><a href="{{ item.url }}">{{ item.data.name }}</a></h5></li>
   {% endfor %}
 </ul>
 <hr/>