From 2b4c1f33fff5c3e627dc831404cb3e9d61f383df Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sat, 18 Jul 2020 18:43:25 +0200
Subject: [PATCH] build: setup max width

---
 src/components/elements/Card/Card.js |   2 +
 src/pages/recipes.js                 |  13 +++-
 src/templates/recipe.js              | 110 ++++++++++++++-------------
 3 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/src/components/elements/Card/Card.js b/src/components/elements/Card/Card.js
index 5f458ebd4..f2970ddfe 100644
--- a/src/components/elements/Card/Card.js
+++ b/src/components/elements/Card/Card.js
@@ -57,3 +57,5 @@ const CardOption = ({ children, value, ...props }) => (
 Card.Option = CardOption
 
 export default Card
+
+Card.BASE_WIDTH = 500
diff --git a/src/pages/recipes.js b/src/pages/recipes.js
index e01fe6ebf..db386f187 100644
--- a/src/pages/recipes.js
+++ b/src/pages/recipes.js
@@ -4,6 +4,7 @@ import kebabCase from 'lodash/kebabCase'
 import recipes from '@microlink/recipes'
 import styled from 'styled-components'
 import { getDomain } from 'tldts'
+import { toPx } from 'theme'
 import React from 'react'
 
 import {
@@ -18,9 +19,13 @@ import {
 
 const LOGO_SIZE = ['40px', '40px', '60px', '60px']
 const CARD_SIZE = [0.5, 0.5, 0.6, 0.6]
-
+const CARD_ITEMS_PER_ROW = 4.5
 const RECIPES_BY_FEATURES_KEYS = Object.keys(byFeature)
 
+const CARDS_MAX_WIDTH = CARD_SIZE.map(n =>
+  toPx(Card.BASE_WIDTH * n * CARD_ITEMS_PER_ROW)
+)
+
 const CustomLink = styled(Link)`
   color: inherit;
 
@@ -76,7 +81,11 @@ export default ({ meta }) => {
             </Text>
           </Flex>
 
-          <Flex maxWidth='75%' justifyContent='center' flexWrap='wrap'>
+          <Flex
+            maxWidth={CARDS_MAX_WIDTH}
+            justifyContent='center'
+            flexWrap='wrap'
+          >
             {Object.keys(recipes)
               .sort()
               .map(recipeName => {
diff --git a/src/templates/recipe.js b/src/templates/recipe.js
index db06c87f0..6c4a27b93 100644
--- a/src/templates/recipe.js
+++ b/src/templates/recipe.js
@@ -1,3 +1,9 @@
+import { DotsBackground, Headline, Layout } from 'components/patterns'
+import { Microlink as MicrolinkLogo } from 'components/logos'
+import { Plus } from 'react-feather'
+import { layout } from 'theme'
+import React from 'react'
+
 import {
   Image,
   Box,
@@ -7,11 +13,6 @@ import {
   Unavatar,
   Flex
 } from 'components/elements'
-import { Microlink as MicrolinkLogo } from 'components/logos'
-import { Headline, Layout } from 'components/patterns'
-import { Plus } from 'react-feather'
-import { layout } from 'theme'
-import React from 'react'
 
 const LOGO_SIZE = ['40px', '40px', '60px', '60px']
 
@@ -39,62 +40,65 @@ export default ({ pageContext: recipe }) => {
   }/${recipe.slug}.js`
 
   return (
-    <Layout
-      script={[{ src: 'https://embed.runkit.com', async: true }]}
-      {...meta}
-    >
-      <Flex
-        pt={[0, 0, 0, 3]}
-        px={3}
-        width='100%'
-        flexDirection='column'
-        justifyContent='center'
-        alignItems='center'
+    <DotsBackground alignItems='center' justifyContent='center'>
+      <Layout
+        footer={{ bg: 'transparent' }}
+        script={[{ src: 'https://embed.runkit.com', async: true }]}
+        {...meta}
       >
-        <Box pb={4}>
-          <Flex pt={[0, 0, 4, 4]} alignItems='center' justifyContent='center'>
-            <MicrolinkLogo width={LOGO_SIZE} />
-            {!recipe.isGeneric && <Box ml={3} mr={3} children={<Plus />} />}
-            {!recipe.isGeneric && <Logo {...recipe} />}
-          </Flex>
-          <Headline
-            pt={[0, 0, 3, 3]}
-            pb={[0, 0, 1, 1]}
-            caption={`Microlink Recipe for ${recipe.name}`}
-            titleize={false}
-          />
-          <Text fontSize={[1, 1, 2, 2]} textAlign='center' maxWidth={10}>
-            <Link href='/recipes'>View all recipes</Link>
-            <Text px={[1, 1, 2, 2]} as='span'>
-              {' '}
-              •{' '}
-            </Text>
-            <Link href='/docs/mql/getting-started/overview'>
-              Read documentation
-            </Link>
-            <Text px={[1, 1, 2, 2]} as='span'>
-              {' '}
-              •{' '}
-            </Text>
-            <Link href={gitHubUrl}>Edit on GitHub</Link>
-          </Text>
-        </Box>
-
         <Flex
+          pt={[0, 0, 0, 3]}
+          px={3}
           width='100%'
           flexDirection='column'
           justifyContent='center'
           alignItems='center'
         >
-          <CodeEditor
-            title={`${recipe.key}.js`}
+          <Box pb={4}>
+            <Flex pt={[0, 0, 4, 4]} alignItems='center' justifyContent='center'>
+              <MicrolinkLogo width={LOGO_SIZE} />
+              {!recipe.isGeneric && <Box ml={3} mr={3} children={<Plus />} />}
+              {!recipe.isGeneric && <Logo {...recipe} />}
+            </Flex>
+            <Headline
+              pt={[0, 0, 3, 3]}
+              pb={[0, 0, 1, 1]}
+              caption={`Microlink Recipe for ${recipe.name}`}
+              titleize={false}
+            />
+            <Text fontSize={[1, 1, 2, 2]} textAlign='center' maxWidth={10}>
+              <Link href='/recipes'>View all recipes</Link>
+              <Text px={[1, 1, 2, 2]} as='span'>
+                {' '}
+                •{' '}
+              </Text>
+              <Link href='/docs/mql/getting-started/overview'>
+                Read documentation
+              </Link>
+              <Text px={[1, 1, 2, 2]} as='span'>
+                {' '}
+                •{' '}
+              </Text>
+              <Link href={gitHubUrl}>Edit on GitHub</Link>
+            </Text>
+          </Box>
+
+          <Flex
             width='100%'
-            maxWidth={layout.small}
-            children={recipe.code}
-            interactive
-          />
+            flexDirection='column'
+            justifyContent='center'
+            alignItems='center'
+          >
+            <CodeEditor
+              title={`${recipe.key}.js`}
+              width='100%'
+              maxWidth={layout.small}
+              children={recipe.code}
+              interactive
+            />
+          </Flex>
         </Flex>
-      </Flex>
-    </Layout>
+      </Layout>
+    </DotsBackground>
   )
 }