Skip to content

Commit

Permalink
chore(docs): clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
DuCanhGH committed May 5, 2024
1 parent 6c1924c commit 6407095
Show file tree
Hide file tree
Showing 25 changed files with 106 additions and 176 deletions.
2 changes: 1 addition & 1 deletion docs/public/manifest.webmanifest
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "https://json.schemastore.org/web-manifest",
"name": "The PWA Plugin for Next.js",
"short_name": "Next PWA",
"short_name": "next-pwa",
"theme_color": "#171717",
"background_color": "#171717",
"display": "fullscreen",
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/(home)/components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export const CodeShowcase = ({
const [code, ...others] = children;
return (
<div className="flex w-full flex-col gap-4 py-4 md:flex-row md:gap-24 md:py-10">
<div className={clsx(invert && "md:order-last", "overflow-hidden md:flex-[3_3_0] [&>span]:mt-0")}>{others}</div>
<div className="overflow-hidden md:flex-[2_2_0]">{code}</div>
<div className={clsx(invert && "md:order-last", "overflow-hidden md:flex-[2_2_0] [&>span]:mt-0")}>{others}</div>
<div className="overflow-hidden md:flex-[3_3_0]">{code}</div>
</div>
);
};
33 changes: 0 additions & 33 deletions docs/src/app/(home)/constants.ts

This file was deleted.

37 changes: 11 additions & 26 deletions docs/src/app/(home)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { clsx } from "@/utils/clsx.js";

import { rehypePlugins, remarkPlugins } from "../../../contentlayer.constants.js";
import { CodeShowcase } from "./components.js";
import { FEATURES_LIST } from "./constants.js";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

Expand All @@ -33,23 +32,28 @@ const Page = async () => {
const RenderedCodeShowcase = getMDXComponent(compiledText.code);

return (
<div className={clsx("w-full self-stretch", "bg-white text-black dark:bg-black dark:text-white", inter.className)}>
<div className="flex w-full flex-col items-center justify-center gap-5 px-5 py-40">
<div
className={clsx(
"w-full self-stretch flex flex-col bg-white text-black dark:bg-black dark:text-white [&>div]:max-w-screen-lg [&>div]:md:self-center",
inter.className,
)}
>
<div className="flex w-full flex-col gap-5 px-24 py-40">
<h1
className={clsx(
"my-2 text-balance text-center text-5xl font-extrabold tracking-tight",
"my-2 text-5xl font-extrabold tracking-tight",
"bg-gradient-to-t from-neutral-500 to-black bg-clip-text text-transparent dark:from-neutral-400 dark:to-white",
)}
>
Make performant web apps with Next.js & PWA.
Create progressive web apps with Next.js.
</h1>
<h2 className="my-2 text-balance text-center text-2xl font-medium tracking-tight opacity-80">
<h2 className="my-2 text-2xl font-medium tracking-tight opacity-80">
<InlineCode>next-pwa</InlineCode> enables you to create PWAs with Next.js. No configuration needed, yet so configurable.
</h2>
<Link
href="/docs/next-pwa/getting-started"
className={clsx(
"rounded-md border px-6 py-3 font-bold transition-colors duration-100",
"rounded-md border px-6 py-3 font-bold transition-colors duration-100 w-fit",
"bg-black text-white dark:bg-white dark:text-black",
"hover:border-black hover:bg-white hover:text-black",
"hover:dark:border-white hover:dark:bg-black hover:dark:text-white",
Expand All @@ -58,25 +62,6 @@ const Page = async () => {
>
Get started
</Link>
<InlineCode>npx create-next-app -e https://github.com/DuCanhGH/next-pwa/tree/master/examples/basic</InlineCode>
</div>
<div className="w-full p-4 md:p-24">
<div className="grid w-full text-left lg:mb-0 lg:grid-cols-4 lg:gap-2">
{FEATURES_LIST.map((feature, idx) => (
<div
key={`homepage-feature-lists-${idx}`}
className={clsx(
"rounded-lg border border-transparent px-5 py-4 transition-colors",
"hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-800 hover:dark:bg-neutral-800/30",
)}
>
<h2 className="mb-3 text-2xl font-semibold">
{feature.icon} {feature.label}
</h2>
<p className="m-0 max-w-[30ch] text-sm opacity-80">{feature.description}</p>
</div>
))}
</div>
</div>
<div className="w-full p-4 md:p-24">
<RenderedCodeShowcase
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/docs/SidebarClient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { IconChevronRight } from "@tabler/icons-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { type ReactNode, useEffect, useRef, useState, type DetailedHTMLProps, type AnchorHTMLAttributes } from "react";
import { type AnchorHTMLAttributes, type DetailedHTMLProps, type ReactNode, useEffect, useRef, useState } from "react";

import { clsx } from "@/utils/clsx.js";

Expand Down
6 changes: 3 additions & 3 deletions docs/src/app/docs/[[...slug]]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { allDocs } from "contentlayer/generated";
import { getMDXComponent } from "next-contentlayer/hooks";
import { notFound } from "next/navigation";

import { TocProvider } from "@/shared/TocContext";
import { GITHUB_REPO_URL } from "@/shared/constants.js";
import { tocHeadingMdxComponents, tocMdxComponents } from "@/shared/mdxComponents.js";
import type { GenerateMetadata, PageComponent } from "@/shared/types.js";
import { clsx } from "@/utils/clsx.js";
import { TocProvider } from "@/shared/TocContext";

export const generateStaticParams = async () => allDocs.map((post) => ({ slug: post._raw.flattenedPath.split("/") }));

Expand Down Expand Up @@ -36,7 +36,7 @@ const PostLayout: PageComponent = async ({ params }) => {
<div className="sticky top-16 flex max-h-[calc(100vh-100px)] flex-col hyphens-auto pr-4 pt-6 text-sm ltr:-mr-4 rtl:-ml-4">
<p className="mb-4 font-semibold tracking-tight text-black dark:text-white">On This Page</p>
<div className="w-full self-stretch overflow-y-auto">
<TableOfContents components={tocMdxComponents} />
<TableOfContents components={tocMdxComponents} />
</div>
<div className={clsx("sticky bottom-0 mt-8 flex flex-col items-start gap-2 border-t pb-8 pt-8", "dark:border-neutral-800")}>
<a href={`${GITHUB_REPO_URL}/issues/new/choose`} target="_blank" rel="noreferrer" className="text-toc">
Expand All @@ -49,7 +49,7 @@ const PostLayout: PageComponent = async ({ params }) => {
</div>
</nav>
<article className="w-full min-w-0 md:py-8">
<div className="w-full min-w-0 max-w-6xl px-6 py-4 md:px-12">
<div className="w-full min-w-0 max-w-6xl px-6 py-4 md:px-12 flex flex-col">
<Content components={tocHeadingMdxComponents} />
</div>
</article>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/docs/not-found.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Heading } from "@/components/Heading.js";

const NotFound = () => <Heading type="title">Page not found.</Heading>;
const NotFound = () => <Heading type="h2">Page not found.</Heading>;

export default NotFound;
2 changes: 1 addition & 1 deletion docs/src/app/docs/opengraph-image.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { generateOGImage } from "@/utils/generateOGImage.js";

export const alt = "Next PWA - Docs";
export const alt = "next-pwa - Docs";
export const size = {
width: 1200,
height: 600,
Expand Down
34 changes: 34 additions & 0 deletions docs/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,19 @@ html[data-theme="dark"] .shiki span:not([class^="twoslash-"]) {
body {
@apply box-border bg-neutral-50 transition-colors duration-100 dark:bg-neutral-950;
}
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
@apply text-balance break-words;
}
p,
video {
@apply my-3;
}

details > summary {
@apply cursor-pointer select-none list-none;
Expand Down Expand Up @@ -66,6 +79,27 @@ html[data-theme="dark"] .shiki span:not([class^="twoslash-"]) {
.text-toc.active {
@apply xl:text-primary-light xl:dark:text-primary-dark;
}
.text-comment {
@apply text-neutral-600 dark:text-neutral-400;
}
.heading.h1 {
@apply text-4xl font-semibold leading-10 tracking-tight mb-6;
}
.heading.h2 {
@apply text-3xl font-semibold leading-10 tracking-tight mb-3 mt-6;
}
.heading.h3 {
@apply text-2xl font-semibold leading-7 tracking-tight my-3;
}
.heading.h4 {
@apply text-xl font-medium leading-5 tracking-tight my-3;
}
.heading.default {
@apply text-black dark:text-white;
}
.heading.error {
@apply text-red-500 dark:text-red-400;
}
}

@media (prefers-reduced-motion) {
Expand Down
14 changes: 7 additions & 7 deletions docs/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,27 @@ export const metadata: Metadata = {
},
referrer: "no-referrer",
title: {
default: "Next PWA",
template: "%s - Next PWA",
default: "next-pwa",
template: "%s - next-pwa",
},
description: "Make performant web apps with Next.js & PWA.",
applicationName: "Next PWA",
applicationName: "next-pwa",
manifest: "/manifest.webmanifest",
authors: [{ name: "DuCanhGH", url: "https://github.com/DuCanhGH/" }],
keywords: "react, pwa, service-worker, progressive-web-app, nextjs, next.js, workbox",
openGraph: {
type: "website",
title: {
default: "Next PWA",
template: "%s - Next PWA",
default: "next-pwa",
template: "%s - next-pwa",
},
description: "Make performant web apps with Next.js & PWA.",
},
twitter: {
card: "summary_large_image",
title: {
default: "Next PWA",
template: "%s - Next PWA",
default: "next-pwa",
template: "%s - next-pwa",
},
description: "Make performant web apps with Next.js & PWA.",
},
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/opengraph-image.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { generateOGImage } from "@/utils/generateOGImage.js";

export const alt = "Next PWA";
export const alt = "next-pwa";
export const size = {
width: 1200,
height: 600,
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/~offline/ReloadButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Heading } from "@/components/Heading";
export const ReloadButton = () => {
return (
<button onClick={() => window.location.reload()} className="ml-2 [&>span]:!my-0" type="button">
<Heading type="subtitle">Try reloading?</Heading>
<Heading type="h4">Try reloading?</Heading>
</button>
);
};
2 changes: 1 addition & 1 deletion docs/src/app/~offline/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { ReloadButton } from "./ReloadButton.js";
const Page = () => {
return (
<div className="flex w-full items-center justify-center self-stretch">
<Heading type="title-large">offline. </Heading>
<Heading type="h2">offline.</Heading>
<ReloadButton />
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions docs/src/components/ActiveBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import type { DetailedHTMLProps, HTMLAttributes } from "react";

import { clsx } from "@/utils/clsx";

const baseActiveBoxClassName = "items-center justify-between gap-2 text-left w-full flex rounded text-sm transition-colors [word-break:break-word] font-medium";
const hoverActiveBoxClassName =
"text-black dark:text-white hover:bg-neutral-200 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white";
const baseActiveBoxClassName =
"items-center justify-between gap-2 text-left w-full flex rounded text-sm transition-colors [word-break:break-word] font-medium";
const hoverActiveBoxClassName = "text-black dark:text-white hover:bg-neutral-200 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white";
const activeActiveBoxClassName = "bg-neutral-200 text-black dark:bg-neutral-800 dark:text-white";

export interface ActiveBoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
Expand Down
4 changes: 1 addition & 3 deletions docs/src/components/GitHubLogo.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import type { SVGProps } from "react";

export const GitHubLogo = (
props: Omit<SVGProps<SVGElement>, "ref" | "viewBox" | "xmlns">
) => (
export const GitHubLogo = (props: Omit<SVGProps<SVGElement>, "ref" | "viewBox" | "xmlns">) => (
<svg fill="currentColor" viewBox="3 3 18 18" {...props}>
<title>GitHub</title>
<path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z" />
Expand Down
49 changes: 7 additions & 42 deletions docs/src/components/Heading.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,19 @@
import type { DetailedHTMLProps, ElementType, HTMLAttributes } from "react";
import type { DetailedHTMLProps, HTMLAttributes } from "react";
import { forwardRef } from "react";
import { twMerge } from "tailwind-merge";

import { clsx } from "@/utils/clsx.js";

export interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> {
export interface HeadingProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "className"> {
variant?: "default" | "error";
type?: "subtitle" | "title" | "title-large" | "display";
type?: "h4" | "h3" | "h2" | "h1";
isInSatori?: boolean;
}

const mapTypeToComponent: Record<
NonNullable<HeadingProps["type"]>,
{
element: ElementType;
className?: string;
}
> = {
subtitle: {
element: "h4",
className: "font-semibold tracking-tight my-8 text-xl",
},
title: {
element: "h3",
className: "font-semibold tracking-tight my-8 text-2xl",
},
"title-large": {
element: "h2",
className: "font-semibold tracking-tight my-10 pb-1 text-3xl",
},
display: {
element: "h1",
className: "font-bold tracking-tight my-2 text-4xl",
},
};

export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ id, variant = "default", className, type = "title", ...rest }, ref) => {
const mappedComponent = mapTypeToComponent[type];
const Component = mappedComponent.element;
export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(({ id, variant = "default", type = "h2", ...rest }, ref) => {
const Component = type;
return (
<span className={twMerge("group flex flex-row", mappedComponent.className, className)}>
<Component
ref={ref}
id={id}
className={clsx("break-words", {
"text-black dark:text-white": variant === "default",
"text-red-500 dark:text-red-400": variant === "error",
})}
{...rest}
/>
<span className={clsx("group heading flex flex-row items-center", variant, type)}>
<Component ref={ref} id={id} {...rest} />
{id && (
<a
href={`#${id}`}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/Link/classNames.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const linkUnderlineClassName = "text-blue-800 dark:text-sky-300 underline";
export const linkUnderlineClassName = "text-primary-light dark:text-primary-dark underline";
6 changes: 2 additions & 4 deletions docs/src/components/Logo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Logo = ({ containerClassName, nextLogoHeight = 20, nextLogoClassNam
gap: "0.5rem",
}}
className={containerClassName}
aria-label="Next PWA"
aria-label="next-pwa"
>
<NextSvg height={nextLogoHeight} className={nextLogoClassName} style={nextLogoStyle} aria-hidden />
<p
Expand All @@ -29,9 +29,7 @@ export const Logo = ({ containerClassName, nextLogoHeight = 20, nextLogoClassNam
textTransform: "uppercase",
letterSpacing: "0.1em",
padding: 0,
...(!noMoveTextUp && {
marginTop: "-1px",
}),
margin: `${!noMoveTextUp ? "-1px" : "0px"} 0px 0px 0px`,
...textStyle,
}}
>
Expand Down
Loading

0 comments on commit 6407095

Please sign in to comment.