desy-html 7.3.1 → 8.0.0

package/docs/_global.foot.njk

@@ -6,29 +6,6 @@
   "classes": "lg:mt-48"
 })  }}
 
-<script src="js/prism/prism.min.js"></script>
-<script src="js/prism/prism-toolbar.min.js"></script>
-<script src="js/prism/clipboard.min.js"></script>
-<script src="js/prism/prism-copy-to-clipboard.min.js"></script>
-<script src="js/prism/prism-normalize-whitespace.min.js"></script>
-<script src="js/prism/prism-yaml.min.js"></script>
-<script src="js/prism/prism-twig.min.js"></script>
-<script>
-  // Optional
-  Prism.plugins.NormalizeWhitespace.setDefaults({
-  'remove-trailing': true,
-  'remove-indent': true,
-  'left-trim': true,
-  'right-trim': true,
-  /*'break-lines': 80,
-  'indent': 2,
-  'remove-initial-line-feed': false,
-  'tabs-to-spaces': 4,
-  'spaces-to-tabs': 4*/
-});
-</script>
-
-
 <script src="js/popper.min.js"></script>
 <script src="js/tippy-bundle.umd.min.js"></script>
 <script type="module" src="js/index.js"></script>

package/docs/_global.head.njk

@@ -11,336 +11,18 @@
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/styles.css">
   <style>
