Setup server to handle article page (untested)

public/pages/blog/article/ArticlePage.jsx

@@ -22,3 +22,75 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+
+import { withLanguage } from '@public/language/Language';
+import { withArticleTemplate } from '@public/blog/Blog';
+
+import Page, { PageBoundary } from '@components/page/Page';
+
+import ErrorSection from '@sections/error/ErrorSection';
+import ClearSection from '@sections/layout/ClearSection';
+
+import Loader from '@objects/loading/Loader';
+import ContentBox from '@objects/content/box/ContentBox';
+import { Title, Paragraph } from '@objects/typography/typography';
+import Image from '@objects/image/Image';
+
+import Styles from './ArticlePage.scss';
+
+export default withArticleTemplate(withLanguage(props => {
+  let { error, pending, article, lang } = props;
+  let l = lang.pages.article;
+
+
+  let children;
+  if(error) error = <ErrorSection title={l.error.title} body={l.error.body} error={error} />;
+  if(pending) pending = <Loader />;
+
+  if(article) {
+    children = (
+      <PageBoundary>
+        <article
+          role="article" itemScope itemType="http://schema.org/Article"
+          className="p-article-page__article"
+        >
+          {/* Title */}
+          <ContentBox box itemProp="name" className="p-article-page__header">
+            <Title children={ article.title } />
+          </ContentBox>
+
+          {/* Image */}
+          <div className="p-article-page__picture">
+            <ContentBox box>
+              <Image
+                src={ article.image } maxWidth="800" loadable
+                className="p-article-page__picture-image"
+              />
+            </ContentBox>
+          </div>
+
+          {/* Description */}
+          <ContentBox box itemProp="description" className="p-article-page__description">
+            <Paragraph>
+              { article.description || article.shortDescription }
+            </Paragraph>
+          </ContentBox>
+        </article>
+      </PageBoundary>
+    );
+  }
+
+  return (
+    <Page
+      style="article-page" className="p-article-page"
+      title={error ? l.error.title : l.title}
+      background={require('@assets/images/banners/sunset.svg')}
+    >
+      <ClearSection />
+      { error }
+      { pending }
+      { children }
+      <ClearSection />
+    </Page>
+  );
+}));

public/pages/blog/article/ArticlePage.scss

@@ -0,0 +1,43 @@
+@import '~@styles/global';
+
+$p-article-page--spacing: 1.5em;
+
+.p-article-page {
+  &__article {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: stretch;
+  }
+
+  &__header,
+  &__picture,
+  &__description
+  {
+    width: 100%;
+  }
+
+  &__picture {
+    position: relative;
+
+    &-image {width: 100%;}
+    &-box {
+      position: sticky;
+      top:0;
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    position: relative;
+    &__header {
+      margin-bottom: $p-article-page--spacing;
+    }
+    &__picture {
+      width: 40%;
+      padding-right: $p-article-page--spacing;
+    }
+    &__description {
+      width: 60%;
+      padding-left: $p-article-page--spacing;
+    }
+  }
+}