Add passive redirect to old cancer pages.

Author: rmariuzzo

gatsby-config.js

@@ -69,6 +69,9 @@ module.exports = {
           respectDNT: true
         }
       }
+    },
+    {
+      resolve: `gatsby-plugin-meta-redirect`
     }
   ]
 }

src/components/Link.styles.ts

@@ -3,7 +3,11 @@ import styled, { css } from 'styled-components'
 
 import { $theme } from '../styles/theme'
 
-export const linkStyles = css`
+type LinkProps = {
+  variant?: 'inline' | 'block'
+}
+
+const linkInlineStyles = css`
   color: ${$theme.color.link};
   text-underline-offset: 3px;
   text-decoration-thickness: 2px;
@@ -13,10 +17,44 @@ export const linkStyles = css`
   }
 `
 
+const linkBlockStyles = css`
+  display: inline-block;
+  text-decoration: none;
+  background-color: ${$theme.color.primary}dd;
+  padding: 1em 1.5em;
+  color: ${$theme.color.background};
+  border-radius: 0.2em;
+  font-size: 1.2rem;
+  transition: ${$theme.transition.default};
+
+  &:hover,
+  &:focus {
+    background-color: ${$theme.color.primary}ff;
+  }
+
+  &:active {
+    transition: none;
+    background-color: ${$theme.color.primary}dd;
+  }
+`
+
+export const linkStyles = css<LinkProps>`
+  ${(props) => props.variant === 'inline' && linkInlineStyles}
+  ${(props) => props.variant === 'block' && linkBlockStyles}
+`
+
 export const ExternalLink = styled.a`
   ${linkStyles};
 `
 
+ExternalLink.defaultProps = {
+  variant: 'inline'
+}
+
 export const InternalLink = styled(GatsbyLink)`
   ${linkStyles};
 `
+
+InternalLink.defaultProps = {
+  variant: 'inline'
+}

src/components/SEO.tsx

@@ -21,6 +21,7 @@ type SEOProps = {
     name: string
     url?: string
   }>
+  noIndex?: boolean
 }
 
 export const SEO: React.FC<SEOProps> = ({
@@ -30,7 +31,8 @@ export const SEO: React.FC<SEOProps> = ({
   image,
   title,
   pathname,
-  breadcrumbs = []
+  breadcrumbs = [],
+  noIndex = false
 }) => {
   const { site } = useStaticQuery(
     graphql`
@@ -131,6 +133,16 @@ export const SEO: React.FC<SEOProps> = ({
                 }
               ]
         )
+        .concat(
+          noIndex
+            ? [
+                {
+                  name: 'robots',
+                  content: 'noindex'
+                }
+              ]
+            : []
+        )
         .concat(meta as any)}
       script={
         breadcrumbs.length > 0

src/components/Typography.ts

@@ -2,7 +2,6 @@ import { up } from 'styled-breakpoints'
 import styled from 'styled-components'
 
 import { $theme } from '../styles/theme'
-
 import { linkStyles } from './Link.styles'
 
 export const Heading1 = styled.h1`
@@ -25,7 +24,7 @@ export const PageTitle = styled.h1`
   font-size: ${$theme.fontSize.l2}rem;
   font-weight: ${$theme.fontWeight.black};
   line-height: 1em;
-  margin: 0.2em 0;
+  margin: 0.2em 0 2rem 0;
 
   ${up('tablet')} {
     font-size: ${$theme.fontSize.l1}rem;
@@ -80,3 +79,7 @@ export const TextBlock = styled.div`
     border-left: ${$theme.color.copyLight} solid 2px;
   }
 `
+
+export const InlineCenter = styled.div`
+  text-align: center;
+`

src/layouts/MainLayout.tsx

@@ -14,7 +14,7 @@ export const MainLayout: React.FC = ({ children }) => {
       <S.Container>
         <GlobalStyles />
         <Header />
-        {children}
+        <main>{children}</main>
         <Footer />
       </S.Container>
     </ThemeProvider>

src/markdown/lymphoma/2021-08-24.md

@@ -0,0 +1,5 @@
+---
+date: 2021-08-24T01:16:03-04:00
+title: 'TBD'
+slug: /lymphoma/2021-08-24
+---

src/pages/cancer/[...path].tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { graphql, PageProps } from 'gatsby'
+
+import { MainLayout } from '../../layouts/MainLayout'
+import { InlineCenter, PageTitle } from '../../components/Typography'
+import { InternalLink } from '../../components/Link.styles'
+import NotFoundPage from '../404'
+import { SEO } from '../../components/SEO'
+
+type CancerCatchAllPageDataProps = {
+  allMarkdownRemark: {
+    edges: Array<{
+      node: {
+        frontmatter: {
+          slug: string
+        }
+      }
+    }>
+  }
+}
+
+const CancerCatchAllPage: React.FC<PageProps<CancerCatchAllPageDataProps>> = (
+  props
+) => {
+  const post = props.data.allMarkdownRemark.edges.find(
+    (e) => e.node.frontmatter.slug.split('/').pop() === props.path
+  )
+
+  const slug = post?.node.frontmatter.slug
+
+  if (!slug) {
+    return <NotFoundPage />
+  }
+
+  return (
+    <MainLayout>
+      <SEO title="This page have been moved" noIndex />
+      <PageTitle>This page have been moved</PageTitle>
+      <InlineCenter>
+        <InternalLink variant="block" to={slug}>
+          Go to new location
+        </InternalLink>
+      </InlineCenter>
+    </MainLayout>
+  )
+}
+
+export default CancerCatchAllPage
+
+export const pageQuery = graphql`
+  query {
+    allMarkdownRemark {
+      edges {
+        node {
+          frontmatter {
+            slug
+          }
+        }
+      }
+    }
+  }
+`