Improve examples menu (#106)

* Migrate to pnpm catalogs

* Switch from catalogs to syncpack

* Attemp to fix CI script

* Another CI fix

* Improve examples menu UI

Author: krispya

apps/website/app/demos/[demoname]/Dev.tsx

@@ -13,10 +13,26 @@ export function Dev({ demoname }: { demoname: string }) {
       <Style
         css={`
           @scope {
+            :scope {
+              width: min(100%, 46rem);
+            }
+
+            .content {
+              display: grid;
+              gap: 1rem;
+              justify-items: start;
+            }
+
+            p {
+              margin: 0;
+            }
+
             pre {
               background: rgb(13, 13, 13);
               padding: 1rem;
               border-radius: 0.35rem;
+              margin: 0;
+              width: 100%;
             }
             code {
               color: white;
@@ -41,18 +57,20 @@ export function Dev({ demoname }: { demoname: string }) {
         `}
       />
 
-      <p>Start this demo with :</p>
-      <pre
-        onClick={(e) => {
-          navigator.clipboard.writeText(cmd);
-        }}
-      >
-        <code>{cmd}</code>
-        <a>copy</a>
-      </pre>
-      <p>
-        Then <a onClick={(e) => refresh()}>refresh</a>
-      </p>
+      <div className="content">
+        <p>Start this demo with :</p>
+        <pre
+          onClick={(e) => {
+            navigator.clipboard.writeText(cmd);
+          }}
+        >
+          <code>{cmd}</code>
+          <a>copy</a>
+        </pre>
+        <p>
+          Then <a onClick={(e) => refresh()}>refresh</a>
+        </p>
+      </div>
     </div>
   );
 }

apps/website/app/demos/[demoname]/layout.tsx

@@ -18,13 +18,11 @@ export default function Layout({
         css={`
           @scope {
             :scope {
+              width: 100%;
               height: 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              > * {
-                max-width: 100%;
-              }
+              min-width: 0;
+              min-height: 0;
+              display: grid;
             }
           }
         `}

apps/website/app/demos/[demoname]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 
+import { ScaledDemoFrame } from "@/components/ScaledDemoFrame";
 import { getDemos } from "@/lib/helper";
 import { Dev } from "./Dev";
 import { Style } from "@/components/Style";
@@ -77,11 +78,17 @@ export default async function Page(props: Props) {
         css={`
           @scope {
             .Dev {
-              padding-inline: 1rem;
+              width: 100%;
+              height: 100%;
+              display: grid;
+              place-items: center;
+              padding: 1rem;
             }
-            iframe {
+            .Frame {
               width: 100%;
-              min-height: 100dvh;
+              height: 100%;
+              min-width: 0;
+              min-height: 0;
             }
             .Social {
               position: fixed;
@@ -101,7 +108,9 @@ export default async function Page(props: Props) {
         <Dev demoname={demoname} />
       ) : (
         <>
-          <iframe src={embed_url} />
+          <div className="Frame">
+            <ScaledDemoFrame src={embed_url} title={demoname} />
+          </div>
 
           <Social demoname={demoname} embed_url={embed_url} />
         </>

apps/website/app/layout.tsx

@@ -25,32 +25,54 @@ export default function RootLayout({
           css={`
             @scope {
               :scope {
+                --sidebar-w: 260px;
+                --motion-curve: linear(
+                  0.00, 0.00780, 0.0340, 0.0738, 0.116, 0.160, 0.203, 0.244,
+                  0.284, 0.322, 0.357, 0.391, 0.422, 0.453, 0.483, 0.510,
+                  0.536, 0.561, 0.583, 0.606, 0.627, 0.646, 0.665, 0.683,
+                  0.700, 0.716, 0.731, 0.745, 0.759, 0.771, 0.784, 0.795,
+                  0.806, 0.816, 0.826, 0.835, 0.844, 0.852, 0.859, 0.867,
+                  0.874, 0.881, 0.887, 0.893, 0.899, 0.904, 0.909, 0.914,
+                  0.919, 0.923, 0.927, 0.931, 0.935, 0.938, 0.941, 0.944,
+                  0.947, 0.950, 0.953, 0.955, 0.958, 0.960, 0.962, 0.964,
+                  0.966, 0.968, 0.969, 0.971, 0.973, 0.974, 0.975, 0.977,
+                  0.978, 0.979, 0.980, 0.981, 0.982, 0.983, 0.984, 0.985,
+                  0.986, 0.987, 0.987, 0.988, 0.989, 0.989, 0.990, 0.990,
+                  0.991, 0.991, 0.992, 0.992, 0.993, 0.993, 0.993, 0.994,
+                  0.994, 0.994, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996,
+                  0.996, 0.996, 0.997, 0.997, 0.997, 0.997, 0.997, 0.997,
+                  0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998,
+                  0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999,
+                  0.999, 0.999, 1.00
+                );
+
                 background: #eee;
+                display: grid;
+                grid-template-columns: var(--sidebar-w) 1fr;
+                height: 100dvh;
+                transition: grid-template-columns 1078ms var(--motion-curve);
               }
 
-              main {
-                position: fixed;
-                width: 100%;
-                height: 100dvh;
+              :scope:has(.Nav[data-collapsed]) {
+                grid-template-columns: 0px 1fr;
               }
 
-              .Nav {
-                position: fixed;
-                bottom: 0;
+              main {
                 width: 100%;
-                overflow: auto;
-
-                @media (min-aspect-ratio: 1/1) {
-                  display: inline-block;
-                  position: static;
-                }
+                height: 100dvh;
+                overflow: hidden;
+                display: grid;
+                place-items: center;
+                padding: 1.5rem;
+                min-width: 0;
+                min-height: 0;
               }
             }
           `}
         />
 
-        <main>{children}</main>
         <Nav demos={demos} />
+        <main>{children}</main>
       </body>
     </html>
   );