siteon 1.3.4 → 1.4.1

package/Readme.md

@@ -1,312 +1,112 @@
-# Siteon Registry CLI
+# SiteOn
 
-A CLI tool to generate type-safe API clients for Siteon workspaces. Similar to shadcn/ui, this tool generates code directly into your project that you own and can customize.
+A powerful code generation tool that automatically generates content fetching and form submission code for your workspace.
+
+## What is SiteOn?
+
+SiteOn streamlines your development workflow by analyzing your workspace configuration and generating ready-to-use code for:
+
+- **Content Fetching**: Automatically generate API calls and data fetching logic based on your workspace structure
+- **Form Submissions**: Create public form submission handlers with proper validation and error handling
+
+No more boilerplate code – SiteOn does the heavy lifting for you.
 
 ## Installation
 
-Since this is a private GitHub repository, you can run the CLI directly using:
+### Quick Start with npx (Recommended)
 
-1. Using npx
+Run SiteOn without installing:
 
 ```bash
-npx https://github.com/compitcomds/siteon-registry init
-# or
-npx github:compitcomds/siteon-registry init
+npx siteon
 ```
 
-2. Using pnpm dlx
-
 ```bash
-pnpm dlx https://github.com/compitcomds/siteon-registry init
-# or
-pnpm dlx github:compitcomds/siteon-registry#main init
+pnpm dlx siteon
 ```
 
-## Usage
-
-### Initialize in your project
-
-Run the `init` command in your project root:
-
 ```bash
-siteon init
+bunx siteon
 ```
 
-You'll be prompted for:
-
-1. **Workspace ID** - Your Siteon workspace ID
-2. **Email & Password** - Your Siteon credentials (ADMIN access required)
-3. **Output Directory** - Where to place generated files (default: `src` if exists, otherwise root)
-4. **Project Type**:
-   - `Static` - Vanilla HTML/CSS/JS (ES modules)
-   - `Framework` - React, Next.js, Vue, Vite, etc.
-5. **Framework** (if framework selected) - Next.js, Vite, React, Vue, or Other
-6. **Language** (if framework) - TypeScript or JavaScript
-7. **HTTP Client** (if framework) - Fetch (native) or Axios
-8. **Config Storage** (if framework) - Environment variables (.env) or config file
-9. **React Cache** (if React-based) - Use React's `cache` function for caching (React 18+)
-10. **Form Selection** - All forms or select specific ones
+### Global Installation
 
-## Generated Structure
-
-```
-your-project/
-├── siteon.config.json          # CLI configuration
-├── .env                        # (optional) Environment variables
-└── src/
-    └── siteon/
-        ├── index.ts            # Main entry point
-        ├── config.ts           # Configuration (workspace ID, base URL)
-        ├── types.ts            # Type definitions
-        ├── http-client.ts      # HTTP client (axios or fetch)
-        ├── get-metadata.ts     # Base fetch function
-        ├── get-media.ts        # Media helper functions
-        └── forms/
-            ├── index.ts        # Re-exports all forms
-            ├── portfolio.ts    # Generated form file
-            └── blog-post.ts    # Generated form file
-```
+Install globally for repeated use:
 
-## Generated Code Example
-
-For each form, the CLI generates strongly typed fetchers:
-
-```typescript
-// TypeScript example for a "Portfolio" form
-import { getMetaData } from "../get-metadata";
-import type { ResponseType, ResponseDataType, QueryParams } from "../types";
-import { cache } from "react"; // if using React cache
-
-export type PortfolioDataType = {
-  slug: string;
-  title: string;
-  featured_image: string[];
-  category: "Web Design" | "Graphic Design" | "Video Production";
-};
-
-export type PortfolioResolvedDataType = {
-  slug: string;
-  title: string;
-  featured_image: string[];
-  category: ResolvedRelation; // When resolveRelations is true
-};
-
-export type PortfolioQueryOptions = Omit<QueryParams, "resolveRelations"> & {
-  resolveRelations?: boolean;
-};
-
-// Fetch all items with full query options
-export async function getAllPortfolio(
-  options?: PortfolioQueryOptions & { resolveRelations?: false },
-): Promise<ResponseType<PortfolioDataType>>;
-export async function getAllPortfolio(
-  options: PortfolioQueryOptions & { resolveRelations: true },
-): Promise<ResponseType<PortfolioResolvedDataType>>;
-export async function getAllPortfolio(options: PortfolioQueryOptions = {}) {
-  // Implementation
-}
-
-// Fetch by slug (with optional React cache)
-export const getPortfolioBySlug = cache(
-  async (slug: string, options: { resolveRelations?: boolean } = {}) => {
-    // Implementation
-  },
-);
+```bash
+npm install -g siteon
 ```
 
-## Usage in Your App
+Then run:
 
-### Basic Usage
+```bash
+siteon
+```
 
-```typescript
-import { getAllPortfolio, getPortfolioBySlug } from "@/siteon";
+## Usage
 
-// Fetch all portfolio items
-const { data, pagination } = await getAllPortfolio();
+1. Navigate to your project directory
+2. Run the command:
+   ```bash
+   npx siteon
+   ```
+3. SiteOn will:
+   - Analyze your workspace configuration
+   - Detect your content structure
+   - Generate appropriate code files
+   - Set up form submission endpoints
 
-// Fetch with filters and ordering
-const { data } = await getAllPortfolio({
-  filters: {
-    "data.category": { equals: "Web Design" },
-  },
-  orderBy: [{ field: "order", direction: "asc" }],
-  page: 1,
-  pageSize: 10,
-});
+## Features
 
-// Fetch with resolved relations
-const { data } = await getAllPortfolio({ resolveRelations: true });
+✨ **Automatic Code Generation** - Generates production-ready code based on your workspace
 
