andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added side nav to glossary and archived pages

Browse Source
This commit is contained in:
Sarath Damaraju
2018-10-05 20:00:18 +05:30
parent c0f5d12fbe
commit 8a773bcf73
5 changed files with 66 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
scripts/web.js
View File

@ -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',
'archived-page-end.html',
'glossary-page-start.html',
'glossary-page-end.html'
'static-page-start.html',
'static-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) {

18
static-parts/glossary-page-end.html
View File

@ -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>

108
static-parts/glossary-page-start.html
View File

@ -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 />

0
static-parts/archived-page-end.html → static-parts/static-page-end.html
View File

30
static-parts/archived-page-start.html → static-parts/static-page-start.html
View File

@ -14,18 +14,23 @@
<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) => {
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 => {
let data = [x.textContent.toLowerCase(), ...x.getAttribute('tags').split(',')].map(v => !!(v.indexOf(node.value.toLowerCase()) + 1));
if (data.includes(true)) {
Array.from(document.querySelector('nav').querySelectorAll('li')).forEach(x => {
let data = [x.textContent.toLowerCase(), ...x.querySelector('a').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]);
matchingTags.push(x.querySelector('a').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';
Array.from(document.querySelector('nav').querySelectorAll('h4:not(.static-link)')).forEach(x => {
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">
<span id="top"><br><br></span>
<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 />
<input class="search" type="search" id="searchInput" onkeyup="search(this)" placeholder="Search..." aria-label="Snippet search">
<nav>