Added CacheStore server side, working with blog on client side more.

public/components/section/blog/article/ArticleGridSection.jsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+import { PageBoundary } from '@components/page/Page';
+
+import Section from '@sections/Section';
+
+import ArticleThumbnail from '@objects/blog/article/ArticleThumbnail';
+
+import Styles from './ArticleGridSection.scss';
+
+export default props => {
+  let { className, articles } = props;
+  articles = articles || [];
+
+  return (
+    <Section className={`c-article-grid ${className||""}`}>
+      <PageBoundary className="c-article-grid__grid">
+        { articles.map((article,index) => {
+          return <ArticleThumbnail
+            key={index} article={article} index={index}
+            className="c-article-grid__article"
+          />
+        }) }
+      </PageBoundary>
+    </Section>
+  );
+}

public/components/section/blog/article/ArticleGridSection.scss

@@ -0,0 +1,33 @@
+/*
+ *  Article Grid Section
+ *    Styles for the Article Grid Section, aligns sets of articles out in a nice
+ *    grid with some additional styling depending on the count etc.
+ *
+ *  Version:
+ *    1.0.0 - 2018/10/31
+ */
+@import '~@styles/global';
+
+.c-article-grid {
+  &__grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+  }
+
+  &__article {
+    width: 100%;
+  }
+
+  @include t-media-query($s-xsmall-up) {
+    &__article {
+      width: 50%;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__article {
+      width: (100%/3);
+    }
+  }
+}

public/components/section/blog/article/FeaturedArticleSection.jsx

@@ -22,8 +22,9 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
-
+import { withLanguage } from '@public/language/Language';
 import BannerImageSection from '@sections/image/banner/BannerImageSection';
 import { PageBoundary } from '@components/page/Page';
 
@@ -34,8 +35,8 @@ import { Title, Paragraph } from '@objects/typography/Typography';
 
 import Styles from './FeaturedArticleSection.scss';
 
-export default props => {
-  let { article } = props;
+export default withLanguage(props => {
+  let { article, lang } = props;
 
   return (
     <BannerImageSection
@@ -46,17 +47,18 @@ export default props => {
 
         <ContentBox box className="c-featured-article__header">
           <Title className="c-featured-article__title">
-            { article.title }
+            <NavLink to={ article.url } children={ article.title} />
           </Title>
         </ContentBox>
 
         <ContentBox box className="c-featured-article__body">
           <Paragraph className="c-featured-article__description">
-            { article.shortDescription }
+            { article.shortDescription }&nbsp;
+            <NavLink to={ article.url } children={ lang.blog.article.readMore } />
           </Paragraph>
         </ContentBox>
 
       </PageBoundary>
     </BannerImageSection>
   );
-};
+});