-// Fetch single item by slug
-const portfolio = await getPortfolioBySlug("my-project");
+🔍 **Workspace Detection** - Intelligently analyzes your project structure
 
-// Fetch single item by slug with resolved relations
-const portfolio = await getPortfolioBySlug("my-project", {
-  resolveRelations: true,
-});
-```
+📝 **Form Handlers** - Creates public form submission code with validation
 
-### Filtering by Relation
-
-To filter by a relation field (e.g., get all blogs in a specific category):
-
-```typescript
-import { getAllBlog } from "@/siteon";
-
-// Filter by category relation ID
-const { data } = await getAllBlog({
-  filters: {
-    "data.category": { equals: "categoryId123" },
-  },
-});
-
-// Multiple conditions
-const { data } = await getAllBlog({
-  filters: {
-    AND: {
-      "data.category": { equals: "categoryId123" },
-      "data.published": { equals: true },
-    },
-  },
-});
-```
+🚀 **Zero Configuration** - Works out of the box with sensible defaults
 
-### With Media Resolution
+⚡ **Fast & Lightweight** - Minimal dependencies, maximum efficiency
 
-```typescript
-import { getAllPortfolio, getMediaByIds } from "@/siteon";
+## Generated Code
 
-const { data } = await getAllPortfolio();
+SiteOn generates:
 
-// Resolve media IDs to URLs
-for (const item of data) {
-  const images = await getMediaByIds(item.data.featured_image);
-  console.log(images[0]?.url);
-}
-```
+- Content fetching functions and API clients
+- Form submission handlers with validation
+- Type definitions (if applicable)
+- Configuration files for your workspace
 
-### Filter Operators
-
-Available filter operators:
-
-- `equals`, `not`
-- `gt`, `gte`, `lt`, `lte`
-- `contains`, `startsWith`, `endsWith`
-- `in`, `notIn`
-- `has`, `hasEvery`, `hasSome`
-- `isNull`
-
-```typescript
-// Complex filtering
-const { data } = await getAllPortfolio({
-  filters: {
-    AND: {
-      "data.category": { equals: "Web Design" },
-      "data.title": { contains: "Modern" },
-    },
-    OR: [{ "data.featured": { equals: true } }, { "data.order": { lt: 5 } }],
-  },
-});
-```
+## Examples
 
-## Static Sites (Vanilla JS)
-
-For static sites, use ES modules:
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>My Site</title>
-  </head>
-  <body>
-    <div id="app"></div>
-
-    <script type="module">
-      import { getAllPortfolio } from "./siteon/index.js";
-
-      const { data } = await getAllPortfolio();
-
-      const app = document.getElementById("app");
-      app.innerHTML = data
-        .map(
-          (item) => `
-      <div class="portfolio-item">
-        <h2>${item.data.title}</h2>
-      </div>
-    `,
-        )
-        .join("");
-    </script>
-  </body>
-</html>
-```
+### Basic Usage
 
-## Configuration
-
-The `siteon.config.json` file stores your configuration:
-
-```json
-{
-  "workspaceId": "your-workspace-id",
-  "baseUrl": "https://api.compitcom.in",
-  "outputDir": "src",
-  "projectType": "framework",
-  "language": "typescript",
-  "httpClient": "fetch",
-  "framework": "next",
-  "envVarLocation": "env",
-  "forms": ["portfolio", "blog-post"],
-  "createdAt": "2024-01-01T00:00:00.000Z",
-  "updatedAt": "2024-01-01T00:00:00.000Z"
-}
+```bash
+# In your project directory
+npx siteon
 ```
 
-## Environment Variables
-
-If you chose to use environment variables, they are stored in `.env`:
+## How It Works
 
-```env
-# Next.js
-NEXT_PUBLIC_SITEON_BASE_URL=https://api.compitcom.in
-NEXT_PUBLIC_SITEON_WORKSPACE_ID=your-workspace-id
+1. **Workspace Analysis**: SiteOn scans your workspace for content types, schemas, and configurations
+2. **Code Generation**: Based on the analysis, it generates optimized code tailored to your needs
+3. **File Output**: Generated code is saved to your project with clear organization
 
-# Vite/Vue
-VITE_SITEON_BASE_URL=https://api.compitcom.in
-VITE_SITEON_WORKSPACE_ID=your-workspace-id
-
-# React (CRA)
-REACT_APP_SITEON_BASE_URL=https://api.compitcom.in
-REACT_APP_SITEON_WORKSPACE_ID=your-workspace-id
-```
+## License
 
-## Field Type Mapping
+MIT
 
-| Form Field Type                      | TypeScript Type                             |
-| ------------------------------------ | ------------------------------------------- |
-| text, email, textarea, url, richtext | `string`                                    |
-| date, time, datetime                 | `string`                                    |
-| int, float                           | `number`                                    |
-| select, radio                        | Union of options                            |
-| checkbox                             | Array of options                            |
-| media, image, video                  | `string[]`                                  |
-| relation (single)                    | `string \| null` (ID) or `ResolvedRelation` |
-| relation (array)                     | `string[]` (IDs) or `ResolvedRelation[]`    |
-| repeator                             | `{ value: T }[]`                            |
+## Support
 
-## Development
+If you encounter any issues or have questions:
 
-```bash
-# Install dependencies
-bun install
+- Open an issue on [GitHub](https://github.com/yourusername/siteon)
+- Check the [documentation](https://github.com/yourusername/siteon#readme)
 
-# Build
-bun run build
+## Author
 
-# Watch mode
-bun run dev
-```
+Created with ❤️ by the SiteOn team
 
-## License
+---
 
-Private - Compitcom
+**Happy Coding!** 🎉