diff --git a/docs/browser-support.md b/docs/browser-support.md index 00b1325b046..fdd9b1a3e2d 100644 --- a/docs/browser-support.md +++ b/docs/browser-support.md @@ -29,3 +29,42 @@ We use https://cdnjs.cloudflare.com/polyfill (see `site/SiteConstants.ts`), so u We have to be careful in increasing the `vite.config.ts` field `build.target`. Dropping support for older browsers is fine, but it should be a conscious decision. + +## Detecting disabled/non-functioning JS + +We try our very best to detect when the browser JS is disabled or non-functioning in any way. +There are many such ways: + +- (1) JS is disabled at the browser level. +- (2) JS is disabled via an extension like Ghostery or NoScript. +- (3) JS is enabled, but the browser doesn't support ` */} - + ) } diff --git a/site/CountryProfilePage.tsx b/site/CountryProfilePage.tsx index ccd6b6b7877..9cf15071f07 100644 --- a/site/CountryProfilePage.tsx +++ b/site/CountryProfilePage.tsx @@ -4,6 +4,7 @@ import { SiteHeader } from "./SiteHeader.js" import { SiteFooter } from "./SiteFooter.js" import urljoin from "url-join" import { Country } from "@ourworldindata/utils" +import { Html } from "./Html.js" export interface CountryProfileIndicator { name: string @@ -35,7 +36,7 @@ export const CountryProfilePage = (props: CountryProfilePageProps) => { const script = `window.runCountryProfilePage()` return ( - + { dangerouslySetInnerHTML={{ __html: script }} /> - + ) } diff --git a/site/DataInsightsIndexPage.tsx b/site/DataInsightsIndexPage.tsx index 4f59e744b1c..bc5e3c10ad9 100644 --- a/site/DataInsightsIndexPage.tsx +++ b/site/DataInsightsIndexPage.tsx @@ -13,6 +13,7 @@ import { } from "./DataInsightsIndexPageContent.js" import { DATA_INSIGHT_ATOM_FEED_PROPS } from "./gdocs/utils.js" import { DebugProvider } from "./gdocs/DebugContext.js" +import { Html } from "./Html.js" export interface DataInsightsIndexPageProps { dataInsights: OwidGdocDataInsightInterface[] @@ -25,7 +26,7 @@ export interface DataInsightsIndexPageProps { export const DataInsightsIndexPage = (props: DataInsightsIndexPageProps) => { const { baseUrl, isPreviewing } = props return ( - + { }} /> - + ) } diff --git a/site/DataPageV2.tsx b/site/DataPageV2.tsx index 83877927fa5..2e032155f5d 100644 --- a/site/DataPageV2.tsx +++ b/site/DataPageV2.tsx @@ -33,6 +33,7 @@ import { SiteFooter } from "./SiteFooter.js" import { SiteHeader } from "./SiteHeader.js" import { IFrameDetector } from "./IframeDetector.js" import { DebugProvider } from "./gdocs/DebugContext.js" +import { Html } from "./Html.js" export const DataPageV2 = (props: { grapher: GrapherInterface | undefined @@ -109,7 +110,7 @@ export const DataPageV2 = (props: { ) return ( - + - + ) } diff --git a/site/DonatePage.tsx b/site/DonatePage.tsx index de13e9dd519..9874ad5571a 100644 --- a/site/DonatePage.tsx +++ b/site/DonatePage.tsx @@ -6,13 +6,14 @@ import { IMAGES_DIRECTORY, OwidGdocPostInterface } from "@ourworldindata/utils" import { ArticleBlocks } from "./gdocs/components/ArticleBlocks.js" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" import { faArrowDown } from "@fortawesome/free-solid-svg-icons" +import { Html } from "./Html.js" export const DonatePage = (props: { baseUrl: string faqsGdoc: OwidGdocPostInterface recaptchaKey: string }) => ( - + - + ) diff --git a/site/ExplorerPage.tsx b/site/ExplorerPage.tsx index f3c2a86fcbc..9174710be8e 100644 --- a/site/ExplorerPage.tsx +++ b/site/ExplorerPage.tsx @@ -22,6 +22,7 @@ import { IFrameDetector } from "../site/IframeDetector.js" import { SiteFooter } from "../site/SiteFooter.js" import { SiteHeader } from "../site/SiteHeader.js" import { SiteSubnavigation } from "../site/SiteSubnavigation.js" +import { Html } from "./Html.js" interface ExplorerPageSettings { program: ExplorerProgram @@ -97,7 +98,7 @@ const urlMigrationSpec = ${ window.Explorer.renderSingleExplorerOnExplorerPage(explorerProgram, grapherConfigs, partialGrapherConfigs, urlMigrationSpec);` return ( - + {subNav}
+
{wpContent && } @@ -127,6 +129,6 @@ window.Explorer.renderSingleExplorerOnExplorerPage(explorerProgram, grapherConfi dangerouslySetInnerHTML={{ __html: inlineJs }} /> - + ) } diff --git a/site/FeedbackPage.tsx b/site/FeedbackPage.tsx index 1e9d38103ac..1f0529a49a9 100644 --- a/site/FeedbackPage.tsx +++ b/site/FeedbackPage.tsx @@ -3,12 +3,13 @@ import { Head } from "./Head.js" import { SiteHeader } from "./SiteHeader.js" import { SiteFooter } from "./SiteFooter.js" import { FeedbackForm } from "../site/Feedback.js" +import { Html } from "./Html.js" export class FeedbackPage extends React.Component<{ baseUrl: string }> { render() { const { baseUrl } = this.props return ( - + { - + ) } } diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx index 2c133359f20..22e1dceb5ac 100644 --- a/site/GrapherPage.tsx +++ b/site/GrapherPage.tsx @@ -28,6 +28,7 @@ import { RelatedArticles } from "./RelatedArticles/RelatedArticles.js" import { SiteFooter } from "./SiteFooter.js" import { SiteHeader } from "./SiteHeader.js" import GrapherImage from "./GrapherImage.js" +import { Html } from "./Html.js" export const GrapherPage = (props: { grapher: GrapherInterface @@ -74,7 +75,7 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)` const variableIds = uniq(grapher.dimensions!.map((d) => d.variableId)) return ( - + - {variableIds.flatMap((variableId) => [ @@ -116,10 +112,13 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
-
+
-