A3 embeds enhancements

package.json

@@ -45,6 +45,8 @@
   "dependencies": {
     "@libsql/client": "^0.15.4",
     "@mapbox/search-js-react": "^1.5.0",
+    "@open-iframe-resizer/core": "^2.1.0",
+    "@open-iframe-resizer/react": "^2.1.0",
     "@payloadcms/admin-bar": "3.64.0",
     "@payloadcms/db-sqlite": "3.64.0",
     "@payloadcms/email-nodemailer": "3.64.0",

src/app/(embeds)/a3-globals.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '../(frontend)/colors.css';
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: auto;
+    font-weight: auto;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground flex flex-col max-w-[100vw] overflow-x-clip;
+  }
+}
+
+/* A3 Embed Fonts */
+.a3 {
+  font-family: var(--font-libre-franklin), sans-serif;
+}
+
+.a3 h1,
+.a3 h2,
+.a3 h3,
+.a3 h4,
+.a3 h5,
+.a3 h6 {
+  font-family: var(--font-fjalla-one), sans-serif;
+}

src/app/(frontend)/embeds/courses/page.tsx → src/app/(embeds)/embeds/courses/page.tsx

@@ -3,12 +3,12 @@ import { FiltersTotalProvider } from '@/contexts/FiltersTotalContext'
 import { getCourses } from '@/utilities/queries/getCourses'
 import { getCoursesStates } from '@/utilities/queries/getCoursesStates'
 import { getProviders } from '@/utilities/queries/getProviders'
