create-catalyst-app 1.1.0 → 1.2.0-canary.2

package/templates/common/src/js/containers/Home/Home.js

@@ -1,21 +1,126 @@
-import React from "react"
+// Your starter page. Replace this file, or delete the whole Home folder
+// (and its route in src/js/routes/index.js) when you are ready for your own.
+import React, { useEffect, useState } from "react"
+import Mark from "./Mark"
 import css from "./Home.scss"
 
+const DOCS = "https://catalyst.1mg.com/content"
+
+const NEXT_STEPS = [
+    {
+        title: "Add a page",
+        body: "Scaffold a route and its container. Run this from the app folder.",
+        code: "npx create-catalyst-app new-route",
+        href: `${DOCS}/Routing/routing/index`,
+    },
+    {
+        title: "Load data",
+        body: "Add a serverFetcher to this page, then read the result in your component.",
+        code: "useCurrentRouteData()",
+        href: `${DOCS}/data-fetching`,
+    },
+    {
+        title: "Ship to a phone",
+        body: "Build this same code into a native Android or iOS app.",
+        code: "npm run buildApp:android",
+        href: `${DOCS}/Guides%20and%20Tutorials/First%20Universal%20App/first-universal-app`,
+    },
+]
+
+const HOOKS = [
+    "useCamera",
+    "useFilePicker",
+    "useHapticFeedback",
+    "useNotification",
+    "useGoogleSignIn",
+    "useNetworkStatus",
+    "useSafeArea",
+    "useAI",
+]
+
 function Home() {
+    const [hydratedIn, setHydratedIn] = useState(null)
+
+    // Effects never run on the server, so this fires once the page is hydrated.
+    // performance.now() counts from the start of navigation.
+    useEffect(() => {
+        setHydratedIn(Math.round(performance.now()))
+    }, [])
+
     return (
-        <div className={css.app}>
-            <header className={css.appHeader}>
-                <h1 className={css.heading}>Catalyst</h1>
-                <p>Edit files inside src directory and save to reload.</p>
-                <a
-                    className={css.appLink}
-                    href="https://catalyst.1mg.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn Catalyst
-                </a>
-            </header>
+        <div className={css.page} data-hydrated={hydratedIn !== null}>
+            <title>Your app is running | Catalyst</title>
+
+            <nav className={css.nav}>
+                <span className={css.brand}>Catalyst</span>
+                <span className={css.navLinks}>
+                    <a href="https://catalyst.1mg.com">Docs</a>
+                    <a href="https://github.com/tata1mg/catalyst-core">GitHub</a>
+                </span>
+            </nav>
+
+            <main>
+                <section className={css.hero}>
+                    <div className={css.stage}>
+                        <span className={css.burst} aria-hidden="true" />
+                        <Mark />
+                        <span className={css.spark} aria-hidden="true" />
+                    </div>
+
+                    <div className={css.intro}>
+                        <h1 className={css.title}>
+                            Your app is <em>running.</em>
+                        </h1>
+                        <p className={css.lede}>
+                            Open <code>src/js/containers/Home/Home.js</code>, change anything, and save. This
+                            page updates on its own.
+                        </p>
+                        <p className={css.status} role="status">
+                            <span>Rendered on the server</span>
+                            <span>
+                                {hydratedIn === null
+                                    ? "Hydrating in your browser"
+                                    : `Interactive in ${hydratedIn} ms`}
+                            </span>
+                        </p>
+                    </div>
+                </section>
+
+                <section className={css.next} aria-labelledby="next-heading">
+                    <h2 id="next-heading" className={css.heading}>
+                        Build on it.
+                    </h2>
+                    <ul className={css.steps}>
+                        {NEXT_STEPS.map((step) => (
+                            <li key={step.title}>
+                                <a className={css.step} href={step.href}>
+                                    <strong>{step.title}</strong>
+                                    <span>{step.body}</span>
+                                    <code>{step.code}</code>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </section>
+
+                <section className={css.native} aria-labelledby="native-heading">
+                    <h2 id="native-heading" className={css.heading}>
+                        Native features are plain <em>React hooks.</em>
+                    </h2>
+                    <p className={css.hooksLede}>
+                        Import them from <code>catalyst-core/hooks</code>. They work on Android and iOS, and
+                        some work on the web too.
+                    </p>
+                    <p className={css.hooks}>
+                        {HOOKS.map((hook) => (
+                            <a key={hook} href={`${DOCS}/API%20Reference/hooks`}>
+                                {hook}
+                                <i>()</i>
+                            </a>
+                        ))}
+                    </p>
+                </section>
+            </main>
         </div>
     )
 }

package/templates/common/src/js/containers/Home/Home.scss

@@ -1,34 +1,418 @@
+@font-face {
+    font-family: "Inter Catalyst";
+    src: url("./fonts/inter.woff2") format("woff2");
+    font-weight: 100 900;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "JetBrains Mono Catalyst";
+    src: url("./fonts/jetbrains-mono.woff2") format("woff2");
+    font-weight: 100 800;
+    font-display: swap;
+}
+
+:root {
+    color-scheme: light dark;
+    --paper: #f5f4ff;
+    --ink: #14132a;
+    --muted: #4b4a6b;
+    --accent: #5353dc;
+    --hairline: rgba(20, 19, 42, 0.14);
+    --dot: rgba(83, 83, 220, 0.2);
+    --wedge: rgba(122, 122, 255, 0.11);
+    --ray-outer: #5b5be6;
+    --ray-inner: #e3e3ff;
+    --spark: #ffffff;
+    --spark-glow: rgba(122, 122, 255, 0.55);
+    --sans: "Inter Catalyst", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --mono: "JetBrains Mono Catalyst", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --paper: #0b0a14;
+        --ink: #f3f2ff;
+        --muted: #a9a8c9;
+        --accent: #a0a0ff;
+        --hairline: rgba(243, 242, 255, 0.16);
+        --dot: rgba(160, 160, 255, 0.14);
+        --wedge: rgba(122, 122, 255, 0.09);
+        --ray-outer: #7a7aff;
+        --ray-inner: #ffffff;
+    }
+}
+
 body {
     margin: 0;
+    background: var(--paper);
 }
 
-.app {
-    text-align: center;
-    margin: 0;
+.page {
+    position: relative;
+    isolation: isolate;
+    overflow: clip;
+    min-height: 100dvh;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+        env(safe-area-inset-left);
+    background-color: var(--paper);
+    background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
+    background-size: 28px 28px;
+    color: var(--ink);
+    font-family: var(--sans);
+    font-size: 1rem;
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+
+    a {
+        color: inherit;
+    }
+
+    a:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 3px;
+        border-radius: 4px;
+    }
+
+    code {
+        font-family: var(--mono);
+        font-size: 0.92em;
+    }
+
+    em {
+        color: var(--accent);
+        font-style: normal;
+    }
+}
+
+// The sunburst from the release films, centred on the spark.
+.burst {
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 100%;
+    width: 170vmax;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    translate: -50% -50%;
+    background: repeating-conic-gradient(from 3deg, var(--wedge) 0 9deg, transparent 9deg 25.7deg);
+    mask-image: radial-gradient(closest-side, transparent 1%, #000 10%, transparent 60%);
+    -webkit-mask-image: radial-gradient(closest-side, transparent 1%, #000 10%, transparent 60%);
+    opacity: 0;
+    scale: 0.94;
+    transition:
+        opacity 900ms var(--ease-out),
+        scale 1200ms var(--ease-out);
 }
 
-.appLogo {
-    height: 40vmin;
-    pointer-events: none;
+[data-hydrated="true"] .burst {
+    opacity: 1;
+    scale: 1;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-    .appLogo {
-        animation: App-logo-spin infinite 20s linear;
+.nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 24px clamp(24px, 5vw, 56px);
+    box-sizing: border-box;
+}
+
+.brand {
+    font-size: 1.0625rem;
+    font-weight: 750;
+    letter-spacing: -0.03em;
+}
+
+.navLinks {
+    display: flex;
+    gap: 8px;
+    font-size: 0.9375rem;
+
+    a {
+        padding: 10px 12px;
+        color: var(--muted);
+        text-decoration: none;
+        transition: color 150ms ease-out;
+    }
+
+    a:last-child {
+        margin-right: -12px;
+    }
+
+    a:hover {
+        color: var(--ink);
     }
 }
 
-.appHeader {
-    background-color: #282c34;
-    min-height: 100vh;
+.hero {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+    gap: clamp(20px, 3.4vw, 52px);
+    max-width: 1240px;
+    min-height: calc(min(84dvh, 780px) - 88px);
+    margin: 0 auto;
+    padding: 0 clamp(24px, 5vw, 56px) 48px;
+    box-sizing: border-box;
+}
+
+.stage {
+    position: relative;
+    flex: none;
+    width: clamp(120px, 21vw, 300px);
+}
+
+.mark {
+    display: block;
+    width: 100%;
+    overflow: visible;
+}
+
+.rayOuter {
+    stop-color: var(--ray-outer);
 }
 
-.appLink {
-    color: #61dafb;
+.rayInner {
+    stop-color: var(--ray-inner);
+}
+
+.ray {
+    animation: ray-in 720ms var(--ease-out) var(--delay) both;
+}
+
+// The spark sits where the rays meet, and lights up once React has hydrated.
+.spark {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    width: 7%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    translate: -50% -50%;
+    background: var(--spark);
+    box-shadow:
+        0 0 6px 2px var(--spark),
+        0 0 24px 8px var(--spark-glow),
+        0 0 80px 30px var(--spark-glow);
+    opacity: 0;
+    scale: 0.4;
+    transition:
+        opacity 500ms var(--ease-out),
+        scale 700ms var(--ease-out);
+}
+
+[data-hydrated="true"] .spark {
+    opacity: 1;
+    scale: 1;
+}
+
+.intro {
+    min-width: 0;
+    animation: rise-in 640ms var(--ease-out) 240ms both;
+}
+
+.title {
+    margin: 0;
+    font-size: clamp(2.75rem, 7.4vw, 6rem);
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    text-wrap: balance;
+}
+
+.lede {
+    max-width: 34rem;
+    margin: 24px 0 0;
+    color: var(--muted);
+    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
+    line-height: 1.5;
+    text-wrap: pretty;
+
+    code {
+        color: var(--ink);
+        font-weight: 500;
+        overflow-wrap: anywhere;
+    }
+}
+
+.status {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 22px;
+    margin: 28px 0 0;
+    color: var(--muted);
+    font-family: var(--mono);
+    font-size: 0.8125rem;
+    font-variant-numeric: tabular-nums;
+
+    span::before {
+        content: "\2713\00a0";
+        color: var(--accent);
+    }
+
+    span:last-child::before {
+        content: "\2026\00a0";
+    }
+}
+
+[data-hydrated="true"] .status span:last-child::before {
+    content: "\2713\00a0";
+}
+
+.next,
+.native {
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 56px) 0;
+    box-sizing: border-box;
+}
+
+.native {
+    padding-bottom: clamp(64px, 9vw, 120px);
+}
+
+.heading {
+    margin: 0;
+    font-size: clamp(2rem, 4.4vw, 3.5rem);
+    font-weight: 800;
+    line-height: 1.05;
+    letter-spacing: -0.035em;
+    text-wrap: balance;
+}
+
+.steps {
+    margin: 32px 0 0;
+    padding: 0;
+    border-top: 1px solid var(--hairline);
+    list-style: none;
+}
+
+.step {
+    display: grid;
+    grid-template-columns: 11rem minmax(0, 1fr) 19.5rem;
+    align-items: baseline;
+    gap: 6px 32px;
+    padding: 22px 0;
+    border-bottom: 1px solid var(--hairline);
+    text-decoration: none;
+
+    strong {
+        font-size: 1.125rem;
+        font-weight: 700;
+        letter-spacing: -0.015em;
+    }
+
+    span {
+        color: var(--muted);
+        text-wrap: pretty;
+    }
+
+    code {
+        color: var(--accent);
+        transition: translate 200ms var(--ease-out);
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .step:hover code {
+        translate: 4px 0;
+    }
+
+    .hooks a:hover {
+        color: var(--accent);
+    }
+}
+
+.hooksLede {
+    max-width: 38rem;
+    margin: 16px 0 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    text-wrap: pretty;
+
+    code {
+        color: var(--ink);
+    }
+}
+
+.hooks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px clamp(18px, 2.6vw, 36px);
+    margin: 32px 0 0;
+    font-family: var(--mono);
+    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
+    font-weight: 700;
+    line-height: 1.3;
+    letter-spacing: -0.025em;
+
+    a {
+        text-decoration: none;
+        transition: color 150ms ease-out;
+    }
+
+    i {
+        color: var(--accent);
+        font-style: normal;
+    }
+}
+
+@keyframes ray-in {
+    from {
+        opacity: 0;
+        transform: translate(var(--from-x), var(--from-y));
+    }
+}
+
+@keyframes rise-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}
+
+@media (max-width: 960px) {
+    .step {
+        grid-template-columns: minmax(0, 1fr);
+
+        code {
+            margin-top: 6px;
+            overflow-wrap: anywhere;
+        }
+    }
+}
+
+@media (max-width: 760px) {
+    .hero {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 36px;
+        min-height: 0;
+        padding-top: 20px;
+    }
+
+    .stage {
+        width: clamp(120px, 30vw, 170px);
+    }
+
+    .hooks {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ray,
+    .intro {
+        animation: none;
+    }
+
+    .burst,
+    .spark,
+    .step code {
+        transition: none;
+    }
 }

package/templates/common/src/js/containers/Home/Mark.js

@@ -0,0 +1,82 @@
+import React from "react"
+import css from "./Home.scss"
+
+// The 14 rays of the Catalyst mark, as [outer x, outer y, inner x, inner y].
+const RAYS = [
+    [11.8, 89.7, 80, 90.4],
+    [33.9, 51.3, 92, 70.7],
+    [56, 13.2, 103, 53.6],
+    [100.6, 11.8, 124.5, 52.6],
+    [145.3, 12.5, 146.2, 52],
+    [145.3, 167, 146.2, 128],
+    [100.4, 167.6, 124.4, 128.2],
+    [56, 167.1, 103, 127.8],
+    [33.7, 128.9, 92, 109.5],
+    [122.2, 51.5, 135.5, 72.8],
+    [78.4, 51.5, 112.8, 71.3],
+    [56.4, 89.6, 102.6, 90.4],
+    [78.5, 128.3, 112.7, 109.6],
+    [122.3, 128.4, 135.7, 108.2],
+]
+
+const OUTER_RADIUS = 11.8
+const INNER_RADIUS = 5.8
+
+// A capsule that narrows from the outer end to the inner end.
+function rayPath([x1, y1, x2, y2]) {
+    const length = Math.hypot(x2 - x1, y2 - y1)
+    const nx = -(y2 - y1) / length
+    const ny = (x2 - x1) / length
+    const point = (x, y, radius, side) =>
+        `${(x + nx * radius * side).toFixed(2)} ${(y + ny * radius * side).toFixed(2)}`
+
+    return [
+        `M${point(x1, y1, OUTER_RADIUS, 1)}`,
+        `L${point(x2, y2, INNER_RADIUS, 1)}`,
+        `A${INNER_RADIUS} ${INNER_RADIUS} 0 0 0 ${point(x2, y2, INNER_RADIUS, -1)}`,
+        `L${point(x1, y1, OUTER_RADIUS, -1)}`,
+        `A${OUTER_RADIUS} ${OUTER_RADIUS} 0 0 0 ${point(x1, y1, OUTER_RADIUS, 1)}`,
+        "Z",
+    ].join("")
+}
+
+function Mark() {
+    return (
+        <svg className={css.mark} viewBox="0 0 158 180" aria-hidden="true">
+            <defs>
+                {RAYS.map(([x1, y1, x2, y2], index) => (
+                    <linearGradient
+                        key={index}
+                        id={`catalyst-ray-${index}`}
+                        gradientUnits="userSpaceOnUse"
+                        x1={x1}
+                        y1={y1}
+                        x2={x2}
+                        y2={y2}
+                    >
+                        <stop offset="0" className={css.rayOuter} />
+                        <stop offset="1" className={css.rayInner} />
+                    </linearGradient>
+                ))}
+            </defs>
+            {RAYS.map((ray, index) => {
+                const length = Math.hypot(ray[2] - ray[0], ray[3] - ray[1])
+                return (
+                    <path
+                        key={index}
+                        className={css.ray}
+                        d={rayPath(ray)}
+                        fill={`url(#catalyst-ray-${index})`}
+                        style={{
+                            "--from-x": `${((ray[0] - ray[2]) / length) * 26}px`,
+                            "--from-y": `${((ray[1] - ray[3]) / length) * 26}px`,
+                            "--delay": `${index * 34}ms`,
+                        }}
+                    />
+                )
+            })}
+        </svg>
+    )
+}
+
+export default Mark