Update list, search and index to show demos and browser support

src/docs/components/SnippetCard.js

@@ -128,14 +128,8 @@ const FullCard = ({ snippetData, isDarkMode }) => {
 // ===================================================
 const ShortCard = ({
   snippetData,
-  withCode = false,
   isDarkMode
 }) => {
-  let cardCodeHtml;
-  if (withCode)
-    cardCodeHtml = `${optimizeAllNodes(
-      getCodeBlocks(snippetData.html).code,
-    )}`;
   return (
     <div className='card short'>
       <h4 className='card-title'>
@@ -153,32 +147,24 @@ const ShortCard = ({
           __html: `${getTextualContent(snippetData.html)}`,
         }}
       />
-      {withCode ? <div className='card-bottom'>
-        <CopyToClipboard
-          text={snippetData.code}
-          onCopy={() => {
-            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);
-          }}
-        >
-          <button
-            className='button button-a button-copy'
-            aria-label='Copy to clipboard'
-          />
-        </CopyToClipboard>
-        <pre
-          className={`card-code language-${config.language}`}
-          dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
-        />
-      </div> : '' }
+      <div className='card-bottom'>
+        <h5 className='card-section-demo-title'>Demo</h5>
+        <div className='card-snippet-demo' data-scope={snippetData.id}>
+          <style>
+            {snippetData.code.scopedCss}
+          </style>
+          <div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
+          {
+            snippetData.code.js &&
+            <script>
+              {`function()(${snippetData.code.js})();`}
+            </script>
+          }
+        </div>
+        <CodepenButton snippetData={snippetData} />
+        <h5 className='card-section-browser-support-title'>Browser support</h5>
+        <p className='browser-support-data'>{snippetData.supportPercentage}%</p>
+      </div>
     </div>
   );
 };

src/docs/pages/index.js

@@ -22,11 +22,8 @@ const IndexPage = props => {
     tags: snippet.attributes.tags,
     text: snippet.attributes.text,
     id: snippet.id,
-    code: getCodeBlocks(
-      props.data.allMarkdownRemark.edges.find(
-        v => v.node.frontmatter.title === snippet.title,
-      ).node.rawMarkdownBody,
-    ).code,
+    code: snippet.attributes.codeBlocks,
+    supportPercentage: snippet.attributes.browserSupport.supportPercentage,
   }));
 
   const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
@@ -125,13 +122,22 @@ export const indexPageQuery = graphql`
         }
       }
     }
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
+    snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
       data {
         id
         title
         attributes {
           tags
           text
+          codeBlocks {
+            html
+            css
+            js
+            scopedCss
+          }
+          browserSupport {
+            supportPercentage
+          }
         }
       }
     }

src/docs/pages/list.js

@@ -24,11 +24,8 @@ const ListPage = props => {
     tags: snippet.attributes.tags,
     text: snippet.attributes.text,
     id: snippet.id,
-    code: getCodeBlocks(
-      props.data.allMarkdownRemark.edges.find(
-        v => v.node.frontmatter.title === snippet.title,
-      ).node.rawMarkdownBody,
-    ).code,
+    code: snippet.attributes.codeBlocks,
+    supportPercentage: snippet.attributes.browserSupport.supportPercentage,
   }));
   const tags = snippets.reduce((acc, snippet) => {
     if (!snippet.tags) return acc;
@@ -57,7 +54,7 @@ const ListPage = props => {
           Click on a snippet’s name to view its code or a tag name to view all
           snippets in that category.
         </p>
-        {tags.map(tag => (
+        {tags.sort((a,b) => a.localeCompare(b)).map(tag => (
           <>
             <h3 className='tag-title' key={`tag_title_${tag}`}>
               <AniLink
@@ -114,13 +111,22 @@ export default connect(
 
 export const listPageQuery = graphql`
   query snippetListing {
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
+    snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
       data {
         id
         title
         attributes {
           tags
           text
+          codeBlocks {
+            html
+            css
+            js
+            scopedCss
+          }
+          browserSupport {
+            supportPercentage
+          }
         }
       }
     }

src/docs/pages/search.js

@@ -22,11 +22,8 @@ const SearchPage = props => {
     tags: snippet.attributes.tags,
     text: snippet.attributes.text,
     id: snippet.id,
-    code: getCodeBlocks(
-      props.data.allMarkdownRemark.edges.find(
-        v => v.node.frontmatter.title === snippet.title,
-      ).node.rawMarkdownBody,
-    ).code,
+    code: snippet.attributes.codeBlocks,
+    supportPercentage: snippet.attributes.browserSupport.supportPercentage,
   }));
 
   const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
@@ -110,13 +107,22 @@ export default connect(
 
 export const searchPageQuery = graphql`
   query searchSnippetList {
-    snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
+    snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
       data {
         id
         title
         attributes {
           tags
           text
+          codeBlocks {
+            html
+            css
+            js
+            scopedCss
+          }
+          browserSupport {
+            supportPercentage
+          }
         }
       }
     }

src/docs/styles/_card.scss

@@ -69,14 +69,14 @@
       background: var(--button-example-toggler-fore-color);
     }
   }
-  &.short {
-    .card-bottom {
-      display: none;
-      @media screen and (min-width: $layout-large-breakpoint) {
-        display: block;
-      }
-    }
-  }
+  // &.short {
+  //   .card-bottom {
+  //     display: none;
+  //     @media screen and (min-width: $layout-large-breakpoint) {
+  //       display: block;
+  //     }
+  //   }
+  // }
 }
 
 // Card sections