Add a cover flow page

data/en/bots/330003632298917889.md

@@ -10,6 +10,7 @@ github:
   owner: moustacheminer
   repo: discordmailhooks
 nsfw: false
+cover: https://webhooks.discordmail.com/img/stack.jpg
 ---
 
 #### Send and recieve E-Mails via your inbox

gatsby-node.js

@@ -122,6 +122,7 @@ exports.createPages = ({ actions, graphql }) => {
             frontmatter {
               application_id
               avatar
+              cover
               pagename
               prefix
               description

node/downloadImages.js

@@ -96,5 +96,30 @@ module.exports = (node, base64callback) => {
     sizes.forEach(size => imageError(size));
     base64callback(`data:image/png;base64,${invalidAvatarBase64}`);
   }
+
+  if (node.frontmatter.cover) {
+    const sharpreader = sharp();
+
+    if (node.frontmatter.cover) {
+      sharpreader
+        .clone()
+        .resize(1280, 720, {
+          fit: 'inside'
+        })
+        .toFile(path.join(__dirname, '..', 'public', 'userassets', `${node.fields.permalink}-cover.png`))
+        .catch(() => {
+          // If there's an error - Too bad!
+        });
+    }
+
+    request({
+      url: node.frontmatter.cover,
+      encoding: null
+    })
+      .on('error', () => {
+        // Too bad!
+      })
+      .pipe(sharpreader);
+  }
 
 };

package.json

@@ -31,9 +31,11 @@
     "react-helmet": "^5.2.0",
     "react-intl": "^2.6.0",
     "react-monaco-editor": "^0.18.0",
+    "react-slick": "^0.23.1",
     "request": "^2.88.0",
     "rimraf": "^2.6.2",
     "sharp": "^0.20.8",
+    "slick-carousel": "^1.8.1",
     "word-wrap": "^1.2.3"
   },
   "keywords": [

src/components/Carousel/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Slider from 'react-slick';
+// import { Link } from 'react-router-dom'
+
+import './index.scss';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+export default class ImageStrip extends React.Component {
+  render () {
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      className: 'carousel',
+      focusOnSelect: true,
+      centerMode: true
+    };
+
+    return (
+      <Slider {...settings}>
+        { this.props.children }
+      </Slider>
+    );
+  }
+}
+
+ImageStrip.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object),
+  className: PropTypes.arrayOf(PropTypes.string)
+};

src/components/Carousel/index.scss

@@ -0,0 +1,16 @@
+.slick-slider {
+  .slick-dots {
+    li button {
+      box-shadow: unset;
+      &:before {
+        color: #FFFFFF;
+      }
+    }
+    li.slick-active button {
+      box-shadow: unset;
+      &:before {
+        color: #FFFFFF;
+      }
+    }
+  }
+}

src/components/CarouselItem/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Link from 'gatsby-link';
+import Avatar from './../Avatar';
+import { FormattedMessage } from 'react-intl';
+import { ItemPropType } from './../../proptypes';
+
+import './index.scss';
+
+class CarouselItem extends React.Component {
+  render() {
+    const post = this.props.post;
+    const githubButton = post.frontmatter.github
+      && post.frontmatter.github.owner
+      && post.frontmatter.github.repo 
+      ? <a href={`https://github.com/${post.frontmatter.github.owner}/${post.frontmatter.github.repo}`} rel="noopener noreferrer" target="_blank"><FormattedMessage id="pages.list.github" /></a>
+      : null;
+
+    const carouselStyle = post.frontmatter.cover ? {
+      backgroundImage: `url('/userassets${this.props.post.fields.filelink}-cover.png')`
+    } : {
+      backgroundColor: '#282828'
+    };
+
+    const contentStyle = post.frontmatter.cover ? {
+      backgroundImage: 'linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0.7), rgba(0,0,0,0.4))'
+    } : null;
+
+    return (
+      <section className="carousel-item" style={carouselStyle}>
+        <div className="carousel-item-content" style={contentStyle}>
+          <div className="avatar">
+            <Avatar post={post}></Avatar>
+          </div>
+          <div className="card-content">
+            <Link to={post.fields.permalink}>
+              <h4 className="title">
+                {post.frontmatter.pagename}
+                {post.frontmatter.nsfw ? <span className="nsfw-tag">NSFW</span> : null }
+              </h4>
+            </Link>
+            <span className="description">{post.frontmatter.description}</span>
+          </div>
+          <div className="footer">
+            <a href={post.fields.filelink}><FormattedMessage id="pages.list.view" /></a>
+            <a href={post.frontmatter.link}><FormattedMessage id="pages.list.invite" /></a>
+            {githubButton}
+          </div>          
+        </div>
+      </section>
+    );
+  }
+}
+
+CarouselItem.propTypes = {
+  post: ItemPropType
+};
+
+export default CarouselItem;

src/components/CarouselItem/index.scss

@@ -0,0 +1,35 @@
+.carousel-item {
+  margin: 1em;
+  height: 25em;
+  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2),
+              0 0 0 1px #20222599;
+  background-size: cover;
+  border-radius: 6px;
+  position: relative;
+}
+
+.carousel-item-content {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 3em;
+  width: 100%;
+  height: 25em;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  .card-content {
+    flex-grow: 1;
+  }
+  .footer {
+    display: flex;
+    margin-top: 2em;
+    flex: 1;
+    a {
+      display: block;
+      line-height: 1;
+      margin-right: 1em;
+      padding: 0;
+    }
+  }
+}

src/locales/en.json

@@ -3,6 +3,7 @@
     "list": {
       "invite": "Invite",
       "github": "GitHub",
+      "view": "View this page",
       "star": "Star",
       "unstar": "Unstar",
       "nsfw": "NSFW",
@@ -92,6 +93,10 @@
         "title": "Avatar URL",
         "placeholder": "Any direct link to the server image"
       },
+      "bot_cover": {
+        "title": "Cover Image",
+        "placeholder": "http:// or https:// - The big cover image"
+      },
       "bot_support": {
         "title": "Support URL",
         "placeholder": "Something like: https://discord.gg/8uC6aKZ",