exadel-inc · ala-n · Nov 7, 2023 · Oct 25, 2023 · Oct 30, 2023 · Nov 2, 2023
diff --git a/pages/src/navigation/related/related-links.less b/pages/src/navigation/related/related-links.less
@@ -25,5 +25,20 @@
     &:last-of-type {
       margin-right: 0;
     }
+
+    &-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4em;
+
+      svg {
+        width: 15px;
+        height: 15px;
+      }
+
+      path {
+        fill: black;
+      }
+    }
   }
 }
diff --git a/pages/views/_includes/navigation/source-link.njk b/pages/views/_includes/navigation/source-link.njk
@@ -0,0 +1,10 @@
+{% macro ghLink(url, title) %}
+  {% if url %}
+    <div class="related-card">
+      <h2 class="related-card-heading">{{ title }}</h2>
+      <a class="badge badge-link badge-md related-card-item-icon" href="{{site.github.srcUrl + url}}">
+        {% include 'static/assets/common/github.svg' %} GITHUB
+      </a>
+    </div>
+  {% endif %}
+{% endmacro %}
diff --git a/pages/views/_layouts/content.njk b/pages/views/_layouts/content.njk
@@ -22,8 +22,10 @@
       {% if aside %}
         <aside class="aside">
           {% from 'navigation/related-links.njk' import related with context %}
+          {% from 'navigation/source-link.njk' import ghLink with context %}
           {{ related(aside.components, 'components', 'Related Components') }}
           {{ related(aside.examples, 'examples', 'Related Examples') }}
+          {{ ghLink(aside.source, 'Source') }}
         </aside>
       {% endif %}
 

diff --git a/pages/views/components/esl-a11ty-group.njk b/pages/views/components/esl-a11ty-group.njk
@@ -5,6 +5,7 @@ seoTitle: Custom element that adds a group a11y behavior to targets
 name: ESL A11y Group
 tags: [components, beta]
 aside:
+  source: src/modules/esl-a11y-group
   examples:
     - tabs
 ---

diff --git a/pages/views/components/esl-alert.njk b/pages/views/components/esl-alert.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Alert - custom element to show notifications on the page
 name: ESL Alert
 tags: components
 aside:
+  source: src/modules/esl-alert
   examples:
     - notification
 ---

diff --git a/pages/views/components/esl-animate.njk b/pages/views/components/esl-animate.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Animate - service and component to animate element on viewport int
 name: ESL Animate
 tags: [components]
 aside:
+  source: src/modules/esl-animate
   examples:
     - animate
 ---

diff --git a/pages/views/components/esl-footnotes.njk b/pages/views/components/esl-footnotes.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Footnotes - custom elements for auto-collected footnotes in the pa
 name: ESL Footnotes
 tags: [components, beta]
 aside:
+  source: src/modules/esl-footnotes
   examples:
     - footnotes
 ---

diff --git a/pages/views/components/esl-image.njk b/pages/views/components/esl-image.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Image - custom image element with lazy loading, renditions, and di
 name: ESL Image
 tags: components
 aside:
+  source: src/modules/esl-image
   examples:
     - image
 ---

diff --git a/pages/views/components/esl-media.njk b/pages/views/components/esl-media.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Media - custom element to embed video and audio with a different s
 name: ESL Media
 tags: components
 aside:
+  source: src/modules/esl-media
   examples:
     - embedded-video
     - embedded-audio

diff --git a/pages/views/components/esl-panel-group.njk b/pages/views/components/esl-panel-group.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Panel Group - custom element to group ESLPanel-s to have Tabs or A
 name: ESL Panel Group
 tags: components
 aside:
+  source: src/modules/esl-panel-group
   components:
     - esl-panel
     - esl-toggleable

