@reach/router#Location JavaScript Examples

withLocation = Comp => props => (
  <Location>
    {({ location, navigate }) => (
      <Comp
        {...props}
        location={location}
        navigate={navigate}
        search={location.search ? queryString.parse(location.search) : {}}
      />
    )}
  </Location>
)

Layout = ({
  children,
}) => (
  <Location>
    {
      ({ location }) => (
        <div className="layout">
          <Navbar location={location} />
          <noscript className="noscript-warning">
            This site relies on JavaScript which is currently disabled in your browser.
            Some functionality will be missing as a result.
          </noscript>
          <main>{children}</main>
          <Footer />
        </div>
      )
    }
  </Location>
)

render() {
    return (
      <DocsSidebarNavData>
        {({ data }) => (
          <Location>
            {({ location }) => (
              <ul className="DocsSidebar--nav" ref={this.ref}>
                {data.map(node => (
                  <DocsSidebarNavItem
                    key={node.id}
                    node={node}
                    location={location}
                    depth={0}
                  />
                ))}
              </ul>
            )}
          </Location>
        )}
      </DocsSidebarNavData>
    )
  }

Fallback = ({ pageContext: { routePath } }) => (
  <Language.Consumer>
    {({ key: lang }) => (
      <Location>
        {({ location }) => (
          <FallbackPage routePath={routePath} path={location.pathname} lang={lang} />
        )}
      </Location>
    )}
  </Language.Consumer>
)

Root = ({ element }) => (
  <Location>
    {({ location }) => (
      <Fragment>
        <AdminRedirector hash={location.hash || ''} />
        {element}
      </Fragment>
    )}
  </Location>
)

function Hero(props) {
    return(
        <Canvas shadowMap camera={{ fov: 75 }}>
            <ambientLight intensity={0.2} />
            <pointLight position={[10, 10, 10]} />
            <pointLight position={[-10, -10, -10]} intensity={0.5} />
            <directionalLight
                castShadow
                position={[0, 10, -5]}
                intensity={0.25}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
                shadow-camera-far={100}
                shadow-camera-left={-10}
                shadow-camera-right={10}
                shadow-camera-top={10}
                shadow-camera-bottom={-10}
            />
            <Suspense fallback={null}>
                <Location>
                    {({location})=> {
                        if (location.pathname === "/") {
                            return <Logo position = {[0, 0, 0]} />
                        } else {
                            return null;
                        }
                    }}
                </Location>
            </Suspense>
            <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2.5, 0]} receiveShadow>
                <planeBufferGeometry attach="geometry" args={[10, 10]} />
                <shadowMaterial attach="material" transparent opacity={0.1}/>
            </mesh>
        </Canvas>
    )
}

ProjectIndexTemplate = ({
  title,
  subtitle,
  featuredImage,
  localImage,
  posts = [],
  enableSearch = true,
  contentType
}) => (
  <Location>
    {({ location }) => {

      return (
        <main className="Blog">
          <PageHeader
            title={title}
            subtitle={subtitle}
            backgroundImage={(localImage&&localImage.childImageSharp?localImage.childImageSharp.fluid.src:featuredImage)}
          />

          {!!posts.length && (
            <section className="section">
              <div className="container">
                <PostSection posts={posts} />
              </div>
            </section>
          )}
        </main>
      )
    }}
  </Location>
)

BlogIndexTemplate = ({
  title,
  subtitle,
  featuredImage,
  localImage,
  posts = [],
  postCategories = [],
  enableSearch = true,
  contentType
}) => (
  <Location>
    {({ location }) => {
      let filteredPosts =
        posts && !!posts.length
          ? byCategory(byDate(posts), title, contentType)
          : []

      let queryObj = location.search.replace('?', '')
      queryObj = qs.parse(queryObj)

      if (enableSearch && queryObj.s) {
        const searchTerm = queryObj.s.toLowerCase()
        filteredPosts = filteredPosts.filter(post =>
          post.frontmatter.title.toLowerCase().includes(searchTerm)
        )
      }
  
      //fixing the image path issue
      filteredPosts.forEach(item => item.featuredImage = "../"+item.featuredImage)

      return (
        <main className="Blog">
          <PageHeader
            title={title}
            subtitle={subtitle}
            backgroundImage={(localImage && localImage.childImageSharp)?localImage.childImageSharp.fluid.src:featuredImage}
          />

          {!!postCategories.length && (
            <section className="section thin">
              <div className="container">
                <PostCategoriesNav enableSearch categories={postCategories} />
              </div>
            </section>
          )}

          {!!posts.length && (
            <section className="section">
              <div className="container">
                <PostSection posts={filteredPosts} />
              </div>
            </section>
          )}
        </main>
      )
    }}
  </Location>
)

