Skip to content

Commit

Permalink
docs: refactor to use @gordonmleigh/superdocs-kit
Browse files Browse the repository at this point in the history
  • Loading branch information
@gordonmleigh
gordonmleigh committed Sep 4, 2023
1 parent 2046afe commit d500ddf
Show file tree
Hide file tree
Showing 41 changed files with 365 additions and 1,046 deletions.
27 changes: 23 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions packages/docs/app/code/declarations/[slug]/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { DeclarationSkeleton } from '@gordonmleigh/superdocs-kit/components/DeclarationSkeleton';

export default function LoadingContent(): JSX.Element {
return (
<div>
<div className="h-10 animate-pulse bg-zinc-200 w-96 mb-4" />
<div className="h-14 animate-pulse bg-zinc-200 rounded mb-12" />
<DeclarationSkeleton />
</div>
);
}
189 changes: 91 additions & 98 deletions packages/docs/app/code/declarations/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { MainLayout } from '@/components/MainLayout';
import { fetchDeclarationCollection } from '@/util/declarations';
import { packageDeclarations } from '@/util/context';
import { DeclarationInfo } from '@gordonmleigh/superdocs/components/DeclarationInfo';
import { FormatImport } from '@gordonmleigh/superdocs/components/FormatImport';
import { JSDocMarkdown } from '@gordonmleigh/superdocs/components/JSDocMarkdown';
Expand All @@ -12,121 +11,115 @@ interface DeclarationPageParams {
}

export function generateStaticParams(): DeclarationPageParams['params'][] {
const declarations = fetchDeclarationCollection().declarations;
return declarations.map(({ slug }) => ({ slug }));
return [...packageDeclarations.current].map(({ slug }) => ({ slug }));
}

export default function DeclarationPage({
params: { slug },
}: DeclarationPageParams): JSX.Element {
const collection = fetchDeclarationCollection();
const collection = packageDeclarations.current;
const declaration = collection.getDeclarationBySlug(slug);

if (!declaration) {
return notFound();
}

return (
<MainLayout>
<div>
{declaration.parent ? (
<div className="mb-12">
<h1 className="text-2xl font-semibold">
<Link
className="flex items-center"
href={declaration.parent.documentationLink}
>
<SymbolIcon node={declaration.parent.node} />
&nbsp;
{declaration.parent.name}
</Link>
</h1>
<div>
{declaration.parent ? (
<div className="mb-12">
<h1 className="text-2xl font-semibold">
<Link
className="text-zinc-500 text-sm hover:underline"
className="flex items-center"
href={declaration.parent.documentationLink}
>
&laquo; Back
<SymbolIcon node={declaration.parent.node} />
&nbsp;
{declaration.parent.name}
</Link>
</div>
) : (
<div className="mb-12">
<h1 className="text-3xl font-semibold flex items-center">
<SymbolIcon node={declaration.node} />
&nbsp;{declaration.name}
</h1>
{declaration.importInfo && (
<pre className="language-typescript my-4">
<code className="language-typescript">
<FormatImport info={declaration.importInfo} />
</code>
</pre>
)}
</div>
)}
<div className="mb-16">
<DeclarationInfo
className="mb-4"
declaration={declaration}
title={declaration.parent ? undefined : 'Details'}
/>
{!!declaration.remarks?.length && (
<JSDocMarkdown collection={collection} node={declaration.remarks} />
)}
</h1>
<Link
className="text-zinc-500 text-sm hover:underline"
href={declaration.parent.documentationLink}
>
&laquo; Back
</Link>
</div>
{!!declaration.examples?.length &&
declaration.examples.map(
(example) =>
example.comment && (
<div className="mb-16" key={example.pos}>
<h3 className="text-base font-semibold">Example</h3>
<JSDocMarkdown
collection={collection}
node={example.comment}
/>
</div>
),
) : (
<div className="mb-12">
<h1 className="text-3xl font-semibold flex items-center">
<SymbolIcon node={declaration.node} />
&nbsp;{declaration.name}
</h1>
{declaration.importInfo && (
<pre className="language-typescript my-4">
<code className="language-typescript">
<FormatImport info={declaration.importInfo} />
</code>
</pre>
)}
{!!declaration.see?.length && (
<div className="mb-16 prose dark:prose-invert">
<h3 className="font-semibold text-xl">See also</h3>
{declaration.see.map((see) => (
<JSDocMarkdown collection={collection} node={see} key={see.pos} />
))}
</div>
)}
{!!declaration.parameters?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Parameters</h3>
{declaration.parameters.map((def) => (
<DeclarationInfo
className="mb-12"
child
key={def.slug}
declaration={def}
/>
))}
</div>
)}
{!!declaration.returns?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Returns</h3>
<JSDocMarkdown collection={collection} node={declaration.returns} />
</div>
)}
{!!declaration.members?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Members</h3>
{declaration.members.map((def) => (
<DeclarationInfo
className="mb-12"
child
key={def.slug}
declaration={def}
/>
))}
</div>
</div>
)}
<div className="mb-16">
<DeclarationInfo
className="mb-4"
declaration={declaration}
title={declaration.parent ? undefined : 'Details'}
/>
{!!declaration.remarks?.length && (
<JSDocMarkdown collection={collection} node={declaration.remarks} />
)}
</div>
</MainLayout>
{!!declaration.examples?.length &&
declaration.examples.map(
(example) =>
example.comment && (
<div className="mb-16" key={example.pos}>
<h3 className="text-base font-semibold">Example</h3>
<JSDocMarkdown collection={collection} node={example.comment} />
</div>
),
)}
{!!declaration.see?.length && (
<div className="mb-16 prose dark:prose-invert">
<h3 className="font-semibold text-xl">See also</h3>
{declaration.see.map((see) => (
<JSDocMarkdown collection={collection} node={see} key={see.pos} />
))}
</div>
)}
{!!declaration.parameters?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Parameters</h3>
{declaration.parameters.map((def) => (
<DeclarationInfo
className="mb-12"
child
key={def.slug}
declaration={def}
/>
))}
</div>
)}
{!!declaration.returns?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Returns</h3>
<JSDocMarkdown collection={collection} node={declaration.returns} />
</div>
)}
{!!declaration.members?.length && (
<div className="mb-16">
<h3 className="font-semibold text-xl mb-8">Members</h3>
{declaration.members.map((def) => (
<DeclarationInfo
className="mb-12"
child
key={def.slug}
declaration={def}
/>
))}
</div>
)}
</div>
);
}
12 changes: 12 additions & 0 deletions packages/docs/app/code/groups/[slug]/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { DeclarationSkeleton } from '@gordonmleigh/superdocs-kit/components/DeclarationSkeleton';

