jekyll-theme-lydde 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5acb4489dace934aa621833ce0dcb418f94b41acd90ea52a373264ce8f84fe4
-  data.tar.gz: 76395e9ca1649bf7662648abbf57c6c4752a34943e184e85c3ff45352ab76892
+  metadata.gz: 7a55e172d5a897d5688fa8f3bb94a935b0c03b8bde9dbde31c75457513343c87
+  data.tar.gz: 5099f6a9e8ff744d35167bf95d769f5cf33d3994e7d683eea3417175f06a1aa1
 SHA512:
-  metadata.gz: ad05588d31ddfd810bc2654a0bfaeb41454044eb12917245c1ba6ba74b6a3a27fecd7c91aff59660a61cab1dbe6068fd35716009cca03a533e95efd23a691d99
-  data.tar.gz: 8c330c085ed38bd44b7d57b964f810604697bcc6d73ee592980b3c4f5d61a24439c80943c956f3bf9c2244025a8b262ff7735f2954f1f3222ad5dcb6ced56968
+  metadata.gz: 6c72ab91bbbf9b206f81654b9c92d2d73a551d7a99bc461dffbc2c2da5a668192d6639e354fad677a144c75d300a776d71f54dc01bb234f45a322ca89a859ea8
+  data.tar.gz: 59bba63820abe7cf3f5b24544bc41f606c3fa682b55d4928d61ea270fa248f047bd881ad627cef91952543eab76d4f7f4f34728278b389c11e92d0628cb6c5ee

data/_config.yml

@@ -0,0 +1,5 @@
+settings:
+  - analytics: XXXXX
+  - demo: xxxx
+
+analytics: XXXXX

data/_includes/analytics.liquid

@@ -0,0 +1,12 @@
+{%- assign analytics = site.data.settings.analytics | default: site.analytics -%}
+{% if analytics %}
+<!-- Global Google Site Tag -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ analytics }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ analytics }}');
+</script>
+{% endif %}

data/_includes/breadcrumb.liquid

@@ -1,20 +1,39 @@
-<!-- Breadcrumb -->
+{%- comment -%} 
+  The breadcrumb component is used to show the current page's location in the site hierarchy. 
+  It is based on Bootstrap's breadcrumb component.
+  Each crumb expose the page title (if exist)
+{%- endcomment -%}
 <nav
   id="breadcrumb"
   aria-label="breadcrumb">
-  <ol class="breadcrumb">
-    {% assign crumbs = page.url | remove: '/index.html' | split: '/' %}
-    <li class="breadcrumb-item">
+  <ol>
+    <li>
       <a href="/">Home</a>
     </li>
-    {% for crumb in crumbs offset: 1 %}
-      {% if forloop.last %}
-        <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
-      {% else %}
-        <li class="breadcrumb-item">
-          <a href="{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace: '-', ' ' | remove: '.html' | capitalize }}</a>
+    {%- comment -%}
+      Hierarchy-Based Breadcrumbs (a.k.a., Location-Based Breadcrumbs)
+      The most common type of breadcrumbs that tell users where they are in the site structure and how to get back to the homepage.
+      For example: Home > Resources > Page
+    {%- endcomment -%}
+    {%- assign crumbs = page.url | remove: '/index.html' | split: '/' -%}
+    {%- for crumb in crumbs offset: 1 -%}
+      {%- unless forloop.last -%}
+        <li>
+          {%- capture crumb_path -%}
+            {%- assign crumb_limit = forloop.index | plus: 1 -%}
+            {%- for crumb in crumbs limit: crumb_limit -%}{{ crumb | append: '/' }}{%- endfor -%}
+          {%- endcapture -%}
+          <a href="{{ crumb_path }}">
+          {%- assign aim = site.pages | where:"url", crumb_path | first -%}
+          {{ aim.title }}
+          </a>
         </li>
-      {% endif %}
-    {% endfor %}
+        {%- endunless -%}
+    {%- endfor -%}
+    {% comment %}
+      Attribute-Based Breadcrumbs
+      This is commonly used on ecommerce sites to show what attributes the user has clicked.
+      For example: Home > Shoes > Hiking > Womens
+    {% endcomment %}
   </ol>
 </nav>

