Merge branch 'master' into feature/20956-Google-analytics-v4

flotiq · May 19, 2022 · b7029c2 · b7029c2
2 parents 8a348c0 + 5f3e562
commit b7029c2
Show file tree

Hide file tree

Showing 9 changed files with 273 additions and 43 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -87,5 +87,15 @@ module.exports = {
             },
         },
         'gatsby-plugin-postcss',
+        {
+            resolve: 'gatsby-plugin-gatsby-cloud',
+            options: {
+                headers: {
+                    '/*': [
+                        'x-frame-options: allow-from https://jamstackthemes.dev/',
+                    ],
+                },
+            },
+        },
     ],
 };
diff --git a/package.json b/package.json
@@ -23,17 +23,18 @@
     "@popperjs/core": "^2.11.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
-    "flotiq-components-react": "^0.5.0",
+    "flotiq-components-react": "^1.0.0",
     "gatsby": "^4.7.2",
     "gatsby-plugin-google-gtag": "^4.12.1",
+    "gatsby-plugin-gatsby-cloud": "^4.13.0",
     "gatsby-plugin-image": "^2.7.0",
     "gatsby-plugin-manifest": "^4.7.0",
     "gatsby-plugin-react-helmet": "^5.7.0",
     "gatsby-plugin-robots-txt": "^1.6.14",
     "gatsby-plugin-sharp": "^4.7.0",
     "gatsby-plugin-sitemap": "^5.7.0",
     "gatsby-source-filesystem": "^4.7.0",
-    "gatsby-source-flotiq": "^4.1.5",
+    "gatsby-source-flotiq": "^4.1.8",
     "gatsby-transformer-sharp": "^4.7.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/src/components/RecipeCard.js b/src/components/RecipeCard.js
@@ -32,7 +32,7 @@ const CustomRecipeCard = ({ slug, cookingTime, image, name, description, serving
                     {name}
                 </Card.Title>
                 {!compact && (
-                    <p
+                    <div
                         className="line-clamp-4 md:line-clamp-5 !p-0"
                         dangerouslySetInnerHTML={{ __html: description }}
                     />

diff --git a/src/components/RecipeSteps.js b/src/components/RecipeSteps.js
@@ -8,11 +8,12 @@ const RecipeSteps = ({ additionalClass, steps }) => (
     >
         {steps.map((step, index) => (
             <div key={step.step} className="w-full px-4 md:px-10">
-                <Paragraph
-                    text={`Step ${index + 1}`}
-                    additionalClasses={['font-semibold underline mr-2 !p-0']}
-                />
-                <Paragraph text={step.step} additionalClasses={['!p-0 mb-5']} />
+                <Paragraph additionalClasses={['font-semibold underline mr-2 !p-0']}>
+                    {`Step ${index + 1}`}
+                </Paragraph>
+                <Paragraph additionalClasses={['!p-0 mb-5']}>
+                    {step.step}
+                </Paragraph>
                 {step.image && step.image[0]
                   && (
                       <GatsbyImage

diff --git a/src/pages/404.js b/src/pages/404.js
@@ -9,10 +9,14 @@ const NotFoundPage = () => (
         <Helmet>
             <title>Page not found</title>
         </Helmet>
-        <Header text="Page not found, sorry" />
-        <div className="text-center mt-5 pt-5">
-            {/* Example usage of button */}
-            <Link to="/"><Button label="Go back to index" /></Link>
+        <div className="py-32">
+            <Header additionalClasses={['text-center']}>
+                Page not found, sorry
+            </Header>
+            <div className="text-center mt-5 pt-5">
+                {/* Example usage of button */}
+                <Link to="/"><Button rounded="none" label="Go back to index" /></Link>
+            </div>
         </div>
     </Layout>
 );

diff --git a/src/sections/RecipeCards.js b/src/sections/RecipeCards.js
@@ -8,7 +8,7 @@ const RecipeCards = ({ recipes, headerText, compact = false }) => (
             ? 'max-w-7xl mt-6 mb-6 mx-auto px-4 py-4 sm:px-6 lg:px-8'
             : 'max-w-7xl mt-6 mb-6 mx-auto px-4 py-4 sm:px-6 lg:px-8 xl:px-0'}
     >
-        {headerText && <Header additionalClasses={['basis-1 mb-2 !text-3xl !font-medium']} text={headerText} />}
+        {headerText && <Header additionalClasses={['basis-1 mb-2 !text-3xl !font-medium']}>{headerText}</Header>}
         <div className={compact ? 'grid md:grid-cols-2 lg:grid-cols-3 gap-6' : 'flex flex-col'}>
             {recipes.map((recipe) => (
                 <RecipeCard

diff --git a/src/templates/index.js b/src/templates/index.js
@@ -14,12 +14,13 @@ const announcementText = 'This is the Blog where you can find any kind of inform
 const IndexPage = ({ data, pageContext }) => {
     // Extracting data from GraphQL query, the query is on the bottom of this file
     const recipes = data.allRecipe.nodes;
-    const categoryTabs = [
-        { name: 'Breakfast', href: '#', current: true },
-        { name: 'Dinner', href: '#', current: false },
-        { name: 'Dessert', href: '#', current: false },
-        { name: 'Lunch', href: '#', current: false },
-    ];
+    // Uncomment this to add categories to your recipes
+    // const categoryTabs = [
+    //     { name: 'Breakfast', href: '#', current: true },
+    //     { name: 'Dinner', href: '#', current: false },
+    //     { name: 'Dessert', href: '#', current: false },
+    //     { name: 'Lunch', href: '#', current: false },
+    // ];
     return (
         <Layout additionalClass={['font-karla']}>
             {/* Content of <head> tag */}

diff --git a/src/templates/recipe.js b/src/templates/recipe.js
@@ -35,8 +35,9 @@ const RecipeTemplate = ({ data }) => {
                         <Header
                             additionalClasses={['text-xl md:text-4xl text-white !font-semibold '
                                 + 'uppercase tracking-wider !p-0']}
-                            text={recipe.name}
-                        />
+                        >
+                            {recipe.name}
+                        </Header>
                         <div className="flex flex-wrap justify-start text-xs text-primary font-light
                             space-x-5 pb-3 mt-5"
                         >
@@ -51,15 +52,15 @@ const RecipeTemplate = ({ data }) => {
                                 <span className="text-sm">{recipe.servings}</span>
                             </p>
                         </div>
-                        <Paragraph text={recipe.description} additionalClasses={['mt-5']} />
+                        <Paragraph additionalClasses={['mt-5']}>
+                            {recipe.description}
+                        </Paragraph>
                         <div className="absolute bottom-0 right-0 h-6 md:h-12 w-6 md:w-12 bg-white" />
                     </div>
                     <div className="bg-white px-4 md:px-10 py-5">
-                        <Header
-                            level={2}
-                            additionalClasses={['mt-5 pl-7 !text-2xl']}
-                            text={ingredientsHeaderText}
-                        />
+                        <Header level={2} additionalClasses={['mt-5 pl-7 !text-2xl']}>
+                            {ingredientsHeaderText}
+                        </Header>
                         <fieldset className="space-y-5">
                             <div>
                                 {recipe.ingredients.map((ingredient) => (