docs: updated docs for better seo

coltorapps · Dec 2, 2024 · 6674237 · 6674237
1 parent 893be7b
commit 6674237
Show file tree

Hide file tree

Showing 13 changed files with 172 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -19,20 +19,20 @@
 
 ## Introduction
 
-**Builder** is a versatile TypeScript library designed for crafting custom form builders and much more. You can also develop website builders, dashboard builders, and any other builders you envision.
+**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision.
 
 Some key characteristics:
 
 - Headless: Bring your own components and design the user experience as you want.
 - Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end.
 - Typesafe: Ensures full type safety by default in every aspect.
-- Multi-platform: Runs on web, mobile, servers, serverless, and workers.
+- Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers.
 - Framework agnostic: Features a core that is independent of any front-end framework.
 - Zero dependencies: Offers a streamlined, lightweight library.
 - Unopinionated: Affords you the freedom to build anything you imagine.
 - Progressively Enhanceable: Embraces web standards.
 
-Currently, **Builder** offers support for React, with plans to extend compatibility to other front-end frameworks in the future.
+Currently, **Builder** offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future.
 
 Click the thumbnail below to watch the library's intro video.
 
@@ -42,10 +42,6 @@ Click the thumbnail below to watch the library's intro video.
 </a>
 </div>
 
-<br />
-
-> We are successfully using **Builder** in real-world production apps. However, it's important to note that the project is currently in the alpha stage, which means that breaking changes can occur even in minor or patch updates.
-
 ## Install
 
 Install the dependencies via your preferred package manager.

diff --git a/docs/package.json b/docs/package.json
@@ -22,6 +22,7 @@
     "@headlessui/react": "^1.7.13",
     "@markdoc/markdoc": "^0.3.4",
     "@markdoc/next.js": "^0.3.4",
+    "@next/third-parties": "^15.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -47,6 +48,7 @@
     "date-fns": "^2.30.0",
     "fast-glob": "^3.2.12",
     "flexsearch": "^0.7.31",
+    "framer-motion": "^11.12.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.292.0",