data/_includes/footer.liquid

@@ -1,60 +1,64 @@
 {%- assign company = authors.default.name | default: site.title | escape -%}
 {%- assign menus = site.settings.menus.footer | default: site.data.settings.menus.footer -%}
-{%- assign social = site.settings.social| default: site.data.settings.social -%}
+{%- assign social = site.settings.social | default: site.data.settings.social -%}
 
 {%- if page.footer != false -%}
-<footer id="footer" class="border-top text-muted">
+  <footer id="footer" class="border-top text-muted">
     <div class="container">
-        <!-- Footer Top -->
-        <div id="footer-top"></div>
+      <!-- Footer Top -->
+      <div id="footer-top"></div>
 
-        <!-- Footer Main-->
-        {% if social or menus %}
+      <!-- Footer Main-->
+      {% if social or menus %}
         <div id="footer-main" class="row pt-3 border-bottom">
-            {% if social %}
+          {% if social %}
             <!-- Social Media -->
             <div id="social" class="col-sm-12 col-lg-6">
-                <h2 class="h5">Let's Connect</h2>
-                <p>Follow us on your favorite platform</p>
-                <div>
-                    {% include social.html class="nav pb-3" %}
-                </div>
+              <h2 class="h5">Let's Connect</h2>
+              <p>Follow us on your favorite platform</p>
+              <div>
+                {% include social.liquid class = "nav pb-3" %}
+              </div>
             </div>
-            {% endif %}
-            {% if menus %}
-                <!-- Links -->
-                {%- for menu in menus -%}
-                <div id="{{ menu.title | slugify }}" class="col-lg-3 col-sm-6">
-                    <h2 class="h5">{{ menu.title }}</h2>
-                    <div>
-                        <ul class="nav flex-column pb-3">
-                            {% for item in menu.links %}
-                            <li class="nav-item mb-2">
-                                <a class="nav-link p-0 text-muted" href="{{ item.link | absolute_url }}" title="{{ menu.title }}: {{ item.title }}">{{ item.title }}</a>
-                            </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
+          {% endif %}
+          {% if menus %}
+            <!-- Links -->
+            {%- for menu in menus -%}
+              <div id="{{ menu.title | slugify }}" class="col-lg-3 col-sm-6">
+                <h2 class="h5">{{ menu.title }}</h2>
+                <div>
+                  <ul class="nav flex-column pb-3">
+                    {% for item in menu.links %}
+                      <li class="nav-item mb-2">
+                        <a
+                          class="nav-link p-0 text-muted"
+                          href="{{ item.link | absolute_url }}"
+                          title="{{ menu.title }}: {{ item.title }}">{{ item.title }}</a>
+                      </li>
+                    {% endfor %}
+                  </ul>
                 </div>
-                {%- endfor -%}
-            {%- endif -%}
+              </div>
+            {%- endfor -%}
+          {%- endif -%}
         </div>
-        {% endif %}
+      {% endif %}
 
-        <!-- Footer Bottom: Website information -->
-        <div id="footer-bottom">
-            <div class="row py-3">
-                <div id="copyright" class="col-sm-6">
-                    <p>&copy; Copyright {{ "now" | date: "%Y" }}{%- if company -%} - {{ company }}{%- endif -%}</p>
-                </div>
-                <div id="disclaimer" class="col-sm-6 text-center text-lg-end">
-                    <a href="https://lydde.com">
-                        <img src="{{ '/assets/lydde.png' | absolute_url }}"
-                             alt="{%- if company -%}{{ company }} is {%- endif -%}a subsidiary of LYDDE Group">
-                    </a>
-                </div>
-            </div>
+      <!-- Footer Bottom: Website information -->
+      <div id="footer-bottom">
+        <div class="row py-3">
+          <div id="copyright" class="col-sm-6">
+            <p>&copy; Copyright {{ "now" | date: "%Y" }}{% if company %}
+                - {{ company }}{%- endif -%}
+            </p>
+          </div>
+          <div id="disclaimer" class="col-sm-6 text-center text-lg-end">
+            <a href="https://lydde.com">
+              <img src="{{ '/assets/lydde.png' | absolute_url }}"alt="{%- if company -%}{{ company }} is {%- endif -%}a subsidiary of LYDDE Group">
+            </a>
+          </div>
         </div>
