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

update beginner page

Browse Source
This commit is contained in:
Stefan Feješ
2018-04-07 13:27:56 +02:00
parent adc4b53cee
commit b8d0d87136
3 changed files with 89 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
docs/beginner.html
View File

@ -12,6 +12,47 @@
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." /> <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="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">
<script>
function registerClickListener() {
document.addEventListener('click', function (event) {
if( document.getElementById('doc-drawer-checkbox').checked ) {
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
document.getElementById('doc-drawer-checkbox').checked = false;
}
}
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);
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);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.classList.contains('sublink-1')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
document.getElementById('doc-drawer-checkbox').checked = false;
}
}, false)};
</script>
</head> </head>
<body> <body>
<div id="splash"> <div id="splash">
@ -210,7 +251,7 @@ Return the string truncated to the desired length, with <code>'...'</code> appen
str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span> str<span class="token punctuation">.</span>length <span class="token operator">></span> num <span class="token operator">?</span> str<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> num <span class="token operator">></span> <span class="token number">3</span> <span class="token operator">?</span> num <span class="token operator">-</span> <span class="token number">3</span> <span class="token punctuation">:</span> num<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'...'</span> <span class="token punctuation">:</span> str<span class="token punctuation">;</span>
</pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'boom...'</span> </pre><label class="collapse">Show examples</label><pre class="language-js"><span class="token function">truncateString</span><span class="token punctuation">(</span><span class="token string">'boomerang'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'boom...'</span>
</pre> </pre>
<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div><div class="card fluid"><button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div> </div> <button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button></div></div></div></div> </div>
</div> </div>
<footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer> <footer class="container"><div class="row"><div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2"><p style="display:inline-block"><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.<br>Ribbon made by <a href="https://github.com/tholman/github-corners">Tim Holman</a> is licensed by <a href="https://opensource.org/licenses/MIT">The MIT License</a><br>Built with the <a href="https://minicss.org">mini.css framework</a>.</p></div></div></footer>
</body> </body>

19
scripts/web.js
View File

@ -55,8 +55,8 @@ let snippets = {},
startPart = '', startPart = '',
endPart = '', endPart = '',
output = '', output = '',
startBeginnerPart = '', beginnerStartPart = '',
endBegginerPart = '', beginnerEndPart = '',
beginnerOutput = '', beginnerOutput = '',
pagesOutput = []; pagesOutput = [];
tagDbData = {}; tagDbData = {};
@ -70,8 +70,8 @@ try {
startPart = fs.readFileSync(path.join(staticPartsPath, 'page-start.html'), 'utf8'); startPart = fs.readFileSync(path.join(staticPartsPath, 'page-start.html'), 'utf8');
endPart = fs.readFileSync(path.join(staticPartsPath, 'page-end.html'), 'utf8'); endPart = fs.readFileSync(path.join(staticPartsPath, 'page-end.html'), 'utf8');
startBeginnerPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-start.html'), 'utf8'); beginnerStartPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-start.html'), 'utf8');
endBeginnerPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-end.html'), 'utf8'); beginnerEndPart = fs.readFileSync(path.join(staticPartsPath, 'beginner-page-end.html'), 'utf8');
} catch (err) { } catch (err) {
// Handle errors (hopefully not!) // Handle errors (hopefully not!)
console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`); console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
@ -170,7 +170,7 @@ try {
try { try {
// Add the static part // Add the static part
beginnerOutput += `${startBeginnerPart + '\n'}`; beginnerOutput += `${beginnerStartPart + '\n'}`;
// Filter begginer snippets // Filter begginer snippets
const filteredBeginnerSnippets = Object.keys(snippets) const filteredBeginnerSnippets = Object.keys(snippets)
@ -180,7 +180,6 @@ try {
return obj; return obj;
}, {}); }, {});
console.log(filteredBeginnerSnippets);
for (let snippet of Object.entries(filteredBeginnerSnippets)) for (let snippet of Object.entries(filteredBeginnerSnippets))
beginnerOutput += beginnerOutput +=
'<div class="row">' + '<div class="row">' +
@ -197,13 +196,7 @@ try {
'</div></div></div></div>'; '</div></div></div></div>';
beginnerOutput += beginnerOutput += `${beginnerEndPart}`;
'<div class="card fluid">' +
// begginer snippet goes here.
'<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
'</div></div>';
beginnerOutput += `${endBeginnerPart}`;
// Generate 'beginner.html' file // Generate 'beginner.html' file
fs.writeFileSync(path.join(docsPath, 'beginner.html'), beginnerOutput); fs.writeFileSync(path.join(docsPath, 'beginner.html'), beginnerOutput);

41
static-parts/beginner-page-start.html
View File

@ -12,6 +12,47 @@
<meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." /> <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="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">
<script>
function registerClickListener() {
document.addEventListener('click', function (event) {
if( document.getElementById('doc-drawer-checkbox').checked ) {
if(!document.querySelector('nav').contains(event.target) && !event.target.classList.contains('drawer-toggle') && !event.target.classList.contains('drawer')) {
document.getElementById('doc-drawer-checkbox').checked = false;
}
}
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);
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);
}
else if (event.target.classList.contains('scroll-to-top')){
scrollToTop();
}
else if (event.target.classList.contains('sublink-1')){
if(event.target.getAttribute("href").includes('./')) return;
event.preventDefault();
scrollTo(document.querySelector('main'), document.getElementById(event.target.href.split('#')[1]).parentElement.offsetTop - 60, event.target.href.split('#')[1], 400);
document.getElementById('doc-drawer-checkbox').checked = false;
}
}, false)};
</script>
</head> </head>
<body> <body>
<div id="splash"> <div id="splash">