diff --git a/docs/src/app/docs/api/react/builder-entity/page.md b/docs/src/app/docs/api/react/builder-entity/page.md
@@ -10,7 +10,7 @@ This React component renders a single entity from a [builder store](/docs/api/re
 
 ## Reference
 
-### `<BuilderEntity builderStore components children? />`
+### `<BuilderEntity entityId builderStore components children? />`
 
 Use the `BuilderEntity` component to render a single entity, including its children.
 

diff --git a/docs/src/app/docs/api/react/interpreter-entity/page.md b/docs/src/app/docs/api/react/interpreter-entity/page.md
@@ -10,7 +10,7 @@ This React component renders a single entity from an [interpreter store](/docs/a
 
 ## Reference
 
-### `<InterpreterEntity interpreterStore components children? />`
+### `<InterpreterEntity entityId interpreterStore components children? />`
 
 Use the `InterpreterEntity` component to render a single entity, including its children.
 

diff --git a/docs/src/app/docs/guides/form-builder/page.md b/docs/src/app/docs/guides/form-builder/page.md
@@ -1,5 +1,5 @@
 ---
-title: Form builder
+title: React Form Builder
 nextjs:
   metadata:
     title: React form builder

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 import { Providers } from "@/app/providers";
 import { Layout } from "@/components/layout";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { Analytics } from "@vercel/analytics/react";
 import clsx from "clsx";
 
@@ -26,10 +27,10 @@ export const metadata: Metadata = {
   metadataBase: new URL("https://builder.coltorapps.com"),
   title: {
     template: "%s - Docs",
-    default: "Builder",
+    default: "React Form Builder",
   },
   description:
-    "Powerful library for crafting your own form builders and beyond.",
+    "React Form Builder. React Native Form Builder. Develop your own dynamic forms builder, websites builder, dashboards builder, UIs builder.",
 };
 
 export default function RootLayout({
@@ -50,6 +51,7 @@ export default function RootLayout({
         <Toaster />
         <Analytics />
       </body>
+      <GoogleAnalytics gaId="G-4DTPJ6V5QP" />
     </html>
   );
 }
diff --git a/docs/src/app/page.md b/docs/src/app/page.md
@@ -1,16 +1,33 @@
----
-title: Getting started
+## Overview
+
+**Builder** is a versatile React and React Native library designed for crafting dynamic form builders and much more. You can also develop dynamic website builders, dashboard builders, and any other builders you envision.
+
+Some key characteristics:
+
+- Headless: Bring your own components and design the user experience as you want.
+- Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end.
+- Typesafe: Ensures full type safety by default in every aspect.
+- Multi-platform: Runs on web (React), mobile (React Native), servers, serverless, and workers.
+- Framework agnostic: Features a core that is independent of any front-end framework.
+- Zero dependencies: Offers a streamlined, lightweight library.
+- Unopinionated: Affords you the freedom to build anything you imagine.
+- Progressively Enhanceable: Embraces web standards.
+
+Currently, **Builder** offers support for React and React Native, with plans to extend compatibility to other front-end frameworks in the future.
+
 ---
 
+## Get Started
+
 Learn how to get started with Builder through our guides. {% .lead %}
 
 {% quick-links %}
 
 {% quick-link title="Installation" icon="installation" href="/docs/installation" description="Step-by-step guides for setting up and using the library." /%}
 
-{% quick-link title="Core concepts" icon="presets" href="/docs/attributes" description="Learn the core concepts to better understand the library." /%}
+{% quick-link title="React Form Builder Guide" icon="plugins" href="/docs/guides/form-builder" description="Explore our guides to spark your inspiration." /%}
 
-{% quick-link title="Guides" icon="plugins" href="/docs/guides/form-builder" description="Explore our guides to spark your inspiration." /%}
+{% quick-link title="Core concepts" icon="presets" href="/docs/attributes" description="Learn the core concepts to better understand the library." /%}
 
 {% quick-link title="API reference" icon="theming" href="/docs/api/create-attribute" description="Dive into the API Reference for detailed guidance." /%}
 
@@ -20,33 +37,14 @@ Learn how to get started with Builder through our guides. {% .lead %}
 
 ---
 
-## Live Example
+## React Form Builder Demo
 
-A simple example of what can be accomplished with Builder.
+Here is a live demo of a simple React form builder created using `shadcn` components for UI, and `dnd-kit` for drag and drop.
 
 {% basic-form-builder /%}
 
----
-
-## Introduction
-
-**Builder** is a versatile TypeScript library designed for crafting custom form builders and much more. You can also develop website builders, dashboard builders, and any other builders you envision.
-
-Some key characteristics:
-
-- Headless: Bring your own components and design the user experience as you want.
-- Full-stack: Provides comprehensive tools for building both the interface and validate schemas on the back-end.
-- Typesafe: Ensures full type safety by default in every aspect.
-- Multi-platform: Runs on web, mobile, servers, serverless, and workers.
-- Framework agnostic: Features a core that is independent of any front-end framework.
-- Zero dependencies: Offers a streamlined, lightweight library.
-- Unopinionated: Affords you the freedom to build anything you imagine.
-- Progressively Enhanceable: Embraces web standards.
-
-Currently, **Builder** offers support for React, with plans to extend compatibility to other front-end frameworks in the future.
-
-{% callout type="warning" title="Alpha Stage" %}
-We are successfully using **Builder** in real-world production apps. However, it's important to note that the project is currently in the alpha stage, which means that breaking changes can occur even in minor or patch updates.
+{% callout title="You should know!" %}
+You are free to build your own form builder using any components and mechanics you want.
 {% /callout %}
 
 ---

diff --git a/docs/src/components/docs-header.tsx b/docs/src/components/docs-header.tsx
@@ -2,6 +2,7 @@
 
 import { usePathname } from "next/navigation";
 import { navigation } from "@/lib/navigation";
+import clsx from "clsx";
 
 export function DocsHeader({ title }: { title?: string }) {
   const pathname = usePathname();
@@ -14,7 +15,7 @@ export function DocsHeader({ title }: { title?: string }) {
   }
 
   return (
-    <header className="mb-9 space-y-1">
+    <header className={clsx("space-y-1", pathname === "/" ? "mb-1" : "mb-9")}>
       {section && (
         <p className="font-display text-sm font-medium text-neutral-500">
           {section.title}

diff --git a/docs/src/components/hero.tsx b/docs/src/components/hero.tsx
@@ -8,6 +8,7 @@ import clsx from "clsx";
 import { Highlight } from "prism-react-renderer";
 
 import { Button } from "./ui/button";
+import { WordRotate } from "./word-rotate";
 
 const codeLanguage = "typescript";
 const code = `export const formBuilder = createBuilder({
@@ -36,7 +37,7 @@ export function Hero() {
         <div className="lg:max-w-8xl xl:gap-x-18 mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-40 px-4 md:max-w-3xl lg:grid-cols-2 lg:px-8 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
             <Image
-              className="absolute bottom-full right-full -mb-56 -mr-72 opacity-50"
+              className="pointer-events-none absolute bottom-full right-full -mb-56 -mr-72 opacity-50"
               src={blurCyanImage}
               alt=""
               width={530}
@@ -45,12 +46,23 @@ export function Hero() {
               priority
             />
             <div className="relative xl:pr-24">
-              <p className="font-display inline bg-gradient-to-t from-slate-400 to-white bg-clip-text text-5xl tracking-tight text-transparent">
-                Builders made easy
-              </p>
-              <p className="mt-3 text-2xl tracking-tight text-neutral-400">
-                Powerful library for crafting your own form builders and beyond.
-              </p>
+              <h1 className="font-display inline bg-gradient-to-t from-slate-400 to-white bg-clip-text text-3xl md:text-4xl tracking-tight text-transparent">
+                React Form Builder
+              </h1>
+              <h2 className="mt-3 md:text-2xl tracking-tight text-neutral-400">
+                <span className="not-sr-only">
+                  Develop your dynamic{" "}
+                  <WordRotate
+                    words={["forms", "websites", "dashboards", "UIs"]}
+                    className="rounded-2xl bg-gradient-to-t from-neutral-800 to-neutral-700 px-2 font-medium text-white"
+                  />{" "}
+                  builder.
+                </span>
+                <span className="sr-only">
+                  Develop your own dynamic forms builder, websites builder,
+                  dashboards builder, UIs builder.
+                </span>
+              </h2>
               <div className="mt-8 flex gap-4 md:justify-center lg:justify-start">
                 <Button asChild>
                   <Link href="/docs/installation">Get started</Link>
@@ -88,7 +100,7 @@ export function Hero() {
           <div className="relative">
             <div className="absolute inset-0 top-10 flex items-center justify-center xl:pl-10">
               <Image
-                className="h-auto w-[31rem] object-cover"
+                className="pointer-events-none h-auto w-[31rem] object-cover"
                 src={cubeImage}
                 alt=""
                 unoptimized
@@ -98,7 +110,7 @@ export function Hero() {
             <div className="relative xl:pl-10">
               <div className="relative">
                 <Image
-                  className="absolute -right-64 -top-64"
+                  className="pointer-events-none absolute -right-64 -top-64"
                   src={blurCyanImage}
                   alt=""
                   width={530}
@@ -107,7 +119,7 @@ export function Hero() {
                   priority
                 />
                 <Image
-                  className="absolute -bottom-40 -right-44"
+                  className="pointer-events-none absolute -bottom-40 -right-44"
                   src={blurIndigoImage}
                   alt=""
                   width={567}

diff --git a/docs/src/components/layout.tsx b/docs/src/components/layout.tsx
@@ -10,6 +10,8 @@ import { Navigation } from "@/components/navigation";
 import { Search } from "@/components/search";
 import clsx from "clsx";
 
+import { Button } from "./ui/button";
+
 function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
@@ -53,7 +55,7 @@ function Header() {
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
         <Search />
       </div>
-      <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
+      <div className="relative flex basis-0 items-center justify-end gap-6 sm:gap-8 md:flex-grow">
         <Link
           href="https://discord.gg/pEGF5DvVRS"
           target="_blank"
@@ -91,6 +93,15 @@ function Header() {
         >
           <GitHubIcon className="h-6 w-6 fill-neutral-400 group-hover:fill-neutral-500 dark:group-hover:fill-neutral-300" />
         </Link>
+        <Button variant="secondary" asChild>
+          <a
+            href="https://www.coltorapps.com/#contacts"
+            target="_blank"
+            className="hidden lg:inline-block"
+          >
+            Contact us
+          </a>
+        </Button>
       </div>
     </header>
   );

diff --git a/docs/src/components/word-rotate.tsx b/docs/src/components/word-rotate.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+import { AnimatePresence, motion, type HTMLMotionProps } from "framer-motion";
+
+interface WordRotateProps {
+  words: string[];
+  duration?: number;
+  framerProps?: HTMLMotionProps<"h1">;
+  className?: string;
+}
+
+export function WordRotate({
+  words,
+  duration = 2000,
+  framerProps = {
+    initial: { opacity: 0, y: -5 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 5 },
+    transition: { duration: 0.25, ease: "easeOut" },
+  },
+  className,
+}: WordRotateProps) {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prevIndex) => (prevIndex + 1) % words.length);
+    }, duration);
+
+    return () => clearInterval(interval);
+  }, [words, duration]);
+
+  return (
+    <span className="overflow-hidden py-2">
+      <AnimatePresence mode="wait">
+        <motion.span
+          key={words[index]}
+          className={cn("inline-block", className)}
+          {...framerProps}
+        >
+          {words[index]}
+        </motion.span>
+      </AnimatePresence>
+    </span>
+  );
+}
diff --git a/docs/src/lib/navigation.ts b/docs/src/lib/navigation.ts
@@ -9,7 +9,7 @@ export const navigation = [
   {
     title: "Guides",
     links: [
-      { title: "Form builder", href: "/docs/guides/form-builder" },
+      { title: "React form builder", href: "/docs/guides/form-builder" },
       { title: "Factory pattern", href: "/docs/guides/factory-pattern" },
       { title: "Drag & Drop", href: "/docs/guides/drag-and-drop" },
     ],