apps/blog/src/components/page/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Page({ children }) {
+  return (
+    <div className="flex flex-col max-w-[1400px] mx-auto px-1 md:px-3 md:flex-row relative">
+      <section className="shrink-0 grow-0 basis-full">{children}</section>
+    </div>
+  )
+}

apps/blog/src/templates/blog-post-list-content.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import BlogPostCard from '../components/blog-post-card'
 import Paginator from '../components/paginator'
+import Page from '../components/page'
 
 import * as styles from './page.module.css'
 
@@ -21,15 +22,13 @@ export default function BlogPostListContent({
   })
 
   return (
-    <div className={styles.layout}>
-      <section className={styles.main}>
-        <div className={styles.blogPosts}>{BlogPosts}</div>
-        <Paginator
-          currentPage={pageInfo.currentPage}
-          totalPages={pageInfo.totalPages}
-          currentPath={location.pathname}
-        />
-      </section>
-    </div>
+    <Page>
+      <div className={styles.blogPosts}>{BlogPosts}</div>
+      <Paginator
+        currentPage={pageInfo.currentPage}
+        totalPages={pageInfo.totalPages}
+        currentPath={location.pathname}
+      />
+    </Page>
   )
 }

apps/blog/src/templates/blog-post-list.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 
-import Page from './page'
+import Metadata from './metadata'
 import BlogPostListContent from './blog-post-list-content'
 
 export default function BlogPostListPage({ data, pageContext, location }) {
@@ -11,13 +11,13 @@ export default function BlogPostListPage({ data, pageContext, location }) {
   }
 
   return (
-    <Page siteUrl={data.site.siteMetadata.siteUrl}>
+    <Metadata siteUrl={data.site.siteMetadata.siteUrl}>
       <BlogPostListContent
         allPostsData={data.allStrapiArticle}
         pageInfo={pageInfo}
         location={location}
       />
-    </Page>
+    </Metadata>
   )
 }
 

apps/blog/src/templates/blog-post-page/index.jsx

@@ -1,60 +1,58 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 import { Helmet } from 'react-helmet'
-import Page from '../page'
+import Metadata from '../metadata'
+import Page from '../../components/page'
 import Breadcrumbs from '../../components/breadcrumbs'
 
-import * as pageStyles from '../page.module.css'
 import * as postStyles from './blog-post.module.css'
 
 export default function BlogPostPage({ data }) {
   const { strapiArticle: post } = data
 
   // TODO: should it be setting all of this meta data? Some of it lives within the Page element itself
   return (
-    <Page siteUrl={data.site.siteMetadata.siteUrl}>
-      <div className={pageStyles.layout}>
-        <Helmet>
-          <title>{post.html_title}</title>
-          <meta name="description" content={post.html_title} />
-          {/* <meta property='og:image' content={data.site.siteMetadata.siteUrl + post.featured_image.childImageSharp.fluid.src} /> */}
-          <meta property="og:type" content="article" />
-          <meta property="article:section" content="blog" />
-          {/* {(recipe.tags || []).map((tag, index) => <meta property='article:tag' content={tag} key={index}/>)} */}
-        </Helmet>
+    <Metadata siteUrl={data.site.siteMetadata.siteUrl}>
+      <Helmet>
+        <title>{post.html_title}</title>
+        <meta name="description" content={post.html_title} />
+        {/* <meta property='og:image' content={data.site.siteMetadata.siteUrl + post.featured_image.childImageSharp.fluid.src} /> */}
+        <meta property="og:type" content="article" />
+        <meta property="article:section" content="blog" />
+        {/* {(recipe.tags || []).map((tag, index) => <meta property='article:tag' content={tag} key={index}/>)} */}
+      </Helmet>
 
-        <section className={pageStyles.main}>
-          <article className={postStyles.post}>
-            <div className={postStyles.postIntro}>
-              <div className={postStyles.postNavigation}>
-                <Breadcrumbs subsectionName="blog" subsectionSlug="blog" />
-              </div>
+      <Page>
+        <article className={postStyles.post}>
+          <div className={postStyles.postIntro}>
+            <div className={postStyles.postNavigation}>
+              <Breadcrumbs subsectionName="blog" subsectionSlug="blog" />
+            </div>
 
-              <h1 className={postStyles.postTitle}>{post.title}</h1>
+            <h1 className={postStyles.postTitle}>{post.title}</h1>
 
-              {/*TODO: can be a component since it's used on both pages*/}
-              <span className={postStyles.datePublished}>
-                {post.published_at}
-              </span>
+            {/*TODO: can be a component since it's used on both pages*/}
+            <span className={postStyles.datePublished}>
+              {post.published_at}
+            </span>
 
-              <div
-                className={postStyles.postHeadline}
-                dangerouslySetInnerHTML={{
-                  __html: post.parsedHeadline.childMarkdownRemark.html,
-                }}
-              ></div>
-            </div>
-            <div className={postStyles.postBody}>
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: post.parsedContent.childMarkdownRemark.html,
-                }}
-              ></div>
-            </div>
-          </article>
-        </section>
-      </div>
-    </Page>
+            <div
+              className={postStyles.postHeadline}
+              dangerouslySetInnerHTML={{
+                __html: post.parsedHeadline.childMarkdownRemark.html,
+              }}
+            ></div>
+          </div>
+          <div className={postStyles.postBody}>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: post.parsedContent.childMarkdownRemark.html,
+              }}
+            ></div>
+          </div>
+        </article>
+      </Page>
+    </Metadata>
   )
 }
 