Sidebar = ({ posts }) => {
  let categories = {}

  posts.map(post => {
    const status = post.node.frontmatter.status
    if (status === null || status === undefined) {
      return null
    }

    const entry = {
      aip: post.node.frontmatter.aip,
      title: post.node.frontmatter.title,
      slug: post.node.fields.slug,
    }

    if (categories[status] === undefined) {
      categories[status] = [entry]
    } else {
      categories[status].push(entry)
    }
    return null
  })

  const toc = Object.keys(categories).map(category => {
    return (
      <div className="Sidebar__category" key={category}>
        <header>
          <h2 className="Sidebar__caption">{category}</h2>
        </header>

        {categories[category].map((aip, index) => {
          return (
            <Location key={index}>
              {({ location }) => {
                return (
                  <article
                    key={aip.aip}
                    className={
                      location.pathname.includes(aip.slug)
                        ? "Sidebar__active-link"
                        : "Sidebar__link"
                    }
                  >
                    <a href={"/aip" + aip.slug}>
                      AIP {aip.aip}: {aip.title}
                    </a>
                  </article>
                )
              }}
            </Location>
          )
        })}
      </div>
    )
  })

  return (
    <div className="Sidebar">
      <div className="Sidebar__wrapper">{toc}</div>
    </div>
  )
}

SearchPage = ({ data, pageContext }) => (
  <Location>
    {({ location }) => (
      <SearchPageInner data={data} pageContext={pageContext} location={location} />
    )}
  </Location>
)

DocsSidebarNavSection = () => (
  <Location>
    {({ location }) => (
      <DocsSidebarNavSectionContent location={location}/>
    )}
  </Location>
)

Wrapped = props => {
  return (
    <Location>
      {locationProps => <Switcher {...locationProps} {...props} />}
    </Location>
  );
}

App = ({ element }) => {
  function languageOnUpdate ({ lang, prevLang, url, prevURL }) {
    if (prevURL && url !== prevURL) navigate(url)
    if (prevLang && lang !== prevLang) analytics.autoCapture({ category: analytics.constants.LANGUAGE, action: 'language_updated', label: lang })
  }

  function themeOnUpdate ({ theme, prevTheme }) {
    if (prevTheme && theme !== prevTheme) analytics.autoCapture({ category: analytics.constants.THEME, action: 'theme_updated', label: theme })
  }

  function getRoutes (lang) {
    const routes = config.routes.map(({ path, component, props }) => {
      const Component = require(`./routes/${component}.js`).default
      const routes = [ <Component {...props} path={path} key={path} /> ]
      if (config.localization.createLocalizedPages && config.localization.createDefaultPages) {
        routes.push(<Component {...props} key={`/${lang}${path}`} path={`/${lang}${path}`} />)
      }

      return routes
    })

    return routes.reduce((accumulator, currentValue) => [ ...accumulator, ...currentValue ], [])
  }

  return (
    <Location>
      {({ location: { pathname, search, hash } }) => (
        <Language.Provider
          location={{ pathname, search, hash }}
          availableLanguages={config.availableLanguages}
          alternativeLanguages={config.alternativeLanguages}
          onUpdate={languageOnUpdate}
          useURL={config.localization.useURL}
          useNavigator={config.localization.useNavigator}
          persistLang={config.localization.persistLang}
        >
          <Theme.Provider
            themes={getThemes()}
            onUpdate={themeOnUpdate}
            transformTheme={({ config }) => theme.convertThemeToMaterial(config)}
          >
            <Theme.Consumer>
              {({ theme, originalTheme }) => (
                <MaterialUIThemeProvider theme={theme}>
                  <StyledThemeProvider theme={theme}>
                    <Language.Consumer>
                      {({ key: lang }) => (
                        <LinkProvider lang={lang} component={Link}>
                          <Styles theme={originalTheme.config} />
                          <GlobalStyles />
                          <Router>
                            {getRoutes(lang)}
                            <DefaultRoute default element={element} />
                          </Router>
                        </LinkProvider>
                      )}
                    </Language.Consumer>
                  </StyledThemeProvider>
                </MaterialUIThemeProvider>
              )}
            </Theme.Consumer>
          </Theme.Provider>
        </Language.Provider>
      )}
    </Location>
  )
}