export default function LoadingContent(): JSX.Element {
return (
<div className="flex flex-col gap-24">
<div className="h-10 animate-pulse bg-zinc-200 w-48" />
<DeclarationSkeleton />
<DeclarationSkeleton />
<DeclarationSkeleton />
</div>
);
}
42 changes: 18 additions & 24 deletions packages/docs/app/code/groups/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { MainLayout } from '@/components/MainLayout';
import { fetchDeclarationGroups } from '@/util/declarations';
import { packageDeclarations } from '@/util/context';
import { DeclarationInfo } from '@gordonmleigh/superdocs/components/DeclarationInfo';
import Link from 'next/link';
import { notFound } from 'next/navigation';
Expand All @@ -9,38 +8,33 @@ interface GroupPageParams {
}

export function generateStaticParams(): GroupPageParams['params'][] {
const groups = fetchDeclarationGroups();
return groups.map(({ slug }) => ({ slug }));
return packageDeclarations.current.groups.map(({ slug }) => ({ slug }));
}

export default function GroupPage({
params: { slug },
}: GroupPageParams): JSX.Element {
const groups = fetchDeclarationGroups();
const group = groups.find((x) => x.slug === slug);

const group = packageDeclarations.current.groups.find((x) => x.slug === slug);
if (!group) {
return notFound();
}

return (
<MainLayout>
<div>
<h1 className="text-3xl font-semibold mb-24">{group.name}</h1>
{group.declarations.map((def) => (
<div className="mb-24" key={def.slug}>
<DeclarationInfo className="mb-4" declaration={def} />
<div>
<Link
className="text-zinc-500 hover:underline text-sm"
href={def.documentationLink}
>
More &raquo;
</Link>
</div>
<div>
<h1 className="text-3xl font-semibold mb-24">{group.name}</h1>
{group.declarations.map((def) => (
<div className="mb-24" key={def.slug}>
<DeclarationInfo className="mb-4" declaration={def} />
<div>
<Link
className="text-zinc-500 hover:underline text-sm"
href={def.documentationLink}
>
More &raquo;
</Link>
</div>
))}
</div>
</MainLayout>
</div>
))}
</div>
);
}
12 changes: 12 additions & 0 deletions packages/docs/app/code/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export default function LoadingPage(): JSX.Element {
return (
<>
<div className="h-6 animate-pulse bg-zinc-200 w-48 mb-4" />
<div className="h-4 animate-pulse bg-zinc-200 w-32 mb-4" />
<div className="h-4 animate-pulse bg-zinc-200 w-32 mb-4 ml-12" />
<div className="h-4 animate-pulse bg-zinc-200 w-32 mb-4 ml-12" />
<div className="h-4 animate-pulse bg-zinc-200 w-32 mb-4 ml-12" />
<div className="h-4 animate-pulse bg-zinc-200 w-32 mb-4 ml-12" />
</>
);
}
Loading

0 comments on commit d500ddf

Please sign in to comment.