+      </div>
     </div>
-</footer>
+  </footer>
 {%- endif -%}

data/_includes/header.liquid

@@ -1,124 +1,153 @@
+{%- comment -%} 
+  The header is based on Bootstrap 5 Navbar component
+  The structure is composed of 3 parts:
+  - Header Top: Social Network
+  - Header Main: Site Menu
+  - Header Bottom: links
+{%- endcomment -%}
 {%- assign company = authors.default.name | site.title | default: 'Theme' | escape -%}
 {%- assign menus = site.settings.menus.header | default: site.data.settings.menus.header -%}
 {%- assign social = site.settings.social | default: site.data.settings.social -%}
 
 {%- assign logo = site.logo | default: "/assets/logo.png" -%}
 {%- for files in site.static_files -%}
-    {%- if files.path == logo -%}
-        {%- assign logoExist = true -%}
-        {%- break -%}
-    {%- endif -%}
+  {%- if files.path == logo -%}
+    {%- assign logoExist = true -%}
+    {%- break -%}
+  {%- endif -%}
 {%- endfor -%}
 
 {%- if page.header != false -%}
 <header id="header">
-    <div class="container">
-        
-        <!-- Header Top: Social Network -->
-        {%- if social -%}
-        <div id="header-top">
-            <div class="d-lg-none spacer">&nbsp;</div>
-            <div class="d-none d-lg-block">
-            <!-- Social Network -->
-            {% include social.html class="nav justify-content-end" %}
-            </div>
+  <div class="container">
+
+    <!-- Header Top: Social Network -->
+    {%- if social -%}
+      <div id="header-top">
+        <div class="d-lg-none spacer">&nbsp;</div>
+        <div class="d-none d-lg-block">
+          <!-- Social Network -->
+          {% include social.liquid class = "nav justify-content-end" %}
         </div>
-        {%- endif -%}
+      </div>
+    {%- endif -%}
 
-        <!-- Header Main: Site Menu -->
-        <nav id="header-main" class="navbar navbar-expand-lg">
-            <div class="container-fluid">
+    <!-- Header Main: Site Menu -->
+    <nav id="header-main" class="navbar navbar-expand-lg">
+      <div class="container-fluid">
+          <!-- Logo -->
+          <div id="logo">
+            <a
+              id="brand"
+              class="navbar-brand"
+              href="{{ '/' | absolute_url }}"
+              title="{{ company }}"
+              rel="author">
                 {%- if logoExist -%}
-                <!-- Logo -->
-                <div id="logo" class="navbar-brand">
-                    <a id="brand" href="{{ '/'' | absolute_url }}" title="{{ company }}" rel="author">
-                        <img src="{{ logo | absolute_url }}" alt="{{ company }}">
-                    </a>
-                </div>
+                <img src="{{ logo | absolute_url }}" alt="{{ company }}" />
                 {%- else -%}
-                <!-- Brand -->
-                <a id="brand" href="{{ '/' | absolute_url }}" title="{{ company }}" rel="author" class="navbar-brand">{{ company }}</a>
+                {{ company }}
                 {%- endif -%}
+            </a>
+          </div>
 
-                <!-- Responsive Toggle Button -->
-                <button 
-                    class="navbar-toggler" 
-                    type="button" 
-                    data-bs-toggle="collapse" 
-                    data-bs-target="#navbarContent" 
-                    aria-controls="navbarContent" 
-                    aria-expanded="false" 
-                    aria-label="Toggle navigation menu">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
+        <!-- Responsive Toggle Button -->
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarContent"
+          aria-controls="navbarContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation menu">
+          <span class="navbar-toggler-icon"></span>
+        </button>
 