App = ({ element }) => {
  function languageOnUpdate ({ lang, prevLang }) {
    if (prevLang && lang !== prevLang) {
      navigate(`/${lang}/`)
      analytics.autoCapture({ category: analytics.constants.LANGUAGE, action: 'language_updated', label: lang })
    }
  }

  function themeOnUpdate ({ theme, prevTheme }) {
    if (prevTheme && theme !== prevTheme) analytics.autoCapture({ category: analytics.constants.THEME, action: 'theme_updated', label: theme })
  }

  function getRoutes (lang) {
    const routes = config.routes.map(({ path, component, props }) => {
      const Component = require(`./routes/${component}.js`).default
      const routes = [ <Component {...props} path={path} key={path} /> ]
      if (config.localization.createLocalizedPages && config.localization.createDefaultPages) {
        routes.push(<Component {...props} key={`/${lang}${path}`} path={`/${lang}${path}`} />)
      }

      return routes
    })

    return routes.reduce((accumulator, currentValue) => [ ...accumulator, ...currentValue ], [])
  }

  return (
    <Location>
      {({ location: { pathname, search, hash } }) => (
        <Language.Provider
          location={{ pathname, search, hash }}
          availableLanguages={config.availableLanguages}
          alternativeLanguages={config.alternativeLanguages}
          onUpdate={languageOnUpdate}
          useURL={config.localization.useURL}
          useNavigator={config.localization.useNavigator}
          persistLang={config.localization.persistLang}
        >
          <Theme.Provider
            themes={getThemes()}
            onUpdate={themeOnUpdate}
            transformTheme={({ config }) => theme.convertThemeToMaterial(config)}
          >
            <Search.Provider>
              <Theme.Consumer>
                {({ theme, originalTheme }) => (
                  <MaterialUIThemeProvider theme={theme}>
                    <StyledThemeProvider theme={theme}>
                      <Language.Consumer>
                        {({ key: lang }) => (
                          <LinkProvider
                            lang={lang}
                            component={Link}
                            isStatic={href => {
                              if (href.match(/^blob:/)) return true
                              return false
                            }}
                          >
                            <MarkdownProvider
                              markdownProps={{
                                renderers: {
                                  code: theme.type === 'dark' ? DarkCodeRenderer : LightCodeRenderer,
                                  link: IOHKLink
                                }
                              }}
                            >
                              <Styles theme={originalTheme.config} />
                              <Style />
                              <Header />
                              <Router>
                                {getRoutes(lang)}
                                <DefaultRoute default element={element} />
                              </Router>
                              <Zendesk zendeskKey={config.zendeskKey} color={{ theme: theme.colors.primary.main }} />
                            </MarkdownProvider>
                          </LinkProvider>
                        )}
                      </Language.Consumer>
                    </StyledThemeProvider>
                  </MaterialUIThemeProvider>
                )}
              </Theme.Consumer>
            </Search.Provider>
          </Theme.Provider>
        </Language.Provider>
      )}
    </Location>
  )
}

