Skip to content

Commit

Permalink
Feat/add multiple stacks (#571)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginifizz
ginifizz committed Sep 18, 2024
1 parent 6f51ac8 commit 6da26fe
Show file tree
Hide file tree
Showing 31 changed files with 3,113 additions and 404 deletions.
8 changes: 6 additions & 2 deletions pwa/.vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
{
"typescript.tsdk": "node_modules/.pnpm/typescript@4.8.3/node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
"typescript.enablePromptUseWorkspaceTsdk": true,
"tailwindCSS.experimental.configFile": {
"common.tailwind.config.js": ["app/(common)/**/*", "components/**/*"],
"con.tailwind.config.js": ["app/(con)/**/*", "components/con/**/*"]
}
}
56 changes: 0 additions & 56 deletions pwa/app/(common)/components/Cover.tsx
View file

This file was deleted.

252 changes: 9 additions & 243 deletions pwa/app/(common)/components/Timeline.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,257 +1,23 @@
"use client";

import { useSearchParams } from "next/navigation";
import classNames from "classnames";
import styles from "./Timeline.module.css";
import InstallCode from "./timeline/Install.mdx";
import ExposeCode from "./timeline/Expose.mdx";
import PlugCode from "./timeline/Plug.mdx";
import NativeCode from "./timeline/Native.mdx";
import CodeBlock from "./timeline/CodeBlock";
import StepContent from "./timeline/StepContent";
import TimelineStepTitle from "./timeline/TimelineStepTitle";
import ListPoint from "./timeline/ListPoint";
import Link from "components/common/Link";
import TimelineSymfony from "./timeline/TimelineSymfony";
import TimelinePhp from "./timeline/TimelinePhp";
import TimelineLaravel from "./timeline/TimelineLaravel";

export default function Timeline() {
const searchParams = useSearchParams();
const stack = searchParams.get("s");
return (
<div
className={classNames(
"w-full ml-auto mt-4 relative border-dotted border-l-blue pt-8 | sm:pt-20 sm:border-l-2 sm:text-left md:w-1/2",
styles.timeline
)}
>
<div className="relative dark:bg-blue-black">
<TimelineStepTitle step={1}>Install the framework</TimelineStepTitle>
<StepContent>
Install Docker and optionally GitHub CLI.
<CodeBlock title="Install">
<InstallCode />
</CodeBlock>
</StepContent>
<StepContent className="sm:mt-32">
<p className="font-semibold text-blue text-2xl mb-4 leading-tight">
Your development environment is ready!{" "}
</p>
Continuous integration (GitHub Action) as well as recipes to deploy in
production with{" "}
<Link
href="/docs/deployment/docker-compose/#deploying-with-docker-compose"
prefetch={false}
className="link"
>
Docker Compose
</Link>{" "}
or{" "}
<Link
href="/docs/deployment/kubernetes/"
className="link"
prefetch={false}
>
Kubernetes
</Link>{" "}
are also pre-installed.
</StepContent>
<TimelineStepTitle step={2}>
Define the resources
<span className="block text-xl normal-case">
as PHP classes, or using OpenAPI
</span>
</TimelineStepTitle>
<StepContent>
<CodeBlock title="Define the resources to expose">
<ExposeCode />
</CodeBlock>
You get:
<ul className="mt-8 mb-16">
<ListPoint>
A stable <strong>state-of-the-art</strong>{" "}
<Link
href="/docs/distribution/#introduction"
prefetch={false}
className="link"
>
REST
</Link>{" "}
&{" "}
<Link
href="/docs/core/graphql/"
prefetch={false}
className="link"
>
GraphQL
</Link>{" "}
API
</ListPoint>
<ListPoint>
<strong>Automatic documentation</strong>{" "}
<Link
href="/docs/core/openapi/"
prefetch={false}
className="link"
>
OpenAPI
</Link>
, SwaggerUI, GraphiQL...
</ListPoint>
<ListPoint>
Support for <strong>standards</strong> and formats{" "}
<Link
href="/docs/core/extending-jsonld-context/#jsonld"
prefetch={false}
className="link"
>
JSON-LD
</Link>
,{" "}
<Link
href="/docs/core/extending-jsonld-context/#hydra"
prefetch={false}
className="link"
>
Hydra
</Link>
, JSON:API
</ListPoint>
</ul>
<p>
Alternatively,{" "}
<Link
href="/docs/schema-generator"
prefetch={false}
className="link"
>
generate the classes from an existing RDF vocabulary
</Link>
.
<br />
<br /> API Platform automatically exposes production-grade{" "}
<strong>
<Link
className="link"
href="/docs/distribution/#a-bookshop-api"
prefetch={false}
>
HATEOAS
</Link>
</strong>{" "}
API for you!
</p>
</StepContent>
<TimelineStepTitle step={3}>
Plug your business & persistence logic
</TimelineStepTitle>
<StepContent withPoint={false}>
<CodeBlock title="Plug your logic">
<PlugCode />
</CodeBlock>
<p className="mt-6 sm:mt-0">
The framework has been designed from the ground up to be usable from
Rapid Application Development contexts to{" "}
<Link className="link" href="/docs/core/design/" prefetch={false}>
Domain-Driven Design
</Link>{" "}
or Clean Architecture-like approaches.
</p>
<p className="mb-4 sm:mb-24">You can even mix both approaches!</p>
</StepContent>
<StepContent>
<p className="font-semibold text-blue text-2xl mb-4 leading-tight">
...or use the native integration with popular persistence libraries!
</p>
<CodeBlock title="Native integration">
<NativeCode />
</CodeBlock>
<br />
<p>
API Platform can automatically{" "}
<Link
className="link"
href="/docs/core/state-providers/#state-providers"
prefetch={false}
>
retrieve
</Link>
,{" "}
<Link
className="link"
href="/docs/core/state-processors/"
prefetch={false}
>
persist
</Link>
,{" "}
<Link
href="/docs/core/pagination"
prefetch={false}
className="link"
>
paginate
</Link>{" "}
and{" "}
<Link
href="/docs/core/validation"
prefetch={false}
className="link"
>
validate
</Link>{" "}
data using the most popular database systems.
</p>
<p>
<Link
href="/docs/distribution/#plugging-the-persistence-system"
prefetch={false}
className="link"
>
PostgreSQL
</Link>
,{" "}
<Link href="/docs/core/mongodb/" prefetch={false} className="link">
MongoDB
</Link>
,{" "}
<Link
href="/docs/core/elasticsearch/#elasticsearch-support"
prefetch={false}
className="link"
>
ElasticSearch
</Link>
, SQLite, MySQL, MariaDB, SQL Server and Oracle are supported{" "}
<Link href="/docs/core/state-providers/#state-providers">
out of the box
</Link>
.
</p>
</StepContent>
<StepContent className="sm:mt-24">
<p className="font-semibold text-blue text-2xl leading-tight">
You can also make your own{" "}
<Link
href="/docs/core/state-processors/"
prefetch={false}
className="link"
>
persistence system
</Link>
!
</p>
</StepContent>
<TimelineStepTitle step={4}>Customize!</TimelineStepTitle>
<StepContent withPoint={false}>
<p>
Customize every single behavior thanks to our carefully designed
<Link
href="/docs/core/extending/"
prefetch={false}
className="link"
>
{" "}
extension points
</Link>
.
</p>
<br />
</StepContent>
</div>
{stack === "laravel" ? <TimelineLaravel />: stack === "symfony" ? <TimelineSymfony /> : <TimelinePhp />}
</div>
);
}
53 changes: 53 additions & 0 deletions pwa/app/(common)/components/cover/Cover.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
"use client";
import { useSearchParams } from "next/navigation";
import Button from "components/common/Button";
import Logo from "components/common/Logo";
import classNames from "classnames";
import CoverCircleStacks from "./CoverCircleStacks";
import StackSelector from "./StackSelector";

export default function Cover() {
const searchParams = useSearchParams();
const stack = searchParams.get("s");

return (
<div className={classNames("relative bg-blue mb-16 overflow-hidden")}>
<div className="z-50 h-20 md:h-32 absolute -bottom-px left-0 w-full bg-white clip-path-corner-left dark:bg-blue-black 2xl:-bottom-0.5" />
<div
className={classNames(
"container relative h-full pt-12 pb-64 flex flex-col-reverse items-center justify-center text-white dark:text-blue-darkest | md:pb-12 md:min-h-[90vh] | lg:min-h-screen | 2xl:min-h-[850px]"
)}
>
<img
src="/images/web.svg"
alt=""
width={1200}
height={1200}
className="absolute z-10 top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 | md:left-3/4"
/>
<div className="w-full flex h-full z-20 max-w-sm | absolute bottom-0 md:max-w-2xl md:w-3/5 md:self-end md:right-1/2 lg:w-4/5">
<div className="object-contain object-bottom w-full h-full relative">
<CoverCircleStacks />
</div>
</div>
<div className="relative w-full flex flex-col items-center text-center pt-12 pb-12 z-20 | md:pt-0 md:w-7/12 md:ml-auto | lg:w-1/2">
<Logo className="w-full max-w-sm" />
<p className="font-title text-2xl sm:text-3xl my-6 font-semibold">
The API-first framework
</p>
<div className="flex flex-row flex-wrap items-center justify-center">
<StackSelector />
</div>
<Button
color="default"
size="extralarge"
className="bg-blue-dark border-blue-dark mt-6 mb-4 md:mb-0 md:mt-8"
href={stack === "laravel" ? "/docs/laravel" : stack === "symfony" ? "/docs/symfony" : "/docs/core/bootstrap"}
>
Getting started
</Button>
</div>
</div>
</div>
);
}
Loading

0 comments on commit 6da26fe

Please sign in to comment.