Continue to develop site content

gatsby-config.ts

@@ -7,29 +7,33 @@ const config: GatsbyConfig = {
     description:
       "Free tidal predictions for the seaside town of Porthmadog and its beautiful estuary. The best place to get tide times for Porthmadog, Borth-y-gest, Morfa Bychan and Black rock sands",
     author: "jbithell",
-    siteUrl: "https://port-tides.com"
+    siteUrl: "https://port-tides.com",
   },
   // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
   // If you use VSCode you can also use the GraphQL plugin
   // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
-  plugins: ["gatsby-plugin-postcss", "gatsby-plugin-sitemap", "gatsby-transformer-remark", "gatsby-plugin-image", "gatsby-plugin-sharp","gatsby-transformer-sharp",{
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      "name": "pages",
-      "path": "./src/pages/"
+  plugins: [
+    "gatsby-plugin-postcss",
+    "gatsby-plugin-sitemap",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "pages",
+        path: "./src/pages/",
+      },
+      __key: "pages",
     },
-    __key: "pages"
-  },
-  {
-    resolve: "gatsby-source-build-date",
-    options: {
-      locales: "en-GB",
+    {
+      resolve: "gatsby-source-build-date",
       options: {
-        year: "numeric",
+        locales: "en-GB",
+        options: {
+          year: "numeric",
+        },
       },
     },
-  }]
+  ],
 };
 
 export default config;

src/components/navigation/DataInformation.tsx

@@ -0,0 +1,23 @@
+import { Text } from "@mantine/core";
+import React from "react";
+import { useBuildDate } from "../../hooks/use-build-date";
+
+export function DataInformation() {
+  const buildYear = useBuildDate();
+  console.log(buildYear);
+  return (
+    <>
+      <Text>
+        Times are GMT/BST. Heights shown are heights above chart datum. Low
+        water times are not provided due to seasonal variations and river flows.
+      </Text>
+      <Text>
+        No warranty is provided for the accuracy of data displayed. Tidal Data
+        is &copy;Crown Copyright. Reproduced by permission of the Controller of
+        Her Majesty's Stationery Office and the UK Hydrographic Office
+        (www.ukho.gov.uk). No tidal data may be reproduced without the expressed
+        permission of the UKHO licensing department.
+      </Text>
+    </>
+  );
+}

src/components/navigation/Footer.tsx

@@ -1,16 +1,41 @@
-import { Container, Group, Text } from '@mantine/core';
-import * as classes from './Footer.module.css';
-import React from 'react';
-import { Link } from 'gatsby';
-import { useBuildDate } from '../../hooks/use-build-date';
+import { Button, Container, Group, Modal, Text } from "@mantine/core";
+import React from "react";
+import { Link } from "gatsby";
+import { useBuildDate } from "../../hooks/use-build-date";
+import { useDisclosure } from "@mantine/hooks";
+import { DataInformation } from "./DataInformation";
 
 export function Footer() {
-  const buildYear = useBuildDate()
+  const buildYear = useBuildDate();
+  const [opened, { open, close }] = useDisclosure(false);
 
   return (
-    <Container size="xl" className={classes.inner}>
-      <Text>Times are GMT/BST. No warranty is provided for the accuracy of data displayed. Tidal Data is &copy;Crown Copyright. Reproduced by permission of the Controller of Her Majesty's Stationery Office and the UK Hydrographic Office (www.ukho.gov.uk). No tidal data may be reproduced without the expressed permission of the UKHO licensing department.</Text>
-      <Text>&copy;2014-{buildYear} James Bithell</Text>
-    </Container>
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        title="Data Information"
+        size={"lg"}
+      >
+        <DataInformation />
+      </Modal>
+
+      <Container size="xl">
+        <Group justify="space-between" align="center" mt="md">
+          <Button size="compact-md" variant="outline" onClick={open}>
+            Data information
+          </Button>
+          <Text>
+            &copy;2014-{buildYear}{" "}
+            <Link
+              to={"https://jbithell.com"}
+              style={{ textDecoration: "none", color: "inherit" }}
+            >
+              James Bithell
+            </Link>
+          </Text>
+        </Group>
+      </Container>
+    </>
   );
-}
+}

src/components/navigation/Layout.tsx

@@ -1,30 +1,74 @@
-import { AppShell, Container } from "@mantine/core"
-import React from "react"
-import { Header } from "./Header"
-import { Footer } from "./Footer"
+import {
+  AppShell,
+  Box,
+  Center,
+  Container,
+  Group,
+  Title,
+  useMatches,
+} from "@mantine/core";
+import React from "react";
+import { Header } from "./Header";
+import { Footer } from "./Footer";
 import { useDisclosure } from "@mantine/hooks";
-import { MobileNavbar } from "./MobileNavbar";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const [menuOpened, { toggle: menuToggle }] = useDisclosure(false);
+export default function Layout({
+  children,
+  title,
+  headerButtons,
+}: {
+  children: React.ReactNode;
+  headerButtons?: React.ReactNode;
+  title?: string;
+}) {
+  const showHeader = useMatches({
+    base: false,
+    sm: true,
+  });
   return (
     <AppShell
-      header={{ height: 60 }}
-      navbar={{
-        width: 300,
-        breakpoint: 'sm',
-        collapsed: { mobile: !menuOpened, desktop: true },
-      }}
+      header={{ height: showHeader && headerButtons && title ? 60 : 0 }}
+      footer={{ height: 60 }}
       padding="md"
     >
-      <AppShell.Header><Header menuOpened={menuOpened} menuToggle={menuToggle} /></AppShell.Header>
-      <AppShell.Navbar p="md"><MobileNavbar /></AppShell.Navbar>
+      {showHeader && headerButtons && title ? (
+        <AppShell.Header>
+          <Container size="xl">
+            <Group justify="space-between" align="center" mt="xs">
+              <Title size={"h2"} order={1}>
+                {title}
+              </Title>
+              <Box>
+                <Group justify="flex-end">{headerButtons}</Group>
+              </Box>
+            </Group>
+          </Container>
+        </AppShell.Header>
+      ) : null}
       <AppShell.Main>
-        <Container size="xl">
-          {children}
-        </Container>
+        {!showHeader && headerButtons && title ? (
+          <>
+            <Center>
+              <Title order={1} size={"h2"} hiddenFrom="sm">
+                {title}
+              </Title>
+            </Center>
+            <Group
+              justify="space-between"
+              hiddenFrom="sm"
+              align="center"
+              mt="xs"
+              mb="mb"
+            >
+              {headerButtons}
+            </Group>
+          </>
+        ) : null}
+        <Container size="xl">{children}</Container>
       </AppShell.Main>
-      <AppShell.Footer><Footer /></AppShell.Footer>
+      <AppShell.Footer>
+        <Footer />
+      </AppShell.Footer>
     </AppShell>
-  )
-}
+  );
+}