Style

pmndrs · Aug 6, 2024 · a17e30a · a17e30a
1 parent 0ff15d0
commit a17e30a
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 79 deletions.
diff --git a/apps/website/app/demos/[demoname]/Dev.tsx b/apps/website/app/demos/[demoname]/Dev.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Style } from "@/components/Style";
 import { useRouter } from "next/navigation";
 
 export function Dev({ demoname }: { demoname: string }) {
@@ -9,25 +10,35 @@ export function Dev({ demoname }: { demoname: string }) {
 
   return (
     <div className="Dev">
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            @scope {
-              pre {background:rgb(13,13,13); padding:1rem; border-radius:.35rem;}
-              code {
-                color:white;
-                text-overflow:ellipsis; overflow:hidden; display:block;
-              }
-              code:before {content:"$ ";}
+      <Style
+        css={`
+          @scope {
+            pre {
+              background: rgb(13, 13, 13);
+              padding: 1rem;
+              border-radius: 0.35rem;
+            }
+            code {
+              color: white;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              display: block;
+            }
+            code:before {
+              content: "$ ";
+            }
 
-              pre {
-                position:relative;
-                a {position:absolute; bottom:100%; right:0; cursor:pointer;}
+            pre {
+              position: relative;
+              a {
+                position: absolute;
+                bottom: 100%;
+                right: 0;
+                cursor: pointer;
               }
-
             }
-          `,
-        }}
+          }
+        `}
       />
 
       <p>Start this demo with :</p>

diff --git a/apps/website/app/demos/[demoname]/layout.tsx b/apps/website/app/demos/[demoname]/layout.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "react";
 
 import Page from "./page";
+import { Style } from "@/components/Style";
 
 export default function Layout({
   params,
@@ -13,21 +14,28 @@ export default function Layout({
 
   return (
     <div>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            @scope {
-              :scope {
-                height:100%;
-                display:flex; align-items:center; justify-content:center;
-                >.Dev {max-width:100%;}
+      <Style
+        css={`
+          @scope {
+            :scope {
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              > .Dev {
+                max-width: 100%;
               }
+            }
 
-              .Dev {padding-inline:1rem;}
-              iframe {width:100%; min-height:100dvh;}
+            .Dev {
+              padding-inline: 1rem;
+            }
+            iframe {
+              width: 100%;
+              min-height: 100dvh;
             }
-          `,
-        }}
+          }
+        `}
       />
       {children}
     </div>

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import Nav from "@/components/Nav";
 import { getDemos } from "@/lib/helper";
+import { Style } from "@/components/Style";
 
 const inter = Inter({ subsets: ["latin"] });
 const demos = getDemos();
@@ -20,29 +21,32 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-              @scope {
-                :scope {background:#eee;}
-                
-                main {
-                  position:fixed; width:100%; height:100dvh;
-                }
+        <Style
+          css={`
+            @scope {
+              :scope {
+                background: #eee;
+              }
+
+              main {
+                position: fixed;
+                width: 100%;
+                height: 100dvh;
+              }
 
-                .Nav {
-                  position:fixed; bottom:0;
-                  width:100%; overflow:auto;
+              .Nav {
+                position: fixed;
+                bottom: 0;
+                width: 100%;
+                overflow: auto;
 
-                  @media (min-aspect-ratio:1/1) {
-                    display:inline-block;
-                    position:static;
-                  }
+                @media (min-aspect-ratio: 1/1) {
+                  display: inline-block;
+                  position: static;
                 }
-                  
               }
-            `,
-          }}
+            }
+          `}
         />
 
         <main>{children}</main>

diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,14 +1,20 @@
+import { Style } from "@/components/Style";
+
 export default function Page() {
   return (
     <div>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            @scope {
-              :scope {display:flex; align-items:center; justify-content:center; width:100%; min-height:100dvh;}
+      <Style
+        css={`
+          @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
@@ -13,6 +13,7 @@ import { useParams } from "next/navigation";
 import clsx from "clsx";
 
 import { getDemos } from "@/lib/helper";
+import { Style } from "./Style";
 
 export default function Nav({
   demos,
@@ -40,41 +41,58 @@ export default function Nav({
 
   return (
     <div className="Nav">
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-            @scope {
-              nav {
-                @media (min-aspect-ratio:1/1) {
-                  ul {display:inline-flex; flex-direction:column;}
+      <Style
+        css={`
+          @scope {
+            nav {
+              @media (min-aspect-ratio: 1/1) {
+                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;
-                >li {flex:none;}
+              padding: 2rem;
+              display: flex;
+              gap: 1rem;
+              position: relative;
+              > li {
+                flex: none;
               }
+            }
 
-              li {
-                padding-inline-start:unset;
-              }
+            li {
+              padding-inline-start: unset;
+            }
 
-              a {display:block; background:white;}
+            a {
+              display: block;
+              background: white;
+            }
 
-              a.active {outline:1px solid black;}
+            a.active {
+              outline: 1px solid black;
+            }
 
-              a img {
-                object-fit:cover; aspect-ratio:16/9; width:auto; height:7rem;
-                color:inherit!important; font-size:.8rem;
-                background:none;
-              }
-              a img:after {content:"";}
+            a img {
+              object-fit: cover;
+              aspect-ratio: 16/9;
+              width: auto;
+              height: 7rem;
+              color: inherit !important;
+              font-size: 0.8rem;
+              background: none;
+            }
+            a img:after {
+              content: "";
             }
-          `,
-        }}
+          }
+        `}
       />
 
       <nav {...props}>

diff --git a/apps/website/components/Style.tsx b/apps/website/components/Style.tsx
@@ -0,0 +1,9 @@
+export function Style({ css }: { css: string }) {
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: css,
+      }}
+    />
+  );
+}