diff --git a/pages/views/components/esl-panel.njk b/pages/views/components/esl-panel.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Panel - custom element to collapse / expand content on the page (a
 name: ESL Panel
 tags: components
 aside:
+  source: src/modules/esl-panel
   components:
     - esl-panel-group
     - esl-toggleable

diff --git a/pages/views/components/esl-popup.njk b/pages/views/components/esl-popup.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Popup - custom element to show absolutely positioned popup area
 name: ESL Popup
 tags: [components, beta]
 aside:
+  source: src/modules/esl-popup
   components:
     - esl-toggleable
     - esl-trigger

diff --git a/pages/views/components/esl-scrollbar.njk b/pages/views/components/esl-scrollbar.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Scrollbar - custom scrollbar element fully customizable from CSS
 name: ESL Scrollbar
 tags: components
 aside:
+  source: src/modules/esl-scrollbar
   examples:
     - scrollbar
 ---

diff --git a/pages/views/components/esl-select-list.njk b/pages/views/components/esl-select-list.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Select List - web component for custom select list UI
 name: ESL Select List
 tags: [components, forms, beta]
 aside:
+  source: src/modules/esl-forms/esl-select-list
   components:
     - esl-select
   examples:

diff --git a/pages/views/components/esl-select.njk b/pages/views/components/esl-select.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Select - web component for custom select dropdown UI
 name: ESL Select
 tags: [components, forms, beta]
 aside:
+  source: src/modules/esl-forms/esl-select
   components:
     - esl-select-list
   examples:

diff --git a/pages/views/components/esl-share.njk b/pages/views/components/esl-share.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Share - custom element to trigger various share actions for page o
 name: ESL Share
 tags: [components, beta]
 aside:
+  source: src/modules/esl-share
   components:
     - esl-popup
     - esl-toggleable

diff --git a/pages/views/components/esl-tabs.njk b/pages/views/components/esl-tabs.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Tabs - custom element for tab controls
 name: ESL Tabs
 tags: components
 aside:
+  source: src/modules/esl-tab
   components:
     - esl-trigger
     - esl-panel

diff --git a/pages/views/components/esl-toggleable.njk b/pages/views/components/esl-toggleable.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Toggleable - custom element to have basic show/hide or other state
 name: ESL Toggleable
 tags: components
 aside:
+  source: src/modules/esl-toggleable
   components:
     - esl-trigger
     - esl-panel

diff --git a/pages/views/components/esl-trigger.njk b/pages/views/components/esl-trigger.njk
@@ -5,6 +5,7 @@ seoTitle: ESL Trigger - custom element to control "Toggleables"
 name: ESL Trigger
 tags: components
 aside:
+  source: src/modules/esl-trigger
   components:
     - esl-toggleable
     - esl-panel

diff --git a/pages/views/core/esl-base-element.njk b/pages/views/core/esl-base-element.njk
@@ -5,7 +5,8 @@ seoTitle: ESL Smart Library base custom element definition
 name: ESL Base Element
 tags: core
 order: -1
-
+aside:
+  source: src/modules/esl-base-element
 ---
 
 {% mdRender 'src/modules/esl-base-element/README.md', 'intro' %}
diff --git a/pages/views/core/esl-event-listener.njk b/pages/views/core/esl-event-listener.njk
@@ -5,6 +5,8 @@ seoTitle: Built-in ESL EventListeners
 name: ESL Event Listeners
 tags: [core, new]
 order: 2
+aside:
+  source: src/modules/esl-event-listener
 ---
 
 {% mdRender 'src/modules/esl-event-listener/README.md', 'intro' %}
diff --git a/pages/views/core/esl-media-query.njk b/pages/views/core/esl-media-query.njk
@@ -4,7 +4,8 @@ title: ESL Media Query
 seoTitle: Extended syntax of Media Queries that allows shortcuts, complex logical operators and custom conditions
 name: ESL Media Query
 tags: core
-
+aside:
+  source: src/modules/esl-media-query
 ---
 
 {% mdRender 'src/modules/esl-media-query/README.md', 'intro' %}
diff --git a/pages/views/core/esl-mixin-element.njk b/pages/views/core/esl-mixin-element.njk
@@ -5,7 +5,8 @@ seoTitle: ESL Smart Library base mixin definition
 name: ESL Mixin Element
 tags: [core]
 order: -1
-
+aside:
+  source: src/modules/esl-mixin-element
 ---
 
 {% mdRender 'src/modules/esl-mixin-element/README.md', 'intro' %}
diff --git a/pages/views/core/esl-traversing-query.njk b/pages/views/core/esl-traversing-query.njk
@@ -4,7 +4,8 @@ title: ESL Traversing Query
 seoTitle: Extended CSS selector syntax that allows easily traverse in DOM nodes
 name: ESL Traversing Query
 tags: core
-
+aside:
+  source: src/modules/esl-traversing-query
 ---
 
 {% mdRender 'src/modules/esl-traversing-query/README.md', 'intro' %}
diff --git a/pages/views/core/esl-utils.njk b/pages/views/core/esl-utils.njk
@@ -5,6 +5,8 @@ seoTitle: Universal JS, TS and Web API utilities set from Exadel Smart Library
 name: ESL Utils
 tags: core
 order: 3
+aside:
+  source: src/modules/esl-utils
 ---
 
 {% mdRender 'src/modules/esl-utils/README.md', 'intro' %}