Improve the Code block demo page

Equal-height cards, more realistic snippets, and new cards for header
variants, markup and long lines.

preview/pages/code-block.astro

@@ -7,20 +7,37 @@ import CardSubtitle from '@ui/CardSubtitle.astro'
 import DocsLink from '@ui/DocsLink.astro'
 import CodeBlock from '@ui/CodeBlock.astro'
 
-const js = `import { Clipboard } from '@tabler/core'
+const install = `npm install @tabler/core
+pnpm add @tabler/core
+yarn add @tabler/core`
+
+const config = `{
+  "name": "my-dashboard",
+  "dependencies": {
+    "@tabler/core": "^1.6.0"
+  }
+}`
+
+const script = `import { Clipboard } from '@tabler/core'
 
 const button = document.querySelector('#share')
+
 const clipboard = Clipboard.getOrCreateInstance(button, {
   text: window.location.href,
 })
 
 button.addEventListener('copied.bs.clipboard', () => {
-  console.log('copied')
+  console.log('Link copied')
 })
 
 clipboard.copy()`
 
-const shell = 'npm install @tabler/core'
+const markup = `<button type="button" class="btn" data-bs-toggle="clipboard" data-bs-text="https://tabler.io/">
+  <span class="clipboard-label">Copy link</span>
+  <span class="clipboard-feedback">Link copied</span>
+</button>`
+
+const command = 'curl -X POST https://api.example.com/v1/projects/42/deployments -H "Authorization: Bearer $TOKEN" -H "Content-Type: application/json" -d \'{"branch": "main", "environment": "production"}\''
 ---
 
 <DefaultLayout title="Code block" pageMenu="base.code-block" description="The code block shows a snippet on a dark surface with a header and a copy button.">
@@ -28,41 +45,75 @@ const shell = 'npm install @tabler/core'
 
   <div class="row row-cards">
     <div class="col-lg-6">
-      <Card>
+      <Card class="h-100">
         <CardBody>
           <CardTitle>Basic</CardTitle>
-          <CardSubtitle>A <code>.code-block</code> with the copy button in the corner.</CardSubtitle>
-          <CodeBlock code={shell} class="mb-0" />
+          <CardSubtitle>A <code>.code-block</code> around a <code>pre</code>. The copy button sits in the top right corner.</CardSubtitle>
+          <CodeBlock code={install} class="mb-0" />
         </CardBody>
       </Card>
     </div>
 
     <div class="col-lg-6">
-      <Card>
+      <Card class="h-100">
         <CardBody>
           <CardTitle>With header</CardTitle>
-          <CardSubtitle>A title or a file name and a language label.</CardSubtitle>
-          <CodeBlock code={js} title="share.js" language="JavaScript" class="mb-0" />
+          <CardSubtitle>A title or a file name and a language label. The copy button moves into the header.</CardSubtitle>
+          <CodeBlock code={config} title="package.json" language="JSON" class="mb-0" />
         </CardBody>
       </Card>
     </div>
 
     <div class="col-lg-6">
-      <Card>
+      <Card class="h-100">
         <CardBody>
           <CardTitle>Line numbers and highlighted lines</CardTitle>
-          <CardSubtitle>Add <code>.code-block-numbered</code> and mark lines with <code>.code-line-highlight</code>.</CardSubtitle>
-          <CodeBlock code={js} title="share.js" numbered highlight={[4, 5, 6]} class="mb-0" />
+          <CardSubtitle>Add <code>.code-block-numbered</code> and mark the lines to point out with <code>.code-line-highlight</code>.</CardSubtitle>
+          <CodeBlock code={script} title="share.js" language="JavaScript" numbered highlight={[5, 6, 7]} class="mb-0" />
         </CardBody>
       </Card>
     </div>
 
     <div class="col-lg-6">
-      <Card>
+      <Card class="h-100">
         <CardBody>
           <CardTitle>Max height</CardTitle>
-          <CardSubtitle>Add <code>.code-block-scroll</code> to scroll long code vertically.</CardSubtitle>
-          <CodeBlock code={js} title="share.js" numbered scroll style="--tblr-code-block-max-height: 8rem" class="mb-0" />
+          <CardSubtitle>Add <code>.code-block-scroll</code> to scroll long code vertically. Change the height with <code>--tblr-code-block-max-height</code>.</CardSubtitle>
+          <CodeBlock code={script} title="share.js" language="JavaScript" numbered scroll style="--tblr-code-block-max-height: 14rem" class="mb-0" />
+        </CardBody>
+      </Card>
+    </div>
+
+    <div class="col-lg-6">
+      <Card class="h-100">
+        <CardBody>
+          <CardTitle>Header variants</CardTitle>
+          <CardSubtitle>The header can hold only a title, only a language, or both.</CardSubtitle>
+          <div class="d-grid gap-3">
+            <CodeBlock code="npm run build" title="Terminal" class="mb-0" />
+            <CodeBlock code="display: grid;" language="CSS" class="mb-0" />
+            <CodeBlock code="git push origin main" title="Deploy" language="Shell" class="mb-0" />
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+
+    <div class="col-lg-6">
+      <Card class="h-100">
+        <CardBody>
+          <CardTitle>Markup</CardTitle>
+          <CardSubtitle>Any text works, also HTML. The copy button copies the code as written.</CardSubtitle>
+          <CodeBlock code={markup} title="clipboard.html" language="HTML" class="mb-0" />
+        </CardBody>
+      </Card>
+    </div>
+
+    <div class="col-12">
+      <Card>
+        <CardBody>
+          <CardTitle>Long lines</CardTitle>
+          <CardSubtitle>Lines that do not fit scroll horizontally with the themed scrollbar. The page does not scroll.</CardSubtitle>
+          <CodeBlock code={command} title="Create a deployment" language="Shell" class="mb-0" />
         </CardBody>
       </Card>
     </div>
@@ -72,7 +123,7 @@ const shell = 'npm install @tabler/core'
         <CardBody>
           <CardTitle>Without copy button</CardTitle>
           <CardSubtitle>Set <code>copy={'{false}'}</code> on the component, or leave the button out of the markup.</CardSubtitle>
-          <CodeBlock code={shell} copy={false} class="mb-0" />
+          <CodeBlock code="npm install @tabler/core" copy={false} class="mb-0" />
         </CardBody>
       </Card>
     </div>