diff --git a/apps/site/components/withLayout.tsx b/apps/site/components/withLayout.tsx index 8e72c26249a3f..224baea85d764 100644 --- a/apps/site/components/withLayout.tsx +++ b/apps/site/components/withLayout.tsx @@ -1,26 +1,26 @@ -import AboutLayout from '#site/layouts/About'; -import ArticlePageLayout from '#site/layouts/ArticlePage'; import BlogLayout from '#site/layouts/Blog'; -import DefaultLayout from '#site/layouts/Default'; +import DefaultLayout, { + AboutPageLayout, + LearnPageLayout, +} from '#site/layouts/Default'; import DownloadLayout from '#site/layouts/Download'; import DownloadArchiveLayout from '#site/layouts/DownloadArchive'; import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop'; -import LearnLayout from '#site/layouts/Learn'; import PostLayout from '#site/layouts/Post'; import type { Layouts } from '#site/types'; import type { FC, PropsWithChildren } from 'react'; const layouts = { - about: AboutLayout, + about: AboutPageLayout, home: GlowingBackdropLayout, - learn: LearnLayout, + learn: LearnPageLayout, page: DefaultLayout, 'blog-post': PostLayout, 'blog-category': BlogLayout, download: DownloadLayout, 'download-archive': DownloadArchiveLayout, - article: ArticlePageLayout, + article: DefaultLayout, } satisfies Record; type WithLayoutProps = PropsWithChildren<{ layout: L }>; diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx deleted file mode 100644 index dea25e5900e19..0000000000000 --- a/apps/site/components/withMetaBar.tsx +++ /dev/null @@ -1,81 +0,0 @@ -'use client'; - -import MetaBar from '@node-core/ui-components/Containers/MetaBar'; -import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub'; -import { defaultLocale } from '@node-core/website-i18n'; -import { useFormatter, useLocale, useTranslations } from 'next-intl'; - -import Link from '#site/components/Link'; -import WithAvatarGroup from '#site/components/withAvatarGroup'; -import { useClientContext, useMediaQuery } from '#site/hooks/client'; -import { DEFAULT_DATE_FORMAT } from '#site/next.calendar.constants.mjs'; -import { TRANSLATION_URL } from '#site/next.constants.mjs'; -import { getGitHubBlobUrl } from '#site/util/github'; - -import type { FC } from 'react'; - -const WithMetaBar: FC = () => { - const { headings, readingTime, frontmatter, filename } = useClientContext(); - const formatter = useFormatter(); - const lastUpdated = frontmatter.date - ? formatter.dateTime(new Date(frontmatter.date), DEFAULT_DATE_FORMAT) - : undefined; - const readingTimeText = formatter.number(readingTime.minutes, { - style: 'unit', - unit: 'minute', - maximumFractionDigits: 0, - }); - - const usernames = - frontmatter.authors?.split(',').map(author => author.trim()) ?? []; - - const t = useTranslations(); - const locale = useLocale(); - - // Since we cannot show the same number of avatars in Mobile / Tablet - // resolution as we do on desktop and there is overflow, we are adjusting - // the number of avatars manually for the resolutions below - const isMobileResolution = useMediaQuery('(max-width: 670px)'); - const isTabletResolution = useMediaQuery( - '(min-width: 670px) and (max-width: 1280px)' - ); - - return ( - 1 ? 'authors' : 'author'}` - )]: ( - - ), - }), - [t('components.metabar.contribute')]: ( - <> - - - {t('components.metabar.contributeText')} - - - ), - }} - headings={{ items: headings }} - /> - ); -}; - -export default WithMetaBar; diff --git a/apps/site/components/withSidebar.tsx b/apps/site/components/withSidebar.tsx index 91866828ac934..8ea5027794462 100644 --- a/apps/site/components/withSidebar.tsx +++ b/apps/site/components/withSidebar.tsx @@ -1,13 +1,23 @@ 'use client'; import Sidebar from '@node-core/ui-components/Containers/Sidebar'; -import { useTranslations } from 'next-intl'; +import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub'; +import { defaultLocale } from '@node-core/website-i18n'; +import { useFormatter, useLocale, useTranslations } from 'next-intl'; import { useRef } from 'react'; import Link from '#site/components/Link'; -import { useClientContext, useScrollToElement } from '#site/hooks/client'; +import WithAvatarGroup from '#site/components/withAvatarGroup'; +import { + useClientContext, + useScrollToElement, + useMediaQuery, +} from '#site/hooks/client'; import { useSiteNavigation } from '#site/hooks/generic'; import { useRouter, usePathname } from '#site/navigation.mjs'; +import { DEFAULT_DATE_FORMAT } from '#site/next.calendar.constants.mjs'; +import { TRANSLATION_URL } from '#site/next.constants.mjs'; +import { getGitHubBlobUrl } from '#site/util/github'; import type { NavigationKeys } from '#site/types'; import type { RichTranslationValues } from 'next-intl'; @@ -21,24 +31,29 @@ type WithSidebarProps = { const WithSidebar: FC = ({ navKeys, context, ...props }) => { const { getSideNavigation } = useSiteNavigation(); const pathname = usePathname()!; + const locale = useLocale(); const t = useTranslations(); + const formatter = useFormatter(); const { push } = useRouter(); - const { frontmatter } = useClientContext(); + const { frontmatter, readingTime, filename } = useClientContext(); const sidebarRef = useRef(null); - const sideNavigation = getSideNavigation(navKeys, context); - // Preserve sidebar scroll position across navigations useScrollToElement('sidebar', sidebarRef); - const mappedSidebarItems = - // If there's only a single navigation key, use its sub-items - // as our navigation. - (navKeys.length === 1 ? sideNavigation[0][1].items : sideNavigation).map( - ([, { label, items }]) => ({ - groupName: label, - items: items.map(([, item]) => item), - }) - ); + const sideNavigation = getSideNavigation(navKeys, context); + const mappedSidebarItems = ( + navKeys.length === 1 ? sideNavigation[0][1].items : sideNavigation + ).map(([, { label, items }]) => ({ + groupName: label, + items: items.map(([, item]) => item), + })); + + const usernames = + frontmatter.authors?.split(',').map(author => author.trim()) ?? []; + const isMobileResolution = useMediaQuery('(max-width: 670px)'); + const isTabletResolution = useMediaQuery( + '(min-width: 670px) and (max-width: 1280px)' + ); return ( = ({ navKeys, context, ...props }) => { onSelect={push} as={Link} {...props} - /> + > +
+ {frontmatter.date && ( + <> +
{t('components.common.sidebar.lastUpdated')}
+
+ {formatter.dateTime( + new Date(frontmatter.date), + DEFAULT_DATE_FORMAT + )} +
+ + )} + +
{t('components.common.sidebar.readingTime')}
+
+ {formatter.number(readingTime.minutes, { + style: 'unit', + unit: 'minute', + maximumFractionDigits: 0, + })} +
+ + {usernames.length > 0 && ( + <> +
+ {t( + `components.common.sidebar.${usernames.length > 1 ? 'authors' : 'author'}` + )} +
+
+ +
+ + )} + +
{t('components.common.sidebar.contribute')}
+
+ + + {t('components.common.sidebar.contributeText')} + +
+
+ ); }; diff --git a/apps/site/components/withTOC.tsx b/apps/site/components/withTOC.tsx new file mode 100644 index 0000000000000..74313138e097a --- /dev/null +++ b/apps/site/components/withTOC.tsx @@ -0,0 +1,20 @@ +import TableOfContents from '@node-core/ui-components/Common/TableOfContents'; +import { useTranslations } from 'next-intl'; + +import type { FC } from 'react'; + +import { useClientContext } from '../hooks/server'; + +const WithTOC: FC = () => { + const { headings } = useClientContext(); + const t = useTranslations(); + + return ( + + ); +}; + +export default WithTOC; diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx deleted file mode 100644 index ea6260b27f1f5..0000000000000 --- a/apps/site/layouts/About.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Article from '@node-core/ui-components/Containers/Article'; - -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 type { FC, PropsWithChildren } from 'react'; - -const AboutLayout: FC = ({ children }) => ( - <> - - -
- - -
-
- {children} -
- - -
- - -
- - - -); - -export default AboutLayout; diff --git a/apps/site/layouts/ArticlePage.tsx b/apps/site/layouts/ArticlePage.tsx deleted file mode 100644 index 37216ae07be11..0000000000000 --- a/apps/site/layouts/ArticlePage.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import Article from '@node-core/ui-components/Containers/Article'; - -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 type { FC, PropsWithChildren } from 'react'; - -const ArticlePageLayout: FC = ({ children }) => ( - <> - - -
- - -
-
- {children} -
- - -
-
- - - -); - -export default ArticlePageLayout; diff --git a/apps/site/layouts/Default.tsx b/apps/site/layouts/Default.tsx index 14fe4a4cb5134..ed10204a7fcec 100644 --- a/apps/site/layouts/Default.tsx +++ b/apps/site/layouts/Default.tsx @@ -1,23 +1,40 @@ import Article from '@node-core/ui-components/Containers/Article'; +import WithBreadcrumbs from '#site/components/withBreadcrumbs'; import WithFooter from '#site/components/withFooter'; import WithNavBar from '#site/components/withNavBar'; import WithSidebar from '#site/components/withSidebar'; +import WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks'; +import WithTOC from '#site/components/withTOC'; +import type { NavigationKeys } from '../types'; import type { FC, PropsWithChildren } from 'react'; -const DefaultLayout: FC = ({ children }) => ( +type DefaultLayoutProps = { + navKeys?: Array; + showBreadcrumbs?: boolean; +}; + +const DefaultLayout: FC> = ({ + children, + navKeys = [], + showBreadcrumbs = false, +}) => ( <>
- +
+ +
{children}
+ + {showBreadcrumbs && }
@@ -25,3 +42,18 @@ const DefaultLayout: FC = ({ children }) => ( ); export default DefaultLayout; + +export const AboutPageLayout: FC = props => ( + +); + +export const LearnPageLayout: FC = ({ children }) => ( + + {children} + + +); diff --git a/apps/site/layouts/Learn.tsx b/apps/site/layouts/Learn.tsx deleted file mode 100644 index 1263e1f1adb4f..0000000000000 --- a/apps/site/layouts/Learn.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import Article from '@node-core/ui-components/Containers/Article'; - -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 WithSidebarCrossLinks from '#site/components/withSidebarCrossLinks'; - -import type { FC, PropsWithChildren } from 'react'; - -const LearnLayout: FC = ({ children }) => ( - <> - - -
- - -
-
- {children} - - -
- - -
- - -
- - - -); - -export default LearnLayout; diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx index 41f5fe33a5567..15bfd9188896a 100644 --- a/apps/site/layouts/Post.tsx +++ b/apps/site/layouts/Post.tsx @@ -3,15 +3,14 @@ import Preview from '@node-core/ui-components/Common/Preview'; import EOLAlert from '#site/components/EOL/EOLAlert'; import WithAvatarGroup from '#site/components/withAvatarGroup'; import WithBlogCrossLinks from '#site/components/withBlogCrossLinks'; -import WithFooter from '#site/components/withFooter'; -import WithMetaBar from '#site/components/withMetaBar'; -import WithNavBar from '#site/components/withNavBar'; import { useClientContext } from '#site/hooks/server'; import { mapAuthorToCardAuthors } from '#site/util/author'; import { mapBlogCategoryToPreviewType } from '#site/util/blog'; import type { FC, PropsWithChildren } from 'react'; +import DefaultLayout from './Default'; + import styles from './layouts.module.css'; const PostLayout: FC = ({ children }) => { @@ -22,35 +21,23 @@ const PostLayout: FC = ({ children }) => { const type = mapBlogCategoryToPreviewType(frontmatter.category!); return ( - <> - - -
-
-
- {type === 'vulnerability' && } - -

{frontmatter.title}

- -
- + + {type === 'vulnerability' && } -

{authors.join(', ')}

-
+

{frontmatter.title}

- +
+ - {children} +

{authors.join(', ')}

+
- -
-
+ - -
+ {children} - - + + ); }; diff --git a/apps/site/layouts/layouts.module.css b/apps/site/layouts/layouts.module.css index 2ffb28d5d5d1a..49c385fc68c19 100644 --- a/apps/site/layouts/layouts.module.css +++ b/apps/site/layouts/layouts.module.css @@ -134,64 +134,9 @@ } } -.contentLayout { - @apply max-w-8xl - max-xs:m-0 - max-xs:block - mx-auto - grid - w-full - grid-rows-[1fr] - sm:grid-cols-[1fr_theme(spacing.52)] - xl:grid-cols-[1fr_theme(spacing.80)]; - - > *:nth-child(1) { - @apply bg-gradient-subtle - dark:bg-gradient-subtle-dark - max-xs:border-l-0 - max-xs:bg-none - max-xs:pb-4 - max-xs:dark:bg-none - flex - w-full - justify-center - border-l - border-l-neutral-200 - px-4 - py-14 - md:px-14 - lg:px-28 - dark:border-l-neutral-900; - - main { - @apply max-w-[660px] - gap-4 - [overflow-wrap:_anywhere]; - } - } - - > *:nth-child(2) { - @apply xs:mt-0 - xs:max-w-xs - xs:border-l - xs:border-t-0 - mt-8 - border-t; - } -} - -.postLayout { - main { - > section { - @apply flex - flex-row - items-center - gap-4; - } - - > div:nth-of-type(1) { - @apply mt-2 - mb-4; - } - } +.postAuthors { + @apply flex + flex-row + items-center + gap-4; } diff --git a/apps/site/next-env.d.ts b/apps/site/next-env.d.ts index c05d9f7d66f17..cdb6b7b848c32 100644 --- a/apps/site/next-env.d.ts +++ b/apps/site/next-env.d.ts @@ -1,7 +1,7 @@ /// /// /// -import './.next/types/routes.d.ts'; +import './.next/dev/types/routes.d.ts'; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json index 940491462ec30..8e07c6b63db7f 100644 --- a/packages/i18n/src/locales/en.json +++ b/packages/i18n/src/locales/en.json @@ -265,7 +265,15 @@ "pageLabel": "Go to page {pageNumber}" }, "sidebar": { - "title": "Change page" + "title": "Change page", + "lastUpdated": "Last Updated", + "readingTime": "Reading Time", + "addedIn": "Added In", + "author": "Author", + "authors": "Authors", + "contribute": "Contribute", + "contributeText": "Edit this page", + "viewAs": "View as" }, "languageDropdown": { "label": "Choose Language" @@ -274,19 +282,8 @@ "light": "Switch to Light Mode", "dark": "Switch to Dark Mode" }, - "skipToContent": "Skip to content" - }, - "metabar": { - "lastUpdated": "Last Updated", - "readingTime": "Reading Time", - "addedIn": "Added In", - "author": "Author", - "authors": "Authors", - "contribute": "Contribute", - "contributeText": "Edit this page", - "viewAs": "View as", - "tableOfContents": "Table of Contents", - "metadata": "Article metadata" + "skipToContent": "Skip to content", + "onThisPage": "On this page" }, "banner": { "default": "Announcement", diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 198aa53cf7d7f..d26924f6bea7a 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -1,6 +1,6 @@ { "name": "@node-core/ui-components", - "version": "1.5.8", + "version": "1.6.0", "type": "module", "exports": { "./*": [ diff --git a/packages/ui-components/src/Common/Preview/index.module.css b/packages/ui-components/src/Common/Preview/index.module.css index e70cfb4ca3bb5..d4d6e221a8ef5 100644 --- a/packages/ui-components/src/Common/Preview/index.module.css +++ b/packages/ui-components/src/Common/Preview/index.module.css @@ -6,6 +6,7 @@ relative flex aspect-[1.90/1] + max-w-[660px] items-center rounded-sm border diff --git a/packages/ui-components/src/Common/TableOfContents/index.module.css b/packages/ui-components/src/Common/TableOfContents/index.module.css index 3e97de5dd5a7c..98f9c20034a65 100644 --- a/packages/ui-components/src/Common/TableOfContents/index.module.css +++ b/packages/ui-components/src/Common/TableOfContents/index.module.css @@ -1,11 +1,14 @@ @reference "../../styles/index.css"; .details { - @apply my-2 + @apply sticky + top-4 + z-50 + mb-6 block rounded-md bg-neutral-200 - lg:hidden + shadow-lg dark:bg-neutral-900; &[open] { diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css index 21c58515f0aa3..663f15e0e8c3e 100644 --- a/packages/ui-components/src/Containers/Article/index.module.css +++ b/packages/ui-components/src/Containers/Article/index.module.css @@ -1,54 +1,35 @@ @reference "../../styles/index.css"; .articleLayout { - @apply max-w-8xl - mx-auto + @apply 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)]; + md:grid-cols-[--spacing(64)_1fr] + lg:grid-cols-[--spacing(52)_1fr] + xl:grid-cols-[--spacing(80)_1fr]; - > *:nth-child(1) { + > *:first-child { @apply [grid-area:sidebar] lg:sticky lg:top-0 - lg:h-[100vh] + lg:h-screen 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 - p-4 - [grid-area:main] - motion-safe:scroll-smooth - sm:bg-fixed - sm:p-12 - xl:px-18; - } - - > *:last-child { - @apply mt-8 - border-t - [grid-area:metabar] - sm:mt-0 - lg:sticky - lg:top-0 - lg:max-w-xs - lg:border-t-0 - lg:border-l; - } + > div { + @apply sm:bg-gradient-subtle + sm:dark:bg-gradient-subtle-dark + min-h-screen + min-w-52 + p-4 + [grid-area:main] + motion-safe:scroll-smooth + sm:bg-fixed + sm:p-12 + xl:px-20; } > *:nth-child(3) { diff --git a/packages/ui-components/src/Containers/MetaBar/__tests__/index.test.jsx b/packages/ui-components/src/Containers/MetaBar/__tests__/index.test.jsx deleted file mode 100644 index 6460c2fdf125d..0000000000000 --- a/packages/ui-components/src/Containers/MetaBar/__tests__/index.test.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import { describe, it } from 'node:test'; -import assert from 'node:assert/strict'; - -import { render } from '@testing-library/react'; - -import MetaBar from '..'; - -describe('MetaBar', () => { - it('does not render h5s in the table of contents', () => { - const { queryByText, getByText } = render( - - ); - - const h1Element = queryByText('Heading Level 1'); - assert.ok(!h1Element?.ownerDocument); - - getByText('Heading Level 2'); - getByText('Heading Level 3'); - getByText('Heading Level 4'); - - const h5Element = queryByText('Heading Level 5'); - assert.ok(!h5Element?.ownerDocument); - - const h6Element = queryByText('Heading Level 6'); - assert.ok(!h6Element?.ownerDocument); - }); -}); diff --git a/packages/ui-components/src/Containers/MetaBar/index.module.css b/packages/ui-components/src/Containers/MetaBar/index.module.css deleted file mode 100644 index 126c0a09377cd..0000000000000 --- a/packages/ui-components/src/Containers/MetaBar/index.module.css +++ /dev/null @@ -1,91 +0,0 @@ -@reference "../../styles/index.css"; - -.wrapper { - @apply flex - w-full - flex-col - items-start - gap-8 - border-neutral-200 - px-4 - py-6 - [overflow-wrap:anywhere] - lg:sticky - lg:top-0 - lg:max-h-screen - lg:px-6 - dark:border-neutral-900; - - dl { - @apply flex - w-full - flex-col - gap-1.5 - pb-12 - [scrollbar-width:none] - lg:max-h-[calc(100vh-var(--header-height))] - lg:overflow-y-auto - [&::-webkit-scrollbar]:hidden; - } - - dt { - @apply mb-2 - text-sm - font-medium - text-neutral-800 - dark:text-neutral-200; - } - - dd { - @apply mb-8 - flex - items-center - gap-2 - text-sm - text-neutral-900 - dark:text-white; - - a { - @apply max-xs:inline-block - max-xs:py-1 - font-semibold - text-neutral-900 - underline - dark:text-white; - - &:hover { - @apply text-neutral-700 - dark:text-neutral-500; - } - } - - ol { - @apply flex - w-full - list-none - flex-col - gap-1.5 - p-0; - } - - svg { - @apply size-4 - text-neutral-600 - dark:text-neutral-400; - } - - &:last-child { - @apply mb-0; - } - } - - [data-on-dark] { - @apply hidden - dark:block; - } - - [data-on-light] { - @apply block - dark:hidden; - } -} diff --git a/packages/ui-components/src/Containers/MetaBar/index.stories.tsx b/packages/ui-components/src/Containers/MetaBar/index.stories.tsx deleted file mode 100644 index a52080cbba00a..0000000000000 --- a/packages/ui-components/src/Containers/MetaBar/index.stories.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { CodeBracketIcon } from '@heroicons/react/24/outline'; - -import MetaBar from '#ui/Containers/MetaBar'; -import GitHubIcon from '#ui/Icons/Social/GitHub'; - -import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5'; - -type Story = StoryObj; -type Meta = MetaObj; - -export const Default: Story = { - args: { - items: { - 'components.metabar.lastUpdated': new Date( - '17 October 2023' - ).toLocaleDateString(), - 'components.metabar.readingTime': '15 minutes', - 'components.metabar.addedIn': 'v1.0.0', - 'components.metabar.author': 'The Node.js Project', - 'components.metabar.authors':

...

, - 'components.metabar.contribute': ( - <> - - Edit this page - - ), - 'components.metabar.viewAs': ( - <> - - JSON - - ), - }, - headings: { - items: [ - { - value: 'OpenSSL update assessment, and Node.js project plans', - depth: 1, - data: { id: 'heading-1' }, - }, - { - value: 'Summary', - depth: 2, - data: { id: 'summary' }, - }, - { - value: 'Analysis', - depth: 2, - data: { id: 'analysis' }, - }, - { - value: 'The c_rehash script allows command injection (CVE-2022-2068)', - depth: 3, - data: { id: 'the_c_rehash' }, - }, - { - value: 'Contact and future updates', - depth: 3, - data: { id: 'contact_and_future_updates' }, - }, - { - value: 'Email', - depth: 4, - data: { id: 'email' }, - }, - { - value: 'Slack', - depth: 4, - data: { id: 'slack' }, - }, - { - value: '#node-website', - depth: 5, // h5s do not get shown - data: { id: 'node-website' }, - }, - ], - }, - }, -}; - -export default { component: MetaBar } as Meta; diff --git a/packages/ui-components/src/Containers/MetaBar/index.tsx b/packages/ui-components/src/Containers/MetaBar/index.tsx deleted file mode 100644 index c761cfe07f643..0000000000000 --- a/packages/ui-components/src/Containers/MetaBar/index.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Fragment, useMemo } from 'react'; - -import type { LinkLike } from '#ui/types'; -import type { Heading } from '@vcarl/remark-headings'; -import type { FC, HTMLAttributes } from 'react'; - -import styles from './index.module.css'; - -type MetaBarProps = { - items: Partial>; - headings?: { - items: Array; - minDepth?: number; - }; - as?: LinkLike; - heading: string; -} & HTMLAttributes; - -const MetaBar: FC = ({ - items, - headings, - as: Component = 'a', - heading, - ...props -}) => { - // The default depth of headings to display in the table of contents. - const { minDepth = 2, items: headingItems = [] } = headings || {}; - - const filteredHeadings = useMemo( - () => headingItems.filter(({ depth }) => depth >= minDepth && depth <= 4), - [minDepth, headingItems] - ); - - return ( - - ); -}; - -export default MetaBar; diff --git a/packages/ui-components/src/Containers/Sidebar/index.module.css b/packages/ui-components/src/Containers/Sidebar/index.module.css index 67873b65391f5..54cbdf9d44b01 100644 --- a/packages/ui-components/src/Containers/Sidebar/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/index.module.css @@ -27,4 +27,63 @@ w-full sm:hidden; } + + dl { + @apply flex + w-full + flex-col + [scrollbar-width:none] + [&::-webkit-scrollbar]:hidden; + } + + dt { + @apply mb-2 + text-sm + font-medium + text-neutral-800 + dark:text-neutral-200; + } + + dd { + @apply mb-8 + flex + items-center + gap-2 + text-sm + text-neutral-900 + dark:text-white; + + a { + @apply max-xs:inline-block + max-xs:py-1 + font-semibold + text-neutral-900 + underline + dark:text-white; + + &:hover { + @apply text-neutral-700 + dark:text-neutral-500; + } + } + + ol { + @apply flex + w-full + list-none + flex-col + gap-1.5 + p-0; + } + + svg { + @apply size-4 + text-neutral-600 + dark:text-neutral-400; + } + + &:last-child { + @apply mb-0; + } + } } diff --git a/packages/ui-components/src/Containers/Sidebar/index.tsx b/packages/ui-components/src/Containers/Sidebar/index.tsx index b41c83e1630da..3405ffa653553 100644 --- a/packages/ui-components/src/Containers/Sidebar/index.tsx +++ b/packages/ui-components/src/Containers/Sidebar/index.tsx @@ -1,6 +1,7 @@ import { forwardRef } from 'react'; import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect'; +import Separator from '#ui/Common/Separator/index'; import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup'; import type { LinkLike } from '#ui/types'; @@ -33,6 +34,7 @@ const SideBar = forwardRef>( return (