Skip to content

Commit

Permalink
docs: styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonraimondi
jasonraimondi committed Jul 3, 2024
1 parent 4b11f82 commit 879f438
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 43 deletions.
156 changes: 114 additions & 42 deletions docs/src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import ExampleRepositories from "./_example_repositories.mdx";
import ExampleAuthorizationServer from "./_example_authorization_server.mdx";
import WhichGrant from "./_which_grant.mdx";
import MarkdownWrapper from "@site/src/components/MarkdownWrapper";
import { LinkIcon } from "lucide-react";
import { CheckCircleIcon, LinkIcon } from "lucide-react";
import { Contributors } from "@site/src/components/Contributors";
import { Sponsors } from "@site/src/components/Sponsors";

Expand Down Expand Up @@ -42,8 +42,7 @@ export function NPMLogo() {
className="fill-current"
viewBox="0 0 18 7"
>
<path
d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z" />
<path d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z" />
<polygon fill="transparent" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 " />
<path fill="transparent" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z" />
<polygon
Expand Down Expand Up @@ -83,13 +82,99 @@ function HeroButton({ href, children }) {
);
}

function FeatureListItem({ to, title }) {
return (
<li key={to} className="-ml-2">
<a
className="font-medium py-2 px-4 text-[--ifm-color-primary] hover:text-[--ifm-color-primary] block"
href={to}
>
<small className="max-w-4 inline-block mr-2">
<CheckCircleIcon className="h-full w-full relative top-1/2" />
</small>
{title}
</a>
</li>
);
}

function Features() {
const grants = [
{
to: "/docs/grants/authorization_code",
title: "Authorization code grant",
},
{
to: "/docs/grants/client_credentials",
title: "Client credentials grant",
},
{
to: "/docs/grants/refresh_token",
title: "Refresh grant",
},
{
to: "/docs/grants/implicit",
title: "Implicit grant (not recommended)",
},
{
to: "/docs/grants/password",
title: "Resource owner password credentials grant (not recommended)",
},
];

const rfcs = [
{
to: "https://tools.ietf.org/html/rfc6749",
title: `RFC6749 "OAuth 2.0"`,
},
{
to: "https://tools.ietf.org/html/rfc6750",
title: `RFC6750 "The OAuth 2.0 Authorization Framework: Bearer Token Usage`,
},
{
to: "https://tools.ietf.org/html/rfc7009",
title: `RFC7009 "OAuth 2.0 Token Revocation"`,
},
{
to: "https://tools.ietf.org/html/rfc7519",
title: `RFC7519 "JSON Web Token (JWT)"`,
},
{
to: "https://tools.ietf.org/html/rfc7636",
title: `RFC7636 "Proof Key for Code Exchange by OAuth Public Clients"`,
},
{
to: "https://datatracker.ietf.org/doc/html/rfc8693",
title: `RFC8693 "OAuth 2.0 Token Exchange"`,
},
];

return (
<div className="pt-14 w-full max-w-4xl mx-auto prose prose-lg grid grid-cols-2 gap-4">
<div>
<h3>Supported Grants</h3>
<ul className="list-none pl-0 flex flex-col gap-2">
{grants.map(({ to, title }) => {
return <FeatureListItem key={to} to={to} title={title} />;
})}
</ul>
</div>
<div>
<h3>Implemented RFCs</h3>
<ul className="list-none pl-0 flex flex-col gap-2">
{rfcs.map(({ to, title }) => {
return <FeatureListItem key={to} to={to} title={title} />;
})}
</ul>
</div>
</div>
);
}

export default function Home() {
const { siteConfig } = useDocusaurusContext();
return (
<Layout
title={`@jmondi/oauth2-server`}
description={siteConfig.tagline}
>
<Layout title={`@jmondi/oauth2-server`} description={siteConfig.tagline}>
<header className="text-white bg-gradient-to-br from-[--ifm-color-primary] to-[--ifm-color-primary-darkest]">
<div className="container py-14 md:py-24">
<div className="flex items-center justify-center gap-6">
Expand All @@ -112,34 +197,7 @@ export default function Home() {
</div>
</header>

<div className="pt-14 w-full max-w-4xl mx-auto prose prose-lg grid grid-cols-2 gap-4">
<div>
<h3>Supported Grants</h3>
<ul className="list-inside">
<li><a href="/docs/grants/authorization_code">Authorization code grant</a></li>
<li><a href="/docs/grants/client_credentials">Client credentials grant</a></li>
<li><a href="/docs/grants/refresh_token">Refresh grant</a></li>
<li><a href="/docs/grants/implicit">Implicit grant</a> // not recommended</li>
<li><a href="/docs/grants/password">Resource owner password credentials grant</a> // not recommended</li>
</ul>
</div>
<div>
<h3>Implemented RFCs</h3>
<ul className="list-inside">
<li><a href="https://tools.ietf.org/html/rfc6749">RFC6749 "OAuth 2.0"</a></li>
<li><a href="https://tools.ietf.org/html/rfc6750">RFC6750 "The OAuth 2.0 Authorization Framework: Bearer
Token
Usage"</a></li>
<li><a href="https://tools.ietf.org/html/rfc7009">RFC7009 "OAuth 2.0 Token Revocation"</a></li>
<li><a href="https://tools.ietf.org/html/rfc7519">RFC7519 "JSON Web Token (JWT)"</a></li>
<li><a href="https://tools.ietf.org/html/rfc7636">RFC7636 "Proof Key for Code Exchange by OAuth Public
Clients"</a>
</li>
<li><a href="https://datatracker.ietf.org/doc/html/rfc8693">RFC8693 "OAuth 2.0 Token Exchange"</a></li>
</ul>
</div>
</div>

<Features />

<div className="pt-14">
<div className="flex justify-center gap-14">
Expand Down Expand Up @@ -174,9 +232,15 @@ export default function Home() {
</div>

<div className="py-14">
<h3 className="text-center text-2xl font-semibold">Entities and Repositories <a
href="docs/getting_started/entities"><LinkIcon className="w-4" /></a><a
href="docs/getting_started/repositories"><LinkIcon className="w-4" /></a></h3>
<h3 className="text-center text-2xl font-semibold">
Entities and Repositories{" "}
<a href="docs/getting_started/entities">
<LinkIcon className="w-4" />
</a>
<a href="docs/getting_started/repositories">
<LinkIcon className="w-4" />
</a>
</h3>
<div className="grid grid-cols-2 gap-4 py-4">
<div>
<ExampleEntities />
Expand All @@ -186,15 +250,23 @@ export default function Home() {
</div>
</div>
<div>
<h3 className="text-center text-2xl font-semibold">The Authorization Server <a
href="/docs/authorization_server"><LinkIcon className="w-4" /></a></h3>
<h3 className="text-center text-2xl font-semibold">
The Authorization Server{" "}
<a href="/docs/authorization_server">
<LinkIcon className="w-4" />
</a>
</h3>
<ExampleAuthorizationServer />
</div>
</div>

<div className="py-14">
<h3 className="text-center text-2xl font-semibold">Which Grant? <a href="/docs/grants"><LinkIcon
className="w-4" /></a></h3>
<h3 className="text-center text-2xl font-semibold">
Which Grant?{" "}
<a href="/docs/grants">
<LinkIcon className="w-4" />
</a>
</h3>
<WhichGrant />
</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/static/img/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 879f438

Please sign in to comment.