From 98d53f6ce329dd1df31b0946c34faf1b7aefe1cb Mon Sep 17 00:00:00 2001
From: Adam Samalik <asamalik@redhat.com>
Date: Apr 18 2019 09:18:10 +0000
Subject: [PATCH 1/3] translations support


---

diff --git a/preview-site-src/index.html b/preview-site-src/index.html
index 6260e53..8729385 100644
--- a/preview-site-src/index.html
+++ b/preview-site-src/index.html
@@ -1 +1,67 @@
-<!-- all code for this is in the template itself, so just an empty page here is required to make the page show up-->
\ No newline at end of file
+<div class="homepage-page">
+    <div class="homepage-section homepage-section-user-docs">
+        <h2>User Documentation</h2>
+        <div class="homepage-section-container">
+            <a href="../fedora/f28/" class="homepage-link homepage-link-primary">
+                <h3>Fedora&nbsp;28</h3>
+                <p>Documentation covering the most recent release, Fedora&nbsp;28.</p>
+            </a>
+            <a href="../fedora/f27/" class="homepage-link homepage-link-primary">
+                <h3>Fedora&nbsp;27</h3>
+                <p>Documentation covering the Fedora&nbsp;27 release.</p>
+            </a>
+            <a href="../quick-docs/" class="homepage-link homepage-link-primary">
+                <h3>Quick Docs</h3>
+                <p>How tos and tutorials for using and configuring Fedora.</p>
+            </a>
+        </div>
+        <div class="homepage-section-container">
+            <a href="../fedora/rawhide/" class="homepage-link homepage-link-secondary">
+                <h3>Fedora&nbsp;Rawhide</h3>
+                <p>Draft documentation targeting future Fedora releases.</p>
+            </a>
+            <a href="" class="homepage-link homepage-link-secondary">
+                <h3>Older releases</h3>
+                <p>Older Fedora user documentation.</p>
+            </a>
+        </div>
+    </div>
+    <div class="homepage-section homepage-section-project-docs">
+        <h2>Fedora Project &amp; Community</h2>
+        <div class="homepage-section-container">
+            <a href="../project/" class="homepage-link homepage-link-primary">
+                <h3>Fedora Project</h3>
+                <p>Learn how the Fedora Project works.</p>
+            </a>
+            <a href="../council/" class="homepage-link homepage-link-primary">
+                <h3>Fedora Council</h3>
+                <p>Learn about the Fedora Project governance.</p>
+            </a>
+        </div>
+        <div class="homepage-section-container">
+            <a href="../fesco/" class="homepage-link homepage-link-primary">
+                <h3>Engineering (FESCo)</h3>
+                <p>Learn about FESCo and Engineering subprojects, SIGs, Work Groups, and teams.</p>
+            </a>
+            <a href="../mindshare/" class="homepage-link homepage-link-primary">
+                <h3>Mindshare</h3>
+                <p>Learn about Mindshare and its subprojects and teams.</p>
+            </a>
+        </div>
+        <div class="homepage-section-container">
+            <a href="https://budget.fedoraproject.org/" class="homepage-link homepage-link-secondary">
+                <h3><i class="fa fa-external-link-alt"></i> Fedora Budget</h3>
+                <p>Information regarding money allocated and spent by the Fedora Project.</p>
+            </a>
+            <a href="https://fedoraproject.org/wiki/Outreachy/2017" class="homepage-link homepage-link-secondary">
+                <h3><i class="fa fa-external-link-alt"></i> Fedora's Outreachy Docs</h3>
+                <p>Outreachy is an internship program for people from group underrepresented in free and open source software.</p>
+            </a>
+            <a href="../mentored-projects/gsoc/2018/" class="homepage-link homepage-link-secondary">
+                <h3>Fedora's Google Summer of Code Docs</h3>
+                <p>Information about Fedoraâs participation in Google Summer of Code (GSoC).</p>
+            </a>
+        </div>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/src/css/homepage.css b/src/css/homepage.css
index e31700c..ac3d763 100644
--- a/src/css/homepage.css
+++ b/src/css/homepage.css
@@ -10,6 +10,7 @@ div.homepage-section h3 {
 
 div.homepage-section a.homepage-link-primary h3 {
     font-size: 28px;
+    font-weight: 400;
 }
 
 div.homepage-section a.homepage-link-secondary p {
diff --git a/src/css/page-languages.css b/src/css/page-languages.css
new file mode 100644
index 0000000..ccdc328
--- /dev/null
+++ b/src/css/page-languages.css
@@ -0,0 +1,64 @@
+.page-languages {
+  display: none;
+  margin-right: 0.7rem;
+  position: relative;
+}
+
+@media (min-width: 1024px) {
+  .page-languages {
+    display: block;
+  }
+}
+
+.page-languages.is-active {
+  color: #333;
+}
+
+.page-languages .languages-menu-toggle {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  background: url(../img/chevron.svg) no-repeat;
+  background-position: right 0.5rem top 50%;
+  background-size: auto 0.75em;
+  border: 1px solid transparent;
+  outline: none;
+  cursor: pointer;
+  padding: 0.35rem 1.5rem 0.35rem 0.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.page-languages .languages-menu-toggle::-moz-focus-inner {
+  border: none;
+}
+
+.page-languages .languages-menu {
+  border: 1px solid transparent;
+  background-color: #f0f0f0;
+  padding: 1.3rem 0.5rem 0.35rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.page-languages:not(.is-active) .languages-menu {
+  display: none;
+}
+
+.page-languages .language {
+  display: block;
+  line-height: 1;
+  padding-top: 0.6em;
+}
+
+.page-languages .language.is-current {
+  display: none;
+}
+
+.page-languages .language.is-missing {
+  color: #8e8e8e;
+  font-style: italic;
+  text-decoration: none;
+}
diff --git a/src/css/site.css b/src/css/site.css
index 8aef7c5..cbf0e8a 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -8,6 +8,7 @@
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
+@import "page-languages.css";
 @import "doc.css";
 @import "header.css";
 @import "footer.css";
diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index 3272cf9..7d8a522 100644
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -1,146 +1,149 @@
 ;(function () {
   'use strict'
 
-  var navContainer = document.querySelector('.navigation-container')
-  var navToggle = document.querySelector('.navigation-toggle')
-
-  navToggle.addEventListener('click', toggleNavigation)
-  // don't let click events propagate outside of navigation container
-  navContainer.addEventListener('click', concealEvent)
-
-  var menuPanel = navContainer.querySelector('[data-panel=menu]')
-  if (!menuPanel) return
-
-  var navState = getNavState()
-  var menuState = getMenuState(navState, navContainer.dataset.component, navContainer.dataset.version)
-
-  navContainer.querySelector('.context').addEventListener('click', function () {
-    var currentPanel = navContainer.querySelector('.is-active[data-panel]')
-    var activatePanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu'
-    currentPanel.classList.toggle('is-active')
-    navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
-  })
-
-  find('.nav-toggle', menuPanel).forEach(function (btn) {
-    var li = btn.parentElement
-    btn.addEventListener('click', function () {
-      li.classList.toggle('is-active')
-      menuState.expandedItems = getExpandedItems()
-      saveNavState()
+  try {
+
+    var navContainer = document.querySelector('.navigation-container')
+    var navToggle = document.querySelector('.navigation-toggle')
+
+    navToggle.addEventListener('click', toggleNavigation)
+    // don't let click events propagate outside of navigation container
+    navContainer.addEventListener('click', concealEvent)
+
+    var menuPanel = navContainer.querySelector('[data-panel=menu]')
+    if (!menuPanel) return
+
+    var navState = getNavState()
+    var menuState = getMenuState(navState, navContainer.dataset.component, navContainer.dataset.version)
+
+    navContainer.querySelector('.context').addEventListener('click', function () {
+      var currentPanel = navContainer.querySelector('.is-active[data-panel]')
+      var activatePanel = currentPanel.dataset.panel === 'menu' ? 'explore' : 'menu'
+      currentPanel.classList.toggle('is-active')
+      navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active')
     })
-  })
-
-  find('.nav-item', menuPanel).forEach(function (item, idx) {
-    item.setAttribute('data-id', 'menu-' + item.dataset.depth + '-' + idx)
-  })
-
-  var expandedItems = menuState.expandedItems || (menuState.expandedItems = [])
-
-  if (expandedItems.length) {
-    find(
-      expandedItems
-        .map(function (itemId) {
-          return '.nav-item[data-id="' + itemId + '"]'
-        })
-        .join(','),
-      menuPanel
-    ).forEach(function (item) {
-      item.classList.add('is-active')
+
+    find('.nav-toggle', menuPanel).forEach(function (btn) {
+      var li = btn.parentElement
+      btn.addEventListener('click', function () {
+        li.classList.toggle('is-active')
+        menuState.expandedItems = getExpandedItems()
+        saveNavState()
+      })
     })
-  }
 
-  var currentPageItem = menuPanel.querySelector('.is-current-page')
-  if (currentPageItem) {
-    activateCurrentPath(currentPageItem).forEach(function (itemId) {
-      if (expandedItems.indexOf(itemId) < 0) expandedItems.push(itemId)
+    find('.nav-item', menuPanel).forEach(function (item, idx) {
+      item.setAttribute('data-id', 'menu-' + item.dataset.depth + '-' + idx)
     })
-  }
 
-  saveNavState()
+    var expandedItems = menuState.expandedItems || (menuState.expandedItems = [])
+
+    if (expandedItems.length) {
+      find(
+        expandedItems
+          .map(function (itemId) {
+            return '.nav-item[data-id="' + itemId + '"]'
+          })
+          .join(','),
+        menuPanel
+      ).forEach(function (item) {
+        item.classList.add('is-active')
+      })
+    }
 
-  scrollItemIntoView(menuState.scroll || 0, menuPanel, currentPageItem && currentPageItem.querySelector('.nav-link'))
+    var currentPageItem = menuPanel.querySelector('.is-current-page')
+    if (currentPageItem) {
+      activateCurrentPath(currentPageItem).forEach(function (itemId) {
+        if (expandedItems.indexOf(itemId) < 0) expandedItems.push(itemId)
+      })
+    }
 
-  menuPanel.addEventListener('scroll', function () {
-    menuState.scroll = Math.round(menuPanel.scrollTop)
     saveNavState()
-  })
-
-  function activateCurrentPath (navItem) {
-    var ids = [navItem.dataset.id]
-    var ancestorClasses
-    var ancestor = navItem.parentNode
-    while (!(ancestorClasses = ancestor.classList).contains('nav-menu')) {
-      if (ancestor.tagName === 'LI' && ancestorClasses.contains('nav-item')) {
-        ancestorClasses.add('is-active', 'is-current-path')
-        ids.push(ancestor.dataset.id)
+
+    scrollItemIntoView(menuState.scroll || 0, menuPanel, currentPageItem && currentPageItem.querySelector('.nav-link'))
+
+    menuPanel.addEventListener('scroll', function () {
+      menuState.scroll = Math.round(menuPanel.scrollTop)
+      saveNavState()
+    })
+
+    function activateCurrentPath (navItem) {
+      var ids = [navItem.dataset.id]
+      var ancestorClasses
+      var ancestor = navItem.parentNode
+      while (!(ancestorClasses = ancestor.classList).contains('nav-menu')) {
+        if (ancestor.tagName === 'LI' && ancestorClasses.contains('nav-item')) {
+          ancestorClasses.add('is-active', 'is-current-path')
+          ids.push(ancestor.dataset.id)
+        }
+        ancestor = ancestor.parentNode
       }
-      ancestor = ancestor.parentNode
+      navItem.classList.add('is-active')
+      return ids
     }
-    navItem.classList.add('is-active')
-    return ids
-  }
-
-  function toggleNavigation (e) {
-    if (navToggle.classList.contains('is-active')) return closeNavigation(e)
-    document.documentElement.classList.add('is-clipped--nav')
-    navToggle.classList.add('is-active')
-    navContainer.classList.add('is-active')
-    window.addEventListener('click', closeNavigation)
-    // don't let this event get picked up by window click listener
-    concealEvent(e)
-  }
-
-  function closeNavigation (e) {
-    if (e.which === 3 || e.button === 2) return
-    document.documentElement.classList.remove('is-clipped--nav')
-    navToggle.classList.remove('is-active')
-    navContainer.classList.remove('is-active')
-    window.removeEventListener('click', closeNavigation)
-    // don't let this event get picked up by window click listener
-    concealEvent(e)
-  }
-
-  function concealEvent (e) {
-    e.stopPropagation()
-  }
-
-  function getExpandedItems () {
-    return find('.is-active', menuPanel).map(function (item) {
-      return item.dataset.id
-    })
-  }
-
-  function getNavState () {
-    var data = window.sessionStorage.getItem('nav-state')
-    return data && (data = JSON.parse(data)).__version__ === '1' ? data : { __version__: '1' }
-  }
-
-  function getMenuState (navState, component, version) {
-    var key = version + '@' + component
-    return navState[key] || (navState[key] = {})
-  }
-
-  function saveNavState () {
-    window.sessionStorage.setItem('nav-state', JSON.stringify(navState))
-  }
-
-  function scrollItemIntoView (scrollPosition, parent, el) {
-    if (!el) return (parent.scrollTop = scrollPosition)
-
-    var margin = 10
-    var overTheTop = el.offsetTop - scrollPosition < 0
-    var belowTheBottom = el.offsetTop - scrollPosition + el.offsetHeight > parent.offsetHeight
-
-    if (overTheTop) {
-      parent.scrollTop = el.offsetTop - margin
-    } else if (belowTheBottom) {
-      parent.scrollTop = el.offsetTop - (parent.offsetHeight - el.offsetHeight) + margin
-    } else {
-      parent.scrollTop = scrollPosition
+
+    function toggleNavigation (e) {
+      if (navToggle.classList.contains('is-active')) return closeNavigation(e)
+      document.documentElement.classList.add('is-clipped--nav')
+      navToggle.classList.add('is-active')
+      navContainer.classList.add('is-active')
+      window.addEventListener('click', closeNavigation)
+      // don't let this event get picked up by window click listener
+      concealEvent(e)
+    }
+
+    function closeNavigation (e) {
+      if (e.which === 3 || e.button === 2) return
+      document.documentElement.classList.remove('is-clipped--nav')
+      navToggle.classList.remove('is-active')
+      navContainer.classList.remove('is-active')
+      window.removeEventListener('click', closeNavigation)
+      // don't let this event get picked up by window click listener
+      concealEvent(e)
+    }
+
+    function concealEvent (e) {
+      e.stopPropagation()
+    }
+
+    function getExpandedItems () {
+      return find('.is-active', menuPanel).map(function (item) {
+        return item.dataset.id
+      })
+    }
+
+    function getNavState () {
+      var data = window.sessionStorage.getItem('nav-state')
+      return data && (data = JSON.parse(data)).__version__ === '1' ? data : { __version__: '1' }
+    }
+
+    function getMenuState (navState, component, version) {
+      var key = version + '@' + component
+      return navState[key] || (navState[key] = {})
     }
-  }
 
-  function find (selector, from) {
-    return [].slice.call((from || document).querySelectorAll(selector))
-  }
+    function saveNavState () {
+      window.sessionStorage.setItem('nav-state', JSON.stringify(navState))
+    }
+
+    function scrollItemIntoView (scrollPosition, parent, el) {
+      if (!el) return (parent.scrollTop = scrollPosition)
+
+      var margin = 10
+      var overTheTop = el.offsetTop - scrollPosition < 0
+      var belowTheBottom = el.offsetTop - scrollPosition + el.offsetHeight > parent.offsetHeight
+
+      if (overTheTop) {
+        parent.scrollTop = el.offsetTop - margin
+      } else if (belowTheBottom) {
+        parent.scrollTop = el.offsetTop - (parent.offsetHeight - el.offsetHeight) + margin
+      } else {
+        parent.scrollTop = scrollPosition
+      }
+    }
+
+    function find (selector, from) {
+      return [].slice.call((from || document).querySelectorAll(selector))
+    }
+  } catch(err) {}
 })()
diff --git a/src/js/03-page-languages.js b/src/js/03-page-languages.js
new file mode 100644
index 0000000..d1ca10b
--- /dev/null
+++ b/src/js/03-page-languages.js
@@ -0,0 +1,18 @@
+;(function () {
+  'use strict'
+
+  var toggle = document.querySelector('.page-languages .languages-menu-toggle')
+  if (!toggle) return
+
+  var selector = document.querySelector('.page-languages')
+
+  toggle.addEventListener('click', function (e) {
+    selector.classList.toggle('is-active')
+    // don't let this event get smothered
+    e.stopPropagation()
+  })
+
+  window.addEventListener('click', function () {
+    selector.classList.remove('is-active')
+  })
+})()
diff --git a/src/js/03-page-versions.js b/src/js/03-page-versions.js
deleted file mode 100644
index 672bda1..0000000
--- a/src/js/03-page-versions.js
+++ /dev/null
@@ -1,18 +0,0 @@
-;(function () {
-  'use strict'
-
-  var toggle = document.querySelector('.page-versions .versions-menu-toggle')
-  if (!toggle) return
-
-  var selector = document.querySelector('.page-versions')
-
-  toggle.addEventListener('click', function (e) {
-    selector.classList.toggle('is-active')
-    // don't let this event get smothered
-    e.stopPropagation()
-  })
-
-  window.addEventListener('click', function () {
-    selector.classList.remove('is-active')
-  })
-})()
diff --git a/src/js/05-page-versions.js b/src/js/05-page-versions.js
new file mode 100644
index 0000000..672bda1
--- /dev/null
+++ b/src/js/05-page-versions.js
@@ -0,0 +1,18 @@
+;(function () {
+  'use strict'
+
+  var toggle = document.querySelector('.page-versions .versions-menu-toggle')
+  if (!toggle) return
+
+  var selector = document.querySelector('.page-versions')
+
+  toggle.addEventListener('click', function (e) {
+    selector.classList.toggle('is-active')
+    // don't let this event get smothered
+    e.stopPropagation()
+  })
+
+  window.addEventListener('click', function () {
+    selector.classList.remove('is-active')
+  })
+})()
diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
index aa6a493..fc0dfb4 100644
--- a/src/layouts/default.hbs
+++ b/src/layouts/default.hbs
@@ -1,112 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{{detag (or page.title 'Untitled')}}}{{#if site.title}} :: {{site.title}}{{/if}}</title>
-  {{#if page.canonicalUrl}}
-  <link rel="canonical" href="{{page.canonicalUrl}}">
-  {{/if}}
-  {{#if page.description}}
-  <meta name="description" content="{{page.description}}">
-  {{/if}}
-  {{#if page.keywords}}
-  <meta name="keywords" content="{{page.keywords}}">
-  {{/if}}
-  {{#if (or antoraVersion site.antoraVersion)}}
-  <meta name="generator" content="Antora {{or antoraVersion site.antoraVersion}}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{{detag (or page.title 'Untitled')}}}{{#if site.title}} :: {{site.title}}{{/if}}</title>
+    {{#if page.canonicalUrl}}
+    <link rel="canonical" href="{{page.canonicalUrl}}">
+    {{/if}}
+    {{#if page.description}}
+    <meta name="description" content="{{page.description}}">
+    {{/if}}
+    {{#if page.keywords}}
+    <meta name="keywords" content="{{page.keywords}}">
+    {{/if}}
+    {{#if (or antoraVersion site.antoraVersion)}}
+    <meta name="generator" content="Antora {{or antoraVersion site.antoraVersion}}">
+    {{/if}}
+    <link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
+{{> head}}
+  </head>
+  <body class="article">
+{{> header}}
+<div class="toolbar" role="navigation" style="background-color:white">
+  <button class="navigation-toggle"></button>
+<nav class="crumbs" role="navigation" aria-label="breadcrumbs"></nav>
+{{> page-languages}}
+{{> page-versions}}
+  {{#if page.editUrl}}
+  <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
   {{/if}}
-  <link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
-  {{> head}}
-</head>
-
-<body class="article">
-  {{> header}}
-  <div class="main-wrapper">
-
-    <main class="main" role="main">
-
-
-      <article class="doc">
-        <form id="searchForm">
-          Search:<br>
-          <input type="text" name="search">
-          <input type="submit" value="Search">
-        </form>
-
-
-        <!--<div id="total"></div><br>-->
-        <div id="results">
-        </div>
-      </article>
-
-
-
-
-
-
-
-
-
-    </main>
-  </div>
-
-  {{> footer}}
-
-  <script>
-
-    var form = document.getElementById("searchForm");
-
-    function outputResults(response) {
-      var output = '';
-      for (var i = 0; i < response.hits.hits.length; i++) {
-
-        output += `
-          <div class="search-result">
-            <h3><a href="${response.hits.hits[i]._source.url}">${response.hits.hits[i]._source.title}</a></h3>
-            <p style="color: #666">Docs / ${response.hits.hits[i]._source.component.name}</p>
-            <p>${response.hits.hits[i].highlight["body.search"][0]}</p>
-            <hr>
-          </div>
-        `;
-      }
-      return output;
-    }
-
-    form.onsubmit = function (e) {
-      e.preventDefault();
-
-      var searchHost = 'http://localhost:9200/_search';
+</div>
 
-      var searchPhrase = form[0].value;
 
-      var query = {
-        query: {
-          multi_match: {
-            query: searchPhrase,
-            fields: ["title.search^2", "body.search"]
-          }
-        },
-        highlight: {
-          fields: {
-            "body.search": {}
-          }
-        }
-      }
+<div class="main-wrapper">
+  <main class="main" role="main">
 
+<article class="doc" style="margin: 0; max-width: 100%;">
+{{#if (eq page.layout '404')}}
+<div class="paragraph">
+<p>The page you're looking for does not exist. It may have been moved.</p>
+</div>
+<div class="paragraph">
+<p>If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
+If you typed the URL of this page manually, please double check that you entered the address correctly.</p>
+</div>
+{{else}}
 
-      var xmlHttp = new XMLHttpRequest();
-      xmlHttp.open('POST', searchHost, false);
-      xmlHttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
-      xmlHttp.send(JSON.stringify(query));
-      var response = JSON.parse(xmlHttp.responseText);
+{{{page.contents}}}
+{{/if}}
+</article>
+  </main>
+</div>
 
-      var output = outputResults(response);
-      //document.getElementById('total').innerHTML = 'found ' + response.hits.hits.length + ' results';
-      document.getElementById('results').innerHTML = output;
-    };
-  </script>
-</body>
 
-</html>
\ No newline at end of file
+{{> footer}}
+  </body>
+</html>
diff --git a/src/layouts/homepage.hbs b/src/layouts/homepage.hbs
index 9816cca..fc0dfb4 100644
--- a/src/layouts/homepage.hbs
+++ b/src/layouts/homepage.hbs
@@ -21,6 +21,15 @@
   </head>
   <body class="article">
 {{> header}}
+<div class="toolbar" role="navigation" style="background-color:white">
+  <button class="navigation-toggle"></button>
+<nav class="crumbs" role="navigation" aria-label="breadcrumbs"></nav>
+{{> page-languages}}
+{{> page-versions}}
+  {{#if page.editUrl}}
+  <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
+  {{/if}}
+</div>
 
 
 <div class="main-wrapper">
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index 0a887ba..5e00afa 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -14,8 +14,8 @@
     </div>
     <div id="topbar-nav" class="navbar-menu">
       <div class="navbar-end">
-        
+
       </div>
     </div>
   </nav>
-</header>
+</header>
\ No newline at end of file
diff --git a/src/partials/header.hbs b/src/partials/header.hbs
index affbeeb..5efbca3 100644
--- a/src/partials/header.hbs
+++ b/src/partials/header.hbs
@@ -1 +1 @@
-{{> header-content}}
+{{> header-content}}
\ No newline at end of file
diff --git a/src/partials/page-languages.hbs b/src/partials/page-languages.hbs
new file mode 100644
index 0000000..2183ec8
--- /dev/null
+++ b/src/partials/page-languages.hbs
@@ -0,0 +1,7 @@
+
+<div class="page-languages">
+    <button class="languages-menu-toggle" title="Show other languages of the site">en English</button>
+    <div class="languages-menu">
+        <a class="language is-active" href="/en-US{{ @root.page.url }}">en English</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
index ea04514..7a7bbb0 100644
--- a/src/partials/toolbar.hbs
+++ b/src/partials/toolbar.hbs
@@ -1,6 +1,7 @@
 <div class="toolbar" role="navigation">
   <button class="navigation-toggle"></button>
 {{> breadcrumbs}}
+{{> page-languages}}
 {{> page-versions}}
   {{#if page.editUrl}}
   <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>

From 4671f7cace7a9064902481a5bddfa5106bbbadf6 Mon Sep 17 00:00:00 2001
From: Adam Samalik <asamalik@redhat.com>
Date: Apr 18 2019 09:23:45 +0000
Subject: [PATCH 2/3] fix language link path


---

diff --git a/src/partials/page-languages.hbs b/src/partials/page-languages.hbs
index 2183ec8..31f9f23 100644
--- a/src/partials/page-languages.hbs
+++ b/src/partials/page-languages.hbs
@@ -2,6 +2,6 @@
 <div class="page-languages">
     <button class="languages-menu-toggle" title="Show other languages of the site">en English</button>
     <div class="languages-menu">
-        <a class="language is-active" href="/en-US{{ @root.page.url }}">en English</a>
+        <a class="language is-active" href="{{siteRootPath}}/../en-US{{page.url}}">en English</a>
     </div>
-</div>
\ No newline at end of file
+</div>

From 898e986599361f61c15e3a65f2af7cb953a34d04 Mon Sep 17 00:00:00 2001
From: AghaSaad04 <agha.saad04@gmail.com>
Date: Oct 23 2020 19:37:16 +0000
Subject: [PATCH 3/3] Updated styling of page languages dropdown


---

diff --git a/src/css/page-languages.css b/src/css/page-languages.css
index ccdc328..e9f5a20 100644
--- a/src/css/page-languages.css
+++ b/src/css/page-languages.css
@@ -36,11 +36,13 @@
 .page-languages .languages-menu {
   border: 1px solid transparent;
   background-color: #f0f0f0;
-  padding: 1.3rem 0.5rem 0.35rem;
+  padding: 0rem .35rem .35rem;
   position: absolute;
-  top: 0;
+  top: 25px;
   left: 0;
   width: 100%;
+  overflow: auto;
+  height: 135px;
 }
 
 .page-languages:not(.is-active) .languages-menu {