Trying to fix parameter layout switch 🚀

Author: chicio

gatsby-config.ts

@@ -72,7 +72,7 @@ const config: GatsbyConfig = {
     {
       resolve: `gatsby-plugin-offline`,
       options: {
-        precachePages: [`/`, `/blog/`],
+        precachePages: [`/`],
       },
     },
     "gatsby-plugin-sharp",

package.json

@@ -39,7 +39,8 @@
     "prebuild": "npm run clean",
     "build": "gatsby build",
     "predeploy": "npm run clean && npm run build",
-    "deploy": "gh-pages -d public -b main"
+    "deploy": "gh-pages -d public -b main",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@loadable/component": "^5.15.3",

src/components/design-system/art-colors.ts

@@ -7,6 +7,7 @@ const primaryColorLight = "#F7BEC6";
 
 export const artDark: Colors = {
   primaryColor: artPrimaryColor,
+  secondaryColor: artPrimaryColor,
   primaryColorDark,
   primaryColorLight,
   generalBackground: "#181918",
@@ -22,6 +23,7 @@ export const artDark: Colors = {
 
 export const artLight: Colors = {
   primaryColor: artPrimaryColor,
+  secondaryColor: artPrimaryColor,
   primaryColorDark,
   primaryColorLight,
   generalBackground: "#FBFBFB",

src/components/design-system/organism/resume.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import { FC, useState } from "react";
 import { tracking } from "../../../logic/tracking";
 import { ContainerFluid } from "../atoms/container-fluid";
 import styled from "styled-components";

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

@@ -60,42 +60,43 @@ export interface BlogGenericPostListPageProps {
   trackingCategory: string;
 }
 
-export const BlogGenericPostListPageTemplate: FC<BlogGenericPostListPageProps> =
-  ({
-    title,
-    posts,
-    author,
-    location,
-    ogPageType,
-    ogImage,
-    trackingCategory,
-  }) => (
-    <BlogPageTemplate
-      location={location}
-      author={author}
-      ogPageType={ogPageType}
-      ogImage={ogImage}
-      trackingCategory={trackingCategory}
-    >
-      <PageTitle>{title}</PageTitle>
-      {posts.map((post) => (
-        <PostContainer key={post.node.fields!.slug!}>
-          <Column size={"15%"}>
-            <PostTime>{post.node.frontmatter?.date}</PostTime>
-          </Column>
-          <Column size={"85%"}>
-            <PostLink
-              to={post.node.fields!.slug!}
-              trackingData={{
-                action: tracking.action.open_blog_post,
-                category: trackingCategory,
-                label: tracking.label.body,
-              }}
-            >
-              {post.node.frontmatter?.title}
-            </PostLink>
-          </Column>
-        </PostContainer>
-      ))}
-    </BlogPageTemplate>
-  );
+export const BlogGenericPostListPageTemplate: FC<
+  BlogGenericPostListPageProps
+> = ({
+  title,
+  posts,
+  author,
+  location,
+  ogPageType,
+  ogImage,
+  trackingCategory,
+}) => (
+  <BlogPageTemplate
+    location={location}
+    author={author}
+    ogPageType={ogPageType}
+    ogImage={ogImage}
+    trackingCategory={trackingCategory}
+  >
+    <PageTitle>{title}</PageTitle>
+    {posts.map((post) => (
+      <PostContainer key={post.node.fields!.slug!}>
+        <Column size={"15%"}>
+          <PostTime>{post.node.frontmatter?.date}</PostTime>
+        </Column>
+        <Column size={"85%"}>
+          <PostLink
+            to={post.node.fields!.slug!}
+            trackingData={{
+              action: tracking.action.open_blog_post,
+              category: trackingCategory,
+              label: tracking.label.body,
+            }}
+          >
+            {post.node.frontmatter?.title}
+          </PostLink>
+        </Column>
+      </PostContainer>
+    ))}
+  </BlogPageTemplate>
+);

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

@@ -9,6 +9,7 @@ import styled from "styled-components";
 import { Container } from "../atoms/container";
 import { blogPrimaryColor } from "../blog-colors";
 import { FC, ReactNode } from "react";
+import { pageOpenedInApp } from "../../../logic/app";
 
 const Footer = loadable(() => import(`../organism/footer`));
 
@@ -21,20 +22,6 @@ const ContentContainerApp = styled(Container)`
   flex: 1 0 auto;
 `;
 
-export interface BlogPageProps {
-  location: CurrentLocation;
-  author: string;
-  ogPageType: OgPageType;
-  ogImage: string;
-  trackingCategory: string;
-  pageOpenedInApp: boolean;
-  customTitle?: string;
-  description?: string;
-  date?: string;
-  big?: boolean;
-  children?: ReactNode;
-}
-
 const StandardLayout: FC<{
   location: CurrentLocation;
   trackingCategory: string;
@@ -57,20 +44,31 @@ const StandardLayout: FC<{
   );
 };
 
+export interface BlogPageProps {
+  location: CurrentLocation;
+  author: string;
+  ogPageType: OgPageType;
+  ogImage: string;
+  trackingCategory: string;
+  customTitle?: string;
+  description?: string;
+  date?: string;
+  big?: boolean;
+  children?: ReactNode;
+}
+
 export const BlogPageTemplate: FC<BlogPageProps> = ({
   children,
   location,
   author,
   ogPageType,
   ogImage,
   trackingCategory,
-  pageOpenedInApp,
   customTitle,
   description,
   date,
   big = false,
 }) => {
-  console.log("from app", pageOpenedInApp);
   return (
     <BlogThemePage>
       <Head
@@ -82,7 +80,7 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
         date={date}
         cookieConsentColor={blogPrimaryColor}
       />
-      {!pageOpenedInApp ? (
+      {!pageOpenedInApp(location) ? (
         <StandardLayout
           location={location}
           big={big}

src/logic/app.ts

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

src/logic/current-location.ts

@@ -3,11 +3,13 @@ import { WindowLocation } from "@reach/router";
 export interface CurrentLocation {
   url: string;
   pathname: string;
+  search: string;
 }
 
 export const getCurrentLocationFrom: (
   location: WindowLocation<WindowLocation["state"]>,
 ) => CurrentLocation = (location: WindowLocation<WindowLocation["state"]>) => ({
   url: location.href,
   pathname: location.pathname,
+  search: location.search
 });

src/templates/post.tsx

@@ -37,14 +37,15 @@ const PostContainer = styled.div`
 const Post: FC<PageProps<Queries.PostQuery>> = ({ data, location }) => {
   const post = data.markdownRemark!;
   const title = post.frontmatter!.title!;
+  const currentLocation = getCurrentLocationFrom(location);
 
   if (post.frontmatter?.math === true) {
     require("katex/dist/katex.min.css");
   }
 
   return (
     <BlogPageTemplate
-      location={getCurrentLocationFrom(location)}
+      location={currentLocation}
       author={data.site!.siteMetadata!.author!}
       ogPageType={OgPageType.BlogPosting}
       ogImage={`${getSrc(
@@ -54,7 +55,6 @@ const Post: FC<PageProps<Queries.PostQuery>> = ({ data, location }) => {
       customTitle={title}
       description={post.frontmatter!.description!}
       date={post.frontmatter!.date!}
-      pageOpenedInApp={pageOpenedInApp(location)}
     >
       <PostContainer>
         <PostTitle className="blog-post-title">
@@ -77,7 +77,7 @@ const Post: FC<PageProps<Queries.PostQuery>> = ({ data, location }) => {
           trackingLabel={tracking.label.body}
         />
       </PostContainer>
-      {!pageOpenedInApp(location) && (
+      {!pageOpenedInApp(currentLocation) && (
         <>
           <RecentPosts currentSlug={location.pathname} />
           {post.frontmatter?.comments && (