Merge pull request #298 from 30-seconds/collection-images

Resolves #238

src/blocks/adapters/snippetCollectionListing/index.js

@@ -48,6 +48,10 @@ export class SnippetCollectionListing {
     return this.snippetCollection.description;
   }
 
+  get listingImage() {
+    return this.snippetCollection.splash;
+  }
+
   get listingSublinks() {
     if (this.snippetCollection.type === 'blog') {
       return [];
@@ -80,6 +84,7 @@ export class SnippetCollectionListing {
     'listingName',
     'listingTitle',
     'listingDescription',
+    'listingImage',
     'listingType',
     'listingSublinks',
     'pageDescription',

src/blocks/entities/snippetCollection/index.js

@@ -239,6 +239,40 @@ export class SnippetCollection {
     return this._description;
   }
 
+  get splash() {
+    if (!this._splash) {
+      switch (this.type) {
+        case 'main':
+          this._splash = null;
+          break;
+        case 'blog':
+          this._splash = null;
+          break;
+        case 'language':
+          this._splash = this.config.splash
+            ? `${this.config.assetPath}/${this.config.splash}`
+            : null;
+          break;
+        case 'tag':
+          this._splash =
+            this.tagMetadata && this.tagMetadata.splash
+              ? `${this.config.assetPath}/${this.tagMetadata.splash}`
+              : this.config.splash
+              ? `${this.config.assetPath}/${this.config.splash}`
+              : null;
+          break;
+        case 'collection':
+          this._splash = this.config.splash
+            ? `${this.config.assetPath}/${this.config.splash}`
+            : null;
+          break;
+        default:
+          break;
+      }
+    }
+    return this._splash;
+  }
+
   get seoDescription() {
     if (!this._seoDescription) {
       this._seoDescription = literals.listing.pageDescription(this.type, {

src/blocks/serializers/asset/index.js

@@ -42,6 +42,7 @@ export class AssetSerializer {
     const boundLog = Logger.bind('serializers.asset.serialize');
     const {
       rawAssetPath: inPath,
+      rawContentAssetPath: inContentPath,
       assetPath: outPath,
       rawContentPath: contentPath,
       staticAssetPath: staticAssetPath,
@@ -57,6 +58,7 @@ export class AssetSerializer {
     );
     fs.ensureDirSync(outPath);
     await fs.copy(inPath, outPath);
+    await fs.copy(inContentPath, outPath);
     boundLog('Static assets have been copied', 'success');
 
     boundLog(`Processing image assets from configuration files`, 'info');

src/components/molecules/listingAnchors/_index.scss

@@ -59,7 +59,7 @@
     min-width: 100%;
     padding: 0.375rem 0.25rem;
     line-height: 1.5rem;
-    height: 48px;
+    height: 40px;
     border: none;
     box-shadow: none;
     text-align: center;
@@ -80,6 +80,11 @@
 
     @media screen and (min-width: $layout-medium-breakpoint) {
       padding: 0.625rem 0.875rem;
+      height: 48px;
+    }
+
+    @media screen and (min-width: $layout-large-breakpoint) {
+      height: 52px;
     }
   }
 }

src/components/organisms/snippetList/_index.scss

@@ -13,12 +13,49 @@
   }
 }
 
+.snippet-list-header {
+
+  &.with-image {
+
+    .page-title {
+      display: block;
+      text-align: center;
+    }
+
+    @media screen and (min-width: $layout-medium-breakpoint) {
+      display: grid;
+      grid-template-columns: auto 240px;
+      align-items: center;
+      min-height: 340px;
+
+      .page-title {
+        text-align: left;
+      }
+    }
+
+    @media screen and (min-width: $layout-large-breakpoint) {
+      min-height: 300px;
+      grid-template-columns: auto 360px;
+    }
+  }
+}
+
 .snippet-list-description {
   margin: 1rem 0.875rem 0.5rem;
   line-height: 2;
   color: var(--fore-color);
 }
 
+.snippet-list-splash-image {
+  margin: 0.5rem 0.875rem 0.5rem;
+  width: calc(100% - 1.75rem);
+  max-height: 25vh;
+
+  @media screen and (min-width: $layout-medium-breakpoint) {
+    order: 2;
+  }
+}
+
 .snippet-list-controls {
   margin: 0.25rem 0.875rem 1.5rem;
   display: grid;

src/components/organisms/snippetList/index.jsx

@@ -5,13 +5,15 @@ import Sorter from 'components/molecules/sorter';
 import PageTitle from 'components/atoms/pageTitle';
 import PreviewCard from 'components/molecules/previewCard';
 import ListingAnchors from 'components/molecules/listingAnchors';
+import combineClassNames from '@chalarangelo/combine-class-names';
 
 const propTypes = {
   snippetList: PropTypes.arrayOf(PropTypes.snippet),
   paginator: PropTypes.paginator,
   sorter: PropTypes.sorter,
   listingName: PropTypes.string,
   listingDescription: PropTypes.string,
+  listingImage: PropTypes.string,
   listingType: PropTypes.string,
   listingSublinks: PropTypes.arrayOf(PropTypes.shape({})),
 };
@@ -27,11 +29,11 @@ const SnippetList = ({
   sorter,
   listingName,
   listingDescription = '',
+  listingImage = '',
   listingType,
   listingSublinks = [],
 }) => {
   /* istanbul ignore next */
-  const ctaIndex = 4;
   const isMainOrBlogListing = listingType === 'main' || listingType === 'blog';
   const withSorter = sorter && sorter.orders && sorter.orders.length > 1;
 
@@ -46,10 +48,27 @@ const SnippetList = ({
         </>
       ) : (
         <>
-          <PageTitle>{listingName}</PageTitle>
-          {listingDescription && listingDescription.length ? (
-            <p className='snippet-list-description'>{listingDescription}</p>
-          ) : null}
+          <div
+            className={combineClassNames`snippet-list-header ${
+              listingImage ? 'with-image' : ''
+            }`}
+          >
+            {listingImage ? (
+              <img
+                className='snippet-list-splash-image'
+                src={listingImage}
+                alt=''
+                height='360'
+                width='360'
+              />
+            ) : null}
+            <div>
+              <PageTitle>{listingName}</PageTitle>
+              {listingDescription && listingDescription.length ? (
+                <p className='snippet-list-description'>{listingDescription}</p>
+              ) : null}
+            </div>
+          </div>
           <div className='snippet-list-controls'>
             {listingSublinks.length ? (
               <ListingAnchors items={listingSublinks} />
@@ -61,7 +80,7 @@ const SnippetList = ({
       <ul className='snippet-list'>
         {snippetList.map(snippet => (
           <PreviewCard key={`snippet_${snippet.url}`} snippet={snippet} />
-          ))}
+        ))}
       </ul>
       <Paginator paginator={paginator} />
     </>

src/components/templates/listingPage/index.jsx

@@ -12,6 +12,7 @@ const propTypes = {
     listingName: PropTypes.string,
     listingTitle: PropTypes.string,
     listingDescription: PropTypes.string,
+    listingImage: PropTypes.string,
     listingType: PropTypes.string,
     listingSublinks: PropTypes.arrayOf(PropTypes.shape({})),
     pageDescription: PropTypes.string.isRequired,
@@ -31,6 +32,7 @@ const ListingPage = ({
     listingName,
     listingTitle,
     listingDescription,
+    listingImage,
     listingType,
     listingSublinks = [],
     pageDescription,
@@ -53,6 +55,7 @@ const ListingPage = ({
         <SnippetList
           listingName={listingTitle}
           listingDescription={listingDescription}
+          listingImage={listingImage}
           listingType={listingType}
           snippetList={snippetList}
           paginator={paginator}

src/settings/paths.json

@@ -2,6 +2,7 @@
   "settingsPath": "src/settings/!(global|paths).json",
   "assetPath": ".assets",
   "rawAssetPath": "assets",
+  "rawContentAssetPath": "content/configs/assets",
   "staticAssetPath": "assets",
   "contentPath": ".content",
   "rawContentPath": "content",