Add blog template for SnippetCard organism

src/organisms/snippetCard/_index.scss

@@ -1,2 +1,3 @@
 @import './standardSnippetCard';
-@import './cssSnippetCard';
+@import './cssSnippetCard';
+@import './blogSnippetCard';

src/organisms/snippetCard/blogSnippetCard/_index.scss

@@ -0,0 +1,84 @@
+@import '../../../atoms/card/mixins';
+
+// Colors
+:root {
+  --blog-quote-border-color: #212631;
+}
+
+.snippet-card {
+
+  .card-meta-info {
+    font-size: 0.875rem;
+    margin-top: 0;
+    margin-bottom: 1.25rem;
+    color: var(--card-fore-color-light);
+    a {
+      &, &:link, &:visited {
+        color: var(--card-fore-color-light);
+      }
+    }
+  }
+
+  .card-cover-image {
+    --cover-aspect-ratio: 1.78;
+    @include card-full-width-section;
+    margin-top: 0.375rem;
+    min-width: calc(100% + 2rem);
+    object-fit: cover;
+    margin-bottom: 1rem;
+    min-height: calc(240px / var(--cover-aspect-ratio));
+    max-height: calc(640px / var(--cover-aspect-ratio));
+  }
+
+  ol {
+    list-style: none;
+    counter-reset: list-item-counter;
+
+    li {
+      counter-increment: list-item-counter;
+      position: relative;
+
+      &:before {
+        content: counter(list-item-counter) ". ";
+        position: absolute;
+        top: 0;
+        left: -1.5rem;
+        width: 1.5rem;
+        line-height: 1.5rem;
+        text-align: right;
+      }
+
+      p:not(:first-child) {
+        line-height: 2;
+      }
+    }
+
+    .blog-list-item {
+      margin-bottom: 1.5rem;
+
+      &:before {
+        font-weight: 600;
+      }
+
+      > p:first-child:not(:last-child) {
+        font-weight: 600;
+      }
+    }
+  }
+
+  pre.blog-code {
+    @include card-full-width-section;
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  blockquote.blog-quote {
+    margin: 0.8125rem 0.5rem 1.5rem -1rem;
+    padding-left: 1.5rem;
+    box-shadow: inset 4px 0 0 0 var(--blog-quote-border-color);
+    font-style: italic;
+    line-height: 2;
+    font-size: 1.25rem;
+    font-weight: 300;
+  }
+
+}

src/organisms/snippetCard/blogSnippetCard/index.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import Card from 'atoms/card';
+import TagList from 'molecules/tagList';
+import CodeBlock from 'atoms/codeBlock';
+import { CopyButton, CodepenButton } from 'atoms/button';
+import Toast from 'atoms/toast';
+import { Snippet as SnippetPropType } from 'typedefs';
+import { trimWhiteSpace } from 'functions/utils';
+import { Anchor } from 'atoms/anchor';
+import { JSX_SNIPPET_PRESETS } from 'shared';
+import _ from 'lang';
+const _l = _('en');
+
+const SnippetCard = ({
+  snippet,
+  className,
+  toastContainer,
+  ...rest
+}) => (
+  <Card className={ trimWhiteSpace`snippet-card ${className}` } { ...rest } >
+    <h4 className='card-title'>{ snippet.title }</h4>
+    { /* TODO: Handle this properly, with classes etc. - Also handle the authors field in the PropType */ }
+    <p className="card-meta-info">
+      { snippet.authors.map((a, i, arr) => (
+        <>
+          <Anchor link={ {
+            internal: false,
+            url: a.profile,
+            rel: 'noopener noreferrer nofollow',
+            target: '_blank',
+          } }>
+            { a.name }
+          </Anchor>
+          { i !== arr.length - 1 ? ', ' : '' }
+        </>
+      )) }
+      { ' · ' }
+      {
+        new Date(snippet.firstSeen).toLocaleDateString('en-US', {
+          day: 'numeric', month: 'short', year: 'numeric',
+        })
+      }
+    </p>
+    <TagList tags={ [ ...snippet.tags.all] } />
+    { /* TODO: Extract an atom from this */ }
+    { /* { snippet.coverSrc ?
+      <div
+        className='card-cover-image'
+        style={ { backgroundImage: `url("${encodeURI(snippet.coverSrc)}")` } }
+      />
+      : null } */ }
+    { snippet.cover && snippet.cover.src ?
+      <img
+        className='card-cover-image'
+        src={ snippet.cover.src }
+      />
+      : null }
+    <div
+      className='card-description'
+      dangerouslySetInnerHTML={ { __html: `${snippet.html.fullDescription}` } }
+    />
+  </Card>
+);
+
+SnippetCard.propTypes = {
+  /** Snippet data for the card */
+  snippet: SnippetPropType,
+  /** Additional classes for the card */
+  className: PropTypes.string,
+  /** The id of a DOM node used to render the toast when copying the snippet */
+  toastContainer: PropTypes.node,
+  /** Any other arguments to be passed to the card */
+  rest: PropTypes.any,
+};
+
+export default SnippetCard;

src/organisms/snippetCard/index.jsx

@@ -3,17 +3,25 @@ import PropTypes from 'prop-types';
 
 import StandardSnippetCard from './standardSnippetCard';
 import CssSnippetCard from './cssSnippetCard';
+import BlogSnippetCard from './blogSnippetCard';
 
 export {
   StandardSnippetCard,
   CssSnippetCard,
+  BlogSnippetCard,
 };
 
 const SnippetCard = ({
   cardTemplate,
   ...rest
 }) => {
   switch (cardTemplate) {
+  case 'blog':
+    return (
+      <BlogSnippetCard
+        { ...rest }
+      />
+    );
   case 'css':
     return (
       <CssSnippetCard

src/templates/snippetPage/index.jsx

@@ -16,8 +16,8 @@ const templateData = {
   pageType: 'snippet',
 };
 // TODO: Handle blog post descriptions properly.
-const determineDescription = snippet =>
-  (!snippet.language || !snippet.language.long) ? '' :
+const determineDescription = (snippet, cardTemplate) =>
+  (cardTemplate === 'blog') ? snippet.description :
     _l`site.pageDescription${{...templateData, snippetName: snippet.title, snippetLanguage: snippet.language.long }}`;
 
 const SnippetPage = ({
@@ -36,7 +36,7 @@ const SnippetPage = ({
     <>
       <Meta
         title={ snippet.title }
-        description={ determineDescription(snippet) }
+        description={ determineDescription(snippet, cardTemplate) }
         logoSrc={ cardTemplate === 'blog' ? snippet.cover.src : splashLogoSrc }
         structuredData={ {
           title: snippet.title,