Tweaks to be ready for v4

src/components/navigation/DataInformation.tsx

@@ -1,12 +1,10 @@
 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>Tide times for Porthmadog, North Wales, United Kingdom.</Text>
       <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.

src/components/navigation/Layout.tsx

@@ -8,9 +8,7 @@ import {
   useMatches,
 } from "@mantine/core";
 import React from "react";
-import { Header } from "./Header";
 import { Footer } from "./Footer";
-import { useDisclosure } from "@mantine/hooks";
 
 export default function Layout({
   children,

src/components/templates/TideTablePage.tsx

@@ -3,26 +3,16 @@ import { Link, type HeadFC, type PageProps } from "gatsby";
 import {
   Box,
   Button,
-  Card,
-  Center,
-  Container,
-  Group,
-  Image,
-  Table,
-  Text,
-  Title,
 } from "@mantine/core";
 import TidalData from "../../../data/tides.json";
 import { SEO } from "../../components/SEO";
 import Layout from "../navigation/Layout";
 import { DateTime } from "luxon";
 import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types";
 import {
-  IconArrowBack,
   IconArrowLeft,
   IconDownload,
   IconFileTypePdf,
-  IconPdf,
 } from "@tabler/icons-react";
 import { TideTable } from "../tideTables/TideTable";
 import { TideTableMobile } from "../tideTables/TideTableMobile";

src/components/tideTables/TideTable.tsx

@@ -1,4 +1,4 @@
-import { Table, Text } from "@mantine/core";
+import { Badge, Table, Text } from "@mantine/core";
 import React from "react";
 import { DateTime } from "luxon";
 import { TidesJson_ScheduleObject } from "../../types";
@@ -27,6 +27,10 @@ export function TideTable({ data }: { data: TidesJson_ScheduleObject[] }) {
                   weekday: "long",
                   day: "2-digit",
                 })}
+                {DateTime.fromSQL(date.date).toJSDate().setHours(0, 0, 0, 0) ==
+                new Date().setHours(0, 0, 0, 0) ? (
+                  <Badge ml="sm">Today</Badge>
+                ) : null}
               </Text>
             </Table.Td>
             <Table.Td>

src/components/tideTables/TideTableMobile.tsx

@@ -2,8 +2,7 @@ import { Badge, Group, Table, Text } from "@mantine/core";
 import React from "react";
 import { DateTime } from "luxon";
 import { TidesJson_ScheduleObject } from "../../types";
