Added side nav to glossary and archived pages

scripts/web.js

@@ -128,11 +128,7 @@ let snippets = {},
   startPart = '',
   endPart = '',
   output = '',
-  archivedStartPart = '',
-  archivedEndPart = '',
   archivedOutput = '',
-  glossaryStartPart = '',
-  glossaryEndPart = '',
   glossaryOutput = '',
   pagesOutput = [],
   tagDbData = {};
@@ -145,13 +141,11 @@ glossarySnippets = util.readSnippets(glossarySnippetsPath);
 
 // Load static parts for all pages
 try {
-  [startPart, endPart, archivedStartPart, archivedEndPart, glossaryStartPart, glossaryEndPart] = [
+  [startPart, endPart, staticPageStartPart, staticPageEndPart] = [
     'page-start.html',
     'page-end.html',
-    'archived-page-start.html',
+    'static-page-start.html',
-    'archived-page-end.html',
+    'static-page-end.html'
-    'glossary-page-start.html',
-    'glossary-page-end.html'
   ].map(filename => fs.readFileSync(path.join(staticPartsPath, filename), 'utf8'));
 } catch (err) {
   // Handle errors (hopefully not!)
@@ -243,10 +237,51 @@ try {
   process.exit(1);
 }
 
+const staticPageStartGenerator = (staticPart, heading, description) => {
+  let taggedData = util.prepTaggedData(tagDbData);
+  // Add the start static part
+  let htmlCode = `${staticPart}\n`;
+
+  // Loop over tags and snippets to create the table of contents
+  for (let tag of taggedData) {
+    htmlCode +=
+      '<h4 class="collapse">' +
+      md
+        .render(`${util.capitalize(tag, true)}\n`)
+        .replace(/<p>/g, '')
+        .replace(/<\/p>/g, '') +
+      '</h4><ul>';
+    for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
+      htmlCode += md
+        .render(
+          `[${taggedSnippet[0]}](./${
+            tag === 'array' ? 'index' : tag
+          }#${taggedSnippet[0].toLowerCase()})\n`
+        )
+        .replace(/<p>/g, '')
+        .replace(/<\/p>/g, '</li>')
+        .replace(/<a/g, `<li><a tags="${taggedSnippet[1].join(',')}"`);
+    htmlCode += '</ul>\n';
+  }
+  htmlCode += `<h4 class="static-link"><a href="./archive">Archive</a></h4>
+  <h4 class="static-link"><a href="./glossary">Glossary</a></h4>
+  <h4 class="static-link"><a href="./contributing">Contributing</a></h4>
+  <h4 class="static-link"><a href="./about">About</a></h4>
+  <div><button class="social fb"></button><button class="social instagram"></button><button class="social twitter"></button></div>
+  </nav><main class="col-centered"><span id="top"><br/><br/></span><h2 class="category-name">${heading}</h2>
+        <p style="text-align: justify">${description}</p><br />`;
+  return htmlCode;
+}
+
+
 // Create the output for the archive.html file
 try {
   // Add the static part
-  archivedOutput += `${archivedStartPart}\n`;
+  let heading = "Snippets Archive";
+  let description = "These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.";
+  let htmlCode = staticPageStartGenerator(staticPageStartPart, heading, description);
+
+  archivedOutput += htmlCode;
 
   // Filter README.md from folder
   const filteredArchivedSnippets = filterSnippets(archivedSnippets, ['README.md']);
@@ -274,7 +309,7 @@ try {
     (match, p1, p2, p3) => `<span class="token keyword">${p1}${p2}${p3}</span>`
   );
 
-  archivedOutput += `${archivedEndPart}`;
+  archivedOutput += `${staticPageEndPart}`;
 
   // Generate and minify 'archive.html' file
   const minifiedArchivedOutput = minifyHTML(archivedOutput);
@@ -289,7 +324,10 @@ try {
 // Create the output for the glossary.html file
 try {
   // Add the static part
-  glossaryOutput += `${glossaryStartPart}\n`;
+  let heading = "Glossary";
+  let description = "Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.";
+  let htmlCode = staticPageStartGenerator(staticPageStartPart, heading, description);
+  glossaryOutput += htmlCode;
 
   // Filter README.md from folder
   const filteredGlossarySnippets = filterSnippets(glossarySnippets, ['README.md']);
@@ -304,11 +342,10 @@ try {
         .replace(/<\/h3>/g, '</h4>') +
       '</div></div>';
 
-  glossaryOutput += `${glossaryEndPart}`;
+  glossaryOutput += `${staticPageEndPart}`;
 
   // Generate and minify 'glossary.html' file
   const minifiedGlossaryOutput = minifyHTML(glossaryOutput);
-
   fs.writeFileSync(path.join(docsPath, 'glossary.html'), minifiedGlossaryOutput);
   console.log(`${chalk.green('SUCCESS!')} glossary.html file generated!`);
 } catch (err) {

static-parts/glossary-page-end.html

@@ -1,18 +0,0 @@
-</main>
-<footer class="col-full-width container">
-  <div class="col-centered">
-    <p style="display: inline-block;"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/30-seconds/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a>
-      license.<br>Logos made by <a href="https://github.com/Chalarangelo">Angelos Chalaris</a> and ribbon made by <a
-        href="https://github.com/tholman/github-corners">Tim Holman</a> are licensed under the <a href="https://opensource.org/licenses/MIT">MIT</a>
-      license.<br>Sponsored by <img src="https://30secondsofcode.org/sponsors/DO_Logo_icon_blue.svg" style="vertical-align: sub; padding-right: 2px; padding-left: 2px;"
-        width="20px" height="20px" alt="DigitalOcean"><a href="https://www.digitalocean.com"><span style="color:#0080ff">DigitalOcean</span></a>.</p>
-    <br />
-    <p style="display: inline-block;"><a href="./about">About</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./contributing">Contributing</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
-        href="./archive">Archive</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./glossary">Glossary</a></p>
-  </div>
-</footer>
-<a class="scroll-to-top" href="#top"></a></div>
-</div>
-</body>
-
-</html>

static-parts/glossary-page-start.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <link rel="stylesheet" href="./style.css">
-    <title>Glossary - 30 seconds of code</title>
-    <meta charset="utf-8">
-    <meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
-    <meta name="keywords" content="javascript, snippets, code, programming">
-    <meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="theme-color" content="#111">
-    <meta property="og:title" content="30 seconds of code">
-    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
-    <meta property="og:type" content="website" /><meta property="og:image" content="https://30secondsofcode.org/logos/logo_512.png">
-    <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
-    <script>
-      const search = (node) => {
-        let matchingTags = [];
-        Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
-          let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
-          if (data.includes(true)) {
-            x.style.display = '';
-            matchingTags.push(x.getAttribute('tags').split(',')[0]);
-          }
-          else x.style.display = 'none';
-        });
-        Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
-          x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
-        })
-      }
-      function scrollToTop() {
-        const c = document.querySelector('.card-container').scrollTop;
-        if (c > 0) {
-          window.requestAnimationFrame(scrollToTop);
-          document.querySelector('.card-container').scrollTo(0, c - c / 4);
-        }
-      };
-      function scrollTo(element, to, id, duration) {
-        if (duration <= 0) return;
-        var difference = to - element.scrollTop;
-        var perTick = difference / duration * 40;
-
-        setTimeout(function () {
-          element.scrollTop = element.scrollTop + perTick;
-          if (element.scrollTop === to) {
-            window.location.href = "#" + id;
-            return;
-          }
-          scrollTo(element, to, id, duration - 40);
-        }, 40);
-      };
-      function loader() {
-        registerClickListener();
-        if (window.innerWidth >= '768')
-          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
-        else
-          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
-      }
-      function registerClickListener() {
-        document.addEventListener('click', function (event) {
-          if (event.target.classList.contains('collapse')) {
-            event.target.classList = event.target.classList.contains('toggled') ? 'collapse' : 'collapse toggled';
-          }
-          else if (event.target.classList.contains('menu-button')) {
-            document.querySelector('nav').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
-            document.querySelector('[type="search"]').classList = event.target.classList.contains('toggled') ? '' : 'col-nav';
-            event.target.classList = event.target.classList.contains('toggled') ? 'menu-button' : 'menu-button toggled';
-          }
-          else if (!document.querySelector('nav').contains(event.target) && !document.querySelector('[type="search"]').contains(event.target) && window.innerWidth < '768') {
-            document.querySelector('nav').classList = '';
-            document.querySelector('[type="search"]').classList = '';
-            document.querySelector('.menu-button').classList = 'menu-button';
-          }
-          else if (event.target.classList.contains('copy-button')) {
-            const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
-            const textArea = document.createElement("textarea");
-            textArea.value = text.trim();
-            document.body.appendChild(textArea);
-            textArea.select();
-            document.execCommand("Copy");
-            document.body.removeChild(textArea);
-            let tst = document.createElement('div');
-            tst.classList = 'toast';
-            tst.innerHTML = 'Snippet copied to clipboard!';
-            document.body.appendChild(tst);
-            setTimeout(function () {
-              tst.style.opacity = 0;
-              setTimeout(function () {
-                document.body.removeChild(tst);
-              }, 300);
-            }, 1700);
-          }
-        }, false);
-      }
-    </script>
-  </head>
-  <body onload="loader()" class="card-page">
-    <a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
-    <header>
-      <h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title">&nbsp;30 seconds of code</span>
-        <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
-      </a></h1>
-    </header>
-    <div class="container card-container">
-      <main class="col-centered">
-        <span id="top"><br><br></span>
-        <h2 class="category-name">Glossary</h2>
-        <p style="text-align: justify">Developers use a lot of terminology daily. Every once in a while, you might find a term you do not know. We know how frustrating that can get, so we provide you with a handy glossary of frequently used web development terms.</p><br />

static-parts/static-page-start.html

@@ -15,17 +15,22 @@
     <link rel="icon" type="image/png" href="./logos/logo_128.png"><link rel="manifest" href="manifest.json">
     <script>
        const search = (node) => {
+        if(node.value.toLowerCase().trim() === ''){
+          document.querySelector('nav').querySelectorAll('li > a').forEach(x => x.style.display = ''); 
+          document.querySelector('nav').querySelectorAll('h4:not(.static-link)').forEach(x => x.classList = 'collapse');
+          return;
+        }
         let matchingTags = [];
-        Array.from(node.parentElement.getElementsByTagName('a')).forEach(x => {
+        Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
-          let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
+          let data = [x.textContent.toLowerCase(), ...x.querySelector('a').getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
-          if (data.includes(true)) {
+          if(data.includes(true)){
             x.style.display = '';
-            matchingTags.push(x.getAttribute('tags').split(',')[0]);
+            matchingTags.push(x.querySelector('a').getAttribute('tags').split(',')[0]);
           }
           else x.style.display = 'none';
         });
-        Array.from(node.parentElement.getElementsByTagName('h4')).forEach(x => {
+        Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
-          x.style.display = matchingTags.includes(x.textContent.toLowerCase()) ? '' : 'none';
+          x.classList = matchingTags.includes(x.textContent.toLowerCase()) ? 'collapse toggled' : 'collapse';
         })
       }
       function scrollToTop() {
@@ -51,10 +56,6 @@
       };
       function loader() {
         registerClickListener();
-        if (window.innerWidth >= '768')
-          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
-        else
-          document.querySelector('nav').scrollTop = Array.from(document.querySelectorAll('h4')).filter(v => v.innerHTML === '$tag')[0].offsetTop;
       }
       function registerClickListener() {
         document.addEventListener('click', function (event) {
@@ -96,13 +97,12 @@
   </head>
   <body onload="loader()" class="card-page">
     <a href="https://github.com/30-seconds/30-seconds-of-code" class="github-corner" aria-label="View source on Github"><svg width="56" height="56" viewBox="0 0 250 250" style="fill:#009688; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 1000" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+    <button class="menu-button"></button>
     <header>
       <h1 class="logo"><a href="./index"><img src="https://30secondsofcode.org/logos/logo_256.png" alt="logo"/><span id="title">&nbsp;30 seconds of code</span>
         <small>Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.</small>
       </a></h1>
     </header>
     <div class="container card-container">
-      <main class="col-centered">
+      <input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
-        <span id="top"><br><br></span>
+      <nav>
-        <h2 class="category-name">Snippets Archive</h2>
-        <p style="text-align: justify">These snippets, while useful and interesting, didn't quite make it into the repository due to either having very specific use-cases or being outdated. However we felt like they might still be useful to some readers, so here they are.</p><br />