docs: WIP home page CTA banner styling

Author: thescientist13

docs/assets/copy-button.svg

@@ -0,0 +1,23 @@
+.container {
+  margin: var(--size-4) 0;
+  padding: var(--size-4);
+  background-color: #e7e8ea;
+  border-radius: var(--radius-4);
+  color: var(--color-primary);
+  font-size: var(--font-size-1);
+}
+
+.snippetContainer {
+  width: 100%;
+}
+
+.snippet {
+  color: var(--color-primary);
+  border-radius: var(--radius-4);
+  border: var(--radius-1) solid #c1d3cd;
+  box-shadow: var(--shadow-2);
+  margin: var(--size-px-2) 0;
+  text-align: center;
+  padding: var(--size-1);
+  display: block;
+}

docs/components/banner-cta/banner-cta.module.css

@@ -0,0 +1,30 @@
+import '../ctc-button/ctc-button.tsx';
+import styles from './banner-cta.module.css';
+
+export default class BannerCta extends HTMLElement {
+  static code = 'npm i -D wc-compiler';
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    return (
+      <div class={styles.container}>
+        <p>
+          WCC is a NodeJS package for easier server-rendering (SSR) of native Web Components. It can
+          render your Web Components to static HTML supporting either Light DOM or Declarative
+          Shadow DOM.
+        </p>
+        <div class={styles.snippetContainer}>
+          <div class={styles.snippet}>
+            <pre>&dollar; {BannerCta.code}</pre>
+            <wcc-ctc-button content={BannerCta.code}></wcc-ctc-button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+customElements.define('wcc-banner-cta', BannerCta);

docs/components/banner-cta/banner-cta.tsx

@@ -0,0 +1,7 @@
+#icon {
+  padding: var(--size-2);
+  border: none;
+  cursor: copy;
+  border-radius: var(--radius-3);
+  background-color: var(--color-green-pale);
+}

docs/components/banner/banner.tsx

@@ -0,0 +1,39 @@
+import copy from '../../assets/copy-button.svg?type=raw';
+import sheet from './ctc-button.css' with { type: 'css' };
+
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <button id="icon" title="Copy to clipboard">${copy}</button>
+`;
+
+export default class CopyToClipboardButton extends HTMLElement {
+  connectedCallback() {
+    // bail of out of SSR entirely
+    if (!this.shadowRoot && typeof window !== 'undefined') {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+
+      this.shadowRoot.getElementById('icon')?.addEventListener('click', () => {
+        const contents = this.getAttribute('content') ?? undefined;
+
+        navigator.clipboard.writeText(contents);
+        console.log('copying the following contents to your clipboard =>', contents);
+      });
+    }
+  }
+}
+
+customElements.define('wcc-ctc-button', CopyToClipboardButton);
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'wcc-ctc-button': {
+        content: string;
+      };
+    }
+  }
+}

docs/components/ctc-button/ctc-button.css

@@ -7,3 +7,9 @@ declare module '*?type=raw' {
   const content: string;
   export default content;
 }
+
+declare module '*.css' {
+  const sheet: CSSStyleSheet;
+
+  export default sheet;
+}

docs/components/ctc-button/ctc-button.tsx

@@ -3,12 +3,12 @@ collection: nav
 order: 1
 imports:
   - ../components/banner-splash/banner-splash.tsx type="module" data-gwd-opt="static"
-  - ../components/banner/banner.tsx type="module" data-gwd-opt="static"
+  - ../components/banner-cta/banner-cta.tsx type="module" data-gwd-opt="static"
 ---
 
 <wcc-banner-splash></wcc-banner-splash>
 
-<wcc-banner></wcc-banner>
+<wcc-banner-cta></wcc-banner-cta>
 
 ## How It Works