Merge pull request #1150 from mathuo/feat/docs-newsletter

feat(docs): add newsletter page and sticky signup widget

Author: mathuo

packages/docs/docusaurus.config.js

@@ -241,6 +241,11 @@ const config = {
                     src: 'img/dockview_logo.svg',
                 },
                 items: [
+                    {
+                        to: '/newsletter',
+                        label: 'Newsletter',
+                        position: 'right',
+                    },
                     {
                         type: 'doc',
                         docId: 'overview/introduction',

packages/docs/src/components/NewsletterWidget.module.css

@@ -0,0 +1,62 @@
+/* ── Wrapper ─────────────────────────────────────────────────────────────────── */
+
+.wrapper {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 9998;
+    display: flex;
+    align-items: stretch;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    border-radius: 999px;
+}
+
+/* ── Sticky trigger ─────────────────────────────────────────────────────────── */
+
+.trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: var(--ifm-color-primary);
+    color: #fff;
+    border: none;
+    border-radius: 999px 0 0 999px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: filter 0.15s;
+    text-decoration: none;
+}
+
+.trigger:hover {
+    filter: brightness(1.1);
+    color: #fff;
+    text-decoration: none;
+}
+
+.trigger:active {
+    transform: translateY(0);
+}
+
+/* ── Dismiss button ──────────────────────────────────────────────────────────── */
+
+.dismiss {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    padding: 0;
+    background: color-mix(in srgb, var(--ifm-color-primary) 80%, black);
+    color: #fff;
+    border: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 0 999px 999px 0;
+    cursor: pointer;
+    transition: filter 0.15s;
+}
+
+.dismiss:hover {
+    filter: brightness(1.15);
+}
+

packages/docs/src/components/NewsletterWidget.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './NewsletterWidget.module.css';
+
+const MailIcon = () => (
+    <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <rect x="2" y="4" width="20" height="16" rx="2" />
+        <polyline points="2,4 12,13 22,4" />
+    </svg>
+);
+
+const CloseIcon = () => (
+    <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+);
+
+export default function NewsletterWidget() {
+    const [hidden, setHidden] = React.useState(false);
+
+    if (hidden) return null;
+
+    return (
+        <div className={styles.wrapper}>
+            <Link to="/newsletter" className={styles.trigger} aria-label="Newsletter signup">
+                <MailIcon />
+                <span>Newsletter</span>
+            </Link>
+            <button
+                className={styles.dismiss}
+                onClick={() => setHidden(true)}
+                aria-label="Dismiss newsletter"
+            >
+                <CloseIcon />
+            </button>
+        </div>
+    );
+}

packages/docs/src/pages/index.scss

@@ -215,6 +215,7 @@
     color: var(--ifm-color-content-secondary);
 }
 
+
 @media (prefers-reduced-motion: reduce) {
     .hero-framework {
         animation: none;

packages/docs/src/pages/newsletter.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+function NewsletterEmbed() {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        const script = document.createElement('script');
+        script.src = 'https://dockview.kit.com/35a816915c/index.js';
+        script.async = true;
+        script.setAttribute('data-uid', '35a816915c');
+        containerRef.current?.appendChild(script);
+        return () => {
+            containerRef.current?.removeChild(script);
+        };
+    }, []);
+
+    return <div ref={containerRef} />;
+}
+
+export default function Newsletter(): JSX.Element {
+    return (
+        <Layout
+            title="Newsletter"
+            description="Subscribe to the Dockview newsletter for updates, releases, and tips."
+        >
+            <main>
+                <div
+                    style={{
+                        maxWidth: 600,
+                        margin: '80px auto',
+                        padding: '0 24px',
+                        minHeight: '60vh',
+                    }}
+                >
+                    <h1>Newsletter</h1>
+                    <p style={{ color: 'var(--ifm-color-content-secondary)' }}>
+                        Sign up for updates related to the Dockview project.
+                    </p>
+                    <NewsletterEmbed />
+                    <p style={{ fontSize: '0.8rem', color: 'var(--ifm-color-content-secondary)', marginTop: '1rem' }}>
+                        We do not share or sell your email address.
+                    </p>
+                </div>
+            </main>
+        </Layout>
+    );
+}

packages/docs/src/theme/Root.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { RecoilRoot } from 'recoil';
+import NewsletterWidget from '../components/NewsletterWidget';
 
 // Default implementation, that you can customize
 export default function Root({ children }) {
     return (
         <React.StrictMode>
-            <RecoilRoot>{children}</RecoilRoot>
+            <RecoilRoot>
+                {children}
+                <NewsletterWidget />
+            </RecoilRoot>
         </React.StrictMode>
     );
 }