mirror of
https://github.com/katanemo/plano.git
synced 2026-04-26 09:16:24 +02:00
feat: redesign archgw -> plano + website in Next.js (#613)
* feat: redesign archgw -> plano + website * feat(www): refactor landing page sections, add new diagrams and UI improvements * feat(www): sections enhanced for clarify & diagrams added * feat(www): improvements to mobile design, layout of diagrams * feat(www): clean + typecheck * feat(www): feedback loop changes * feat(www): fix type error * fix lib/utils error * feat(www): ran biome formatting * feat(www): graphic changes * feat(www): web analytics * fea(www): changes * feat(www): introduce monorepo This change brings Turborepo monorepo to independently handle the marketing website, the docs website and any other future use cases for mutli-platform support. They are using internal @katanemo package handlers for the design system and logic. * fix(www): transpiler failure * fix(www): tsconfig issue * fix(www): next.config issue * feat(docs): hold off on docs * Delete next.config.ts * feat(www): content fix * feat(www): introduce blog * feat(www): content changes * Update package-lock.json * feat: update text * Update IntroSection.tsx * feat: Turbopack issue * fix * Update IntroSection.tsx * feat: updated Research page * refactor(www): text clarity, padding adj. * format(www) * fix: add missing lib/ files to git - fixes Vercel GitHub deployment - Updated .gitignore to properly exclude Python lib/ but include Next.js lib/ directories - Added packages/ui/src/lib/utils.ts (cn utility function) - Added apps/www/src/lib/sanity.ts (Sanity client configuration) - Fixes module resolution errors in Vercel GitHub deployments (case-sensitive filesystem) * Update .gitignore * style(www): favicon + metadata * fix(www): links * fix(www): add analytics * fix(www): add * fix(www): fix links + image * fix(www): fix links + image * fix(www): fix links * fix(www): remove from tools testing.md
This commit is contained in:
Musa
GitHub
parent
48bbc7cce7
commit
0c3efdbef2
119 changed files with 27142 additions and 266 deletions
59
apps/www/src/data/diagramTemplates.ts
Normal file
59
apps/www/src/data/diagramTemplates.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { createFlowDiagram, FlowStep } from "@/utils/asciiBuilder";
|
||||
|
||||
/**
|
||||
* Easy-to-use diagram templates that automatically handle spacing
|
||||
* Perfect for non-coders who just want to define their flow
|
||||
*/
|
||||
|
||||
// Example: Simple 3-step process
|
||||
export const createSimpleProcess = (steps: string[]) => {
|
||||
return createFlowDiagram({
|
||||
title: "Process Flow",
|
||||
width: 60,
|
||||
steps: steps.map((label) => ({
|
||||
label,
|
||||
type: "regular" as const,
|
||||
shadow: true,
|
||||
})),
|
||||
});
|
||||
};
|
||||
|
||||
// Example: Create a nested container diagram
|
||||
export const createNestedDiagram = (
|
||||
title: string,
|
||||
innerContent: FlowStep[],
|
||||
width: number = 70,
|
||||
) => {
|
||||
return createFlowDiagram({
|
||||
title,
|
||||
width,
|
||||
steps: innerContent,
|
||||
});
|
||||
};
|
||||
|
||||
// Pre-built templates
|
||||
export const templates = {
|
||||
simpleFlow: createSimpleProcess(["Start", "Process", "End"]),
|
||||
|
||||
apiFlow: createFlowDiagram({
|
||||
title: "API Request Flow",
|
||||
width: 65,
|
||||
steps: [
|
||||
{ label: "Client Request", type: "regular", shadow: true },
|
||||
{ label: "API Gateway", type: "container", shadow: true },
|
||||
{ label: "Process", type: "inner", shadow: true },
|
||||
{ label: "Response", type: "regular", shadow: true },
|
||||
],
|
||||
}),
|
||||
|
||||
dataPipeline: createFlowDiagram({
|
||||
title: "Data Pipeline",
|
||||
width: 70,
|
||||
steps: [
|
||||
{ label: "Input Data", type: "regular", shadow: true },
|
||||
{ label: "Transform", type: "inner", shadow: true },
|
||||
{ label: "Validate", type: "regular", shadow: true },
|
||||
{ label: "Store", type: "regular", shadow: true },
|
||||
],
|
||||
}),
|
||||
};
|
||||
82
apps/www/src/data/diagrams-programmatic.ts
Normal file
82
apps/www/src/data/diagrams-programmatic.ts
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/**
|
||||
* Programmatic ASCII Diagram Builder
|
||||
*
|
||||
* For non-coders: Define your diagram structure with simple objects,
|
||||
* and the system will automatically generate the ASCII art.
|
||||
*/
|
||||
|
||||
interface DiagramStep {
|
||||
id: string;
|
||||
label: string;
|
||||
type: "input" | "inner" | "regular";
|
||||
position: { x: number; y: number };
|
||||
}
|
||||
|
||||
interface DiagramFlow {
|
||||
from: string;
|
||||
to: string;
|
||||
arrow: "right" | "down" | "left" | "up";
|
||||
label?: string;
|
||||
}
|
||||
|
||||
interface DiagramConfig {
|
||||
title: string;
|
||||
steps: DiagramStep[];
|
||||
flows: DiagramFlow[];
|
||||
}
|
||||
|
||||
// Example: Define diagram using simple objects
|
||||
export const myFlow: DiagramConfig = {
|
||||
title: "User Registration Flow",
|
||||
steps: [
|
||||
{ id: "start", label: "User", type: "input", position: { x: 0, y: 0 } },
|
||||
{
|
||||
id: "step1",
|
||||
label: "Validate Email",
|
||||
type: "inner",
|
||||
position: { x: 2, y: 0 },
|
||||
},
|
||||
{
|
||||
id: "step2",
|
||||
label: "Create Account",
|
||||
type: "regular",
|
||||
position: { x: 2, y: 1 },
|
||||
},
|
||||
{
|
||||
id: "step3",
|
||||
label: "Send Welcome",
|
||||
type: "regular",
|
||||
position: { x: 2, y: 2 },
|
||||
},
|
||||
],
|
||||
flows: [
|
||||
{ from: "start", to: "step1", arrow: "right" },
|
||||
{ from: "step1", to: "step2", arrow: "down" },
|
||||
{ from: "step2", to: "step3", arrow: "down" },
|
||||
],
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert diagram config to ASCII string
|
||||
*
|
||||
* Usage:
|
||||
* import { buildDiagram } from './ascii-builder';
|
||||
* const ascii = buildDiagram(myFlow);
|
||||
*/
|
||||
export const buildDiagram = (config: DiagramConfig): string => {
|
||||
// This function would programmatically build the ASCII
|
||||
// For now, return a placeholder
|
||||
let result = "";
|
||||
result += `╔═ ${config.title} ══╗\n`;
|
||||
result += `║ Placeholder for programmatic generation ║\n`;
|
||||
result += `╚════════════════════════════════════╝\n`;
|
||||
|
||||
// TODO: Implement automatic ASCII generation from config
|
||||
// This would:
|
||||
// 1. Layout boxes based on positions
|
||||
// 2. Add arrows based on flows
|
||||
// 3. Add shadows automatically
|
||||
// 4. Handle different box types
|
||||
|
||||
return result;
|
||||
};
|
||||
84
apps/www/src/data/diagrams.ts
Normal file
84
apps/www/src/data/diagrams.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
export const diagrams = {
|
||||
intentDetection: ` ╔═ Intent Detection ═════════════════════════════╗
|
||||
╔═══════════╗ ║ ║░
|
||||
║ ║░ ║ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ║░
|
||||
║ agent ║░─────────║─▶┃ Cognition ┃ ║░
|
||||
║ ║░ ║ ┃ ┃ ║░
|
||||
╚═══════════╝░ ║ ┃ Action ┃ ║░
|
||||
░░░░░░░░░░░░░ ║ ┗━━━━━━━━━━━━━━━┬━━━━━━━━━━━━━━━━━━━━━━━┛ ║░
|
||||
║ │ ║░
|
||||
║ ▼ ║░
|
||||
║ ┌───────────────────────┐ ║░
|
||||
║ │ Confirm action? │ ║░
|
||||
║ └───────────┬───────────┘ ║░
|
||||
║ │ ║░
|
||||
║ ▼ ║░
|
||||
║ ┌───────────────────────┐ ║░
|
||||
║ │ Execute Action │ ║░
|
||||
║ └───────────────────────┘ ║░
|
||||
║ ║░
|
||||
╚════════════════════════════════════════════════╝░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░`,
|
||||
|
||||
dataFlow: ` ╔═ Data Pipeline ═════════════════════════════╗
|
||||
╔═══════════╗ ║ ║░
|
||||
║ ║░ ║ ┏━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━┓ ║░
|
||||
║ Input ║░────────────║─▶┃ Process ┃────▶┃ Transform ┃ ║░
|
||||
║ ║░ ║ ┗━━━━━━━━━━━┛ ┗━━━━━━━┬━━━━━━━━━┛ ║░
|
||||
╚═══════════╝░ ║ │ ║░
|
||||
░░░░░░░░░░░░░ ║ ▼ ║░
|
||||
║ ┌──────────────────┐ ║░
|
||||
║ │ Store (DB) │ ║░
|
||||
║ └──────────────────┘ ║░
|
||||
║ ║░
|
||||
╚═════════════════════════════════════════════╝░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░`,
|
||||
|
||||
microservices: ` ╔═ Microservices Architecture ════════════════════╗
|
||||
╔═══════════╗ ║ ║░
|
||||
║ ║░ ║ ┌─────────────────────────────────────┐ ║░
|
||||
║ Client ║░────API─────║─▶│ API Gateway │ ║░
|
||||
║ ║░ ║ └──────────┬──────────────┬───────────┘ ║░
|
||||
╚═══════════╝░ ║ │ │ ║░
|
||||
░░░░░░░░░░░░░ ║ ▼ ▼ ║░
|
||||
║ ┏━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━┓ ║░
|
||||
║ ┃ Service A ┃ ┃ Service B ┃ ║░
|
||||
║ ┗━━━━━━┬━━━━━━┛ ┗━━━━━━┬━━━━━━┛ ║░
|
||||
║ │ │ ║░
|
||||
║ └────────┬────────┘ ║░
|
||||
║ ▼ ║░
|
||||
║ ┌─────────────────┐ ║░
|
||||
║ │ Database │ ║░
|
||||
║ └─────────────────┘ ║░
|
||||
╚══════════════════════════════════════════════╝░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░`,
|
||||
|
||||
simpleFlow: `╔════════════╗ ╔════════════╗ ╔════════════╗
|
||||
║ ║░ ║ ║░ ║ ║░
|
||||
║ Step 1 ║░───▶║ Step 2 ║░───▶║ Step 3 ║░
|
||||
║ ║░ ║ ║░ ║ ║░
|
||||
╚════════════╝░ ╚════════════╝░ ╚════════════╝░
|
||||
░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░`,
|
||||
|
||||
infrastructureLayer: ` ╔═ plano ════════════════════════════════════════╗
|
||||
╔═══════════╗ ║ ║░
|
||||
║ ║░ ║ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ║░
|
||||
║ client ║░─────────║─▶┃ Safety Guardrails ┃ ║░
|
||||
║ ║░ ║ ┃ ┃ ║░
|
||||
╚═══════════╝░ ║ ┗━━━━━━━━━━━━━━━┬━━━━━━━━━━━━━━━━━━━━━━━┛ ║░
|
||||
░░░░░░░░░░░░░ ║ │ ║░
|
||||
║ ▼ ║░
|
||||
║ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ║░
|
||||
║ ┃ Multi-Agent Workflows ┃ ║░
|
||||
║ ┗━━━━━━━━━━━━━━━┬━━━━━━━━━━━━━━━━━━━━━━━┛ ║░
|
||||
║ │ ║░
|
||||
║ ▼ ║░
|
||||
║ ┌───────────────────────────────┐ ║░
|
||||
║ │ Unified LLM Access │ ║░
|
||||
║ └───────────────────────────────┘ ║░
|
||||
║ ║░
|
||||
╚════════════════════════════════════════════════╝░
|
||||
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░`,
|
||||
};
|
||||
|
||||
export type DiagramKey = keyof typeof diagrams;
|
||||
Loading…
Add table
Add a link
Reference in a new issue