style[dangerouslySetInnerHTML]

pmndrs · Aug 5, 2024 · 98463d3 · 98463d3
1 parent ead1d50
commit 98463d3
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 45 deletions.
diff --git a/apps/website/app/demos/[demoname]/page.tsx b/apps/website/app/demos/[demoname]/page.tsx
@@ -52,11 +52,13 @@ export default function Page(props: Props) {
 
   return (
     <>
-      <style>{`
-        @scope {
-          iframe {width:100%; min-height:100dvh;}
-        }
-      `}</style>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            iframe {width:100%; min-height:100dvh;}
+          `,
+        }}
+      />
       <iframe src={embed_url} />;
     </>
   );

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -18,12 +18,16 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <style>{`
-        @scope {
-          :scope {background:#eee;}
-          main {position:fixed; width:100%; height:100dvh;}
-        }
-      `}</style>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+              @scope {
+                :scope {background:#eee;}
+                main {position:fixed; width:100%; height:100dvh;}
+              }
+            `,
+          }}
+        />
 
         <main>{children}</main>
         <Nav />

diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,11 +1,15 @@
 export default function Page() {
   return (
     <div>
-      <style>{`
-        @scope {
-          :scope {display:flex; align-items:center; justify-content:center; width:100%; min-height:100dvh;}
-        }
-      `}</style>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @scope {
+              :scope {display:flex; align-items:center; justify-content:center; width:100%; min-height:100dvh;}
+            }
+          `,
+        }}
+      />
       Select a demo
     </div>
   );

diff --git a/apps/website/components/Nav.tsx b/apps/website/components/Nav.tsx
@@ -12,42 +12,46 @@ export default function Nav({
 }: ComponentProps<"nav"> & { current?: string }) {
   return (
     <>
-      <style>{`
-        @scope {
-          nav {
-            width:100%; overflow:auto; scroll-snap-type: x mandatory;
-            position:fixed;
-            bottom:0;
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @scope {
+              nav {
+                width:100%; overflow:auto; scroll-snap-type: x mandatory;
+                position:fixed;
+                bottom:0;
 
-            @media (min-aspect-ratio:1/1) {
-              display:inline-block;
-              position:static;
+                @media (min-aspect-ratio:1/1) {
+                  display:inline-block;
+                  position:static;
 
-              ul {display:inline-flex; flex-direction:column;}
-            }
-          }
+                  ul {display:inline-flex; flex-direction:column;}
+                }
+              }
 
-          ul {
-            padding-inline-start:unset;
-            list-style:none;
+              ul {
+                padding-inline-start:unset;
+                list-style:none;
 
-            padding:2rem;
-            display:flex; gap:1rem; position:relative;
-            >* {flex:none;}
-          }
+                padding:2rem;
+                display:flex; gap:1rem; position:relative;
+                >li {flex:none;}
+              }
 
-          li {
-            padding-inline-start:unset;
-            scroll-snap-align: center;
-          }
+              li {
+                padding-inline-start:unset;
+                scroll-snap-align: center;
+              }
 
-          a {display:block; background:white;}
+              a {display:block; background:white;}
 
-          a img {
-            object-fit:cover; aspect-ratio:16/9; width:auto; height:7rem;
-          }
-        }
-      `}</style>
+              a img {
+                object-fit:cover; aspect-ratio:16/9; width:auto; height:7rem;
+              }
+            }
+          `,
+        }}
+      />
       <nav {...props}>
         <ul>
           {demos.map(({ name, thumb }, i) => {