-    /* PrismJS 1.15.0
-    https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+java+kotlin+markdown+swift&plugins=toolbar+show-language+copy-to-clipboard */
-    /**
-     * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
-     * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
-     * @author Tim  Shedor
-     */
-
-
-    code[class*="language-"],
-    pre[class*="language-"] {
-      color: black;
-      background: none;
-      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-      text-align: left;
-      white-space: pre;
-      word-spacing: normal;
-      word-break: normal;
-      word-wrap: normal;
-      line-height: 1.5;
-      -moz-tab-size: 4;
-      -o-tab-size: 4;
-      tab-size: 4;
-      -webkit-hyphens: none;
-      -ms-hyphens: none;
-      hyphens: none; }
-
-    /* Code blocks */
-    pre[class*="language-"] {
-      position: relative;
-      margin: .5em 0;
-      overflow: visible;
-      padding: 0; }
-
-    pre[class*="language-"] > code {
-      position: relative;
-      border-left: 10px solid #358ccb;
-      -webkit-box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
-      box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
-      background-color: #fdfdfd;
-      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgba(69, 142, 209, 0.04)));
-      background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
-      background-size: 3em 3em;
-      background-origin: content-box;
-      background-attachment: local; }
-
-    code[class*="language"] {
-      max-height: inherit;
-      height: inherit;
-      padding: 0 1em;
-      display: block;
-      overflow: auto; }
-
-    /* Margin bottom to accommodate shadow */
-    :not(pre) > code[class*="language-"],
-    pre[class*="language-"] {
-      background-color: #fdfdfd;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      margin-bottom: 1em; }
-
-    /* Inline code */
-    :not(pre) > code[class*="language-"] {
-      position: relative;
-      padding: .2em;
-      border-radius: 0.3em;
-      color: #c92c2c;
-      border: 1px solid rgba(0, 0, 0, 0.1);
-      display: inline;
-      white-space: normal; }
-
-    pre[class*="language-"]:before,
-    pre[class*="language-"]:after {
-      content: '';
-      z-index: -2;
-      display: block;
-      position: absolute;
-      bottom: 0.75em;
-      left: 0.18em;
-      width: 40%;
-      height: 20%;
-      max-height: 13em;
-      -webkit-box-shadow: 0px 13px 8px #979797;
-      box-shadow: 0px 13px 8px #979797;
-      -webkit-transform: rotate(-2deg);
-      transform: rotate(-2deg); }
-
-    :not(pre) > code[class*="language-"]:after,
-    pre[class*="language-"]:after {
-      right: 0.75em;
-      left: auto;
-      -webkit-transform: rotate(2deg);
-      transform: rotate(2deg); }
-
-    .token.comment,
-    .token.block-comment,
-    .token.prolog,
-    .token.doctype,
-    .token.cdata {
-      color: #7D8B99; }
-
-    .token.punctuation {
-      color: #5F6364; }
-
-    .token.property,
-    .token.tag,
-    .token.boolean,
-    .token.number,
-    .token.function-name,
-    .token.constant,
-    .token.symbol,
-    .token.deleted {
-      color: #c92c2c; }
-
-    .token.selector,
-    .token.attr-name,
-    .token.string,
-    .token.char,
-    .token.function,
-    .token.builtin,
-    .token.inserted {
-      color: #2f9c0a; }
-
-    .token.operator,
-    .token.entity,
-    .token.url,
-    .token.variable {
-      color: #a67f59;
-      background: rgba(255, 255, 255, 0.5); }
-
-    .token.atrule,
-    .token.attr-value,
-    .token.keyword,
-    .token.class-name {
-      color: #1990b8; }
-
-    .token.regex,
-    .token.important {
-      color: #e90; }
-
-    .language-css .token.string,
-    .style .token.string {
-      color: #a67f59; }
-
-    .token.important {
-      font-weight: normal; }
-
-    .token.bold {
-      font-weight: bold; }
-
-    .token.italic {
-      font-style: italic; }
-
-    .token.entity {
-      cursor: help; }
-
-    .namespace {
-      opacity: .7; }
-
-    @media screen and (max-width: 767px) {
-      pre[class*="language-"]:before,
-      pre[class*="language-"]:after {
-        bottom: 14px;
-        -webkit-box-shadow: none;
-        box-shadow: none; } }
-
-    /* Plugin styles */
-    .token.tab:not(:empty):before,
-    .token.cr:before,
-    .token.lf:before {
-      color: #e0d7d1; }
-
-    /* Plugin styles: Line Numbers */
-    pre[class*="language-"].line-numbers.line-numbers {
-      padding-left: 0; }
-
-    pre[class*="language-"].line-numbers.line-numbers code {
-      padding-left: 3.8em; }
-
-    pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
-      left: 0; }
-
-    /* Plugin styles: Line Highlight */
-    pre[class*="language-"][data-line] {
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-left: 0; }
-
-    pre[data-line] code {
-      position: relative;
-      padding-left: 4em; }
-
-    pre .line-highlight {
-      margin-top: 0; }
-
-    div.code-toolbar {
-      position: relative; }
-
-    div.code-toolbar > .toolbar {
-      position: absolute;
-      top: .3em;
-      right: .2em;
-      -webkit-transition: opacity 0.3s ease-in-out;
-      transition: opacity 0.3s ease-in-out;
-      opacity: 0; }
-
-    div.code-toolbar:hover > .toolbar {
-      opacity: 1; }
-
-    div.code-toolbar > .toolbar .toolbar-item {
-      display: inline-block; }
-
-    div.code-toolbar > .toolbar a {
-      cursor: pointer; }
-
-    div.code-toolbar > .toolbar button {
-      background: none;
-      border: 0;
-      color: inherit;
-      font: inherit;
-      line-height: normal;
-      overflow: visible;
-      padding: 0;
-      -webkit-user-select: none;
-      /* for button */
-      -moz-user-select: none;
-      -ms-user-select: none; }
-
-    div.code-toolbar > .toolbar a,
-    div.code-toolbar > .toolbar button,
-    div.code-toolbar > .toolbar span {
-      /* color: #bbb;
-      font-size: .8em;
-      padding: 0 .5em;
-      background: #f5f2f0;
-      background: rgba(224, 224, 224, 0.2);
-      box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
-      border-radius: .5em; */ }
-
-    div.code-toolbar > .toolbar a:hover,
-    div.code-toolbar > .toolbar a:focus,
-    div.code-toolbar > .toolbar button:hover,
-    div.code-toolbar > .toolbar button:focus,
-    div.code-toolbar > .toolbar span:hover,
-    div.code-toolbar > .toolbar span:focus {
-      text-decoration: none; }
-
-    pre[class*="language-"] > code {
-      margin: 0 0 1rem;
-      padding: 1.5rem;
-      border-left: 0;
-      border-radius: 4px;
-      background: #f6f6f5;
-      -webkit-box-shadow: 0 0 0 1px #dfdfdf;
-      box-shadow: 0 0 0 1px #dfdfdf; }
-
-    code[class*="language-"],
-    pre[class*="language-"] {
-      position: relative;
-      color: #5c5c5c;
-      font-family: Inconsolata, "Roboto Mono", Consolas, Menlo, Monaco, "Ubuntu Mono", "DejaVu Sans Mono", monospace;
-      font-weight: normal; }
-
-    :not(pre) > code[class*="language-"],
-    pre[class*="language-"] {
-      margin-top: 0;
-      margin-bottom: 0; }
-
-    pre[class*="language-"]::before,
-    pre[class*="language-"]::after {
-      display: none; }
-
-    pre[class*="language-"] > code {
-      margin: 0 0 2rem;
-      padding-top: 3rem;
-      border-left: 0;
-      background-image: none;
-      -webkit-box-shadow: none;
-      box-shadow: none; }
-
-    .prism-show-language {
-      margin-bottom: 0.75rem;
-      font-size: 0.889rem; }
-
-    .clipboard-copy {
-      display: none; }
-
-    div.code-toolbar > .toolbar {
-      position: absolute;
-      top: 0rem;
-      width: 100%;
-      font-family: "Open Sans", "Gill Sans MT", "Gill Sans", Corbel, Arial, sans-serif;
-      font-size: 1rem;
-      opacity: 1;
-      z-index: 1; }
-      div.code-toolbar > .toolbar a {
-        padding: 0.375rem 0.625rem;
-        text-decoration: none; }
-      div.code-toolbar > .toolbar .toolbar-item:first-of-type {
-        position: absolute;
-        top: 0.75rem;
-        left: 1.75rem;
-        color: #8f8f8f;
-        font-size: .875em;
-        letter-spacing: .08em;
-        text-transform: uppercase;
-        -webkit-box-shadow: none;
-        box-shadow: none; }
-      div.code-toolbar > .toolbar .toolbar-item:nth-of-type(2) {
-        display: none;
-        position: absolute;
-        top: 0.5rem;
-        right: 0.5rem;
-        padding: .2em;
-        -webkit-transition: opacity 0.08s ease;
-        transition: opacity 0.08s ease;
-        border-radius: 3px;
-        background: #fff;
-        font-size: .8em;
-        -webkit-box-shadow: 0 2px 0 0 #b9c4ca;
-        box-shadow: 0 2px 0 0 #b9c4ca;
-        opacity: .6; }
-        @media screen and (min-width: 1024px) {
-          div.code-toolbar > .toolbar .toolbar-item:nth-of-type(2) {
-            display: block; } }
-        div.code-toolbar > .toolbar .toolbar-item:nth-of-type(2):hover {
-          opacity: 1; }
-
-    .language-name {
-      display: none; }
-
+    pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+    Theme: StackOverflow Light
+    Description: Light theme as used on stackoverflow.com
+    Author: stackoverflow.com
+    Maintainer: @Hirse
+    Website: https://github.com/StackExchange/Stacks
+    License: MIT
+    Updated: 2021-05-15
+
+    Updated for @stackoverflow/stacks v0.64.0
+    Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+    Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+  */.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
   </style>
 </head>

package/docs/_macro.example-render.njk

@@ -1,5 +1,3 @@
-{% from "_macro.load-component-template.njk" import loadComponentTemplate %}
-
 {% from "components/accordion/_macro.accordion.njk"
 import componentAccordion %}
 {% from "components/accordion-history/_macro.accordion-history.njk"
@@ -126,8 +124,10 @@ import componentTree %}
         <div class="py-base">
           <h2 class="mb-sm font-bold">Parámetros del componente</h2>
           {% from "_macro.load-component-params.njk" import loadComponentParams %}
-          {% set componentYaml %}{{ loadComponentParams(exampleComponent) }}{% endset %}
-          <pre><code class="language-yaml text-sm">{{ componentYaml | e }}</code></pre>
+            <pre>
+              <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | highlight("yaml") | safe }}
+              </code>
+            </pre>
         </div>
       </div>
     {% endcall %}
@@ -136,7 +136,7 @@ import componentTree %}
     <div class="grid grid-cols-1 gap-x-xl mt-xl">
       <div class="pt-xl">
         <h3 id="example-title-{{ loop.index }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name | capitalize | urlencode }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
-        <p class="c-paragraph-base mb-0">{{ example.description }}</p>
+        <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
       </div>
       <div class="pt-base lg:pt-lg">
         <div class="p-base border border-neutral-base">
@@ -255,19 +255,44 @@ import componentTree %}
           {% set nunjucksContent %}
             {% if example.data.caller %}
               {% from "_macro.render-caller.njk" import renderCaller %}
-              {% set callerHtml %}{{ renderCaller(example.data.caller | safe) }}{% endset %}
-              <pre><code class="language-twig text-sm">{% raw %}{# {% endraw %}Borra el parámetro "caller" y la coma de la línea precedente y usa sólamente el código entre el "call" y el "endcall"{% raw %} #} {% endraw %}
+              {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
+              {% set callerNunjucks %}
                 {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-              {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} %}{% endraw %}
-{{ callerHtml | e }}{% raw %}{% {% endraw %}endcall{% raw %} %}{% endraw %}</code></pre>
+              {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
+              {{ componentButton({
+                "text": "Copiar código",
+                "classes": "c-button--sm c-button--transparent mb-sm",
+                "attributes": {
+                  "data-module": "c-button-copy"
+                }
+              }) }}
+              <pre><code class="language-js hljs text-sm">
+{{ callerNunjucks | highlight("js") | safe }}({{ example.data | filtercaller | dump(2) | highlight("js") | safe }}){% raw %} %}{% endraw %}
+{{ callerHtml | highlight("html") | safe }}
+{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
               {% else %}
-                <pre><code class="language-twig text-sm">{% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
-                {% raw %}{{ {% endraw %}component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}({{ example.data | dump(2) }}) {% raw %} }}{% endraw %}</code></pre>
+                {{ componentButton({
+                  "text": "Copiar código",
+                  "classes": "c-button--sm c-button--transparent mb-sm",
+                  "attributes": {
+                    "data-module": "c-button-copy"
+                  }
+                }) }}
+                <pre class="hljs"><code class="language-js hljs text-sm">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | highlight("twig") | safe -}}</code></pre>
               {% endif %}
           {% endset %}
           {% set htmlContent %}
-            {% set componentHtml %}{{ loadComponentTemplate(exampleComponent, example.data) }}{% endset %}
-            <pre><code class="language-markup text-sm">{{ componentHtml | e }}</code></pre>
+            {{ componentButton({
+              "text": "Copiar código",
+              "classes": "c-button--sm c-button--transparent mb-sm",
+              "attributes": {
+                "data-module": "c-button-copy"
+              }
+            }) }}
+            <pre class="hljs"><code class="language-html hljs text-sm">
+                {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
+              </code>
+            </pre>
           {% endset %}
         {% call componentDetails({
           "summary": {
@@ -283,13 +308,13 @@ import componentTree %}
                 {
                   "text": "Nunjucks macro",
                   "panel": {
-                    "html": nunjucksContent | trim | safe
+                    "html": nunjucksContent | trim
                   }
                 },
                 {
                   "text": "HTML",
                   "panel": {
-                    "html": htmlContent | trim | safe
+                    "html": htmlContent | trim
                   }
                 }
               ]

package/docs/_macro.render-caller.njk

@@ -1,3 +1,3 @@
 {% macro renderCaller(params) %}
-  {{ params | safe | indent(4) }}
-{% endmacro %}
+  {{ params | safe }}
+{% endmacro %}

package/docs/_macro.show-code-from-file.njk

@@ -0,0 +1,57 @@
+{% from "components/button/_macro.button.njk"
+import componentButton %}
+{% from "components/details/_macro.details.njk"
+import componentDetails %}
+{% from "components/tabs/_macro.tabs.njk"
+import componentTabs %}
+
+{% macro showCodeFromFile(filePath) %}
+  {% set nunjucksContent %}
+    {{ componentButton({
+      "html": 'Copiar código<span class="sr-only">Nunjucks del ejemplo: ' + filePath + '</span>',
+      "classes": "c-button--sm c-button--transparent mb-sm",
+      "attributes": {
+        "data-module": "c-button-copy"
+      }
+    }) }}
+    <pre class="hljs"><code class="language-js hljs text-sm">{{- getNunjucksCodeFromFile(filePath) | highlight("twig") | safe -}}</code></pre>
+  {% endset %}
+  {% set htmlContent %}
+    {{ componentButton({
+      "html": 'Copiar código<span class="sr-only">HTML del ejemplo: ' + filePath + '</span>',
+      "classes": "c-button--sm c-button--transparent mb-sm",
+      "attributes": {
+        "data-module": "c-button-copy"
+      }
+    }) }}
+    <pre class="hljs"><code class="language-html hljs text-sm">
+    {{- getHTMLCodeFromFile(filePath) | highlight("html") | safe -}}
+    </code></pre>
+  {% endset %}
+  {% call componentDetails({
+    "summary": {
+      "html": 'Mostrar código<span class="sr-only">del ejemplo: ' + filePath + '</span>',
+      "classes": "c-link text-sm"
+    }
+  })  %}
+      {{ componentTabs({
+        "tablistAriaLabel": "Tab example",
+        "idPrefix": "tab-" + filePath | replace("/", "-") | replace("_", "") | replace(".", "-"),
+        "classes": "c-tabs--scroll",
+        "items": [
+          {
+            "text": "Nunjucks macro",
+            "panel": {
+              "html": nunjucksContent | trim
+            }
+          },
+          {
+            "text": "HTML",
+            "panel": {
+              "html": htmlContent | trim
+            }
+          }
+        ]
+      })  }}
+  {% endcall %}
+{% endmacro %}

package/docs/_template.examples.njk

@@ -7,7 +7,7 @@
     {% endblock %}
     {% from "_macro.example-render.njk" import exampleRender %}
     {{ exampleRender({
-    	data: exampleData
+      data: exampleData
     }) }}
   </main>
 {% include "_global.foot.njk" %}

package/docs/estilos.html

@@ -1,17 +1,18 @@
 {% set title = "Estilos: colores, espaciado, retícula y tipografía. Documentación de desy-html. Gobierno de Aragón" %}
 {% extends "_template.default.njk" %}
+
 {% block contentBlock %}
-  <div class="pb-lg"></div>
-	<div class="c-h1">Estilos</div>
-  <div class="pb-lg"></div>
-  {% include "ds/_ds.section.color.njk" %}
-  <div class="pb-2xl"></div>
-  {% include "ds/_ds.section.espaciado.njk" %}
-  <div class="pb-2xl"></div>
-  {% include "ds/_ds.section.layout.njk" %}
-  <div class="pb-2xl"></div>
-  {% include "ds/_ds.section.textos.njk" %}
-  <div class="pb-2xl"></div>
-  {% include "ds/_ds.section.typography.njk" %}
-  <div class="pb-2xl"></div>
-{% endblock %}
+<div class="pb-lg"></div>
+<div class="c-h1">Estilos</div>
+<div class="pb-lg"></div>
+{% include "ds/_ds.section.color.njk" %}
+<div class="pb-2xl"></div>
+{% include "ds/_ds.section.espaciado.njk" %}
+<div class="pb-2xl"></div>
+{% include "ds/_ds.section.layout.njk" %}
+<div class="pb-2xl"></div>
+{% include "ds/_ds.section.textos.njk" %}
+<div class="pb-2xl"></div>
+{% include "ds/_ds.section.typography.njk" %}
+<div class="pb-2xl"></div>
+{% endblock %}

package/docs/index.html

@@ -38,6 +38,18 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.0.0</h3>
+  <ul class="text-sm">
+    <li>Improved indentation in examples.</li>
+    <li>Added functions to show source code in Nunjucks and HTML.</li>
+    <li>Removed Prism.</li>
+    <li>Fixed a bug in telephone link in footer.</li>
+    <li>Fixed an example of Searchbar with button breaking line.</li>
+  </ul>
+  <h3>v.7.4.0</h3>
+  <ul class="text-sm">
+    <li>Translated examples to español.</li>
+  </ul>
   <h3>v.7.3.1</h3>
   <ul class="text-sm">
     <li>Added source code links to Plantillas pages.</li>

package/gulpfile.js

@@ -19,14 +19,28 @@ const SOURCE_HTML_DIR = './docs/**.html';
 const SOURCE_NUNJUCKS_PATHS = ['./src/templates/','./docs/'];
 const SOURCE_NUNJUCKS_FILES = ['./src/templates/**/*','./docs/**/*'];
 const SOURCE_NUNJUCKS_DIR = './docs/**/*.html';
-const SOURCE_JS_DIR = './src/**/**.js';
+const SOURCE_JS_FILES = ['./src/**/**.js','!./src/js/globals/**', '!./src/js/filters/**'];
 const SOURCE_STYLESHEET = './src/css/styles.css';
 const SOURCE_STYLESHEET_DIR = './src/**/*.css';
+const SOURCE_NUNJUCKS_GLOBALS = require('./src/js/globals/index.js');
+const SOURCE_NUNJUCKS_FILTERS = require('./src/js/filters/index.js');
 const DESTINATION_HTML_DIR = './dist/';
 const DESTINATION_JS_DIR = './dist/';
 const DESTINATION_STYLESHEET = './dist/css/';
 
 
+const manageEnvironment = function(environment) {
+  // Custom globals
+  for (const key in SOURCE_NUNJUCKS_GLOBALS) {
+    environment.addGlobal(key, SOURCE_NUNJUCKS_GLOBALS[key])
+  }
+
+  // Custom filters
+  for (const key in SOURCE_NUNJUCKS_FILTERS) {
+    environment.addFilter(key, SOURCE_NUNJUCKS_FILTERS[key])
+  }
+}
+
 function bs(cb) {
   browserSync.init({
     server: {
@@ -40,7 +54,7 @@ function bs(cb) {
 
 
 function watchFiles(cb) {
-  gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, SOURCE_HTML_DIR, SOURCE_JS_DIR, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, css, reload));
+  gulp.watch([TAILWIND_CONFIG, SOURCE_STYLESHEET_DIR, SOURCE_HTML_DIR, ...SOURCE_JS_FILES, SOURCE_NUNJUCKS_DIR, ...SOURCE_NUNJUCKS_FILES], gulp.series(html, nunjucks, js, css, reload));
   cb();
 }
 
@@ -82,6 +96,7 @@ function nunjucks() {
           lstripBlocks: true,
           noCache: true
         },
+        manageEnv: manageEnvironment,
         path: SOURCE_NUNJUCKS_PATHS // String or Array
       }))
     .pipe(gulp.dest(DESTINATION_HTML_DIR));
@@ -89,7 +104,7 @@ function nunjucks() {
 
 
 function js() {
-  return gulp.src(SOURCE_JS_DIR)
+  return gulp.src(SOURCE_JS_FILES)
     .pipe(gulp.dest(DESTINATION_JS_DIR));
 }