+import Script from 'next/script'
 import { createLoader, parseAsBoolean, parseAsString, SearchParams } from 'nuqs/server'
 import { CoursesFilters } from './CoursesFilters'
 import { CoursesMobileFilters } from './CoursesMobileFilters'
 
 const coursesSearchParams = {
-  backgroundColor: parseAsString,
   title: parseAsString,
   showFilters: parseAsBoolean.withDefault(false),
   types: parseAsString,
@@ -27,7 +27,6 @@ export default async function CoursesEmbedPage({
   searchParams: Promise<SearchParams>
 }) {
   const {
-    backgroundColor,
     title,
     showFilters,
     types,
@@ -59,44 +58,50 @@ export default async function CoursesEmbedPage({
   )
 
   return (
-    <FiltersTotalProvider initialTotal={total}>
-      <div style={backgroundColor ? { backgroundColor } : undefined}>
-        {title && (
-          <div className="mb-6">
-            <h1 className="text-2xl font-bold mb-2">{title}</h1>
-          </div>
-        )}
-
-        {showFilters && (
-          <div className="md:hidden mb-4">
-            <CoursesMobileFilters
-              providers={providersList}
-              states={statesList}
-              hasActiveFilters={hasActiveFilters}
-              startDate={startDate || ''}
-              endDate={endDate || ''}
-            />
-          </div>
-        )}
+    <>
+      <FiltersTotalProvider initialTotal={total}>
+        <div>
+          {title && (
+            <div className="mb-6">
+              <h1 className="text-2xl font-bold mb-2">{title}</h1>
+            </div>
+          )}
 
-        <div className="flex gap-6">
-          <div className="flex-1">
-            <CoursesList initialCourses={courses} initialHasMore={hasMore} initialError={error} />
-          </div>
           {showFilters && (
-            <aside className="hidden md:block w-80 flex-shrink-0">
-              <div className="sticky top-0">
-                <CoursesFilters
-                  startDate={startDate || ''}
-                  endDate={endDate || ''}
-                  states={statesList}
-                  providers={providersList}
-                />
-              </div>
-            </aside>
+            <div className="md:hidden mb-4">
+              <CoursesMobileFilters
+                providers={providersList}
+                states={statesList}
+                hasActiveFilters={hasActiveFilters}
+                startDate={startDate || ''}
+                endDate={endDate || ''}
+              />
+            </div>
           )}
+
+          <div className="flex gap-6">
+            <div className="flex-1">
+              <CoursesList initialCourses={courses} initialHasMore={hasMore} initialError={error} />
+            </div>
+            {showFilters && (
+              <aside className="hidden md:block w-80 flex-shrink-0">
+                <div className="sticky top-0">
+                  <CoursesFilters
+                    startDate={startDate || ''}
+                    endDate={endDate || ''}
+                    states={statesList}
+                    providers={providersList}
+                  />
+                </div>
+              </aside>
+            )}
+          </div>
         </div>
-      </div>
-    </FiltersTotalProvider>
+      </FiltersTotalProvider>
+      <Script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js"
+      />
+    </>
   )
 }

src/app/(frontend)/embeds/providers/page.tsx → src/app/(embeds)/embeds/providers/page.tsx

@@ -8,13 +8,11 @@ import {
 import { getStateLabel } from '@/fields/location/states'
 import type { Provider } from '@/payload-types'
 import config from '@/payload.config'
+import Script from 'next/script'
 import { createLoader, parseAsString, SearchParams } from 'nuqs/server'
 import { getPayload } from 'payload'
 
-export const dynamic = 'force-static'
-
 const providersSearchParams = {
-  backgroundColor: parseAsString,
   title: parseAsString,
 }
 
@@ -27,8 +25,7 @@ export default async function ProvidersEmbedPage({
 }: {
   searchParams: Promise<SearchParams>
 }) {
-  const { backgroundColor, title } = await loadSearchParams(searchParams)
-
+  const { title } = await loadSearchParams(searchParams)
   const payload = await getPayload({ config })
 
   const result = await payload.find({
@@ -67,17 +64,23 @@ export default async function ProvidersEmbedPage({
   const rightColumnStates = states.slice(midpoint)
 
   return (
-    <div style={backgroundColor ? { backgroundColor } : undefined}>
-      {title && (
-        <div className="mb-6">
-          <h1 className="text-2xl font-bold mb-2">{title}</h1>
+    <>
+      <div className="py-4">
+        {title && (
+          <div className="mb-6">
+            <h1 className="text-2xl font-bold mb-2">{title}</h1>
+          </div>
+        )}
+        <div className="grid sm:grid-cols-2 gap-x-4">
+          <StatesAccordion states={leftColumnStates} providersByState={providersByState} />
+          <StatesAccordion states={rightColumnStates} providersByState={providersByState} />
         </div>
-      )}
-      <div className="grid sm:grid-cols-2 gap-x-4">
-        <StatesAccordion states={leftColumnStates} providersByState={providersByState} />
-        <StatesAccordion states={rightColumnStates} providersByState={providersByState} />
       </div>
-    </div>
+      <Script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.js"
+      />
+    </>
   )
 }
 
@@ -100,7 +103,6 @@ function StatesAccordion({
               className="text-base uppercase font-semibold justify-start gap-2.5 [&[data-state=open]>svg]:rotate-45 py-1 hover:no-underline tracking-wider"
               icon="plus"
               iconPosition="left"
-              chevronClassName="text-foreground"
             >
               {stateLabel}
             </AccordionTrigger>

src/app/(embeds)/error.tsx

@@ -0,0 +1,5 @@
+'use client'
+
+import { ErrorBoundary } from '@/components/ErrorBoundary/ErrorBoundary'
+
+export default ErrorBoundary

src/app/(frontend)/embeds/layout.tsx → src/app/(embeds)/layout.tsx

@@ -1,7 +1,12 @@
+import { CustomEmbedStyles } from '@/components/CustomEmbedStyles'
+import { PostHogProvider } from '@/providers/PostHogProvider'
 import { getURL } from '@/utilities/getURL'
 import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
 import { Metadata } from 'next'
 import { Fjalla_One, Libre_Franklin } from 'next/font/google'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { Suspense } from 'react'
+import './a3-globals.css'
 
 const fjallaOne = Fjalla_One({
   weight: '400',
@@ -24,9 +29,24 @@ type Args = {
 
 export default async function EmbedsLayout({ children }: Args) {
   return (
-    <div className={`a3 ${fjallaOne.variable} ${libreFranklin.variable}`}>
-      <div className="flex flex-col min-h-screen max-w-screen overflow-x-clip">{children}</div>
-    </div>
+    <html
+      className={`a3 ${fjallaOne.variable} ${libreFranklin.variable}`}
+      lang="en"
+      suppressHydrationWarning
+    >
+      <body>
+        {/** We expect these routes to be embedded in iframes so we avoid using third-party cookies */}
+        <PostHogProvider persistence="localStorage">
+          <NuqsAdapter>
+            {/** Sets backgroundColor and textColor from query params */}
+            <Suspense fallback={null}>
+              <CustomEmbedStyles />
+            </Suspense>
+            <div className="flex flex-col max-w-screen overflow-x-clip">{children}</div>
+          </NuqsAdapter>
+        </PostHogProvider>
+      </body>
+    </html>
   )
 }
 

src/app/(frontend)/globals.css

@@ -24,17 +24,3 @@
     @apply bg-background text-foreground min-h-[100vh] flex flex-col max-w-[100vw] overflow-x-clip;
   }
 }
-
-/* A3 Embed Fonts */
-.a3 {
-  font-family: var(--font-libre-franklin), sans-serif;
-}
-
-.a3 h1,
-.a3 h2,
-.a3 h3,
-.a3 h4,
-.a3 h5,
-.a3 h6 {
-  font-family: var(--font-fjalla-one), sans-serif;
-}