Still testing but let's see 🚀

chicio · chicio · commit 0da5235f873c · 2023-09-17T16:15:05.000+02:00
diff --git a/src/components/design-system/organism/blog-header.tsx b/src/components/design-system/organism/blog-header.tsx
@@ -3,7 +3,6 @@ import { StaticImage } from "gatsby-plugin-image";
 import styled from "styled-components";
 import { mediaQuery } from "../utils-css/media-query";
 import { gatsbyImagePlaceholderSelector } from "../utils-css/gatsby-image-selector";
-import { transform } from "../utils-css/transform-keyframes";
 
 const BlogHeaderContainer = styled.div`
   display: flex;
diff --git a/src/components/design-system/templates/blog-page-template.tsx b/src/components/design-system/templates/blog-page-template.tsx
@@ -12,9 +12,12 @@ import { FC, ReactNode } from "react";
 
 const Footer = loadable(() => import(`../organism/footer`));
 
-const ContentContainer = styled(Container)<{ pageOpenedFromApp: boolean }>`
-  margin-top: ${(props) =>
-    props.pageOpenedFromApp ? 0 : props.theme.spacing[12]};
+const ContentContainer = styled(Container)`
+  margin-top: ${(props) => props.theme.spacing[12]};
+  flex: 1 0 auto;
+`;
+
+const ContentContainerApp = styled(Container)`
   flex: 1 0 auto;
 `;
 
@@ -32,6 +35,28 @@ export interface BlogPageProps {
   children?: ReactNode;
 }
 
+const StandardLayout: FC<{
+  location: CurrentLocation;
+  trackingCategory: string;
+  children?: ReactNode;
+  big: boolean;
+  author: string;
+}> = ({ location, trackingCategory, big, author, children }) => {
+  return (
+    <div>
+      <BlogMenu
+        trackingCategory={trackingCategory}
+        pathname={location.pathname}
+      />
+      <ContentContainer>
+        <DesktopBlogHeader big={big} />
+        {children}
+      </ContentContainer>
+      <Footer author={author} trackingCategory={trackingCategory} />
+    </div>
+  );
+};
+
 export const BlogPageTemplate: FC<BlogPageProps> = ({
   children,
   location,
@@ -44,27 +69,31 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
   description,
   date,
   big = false,
-}) => (
-  <BlogThemePage>
-    <Head
-      url={location.url}
-      pageType={ogPageType}
-      imageUrl={ogImage}
-      customTitle={customTitle}
-      description={description}
-      date={date}
-      cookieConsentColor={blogPrimaryColor}
-    />
-    <BlogMenu
-      trackingCategory={trackingCategory}
-      pathname={location.pathname}
-    />
-    <ContentContainer pageOpenedFromApp={false}>
-      <DesktopBlogHeader big={big} />
-      {children}
-    </ContentContainer>
-    {!pageOpenedInApp && (
-      <Footer author={author} trackingCategory={trackingCategory} />
-    )}
-  </BlogThemePage>
-);
+}) => {
+  console.log("from app", pageOpenedInApp);
+  return (
+    <BlogThemePage>
+      <Head
+        url={location.url}
+        pageType={ogPageType}
+        imageUrl={ogImage}
+        customTitle={customTitle}
+        description={description}
+        date={date}
+        cookieConsentColor={blogPrimaryColor}
+      />
+      {!pageOpenedInApp ? (
+        <StandardLayout
+          location={location}
+          big={big}
+          trackingCategory={trackingCategory}
+          author={author}
+        >
+          {children}
+        </StandardLayout>
+      ) : (
+        <ContentContainerApp>{children}</ContentContainerApp>
+      )}
+    </BlogThemePage>
+  );
+};
diff --git a/src/logic/app.ts b/src/logic/app.ts
@@ -4,5 +4,5 @@ export const pageOpenedInApp = (
   location: WindowLocation<WindowLocation["state"]>,
 ): boolean => {
   const appParam = new URLSearchParams(location.search).get("app");
-  return appParam !== null && appParam === "true";
+  return appParam !== undefined && appParam !== null && appParam === "true";
 };