function Page({ pageContext, children }) {
  const { header, status, layout = "default" } = pageContext;
  const title = header ? `${header} | Basis` : "Basis";

  return (
    <RecoilRoot>
      <BasisProvider theme={theme} InternalLink={GatsbyLink}>
        <Global
          styles={{
            body: {
              margin: 0,
              fontFamily: theme.fonts.body,
              fontSize: theme.fontSizes[1],
              lineHeight: theme.lineHeights[2],
              color: theme.colors.black,
            },
            a: {
              color: "inherit",
              textDecoration: "none",
            },
            ":focus": {
              outline: 0,
            },
            '[data-basis-keyboard-mode="true"] :not([aria-invalid="true"]):focus': {
              boxShadow: `0 0 0px ${theme.radii[1]} ${theme.colors.secondary.lightBlue.t80}`,
            },
          }}
        />
        <SEO title={title} />
        <Splitbee />
        {layout === "empty" ? (
          <main>{children}</main>
        ) : (
          <div
            css={{
              height: "100vh",
              display: "grid",
              gridTemplateColumns: "224px 1fr",
            }}
          >
            <Sidebar />
            <main
              css={{
                minHeight: 0,
                display: "flex",
                flexDirection: "column",
                overflow: "auto",
              }}
            >
              {header && (
                <div
                  css={{
                    borderBottom: `1px solid ${theme.colors.grey.t16}`,
                  }}
                >
                  <div
                    css={{
                      display: "flex",
                      padding: `${theme.space[5]} ${theme.space[6]} 0`,
                    }}
                  >
                    <Text as="h1" textStyle="heading4">
                      {header}
                    </Text>
                    {status && (
                      <Container margin="0 0 0 9">
                        <ComponentStatusIndicator status={status} />
                      </Container>
                    )}
                    <FeedbackFish projectId="42362f272b4510">
                      <div css={{ marginLeft: "auto" }}>
                        <Button variant="secondary">Feedback</Button>
                      </div>
                    </FeedbackFish>
                  </div>
                  <Location>
                    {({ location }) => {
                      const urls = getTabsUrls(location);

                      return (
                        <ul
                          css={{
                            display: "flex",
                            margin: `${theme.space[6]} 0 0`,
                            padding: 0,
                          }}
                        >
                          {urls.map(({ name, href, isCurrent }) => (
                            <li
                              css={{
                                listStyleType: "none",
                                color: isCurrent
                                  ? theme.colors.black
                                  : theme.colors.grey.t65,
                                ...(isCurrent && {
                                  "::after": {
                                    content: "''",
                                    display: "block",
                                    height: theme.borderWidths[1],
                                    margin: `0 ${theme.space[6]}`,
                                    backgroundColor: theme.colors.black,
                                  },
                                }),
                              }}
                              key={name}
                            >
                              <GatsbyLink
                                css={{
                                  display: "flex",
                                  alignItems: "center",
                                  boxSizing: "border-box",
                                  width: "100%",
                                  padding: `${theme.space[2]} ${theme.space[6]}`,
                                  color: isCurrent
                                    ? theme.colors.black
                                    : theme.colors.grey.t75,
                                }}
                                to={href}
                              >
                                {name}
                              </GatsbyLink>
                            </li>
                          ))}
                        </ul>
                      );
                    }}
                  </Location>
                </div>
              )}
              <div
                css={{
                  display: "flex",
                  flexDirection: "column",
                  flexGrow: 1,
                  minHeight: 0,
                  overflowY: "auto",
                }}
              >
                {children}
              </div>
            </main>
          </div>
        )}
      </BasisProvider>
    </RecoilRoot>
  );
}

