Add deno create command (#1663)

Co-authored-by: Ryan Carniato <[email protected]>
solidjs · Oct 31, 2024 · d6d8646 · d6d8646
1 parent 545a8ce
commit d6d8646
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/docs/components/code-snippet.tsx b/docs/components/code-snippet.tsx
@@ -17,7 +17,7 @@ const getSolidStartVersion = async () => {
 export function CodeSnippet() {
   const [npmVersion] = createResource(() => getSolidStartVersion());
   return (
-    <aside class="pt-20 px-4 sm:px-4 md:px-0 md:max-w-96 max-w-screen mx-auto w-5/6">
+    <aside class="pt-20 px-4 sm:px-4 md:px-0 md:max-w-[30rem] max-w-screen mx-auto w-5/6">
       <Tabs defaultValue="pnpm">
         <Tabs.List class="flex justify-center space-x-4 pb-10">
           <Tabs.Trigger
@@ -44,11 +44,18 @@ export function CodeSnippet() {
           >
             yarn
           </Tabs.Trigger>
+          <Tabs.Trigger
+            value="deno"
+            class="scale-75 grayscale opacity-70 focus:grayscale-0 focus:opacity-100 hover:grayscale-0 hover:opacity-100 transition-all ease-in-out duration-500 data-[selected]:scale-100 data-[selected]:grayscale-0 data-[selected]:opacity-100"
+          >
+            deno
+          </Tabs.Trigger>
         </Tabs.List>
-        <TabContent manager="pnpm" />
-        <TabContent manager="bun" />
-        <TabContent manager="npm" />
-        <TabContent manager="yarn" />
+        <TabContent manager="pnpm" command="create solid" />
+        <TabContent manager="bun" command="create solid" />
+        <TabContent manager="npm" command="create solid" />
+        <TabContent manager="yarn" command="create solid" />
+        <TabContent manager="deno" command="run -A npm:create-solid" />
       </Tabs>
       <Suspense>
         <small class="font-mono text-right pt-2 inline-block w-full dark:text-sky-400/60 text-sky-950">
@@ -59,7 +66,7 @@ export function CodeSnippet() {
   );
 }
 
-function TabContent(props: { manager: string }) {
+function TabContent(props: { manager: string, command: string }) {
   return (
     <Tabs.Content
       value={props.manager}
@@ -74,12 +81,12 @@ function TabContent(props: { manager: string }) {
         id="bottom-line"
         class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-800 dark:via-blue-400 to-blue-400/0 animate-bounce"
       ></div>
-      <pre class="text-2xl md:text-3xl font-mono py-2 px-5 flex justify-center dark:shadow-[0px_0px_35px_rgb(125,211,252,0.15)] rounded-md ring-1 ring-sky-950 select-all">
+      <pre class="text-l md:text-2xl font-mono py-2 px-5 flex justify-center dark:shadow-[0px_0px_35px_rgb(125,211,252,0.15)] rounded-md ring-1 ring-sky-950 select-all">
         <div
           aria-hidden="true"
           class="hidden dark:block absolute inset-0 bg-gradient-to-tr from-blue-300 rounded-md via-blue-300/70 to-blue-300 opacity-5 pointer-events-none"
         />
-        <span class="dark:text-cyan-200 text-cyan-600">{props.manager}</span> create solid
+        <span class="dark:text-cyan-200 text-cyan-600">{props.manager}</span> {' '+props.command}
       </pre>
     </Tabs.Content>
   );