Skip to content

Commit

Permalink
fix: migrate changelog classnames to stylesheet (#1479)
Browse files Browse the repository at this point in the history
  • Loading branch information
@abvthecity
abvthecity authored Sep 17, 2024
1 parent 93417b4 commit 77bd17d
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 82 deletions.
45 changes: 17 additions & 28 deletions packages/ui/app/src/changelog/ChangelogContentLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,26 @@
import { useAtomValue } from "jotai";
import { ReactElement, ReactNode } from "react";
import { SIDEBAR_ROOT_NODE_ATOM } from "../atoms";
import clsx from "clsx";
import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";

interface ChangelogContentLayoutProps {
interface ChangelogContentLayoutProps extends ComponentPropsWithoutRef<"div"> {
as: "div" | "section" | "article";
stickyContent?: ReactNode;
children: ReactNode;
}

export function ChangelogContentLayout({ children, stickyContent }: ChangelogContentLayoutProps): ReactElement {
const fullWidth = useAtomValue(SIDEBAR_ROOT_NODE_ATOM) == null;
return fullWidth ? (
<>
<div className="hidden lg:block flex-initial w-64 shrink-0">
{stickyContent != null && (
<div className="sticky top-header-offset-padded t-muted text-base mb-8">{stickyContent}</div>
)}
</div>
<div className="mx-auto relative max-w-content-width min-w-0 shrink flex-auto">
{stickyContent != null && <div className="t-muted text-base mb-8 lg:hidden">{stickyContent}</div>}
{children}
</div>
</>
) : (
<>
<div className="relative mr-6 max-w-content-width min-w-0 shrink flex-auto">
{stickyContent != null && <div className="t-muted text-base mb-8 xl:hidden">{stickyContent}</div>}
export function ChangelogContentLayout({
as: Component,
children,
stickyContent,
...props
}: ChangelogContentLayoutProps): ReactElement {
const asideContent = stickyContent != null && <div className="fern-changelog-date">{stickyContent}</div>;
return (
<Component {...props} className={clsx("fern-changelog-entry", props.className)}>
<aside>{asideContent}</aside>
<div className="fern-changelog-content">
{asideContent}
{children}
</div>
{stickyContent != null && (
<div className="-mt-2 w-72 pl-4 text-right hidden xl:block">
<span className="t-muted text-base sticky top-header-offset-padded">{stickyContent}</span>
</div>
)}
</>
</Component>
);
}
104 changes: 51 additions & 53 deletions packages/ui/app/src/changelog/ChangelogPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,60 +117,58 @@ export function ChangelogPage({ content }: { content: DocsContent.ChangelogPage
}, [chunkedEntries.length, page]);

return (
<div className="flex justify-between px-4 md:px-6 lg:px-8">
<div className={clsx("w-full min-w-0", { "pt-12 lg:pt-24": fullWidth, "pt-8": !fullWidth })}>
<main className={clsx("mx-auto max-w-screen-lg break-words", { "lg:ml-8": !fullWidth })}>
<section className="flex pb-8">
<ChangelogContentLayout>
<PageHeader
title={content.node.title}
breadcrumbs={content.breadcrumbs}
subtitle={typeof overview !== "string" ? overview?.frontmatter.excerpt : undefined}
/>
<Markdown mdx={overview} />
</ChangelogContentLayout>
</section>

{entries.map((entry) => {
const page = content.pages[entry.pageId];
const title = typeof page !== "string" ? page?.frontmatter.title : undefined;
return (
<Fragment key={entry.id}>
<hr />
<article id={entry.date} className="flex items-stretch py-8 lg:py-16">
<ChangelogContentLayout
stickyContent={<FernLink href={toHref(entry.slug)}>{entry.title}</FernLink>}
>
<Markdown
title={
title != null ? (
<h2>
<FernLink href={toHref(entry.slug)} className="not-prose">
{title}
</FernLink>
</h2>
) : undefined
}
mdx={page}
/>
</ChangelogContentLayout>
</article>
</Fragment>
);
})}

{(prev != null || next != null) && (
<div className="flex">
<ChangelogContentLayout>
<BottomNavigationButtons prev={prev} next={next} alwaysShowGrid />
<div
className={clsx("fern-changelog", {
"full-width": fullWidth,
})}
>
<main>
<ChangelogContentLayout as="section" className="pb-8">
<PageHeader
title={content.node.title}
breadcrumbs={content.breadcrumbs}
subtitle={typeof overview !== "string" ? overview?.frontmatter.excerpt : undefined}
/>
<Markdown mdx={overview} />
</ChangelogContentLayout>

{entries.map((entry) => {
const page = content.pages[entry.pageId];
const title = typeof page !== "string" ? page?.frontmatter.title : undefined;
return (
<Fragment key={entry.id}>
<hr />
<ChangelogContentLayout
as="article"
id={entry.date}
stickyContent={<FernLink href={toHref(entry.slug)}>{entry.title}</FernLink>}
>
<Markdown
title={
title != null ? (
<h2>
<FernLink href={toHref(entry.slug)} className="not-prose">
{title}
</FernLink>
</h2>
) : undefined
}
mdx={page}
/>
</ChangelogContentLayout>
</div>
)}

<div className="h-48" />
<BuiltWithFern className="w-fit mx-auto my-8" />
</main>
</div>
</Fragment>
);
})}

{(prev != null || next != null) && (
<ChangelogContentLayout as="div">
<BottomNavigationButtons prev={prev} next={next} alwaysShowGrid />
</ChangelogContentLayout>
)}

<div className="h-48" />
<BuiltWithFern className="w-fit mx-auto my-8" />
</main>
</div>
);
}
65 changes: 65 additions & 0 deletions packages/ui/app/src/changelog/index.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
@layer components {
.fern-changelog {
@apply flex justify-between px-4 md:px-6 lg:px-8;

> main {
@apply mx-auto max-w-screen-lg break-words;
}
}

.fern-changelog-entry {
@apply flex items-stretch;

&:is(article) {
@apply py-8 lg:py-16;
}
}

.fern-changelog.full-width {
@apply pt-12 lg:pt-24;

.fern-changelog-content {
@apply mx-auto relative max-w-content-width min-w-0 shrink flex-auto;

.fern-changelog-date {
@apply t-muted text-base mb-8 lg:hidden;
}
}

.fern-changelog-entry > aside {
@apply hidden lg:block flex-initial w-64 shrink-0;

.fern-changelog-date {
@apply sticky top-header-offset-padded t-muted text-base mb-8;
}
}
}

.fern-changelog:not(.full-width) {
@apply pt-8;

> main {
@apply lg:ml-8;
}

.fern-changelog-entry {
@apply flex-row-reverse;
}

.fern-changelog-content {
@apply relative mr-6 max-w-content-width min-w-0 shrink flex-auto;

.fern-changelog-date {
@apply t-muted text-base mb-8 xl:hidden;
}
}

.fern-changelog-entry > aside {
@apply -mt-2 w-72 pl-4 text-right hidden xl:block;

.fern-changelog-date {
@apply sticky t-muted text-base top-header-offset-padded;
}
}
}
}
1 change: 1 addition & 0 deletions packages/ui/app/src/css/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
@import "../playground";
@import "../components";
@import "../mdx/components";
@import "../changelog";
@import "./utilities";
@import "../themes";
@import "../header";
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/app/src/sidebar/nodes/SidebarChangelogNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function SidebarChangelogNode({ node, depth, className }: SidebarChangelo
className={className}
selected={selected}
depth={Math.max(0, depth - 1)}
icon={node.icon ?? <Calendar />}
icon={node.icon ?? <Calendar className="size-4" />}
tooltipContent={renderChangelogTooltip(node)}
hidden={node.hidden}
/>
Expand Down

0 comments on commit 77bd17d

Please sign in to comment.