create-qpq-app 0.1.5

package/template/apps/qpqjs/services/design/views/src/bootstrap.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import { App } from './app';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/LandingPage.tsx

@@ -0,0 +1,20 @@
+// federated.export: This file will be exported using module federation
+
+import { Features } from './components/Features';
+import { Footer } from './components/Footer';
+import { Hero } from './components/Hero';
+import { Packages } from './components/Packages';
+import { Pipeline } from './components/Pipeline';
+import { YieldLoop } from './components/YieldLoop';
+import './landing.css';
+
+export const LandingPage = () => (
+  <main>
+    <Hero />
+    <Features />
+    <YieldLoop />
+    <Pipeline />
+    <Packages />
+    <Footer />
+  </main>
+);

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/CodeWindow.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+
+const kw = (text: string) => <span className="tok-kw">{text}</span>;
+const fn = (text: string) => <span className="tok-fn">{text}</span>;
+const str = (text: string) => <span className="tok-str">{text}</span>;
+const ty = (text: string) => <span className="tok-ty">{text}</span>;
+const cm = (text: string) => <span className="tok-cm">{text}</span>;
+const pr = (text: string) => <span className="tok-pr">{text}</span>;
+
+const LINES: ReactNode[] = [
+  <>{cm('// pure business logic — no infrastructure')}</>,
+  <>
+    {kw('export function')}* {fn('askSendWelcomeEmail')}(
+  </>,
+  <>
+    {'  '}userId: {ty('string')},
+  </>,
+  <>) {'{'}</>,
+  <>
+    {'  '}
+    {kw('const')} user = {kw('yield')}* {fn('askUserDirectoryGetUser')}(userId);
+  </>,
+  <>&nbsp;</>,
+  <>
+    {'  '}
+    {kw('yield')}* {fn('askQueueSendMessage')}({str("'email'")}, {'{'}
+  </>,
+  <>
+    {'    '}
+    {pr('to')}: user.email,
+  </>,
+  <>
+    {'    '}
+    {pr('template')}: {str("'welcome'")},
+  </>,
+  <>{'  });'}</>,
+  <>&nbsp;</>,
+  <>
+    {'  '}
+    {kw('yield')}* {fn('askEventBusPublish')}({str("'welcomed'")}, {'{'} userId {'}'});
+  </>,
+  <>&nbsp;</>,
+  <>
+    {'  '}
+    {kw('return')} user;
+  </>,
+  <>{'}'}</>,
+];
+
+export function CodeWindow() {
+  return (
+    <div className="code-window">
+      <div className="code-window__bar">
+        <span className="code-window__dot code-window__dot--red" />
+        <span className="code-window__dot code-window__dot--amber" />
+        <span className="code-window__dot code-window__dot--green" />
+        <span className="code-window__title">sendWelcomeEmail.story.ts</span>
+      </div>
+      <pre className="code-window__body">
+        <code>
+          {LINES.map((line, index) => (
+            <span className="code-line" key={index}>
+              <span className="code-line__num">{index + 1}</span>
+              <span className="code-line__text">{line}</span>
+            </span>
+          ))}
+        </code>
+      </pre>
+      <div className="code-window__foot">
+        <span className="code-window__runs">runs unchanged on</span>
+        <span className="runtime-chip">λ aws lambda</span>
+        <span className="runtime-chip">⬢ node</span>
+        <span className="runtime-chip">◍ browser</span>
+      </div>
+    </div>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/Features.tsx

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+
+interface Feature {
+  icon: ReactNode;
+  title: string;
+  body: string;
+}
+
+const iconProps = {
+  viewBox: '0 0 24 24',
+  width: 22,
+  height: 22,
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 1.7,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const;
+
+const FEATURES: Feature[] = [
+  {
+    icon: (
+      <svg {...iconProps} aria-hidden="true">
+        <path d="M12 5.5C10.4 4 8 3.5 4 3.5v15c4 0 6.4.5 8 2 1.6-1.5 4-2 8-2v-15c-4 0-6.4.5-8 2Z" />
+        <path d="M12 5.5v15" />
+      </svg>
+    ),
+    title: 'Pure stories',
+    body: 'Business logic is a generator function that yields actions. No SDK calls, no mocks to untangle — just intent, in order, readable top to bottom.',
+  },
+  {
+    icon: (
+      <svg {...iconProps} aria-hidden="true">
+        <path d="M13 2.5 4.5 13.5H11l-1 8 8.5-11H12l1-8Z" />
+      </svg>
+    ),
+    title: 'Typed actions',
+    body: 'Every side effect — files, queues, auth, websockets, AI — is a typed action with a typed result. The compiler knows exactly what your story can do.',
+  },
+  {
+    icon: (
+      <svg {...iconProps} aria-hidden="true">
+        <path d="m12 3 9 5-9 5-9-5 9-5Z" />
+        <path d="m3 13 9 5 9-5" />
+      </svg>
+    ),
+    title: 'Swappable runtimes',
+    body: 'Action processors implement the how per platform. The same story executes on Lambda, Node, or in the browser without changing a line.',
+  },
+  {
+    icon: (
+      <svg {...iconProps} aria-hidden="true">
+        <path d="M19.4 17.5A4.5 4.5 0 0 0 18 9a6 6 0 0 0-11.7 1.6A4 4 0 0 0 6.5 18" />
+        <path d="M12 20.5v-7m0 0-3 3m3-3 3 3" />
+      </svg>
+    ),
+    title: 'Config-driven deploys',
+    body: 'Describe queues, stores and routes in QPQ config. The CDK package turns it into real AWS infrastructure — no hand-written stacks.',
+  },
+];
+
+export function Features() {
+  return (
+    <section className="section" id="stories">
+      <p className="section__kicker">why qpq</p>
+      <h2 className="section__title">One story. Every runtime.</h2>
+      <p className="section__sub">
+        Separate the <em>what</em> from the <em>how</em>, and the how becomes
+        replaceable.
+      </p>
+
+      <div className="feature-grid">
+        {FEATURES.map((feature) => (
+          <article key={feature.title} className="feature-card">
+            <span className="feature-card__icon">{feature.icon}</span>
+            <h3>{feature.title}</h3>
+            <p>{feature.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/Footer.tsx

@@ -0,0 +1,45 @@
+import { useRef } from 'react';
+
+import { InstallChip } from './InstallChip';
+import { TronGrid } from './TronGrid';
+
+export function Footer() {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <footer className="footer">
+      <div className="footer__cta">
+        <TronGrid avoidRefs={[panelRef]} />
+        <div ref={panelRef} className="footer__cta-content">
+          <p className="section__kicker">get started</p>
+          <h2 className="footer__cta-title">
+            Ready to write
+            <br />
+            <span className="hero__title-glow">your first story?</span>
+          </h2>
+          <p className="footer__cta-sub">
+            Install the core, yield an action, and let the runtime handle the
+            rest.
+          </p>
+          <div className="footer__cta-actions">
+            <InstallChip />
+            <a
+              className="btn btn--ghost"
+              href="https://github.com/joe-coady/quidproquo"
+              rel="noreferrer"
+              target="_blank"
+            >
+              Star on GitHub
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="footer__base">
+        <div className="footer__base-inner">
+          <span>quidproquo · MIT license</span>
+          <span>built as a qpq story, naturally</span>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/Hero.tsx

@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+
+import { CodeWindow } from './CodeWindow';
+import { InstallChip } from './InstallChip';
+import { NavBar } from './NavBar';
+import { TronGrid } from './TronGrid';
+
+export function Hero() {
+  const copyRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <section className="hero" id="top">
+      <TronGrid avoidRefs={[copyRef, panelRef]} />
+      <NavBar />
+
+      <div className="hero__inner">
+        <div ref={copyRef} className="hero__copy">
+          <span className="hero__badge">
+            <span className="hero__badge-pulse" />
+            functional · action-based · typescript
+          </span>
+
+          <h1 className="hero__title">
+            Write pure stories.
+            <br />
+            <span className="hero__title-glow">Run them anywhere.</span>
+          </h1>
+
+          <p className="hero__sub">
+            quidproquo is an action-based framework where business logic is a
+            generator function — a <em>story</em> that yields typed actions. The
+            runtime decides how each action executes: AWS Lambda in production,
+            Node on your machine, the browser in your app.
+          </p>
+
+          <div className="hero__cta">
+            <a className="btn btn--primary" href="#stories">
+              Get started
+              <span className="btn__arrow">→</span>
+            </a>
+            <InstallChip />
+          </div>
+
+          <div className="hero__meta">
+            <span>MIT licensed</span>
+            <span>zero side effects</span>
+            <span>deploys itself with CDK</span>
+          </div>
+        </div>
+
+        <div ref={panelRef} className="hero__panel">
+          <CodeWindow />
+        </div>
+      </div>
+
+      <div aria-hidden="true" className="hero__fade" />
+    </section>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/InstallChip.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+const INSTALL_COMMAND = 'npm install quidproquo-core';
+
+export function InstallChip() {
+  const [copied, setCopied] = useState(false);
+
+  const copyInstall = async () => {
+    try {
+      await navigator.clipboard.writeText(INSTALL_COMMAND);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      // clipboard unavailable — the command is still visible to copy by hand
+    }
+  };
+
+  return (
+    <button className="install-chip" onClick={copyInstall} type="button">
+      <span className="install-chip__prompt">$</span>
+      <span className="install-chip__cmd">{INSTALL_COMMAND}</span>
+      <span className={`install-chip__copy${copied ? ' is-copied' : ''}`}>
+        {copied ? 'copied' : 'copy'}
+      </span>
+    </button>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/NavBar.tsx

@@ -0,0 +1,72 @@
+// Docs live on the docs. subdomain of whatever apex this page is served from
+// (minus the views. prefix on federated views); localhost falls back to prod.
+const getDocsUrl = (): string => {
+  const { hostname, protocol, host } = window.location;
+
+  if (hostname === 'localhost' || hostname.endsWith('.localhost')) {
+    return 'https://docs.quidproquojs.com';
+  }
+
+  return `${protocol}//docs.${host.replace(/^views\./, '')}`;
+};
+
+export function NavBar() {
+  return (
+    <header className="nav">
+      <div className="nav__inner">
+        <a className="nav__brand" href="#top">
+          <svg aria-hidden="true" className="nav__mark" viewBox="0 0 32 32">
+            <rect
+              fill="rgba(34,211,238,0.08)"
+              height="26"
+              rx="7"
+              stroke="#22d3ee"
+              strokeWidth="1.6"
+              width="26"
+              x="3"
+              y="3"
+            />
+            <path
+              d="M12 9l-4 7 4 7M20 9l4 7-4 7"
+              fill="none"
+              stroke="#8df6ff"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2.2"
+            />
+          </svg>
+          <span className="nav__name">
+            quid<span className="nav__name-accent">pro</span>quo
+          </span>
+        </a>
+
+        <nav className="nav__links">
+          <a href="#stories">Stories</a>
+          <a href="#pipeline">Runtime</a>
+          <a href="#packages">Packages</a>
+          <a href={getDocsUrl()}>Docs</a>
+        </nav>
+
+        <div className="nav__actions">
+          <a
+            className="btn btn--ghost btn--sm"
+            href="https://github.com/joe-coady/quidproquo"
+            rel="noreferrer"
+            target="_blank"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="15"
+              viewBox="0 0 16 16"
+              width="15"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+            </svg>
+            GitHub
+          </a>
+        </div>
+      </div>
+    </header>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/Packages.tsx

@@ -0,0 +1,63 @@
+interface PackageGroup {
+  label: string;
+  packages: string[];
+}
+
+const GROUPS: PackageGroup[] = [
+  {
+    label: 'core',
+    packages: ['quidproquo-core', 'quidproquo-webserver'],
+  },
+  {
+    label: 'action processors',
+    packages: [
+      'quidproquo-actionprocessor-awslambda',
+      'quidproquo-actionprocessor-node',
+      'quidproquo-actionprocessor-web',
+    ],
+  },
+  {
+    label: 'deploy',
+    packages: [
+      'quidproquo-config-aws',
+      'quidproquo-deploy-awscdk',
+      'quidproquo-deploy-webpack',
+    ],
+  },
+  {
+    label: 'client',
+    packages: [
+      'quidproquo-web',
+      'quidproquo-web-react',
+      'quidproquo-web-admin',
+    ],
+  },
+];
+
+export function Packages() {
+  return (
+    <section className="section" id="packages">
+      <p className="section__kicker">the grid</p>
+      <h2 className="section__title">A package for every layer</h2>
+      <p className="section__sub">
+        Core defines the actions. Everything else is an implementation you plug
+        in.
+      </p>
+
+      <div className="package-groups">
+        {GROUPS.map((group) => (
+          <div key={group.label} className="package-group">
+            <span className="package-group__label">{group.label}</span>
+            <div className="package-group__chips">
+              {group.packages.map((name) => (
+                <code key={name} className="package-chip">
+                  {name}
+                </code>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/template/apps/qpqjs/services/design/views/src/components/LandingPage/components/Pipeline.tsx

@@ -0,0 +1,58 @@
+interface Stage {
+  step: string;
+  title: string;
+  body: string;
+  code: string;
+}
+
+const STAGES: Stage[] = [
+  {
+    step: '01',
+    title: 'Story yields an action',
+    body: 'Your generator pauses and hands the runtime a plain, typed description of what it needs.',
+    code: 'yield* askFileWriteContents(...)',
+  },
+  {
+    step: '02',
+    title: 'Runtime routes it',
+    body: 'The runtime looks up the processor registered for that action type on this platform.',
+    code: 'FileWriteContents → processor',
+  },
+  {
+    step: '03',
+    title: 'Processor executes',
+    body: 'On Lambda that means S3. On Node, the filesystem. The result flows back into your story.',
+    code: 's3.putObject(...) → resume story',
+  },
+];
+
+export function Pipeline() {
+  return (
+    <section className="section" id="pipeline">
+      <p className="section__kicker">how it runs</p>
+      <h2 className="section__title">From yield to production</h2>
+      <p className="section__sub">
+        A story never touches a platform API. Actions travel the grid;
+        processors do the work.
+      </p>
+
+      <div className="pipeline">
+        {STAGES.map((stage, index) => (
+          <div key={stage.step} className="pipeline__stage-wrap">
+            <article className="pipeline__stage">
+              <span className="pipeline__step">{stage.step}</span>
+              <h3>{stage.title}</h3>
+              <p>{stage.body}</p>
+              <code className="pipeline__code">{stage.code}</code>
+            </article>
+            {index < STAGES.length - 1 && (
+              <div aria-hidden="true" className="pipeline__link">
+                <span className="pipeline__packet" />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}