From 249ba027658fca8c1059fb646c4f115b22272d33 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 6 Aug 2024 14:49:27 +0100 Subject: [PATCH 01/11] enhance(noscript): consistently apply css classes if JS disabled --- site/Head.tsx | 32 ++++++++++++++++++++++++++++++++ site/owid.entry.ts | 2 +- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/site/Head.tsx b/site/Head.tsx index 5de698edf0d..ac6f8ae2fcb 100644 --- a/site/Head.tsx +++ b/site/Head.tsx @@ -99,6 +99,38 @@ export const Head = (props: { {stylesheets} {props.children} + + {/* */} - + ) } 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..1d9f67a1672 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 ( - + - + ) } 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..c5152c430d4 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 ( - + - + ) } diff --git a/site/Html.tsx b/site/Html.tsx new file mode 100644 index 00000000000..b1bc6d82d54 --- /dev/null +++ b/site/Html.tsx @@ -0,0 +1,11 @@ +import cx from "classnames" +import React, { HtmlHTMLAttributes } from "react" + +/** + * Renders a element with the class "js-disabled" to indicate that JavaScript is disabled. + * This is then removed *synchronously* by the client-side JavaScript, once we detect that JavaScript is enabled. + * See the - + ) } From 4f0066596aacbcd60b056ec50ad95f6affe8bf44 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 6 Aug 2024 15:05:07 +0100 Subject: [PATCH 03/11] enhance(noscript): turn `