Layout = ({ children, headData = {}, template = Main }) => {
  const Template = template
  return (
    <Theme.Consumer>
      {({ theme }) => (
        <Location>
          {({ location }) => (
            <Language.Consumer>
              {({ key: lang, locale, availableLanguages }) => (
                <Fragment>
                  <StaticQuery
                    query={graphql`
                      query {
                        siteHeadData: allFile(filter:{relativePath:{glob:"content/meta/__site-*.md"}}) {
                          nodes{
                            relativePath,
                            childMarkdownRemark{
                              frontmatter {
                                head {
                                  title
                                  meta {
                                    name
                                    content
                                    file
                                  }
                                }
                              }
                            }
                          }
                        }
                        pageHeadData: allFile(filter:{relativePath:{regex:"/^content\/meta\/.*\\.md$/"}}) {
                          nodes{
                            relativePath,
                            childMarkdownRemark{
                              frontmatter {
                                head {
                                  title
                                  meta {
                                    name
                                    content
                                    file
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    `}
                    render={({ siteHeadData, pageHeadData }) => {
                      function getURIPathWithoutLang () {
                        return location.pathname.replace(new RegExp(`^\\/${lang}`), '')
                      }

                      const uriPathWithoutLang = getURIPathWithoutLang()
                      const pageContentPath = uriPathWithoutLang === '/'
                        ? 'index'
                        : uriPathWithoutLang.replace(/^\//, '').replace(/\/$/, '').replace(/\//g, '___')

                      const page = pageHeadData.nodes.filter(node => node.relativePath === `content/meta/${pageContentPath}-${lang}.md`).shift()
                      const site = siteHeadData.nodes.filter(node => node.relativePath === `content/meta/__site-${lang}.md`).shift()

                      return (
                        <Head
                          site={{
                            title: (site &&
                              site.childMarkdownRemark &&
                              site.childMarkdownRemark.frontmatter &&
                              site.childMarkdownRemark.frontmatter.head &&
                              site.childMarkdownRemark.frontmatter.head.title) || '',
                            meta: (site &&
                              site.childMarkdownRemark &&
                              site.childMarkdownRemark.frontmatter &&
                              site.childMarkdownRemark.frontmatter.head &&
                              site.childMarkdownRemark.frontmatter.head.meta) || []
                          }}
                          page={{
                            title: (page &&
                              page.childMarkdownRemark &&
                              page.childMarkdownRemark.frontmatter &&
                              page.childMarkdownRemark.frontmatter.head &&
                              page.childMarkdownRemark.frontmatter.head.title) || '',
                            meta: (page &&
                              page.childMarkdownRemark &&
                              page.childMarkdownRemark.frontmatter &&
                              page.childMarkdownRemark.frontmatter.head &&
                              page.childMarkdownRemark.frontmatter.head.meta) || []
                          }}
                          component={{
                            title: headData.title,
                            meta: headData.meta
                          }}
                          locale={locale}
                          availableLocales={availableLanguages.map(({ locale }) => locale).filter(locale => Boolean(locale))}
                          lang={lang}
                          url={process.env.GATSBY_URL}
                        >
                          {theme.typography.googleFontsURL && <link rel='stylesheet' type='text/css' href={theme.typography.googleFontsURL} />}
                        </Head>
                      )
                    }}
                  />
                  <Template>
                    {children}
                  </Template>
                </Fragment>
              )}
            </Language.Consumer>
          )}
        </Location>
      )}
    </Theme.Consumer>
  )
}

function Sidebar() {
  const theme = useTheme();
  const data = useStaticQuery(graphql`
    query ComponentsQuery {
      allFile(
        filter: { relativePath: { regex: "/^components/.*/index.js/" } }
      ) {
        edges {
          node {
            relativeDirectory
          }
        }
      }
    }
  `);
  const components = data.allFile.edges
    .map(({ node }) => {
      const { relativeDirectory } = node;

      return {
        componentName: pascalCase(relativeDirectory.split("/")[1]),
        href: `/${relativeDirectory}`,
      };
    })
    .sort(({ componentName: name1 }, { componentName: name2 }) =>
      name1 < name2 ? -1 : 1
    );

  return (
    <header css={{ minHeight: 0, display: "flex", flexDirection: "column" }}>
      <div
        css={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: `${theme.space[5]} ${theme.space[6]}`,
          borderBottom: `1px solid ${theme.colors.grey.t10}`,
          backgroundColor: theme.colors.grey.t05,
        }}
      >
        <GatsbyLink to="/" css={{ ...theme.textStyles.heading5 }}>
          Basis
        </GatsbyLink>
        <Link
          appearance="icon"
          href="https://github.com/LatitudeFinancialOSS/basis"
          newTab
          title="GitHub"
          onClick={() => {
            trackEvent("GitHub link clicked");
          }}
        >
          <Icon name="github" color="grey.t75" hoverColor="black" />
        </Link>
      </div>
      <div
        css={{
          display: "flex",
          flexDirection: "column",
          flexGrow: 1,
          overflowY: "auto",
          backgroundColor: theme.colors.grey.t05,
        }}
      >
        <Location>
          {({ location }) => (
            <>
              <Section>
                <Item location={location} href="/playground">
                  Playground
                </Item>
              </Section>
              <Section heading="Foundation">
                <Item location={location} href="/typography">
                  Typography
                </Item>
                <Item location={location} href="/spacing">
                  Spacing
                </Item>
                <Item location={location} href="/colors">
                  Colors
                </Item>
              </Section>
              <Section heading="Components">
                {components.map(({ componentName, href }, index) => (
                  <Item location={location} href={href} key={index}>
                    {componentName}
                  </Item>
                ))}
              </Section>
            </>
          )}
        </Location>
        <div
          css={{
            marginTop: "auto",
            padding: `${theme.space[4]} ${theme.space[6]}`,
            fontSize: "10px",
            color: theme.colors.grey.t65,
            borderTop: `1px solid ${theme.colors.grey.t10}`,
          }}
        >
          Version {version}
        </div>
      </div>
    </header>
  );
}

