diff --git a/src/components/landing/content.ts b/src/components/landing/content.ts index f25ba34..c7d941c 100644 --- a/src/components/landing/content.ts +++ b/src/components/landing/content.ts @@ -1,37 +1,37 @@ export const problemPoints = [ - 'Application setup starts from one configuration object, so service wiring is visible before request handling begins.', - 'Routes, middleware, validation, static files, and event subscribers are registered through the same service shape.', - 'Security, testing, serialization, password helpers, and request-scoped state stay available as focused framework utilities.', - 'New contributors can inspect the same function-first structure before changing backend behavior.', + 'Service setup becomes hard to trust when routes, middleware, assets, and events are wired in different places.', + 'Request behavior is harder to review when validation and security live outside the path a request actually takes.', + 'Shared helpers drift when each service chooses its own approach to testing, passwords, serialization, or request context.', + 'New contributors move slower when they must learn a local framework shape before changing backend behavior.', ] as const; export const ideaPoints = [ - 'Start with application configuration so service setup has one readable entry point.', - 'Compose behavior from functions: routes, middleware, validators, subscribers, and utilities.', - 'Keep request data, response data, and validation rules explicit at the boundary.', - 'Let framework utilities support real backend work without hiding the application flow.', + 'Application configuration declares routes, global middleware, static files, and event subscribers in one place.', + 'Routes, middleware, validators, and subscribers are functions the team can compose and review directly.', + 'Request data, response data, and validation rules stay explicit at the HTTP boundary.', + 'Focused utilities support security, testing, serialization, passwords, static files, and request-scoped state.', ] as const; export const featureItems = [ { title: 'Application configuration', description: - 'Give each service the same starting point: routes, global middleware, static files, and event subscribers declared in configuration.', + 'Declare routes, global middleware, static files, and event subscribers from the application setup.', }, { title: 'Function-first routing', description: - 'Define HTTP methods and paths as route functions that keep backend entry points easy to scan and review.', + 'Define HTTP methods and paths as route functions that keep backend entry points easy to scan.', }, { title: 'Request and response primitives', description: - 'Handle body, query, parameters, headers, status, response body, and response headers through explicit HTTP primitives.', + 'Work with body, query, parameters, headers, status, response body, and response headers directly.', }, { title: 'Validation toolkit', description: - 'Describe input rules with built-in constraints, custom validators, flattened violations, and reusable validation middleware.', + 'Use built-in constraints, custom validators, flattened violations, and reusable validation middleware.', }, { title: 'Security utilities', @@ -46,7 +46,7 @@ export const featureItems = [ { title: 'Testing support', description: - 'Create HTTP test agents from application configuration, including authenticated request scenarios through act-as support.', + 'Create HTTP test agents from application configuration, including authenticated request scenarios.', }, { title: 'Serialization and normalization', @@ -62,64 +62,46 @@ export const featureItems = [ export const proofItems = [ { - value: 'Shape', - label: 'One application configuration for service setup', + value: 'Reviewable', + label: 'Service setup and request flow stay visible in code', }, { - value: 'Functions', - label: 'Routes, middleware, validators, and utilities compose explicitly', + value: 'Composable', + label: 'Routes, middleware, validators, and subscribers are functions', }, { - value: 'Coverage', + value: 'Practical', label: 'HTTP, validation, security, testing, static files, and serialization', }, ] as const; export const modelSteps = [ { - title: 'Give the service one shape', - body: 'Start from create(...) and declare routes, global middleware, static files, and event subscribers in configuration.', + title: 'Start with the application', + body: 'Use create(...) to declare the service entry points before request handling begins.', }, { - title: 'Compose behavior as functions', - body: 'Use function-first routes, middleware, validators, and subscribers so request flow stays visible in code review.', + title: 'Build the request path', + body: 'Compose routes, middleware, validators, and subscribers as plain pieces in the order the service needs.', }, { - title: 'Use utilities where they belong', - body: 'Add security, testing agents, password helpers, serializers, static files, and request-scoped storage when the service needs them.', + title: 'Add focused support', + body: 'Use security, testing, password, serializer, static file, and request-scope utilities without moving behavior out of sight.', }, ] as const; export const gettingStartedSteps = [ { - title: 'Create the project', - body: 'Generate a new application with `npx @koala-ts/cli create my-app` and start from the default structure.', + title: 'Run the quick start', + body: 'Generate a new application with `npx @koala-ts/cli create my-app` and inspect the default structure.', }, { - title: 'Configure and run', - body: 'Set environment values, review the application configuration, install dependencies, and start the server.', + title: 'Read the framework guide', + body: 'Review how configuration, routing, validation, request, and response concepts fit together.', }, { - title: 'Add backend behavior', - body: 'Register a function-first route, add validation or middleware where needed, and build from the documented request and response model.', - }, -] as const; - -export const architectureCards = [ - { - title: 'Application setup stays explicit', - description: - 'Routes, global middleware, static files, and event subscribers are registered through configuration instead of scattered setup code.', - }, - { - title: 'Functional composition stays practical', - description: - 'Routes, middleware, validators, and utilities remain plain pieces that can be composed, reviewed, tested, and refactored.', - }, - { - title: 'Framework utilities stay focused', - description: - 'Validation, security, password hashing, testing, and serialization solve specific service needs without taking over application code.', + title: 'Apply it to a service', + body: 'Register a route, add validation or middleware where needed, and keep the change easy to review.', }, ] as const; diff --git a/src/components/landing/landing.module.css b/src/components/landing/landing.module.css index 301b20c..80b1e9c 100644 --- a/src/components/landing/landing.module.css +++ b/src/components/landing/landing.module.css @@ -375,7 +375,7 @@ .featureGrid { display: grid; gap: 1rem; - grid-template-columns: repeat(5, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, 1fr)); } .featureCardTitle { @@ -441,34 +441,6 @@ line-height: 1.7; } -.architectureGrid { - display: grid; - gap: 1.25rem; - grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr); -} - -.architectureCardGrid { - display: grid; - gap: 1rem; -} - -.architectureList { - display: grid; - gap: 0.85rem; - margin: 1.25rem 0 0; - padding: 0; - list-style: none; -} - -.architectureList li { - color: rgba(255, 255, 255, 0.76); - line-height: 1.7; -} - -.architectureDetailCard { - min-height: 0; -} - .stepsGrid { display: grid; gap: 1rem; @@ -501,12 +473,12 @@ } .ctaSection { - padding-top: 1rem; + padding-top: 0; padding-bottom: 6rem; } .ctaCard { - padding: 2.6rem; + padding: 2.35rem; text-align: center; background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent 34%), @@ -521,7 +493,7 @@ max-width: 48rem; margin: 0 auto; color: #0b0f14; - font-size: clamp(2rem, 4vw, 3.2rem); + font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; } @@ -536,7 +508,6 @@ .heroGrid, .splitGrid, .modelGrid, - .architectureGrid, .stepsGrid { grid-template-columns: 1fr; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3356ec4..42871c4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -8,7 +8,6 @@ import {CodeExampleTabs} from '@site/src/components/landing/CodeExampleTabs'; import {Container} from '@site/src/components/landing/Container'; import {Section} from '@site/src/components/landing/Section'; import { - architectureCards, codeTabs, featureItems, gettingStartedSteps, @@ -40,13 +39,12 @@ export default function Home(): React.JSX.Element {

KoalaTs for backend teams

- Function-first TypeScript backends with one readable shape + TypeScript services your team can read the same way

- KoalaTs gives Node teams a consistent service model: configure - the application once, compose backend behavior from explicit - functions, and use framework utilities for the work that every - backend service usually needs. + KoalaTs gives Node teams a function-first backend framework + with visible service wiring, explicit request handling, and + framework utilities for the work every service has to repeat.

@@ -60,7 +58,7 @@ export default function Home(): React.JSX.Element {

Function-first flow

- One service shape from setup to response + From application setup to HTTP response

Function-first @@ -72,25 +70,22 @@ export default function Home(): React.JSX.Element {
01

Config

-

Register routes, middleware, static files, and events.

+

Declare the service entry points before requests run.

02

Pipeline

-

Apply validation, security, and request flow concerns.

+

Put validation and security where reviewers can see it.

03

Handler

-

Run application behavior with explicit HTTP primitives.

+

Handle request data and response data directly.

04

Utilities

-

- Use testing, serialization, passwords, and request scope - when needed. -

+

Reach for focused helpers without hiding the flow.

@@ -114,19 +109,19 @@ export default function Home(): React.JSX.Element {
 
           

- Consistency works best when the code still reads plainly. + The framework should make the common path visible.

- KoalaTs keeps the common path explicit: configure the - service, compose behavior from functions, and keep the request - and response model visible enough for the team to review. + KoalaTs is built for teams that want backend conventions to be + easy to inspect in code review, not hidden behind local + patterns that differ from project to project.

@@ -142,15 +137,15 @@ export default function Home(): React.JSX.Element {

- The framework shape is deliberately simple: one application - configuration, function-first routes and middleware, explicit - HTTP primitives, and focused utilities that support the - service without hiding the flow. + KoalaTs keeps the service model practical: application + configuration defines the entry points, routes and middleware + stay as functions, HTTP state stays visible at the boundary, + and utilities solve specific backend jobs.

    {ideaPoints.map((point) => ( @@ -173,7 +168,7 @@ export default function Home(): React.JSX.Element {
    {featureItems.map((item) => ( @@ -189,49 +184,15 @@ export default function Home(): React.JSX.Element { id="code-examples" eyebrow="Examples" title="Start from the application, then follow the functions" - description="The examples move in the same order as the framework story: create the app, register a route, and compose validation as middleware." + description="The examples follow the same path a reviewer follows: application setup, route behavior, then validation middleware." >
    -
    -
    - -

    - KoalaTs keeps architecture close to the code: setup is - configuration, request flow is middleware, backend behavior is - composed from functions, and supporting utilities stay in - their lane. The result is a service shape the team can discuss - and change without decoding hidden framework state. -

    -
      -
    • Application setup remains visible in configuration.
    • -
    • Routes, middleware, and validators compose as functions.
    • -
    • Security, testing, and serialization stay focused.
    • -
    -
    -
    - {architectureCards.map((card) => ( - -

    {card.title}

    -

    {card.description}

    -
    - ))} -
    -
    -
    -
    {gettingStartedSteps.map((step, index) => ( @@ -247,13 +208,11 @@ export default function Home(): React.JSX.Element {

    - Build the first function-first service your team can reuse + Try the service shape or read the model first

    - Use the quick start to create a running KoalaTs application, or - read the framework guide to understand the application - configuration, function-first routing, validation, request, and - response model before you build. + Use the quick start to create a running service, or read the + framework guide before you bring the pattern to a team codebase.