Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: add multiple stacks #568

Closed
wants to merge 8 commits into from
Closed

Feat: add multiple stacks #568

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6f51ac8
fix: remove outline on schedule anchors
ginifizz Sep 17, 2024
5be0cf8
feat: add multiple stacks on cover
ginifizz Sep 6, 2024
71cd28b
feat: fix responsive with stack selector
ginifizz Sep 9, 2024
a5f4132
feat: add choice webby and remove php on selector
ginifizz Sep 11, 2024
7e8d9f1
feat: add timeline for laravel
ginifizz Sep 12, 2024
f055335
feat: chance stack selector
ginifizz Sep 16, 2024
73c9cbd
feat: add php timeline
ginifizz Sep 16, 2024
82a6384
feat: add links on getting started button
ginifizz Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions pwa/.vscode/settings.json
View file
Open in desktop
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
Open in desktop

This file was deleted.

252 changes: 9 additions & 243 deletions pwa/app/(common)/components/Timeline.tsx
View file
Open in desktop
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
Open in desktop
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
Loading