Article = ({ pageContext }) => {
  const [position, setPosition] = useState('top')
  const [navigationHeights, setNavigationHeights] = useState({
    min: null,
    max: null,
  })
  const [maxWidth, setMaxWidth] = useState(null)
  const [mobileTopNavigationOpen, setMobileTopNavigationOpen] = useState(false)
  const [mobileBottomNavigationOpen, setMobileBottomNavigationOpen] =
    useState(false)

  function getReportIssueHref({ pathname, query, hash }) {
    const baseHref = `https://github.com/${config.gitHubRepository}/issues/new?assignees=&labels=content&template=content-issue.md&title=`
    return `${baseHref}${encodeURIComponent(
      `Invalid content ${pathname}${query || ''}${hash || ''}`
    )}`
  }

  const renderDownloaders = (loc) => {
    if (!loc) return
    if (!loc.href) return
    if (loc.href.includes('/cardano/get-started/wallet/')) {
      return <CardanoDownloader />
    }
  }

  /**
   * Replaces references to custom components with rendered component
   * e.g. <!-- include components/OtherComponent --> -> renders components/MarkdownComponents/OtherComponent if it exists
   * e.g. <!-- embed youtube/123 --> -> Renders embedded youtube video with id 123
   */
  function renderArticleContent() {
    let remainingContent = pageContext.content
    const contentParts = []
    // Matches <!-- include components/<MyComponent> --> - where <MyComponent> is Alpha string reference to component
    // Or <!-- embed youtube/id --> - where id is the YouTube video id to embed
    // Or <!-- embed grafana/url --> - where url is the Grafana URL
    // in src/components/MarkdownComponent/index.js
    const pattern =
      /<!--\s(include|embed)\s(components|youtube|grafana)\/([^\s]+)\s-->/
    let match = remainingContent.match(pattern)
    let matchIndex = match ? match.index : -1

    while (remainingContent.length > 0 && matchIndex >= 0) {
      if (matchIndex > 0) {
        contentParts.push(
          <Markdown source={remainingContent.substring(0, matchIndex)} />
        )
      }

      const [_, type, category, value] = match
      if (type === 'include' && category === 'components') {
        const Component = MarkdownComponents[value]
        if (Component) contentParts.push(<Component />)
      } else if (type === 'embed' && category === 'youtube' && value) {
        contentParts.push(
          <YouTube
            videoId={value}
            opts={{
              width: '100%',
              height: '350px',
            }}
          />
        )
      } else if (type === 'embed' && category === 'grafana' && value) {
        contentParts.push(<Grafana embedLink={value} />)
      }

      remainingContent = remainingContent.substring(
        matchIndex + match[0].length
      )
      match = remainingContent.match(pattern)
      matchIndex = match ? match.index : -1
    }

    if (remainingContent)
      contentParts.push(<Markdown source={remainingContent} />)

    return (
      <Fragment>
        {contentParts.map((content, index) => (
          <Fragment key={index}>{content}</Fragment>
        ))}
      </Fragment>
    )
  }

  return (
    <GlobalContentQuery
      render={(content) => (
        <Layout
          template={Blank}
          headData={{
            title: pageContext.pageTitle,
            meta: [{ name: 'description', content: '' }],
          }}
        >
          <Container>
            <Location>
              {({ location }) => (
                <PageContent>
                  {pageContext.navigationContext.children.length > 0 && (
                    <SideNavigationContainer
                      navigationheights={navigationHeights}
                      maxWidth={maxWidth}
                      className={`position-${position}`}
                    >
                      <div>
                        <NavigationTree
                          ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
                          lang={pageContext.lang}
                          items={pageContext.navigationContext.children}
                          path={`/${pageContext.navigationContext.key}`}
                          currentPathname={location.pathname}
                          position={position}
                          setPosition={setPosition}
                          navigationHeights={navigationHeights}
                          setNavigationHeights={setNavigationHeights}
                          maxWidth={maxWidth}
                          setMaxWidth={setMaxWidth}
                        />
                      </div>
                    </SideNavigationContainer>
                  )}
                  <MainContent
                    className={
                      pageContext.navigationContext.children.length === 0
                        ? 'no-nav'
                        : ''
                    }
                  >
                    {pageContext.navigationContext.children.length > 0 && (
                      <MobileInlineNavigation
                        className={mobileTopNavigationOpen ? 'open' : ''}
                      >
                        <div>
                          <NavigationTree
                            lang={pageContext.lang}
                            ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
                            items={pageContext.navigationContext.children}
                            path={`/${pageContext.navigationContext.key}`}
                            currentPathname={location.pathname}
                            autoScroll={false}
                          />
                        </div>
                        <a
                          href="#"
                          aria-hidden="true"
                          tracking={{
                            label: 'toggle_mobile_article_navigation_top',
                          }}
                          onClick={(e) => {
                            e.preventDefault()
                            setMobileTopNavigationOpen(!mobileTopNavigationOpen)
                          }}
                        >
                          {mobileTopNavigationOpen && <FaChevronUp />}
                          {!mobileTopNavigationOpen && <FaEllipsisH />}
                        </a>
                      </MobileInlineNavigation>
                    )}
                    <MarkdownContent>{renderArticleContent()}</MarkdownContent>
                    <MarkdownContent>
                      {renderDownloaders(location)}
                    </MarkdownContent>
                    <MarkdownContent>
                      {!pageContext.hasNoChildContent &&
                        (pageContext.previous || pageContext.next) && (
                          <Box
                            display="flex"
                            flexDirection="row"
                            justifyContent="space-between"
                            width="100%"
                          >
                            {pageContext.previous &&
                              pageContext.previous.path !==
                                '/testnets/cardano/' && (
                                <Link
                                  href={pageContext.previous.path}
                                  title={pageContext.previous.title}
                                >
                                  &larr; {content.previous}
                                </Link>
                              )}
                            {pageContext.next && (
                              <Link
                                href={pageContext.next.path}
                                title={pageContext.next.title}
                              >
                                {content.next} &rarr;
                              </Link>
                            )}
                          </Box>
                        )}
                    </MarkdownContent>
                    <Box marginTop={2} marginBottom={2}>
                      {config.gitHubRepository && (
                        <Box display="flex">
                          <ReportAnIssueLink
                            href={getReportIssueHref(location)}
                            tracking={{
                              category: 'article',
                              label: 'report_an_issue',
                            }}
                          >
                            <Box
                              display="flex"
                              marginRight={1}
                              flexDirection="column"
                              justifyContent="center"
                            >
                              <FaGithub />
                            </Box>
                            <Box
                              display="flex"
                              flexDirection="column"
                              justifyContent="center"
                            >
                              <p>{content.report_an_issue}</p>
                            </Box>
                          </ReportAnIssueLink>
                        </Box>
                      )}
                    </Box>
                    {pageContext.navigationContext.children.length > 0 && (
                      <MobileInlineNavigation
                        className={mobileBottomNavigationOpen ? 'open' : ''}
                      >
                        <div>
                          <NavigationTree
                            lang={pageContext.lang}
                            ariaLabel={`${pageContext.navigationContext.title} subnavigation`}
                            items={pageContext.navigationContext.children}
                            path={`/${pageContext.navigationContext.key}`}
                            currentPathname={location.pathname}
                            autoScroll={false}
                          />
                        </div>
                        <a
                          href="#"
                          aria-hidden="true"
                          tracking={{
                            label: 'toggle_mobile_article_navigation_bottom',
                          }}
                          onClick={(e) => {
                            e.preventDefault()
                            setMobileBottomNavigationOpen(
                              !mobileBottomNavigationOpen
                            )
                          }}
                        >
                          {mobileBottomNavigationOpen && <FaChevronUp />}
                          {!mobileBottomNavigationOpen && <FaEllipsisH />}
                        </a>
                      </MobileInlineNavigation>
                    )}
                  </MainContent>
                </PageContent>
              )}
            </Location>
            <Theme.Consumer>
              {({ theme, key }) => (
                <Footer theme={theme.palette.type} variant={key} />
              )}
            </Theme.Consumer>
          </Container>
        </Layout>
      )}
    />
  )
}

