Add custom snippet card type for blog

src/atoms/card/_index.scss

@@ -58,6 +58,7 @@
 
     li {
       line-height: 2;
+      margin: 0.75rem 0 0.5rem;
     }
   }
 }

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,91 @@
+@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.blog-list {
+    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;
+  }
+
+  p:last-child.blog-image-credit {
+    font-size: 0.875rem;
+    margin: 0 -1rem -1rem;
+    padding: 1rem 1rem 1rem 1.5rem;
+    border-radius: 0 0 0.25rem 0.25rem;
+  }
+
+}

src/organisms/snippetCard/blogSnippetCard/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Card from 'atoms/card';
+import TagList from 'molecules/tagList';
+import { Snippet as SnippetPropType } from 'typedefs';
+import { trimWhiteSpace } from 'functions/utils';
+import { Anchor } from 'atoms/anchor';
+
+const SnippetCard = ({
+  snippet,
+  className,
+  // eslint-disable-next-line no-unused-vars
+  toastContainer, // Keep here to suppress React warnings and not pass to children
+  ...rest
+}) => (
+  <Card className={ trimWhiteSpace`snippet-card ${className}` } { ...rest } >
+    <h4 className='card-title'>{ snippet.title }</h4>
+    <p className="card-meta-info">
+      { snippet.authors.map((a, i, arr) => (
+        <>
+          <Anchor
+            key={ i }
+            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] } />
+    { 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,
+  /** Any other arguments to be passed to the card */
+  rest: PropTypes.any,
+  toastContainer: 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