diff --git a/config.js b/config.js
index 1412487cf..920db1bcd 100644
--- a/config.js
+++ b/config.js
@@ -12,7 +12,16 @@ module.exports = {
   pagePath: `src/docs/pages`,
   staticPartsPath: `src/static-parts`,
   // General information
-  language: `css`,
-  secondLanguage: `html`,
-  optionalLanguage: `js`
+  language: {
+    short: `css`,
+    long: `CSS`,
+  },
+  secondLanguage: {
+    short: `html`,
+    long: `HTML`
+  },
+  optionalLanguage:{ 
+    short: `js`,
+    long: `JavaScript`
+  }
 }
diff --git a/scripts/build.js b/scripts/build.js
index 24c3e96aa..caf6f4f50 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -91,10 +91,10 @@ try {
 
       output += snippet.attributes.text
 
-      output += `\`\`\`${config.secondLanguage}\n${snippet.attributes.codeBlocks.html}\n\`\`\`\n\n`
-      output += `\`\`\`${config.language}\n${snippet.attributes.codeBlocks.css}\n\`\`\`\n\n`
+      output += `\`\`\`${config.secondLanguage.short}\n${snippet.attributes.codeBlocks.html}\n\`\`\`\n\n`
+      output += `\`\`\`${config.language.short}\n${snippet.attributes.codeBlocks.css}\n\`\`\`\n\n`
       if (snippet.attributes.codeBlocks.js)
-        output += `\`\`\`${config.optionalLanguage}\n${snippet.attributes.codeBlocks.js}\n\`\`\`\n\n`
+        output += `\`\`\`${config.optionalLanguage.short}\n${snippet.attributes.codeBlocks.js}\n\`\`\`\n\n`
 
       output += headers.h4('Explanation')
       output += snippet.attributes.explanation
diff --git a/scripts/extract.js b/scripts/extract.js
index ca07e5c10..8280dad5e 100644
--- a/scripts/extract.js
+++ b/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.secondLanguage, 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.secondLanguage, config.optionalLanguage]
   }
 }
 // Write files
diff --git a/scripts/util/helpers.js b/scripts/util/helpers.js
index 006aa41b6..ae8cb398f 100644
--- a/scripts/util/helpers.js
+++ b/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`
diff --git a/scripts/util/snippetParser.js b/scripts/util/snippetParser.js
index e5294ad5e..3fb5d6ca9 100644
--- a/scripts/util/snippetParser.js
+++ b/scripts/util/snippetParser.js
@@ -51,9 +51,9 @@ const getCodeBlocks = str => {
       results.push(match)
     })
   }
-  const replacer = new RegExp(`\`\`\`${config.language}([\\s\\S]*?)\`\`\``, 'g')
-  const secondReplacer = new RegExp(`\`\`\`${config.secondLanguage}([\\s\\S]*?)\`\`\``, 'g')
-  const optionalReplacer = new RegExp(`\`\`\`${config.optionalLanguage}([\\s\\S]*?)\`\`\``, 'g')
+  const replacer = new RegExp(`\`\`\`${config.language.short}([\\s\\S]*?)\`\`\``, 'g')
+  const secondReplacer = new RegExp(`\`\`\`${config.secondLanguage.short}([\\s\\S]*?)\`\`\``, 'g')
+  const optionalReplacer = new RegExp(`\`\`\`${config.optionalLanguage.short}([\\s\\S]*?)\`\`\``, 'g')
   results = results.map(v =>
     v
       .replace(replacer, '$1')
@@ -159,7 +159,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
         }
       }
       snippets[snippet].attributes.codeBlocks.scopedCss = sass
diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js
index d6e9a504a..8e329ad32 100644
--- a/src/docs/components/SnippetCard.js
+++ b/src/docs/components/SnippetCard.js
@@ -81,19 +81,19 @@ const FullCard = ({ snippetData, isDarkMode }) => {
       <div className='card-bottom'>
         <h5 className='card-section-title card-section-html'>HTML</h5>
         <pre
-          className={`card-code language-${config.secondLanguage}`}
+          className={`card-code language-${config.secondLanguage.short}`}
           dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
         />
         <h5 className='card-section-title card-section-css'>CSS</h5>
         <pre
-          className={`card-code language-${config.language}`}
+          className={`card-code language-${config.language.short}`}
           dangerouslySetInnerHTML={{ __html: cardCodeCss }}
         />
         {
           cardCodeJs && <>
             <h5 className='card-section-title card-section-js'>JavaScript</h5>
             <pre
-              className={`card-code language-${config.optionalLanguage}`}
+              className={`card-code language-${config.optionalLanguage.short}`}
               dangerouslySetInnerHTML={{ __html: cardCodeJs }}
             />
           </>
diff --git a/src/docs/util/index.js b/src/docs/util/index.js
index 0d1568d71..e4eae5542 100644
--- a/src/docs/util/index.js
+++ b/src/docs/util/index.js
@@ -56,15 +56,15 @@ 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 secondReplacer = new RegExp(
-    `<pre class="language-${config.secondLanguage}"><code class="language-${config.secondLanguage}">([\\s\\S]*?)</code></pre>`,
+    `<pre class="language-${config.secondLanguage.short}"><code class="language-${config.secondLanguage.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 =>
@@ -136,7 +136,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());