From bf0b85e70072b7f3e2d9db344f80d41ed59c88ce Mon Sep 17 00:00:00 2001 From: James Bithell Date: Sun, 9 Jun 2024 11:56:34 +0100 Subject: [PATCH] Continue to develop site content --- gatsby-config.ts | 32 +++-- src/components/navigation/DataInformation.tsx | 23 ++++ src/components/navigation/Footer.module.css | 22 --- src/components/navigation/Footer.tsx | 47 +++++-- src/components/navigation/Header.module.css | 26 ---- src/components/navigation/Header.tsx | 32 ----- src/components/navigation/Layout.tsx | 86 +++++++++--- .../navigation/MobileNavbar.module.css | 64 --------- src/components/navigation/MobileNavbar.tsx | 19 --- src/components/navigation/menuItems.ts | 1 - src/components/templates/TideTablePage.tsx | 119 ++++++++++------ src/components/tideTables/TideTable.tsx | 64 +++++++++ src/components/tideTables/TideTableMobile.tsx | 63 +++++++++ .../tideTables/TideTablesMonthList.tsx | 35 +++++ src/pages/404.tsx | 32 ++--- src/pages/index.tsx | 128 ++++++++++++++---- src/pages/tide-tables.tsx | 80 +++++++++++ src/pages/tideTables.tsx | 34 ----- src/theme.ts | 24 +--- 19 files changed, 582 insertions(+), 349 deletions(-) create mode 100644 src/components/navigation/DataInformation.tsx delete mode 100644 src/components/navigation/Footer.module.css delete mode 100644 src/components/navigation/Header.module.css delete mode 100644 src/components/navigation/Header.tsx delete mode 100644 src/components/navigation/MobileNavbar.module.css delete mode 100644 src/components/navigation/MobileNavbar.tsx delete mode 100644 src/components/navigation/menuItems.ts create mode 100644 src/components/tideTables/TideTable.tsx create mode 100644 src/components/tideTables/TideTableMobile.tsx create mode 100644 src/components/tideTables/TideTablesMonthList.tsx create mode 100644 src/pages/tide-tables.tsx delete mode 100644 src/pages/tideTables.tsx diff --git a/gatsby-config.ts b/gatsby-config.ts index 069d665..381e743 100644 --- a/gatsby-config.ts +++ b/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; diff --git a/src/components/navigation/DataInformation.tsx b/src/components/navigation/DataInformation.tsx new file mode 100644 index 0000000..1054e84 --- /dev/null +++ b/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 ( + <> + + Times are GMT/BST. Heights shown are heights above chart datum. Low + water times are not provided due to seasonal variations and river flows. + + + No warranty is provided for the accuracy of data displayed. Tidal Data + is ©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. + + + ); +} diff --git a/src/components/navigation/Footer.module.css b/src/components/navigation/Footer.module.css deleted file mode 100644 index 2958a78..0000000 --- a/src/components/navigation/Footer.module.css +++ /dev/null @@ -1,22 +0,0 @@ -.inner { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: var(--mantine-spacing-xl); - padding-bottom: var(--mantine-spacing-xl); - - @media (max-width: $mantine-breakpoint-xs) { - flex-direction: column; - } -} - -.links { - @media (max-width: $mantine-breakpoint-xs) { - margin-top: var(--mantine-spacing-md); - } -} - -.link { - text-decoration: none; - color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); -} \ No newline at end of file diff --git a/src/components/navigation/Footer.tsx b/src/components/navigation/Footer.tsx index bd21b56..f81b32f 100644 --- a/src/components/navigation/Footer.tsx +++ b/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 ( - - Times are GMT/BST. No warranty is provided for the accuracy of data displayed. Tidal Data is ©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. - ©2014-{buildYear} James Bithell - + <> + + + + + + + + + ©2014-{buildYear}{" "} + + James Bithell + + + + + ); -} \ No newline at end of file +} diff --git a/src/components/navigation/Header.module.css b/src/components/navigation/Header.module.css deleted file mode 100644 index 2295214..0000000 --- a/src/components/navigation/Header.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.inner { - height: rem(56px); - display: flex; - justify-content: space-between; - align-items: center; -} - -.link { - display: block; - line-height: 1; - padding: rem(8px) rem(12px); - border-radius: var(--mantine-radius-sm); - text-decoration: none; - color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); - font-size: var(--mantine-font-size-sm); - font-weight: 500; - - [data-mantine-color-scheme] &[data-active] { - background-color: var(--mantine-primary-color-filled); - color: var(--mantine-color-white); - } -} - -.link:hover { - background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); -} \ No newline at end of file diff --git a/src/components/navigation/Header.tsx b/src/components/navigation/Header.tsx deleted file mode 100644 index 0202f5b..0000000 --- a/src/components/navigation/Header.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { Container, Group, Burger, Image } from '@mantine/core'; -import * as classes from './Header.module.css'; -import React from 'react'; -import { menuItems } from './menuItems'; -import { Link } from 'gatsby'; -import { useLocation } from '@reach/router'; - -export function Header({ menuOpened, menuToggle }: { menuOpened: boolean, menuToggle: () => void }) { - const location = useLocation(); - const items = menuItems.map((link) => ( - - {link.label} - - )); - - return ( - - - - - {items} - - - - - ); -} \ No newline at end of file diff --git a/src/components/navigation/Layout.tsx b/src/components/navigation/Layout.tsx index 8d0e545..e5f9bd9 100644 --- a/src/components/navigation/Layout.tsx +++ b/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 ( -
- + {showHeader && headerButtons && title ? ( + + + + + {title} + + + {headerButtons} + + + + + ) : null} - - {children} - + {!showHeader && headerButtons && title ? ( + <> +
+ + {title} + +
+ + {headerButtons} + + + ) : null} + {children} -