PageMetadata = ({
  description,
  meta,
  title,
  useTitleTemplate = true,
}) => {
  const { site, ogImageDefault } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            author
            description
            title
            url
          }
        }
        ogImageDefault: file(
          relativePath: { eq: "ef-fellowship-program-og-image.png" }
        ) {
          childImageSharp {
            fixed(width: 758) {
              src
            }
          }
        }
      }
    `
  )

  const desc = description || site.siteMetadata.description
  const siteTitle = site.siteMetadata.title
  const titleTemplate = useTitleTemplate ? `%s | ${siteTitle}` : ``
  const siteUrl = site.siteMetadata.url
  const ogImageUrl = siteUrl.concat(ogImageDefault.childImageSharp.fixed.src)

  return (
    <Location>
      {({ location }) => {
        const { pathname } = location
        const canonical = `${site.siteMetadata.url}${pathname}`

        return (
          <Helmet
            htmlAttributes={{ lang: `en` }}
            title={title}
            titleTemplate={titleTemplate}
            link={[{ rel: "canonical", key: canonical, href: canonical }]}
            meta={[
              {
                name: `description`,
                content: desc,
              },
              {
                name: `image`,
                content: ogImageUrl,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: desc,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata.author,
              },
              {
                name: `twitter:site`,
                content: site.siteMetadata.author,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: desc,
              },
              {
                property: `og:url`,
                content: site.siteMetadata.url,
              },
              {
                property: `og:image`,
                content: ogImageUrl,
              },
            ].concat(meta)}
          />
        )
      }}
    </Location>
  )
}

function SEO({ lang, meta, title, socialCard, description }) {
  const { site, contentfulSocialCard } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            siteUrl
          }
        }
        contentfulSocialCard(slug: { eq: "default" }) {
          description {
            description
          }
          image {
            resize(width: 1200) {
              src
            }
          }
        }
      }
    `,
  )

  const defaultSocialCard = contentfulSocialCard

  const imageSrc = getImageSrc(socialCard, defaultSocialCard)
  const pageDescription = (() => {
    if (description) {
      return description
    }
    if (socialCard && typeof socialCard !== 'string') {
      return socialCard.description.description
    }
    return defaultSocialCard.description.description
  })()

  const urlSchema = 'https:'

  return (
    <Location>
      {({ location }) => (
        <Helmet
          htmlAttributes={{
            lang,
          }}
          title={title}
          defaultTitle={site.siteMetadata.title}
          titleTemplate={`%s | ${site.siteMetadata.title}`}
          meta={[
            {
              property: `og:site_name`,
              content: site.siteMetadata.title,
            },
            {
              property: `og:type`,
              content: 'website',
            },
            {
              property: `og:title`,
              content: title,
            },
            {
              property: `og:url`,
              content: `${site.siteMetadata.siteUrl}${location.pathname}`,
            },
            {
              property: `og:image`,
              content: `${urlSchema}${imageSrc}`,
            },
            {
              property: `og:description`,
              content: pageDescription || site.siteMetadata.description,
            },
            {
              name: `twitter:title`,
              content: title,
            },
            {
              name: `twitter:card`,
              content: 'summary_large_image',
            },
            {
              name: `twitter:image`,
              content: `${urlSchema}${imageSrc}`,
            },
            {
              name: `twitter:site`,
              content: '@COVID19Tracking',
            },

            {
              name: `twitter:creator`,
              content: '@COVID19Tracking',
            },
            {
              name: 'description',
              content: pageDescription || site.siteMetadata.description,
            },
          ].concat(meta)}
        />
      )}
    </Location>
  )
}

