Post Web layout for app inclusion in webview 🚀

Author: chicio

src/components/design-system/templates/blog-page-template.tsx

@@ -12,8 +12,9 @@ import { FC, ReactNode } from "react";
 
 const Footer = loadable(() => import(`../organism/footer`));
 
-const ContentContainer = styled(Container)`
-  margin-top: ${(props) => props.theme.spacing[12]};
+const ContentContainer = styled(Container)<{ pageOpenedFromApp: boolean }>`
+  margin-top: ${(props) =>
+    props.pageOpenedFromApp ? 0 : props.theme.spacing[12]};
   flex: 1 0 auto;
 `;
 
@@ -23,6 +24,7 @@ export interface BlogPageProps {
   ogPageType: OgPageType;
   ogImage: string;
   trackingCategory: string;
+  pageOpenedInApp: boolean;
   customTitle?: string;
   description?: string;
   date?: string;
@@ -37,6 +39,7 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
   ogPageType,
   ogImage,
   trackingCategory,
+  pageOpenedInApp,
   customTitle,
   description,
   date,
@@ -52,14 +55,18 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
       date={date}
       cookieConsentColor={blogPrimaryColor}
     />
-    <BlogMenu
-      trackingCategory={trackingCategory}
-      pathname={location.pathname}
-    />
-    <ContentContainer>
+    {!pageOpenedInApp && (
+      <BlogMenu
+        trackingCategory={trackingCategory}
+        pathname={location.pathname}
+      />
+    )}
+    <ContentContainer pageOpenedFromApp={pageOpenedInApp}>
       <DesktopBlogHeader big={big} />
       {children}
     </ContentContainer>
-    <Footer author={author} trackingCategory={trackingCategory} />
+    {!pageOpenedInApp && (
+      <Footer author={author} trackingCategory={trackingCategory} />
+    )}
   </BlogThemePage>
 );

src/logic/app.ts

@@ -0,0 +1,8 @@
+import { WindowLocation } from "@reach/router";
+
+export const pageOpenedInApp = (
+  location: WindowLocation<WindowLocation["state"]>,
+): boolean => {
+  const appParam = new URLSearchParams(location.search).get("app");
+  return appParam !== null && appParam === "true";
+};

src/logic/current-location.ts

@@ -6,7 +6,7 @@ export interface CurrentLocation {
 }
 
 export const getCurrentLocationFrom: (
-  location: WindowLocation<WindowLocation["state"]>
+  location: WindowLocation<WindowLocation["state"]>,
 ) => CurrentLocation = (location: WindowLocation<WindowLocation["state"]>) => ({
   url: location.href,
   pathname: location.pathname,

src/templates/post.tsx

@@ -11,22 +11,23 @@ import styled from "styled-components";
 import { OgPageType } from "../logic/seo";
 import { getCurrentLocationFrom } from "../logic/current-location";
 import loadable from "@loadable/component";
+import { pageOpenedInApp } from "../logic/app";
 
 const PostTitle = styled(Heading2)`
   margin: 0;
   word-wrap: break-word;
 `;
 
 const RecentPosts = loadable(
-  () => import(`../components/design-system/organism/read-next`)
+  () => import(`../components/design-system/organism/read-next`),
 );
 
 const PostTags = loadable(
-  () => import(`../components/design-system/molecules/post-tags`)
+  () => import(`../components/design-system/molecules/post-tags`),
 );
 
 const Comments = loadable(
-  () => import(`../components/design-system/molecules/comments`)
+  () => import(`../components/design-system/molecules/comments`),
 );
 
 const PostContainer = styled.div`
@@ -47,12 +48,13 @@ const Post: FC<PageProps<Queries.PostQuery>> = ({ data, location }) => {
       author={data.site!.siteMetadata!.author!}
       ogPageType={OgPageType.BlogPosting}
       ogImage={`${getSrc(
-        post.frontmatter!.image!.childImageSharp!.gatsbyImageData!
+        post.frontmatter!.image!.childImageSharp!.gatsbyImageData!,
       )!}`}
       trackingCategory={tracking.category.blog_post}
       customTitle={title}
       description={post.frontmatter!.description!}
       date={post.frontmatter!.date!}
+      pageOpenedInApp={pageOpenedInApp(location)}
     >
       <PostContainer>
         <PostTitle className="blog-post-title">
@@ -75,9 +77,13 @@ const Post: FC<PageProps<Queries.PostQuery>> = ({ data, location }) => {
           trackingLabel={tracking.label.body}
         />
       </PostContainer>
-      <RecentPosts currentSlug={location.pathname} />
-      {post.frontmatter?.comments && (
-        <Comments url={location.href} title={title} />
+      {!pageOpenedInApp(location) && (
+        <>
+          <RecentPosts currentSlug={location.pathname} />
+          {post.frontmatter?.comments && (
+            <Comments url={location.href} title={title} />
+          )}
+        </>
       )}
     </BlogPageTemplate>
   );