Migrate rest of project to TS

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "cSpell.words": [
+    "htmlfilename",
+    "luxon",
+    "mantine",
+    "pdfs",
+    "porthmadog",
+    "ukho"
+  ]
+}

data/php/dataParser.php

@@ -72,8 +72,7 @@
 $pdfs = [];
 foreach ($tidesMonths as $month=>$data) {
 	//Generate a PDF
-	$pdf = ["name" => date("F Y",strtotime($month)), "date" => date("Y-m-d", strtotime($month)), "filename" => strtolower(date("Y/m",strtotime($month))) . '.pdf', "htmlfilename" => strtolower(date("Y/m",strtotime($month))) . '.html'];
-	$pdf['url'] = $pdf['filename'];
+	$pdf = ["name" => date("F Y", strtotime($month)), "date" => date("Y-m-d", strtotime($month)), "filename" => strtolower(date("Y/m", strtotime($month))) . '.pdf', "htmlfilename" => strtolower(date("Y/m", strtotime($month))) . '.html', "url" => strtolower(date("Y/m", strtotime($month)))];
 
 	$output = '<center><div style="margin-top: 8px; margin-bottom: 2px; margin-left: 5px; margin-right: 5px;">
 				<style>

gatsby-node.ts

@@ -0,0 +1,18 @@
+import TidalData from "./data/tides.json";
+import path from "path";
+import { TidesJson_PDFObject } from "./src/types";
+import { CreatePagesArgs } from "gatsby";
+
+export const createPages = async function ({
+  actions,
+  graphql,
+}: CreatePagesArgs) {
+  TidalData.pdfs.forEach((pdf: TidesJson_PDFObject) => {
+    actions.createPage({
+      path: "tide-tables/" + pdf.url,
+      component: path.resolve(`./src/components/templates/TideTablePage.tsx`),
+      context: { pdf },
+      defer: false,
+    });
+  });
+};

package.json

@@ -27,11 +27,13 @@
     "gatsby-source-filesystem": "^5.13.1",
     "gatsby-transformer-remark": "^6.13.1",
     "gatsby-transformer-sharp": "^5.13.1",
+    "luxon": "^3.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "recharts": "^2.12.7"
   },
   "devDependencies": {
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",

src/components/SEO.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { useSiteMetadata } from "../hooks/use-site-metadata"
+
+export const SEO = ({ title, description, pathname, children }: { title?: string, description?: string, pathname?: string, children?: React.ReactNode }) => {
+  const { title: defaultTitle, description: defaultDescription, siteUrl } = useSiteMetadata()
+
+  const seo = {
+    title: (title ? title + " | " : "") + defaultTitle,
+    description: description || defaultDescription,
+    url: `${siteUrl}${pathname || ``}`,
+  }
+
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta charSet="utf-8" />
+      <meta name="description" content={seo.description} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={seo.title} />
+      <meta name="twitter:url" content={seo.url} />
+      <meta name="twitter:description" content={seo.description} />
+      <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+      {children}
+    </>
+  )
+}

src/components/navigation/Footer.module.css

@@ -0,0 +1,22 @@
+.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));
+}

src/components/navigation/Footer.tsx

@@ -0,0 +1,16 @@
+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';
+
+export function Footer() {
+  const buildYear = useBuildDate()
+
+  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>
+  );
+}