[Chore] Update extractor for 30web

config.js

@@ -12,6 +12,12 @@ module.exports = {
   pagePath: `src/docs/pages`,
   staticPartsPath: `src/static-parts`,
   // General information
-  language: `jsx`,
-  optionalLanguage: `css`
+  language: {
+    short: `jsx`,
+    long: `JSX (React)`
+  },
+  optionalLanguage: {
+    short: `css`,
+    long: `CSS`
+  }
 };

scripts/build.js

@@ -92,13 +92,13 @@ try {
       output += snippet.attributes.text;
 
       if (snippet.attributes.codeBlocks.style !== '')
-        output += `\`\`\`${config.optionalLanguage}\n${snippet.attributes.codeBlocks.style}\n\`\`\`\n\n`;
+        output += `\`\`\`${config.optionalLanguage.short}\n${snippet.attributes.codeBlocks.style}\n\`\`\`\n\n`;
 
-      output += `\`\`\`${config.language}\n${snippet.attributes.codeBlocks.code}\n\`\`\``;
+      output += `\`\`\`${config.language.short}\n${snippet.attributes.codeBlocks.code}\n\`\`\``;
 
       output += misc.collapsible(
         'Examples',
-        `\`\`\`${config.language}\n${snippet.attributes.codeBlocks.example}\n\`\`\``
+        `\`\`\`${config.language.short}\n${snippet.attributes.codeBlocks.example}\n\`\`\``
       );
 
       output += '\n<br>' + misc.link('⬆ Back to top', misc.anchor('Contents')) + '\n';

scripts/extract.js

@@ -42,7 +42,9 @@ const completeData = {
   data: [...snippetsArray],
   meta: {
     specification: 'http://jsonapi.org/format/',
-    type: 'snippetArray'
+    type: 'snippetArray',
+    language: config.language,
+    otherLanguages: [config.optionalLanguage]
   }
 };
 let listingData = {
@@ -60,7 +62,9 @@ let listingData = {
   })),
   meta: {
     specification: 'http://jsonapi.org/format/',
-    type: 'snippetListingArray'
+    type: 'snippetListingArray',
+    language: config.language,
+    otherLanguages: [config.optionalLanguage]
   }
 };
 // Write files

scripts/util/helpers.js

@@ -35,10 +35,10 @@ const prepTaggedData = tagDbData =>
     );
 const makeExamples = data => {
   data =
-    data.slice(0, data.lastIndexOf(`\`\`\`${config.language}`)).trim() +
+    data.slice(0, data.lastIndexOf(`\`\`\`${config.language.short}`)).trim() +
     misc.collapsible(
       'Examples',
-      data.slice(data.lastIndexOf(`\`\`\`${config.language}`), data.lastIndexOf('```')) +
+      data.slice(data.lastIndexOf(`\`\`\`${config.language.short}`), data.lastIndexOf('```')) +
         data.slice(data.lastIndexOf('```'))
     );
   return `${data}\n<br>${misc.link('⬆ Back to top', misc.anchor('Contents'))}\n\n`;

scripts/util/snippetParser.js

@@ -49,8 +49,8 @@ const getCodeBlocks = str => {
       results.push(match);
     });
   }
-  const replacer = new RegExp(`\`\`\`${config.language}([\\s\\S]*?)\`\`\``, 'g');
-  const optionalReplacer = new RegExp(`\`\`\`${config.optionalLanguage}([\\s\\S]*?)\`\`\``, 'g');
+  const replacer = new RegExp(`\`\`\`${config.language.short}([\\s\\S]*?)\`\`\``, 'g');
+  const optionalReplacer = new RegExp(`\`\`\`${config.optionalLanguage.short}([\\s\\S]*?)\`\`\``, 'g');
   results = results.map(v =>
     v
       .replace(replacer, '$1')
@@ -103,7 +103,10 @@ const readSnippets = snippetsPath => {
           tags: data.attributes.tags.split(',').map(t => t.trim())
         },
         meta: {
-          hash: hashData(data.body)
+          hash: hashData(data.body),
+          firstSeen: execSync(`git log --diff-filter=A --pretty=format:%at -- snippets/${snippet}`).toString(),
+          lastUpdated: execSync(`git log -n 1 --pretty=format:%at -- snippets/${snippet}`).toString(),
+          updateCount: execSync(`git log --pretty=%H -- snippets/${snippet}`).toString().split('\n').length
         }
       };
     }

src/docs/components/SnippetCard.js

@@ -89,12 +89,12 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
         </button> */}
         {
           cardStyleHtml && <pre
-            className={`card-code language-${config.optionalLanguage}`}
+            className={`card-code language-${config.optionalLanguage.short}`}
             dangerouslySetInnerHTML={{ __html: cardStyleHtml }}
           />
         }
         <pre
-          className={`card-code language-${config.language}`}
+          className={`card-code language-${config.language.short}`}
           dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
         />
         <button
@@ -163,7 +163,7 @@ const ShortCard = ({
             />
           </CopyToClipboard>
           <pre
-            className={`card-code language-${config.language}`}
+            className={`card-code language-${config.language.short}`}
             dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
           />
         </div> : '' }

src/docs/util/index.js

@@ -26,11 +26,11 @@ const getCodeBlocks = str => {
     });
   }
   const replacer = new RegExp(
-    `<pre class="language-${config.language}"><code class="language-${config.language}">([\\s\\S]*?)</code></pre>`,
+    `<pre class="language-${config.language.short}"><code class="language-${config.language.short}">([\\s\\S]*?)</code></pre>`,
     'g',
   );
   const optionalReplacer = new RegExp(
-    `<pre class="language-${config.optionalLanguage}"><code class="language-${config.optionalLanguage}">([\\s\\S]*?)</code></pre>`,
+    `<pre class="language-${config.optionalLanguage.short}"><code class="language-${config.optionalLanguage.short}">([\\s\\S]*?)</code></pre>`,
     'g',
   );
   results = results.map(v =>
@@ -101,7 +101,7 @@ const getRawCodeBlocks = str => {
     });
   }
   const replacer = new RegExp(
-    `\`\`\`${config.language}([\\s\\S]*?)\`\`\``,
+    `\`\`\`${config.language.short}([\\s\\S]*?)\`\`\``,
     'g',
   );
   results = results.map(v => v.replace(replacer, '$1').trim());