-import { IconSun, IconSunrise, IconSunset } from "@tabler/icons-react";
-import { devNull } from "os";
+import { IconSunrise, IconSunset } from "@tabler/icons-react";
 
 export function TideTableMobile({
   data,

src/components/tideTables/TideTablesMonthList.tsx

@@ -1,19 +1,18 @@
-import { Badge, Card, Group, SimpleGrid, Table, Text } from "@mantine/core";
-import React from "react";
-import { DateTime } from "luxon";
-import { TidesJson_PDFObject, TidesJson_ScheduleObject } from "../../types";
+import { Card, Group, SimpleGrid, Text } from "@mantine/core";
 import {
-  IconArrowRight,
-  IconSun,
-  IconSunrise,
-  IconSunset,
+  IconDownload
 } from "@tabler/icons-react";
-import { devNull } from "os";
 import { Link } from "gatsby";
+import React from "react";
+import { TidesJson_PDFObject } from "../../types";
 
-export function TideTablesMonthList({ files }: { files: TidesJson_PDFObject[] }) {
+export function TideTablesMonthList({
+  files,
+}: {
+  files: TidesJson_PDFObject[];
+}) {
   return (
-    <SimpleGrid cols={{ base: 1, sm: 3, md: 4, lg: 5, xl: 5 }}>
+    <SimpleGrid cols={{ base: 1, sm: 3, md: 4 }}>
       {files.map((month: TidesJson_PDFObject, index: React.Key) => (
         <Link
           to={"/tide-tables/" + month.url}
@@ -25,7 +24,7 @@ export function TideTablesMonthList({ files }: { files: TidesJson_PDFObject[] })
               <Text size="xl" fw={500} mb={"xs"}>
                 {month.name}
               </Text>
-              <IconArrowRight />
+              <IconDownload />
             </Group>
           </Card>
         </Link>

src/components/tideTables/TidesTablesIndexList.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { TidesJson_PDFObject } from "../../types";
+import TidalData from "../../../data/tides.json";
+import { TideTablesMonthList } from "./TideTablesMonthList";
+
+export function TideTablesIndexList() {
+  const month = new Date();
+  month.setHours(0, 0, 0, 0);
+  month.setDate(1);
+  const nextYear = new Date(month);
+  nextYear.setFullYear(month.getFullYear() + 1);
+  const files = TidalData.pdfs.filter((pdf: TidesJson_PDFObject) => {
+    let date = new Date(pdf.date);
+    return date < nextYear && date >= month;
+  });
+  return <TideTablesMonthList files={files} />;
+}

src/pages/index.tsx

@@ -1,26 +1,23 @@
-import * as React from "react";
-import { Link, type HeadFC, type PageProps } from "gatsby";
 import {
-  Badge,
   Button,
   Card,
   Center,
-  Container,
   Group,
-  Image,
   SimpleGrid,
+  Stack,
   Text,
   Title,
-  useMatches,
+  useMatches
 } from "@mantine/core";
-import Logo from "./../images/porthmadogCob.jpg";
-import Layout from "../components/navigation/Layout";
+import { IconArrowRight, IconTable } from "@tabler/icons-react";
+import { Link, type HeadFC, type PageProps } from "gatsby";
+import { DateTime } from "luxon";
+import * as React from "react";
 import TidalData from "../../data/tides.json";
 import { SEO } from "../components/SEO";
-import { DateTime } from "luxon";
-import { LineChart } from "@mantine/charts";
+import Layout from "../components/navigation/Layout";
+import { TideTablesIndexList } from "../components/tideTables/TidesTablesIndexList";
 import { TidesJson_ScheduleObject } from "../types";
-import { IconArrowRight, IconTable } from "@tabler/icons-react";
 
 const Page: React.FC<PageProps> = () => {
   const daysToDisplay = useMatches({ base: 5, sm: 6, md: 8, lg: 10, xl: 10 });
@@ -37,9 +34,12 @@ const Page: React.FC<PageProps> = () => {
   return (
     <Layout>
       <Center>
-        <Title order={1} size={"h1"}>
-          Porthmadog Tide Times
-        </Title>
+        <Stack align="center" gap={"sm"}>
+          <Title order={1} size={"h1"} mb={0}>
+            Porthmadog Tide Times
+          </Title>
+          <Text fw={200}>North Wales, United Kingdom</Text>
+        </Stack>
       </Center>
       <Group justify="space-between" mb="sm" mt="sm">
         <Title order={2} size={"h3"}>
@@ -119,6 +119,17 @@ const Page: React.FC<PageProps> = () => {
           </Card>
         </Link>
       </SimpleGrid>
+      <Group justify="space-between" mb="sm" mt="sm">
+        <Title order={2} size={"h3"}>
+          Monthly Tide Tables
+        </Title>
+        <Link to={"tide-tables/"}>
+          <Button rightSection={<IconArrowRight size={14} />} variant="light">
+            View All
+          </Button>
+        </Link>
+      </Group>
+      <TideTablesIndexList />
     </Layout>
   );
 };

src/pages/tide-tables.tsx

@@ -1,32 +1,22 @@
-import * as React from "react";
+import { Accordion, Button, Text } from "@mantine/core";
+import { IconHome } from "@tabler/icons-react";
 import type { HeadFC, PageProps } from "gatsby";
-import {
-  Accordion,
-  Button,
-  Card,
-  Center,
-  Container,
-  Group,
-  Image,
-  SimpleGrid,
-  Text,
-} from "@mantine/core";
-import Layout from "../components/navigation/Layout";
-import { SEO } from "../components/SEO";
-import TidalData from "../../data/tides.json";
 import { Link } from "gatsby";
-import { TidesJson_PDFObject } from "../types";
-import { IconArrowLeft, IconArrowRight, IconHome } from "@tabler/icons-react";
+import * as React from "react";
+import TidalData from "../../data/tides.json";
+import { SEO } from "../components/SEO";
+import Layout from "../components/navigation/Layout";
 import { TideTablesMonthList } from "../components/tideTables/TideTablesMonthList";
+import { TidesJson_PDFObject } from "../types";
 
 const Page: React.FC<PageProps> = () => {
   const month = new Date();
   month.setHours(0, 0, 0, 0);
   month.setDate(1);
   const nextYear = new Date(month);
   nextYear.setFullYear(month.getFullYear() + 1);
-  const files = TidalData.pdfs.filter((month: TidesJson_PDFObject) => {
-    let date = new Date(month.date);
+  const files = TidalData.pdfs.filter((pdf: TidesJson_PDFObject) => {
+    let date = new Date(pdf.date);
     return date < nextYear;
   });
   const years = [
@@ -35,15 +25,16 @@ const Page: React.FC<PageProps> = () => {
         return new Date(month.date).getFullYear();
       })
     ),
-  ].map((year) => {
-    return {
-      year: year as number,
-      months: files.filter((month: TidesJson_PDFObject) => {
-        return year == new Date(month.date).getFullYear();
-      }),
-    };
-  });
-  console.log(years);
+  ]
+    .map((year) => {
+      return {
+        year: year as number,
+        months: files.filter((month: TidesJson_PDFObject) => {
+          return year == new Date(month.date).getFullYear();
+        }),
+      };
+    })
+    .reverse();
   return (
     <Layout
       title="Downloadable Tide Tables"
@@ -64,7 +55,11 @@ const Page: React.FC<PageProps> = () => {
       >
         {years.map((year) => (
           <Accordion.Item key={year.year} value={year.year + "-tab"}>
-            <Accordion.Control>{year.year}</Accordion.Control>
+            <Accordion.Control>
+              <Text size="xl" fw={500} mb={"xs"}>
+                {year.year}
+              </Text>
+            </Accordion.Control>
             <Accordion.Panel>
               <TideTablesMonthList files={year.months} />
             </Accordion.Panel>