-                <!-- Navigation -->
-                <div id="navbarContent" class="collapse navbar-collapse p-2 pt-5 p-lg-0">
-                {%- if menus -%}
-                    {% for menu in menus %}
-                    <!-- Site -->
-                    <div id="{{ menu.title | slugify }}" {% if menu.position == 'left' %}class="me-auto"{% endif %}>
-                        <ul class="navbar-nav nav-pills">
-                            {% for item in menu.links %}
-                            <li class="nav-item">
-                                <a class="nav-link px-3{%- if page.url == item.link -%} active{%- endif -%}" 
-                                {%- if page.url == item.link -%}aria-current="page"{%- endif -%} 
-                                href="{{ item.link | absolute_url }}" 
-                                title="{{ item.title }}">
-                                {%- if item.icon -%}<i class="{{ item.icon }}"></i>{%- endif -%}{{ item.title | escape }}
-                                </a>
-                            </li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                    <hr />
-                    {% endfor %}
-                {%- else -%}
-                    <!-- Default Navigation -->
-                    <ul class="navbar-nav col-lg-6 justify-content-lg-center">
-                    {%- assign paths = site.pages | map: "path" -%}
-                    {%- for path in paths -%}
-                        {%- assign item = site.pages | where: "path", path | first -%}
-                        {%- if item.title and item.path contains "resources/pages" -%}
-                            {%- assign resources = true -%}
-                            {%- break -%}
+        <!-- Navigation -->
+        <div id="navbarContent" class="collapse navbar-collapse p-2 pt-5 p-lg-0">
+          {% comment %}
+            Display the menu from the configuration file (site or data) if it exists
+            Overwise, display the default menu based on the page hierarchy
+          {% endcomment %}
+          {%- if menus -%}
+            {% for menu in menus %}
+              <!-- Site -->
+              <div id="{{ menu.title | slugify }}" {% if menu.position == 'left' %}class="me-auto"{% endif %}>
+                <ul class="navbar-nav nav-pills">
+                  {% for item in menu.links %}
+                    <li class="nav-item">
+                      <a class="nav-link px-3{%- if page.url == item.link -%} active{%- endif -%}" {%- if page.url == item.link -%}aria-current="page"{%- endif -%}href="{{ item.link | absolute_url }}"title="{{ item.title }}">
+                        {%- if item.icon -%}
+                          <i class="{{ item.icon }}"></i>
                         {%- endif -%}
-                    {%- endfor -%}
+                        {{ item.title | escape }}
+                      </a>
+                    </li>
+                  {% endfor %}
+                </ul>
+              </div>
+              <hr/>
+            {% endfor %}
+          {%- else -%}
+            <!-- Default Navigation -->
+            <ul class="navbar-nav justify-content-lg-center">
+              {% comment %}
+                Extract all pages and sort them by path
+              {% endcomment %}
+              {%- assign paths = site.pages | map: "path" | sort -%}
+              {%- for path in paths -%}
+                {%- assign item = site.pages | where: "path", path | first -%}
+                {%- if item.title and item.path contains "resources/pages" -%}
+                  {%- assign resources = true -%}
+                  {%- break -%}
+                {%- endif -%}
+              {%- endfor -%}
 
