Cards with browser support (WIP)

src/docs/components/SnippetCard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import config from '../../../config';
 
-import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util';
+import { getTextualContent, getCodeBlocks, optimizeAllNodes, getExplanation, getBrowserSupport } from '../util';
 // import ShareIcon from './SVGs/ShareIcon';
 import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
@@ -76,24 +76,21 @@ const FullCard = ({ snippetData, isDarkMode }) => {
           </style>
           <div dangerouslySetInnerHTML={{__html: snippetData.code.html}} />
         </div>
-        {/* <button
+        <h5 className='card-section-explanation-title'>Explanation</h5>
-          className='button button-example-toggler'
+        <div
-          onClick={() => setExamplesOpen(!examplesOpen)}
+          className='card-explanation'
-        >
+          dangerouslySetInnerHTML={{
-          {examplesOpen ? <CollapseOpenIcon /> : <CollapseClosedIcon />}Examples
+            __html: `${getExplanation(snippetData.html)}`,
-        </button>
+          }}
-        <ReactCSSTransitionReplace
+        />
-          transitionName='roll-up'
+        <h5 className='card-section-browser-support-title'>Browser support</h5>
-          transitionEnterTimeout={300}
+        <p className='browser-support-data'>{snippetData.supportPercentage}%</p>
-          transitionLeaveTimeout={300}
+        <div
-        >
+          className='card-browser-support'
-          {examplesOpen && (
+          dangerouslySetInnerHTML={{
-            <pre
+            __html: `${getBrowserSupport(snippetData.html)}`,
-              className={`section card-examples language-${config.language}`}
+          }}
-              dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
+        />
-            />
-          )}
-        </ReactCSSTransitionReplace> */}
       </div>
     </div>
   );

src/docs/styles/_card.scss

@@ -100,7 +100,7 @@
   }
 }
 
-.card-section-demo-title {
+.card-section-demo-title, .card-section-explanation-title,.card-section-browser-support-title {
   margin: 0.5rem 1rem .5rem;
   color: var(--card-fore-color-light);
   font-size: 1rem;
@@ -108,6 +108,29 @@
   line-height: 2.25;
 }
 
+.card-explanation, .card-browser-support {
+  margin: 0.5rem;
+  p, li {
+    line-height: 1.75;
+    margin-bottom: 0.5rem;
+  }
+  position: relative;
+  width: calc( 100% + 3rem);
+  display: block;
+}
+
+.card-browser-support {
+  margin: 1rem;
+}
+
+.browser-support-data {
+  font-size: 1.75rem;
+  font-weight: 300;
+  color: var(--card-fore-color-light);
+  line-height: 1;
+  margin: 0.5rem 1rem .5rem;
+}
+
 .card-snippet-demo {
   width: calc(100% - 0.25rem);
   margin: 0.5rem 1rem .5rem;

src/docs/templates/SnippetPage.js

@@ -38,6 +38,7 @@ const SnippetPage = props => {
             html: post.html,
             code: postData.attributes.codeBlocks,
             tags: postData.attributes.tags,
+            supportPercentage: postData.attributes.browserSupport.supportPercentage
           }}
           isDarkMode={props.isDarkMode}
         />
@@ -102,6 +103,9 @@ export const pageQuery = graphql`
             js
             scopedCss
           }
+          browserSupport {
+            supportPercentage
+          }
           tags
         }
       }

src/docs/util/index.js

@@ -22,6 +22,36 @@ const getTextualContent = (str, noExplain = false) => {
   return results[1];
 };
 
+// Gets the explanation for a snippet file.
+const getExplanation = str => {
+  const regex = /<h4>\s*Explanation\s*<\/h4>([\s\S]*)<h4>/g;
+  const results = [];
+  let m = null;
+  while ((m = regex.exec(str)) !== null) {
+    if (m.index === regex.lastIndex) regex.lastIndex += 1;
+
+    m.forEach((match, groupIndex) => {
+      results.push(match);
+    });
+  }
+  return results[1].replace(/\r\n/g, '\n');
+};
+
+// Gets the browser support for a snippet file.
+const getBrowserSupport = str => {
+  const regex = /<h4>\s*Browser [s|S]upport\s*<\/h4>([\s\S]*)/g;
+  const results = [];
+  let m = null;
+  while ((m = regex.exec(str)) !== null) {
+    if (m.index === regex.lastIndex) regex.lastIndex += 1;
+
+    m.forEach((match, groupIndex) => {
+      results.push(match);
+    });
+  }
+  return results[1].replace(/\r\n/g, '\n');
+};
+
 // Gets the code blocks in a gatsby page
 const getCodeBlocks = str => {
   const regex = /<pre[.\S\s]*?<\/pre>/g;
@@ -131,5 +161,7 @@ module.exports = {
   getCodeBlocks,
   optimizeNodes,
   optimizeAllNodes,
+  getExplanation,
   getRawCodeBlocks,
+  getBrowserSupport
 };