enhance(noscript): turn <noscript> into css classes

owid · Aug 6, 2024 · ff16f47 · ff16f47
1 parent 4f0a8e8
commit ff16f47
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/site/GrapherPage.tsx b/site/GrapherPage.tsx
@@ -87,11 +87,6 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
                 <meta property="og:image:width" content={imageWidth} />
                 <meta property="og:image:height" content={imageHeight} />
                 <IFrameDetector />
-                <noscript>
-                    <style>{`
-                    figure { display: none !important; }
-                `}</style>
-                </noscript>
                 <link rel="preconnect" href={dataApiOrigin} />
                 {flatten(
                     variableIds.map((variableId) =>
@@ -120,18 +115,21 @@ window.Grapher.renderSingleGrapherOnGrapherPage(jsonConfig)`
             <body className={GRAPHER_PAGE_BODY_CLASS}>
                 <SiteHeader baseUrl={baseUrl} />
                 <main>
-                    <figure data-grapher-src={`/grapher/${grapher.slug}`}>
+                    <figure
+                        className="js--hide-if-js-disabled"
+                        data-grapher-src={`/grapher/${grapher.slug}`}
+                    >
                         <LoadingIndicator />
                     </figure>
-                    <noscript id="fallback">
+                    <div className="js--hide-if-js-enabled" id="fallback">
                         {grapher.slug && (
                             <GrapherImage
                                 slug={grapher.slug}
                                 alt={grapher.title}
                             />
                         )}
                         <p>Interactive visualization requires JavaScript</p>
-                    </noscript>
+                    </div>
 
                     {((relatedArticles && relatedArticles.length !== 0) ||
                         (relatedCharts && relatedCharts.length !== 0)) && (

diff --git a/site/blocks/RelatedCharts.tsx b/site/blocks/RelatedCharts.tsx
@@ -53,14 +53,14 @@ export const RelatedCharts = ({
             key={activeChartSlug}
             data-grapher-src={grapherUrl}
         >
-            <noscript>
+            <div className="js--hide-if-js-enabled">
                 <a href={grapherUrl}>
                     <GrapherImage
                         slug={activeChartSlug}
                         alt={activeChart?.title}
                     />
                 </a>
-            </noscript>
+            </div>
         </figure>
     )
 

diff --git a/site/css/noscript.scss b/site/css/noscript.scss
@@ -0,0 +1,11 @@
+.js--hide-if-js-disabled {
+    @at-root html.js-disabled & {
+        display: none;
+    }
+}
+
+.js--hide-if-js-enabled {
+    @at-root html.js-enabled & {
+        display: none;
+    }
+}
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
@@ -114,11 +114,11 @@ export default function Chart({
                 }}
             >
                 {isExplorer ? (
-                    <noscript>
+                    <div className="js--hide-if-js-enabled">
                         <p className="align-center">
                             Interactive visualization requires JavaScript.
                         </p>
-                    </noscript>
+                    </div>
                 ) : (
                     resolvedSlug && (
                         <a href={resolvedUrl} target="_blank" rel="noopener">

diff --git a/site/owid.scss b/site/owid.scss
@@ -36,6 +36,7 @@
 @import "css/grid.scss";
 @import "css/layout.scss";
 @import "css/general.scss";
+@import "css/noscript.scss";
 @import "./collections/CollectionsPage.scss";
 @import "./SiteSearchNavigation.scss";
 @import "./site/search/Autocomplete.scss";