Add getting started docs

2026-06-08 13:55:16 +02:00
parent 1292b9885a
commit 845aa193ba
39 changed files with 434 additions and 1431 deletions
@@ -1,44 +1,62 @@
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-import Heading from '@theme/Heading';
-import Layout from '@theme/Layout';
-import clsx from 'clsx';
-import type {ReactNode} from 'react';
+import Link from "@docusaurus/Link"
+import Layout from "@theme/Layout"
+import clsx from "clsx"
+import type { ReactNode } from "react"

-import styles from './index.module.css';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import styles from "./index.module.css"

 export default function Home(): ReactNode {
-  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
+      title="effect-fc"
+      description="Write React function components with Effect"
+    >
+      <main className={styles.page}>
+        <section className={clsx("container", styles.hero)}>
+          <p className={styles.eyebrow}>Effect for React function components</p>
+          <h1>Write components as Effect programs.</h1>
+          <p className={styles.lede}>
+            effect-fc gives React 19 components access to Effect services,
+            scopes, subscriptions, and async workflows without giving up normal
+            React boundaries.
+          </p>
+          <div className={styles.actions}>
+            <Link className="button button--primary button--lg" to="/docs/getting-started">
+              Get Started
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              to="https://github.com/Thiladev/effect-fc"
+            >
+              GitHub
+            </Link>
+          </div>
+        </section>
+
+        <section className={clsx("container", styles.cards)}>
+          <article>
+            <h2>Generator components</h2>
+            <p>
+              Use <code>Component.make</code> to yield Effects and return JSX
+              from the same component body.
+            </p>
+          </article>
+          <article>
+            <h2>Runtime at the edge</h2>
+            <p>
+              Provide your app layer once with <code>ReactRuntime.Provider</code>
+              and convert Effect-FC components at React boundaries.
+            </p>
+          </article>
+          <article>
+            <h2>Scoped lifecycles</h2>
+            <p>
+              Tie subscriptions and resources to component scopes so finalizers
+              run when React unmounts.
+            </p>
+          </article>
+        </section>
      </main>
    </Layout>
-  );
+  )
 }