SiteDefaultSEO = ({ lang = "en-GB" }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            siteUrl
            twitter
          }
        }
      }
    `
  )

  return (
    <Location>
      {locationProps => {
        const metaTags = []

        metaTags.push(
          {
            name: `description`,
            content: site.siteMetadata.description,
          },
          {
            property: `og:type`,
            content: `website`,
          },
          {
            property: "og:url",
            content: `${site.siteMetadata.siteUrl}${locationProps.location.pathname}`,
          },
          {
            property: "og:site_name",
            content: site.siteMetadata.title,
          },
          {
            property: `og:description`,
            content: site.siteMetadata.description,
          },
          {
            property: "og:image",
            content: logo,
          },
          {
            name: `twitter:card`,
            content: `summary`,
          },
          {
            name: `twitter:creator`,
            content: site.siteMetadata.twitter,
          },
          {
            name: `twitter:title`,
            content: site.siteMetadata.title,
          },
          {
            name: `twitter:description`,
            content: site.siteMetadata.description,
          }
        )

        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            titleTemplate={`${site.siteMetadata.title} :: %s`}
            defaultTitle={site.siteMetadata.title}
            meta={metaTags}
          >
            <link rel="shortcut icon" type="image/png" href={favicon} />
          </Helmet>
        )
      }}
    </Location>
  )
}