From 7f7587e7edc91f0da6b00053b1322342628cd365 Mon Sep 17 00:00:00 2001 From: Augment Bot Date: Tue, 19 May 2026 23:19:33 +0000 Subject: [PATCH 1/3] refactor: prepare monorepo for multi-app integration Consolidate duplicated abstractions, add configuration surfaces, and improve code organization in advance of merging additional web apps into this repository. Changes by area: packages/topo (design system): - Add PageDataProvider/usePageData to Theme for app-level page data - Make service IDs overridable from ThemeProvider (cognitoFormsId, usercentricsSettingsId, apiEndpoint) with existing values as defaults - Split monolithic Provider.tsx into sub-providers (Fonts, CmsStrings) - Remove deprecated PropTypes usage (TypeScript interface already exists) - Remove forwardRef wrappers from 15+ components (unnecessary in React 19) - Simplify pureRef/makePureBox utilities accordingly - Add new shared components: VideoPlayer, VideoLink, Markdown, Highlight, CalendlyEmbed (extracted from apps/www) - Add createStaticProps helper for standardized data fetching - Deduplicate ThemeData (remove dead themeContext.ts) - Make apiFetch accept optional endpoint parameter packages/utils: - Add shared arr.ts (dedupeFirstByKey) and splitGroups.ts utilities apps/www: - Replace local QueryProvider with topo's PageDataProvider/usePageData - Move tracking IDs to environment variables with fallback defaults - Update component imports to use new topo exports - Remove deleted local utility files apps/_template: - New minimal Next.js app scaffold for adding future apps --- apps/_template/codegen.yml | 7 + apps/_template/gql-loader.js | 108 ++++++++++++ apps/_template/next-env.d.ts | 6 + apps/_template/next.config.ts | 24 +++ apps/_template/package.json | 30 ++++ apps/_template/src/pages/_app.tsx | 12 ++ apps/_template/src/pages/index.tsx | 11 ++ apps/_template/tsconfig.json | 8 + apps/www/src/components/Calendly.tsx | 52 +----- apps/www/src/components/Contact/Employees.tsx | 4 +- apps/www/src/components/Highlight.tsx | 17 +- .../www/src/components/Index/Announcement.tsx | 6 +- apps/www/src/components/Index/Community.tsx | 4 +- apps/www/src/components/Index/EcoBox.tsx | 4 +- apps/www/src/components/Index/Hero.tsx | 6 +- apps/www/src/components/Index/Programs.tsx | 6 +- .../www/src/components/Index/Quotes/index.tsx | 4 +- apps/www/src/components/Index/Sponsors.tsx | 6 +- apps/www/src/components/Index/Stats.tsx | 6 +- apps/www/src/components/Index/Workshops.tsx | 4 +- apps/www/src/components/Markdown.tsx | 65 +------ apps/www/src/components/Page.tsx | 4 +- .../www/src/components/Press/PhotoGallery.tsx | 4 +- .../src/components/PreviousCoverageLogos.tsx | 6 +- apps/www/src/components/VideoLink.tsx | 26 +-- apps/www/src/components/VideoPlayer.tsx | 44 +---- .../components/VideoTestimonialThumbnail.tsx | 2 +- .../src/components/Volunteer/PhotoGallery.tsx | 4 +- .../src/components/Volunteer/Testimonials.tsx | 4 +- apps/www/src/pages/_app.tsx | 7 +- apps/www/src/pages/contact.tsx | 4 +- apps/www/src/pages/data.tsx | 4 +- apps/www/src/pages/doi/[...doi]/index.tsx | 4 +- .../src/pages/doi/crossref/[...doi]/index.tsx | 4 +- apps/www/src/pages/donate.tsx | 4 +- apps/www/src/pages/eco.tsx | 4 +- apps/www/src/pages/f/[slug].tsx | 4 +- .../src/pages/help/[program]/[audience].tsx | 6 +- apps/www/src/pages/help/[program]/index.tsx | 4 +- apps/www/src/pages/help/index.tsx | 4 +- apps/www/src/pages/legal/[policy].tsx | 6 +- apps/www/src/pages/m/[...slug].tsx | 2 +- apps/www/src/pages/press.tsx | 4 +- apps/www/src/pages/volunteer/index.tsx | 8 +- apps/www/src/pages/volunteer/share.tsx | 4 +- apps/www/src/providers/Fundraise.tsx | 5 +- apps/www/src/providers/Marketing.tsx | 7 +- apps/www/src/query.ts | 6 - packages/topo/package.json | 7 +- .../topo/src/Atom/Box/ClientSideOnlyBox.tsx | 7 +- packages/topo/src/Atom/Box/RatioBox.tsx | 13 +- packages/topo/src/Atom/Box/SizeBox.tsx | 20 +-- .../topo/src/Atom/Box/VisibilityCheckBox.tsx | 13 +- packages/topo/src/Atom/Box/box.tsx | 6 +- packages/topo/src/Atom/Form/index.tsx | 15 +- packages/topo/src/Atom/Highlight/index.tsx | 16 ++ packages/topo/src/Atom/Logo/index.tsx | 4 +- packages/topo/src/Atom/Spinner/index.tsx | 6 +- packages/topo/src/Atom/Text/Code.tsx | 6 +- packages/topo/src/Atom/Text/CopyText.tsx | 6 +- packages/topo/src/Atom/Text/Text.tsx | 4 +- packages/topo/src/Atom/index.ts | 1 + .../topo/src/Molecule/CalendlyEmbed/index.tsx | 53 ++++++ packages/topo/src/Molecule/Content/index.tsx | 2 +- packages/topo/src/Molecule/IconBox/index.tsx | 2 +- packages/topo/src/Molecule/Markdown/index.tsx | 65 +++++++ packages/topo/src/Molecule/Slides/index.tsx | 6 +- .../topo/src/Molecule/VideoLink/index.tsx | 27 +++ .../topo/src/Molecule/VideoPlayer/index.tsx | 45 +++++ packages/topo/src/Molecule/index.ts | 4 + packages/topo/src/Next/Atom/NextBox.tsx | 5 +- packages/topo/src/Next/Atom/NextButton.tsx | 5 +- packages/topo/src/Next/Atom/NextLink.tsx | 6 +- packages/topo/src/Organism/Footer/index.tsx | 8 +- packages/topo/src/Theme/Provider.tsx | 159 ++---------------- packages/topo/src/Theme/providers/Cmp.tsx | 4 +- .../topo/src/Theme/providers/CmsStrings.tsx | 85 ++++++++++ packages/topo/src/Theme/providers/Fonts.tsx | 66 ++++++++ packages/topo/src/Theme/query.ts | 7 + packages/topo/src/Theme/themeContext.ts | 43 ----- packages/topo/src/Theme/vars/index.ts | 2 +- packages/topo/src/_utils.tsx | 24 +-- packages/topo/src/utils.ts | 33 +++- .../src/utils => packages/utils/src}/arr.ts | 0 packages/utils/src/index.ts | 2 + .../utils/src}/splitGroups.ts | 0 pnpm-lock.yaml | 76 ++++++++- 87 files changed, 847 insertions(+), 581 deletions(-) create mode 100644 apps/_template/codegen.yml create mode 100644 apps/_template/gql-loader.js create mode 100644 apps/_template/next-env.d.ts create mode 100644 apps/_template/next.config.ts create mode 100644 apps/_template/package.json create mode 100644 apps/_template/src/pages/_app.tsx create mode 100644 apps/_template/src/pages/index.tsx create mode 100644 apps/_template/tsconfig.json delete mode 100644 apps/www/src/query.ts create mode 100644 packages/topo/src/Atom/Highlight/index.tsx create mode 100644 packages/topo/src/Molecule/CalendlyEmbed/index.tsx create mode 100644 packages/topo/src/Molecule/Markdown/index.tsx create mode 100644 packages/topo/src/Molecule/VideoLink/index.tsx create mode 100644 packages/topo/src/Molecule/VideoPlayer/index.tsx create mode 100644 packages/topo/src/Theme/providers/CmsStrings.tsx create mode 100644 packages/topo/src/Theme/providers/Fonts.tsx delete mode 100644 packages/topo/src/Theme/themeContext.ts rename {apps/www/src/utils => packages/utils/src}/arr.ts (100%) rename {apps/www/src/utils => packages/utils/src}/splitGroups.ts (100%) diff --git a/apps/_template/codegen.yml b/apps/_template/codegen.yml new file mode 100644 index 0000000..aede7bd --- /dev/null +++ b/apps/_template/codegen.yml @@ -0,0 +1,7 @@ +overwrite: true +schema: "https://graph.codeday.org/" +documents: "./src/**/*.gql" +generates: + ./src/@types/graphql-modules.d.ts: + plugins: + - typescript-graphql-files-modules diff --git a/apps/_template/gql-loader.js b/apps/_template/gql-loader.js new file mode 100644 index 0000000..0cef9ba --- /dev/null +++ b/apps/_template/gql-loader.js @@ -0,0 +1,108 @@ +"use strict"; +const path = require("path"); +const fs = require("fs"); +const { parse, visit } = require("graphql"); + +function resolveImports(source, filePath, visited = new Set()) { + if (visited.has(filePath)) return []; + visited.add(filePath); + + const dir = path.dirname(filePath); + const lines = source.split(/\r\n|\r|\n/); + let definitions = []; + const queryLines = []; + + for (const line of lines) { + if (line.trim().startsWith("#import")) { + const match = line.match(/#import\s+["']([^"']+)["']/); + if (match) { + const importPath = path.resolve(dir, match[1]); + const importSource = fs.readFileSync(importPath, "utf-8"); + definitions = definitions.concat(resolveImports(importSource, importPath, visited)); + } + } else { + queryLines.push(line); + } + } + + const cleanSource = queryLines.join("\n").trim(); + if (cleanSource) { + const doc = parse(cleanSource); + definitions = definitions.concat(doc.definitions); + } + + return definitions; +} + +function deduplicateDefs(defs) { + const seen = new Set(); + return defs + .slice() + .reverse() + .filter((def) => { + if (def.kind === "FragmentDefinition") { + if (seen.has(def.name.value)) return false; + seen.add(def.name.value); + } + return true; + }) + .reverse(); +} + +function collectFragmentRefs(def) { + const refs = new Set(); + visit(def, { + FragmentSpread(node) { + refs.add(node.name.value); + }, + }); + return refs; +} + +function getTransitiveDeps(name, definitionMap, seen = new Set()) { + if (seen.has(name)) return seen; + seen.add(name); + const def = definitionMap.get(name); + if (def) { + for (const ref of collectFragmentRefs(def)) { + getTransitiveDeps(ref, definitionMap, seen); + } + } + return seen; +} + +module.exports = function (source) { + if (this.cacheable) this.cacheable(); + + const allDefs = resolveImports(source, this.resourcePath); + const uniqueDefs = deduplicateDefs(allDefs); + + const definitionMap = new Map(); + for (const def of uniqueDefs) { + if (def.name) { + definitionMap.set(def.name.value, def); + } + } + + const namedDefs = uniqueDefs.filter( + (d) => (d.kind === "OperationDefinition" || d.kind === "FragmentDefinition") && d.name, + ); + + function stripLoc(key, val) { + return key === "loc" ? undefined : val; + } + + const fullDoc = { kind: "Document", definitions: uniqueDefs }; + let output = `const _doc = ${JSON.stringify(fullDoc, stripLoc)};\n`; + output += `export default _doc;\n\n`; + + for (const def of namedDefs) { + const name = def.name.value; + const deps = getTransitiveDeps(name, definitionMap); + const subsetDefs = uniqueDefs.filter((d) => d.name && deps.has(d.name.value)); + const subsetDoc = { kind: "Document", definitions: subsetDefs }; + output += `export const ${name} = ${JSON.stringify(subsetDoc, stripLoc)};\n`; + } + + return output; +}; diff --git a/apps/_template/next-env.d.ts b/apps/_template/next-env.d.ts new file mode 100644 index 0000000..1970904 --- /dev/null +++ b/apps/_template/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +import "./.next/types/routes.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/apps/_template/next.config.ts b/apps/_template/next.config.ts new file mode 100644 index 0000000..4ffd0f0 --- /dev/null +++ b/apps/_template/next.config.ts @@ -0,0 +1,24 @@ +import type { NextConfig } from "next"; +import path from "path"; + +const nextConfig: NextConfig = { + transpilePackages: ["@codeday/topo", "@codeday/topocons"], + turbopack: { + rules: { + "*.gql": { + loaders: [path.resolve("gql-loader.js")], + as: "*.js", + }, + }, + }, + webpack(config) { + config.module.rules.push({ + test: /\.gql$/, + exclude: /node_modules/, + loader: path.resolve("gql-loader.js"), + }); + return config; + }, +}; + +export default nextConfig; diff --git a/apps/_template/package.json b/apps/_template/package.json new file mode 100644 index 0000000..4ab6e16 --- /dev/null +++ b/apps/_template/package.json @@ -0,0 +1,30 @@ +{ + "name": "@codeday/APPNAME", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack", + "build": "next build", + "start": "next start", + "codegen": "echo 'Add .gql files to src/ then run: graphql-codegen'" + }, + "dependencies": { + "@codeday/topo": "workspace:*", + "@codeday/topocons": "workspace:*", + "@codeday/utils": "workspace:*", + "graphql": "catalog:", + "graphql-tag": "^2.12.6", + "next": "catalog:", + "react": "catalog:", + "react-dom": "catalog:" + }, + "devDependencies": { + "@codeday/tsconfig": "workspace:*", + "@graphql-codegen/cli": "^5.0.6", + "@graphql-codegen/typescript-graphql-files-modules": "^3.0.0", + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "typescript": "catalog:" + } +} diff --git a/apps/_template/src/pages/_app.tsx b/apps/_template/src/pages/_app.tsx new file mode 100644 index 0000000..b3786c2 --- /dev/null +++ b/apps/_template/src/pages/_app.tsx @@ -0,0 +1,12 @@ +import { ThemeProvider, PageDataProvider } from "@codeday/topo/Theme"; +import type { AppProps } from "next/app"; + +export default function App({ Component, pageProps }: AppProps) { + return ( + + + + + + ); +} diff --git a/apps/_template/src/pages/index.tsx b/apps/_template/src/pages/index.tsx new file mode 100644 index 0000000..9d65855 --- /dev/null +++ b/apps/_template/src/pages/index.tsx @@ -0,0 +1,11 @@ +import { Content } from "@codeday/topo/Molecule"; +import { Heading, Text } from "@codeday/topo/Atom"; + +export default function Home() { + return ( + + Hello World + Replace this with your app content. + + ); +} diff --git a/apps/_template/tsconfig.json b/apps/_template/tsconfig.json new file mode 100644 index 0000000..ffc566c --- /dev/null +++ b/apps/_template/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "@codeday/tsconfig/nextjs.json", + "compilerOptions": { + "typeRoots": ["./src/@types"] + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/apps/www/src/components/Calendly.tsx b/apps/www/src/components/Calendly.tsx index bdf853e..6dfc409 100644 --- a/apps/www/src/components/Calendly.tsx +++ b/apps/www/src/components/Calendly.tsx @@ -1,51 +1 @@ -import { Box } from "@codeday/topo/Atom"; -import React, { useEffect, useState, useRef } from "react"; - -interface CalendlyProps { - slug: string; - meeting?: string; - calendlyURLParams?: string; - [key: string]: any; -} - -export default function Calendly({ slug, meeting, calendlyURLParams, ...props }: CalendlyProps) { - const holder = useRef(null); - const [hasCalendlyLoaded, setHasCalendlyLoaded] = useState(false); - - const typeOfWindow = typeof window; // For static analysis - const windowCalendly = typeOfWindow !== "undefined" && (window as any)?.Calendly; - - useEffect(() => { - if (window && !(window as any).Calendly) { - const script = document.createElement("script"); - script.src = "https://calendly.com/assets/external/widget.js"; - script.addEventListener("load", () => { - setHasCalendlyLoaded(true); - }); - document.head.appendChild(script); - - const link = document.createElement("link"); - link.href = "https://calendly.com/assets/external/widget.css"; - link.rel = "stylesheet"; - document.body.appendChild(link); - - return () => { - document.head.removeChild(script); - document.body.removeChild(link); - }; - } - }, [typeOfWindow]); - - useEffect(() => { - if (windowCalendly && holder) { - (window as any).Calendly.initInlineWidget({ - url: `https://calendly.com/${slug}${meeting ? `/${meeting}` : ""}${calendlyURLParams || ""}`, - parentElement: holder.current, - prefill: {}, - utm: {}, - }); - } - }, [windowCalendly, hasCalendlyLoaded, holder, slug, meeting]); - - return ; -} +export { CalendlyEmbed as default } from "@codeday/topo/Molecule"; diff --git a/apps/www/src/components/Contact/Employees.tsx b/apps/www/src/components/Contact/Employees.tsx index c0d3547..2357bcf 100644 --- a/apps/www/src/components/Contact/Employees.tsx +++ b/apps/www/src/components/Contact/Employees.tsx @@ -2,7 +2,7 @@ import { Text, Box, Grid, Image, Link } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; import React from "react"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; const titleContents = ["CEO", "President", "VP", "Chief", "Director", "Head", "Manager", "Lead"]; const titlePrecedence = (title: string) => @@ -29,7 +29,7 @@ function dedupeByKey(key: string, arr: any[]) { export default function Employees(props: any) { const { account: { employees, otherTeam, contractors }, - } = useQuery(); + } = usePageData(); const sortedEmployees = dedupeByKey("username", [ ...employees, diff --git a/apps/www/src/components/Highlight.tsx b/apps/www/src/components/Highlight.tsx index 8d284a4..3e25a54 100644 --- a/apps/www/src/components/Highlight.tsx +++ b/apps/www/src/components/Highlight.tsx @@ -1,16 +1 @@ -import { Text } from "@codeday/topo/Atom"; -import { useColorMode } from "@codeday/topo/Theme"; - -export default function Highlight(props: any) { - const { colorMode } = useColorMode(); - return ( - - ); -} +export { Highlight as default } from "@codeday/topo/Atom"; diff --git a/apps/www/src/components/Index/Announcement.tsx b/apps/www/src/components/Index/Announcement.tsx index 757311f..318c989 100644 --- a/apps/www/src/components/Index/Announcement.tsx +++ b/apps/www/src/components/Index/Announcement.tsx @@ -1,10 +1,10 @@ import { Box, Text, Button, Grid } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import { DateTime } from "luxon"; import React from "react"; -import { useQuery } from "../../query"; + const fromIso = (s: string) => { var b = s.split(/\D+/).map(Number); @@ -16,7 +16,7 @@ export default function Announcement(props: any) { const { cms: { announcements }, announcementWebinar: { events }, - } = useQuery(); + } = usePageData(); const now = new Date(); const webinarAnnouncementEndDate = new Date().setDate(now.getDate() + 2); diff --git a/apps/www/src/components/Index/Community.tsx b/apps/www/src/components/Index/Community.tsx index 0f7cfd1..15483d5 100644 --- a/apps/www/src/components/Index/Community.tsx +++ b/apps/www/src/components/Index/Community.tsx @@ -7,7 +7,7 @@ import PageVisibility from "react-page-visibility"; import Ticker from "react-ticker"; import truncate from "truncate"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; function PhotoTextCard({ photo, text, authors, wip, href }: any) { return ( @@ -200,7 +200,7 @@ export default function Community({ seed, ...props }: { seed?: any; [key: string const { showcase, cms: { indexCommunityPhotos, stats }, - } = useQuery(); + } = usePageData(); const studentCount = stats?.items?.reduce( (accum: number, e: any) => accum + e.statStudentCount, diff --git a/apps/www/src/components/Index/EcoBox.tsx b/apps/www/src/components/Index/EcoBox.tsx index 1510367..e113751 100644 --- a/apps/www/src/components/Index/EcoBox.tsx +++ b/apps/www/src/components/Index/EcoBox.tsx @@ -3,11 +3,11 @@ import { Content } from "@codeday/topo/Molecule"; import { Eco } from "@codeday/topocons"; import React from "react"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import StaticContent from "../StaticContent"; export default function EcoBox() { - const { eco, learnMore } = useQuery().cms; + const { eco, learnMore } = usePageData().cms; return ( diff --git a/apps/www/src/components/Index/Hero.tsx b/apps/www/src/components/Index/Hero.tsx index 61ccef8..f958ff4 100644 --- a/apps/www/src/components/Index/Hero.tsx +++ b/apps/www/src/components/Index/Hero.tsx @@ -2,16 +2,16 @@ import { Box, Grid, VisibilityCheckBox, Text, Heading, Button } from "@codeday/t import { MediaPlay as Play, Broadcast } from "@codeday/topocons"; import React from "react"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import useTwitch from "../../useTwitch"; -import VideoLink from "../VideoLink"; +import { VideoLink } from "@codeday/topo/Molecule"; import Live from "./Live"; import Teaser from "./Teaser"; export default function Hero({ ...props }: any) { const { cms: { tagline, mission, explainer }, - } = useQuery(); + } = usePageData(); const twitch = useTwitch(); const taglineBlock = ( diff --git a/apps/www/src/components/Index/Programs.tsx b/apps/www/src/components/Index/Programs.tsx index 30c1d22..75a1e2a 100644 --- a/apps/www/src/components/Index/Programs.tsx +++ b/apps/www/src/components/Index/Programs.tsx @@ -1,13 +1,13 @@ import { Box, Grid, Button, Image, Text, CodeDay, Link } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import { apiFetch } from "@codeday/topo/utils"; import { UiStar } from "@codeday/topocons"; import { print } from "graphql"; import haversine from "haversine-distance"; import React, { useEffect, useState } from "react"; -import { useQuery } from "../../query"; + import { nextUpcomingEvent, upcomingEvents, formatInterval } from "../../utils/time"; import { GetMyLocation } from "./Programs.gql"; @@ -29,7 +29,7 @@ export default function Programs() { const { cms: { regions, mainPrograms, codeDayProgram, labsProgram }, clear: { events }, - } = useQuery(); + } = usePageData(); const [geo, setGeo] = useState(); const codeDay = codeDayProgram?.items[0]; const labs = labsProgram?.items[0]; diff --git a/apps/www/src/components/Index/Quotes/index.tsx b/apps/www/src/components/Index/Quotes/index.tsx index 3bf6a43..65f3d87 100644 --- a/apps/www/src/components/Index/Quotes/index.tsx +++ b/apps/www/src/components/Index/Quotes/index.tsx @@ -3,7 +3,7 @@ import { Content } from "@codeday/topo/Molecule"; import shuffle from "knuth-shuffle-seeded"; import React, { useState, useReducer, useEffect } from "react"; -import { useQuery } from "../../../query"; +import { usePageData } from "@codeday/topo/Theme"; import VideoTestimonialThumbnail from "../../VideoTestimonialThumbnail"; import Globe from "./Globe"; import TextQuote from "./TextQuote"; @@ -18,7 +18,7 @@ interface QuotesProps { export default function Quotes({ seed }: QuotesProps) { const { cms: { quoteRegions, quoteTestimonials }, - } = useQuery(); + } = usePageData(); const textQuotes = shuffle( quoteTestimonials?.items.filter((q: any) => !q.video), seed, diff --git a/apps/www/src/components/Index/Sponsors.tsx b/apps/www/src/components/Index/Sponsors.tsx index dd98dac..e8db271 100644 --- a/apps/www/src/components/Index/Sponsors.tsx +++ b/apps/www/src/components/Index/Sponsors.tsx @@ -1,16 +1,16 @@ import { Grid, Heading, Link, Box, Text, Image } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import React from "react"; -import { useQuery } from "../../query"; + import PreviousCoverageLogos from "../PreviousCoverageLogos"; export default function Sponsors(props: any) { const { colorMode } = useColorMode(); const { cms: { majorSponsors, minorSponsors }, - } = useQuery(); + } = usePageData(); return ( diff --git a/apps/www/src/components/Index/Stats.tsx b/apps/www/src/components/Index/Stats.tsx index c09aa28..838e075 100644 --- a/apps/www/src/components/Index/Stats.tsx +++ b/apps/www/src/components/Index/Stats.tsx @@ -1,10 +1,10 @@ import { Text, Grid, Box } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import React from "react"; import CountUp from "react-countup"; -import { useQuery } from "../../query"; + function rollup(events: any[]): Record { const stats: Record = {}; @@ -47,7 +47,7 @@ export default function Stats(props: any) { const { cms: { stats, quoteRegions }, labs: { statTotalOutcomes }, - } = useQuery(); + } = usePageData(); const rollupStats = rollup(stats.items); const hours = statTotalOutcomes.find((o: any) => o.key === "hoursCount"); diff --git a/apps/www/src/components/Index/Workshops.tsx b/apps/www/src/components/Index/Workshops.tsx index fe00868..f5877b3 100644 --- a/apps/www/src/components/Index/Workshops.tsx +++ b/apps/www/src/components/Index/Workshops.tsx @@ -3,7 +3,7 @@ import { Content } from "@codeday/topo/Molecule"; import { create } from "random-seed"; import React from "react"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { parseIsoString, formatShortDate } from "../../utils/time"; const fixedColors: Record = { @@ -17,7 +17,7 @@ const fixedColors: Record = { const colors = ["green", "blue", "orange", "cyan", "purple", "yellow", "indigo"]; export default function Workshops() { - const { calendar } = useQuery(); + const { calendar } = usePageData(); if (calendar?.events?.length === 0) return <>; diff --git a/apps/www/src/components/Markdown.tsx b/apps/www/src/components/Markdown.tsx index 3a5dcea..a67e1ea 100644 --- a/apps/www/src/components/Markdown.tsx +++ b/apps/www/src/components/Markdown.tsx @@ -1,64 +1 @@ -import { Heading, Text, List, ListItem, Box } from "@codeday/topo/Atom"; -import React from "react"; -import ReactMarkdown from "react-markdown"; -import rehypeRaw from "rehype-raw"; -import RemarkGFM from "remark-gfm"; - -const HEADING_SIZES = ["4xl", "3xl", "xl", "md", "md", "md"]; -const adjustHeadingLevel = (baseHeadingLevel: number, level: number): number => { - const newLevel = baseHeadingLevel + level - 1; - if (newLevel > 6) return 6; - if (newLevel < 1) return 1; - return newLevel; -}; - -interface MarkdownProps { - baseHeadingLevel?: number; - allowHtml?: boolean; - rehypePlugins?: any[]; - [key: string]: any; -} - -const Markdown = ({ baseHeadingLevel, allowHtml, ...props }: MarkdownProps) => { - function h(level: number) { - return (props: any) => { - const adjustedLevel = adjustHeadingLevel(baseHeadingLevel || 1, level); - const m = Math.max(6 - adjustedLevel + 1, 2); - return ( - - ); - }; - } - - const mdTheme = { - h1: h(1), - h2: h(2), - h3: h(3), - h4: h(4), - h5: h(5), - h6: h(6), - tr: (props: any) => , - p: (props: any) => , - ol: (props: any) => , - ul: (props: any) => , - li: (props: any) => , - }; - return ( - - ); -}; - -export default Markdown; +export { Markdown as default } from "@codeday/topo/Molecule"; diff --git a/apps/www/src/components/Page.tsx b/apps/www/src/components/Page.tsx index 8668804..d7c90b7 100644 --- a/apps/www/src/components/Page.tsx +++ b/apps/www/src/components/Page.tsx @@ -7,7 +7,7 @@ import Head from "next/head"; import React, { ReactNode } from "react"; import { useFundraise } from "../providers"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; const DOMAIN = "https://www.codeday.org"; const FUNDRAISE_UP_BUTTON_ID = "XBSBRRMF"; @@ -23,7 +23,7 @@ interface PageProps { } export default function Page({ children, title, darkHeader, slug, seo }: PageProps) { - const { cms } = useQuery(); + const { cms } = usePageData(); const { mission } = cms || {}; const { isFundraiseLoaded } = useFundraise(); const disclaimerTexts = (cms?.globalSponsors?.items || []) diff --git a/apps/www/src/components/Press/PhotoGallery.tsx b/apps/www/src/components/Press/PhotoGallery.tsx index 0226f19..94fc555 100644 --- a/apps/www/src/components/Press/PhotoGallery.tsx +++ b/apps/www/src/components/Press/PhotoGallery.tsx @@ -3,7 +3,7 @@ import { Content } from "@codeday/topo/Molecule"; import shuffle from "knuth-shuffle-seeded"; import React, { useState } from "react"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import Photo from "./Photo"; import PhotoTagPicker from "./PhotoTagPicker"; @@ -16,7 +16,7 @@ export default function PhotoGallery({ seed, ...props }: PhotoGalleryProps) { const [filter, setFilter] = useState(null); const { cms: { pressPhotos }, - } = useQuery(); + } = usePageData(); const photos = shuffle( (pressPhotos?.items || []).map((m: any) => m), seed, diff --git a/apps/www/src/components/PreviousCoverageLogos.tsx b/apps/www/src/components/PreviousCoverageLogos.tsx index d57d295..250e7e0 100644 --- a/apps/www/src/components/PreviousCoverageLogos.tsx +++ b/apps/www/src/components/PreviousCoverageLogos.tsx @@ -1,8 +1,8 @@ import { Link, Image } from "@codeday/topo/Atom"; import React from "react"; -import { useQuery } from "../query"; -import { dedupeFirstByKey } from "../utils/arr"; +import { usePageData } from "@codeday/topo/Theme"; +import { dedupeFirstByKey } from "@codeday/utils"; import StaticContent from "./StaticContent"; interface PreviousCoverageLogosProps { @@ -13,7 +13,7 @@ interface PreviousCoverageLogosProps { export default function PreviousCoverageLogos({ num = 5, ...props }: PreviousCoverageLogosProps) { const { cms: { coverageLogos }, - } = useQuery(); + } = usePageData(); const pubs = dedupeFirstByKey( coverageLogos.items.filter((pub: any) => pub.publicationLogo), "publicationName", diff --git a/apps/www/src/components/VideoLink.tsx b/apps/www/src/components/VideoLink.tsx index b719779..fea3932 100644 --- a/apps/www/src/components/VideoLink.tsx +++ b/apps/www/src/components/VideoLink.tsx @@ -1,25 +1 @@ -import { Box } from "@codeday/topo/Atom"; -import React, { useState, ReactNode } from "react"; -import { Modal } from "react-responsive-modal"; - -import VideoPlayer from "./VideoPlayer"; - -interface VideoLinkProps { - children?: ReactNode; - [key: string]: any; -} - -export default function VideoLink({ children, ...props }: VideoLinkProps) { - const [modalOpen, setModalOpen] = useState(false); - - return ( - <> - setModalOpen(false)}> - - - setModalOpen(true)}> - {children} - - - ); -} +export { VideoLink as default } from "@codeday/topo/Molecule"; diff --git a/apps/www/src/components/VideoPlayer.tsx b/apps/www/src/components/VideoPlayer.tsx index e4e4ec9..91a83aa 100644 --- a/apps/www/src/components/VideoPlayer.tsx +++ b/apps/www/src/components/VideoPlayer.tsx @@ -1,43 +1 @@ -import { Box } from "@codeday/topo/Atom"; -import dynamic from "next/dynamic"; -import React, { useEffect, useRef } from "react"; - -//@ts-ignore -const Hls = dynamic(() => import("hls.js/dist/hls.light.js"), { ssr: false }); - -interface VideoPlayerProps { - url?: string; - poster?: string; - autoPlay?: boolean; - volume?: number; - [key: string]: any; -} - -export default function VideoPlayer({ url, poster, autoPlay, volume, ...props }: VideoPlayerProps) { - const player = useRef(null); - useEffect(() => { - if (typeof window === "undefined" || typeof player === "undefined") return; - if (url?.split(".").pop() !== "m3u8") return; - if (!(Hls as any).isSupported()) return; - - const hls = new (Hls as any)(); - hls.loadSource(url); - hls.attachMedia(player); - }, [typeof window, player, url]); - - return ( - - - - ); -} +export { VideoPlayer as default } from "@codeday/topo/Molecule"; diff --git a/apps/www/src/components/VideoTestimonialThumbnail.tsx b/apps/www/src/components/VideoTestimonialThumbnail.tsx index fe0203e..c87ba7c 100644 --- a/apps/www/src/components/VideoTestimonialThumbnail.tsx +++ b/apps/www/src/components/VideoTestimonialThumbnail.tsx @@ -2,7 +2,7 @@ import { Box } from "@codeday/topo/Atom"; import { MediaPlay } from "@codeday/topocons"; import React from "react"; -import VideoLink from "./VideoLink"; +import { VideoLink } from "@codeday/topo/Molecule"; interface VideoTestimonialThumbnailProps { video: any; diff --git a/apps/www/src/components/Volunteer/PhotoGallery.tsx b/apps/www/src/components/Volunteer/PhotoGallery.tsx index ea9841e..6b8e66b 100644 --- a/apps/www/src/components/Volunteer/PhotoGallery.tsx +++ b/apps/www/src/components/Volunteer/PhotoGallery.tsx @@ -1,9 +1,9 @@ import { Box, Grid, Text, Image } from "@codeday/topo/Atom"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; export default function PhotoGallery(props: any) { - const { cms } = useQuery(); + const { cms } = usePageData(); const volunteerPhotoGallery = cms?.volunteerPhotoGallery?.items || []; return ( diff --git a/apps/www/src/components/Volunteer/Testimonials.tsx b/apps/www/src/components/Volunteer/Testimonials.tsx index 5d48038..6a3eee0 100644 --- a/apps/www/src/components/Volunteer/Testimonials.tsx +++ b/apps/www/src/components/Volunteer/Testimonials.tsx @@ -2,7 +2,7 @@ import { Box, Grid, Text, Image } from "@codeday/topo/Atom"; import shuffle from "knuth-shuffle-seeded"; import { useSlideshow } from "../../providers"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; const QUOTE_DURATION = 10000; @@ -12,7 +12,7 @@ interface TestimonialsProps { } export default function Testimonials({ seed, ...props }: TestimonialsProps) { - const { cms } = useQuery(); + const { cms } = usePageData(); const testimonials = shuffle( (cms?.volunteerTestimonials?.items || []).filter( (t: any) => t.quote.split(" ").length <= 6 * 8, diff --git a/apps/www/src/pages/_app.tsx b/apps/www/src/pages/_app.tsx index b498198..333c0d1 100644 --- a/apps/www/src/pages/_app.tsx +++ b/apps/www/src/pages/_app.tsx @@ -1,4 +1,4 @@ -import { ThemeProvider } from "@codeday/topo/Theme"; +import { ThemeProvider, PageDataProvider } from "@codeday/topo/Theme"; import "react-responsive-modal/styles.css"; import { debug } from "@codeday/utils"; @@ -6,7 +6,6 @@ import { AppProps } from "next/app"; import { Fragment, StrictMode, useEffect } from "react"; import { MarketingProvider, FundraiseProvider } from "../providers"; -import { Provider } from "../query"; const DEBUG = debug(["www", "pages", "_app"]); const STRICT_MODE_OR_FRAGMENT = @@ -22,9 +21,9 @@ export default function App({ Component, pageProps }: AppProps) { - + - + diff --git a/apps/www/src/pages/contact.tsx b/apps/www/src/pages/contact.tsx index a397a5e..8e1ce21 100644 --- a/apps/www/src/pages/contact.tsx +++ b/apps/www/src/pages/contact.tsx @@ -12,7 +12,7 @@ import Employees from "../components/Contact/Employees"; import FullProfile from "../components/Contact/FullProfile"; import TextOnly from "../components/Contact/TextOnly"; import Page from "../components/Page"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; import { ContactQuery } from "./contact.gql"; function nl2br(str: string): string { @@ -32,7 +32,7 @@ export default function Home({ seed }: { seed: number }) { account: { employees, otherTeam, volunteers, board, contractors, emeritus, boardEmeritus }, labs, clear, - } = useQuery(); + } = usePageData(); const employeeIds = employees.map((e: any) => e.id); const otherIds = [...employees, ...otherTeam, ...board, ...contractors, ...emeritus].map( diff --git a/apps/www/src/pages/data.tsx b/apps/www/src/pages/data.tsx index 826c2e4..676b02e 100644 --- a/apps/www/src/pages/data.tsx +++ b/apps/www/src/pages/data.tsx @@ -6,12 +6,12 @@ import { DateTime } from "luxon"; import { GetStaticProps } from "next"; import Page from "../components/Page"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; import Error404 from "./404"; import { DataListPublicationsQuery } from "./data.gql"; export default function Home() { - const { cms } = useQuery(); + const { cms } = usePageData(); if (!cms) { return ( diff --git a/apps/www/src/pages/doi/[...doi]/index.tsx b/apps/www/src/pages/doi/[...doi]/index.tsx index f352bef..bb06f0a 100644 --- a/apps/www/src/pages/doi/[...doi]/index.tsx +++ b/apps/www/src/pages/doi/[...doi]/index.tsx @@ -30,7 +30,7 @@ import { useRouter } from "next/router"; import Markdown from "react-markdown"; import Page from "../../../components/Page"; -import { useQuery } from "../../../query"; +import { usePageData } from "@codeday/topo/Theme"; import Error404 from "../../404"; import { PublicationQuery, ListPublicationsQuery } from "./index.gql"; @@ -96,7 +96,7 @@ function FileIcon({ file }: FileIconProps) { } export default function Home() { - const { cms } = useQuery(); + const { cms } = usePageData(); const { query } = useRouter(); if (!cms) { diff --git a/apps/www/src/pages/doi/crossref/[...doi]/index.tsx b/apps/www/src/pages/doi/crossref/[...doi]/index.tsx index 455ae18..60756e2 100644 --- a/apps/www/src/pages/doi/crossref/[...doi]/index.tsx +++ b/apps/www/src/pages/doi/crossref/[...doi]/index.tsx @@ -10,7 +10,7 @@ import { useMemo } from "react"; import xmlbuilder from "xmlbuilder"; import Page from "../../../../components/Page"; -import { useQuery } from "../../../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { PublicationQuery, ListPublicationsQuery } from "../../[...doi]/index.gql"; function licenseToLink(license: string): string | undefined { @@ -206,7 +206,7 @@ function getCrossrefXml(publication: any, id: string): string { } export default function Crossref() { - const { cms } = useQuery(); + const { cms } = usePageData(); const { query } = useRouter(); const id = useMemo(() => `codeday-${Math.random().toString(36).substring(2, 8)}`, []); diff --git a/apps/www/src/pages/donate.tsx b/apps/www/src/pages/donate.tsx index 90f108a..a9bc22e 100644 --- a/apps/www/src/pages/donate.tsx +++ b/apps/www/src/pages/donate.tsx @@ -5,13 +5,13 @@ import { print } from "graphql"; import { GetStaticProps } from "next"; import Page from "../components/Page"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; import { DonateQuery } from "./donate.gql"; export default function Donate() { const { cms: { mission }, - } = useQuery(); + } = usePageData(); return ( diff --git a/apps/www/src/pages/eco.tsx b/apps/www/src/pages/eco.tsx index d8f1351..18cae4d 100644 --- a/apps/www/src/pages/eco.tsx +++ b/apps/www/src/pages/eco.tsx @@ -7,11 +7,11 @@ import React from "react"; import ContentfulRichText from "../components/ContentfulRichText"; import Page from "../components/Page"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; import { EcoQuery } from "./eco.gql"; export default function Eco() { - const { details } = useQuery().cms; + const { details } = usePageData().cms; return ( diff --git a/apps/www/src/pages/f/[slug].tsx b/apps/www/src/pages/f/[slug].tsx index c7b4198..31b8833 100644 --- a/apps/www/src/pages/f/[slug].tsx +++ b/apps/www/src/pages/f/[slug].tsx @@ -8,12 +8,12 @@ import React from "react"; import ContentfulRichText from "../../components/ContentfulRichText"; import Page from "../../components/Page"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import Error404 from "../404"; import { FormQuery, ListFormsQuery } from "./form.gql"; export default function Home() { - const { cms } = useQuery(); + const { cms } = usePageData(); const { query } = useRouter(); if (!cms) { diff --git a/apps/www/src/pages/help/[program]/[audience].tsx b/apps/www/src/pages/help/[program]/[audience].tsx index 72f3085..6a5c4b6 100644 --- a/apps/www/src/pages/help/[program]/[audience].tsx +++ b/apps/www/src/pages/help/[program]/[audience].tsx @@ -1,6 +1,6 @@ import { Box, Grid, Image, Text, Heading } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import { apiFetch } from "@codeday/topo/utils"; import { UiX } from "@codeday/topocons"; import { print } from "graphql"; @@ -9,7 +9,7 @@ import React, { useState } from "react"; import ContentfulRichText from "../../../components/ContentfulRichText"; import Page from "../../../components/Page"; -import { useQuery } from "../../../query"; + import { HelpProgramAudienceQuery, HelpProgramAudiencePathsQuery } from "./audience.gql"; interface AudienceProps { @@ -23,7 +23,7 @@ export default function Audience({ programWebname, audience }: AudienceProps) { if (!programWebname || !audience) return <>; - const { programs, faqs, events } = useQuery().cms || {}; + const { programs, faqs, events } = usePageData().cms || {}; const program = programs?.items[0] || null; const photos = diff --git a/apps/www/src/pages/help/[program]/index.tsx b/apps/www/src/pages/help/[program]/index.tsx index c0e2492..bdb263c 100644 --- a/apps/www/src/pages/help/[program]/index.tsx +++ b/apps/www/src/pages/help/[program]/index.tsx @@ -18,7 +18,7 @@ import { GetStaticProps, GetStaticPaths } from "next"; import React from "react"; import Page from "../../../components/Page"; -import { useQuery } from "../../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { HelpProgramIndexQuery, HelpProgramIndexPathsQuery } from "./index.gql"; const icons: Record = { @@ -34,7 +34,7 @@ interface ProgramProps { } export default function Program({ programWebname }: ProgramProps) { - const { programs, faqs, events } = useQuery().cms || {}; + const { programs, faqs, events } = usePageData().cms || {}; if (!programWebname) return <>; diff --git a/apps/www/src/pages/help/index.tsx b/apps/www/src/pages/help/index.tsx index 60897c7..22a86bb 100644 --- a/apps/www/src/pages/help/index.tsx +++ b/apps/www/src/pages/help/index.tsx @@ -12,11 +12,11 @@ import { GetStaticProps } from "next"; import React from "react"; import Page from "../../components/Page"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { HelpIndexQuery } from "./index.gql"; export default function Help() { - const { programs } = useQuery().cms || {}; + const { programs } = usePageData().cms || {}; const programsWithFaqs = programs?.items?.filter((p: any) => p.linkedFrom?.faqs?.items?.length > 0) || []; diff --git a/apps/www/src/pages/legal/[policy].tsx b/apps/www/src/pages/legal/[policy].tsx index e98718c..fa3891f 100644 --- a/apps/www/src/pages/legal/[policy].tsx +++ b/apps/www/src/pages/legal/[policy].tsx @@ -5,9 +5,9 @@ import { print } from "graphql"; import { GetStaticProps, GetStaticPaths } from "next"; import React from "react"; -import Markdown from "../../components/Markdown"; +import { Markdown } from "@codeday/topo/Molecule"; import Page from "../../components/Page"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { LegalPathsQuery, LegalContentQuery, TermageddonLegalContentQuery } from "./policy.gql"; const TERMAGEDDON_POLICIES = ["tos", "privacy", "cookies", "disclaimer"]; @@ -17,7 +17,7 @@ interface PolicyProps { } export default function Policy({ slug }: PolicyProps) { - const { termageddon, notion } = useQuery(); + const { termageddon, notion } = usePageData(); const page = TERMAGEDDON_POLICIES.includes(slug) ? { content: termageddon.terms[slug], diff --git a/apps/www/src/pages/m/[...slug].tsx b/apps/www/src/pages/m/[...slug].tsx index 4aded6f..187bdfb 100644 --- a/apps/www/src/pages/m/[...slug].tsx +++ b/apps/www/src/pages/m/[...slug].tsx @@ -3,7 +3,7 @@ import { Content } from "@codeday/topo/Molecule"; import { GetStaticProps, GetStaticPaths } from "next"; import React from "react"; -import Calendly from "../../components/Calendly"; +import { CalendlyEmbed as Calendly } from "@codeday/topo/Molecule"; import Page from "../../components/Page"; interface CalendlyPageProps { diff --git a/apps/www/src/pages/press.tsx b/apps/www/src/pages/press.tsx index 169609f..c82beb8 100644 --- a/apps/www/src/pages/press.tsx +++ b/apps/www/src/pages/press.tsx @@ -10,7 +10,7 @@ import ContentfulRichText from "../components/ContentfulRichText"; import Page from "../components/Page"; import PhotoGallery from "../components/Press/PhotoGallery"; import PreviousCoverageLogos from "../components/PreviousCoverageLogos"; -import { useQuery } from "../query"; +import { usePageData } from "@codeday/topo/Theme"; import { PressQuery } from "./press.gql"; interface PressProps { @@ -20,7 +20,7 @@ interface PressProps { export default function Press({ seed }: PressProps) { const { cms: { mission, pressContact, pressDetails, programs, previousCoverage }, - } = useQuery(); + } = usePageData(); return ( diff --git a/apps/www/src/pages/volunteer/index.tsx b/apps/www/src/pages/volunteer/index.tsx index c381d58..fd8e16c 100644 --- a/apps/www/src/pages/volunteer/index.tsx +++ b/apps/www/src/pages/volunteer/index.tsx @@ -1,6 +1,6 @@ import { Box, Grid, Text, Heading, Link, Button, Divider } from "@codeday/topo/Atom"; import { Content } from "@codeday/topo/Molecule"; -import { useColorMode } from "@codeday/topo/Theme"; +import { useColorMode, usePageData } from "@codeday/topo/Theme"; import { apiFetch } from "@codeday/topo/utils"; import { print } from "graphql"; import { DateTime } from "luxon"; @@ -9,14 +9,14 @@ import { NextSeo } from "next-seo"; import { useRouter } from "next/router"; import React, { useState, useRef } from "react"; -import Highlight from "../../components/Highlight"; +import { Highlight } from "@codeday/topo/Atom"; import Page from "../../components/Page"; import PhotoGallery from "../../components/Volunteer/PhotoGallery"; import PreviewVideo from "../../components/Volunteer/PreviewVideo"; import RemindMe from "../../components/Volunteer/RemindMe"; import Testimonials from "../../components/Volunteer/Testimonials"; import Wizard from "../../components/Volunteer/Wizard"; -import { useQuery } from "../../query"; + import { VolunteerQuery } from "./volunteer.gql"; interface VolunteerProps { @@ -37,7 +37,7 @@ export default function Volunteer({ const formRef = useRef(null); const { colorMode } = useColorMode(); const { asPath, query } = useRouter(); - const { clear } = useQuery(); + const { clear } = usePageData(); const [wizardVisible, setWizardVisible] = useState(false); const secondText = ( diff --git a/apps/www/src/pages/volunteer/share.tsx b/apps/www/src/pages/volunteer/share.tsx index f24aa40..2d84e27 100644 --- a/apps/www/src/pages/volunteer/share.tsx +++ b/apps/www/src/pages/volunteer/share.tsx @@ -8,7 +8,7 @@ import React from "react"; import Page from "../../components/Page"; import VideoTestimonialThumbnail from "../../components/VideoTestimonialThumbnail"; import ProgramInfo from "../../components/Volunteer/ProgramInfo"; -import { useQuery } from "../../query"; +import { usePageData } from "@codeday/topo/Theme"; import { upcomingEvents } from "../../utils/time"; import { VolunteerQuery } from "./volunteer.gql"; @@ -17,7 +17,7 @@ const PROGRAM_WEIGHT = ["primary", "secondary", "minor"]; export default function Volunteer() { const { cms: { volunteerPrograms, testimonials }, - } = useQuery(); + } = usePageData(); const programsWithUpcoming = volunteerPrograms?.items ?.map((program: any) => { diff --git a/apps/www/src/providers/Fundraise.tsx b/apps/www/src/providers/Fundraise.tsx index 4463b3b..c61bd8a 100644 --- a/apps/www/src/providers/Fundraise.tsx +++ b/apps/www/src/providers/Fundraise.tsx @@ -4,6 +4,7 @@ import Head from "next/head"; import Script from "next/script"; import { createContext, useContext, useEffect, useState, ReactNode } from "react"; const DEBUG = debug(["www", "providers", "Fundraise"]); +const FUNDRAISE_UP_ID = process.env.NEXT_PUBLIC_FUNDRAISE_UP_ID || "AHCSATYN"; interface FundraiseContextType { isFundraiseLoaded: boolean; @@ -47,12 +48,12 @@ export function FundraiseProvider({ children }: { children: ReactNode }) { - +