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

Website improvements

Browse Source 
Updated injectors to be simpler and easier to use. Updated styling to deal with rendering problems and make the loading faster.
This commit is contained in:
Angelos Chalaris
2018-01-03 19:30:55 +02:00
parent 6ba54a236f
commit 0c575a4d68
6 changed files with 384 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

482
docs/index.html
View File

File diff suppressed because one or more lines are too long

2
docs/mini.css
View File

File diff suppressed because one or more lines are too long

129
docs/mini/flavor.scss
View File

@ -7,44 +7,29 @@
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2 mini.css version: v3.0.0-alpha.2
*/ */
$_include-modal: false;
$_include-tooltip: false;
$_include-collapse: false;
@import 'core'; @import 'core';
@import 'layout'; @import 'layout';
/* /*
Custom elements for card elements. Custom elements for card elements.
*/ */
$card-small-name: 'small'; // Class name for small cards.
$card-small-width: 240px; // Width for small cards.
@include make-card-alt-size ($card-small-name, $card-small-width);
$card-large-name: 'large'; // Class name for large cards.
$card-large-width: 480px; // Width for large cards.
@include make-card-alt-size ($card-large-name, $card-large-width);
$card-fluid-name: 'fluid'; // Class name for fluid cards. $card-fluid-name: 'fluid'; // Class name for fluid cards.
$card-fluid-width: 100%; // Width for fluid cards. $card-fluid-width: 100%; // Width for fluid cards.
@include make-card-alt-size ($card-fluid-name, $card-fluid-width); @include make-card-alt-size ($card-fluid-name, $card-fluid-width);
$card-warning-name: 'warning'; // Class name for card warnging color variant.
$card-warning-back-color: #ffca28; // Background color for card warnging color variant.
$card-warning-fore-color: #111; // Text color for card warnging color variant.
$card-warning-border-color: #e8b825; // Border style for card warnging color variant.
@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
$card-error-name: 'error'; // Class name for card error color variant.
$card-error-back-color: #b71c1c; // Background color for card error color variant.
$card-error-fore-color: #f8f8f8; // Text color for card error color variant.
$card-error-border-color: #a71a1a; // Border style for card error color variant.
@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
$card-section-dark-name: 'dark'; // Class name for card dark section variant.
$card-section-dark-back-color: #e0e0e0; // Background color for card dark section variant.
$card-section-dark-fore-color: #111; // Text color for card dark section variant.
@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
$card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant. $card-section-double-padded-name: 'double-padded'; // Class name for card double-padded section variant.
$card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant. $card-section-double-padded-padding: calc(1.5 * var(#{$universal-padding-var})); // Padding for card sectiondouble-padded section variant.
@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding); @include make-card-section-alt-style($card-section-double-padded-name, $card-section-double-padded-padding);
.#{$card-name} > h3.#{$card-section-name}.#{$card-section-double-padded-name} {
padding: calc(3 * var(#{$universal-padding-var}));
}
@import 'input_control'; @import 'input_control';
@ -57,34 +42,6 @@ $button-primary-hover-back-color:#1565c0; // Background color for primary bu
$button-primary-fore-color: #f8f8f8; // Text color for primary button color variant. $button-primary-fore-color: #f8f8f8; // Text color for primary button color variant.
@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color); @include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
$button-secondary-name: 'secondary'; // Class name for secondary button color variant.
$button-secondary-back-color: #d32f2f; // Background color for secondary button color variant.
$button-secondary-hover-back-color:#c62828; // Background color for secondary button color variant (hover).
$button-secondary-fore-color: #f8f8f8; // Text color for secondary button color variant.
@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
$button-tertiary-name: 'tertiary'; // Class name for tertiary button color variant.
$button-tertiary-back-color: #308732; // Background color for tertiary button color variant.
$button-tertiary-hover-back-color:#277529; // Background color for tertiary button color variant (hover).
$button-tertiary-fore-color: #f8f8f8; // Text color for tertiary button color variant.
@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
$button-inverse-name: 'inverse'; // Class name for inverse button color variant.
$button-inverse-back-color: #212121; // Background color for inverse button color variant.
$button-inverse-hover-back-color:#111; // Background color for inverse button color variant (hover).
$button-inverse-fore-color: #f8f8f8; // Text color for inverse button color variant.
@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
$button-small-name: 'small'; // Class name, padding and margin for small button size variant.
$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
$button-small-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
$button-large-name: 'large'; // Class name, padding and margin for large button size variant.
$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
$button-large-margin: var(#{$universal-margin-var});
@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
$_drawer-right: false; $_drawer-right: false;
@ -109,11 +66,13 @@ $mark-tag-border-radius: 1em;
// Website-specific styles // Website-specific styles
html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; } html, * {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
}
code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] { code, pre, kbd, code *, pre *, kbd *, code[class*="language-"], pre[class*="language-"] {
font-family: 'Inconsolata', Menlo, Consolas, monospace !important; font-family: 'Roboto Mono', Menlo, Consolas, monospace !important;
} }
code, kbd { font-size: 1em; } code, kbd { font-size: 0.8125em; }
pre code { pre code {
padding: 0; // Should make the first line's left padding the same as all other lines and avoid that annoying little step. padding: 0; // Should make the first line's left padding the same as all other lines and avoid that annoying little step.
} }
@ -177,11 +136,67 @@ main {
background: none !important; background: none !important;
} }
:root {
#{$collapse-label-back-color-var}: $collapse-label-back-color;
#{$collapse-label-fore-color-var}: $collapse-label-fore-color;
#{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color;
#{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color;
#{$collapse-border-color-var}: $collapse-border-color;
#{$collapse-content-back-color-var} : $collapse-content-back-color;
#{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color;
}
label.#{$collapse-name} {
width: 100%;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
transition: background 0.3s;
color: var(#{$collapse-label-fore-color-var});
background: var(#{$collapse-label-back-color-var});
border: $__1px solid var(#{$collapse-border-color-var});
padding: calc(1.5 * var(#{$universal-padding-var}));
border-radius: var(#{$universal-border-radius-var});
&:hover, &:focus {
background: var(#{$collapse-label-hover-back-color-var});
}
+ pre {
box-sizing: border-box;
height: 1px;
max-height: 1px;
overflow: auto;
margin: 0;
border: 0;
padding: 0;
transition: max-height 0.3s;
}
&.toggled {
background: var(#{$collapse-selected-label-back-color-var});
border-bottom-color: var(#{$collapse-selected-label-border-color-var});
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
+ pre {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
width: 100%;
height: auto;
border: $__1px solid var(#{$collapse-border-color-var});
border-top: 0;
padding: calc(2 * var(#{$universal-padding-var}));
max-height: $collapse-content-max-height;
}
}
}
div.collapse { div.collapse {
> label { > label {
border-top-left-radius: var(--universal-border-radius) !important; border-top-left-radius: var(--universal-border-radius) !important;
border-top-right-radius: var(--universal-border-radius) !important; border-top-right-radius: var(--universal-border-radius) !important;
} }
:checked + label {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
margin: 0; margin: 0;
width: 100%; width: 100%;
> div { > div {

12
scripts/web.js
View File

@ -145,11 +145,11 @@ try {
.replace(/<h2>/g, '<h2 style="text-align:center;">'); .replace(/<h2>/g, '<h2 style="text-align:center;">');
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
uncategorizedOutput += uncategorizedOutput +=
'<div class="card fluid"><div class="section double-padded">' + '<div class="card fluid">' +
md md
.render(`\n${snippets[taggedSnippet[0] + '.md']}`) .render(`\n${snippets[taggedSnippet[0] + '.md']}`)
.replace(/<h3/g, `<h3 id="${taggedSnippet[0].toLowerCase()}"`) .replace(/<h3/g, `<h3 id="${taggedSnippet[0].toLowerCase()}" class="section double-padded"`)
.replace(/<\/h3>/g, '</h3></div><div class="section double-padded">') + .replace(/<\/h3>/g, '</h3><div class="section double-padded">') +
'</div></div><br/>'; '</div></div><br/>';
} else { } else {
output += md output += md
@ -157,11 +157,11 @@ try {
.replace(/<h2>/g, '<h2 style="text-align:center;">'); .replace(/<h2>/g, '<h2 style="text-align:center;">');
for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag)) for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
output += output +=
'<div class="card fluid"><div class="section double-padded">' + '<div class="card fluid">' +
md md
.render(`\n${snippets[taggedSnippet[0] + '.md']}`) .render(`\n${snippets[taggedSnippet[0] + '.md']}`)
.replace(/<h3/g, `<h3 id="${taggedSnippet[0].toLowerCase()}"`) .replace(/<h3/g, `<h3 id="${taggedSnippet[0].toLowerCase()}" class="section double-padded"`)
.replace(/<\/h3>/g, '</h3></div><div class="section double-padded">') + .replace(/<\/h3>/g, '</h3><div class="section double-padded">') +
'</div></div><br/>'; '</div></div><br/>';
} }
} }

2
snippets/pluralize.md
View File

@ -1,4 +1,4 @@
# pluralize ### pluralize
If `num` is greater than `1` returns the plural form of the given string, else return the singular form. If `num` is greater than `1` returns the plural form of the given string, else return the singular form.

131
static-parts/index-start.html
View File

@ -2,7 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="./mini.css"> <link rel="stylesheet" href="./mini.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto:400,400i,500,700,700i', 'Roboto Mono:400,400i,700,700i']
}
});
</script>
<title>30 seconds of code</title> <title>30 seconds of code</title>
<meta charset="utf-8"> <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="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
@ -14,71 +21,65 @@
<meta property="og:type" content="website" /><meta property="og:image" content="favicon.png"> <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="prism.css"> <link rel="stylesheet" href="prism.css">
</head> <script>
<script> const search = (node) => {
const search = (node) => { // Hide non-query-matching snippets
// Hide non-query-matching snippets Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => {
Array.from(node.parentElement.parentElement.getElementsByTagName('a')).forEach(x => { x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none'
x.style.display = x.getAttribute("href").toUpperCase().indexOf(node.value.toUpperCase()) + 1 ? '' : 'none'
});
Array.from( node.parentElement.parentElement.children )
// Filter out the hidden links
.filter( x => !( x.tagName == 'A' && x.style.display == 'none' ) )
// set the display for each element based on if it's a H3
// If it's the last element and an H3, hide it
// Otherwise if it's and H3 and the next element is an H3, hide it
// Otherwise display it
.forEach( ( element, index, source) => {
element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '')
})
}
function loader() {
clipboard();
exampleMaker();
}
function clipboard() {
const snippets = document.querySelectorAll(":not(pre) + pre");
snippets.forEach(element => {
const button = document.createElement("button");
button.className = 'primary clipboard-copy';
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy to clipboard';
element.parentElement.appendChild(button);
button.addEventListener ("click", function() {
//The following regex removes all the comments from the snippet
const text = element.textContent;
// Apparently you can't copy a variable to clipboard so you need to create text input element,
// give it a value, copy it and then remove it from DOM.
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
console.log(textArea.innerText);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
}); });
}); Array.from( node.parentElement.parentElement.children )
}; // Filter out the hidden links
function exampleMaker() { .filter( x => !( x.tagName == 'A' && x.style.display == 'none' ) )
const examples = document.querySelectorAll("pre + pre"); // set the display for each element based on if it's a H3
examples.forEach(el => { // If it's the last element and an H3, hide it
let wrapper = document.createElement('div'); // Otherwise if it's and H3 and the next element is an H3, hide it
wrapper.className = 'collapse'; // Otherwise display it
let toggle = document.createElement('input'); .forEach( ( element, index, source) => {
toggle.type = 'checkbox'; element.style.display = (element.tagName == 'H3' && index + 1 == source.length ? 'none' : element.tagName == 'H3' && source[index + 1].tagName == 'H3' ? 'none' : '')
toggle.id = el.parentElement.parentElement.querySelector('h3').id+'-examples'; })
let label = document.createElement('label'); }
label.htmlFor = el.parentElement.parentElement.querySelector('h3').id+'-examples'; function loader() {
label.innerHTML = 'Show examples'; clipboard();
let box = document.createElement('div'); exampleMaker();
el.parentNode.insertBefore(wrapper, el); registerClickListener();
wrapper.appendChild(toggle); }
wrapper.appendChild(label); function clipboard() {
wrapper.appendChild(box); const snippets = document.querySelectorAll(":not(pre) + pre");
box.appendChild(el); snippets.forEach(snippet => {
}); const button = document.createElement("button");
} button.className = 'primary clipboard-copy';
</script> button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy to clipboard';
snippet.parentElement.appendChild(button);
});
}
function exampleMaker() {
const examples = document.querySelectorAll("pre + pre");
examples.forEach(el => {
let label = document.createElement('label');
label.className = 'collapse';
label.innerHTML = 'Show examples';
el.parentNode.insertBefore(label, el);
});
}
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('clipboard-copy')) {
const text = event.target.parentElement.parentElement.querySelector(':not(pre) + pre').textContent;
const textArea = document.createElement("textarea");
textArea.value = text.trim();
document.body.appendChild(textArea);
console.log(textArea.innerText);
textArea.select();
document.execCommand("Copy");
document.body.removeChild(textArea);
}
}, false);
}
</script>
</head>
<body onload="loader()"> <body onload="loader()">
<a href="https://github.com/Chalarangelo/30-seconds-of-code/fork" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" 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><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> <a href="https://github.com/Chalarangelo/30-seconds-of-code/fork" class="github-corner" aria-label="View source on Github"><svg width="90" height="90" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" 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><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<header style="height: 5.5rem;"> <header style="height: 5.5rem;">