Add weather forecast page

consistent-type-assertions.txt

@@ -15,6 +15,7 @@ src/app/(frontend)/[center]/observations/[id]/page.tsx
 src/app/(frontend)/[center]/observations/avalanches/[id]/page.tsx
 src/app/(frontend)/[center]/observations/page.tsx
 src/app/(frontend)/[center]/observations/submit/page.tsx
+src/app/(frontend)/[center]/weather/forecast/page.tsx
 src/app/(frontend)/[center]/weather/stations/map/page.tsx
 src/collections/Pages/components/DuplicatePageFor/index.tsx
 src/collections/Pages/endpoints/duplicatePageToTenant.ts

docs/onboarding.md

@@ -22,10 +22,15 @@ We also need to get the new tenant into our Vercel Edge Config. Adding a new ten
   | All Forecasts | /forecasts/avalanche| mutli |
   | _ZONE NAME_ | /forecasts/avalanche/_ZONE_ | multi |
   | Avalanche Forecast | /forecasts/avalanche/_ZONE_ | single |
+  | Mountain Weather * | /weather/forecast| both |
   | Weather Stations | /weather/stations/map| both |
   | Recent Observations | /observations | both |
   | Submit Observations | /observations/submit | both |
 
+  > [!NOTE]
+  > \*Mountain Weather page only exists on select avalanche centers. Check `getAllAvalancheCenterCapabilities` > `platforms > weather`
+
+
 - [ ] Copy pages from the template tenant to the new tenant using the "Duplicate to..." functionality (page document view -> three dot menu)
 
 ## Configuring a custom domain in production

src/app/(frontend)/[center]/nac-widgets.css

@@ -53,6 +53,7 @@
   max-height: none !important;
 }
 
+#nac-forecast-container h1.nac-h1:first-of-type,
 #nac-obs-form-widget h1.nac-h1:first-of-type,
 #nac-single-observation-view h1.nac-h1:first-of-type,
 #nac-single-avalanche-view h1.nac-h1:first-of-type {

src/app/(frontend)/[center]/weather/forecast/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import { generateOGImage } from '@/utilities/generateOGImage'
+
+export const alt = 'Mountain Weather'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }: { params: Promise<{ center: string }> }) {
+  const { center } = await params
+
+  return generateOGImage({
+    center,
+    routeTitle: 'Mountain Weather',
+  })
+}

src/app/(frontend)/[center]/weather/forecast/page.tsx

@@ -0,0 +1,91 @@
+import type { Metadata, ResolvedMetadata } from 'next/types'
+
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+
+import { NACWidget } from '@/components/NACWidget'
+import { WidgetRouterHandler } from '@/components/NACWidget/WidgetRouterHandler.client'
+import { getAvalancheCenterPlatforms } from '@/services/nac/nac'
+import { getNACWidgetsConfig } from '@/utilities/getNACWidgetsConfig'
+import { notFound } from 'next/navigation'
+
+export const dynamic = 'force-static'
+
+export async function generateStaticParams() {
+  const payload = await getPayload({ config: configPromise })
+  const tenants = await payload.find({
+    collection: 'tenants',
+    limit: 0,
+    select: {
+      slug: true,
+    },
+  })
+
+  return tenants.docs.map((tenant): PathArgs => ({ center: tenant.slug }))
+}
+
+type Args = {
+  params: Promise<PathArgs>
+}
+
+type PathArgs = {
+  center: string
+}
+
+export default async function Page({ params }: Args) {
+  const { center } = await params
+
+  const avalancheCenterPlatforms = await getAvalancheCenterPlatforms(center)
+
+  if (!avalancheCenterPlatforms.weather) {
+    notFound()
+  }
+
+  const { version, baseUrl } = await getNACWidgetsConfig()
+
+  return (
+    <>
+      <WidgetRouterHandler initialPath="/weather" widgetPageKey="weather-forecast" />
+      <div className="flex flex-col gap-4">
+        <div className="container mb-4">
+          <div className="prose dark:prose-invert max-w-none">
+            <h1 className="font-bold">Mountain Weather</h1>
+          </div>
+        </div>
+        <NACWidget
+          center={center}
+          widget={'forecast'}
+          widgetsVersion={version}
+          widgetsBaseUrl={baseUrl}
+        />
+      </div>
+    </>
+  )
+}
+
+export async function generateMetadata(
+  _props: Args,
+  parent: Promise<ResolvedMetadata>,
+): Promise<Metadata> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const parentMeta = (await parent) as Metadata
+
+  const parentTitle =
+    parentMeta.title && typeof parentMeta.title !== 'string' && 'absolute' in parentMeta.title
+      ? parentMeta.title.absolute
+      : parentMeta.title
+
+  const parentOg = parentMeta.openGraph
+
+  return {
+    title: `Mountain Weather | ${parentTitle}`,
+    alternates: {
+      canonical: '/weather/forecast',
+    },
+    openGraph: {
+      ...parentOg,
+      title: `Mountain Weather | ${parentTitle}`,
+      url: '/weather/forecast',
+    },
+  }
+}

src/app/(frontend)/[center]/weather/forecast/twitter-image.tsx

@@ -0,0 +1,17 @@
+import { generateOGImage } from '@/utilities/generateOGImage'
+
+export const alt = 'Mountain Weather'
+export const size = {
+  width: 1200,
+  height: 630,
+}
+export const contentType = 'image/png'
+
+export default async function Image({ params }: { params: Promise<{ center: string }> }) {
+  const { center } = await params
+
+  return generateOGImage({
+    center,
+    routeTitle: 'Mountain Weather',
+  })
+}

src/components/NACWidget/widgetRouter.ts

@@ -3,6 +3,7 @@ import { match, MatchFunction } from 'path-to-regexp'
 export type WidgetPageWithRouterKey =
   | 'forecasts'
   | 'forecast-zone'
+  | 'weather-forecast'
   | 'weather-stations'
   | 'recent-observations'
   | 'submit-observation'
@@ -25,6 +26,7 @@ export const pathsByWidgetPage: Record<WidgetPageWithRouterKey, string[]> = {
     '/post',
     '/post/:id',
   ],
+  'weather-forecast': ['/weather'],
   'weather-stations': ['/', '/station-table', '/station-table/:id', '/:id'],
   'recent-observations': [
     '/view/observations',
@@ -43,6 +45,7 @@ export type PathMatcher = MatchFunction<Record<string, string>>
 export const pathMatchersByWidgetPage: Record<WidgetPageWithRouterKey, PathMatcher[]> = {
   forecasts: pathsByWidgetPage.forecasts.map((p) => match(p)),
   'forecast-zone': pathsByWidgetPage['forecast-zone'].map((p) => match(p)),
+  'weather-forecast': pathsByWidgetPage['weather-forecast'].map((p) => match(p)),
   'weather-stations': pathsByWidgetPage['weather-stations'].map((p) => match(p)),
   'recent-observations': pathsByWidgetPage['recent-observations'].map((p) => match(p)),
   'submit-observation': pathsByWidgetPage['submit-observation'].map((p) => match(p)),