Skip to content

chore(ui): move ArticleLayout to ui-components #7762

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.

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

Merged
merged 3 commits into from
May 22, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
6 changes: 3 additions & 3 deletions apps/site/layouts/About.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import Article from '@node-core/ui-components/Containers/Article';
import type { FC, PropsWithChildren } from 'react';

import WithBreadcrumbs from '#site/components/withBreadcrumbs';
import WithFooter from '#site/components/withFooter';
import WithMetaBar from '#site/components/withMetaBar';
import WithNavBar from '#site/components/withNavBar';
import WithSidebar from '#site/components/withSidebar';
import ArticleLayout from '#site/layouts/Article';
import { ReleaseModalProvider } from '#site/providers/releaseModalProvider';

const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
<ReleaseModalProvider>
<WithNavBar />

<ArticleLayout>
<Article>
<WithSidebar navKeys={['about', 'getInvolved']} />

<div>
Expand All @@ -22,7 +22,7 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
</div>

<WithBreadcrumbs navKeys={['about', 'getInvolved']} />
</ArticleLayout>
</Article>

<WithFooter />
</ReleaseModalProvider>
Expand Down
6 changes: 3 additions & 3 deletions apps/site/layouts/ArticlePage.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import Article from '@node-core/ui-components/Containers/Article';
import type { FC, PropsWithChildren } from 'react';

import WithMetaBar from '#site/components/withMetaBar';
import WithNavBar from '#site/components/withNavBar';
import WithSidebar from '#site/components/withSidebar';
import ArticleLayout from '#site/layouts/Article';

const ArticlePageLayout: FC<PropsWithChildren> = ({ children }) => (
<>
<WithNavBar />

<ArticleLayout>
<Article>
<WithSidebar navKeys={[]} />

<div>
<main>{children}</main>

<WithMetaBar />
</div>
</ArticleLayout>
</Article>
</>
);

Expand Down
6 changes: 3 additions & 3 deletions apps/site/layouts/Default.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import Article from '@node-core/ui-components/Containers/Article';
import type { FC, PropsWithChildren } from 'react';

import WithFooter from '#site/components/withFooter';
import WithNavBar from '#site/components/withNavBar';
import WithSidebar from '#site/components/withSidebar';
import ArticleLayout from '#site/layouts/Article';

const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
<>
<WithNavBar />

<ArticleLayout>
<Article>
<WithSidebar navKeys={[]} />

<div>
<main>{children}</main>
</div>
</ArticleLayout>
</Article>

<WithFooter />
</>
Expand Down
6 changes: 3 additions & 3 deletions apps/site/layouts/Learn.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Article from '@node-core/ui-components/Containers/Article';
import type { FC, PropsWithChildren } from 'react';

import WithBreadcrumbs from '#site/components/withBreadcrumbs';
Expand All @@ -6,13 +7,12 @@ import WithMetaBar from '#site/components/withMetaBar';
import WithNavBar from '#site/components/withNavBar';
import WithProgressionSidebar from '#site/components/withProgressionSidebar';
import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks';
import ArticleLayout from '#site/layouts/Article';

const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
<>
<WithNavBar />

<ArticleLayout>
<Article>
<WithProgressionSidebar navKey="learn" />

<div>
Expand All @@ -26,7 +26,7 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
</div>

<WithBreadcrumbs navKeys={['learn']} />
</ArticleLayout>
</Article>

<WithFooter />
</>
Expand Down
69 changes: 0 additions & 69 deletions apps/site/layouts/layouts.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,75 +9,6 @@
grid-rows-[auto_1fr_auto];
}

.articleLayout {
@apply max-w-8xl
mx-auto
block
w-full
sm:grid
sm:grid-cols-[theme(spacing.52)_1fr]
sm:grid-rows-[1fr]
sm:overflow-visible
sm:[grid-template-areas:'sidebar_main''sidebar_footer']
md:grid-cols-[theme(spacing.64)_1fr]
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];

> *:nth-child(1) {
@apply [grid-area:sidebar]
lg:sticky
lg:top-0
lg:h-[100vh]
lg:overflow-y-auto;
}

> *:nth-child(2) {
@apply contents
sm:max-lg:block;

> *:first-child {
@apply sm:bg-gradient-subtle
sm:dark:bg-gradient-subtle-dark
xl:px-18
p-4
[grid-area:main]
motion-safe:scroll-smooth
sm:bg-fixed
sm:p-12;
}

> *:last-child {
@apply mt-8
border-t
[grid-area:metabar]
sm:mt-0
lg:sticky
lg:top-0
lg:max-w-xs
lg:border-l
lg:border-t-0;
}
}

> *:nth-child(3) {
@apply sticky
bottom-0
flex
w-full
flex-col
items-center
self-stretch
border-t
border-t-neutral-200
bg-white
py-4
[grid-area:footer]
dark:border-t-neutral-900
dark:bg-neutral-950;
}
}

.centeredLayout {
@apply flex
w-full
Expand Down
70 changes: 70 additions & 0 deletions packages/ui-components/Containers/Article/index.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
@reference "../../styles/index.css";

.articleLayout {
@apply max-w-8xl
mx-auto
block
w-full
sm:grid
sm:grid-cols-[theme(spacing.52)_1fr]
sm:grid-rows-[1fr]
sm:overflow-visible
sm:[grid-template-areas:'sidebar_main''sidebar_footer']
md:grid-cols-[theme(spacing.64)_1fr]
lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
lg:[grid-template-areas:'sidebar_main_metabar''sidebar_footer_metabar']
xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];

> *:nth-child(1) {
@apply [grid-area:sidebar]
lg:sticky
lg:top-0
lg:h-[100vh]
lg:overflow-y-auto;
}

> *:nth-child(2) {
@apply contents
sm:max-lg:block;

> *:first-child {
@apply sm:bg-gradient-subtle
sm:dark:bg-gradient-subtle-dark
xl:px-18
p-4
[grid-area:main]
motion-safe:scroll-smooth
sm:bg-fixed
sm:p-12;
}

> *:last-child {
@apply mt-8
border-t
[grid-area:metabar]
sm:mt-0
lg:sticky
lg:top-0
lg:max-w-xs
lg:border-l
lg:border-t-0;
}
}

> *:nth-child(3) {
@apply sticky
bottom-0
flex
w-full
flex-col
items-center
self-stretch
border-t
border-t-neutral-200
bg-white
py-4
[grid-area:footer]
dark:border-t-neutral-900
dark:bg-neutral-950;
}
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { FC, PropsWithChildren } from 'react';

import styles from './layouts.module.css';
import styles from './index.module.css';

const ArticleLayout: FC<PropsWithChildren> = ({ children }) => (
<div className={styles.articleLayout}>{children}</div>
Expand Down
Loading