Archive page

2018-09-08 14:25:00 +03:00
parent 47606f6581
commit 82ddb71cee
18 changed files with 1388 additions and 1022 deletions
--- a/scripts/web.js
+++ b/scripts/web.js
@ -131,150 +131,7 @@ try {
 }
 // Load tag data from the database
 tagDbData = util.readTags();
-/*
-// Create the output for the index.html file (only locally or on Travis CRON or custom job)
-if (
-  !util.isTravisCI() ||
-  (util.isTravisCI() &&
-    (process.env['TRAVIS_EVENT_TYPE'] === 'cron' || process.env['TRAVIS_EVENT_TYPE'] === 'api'))
-) {
-  try {
-    // Shuffle the array of snippets, pick 3
-    let indexDailyPicks = '';
-    let shuffledSnippets = util.shuffle(Object.keys(snippets)).slice(0, 3);
-    const dailyPicks = Object.keys(snippets)
-      .filter(key => shuffledSnippets.includes(key))
-      .reduce((obj, key) => {
-        obj[key] = snippets[key];
-        return obj;
-      }, {});

-    // Generate the html for the picked snippets
-    for (let snippet of Object.entries(dailyPicks))
-      indexDailyPicks +=
-        '<div class="card fluid pick">' +
-        md
-          .render(`\n${snippets[snippet[0]]}`)
-          .replace(/<h3/g, `<h3 id="${snippet[0].toLowerCase()}" class="section double-padded"`)
-          .replace(
-            /<\/h3>/g,
-            `${snippet[1].includes('advanced') ? '<mark class="tag">advanced</mark>' : ''}</h3>`
-          )
-          .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
-          .replace(
-            /<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
-            (match, p1) =>
-              `<pre class="language-js">${Prism.highlight(
-                unescapeHTML(p1),
-                Prism.languages.javascript
-              )}</pre>`
-          )
-          .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-        '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
-        '</div></div>';
-    // Select the first snippet from today's picks
-    indexDailyPicks = indexDailyPicks.replace('card fluid pick', 'card fluid pick selected');
-    // Optimize punctuation nodes
-    indexDailyPicks = util.optimizeNodes(
-      indexDailyPicks,
-      /<span class="token punctuation">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token punctuation">([^\0]*?)<\/span>/gm,
-      (match, p1, p2, p3) => `<span class="token punctuation">${p1}${p2}${p3}</span>`
-    );
-    // Optimize operator nodes
-    indexDailyPicks = util.optimizeNodes(
-      indexDailyPicks,
-      /<span class="token operator">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token operator">([^\0]*?)<\/span>/gm,
-      (match, p1, p2, p3) => `<span class="token operator">${p1}${p2}${p3}</span>`
-    );
-    // Optimize keyword nodes
-    indexDailyPicks = util.optimizeNodes(
-      indexDailyPicks,
-      /<span class="token keyword">([^\0<]*?)<\/span>([\n\r\s]*)<span class="token keyword">([^\0]*?)<\/span>/gm,
-      (match, p1, p2, p3) => `<span class="token keyword">${p1}${p2}${p3}</span>`
-    );
-    // Put the daily picks into the page
-    indexStaticFile = indexStaticFile.replace('$daily-picks', indexDailyPicks);
-    // Use the Github API to get the needed data
-    const githubApi = 'api.github.com';
-    const headers = util.isTravisCI()
-      ? { 'User-Agent': '30-seconds-of-code', Authorization: 'token ' + process.env['GH_TOKEN'] }
-      : { 'User-Agent': '30-seconds-of-code' };
-    // Test the API's rate limit (keep for various reasons)
-    https.get({ host: githubApi, path: '/rate_limit?', headers: headers }, res => {
-      res.on('data', function(chunk) {
-        console.log(`Remaining requests: ${JSON.parse(chunk).resources.core.remaining}`);
-      });
-    });
-    // Send requests and wait for responses, write to the page
-    https.get(
-      {
-        host: githubApi,
-        path: '/repos/chalarangelo/30-seconds-of-code/commits?per_page=1',
-        headers: headers
-      },
-      resCommits => {
-        https.get(
-          {
-            host: githubApi,
-            path: '/repos/chalarangelo/30-seconds-of-code/contributors?per_page=1',
-            headers: headers
-          },
-          resContributors => {
-            https.get(
-              {
-                host: githubApi,
-                path: '/repos/chalarangelo/30-seconds-of-code/stargazers?per_page=1',
-                headers: headers
-              },
-              resStars => {
-                let commits = resCommits.headers.link
-                    .split('&')
-                    .slice(-1)[0]
-                    .replace(/[^\d]/g, ''),
-                  contribs = resContributors.headers.link
-                    .split('&')
-                    .slice(-1)[0]
-                    .replace(/[^\d]/g, ''),
-                  stars = resStars.headers.link
-                    .split('&')
-                    .slice(-1)[0]
-                    .replace(/[^\d]/g, '');
-                indexStaticFile = indexStaticFile
-                  .replace(/\$snippet-count/g, Object.keys(snippets).length)
-                  .replace(/\$commit-count/g, commits)
-                  .replace(/\$contrib-count/g, contribs)
-                  .replace(/\$star-count/g, stars);
-                indexStaticFile = minify(indexStaticFile, {
-                  collapseBooleanAttributes: true,
-                  collapseWhitespace: true,
-                  decodeEntities: false,
-                  minifyCSS: true,
-                  minifyJS: true,
-                  keepClosingSlash: true,
-                  processConditionalComments: true,
-                  removeAttributeQuotes: false,
-                  removeComments: true,
-                  removeEmptyAttributes: false,
-                  removeOptionalTags: false,
-                  removeScriptTypeAttributes: false,
-                  removeStyleLinkTypeAttributes: false,
-                  trimCustomFragments: true
-                });
-                // Generate 'index.html' file
-                fs.writeFileSync(path.join(docsPath, 'index.html'), indexStaticFile);
-                console.log(`${chalk.green('SUCCESS!')} index.html file generated!`);
-              }
-            );
-          }
-        );
-      }
-    );
-  } catch (err) {
-    console.log(`${chalk.red('ERROR!')} During index.html generation: ${err}`);
-    process.exit(1);
-  }
-}
-*/
 // Create the output for individual category pages
 try {
  // Add the start static part
@ -299,10 +156,11 @@ try {
      '</h4>';
    for (let taggedSnippet of Object.entries(tagDbData).filter(v => v[1][0] === tag))
      output += md
-        .render(`[${taggedSnippet[0]}](./${tag}#${taggedSnippet[0].toLowerCase()})\n`)
+        .render(`[${taggedSnippet[0]}](./${tag == 'array' ?'index' : tag}#${taggedSnippet[0].toLowerCase()})\n`)
        .replace(/<p>/g, '')
        .replace(/<\/p>/g, '')
-        .replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`);
+        .replace(/<a/g, `<a tags="${taggedSnippet[1].join(',')}"`)
+        ;
    output += '\n';
  }
  output +=
@ -322,6 +180,7 @@ try {
    let localOutput = output
      .replace(/\$tag/g, util.capitalize(tag))
      .replace(new RegExp(`./${tag}#`, 'g'), '#');
+    if (tag === 'array') localOutput = localOutput.replace(new RegExp(`./index#`, 'g'), '#');
    localOutput += md
      .render(`## ${util.capitalize(tag, true)}\n`)
      .replace(/<h2>/g, '<h2 class="category-name">');
@ -486,6 +345,7 @@ try {
  console.log(`${chalk.red('ERROR!')} During beginner.html generation: ${err}`);
  process.exit(1);
 }
+*/

 // Create the output for the archive.html file
 try {
@ -505,13 +365,21 @@ try {
  // Generate archived snippets from md files
  for (let snippet of Object.entries(filteredArchivedSnippets))
    archivedOutput +=
-      '<div class="row">' +
-      '<div class="col-sm-12 col-md-10 col-lg-8 col-md-offset-1 col-lg-offset-2">' +
-      '<div class="card fluid">' +
+      '<div class="card code-card">' +
      md
-        .render(`\n${filteredArchivedSnippets[snippet[0]]}`)
-        .replace(/<h3/g, `<h3 id="${snippet[0].toLowerCase()}" class="section double-padded"`)
-        .replace(/<\/h3>/g, '</h3><div class="section double-padded">')
+      .render(`\n${filteredArchivedSnippets[snippet[0]]}`)
+        .replace(
+          /<h3/g,
+      `<div class="section card-content"><h4 id="${snippet[0].toLowerCase()}"`
+        )
+        .replace(
+          /<\/h3>/g,
+          '</h4>'
+        )
+        .replace(
+          /<pre><code class="language-js">/m,
+          '</div><div class="copy-button-container"><button class="copy-button"></button></div><pre><code class="language-js">'
+        )
        .replace(
          /<pre><code class="language-js">([^\0]*?)<\/code><\/pre>/gm,
          (match, p1) =>
@ -520,9 +388,9 @@ try {
              Prism.languages.javascript
            )}</pre>`
        )
-        .replace(/<\/pre>\s+<pre/g, '</pre><label class="collapse">Show examples</label><pre') +
-      '<button class="primary clipboard-copy">&#128203;&nbsp;Copy to clipboard</button>' +
-      '</div></div></div></div>';
+        .replace(/<\/div>\s*<pre class="/g, '</div><pre class="section card-code ')
+        .replace(/<\/pre>\s+<pre class="/g, '</pre><label class="collapse">examples</label><pre class="section card-examples ') +
+      '</div>';

  // Optimize punctuation nodes
  archivedOutput = util.optimizeNodes(
@ -569,7 +437,6 @@ try {
  console.log(`${chalk.red('ERROR!')} During archive.html generation: ${err}`);
  process.exit(1);
 }
-*/

 // Log the time taken
 console.timeEnd('Webber');