apps/blog/src/templates/error-404.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import * as styles from './error.module.css'
-
 export default function Error404() {
-  return <div className={styles.layout}>Było i nie ma :(</div>
+  return <div className="px-[160px] text-center">Było i nie ma :(</div>
 }

apps/blog/src/templates/page.jsx → apps/blog/src/templates/metadata.jsx

@@ -8,7 +8,7 @@ import appleTouchIcon from '../components/layout/assets/apple-touch-icon.png'
 import safariPinnedTab from '../components/layout/assets/safari-pinned-tab.svg'
 import defaultOgImage from '../components/layout/assets/default_og_image.jpg'
 
-export default function Page({ siteUrl, children }) {
+export default function Metadata({ siteUrl, children }) {
   return (
     <React.Fragment>
       <Helmet>

apps/blog/src/templates/page.module.css

@@ -1,26 +1,6 @@
 @value breakpoints: '../components/breakpoints.css';
 @value tablet-up, phone-l from breakpoints;
 
-.layout {
-  display: flex;
-  flex-direction: column;
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 0 10px;
-  position: relative;
-}
-
-@media phone-l-up {
-  .layout {
-    padding: 0 20px;
-    flex-direction: row;
-  }
-}
-
-.main {
-  flex: 0 0 100%;
-}
-
 .posts {
   display: flex;
   flex-wrap: wrap;

apps/blog/src/templates/post-list-by-category.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import { Helmet } from 'react-helmet'
 
-import Page from './page'
+import Metadata from './metadata'
 import PostListContent from './post-list-content'
 
 export default function PostListByCategoryPage({
@@ -16,7 +16,7 @@ export default function PostListByCategoryPage({
   }
 
   return (
-    <Page siteUrl={data.site.siteMetadata.siteUrl}>
+    <Metadata siteUrl={data.site.siteMetadata.siteUrl}>
       <Helmet>
         <meta
           name="description"
@@ -29,7 +29,7 @@ export default function PostListByCategoryPage({
         pageInfo={pageInfo}
         location={location}
       />
-    </Page>
+    </Metadata>
   )
 }
 

apps/blog/src/templates/post-list-by-tag.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 
-import Page from './page'
+import Metadata from './metadata'
 import PostListContent from './post-list-content'
 
 export default function PostListByTagPage({ data, pageContext, location }) {
@@ -11,23 +11,23 @@ export default function PostListByTagPage({ data, pageContext, location }) {
   }
 
   return (
-    <Page siteUrl={data.site.siteMetadata.siteUrl}>
+    <Metadata siteUrl={data.site.siteMetadata.siteUrl}>
       <PostListContent
         allRecipesData={data.allStrapiRecipe}
         pageInfo={pageInfo}
         location={location}
       />
-    </Page>
+    </Metadata>
   )
 }
 
 export const pageQuery = graphql`
-  query blogListByTagQuery($tag: String!, $skip: Int!, $limit: Int!) {
+  query blogListByTagQuery($slug: String!, $skip: Int!, $limit: Int!) {
     ...siteMetadata
     ...allCategories
 
     allStrapiRecipe(
-      filter: { tags: { elemMatch: { slug: { in: [$tag] } } } }
+      filter: { tags: { elemMatch: { slug: { in: [$slug] } } } }
       sort: { order: DESC, fields: [published_at] }
       limit: $limit
       skip: $skip

apps/blog/src/templates/post-list-content.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Page from '../components/page'
 import PostCard from '../components/post-card'
 import PostCardCover from '../components/post-card-cover'
 import PostCardHeader from '../components/post-card-header'
@@ -33,15 +34,14 @@ export default function PostListContent({
   })
 
   return (
-    <div className={styles.layout}>
-      <section className={styles.main}>
-        <div className={styles.posts}>{Posts}</div>
-        <Paginator
-          currentPage={pageInfo.currentPage}
-          totalPages={pageInfo.totalPages}
-          currentPath={location.pathname}
-        />
-      </section>
-    </div>
+    <Page>
+      <div className={styles.posts}>{Posts}</div>
+
+      <Paginator
+        currentPage={pageInfo.currentPage}
+        totalPages={pageInfo.totalPages}
+        currentPath={location.pathname}
+      />
+    </Page>
   )
 }

apps/blog/src/templates/post-list.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { graphql } from 'gatsby'
 
-import Page from './page'
+import Page from './metadata'
 import PostListContent from './post-list-content'
 
 export default function PostListPage({ data, pageContext, location }) {