From 93fdbcd09eab127e9ac67dc6e958f0143fe596e9 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 21 Oct 2023 20:25:18 +0200
Subject: [PATCH] feat(site): show create command

---
 site/src/components/code-block.js | 4 +++-
 site/src/pages/index.html         | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/components/code-block.js b/site/src/components/code-block.js
index 31fca27..338170a 100644
--- a/site/src/components/code-block.js
+++ b/site/src/components/code-block.js
@@ -10,7 +10,9 @@ class CodeBlockComponent extends HTMLElement {
       <div>
         <pre class="language-${lang} ${
       lineNumbers ? "line-numbers" : ""
-    }" id="pre"><code id="code">${this.trimmed}</code></pre>
+    }" id="pre" style="padding:1em;background:#efefef;margin:1em 0;border-radius:5px;font-size:large;"><code id="code">${
+      this.trimmed
+    }</code></pre>
       </div>
     `;
   }
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 6acc485..98ad84a 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -13,7 +13,7 @@
       header,
       footer,
       main {
-        max-width: 35em;
+        max-width: 40em;
         margin: 0 auto;
       }
     </style>
@@ -27,6 +27,7 @@
           no-framework framework that assists developers in leveraging the web
           platform.
         </p>
+        <code-block>npm create mcfly@latest</code-block>
         <p>
           Here's a sample interactive custom element:
           <vanilla-hello-world data-name="McFly"></vanilla-hello-world>