-                    {%- for path in paths -%}
-                    {%- assign item = site.pages | where: "path", path | first -%}
-                    {%- if resources == true -%}
-                        {%- if item.title and item.path contains "resources/pages" -%}
-                        <li>
-                            <a class="nav-link" href="{{ item.url | absolute_url }}" title="{{ item.title }}">{{item.title}}</a>
-                        </li>
-                        {%- endif -%}
-                    {%- else -%}
-                        {%- unless item.path contains "resources" -%}
-                        {%- if item.title and item.layout == "page" -%}
-                        <li>
-                            <a class="nav-link" href="{{ item.url | absolute_url }}" title="{{ item.title }}">{{item.title}}</a>
-                        </li>
-                        {%- endif -%}
-                        {%- endunless -%}
+              {%- for path in paths -%}
+                {%- assign item = site.pages | where: "path", path | first -%}
+                {%- if resources == true -%}
+                  {%- if item.title and item.path contains "resources/pages" -%}
+                    <li>
+                      <a
+                        class="nav-link"
+                        href="{{ item.url | absolute_url }}"
+                        title="{{ item.title }}">{{ item.title }}</a>
+                    </li>
+                  {%- endif -%}
+                {%- else -%}
+                {% comment %}
+                  Create a hiearchy of pages but exclude resources 
+                {% endcomment %}
+
+                  {%- unless item.path contains "resources" -%}
+                    {%- if item.title and item.layout == "page" -%}
+                      <li>
+                        <a
+                          class="nav-link"
+                          href="{{ item.url | absolute_url }}"
+                          title="{{ item.title }}">{{ item.title }}</a>
+                      </li>
+                    
                     {%- endif -%}
-                    {%- endfor -%}
-                    </ul>
-                {%- endif -%}
-                {%- if social -%}
-                    <hr />
-                    <!-- Social Network -->
-                    <div class="d-lg-none border-top">
-                        <h4>Follow us</h4>
-                        {% include social.html class="nav justify-content-center" %}
-                    </div>
+                  {%- endunless -%}
                 {%- endif -%}
-                </div>
+              {%- endfor -%}
+            </ul>
+          {%- endif -%}
+          {%- if social -%}
+            <hr/>
+            <!-- Social Network -->
+            <div class="d-lg-none border-top">
+              <h4>Follow us</h4>
+              {% include social.liquid class = "nav justify-content-center" %}
             </div>
-        </nav>
-        
-        <!-- Header Bottom -->
-        <div id="header-bottom"></div>
-    </div>
+          {%- endif -%}
+        </div>
+      </div>
+    </nav>
+
+    <!-- Header Bottom -->
+    <div id="header-bottom"></div>
+  </div>
 </header>
 {%- endif -%}

data/_includes/hero.liquid

@@ -0,0 +1,39 @@
+{%- comment -%} 
+    The Hero section is used to display a title, a description and a call to action.
+    It can also display a background image or a video.
+
+    TODO : include a carousel
+{%- endcomment -%}
+{%-  unless page.hero == false -%}
+<section id="hero" {% if layout.splash or page.splash %}class="vh-100"{% endif %}>
+    <!-- Background -->
+{%- if page.trailer -%}
+    <video autoplay muted loop poster="{{ page.image | absolute_url }}" class="background">
+        <source src="{{ page.trailer | absolute_url }}" type="video/mp4">
+    </video>
+{%- elsif page.image -%}
+    <picture>
+        <source srcset="{{ page.image | absolute_url }}">
+        <img src="{{ page.image | absolute_url }}" alt="{{ page.title | escape }}" class="background">
+    </picture>
+{%- else -%}
+    <span class="background">&nbsp;</span>
+{%- endif -%}
+    <!-- Content -->
+    <div id="hero-content">
+        <div>
+            <div class="col">
+                <h1 class="display-1">{{ page.title | default: site.title | default: "Welcome to Symphony theme" | escape }}</h1>
+                <!-- Breadcrumbs -->
+                {%- include breadcrumb.liquid -%}
+                <p class="lead">{{ page.excerpt | default: site.description | default: "Review our documentation to fix issue" | strip_html | escape }}</p>
+            </div>
+            {%- if page.action -%}
+            <div class="col-4 text-center">
+                <a class="btn btn-primary btn-lg" href="{{ page.action.link }}" role="button" title="{{ page.action.title }}">{{ page.action.title }}</a>
+            </div>
+            {%- endif -%}
+        </div>
+    </div>
+</section>
+{%- endunless -%}

data/_includes/scripts.liquid

@@ -3,8 +3,8 @@
         integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
         crossorigin="anonymous" 
         id="popper-script"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" 
-        integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" 
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" 
+        integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" 
         crossorigin="anonymous" 
         id="bootstrap-script"></script>