Skip to content

Commit

Permalink
feat: add timeline for laravel
Browse files Browse the repository at this point in the history
  • Loading branch information
ginifizz authored and soyuka committed Sep 13, 2024
1 parent f6b935e commit 2aa4acd
Show file tree
Hide file tree
Showing 16 changed files with 1,241 additions and 735 deletions.
251 changes: 8 additions & 243 deletions pwa/app/(common)/components/Timeline.tsx
Original file line number Diff line number Diff line change
@@ -1,257 +1,22 @@
"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 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 />: <TimelineSymfony />}
</div>
);
}
2 changes: 1 addition & 1 deletion pwa/app/(common)/components/cover/CoverCircleStacks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export default function CoverCircleStacks() {
<img
src="/images/cover/symfony-front.svg"
alt=""
className="absolute left-1/2 -translate-x-1/2 top-0 -translate-y-[70%] w-[30%]"
className="absolute left-1/2 -translate-x-1/2 top-0 -translate-y-[65%] w-[40%]"
/>
</div>
<div
Expand Down
35 changes: 29 additions & 6 deletions pwa/app/(common)/components/cover/StackSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@ export default function StackSelector() {
Choose your favorite stack :
</p>
<div className="bg-white px-1 py-1 rounded-[50px] shadow-2xl">
<div className=" text-text-primary grid grid-cols-2 gap-2 h-8 sm:h-10 md:h-12 items-center uppercase font-semibold relative text-[10px] sm:text-sm lg:text-base">
<div className=" text-text-primary grid grid-cols-3 gap-2 h-12 items-center uppercase font-semibold relative text-[10px] sm:text-sm lg:text-base">
<div
className={classNames(
"h-full w-1/2 absolute rounded-[50px] top-1/2 -translate-y-1/2 transition-all duration-500 shadow-lg",
"h-full w-1/3 absolute rounded-[50px] top-1/2 -translate-y-1/2 transition-all duration-500 shadow-lg",
stack === "symfony"
? "left-1/2 bg-[#000]"
? "left-2/3 bg-[#000]"
: stack === "laravel"
? "left-0 bg-[#ff2d20]"
: "opacity-0"
: "left-1/3 bg-blue-extralight"
)}
/>
<button
onClick={() => onStackChoose("laravel")}
className={classNames(
"flex flex-row gap-2 px-2 md:px-3 relative items-center",
"flex flex-row gap-2 px-2 md:px-3 relative items-center justify-center",
stack !== "laravel" ? "text-[#ff2d20]" : "text-white"
)}
>
Expand All @@ -54,10 +54,33 @@ export default function StackSelector() {
</svg>
<span>Laravel</span>
</button>
<button
onClick={() => onStackChoose(undefined)}
className={classNames(
"flex flex-row gap-2 px-2 md:px-3 relative items-center justify-center",
stack ? "opacity-50 text-text-primary/50" : "text-white"
)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636"
/>
</svg>
<span className="text-left text-sm">No preference</span>
</button>
<button
onClick={() => onStackChoose("symfony")}
className={classNames(
"flex flex-row gap-2 px-2 md:px-3 relative items-center",
"flex flex-row gap-2 px-2 md:px-3 relative items-center justify-center",
stack !== "symfony" ? " text-[#000]" : "text-white"
)}
>
Expand Down
Loading

0 comments on commit 2aa4acd

Please sign in to comment.