apply ctc component to all guides content

ProjectEvergreen · Jan 14, 2025 · 9354b3c · 9354b3c
1 parent 64691ca
commit 9354b3c
Show file tree

Hide file tree

Showing 16 changed files with 1,825 additions and 1,127 deletions.
diff --git a/src/pages/guides/ecosystem/htmx.md b/src/pages/guides/ecosystem/htmx.md
@@ -16,9 +16,24 @@ tocHeading: 2
 
 As with most libraries, just install **htmx.org** as a dependency using your favorite package manager:
 
-```shell
-npm i htmx.org
-```
+<!-- prettier-ignore-start -->
+<app-ctc-block variant="runners">
+
+  ```shell
+  npm i htmx.org
+  ```
+
+  ```shell
+  yarn add htmx.org
+  ```
+
+  ```shell
+  pnpm add htmx.org
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
 
 ## Example
 
@@ -28,43 +43,57 @@ As a basic example, let's create a `<form>` in the client side that can send a r
 
 First we'll create our frontend including htmx in a `<script>` tag and adding a `<form>` to the page:
 
-```html
-<!-- src/pages/index.html -->
-<html>
-  <head>
-    <script src="/node_modules/htmx.org/dist/htmx.js"></script>
-  </head>
-
-  <body>
-    <form hx-post="/api/greeting" hx-target="#greeting-output">
-      <label>
-        <input type="text" name="name" placeholder="your name..." required />
-      </label>
-      <button type="submit">Click me for a greeting!</button>
-    </form>
-
-    <h2 id="greeting-output"></h2>
-  </body>
-</html>
-```
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="src/pages/index.html">
+
+  ```html
+  <html>
+    <head>
+      <script src="/node_modules/htmx.org/dist/htmx.js"></script>
+    </head>
+
+    <body>
+      <form hx-post="/api/greeting" hx-target="#greeting-output">
+        <label>
+          <input type="text" name="name" placeholder="your name..." required />
+        </label>
+        <button type="submit">Click me for a greeting!</button>
+      </form>
+
+      <h2 id="greeting-output"></h2>
+    </body>
+  </html>
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
 
 ### Backend
 
 Now let's add our API endpoint:
 
-```js
-// src/pages/api/greeting.js
-export async function handler(request) {
-  const formData = await request.formData();
-  const name = formData.has("name") ? formData.get("name") : "Greenwood";
-  const body = `Hello ${name}! 👋`;
-
-  return new Response(body, {
-    headers: new Headers({
-      "Content-Type": "text/html",
-    }),
-  });
-}
-```
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="src/pages/api/greeting.js">
+
+  ```js
+  export async function handler(request) {
+    const formData = await request.formData();
+    const name = formData.has("name") ? formData.get("name") : "Greenwood";
+    const body = `Hello ${name}! 👋`;
+
+    return new Response(body, {
+      headers: new Headers({
+        "Content-Type": "text/html",
+      }),
+    });
+  }
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
 
 Now when the form is submitted, htmx will make a request to our backend API and output the returned HTML to the page. 🎯
diff --git a/src/pages/guides/ecosystem/index.md b/src/pages/guides/ecosystem/index.md
@@ -9,46 +9,92 @@ layout: guides
 
 In most cases an `npm install` should be all you need to use any third party library and then include it in a `<script>` or `<link>` tag or through an ES module. For example, to use jQuery, simply install it from **npm**
 
-```shell
-npm i jquery
-```
-
-```html
-<html>
-  <head>
-    <script src="/node_modules/jquery/dist/jquery.js"></script>
-    <script>
-      $(document).ready(() => {
-        alert("jquery is here!");
-      });
-    </script>
-  </head>
-</html>
-```
+<!-- prettier-ignore-start -->
+<app-ctc-block variant="runners">
+
+  ```shell
+  npm i jquery
+  ```
+
+  ```shell
+  yarn add jquery
+  ```
+
+  ```shell
+  pnpm add jquery
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="src/pages/index.html">
+
+  ```html
+  <html>
+    <head>
+      <script src="/node_modules/jquery/dist/jquery.js"></script>
+      <script>
+        $(document).ready(() => {
+          alert("jquery is here!");
+        });
+      </script>
+    </head>
+  </html>
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
 
 Or to use something CSS based like [**Open Props**](https://open-props.style), simply install it from **npm** and reference the CSS file through a `<link>` tag. Easy!
 
-```shell
-npm i open-props
-```
-
-```html
-<html>
-  <head>
-    <link ref="stylesheet" href="/node_modules/open-props/src/props.fonts.css" />
-    <link ref="stylesheet" href="/node_modules/open-props/src/props.shadows.css" />
-    <link ref="stylesheet" href="/node_modules/open-props/src/props.sizes.css" />
-
-    <style>
-      h1 {
-        box-shadow: var(--shadow-3);
-        padding: var(--size-2);
-        font-size: var(--font-size-2);
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Welcome to my website!</h1>
-  </body>
-</html>
-```
+<!-- prettier-ignore-start -->
+<app-ctc-block variant="runners">
+
+  ```shell
+  npm i open-props
+  ```
+
+  ```shell
+  yarn add open-props
+  ```
+
+  ```shell
+  pnpm add open-props
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+
+<app-ctc-block variant="snippet" heading="src/pages/index.html">
+
+  ```html
+  <html>
+    <head>
+      <link ref="stylesheet" href="/node_modules/open-props/src/props.fonts.css" />
+      <link ref="stylesheet" href="/node_modules/open-props/src/props.shadows.css" />
+      <link ref="stylesheet" href="/node_modules/open-props/src/props.sizes.css" />
+
+      <style>
+        h1 {
+          box-shadow: var(--shadow-3);
+          padding: var(--size-2);
+          font-size: var(--font-size-2);
+        }
+      </style>
+    </head>
+    <body>
+      <h1>Welcome to my website!</h1>
+    </body>
+  </html>
+  ```
+
+</app-ctc-block>
+
+<!-- prettier-ignore-end -->