chore: rename With... components

apps/site/components/withAvatarGroup.tsx → apps/site/components/AvatarGroup.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import AvatarGroup from '@node-core/ui-components/Common/AvatarGroup';
+import AvatarGroupContainer from '@node-core/ui-components/Common/AvatarGroup';
 
 import Link from '#site/components/Link';
 import { getAuthors } from '#site/util/author';
 
 import type { AuthorProps } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithAvatarGroupProps = Omit<
-  ComponentProps<typeof AvatarGroup>,
+type AvatarGroupProps = Omit<
+  ComponentProps<typeof AvatarGroupContainer>,
   'avatars' | 'as'
 > &
   AuthorProps;
 
-const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
+const AvatarGroup: FC<AvatarGroupProps> = ({
   usernames,
   names,
   clickable = true,
   ...props
 }) => (
-  <AvatarGroup
+  <AvatarGroupContainer
     avatars={getAuthors({
       usernames,
       names,
@@ -31,4 +31,4 @@ const WithAvatarGroup: FC<WithAvatarGroupProps> = ({
   />
 );
 
-export default WithAvatarGroup;
+export default AvatarGroup;

apps/site/components/Blog/BlogPostCard/index.tsx

@@ -1,9 +1,9 @@
 import Preview from '@node-core/ui-components/Common/Preview';
 import { useTranslations } from 'next-intl';
 
+import AvatarGroup from '#site/components/AvatarGroup';
 import FormattedTime from '#site/components/Common/FormattedTime';
 import Link from '#site/components/Link';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
 import { mapBlogCategoryToPreviewType } from '#site/util/blog';
 
 import type { BlogCategory } from '#site/types';
@@ -49,7 +49,7 @@ const BlogPostCard: FC<BlogPostCardProps> = ({
       {description && <p className={styles.description}>{description}</p>}
 
       <footer className={styles.footer}>
-        <WithAvatarGroup names={authors} size="medium" clickable={false} />
+        <AvatarGroup names={authors} size="medium" clickable={false} />
 
         <div className={styles.author}>
           {authors && <p>{authors.join(', ')}</p>}

apps/site/components/withBlogCategories.tsx → apps/site/components/BlogCategories.tsx

@@ -8,7 +8,7 @@ import { mapAuthorToCardAuthors } from '#site/util/author';
 import type { BlogPostsRSC } from '#site/types';
 import type { ComponentProps, FC } from 'react';
 
-type WithBlogCategoriesProps = {
+type BlogCategoriesProps = {
   categories: ComponentProps<typeof LinkTabs>['tabs'];
   blogData: BlogPostsRSC & { category: string; page: number };
 };
@@ -18,10 +18,7 @@ const mapPaginationPages = (category: string, pages: number) =>
     url: `/blog/${category}/page/${page + 1}`,
   }));
 
-const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
-  categories,
-  blogData,
-}) => {
+const BlogCategories: FC<BlogCategoriesProps> = ({ categories, blogData }) => {
   const t = useTranslations();
 
   return (
@@ -58,4 +55,4 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
   );
 };
 
-export default WithBlogCategories;
+export default BlogCategories;

apps/site/components/withBlogCrossLinks.tsx → apps/site/components/BlogCrossLinks.tsx

@@ -5,7 +5,7 @@ import { getBlogData } from '#site/util/blog';
 import type { BlogCategory } from '#site/types';
 import type { FC } from 'react';
 
-const WithBlogCrossLinks: FC = () => {
+const BlogCrossLinks: FC = () => {
   const { pathname } = getClientContext();
 
   // Extracts from the static URL the components used for the Blog Post slug
@@ -48,4 +48,4 @@ const WithBlogCrossLinks: FC = () => {
   );
 };
 
-export default WithBlogCrossLinks;
+export default BlogCrossLinks;

apps/site/components/withBreadcrumbs.tsx → apps/site/components/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Breadcrumbs from '@node-core/ui-components/Common/Breadcrumbs';
+import BreadcrumbsContainer from '@node-core/ui-components/Common/Breadcrumbs';
 import { useTranslations } from 'next-intl';
 
 import Link from '#site/components/Link';
@@ -13,11 +13,11 @@ import type { NavigationKeys } from '#site/types';
 import type { BreadcrumbLink } from '@node-core/ui-components/Common/Breadcrumbs';
 import type { FC } from 'react';
 
-type WithBreadcrumbsProps = {
+type BreadcrumbsProps = {
   navKeys?: Array<NavigationKeys>;
 };
 
-const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
+const Breadcrumbs: FC<BreadcrumbsProps> = ({ navKeys = [] }) => {
   const { getSideNavigation } = useSiteNavigation();
   const t = useTranslations();
   const { pathname } = useClientContext();
@@ -64,7 +64,7 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   };
 
   return (
-    <Breadcrumbs
+    <BreadcrumbsContainer
       links={getBreadcrumbs()}
       maxLength={maxLength}
       as={Link}
@@ -73,4 +73,4 @@ const WithBreadcrumbs: FC<WithBreadcrumbsProps> = ({ navKeys = [] }) => {
   );
 };
 
-export default WithBreadcrumbs;
+export default Breadcrumbs;

apps/site/components/withDownloadSection.tsx → apps/site/components/DownloadSection.tsx

@@ -12,11 +12,11 @@ import {
 import type { NodeRelease, NodeReleaseStatus } from '../types';
 import type { FC, PropsWithChildren } from 'react';
 
-type WithDownloadSectionProps = PropsWithChildren<{
+type DownloadSectionProps = PropsWithChildren<{
   releases: Array<NodeRelease>;
 }>;
 
-const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
+const DownloadSection: FC<DownloadSectionProps> = async ({
   releases,
   children,
 }) => {
@@ -56,4 +56,4 @@ const WithDownloadSection: FC<WithDownloadSectionProps> = async ({
   );
 };
 
-export default WithDownloadSection;
+export default DownloadSection;

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -9,7 +9,7 @@ import { use, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import LinkWithArrow from '#site/components/Common/LinkWithArrow';
 import Link from '#site/components/Link';
-import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
+import ReleaseAlertBox from '#site/components/ReleaseAlertBox';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -149,7 +149,7 @@ const ReleaseCodeBox: FC = () => {
       </noscript>
 
       {/* Release status alert */}
-      <WithReleaseAlertBox release={context.release} releases={releases} />
+      <ReleaseAlertBox release={context.release} releases={releases} />
 
       {/* Community platform notice */}
       {platformInfo.exists && !platformInfo.recommended && (

apps/site/components/withFooter.tsx → apps/site/components/Footer.tsx

@@ -1,5 +1,5 @@
 import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
-import Footer from '@node-core/ui-components/Containers/Footer';
+import FooterContainer from '@node-core/ui-components/Containers/Footer';
 import { useTranslations } from 'next-intl';
 
 import { getClientContext } from '#site/client-context';
@@ -8,10 +8,10 @@ import { siteNavigation } from '#site/next.json.mjs';
 
 import type { FC } from 'react';
 
-import WithLegal from './withLegal';
+import FooterLegal from './FooterLegal';
 import WithNodeRelease from './withNodeRelease';
 
-const WithFooter: FC = () => {
+const Footer: FC = () => {
   const t = useTranslations();
   const { pathname } = getClientContext();
 
@@ -54,10 +54,10 @@ const WithFooter: FC = () => {
     </div>
   );
 
-  const legal = <WithLegal footerLinks={navigation.footerLinks} />;
+  const legal = <FooterLegal footerLinks={navigation.footerLinks} />;
 
   return (
-    <Footer
+    <FooterContainer
       navigation={navigation}
       as={Link}
       pathname={pathname}
@@ -66,4 +66,4 @@ const WithFooter: FC = () => {
   );
 };
 
-export default WithFooter;
+export default Footer;

apps/site/components/withLegal.tsx → apps/site/components/FooterLegal.tsx

@@ -31,7 +31,7 @@ const RICH_TRANSLATION_KEYS = [
   'cookiePolicy',
 ];
 
-const WithLegal: FC<LegalProps> = ({ footerLinks }) => {
+const FooterLegal: FC<LegalProps> = ({ footerLinks }) => {
   const t = useTranslations();
 
   /**
@@ -81,4 +81,4 @@ const WithLegal: FC<LegalProps> = ({ footerLinks }) => {
   );
 };
 
-export default WithLegal;
+export default FooterLegal;

apps/site/components/withLayout.tsx → apps/site/components/Layout.tsx

@@ -21,12 +21,12 @@ const layouts = {
   article: ArticlePageLayout,
 } satisfies Record<Layouts, FC>;
 
-type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
+type LayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;
 
-const WithLayout: FC<WithLayoutProps<Layouts>> = ({ layout, children }) => {
+const Layout: FC<LayoutProps<Layouts>> = ({ layout, children }) => {
   const LayoutComponent = layouts[layout] ?? DefaultLayout;
 
   return <LayoutComponent>{children}</LayoutComponent>;
 };
 
-export default WithLayout;
+export default Layout;

apps/site/components/withMetaBar.tsx → apps/site/components/MetaBar.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import MetaBar from '@node-core/ui-components/Containers/MetaBar';
+import MetaBarContainer 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 AvatarGroup from '#site/components/AvatarGroup';
 import Link from '#site/components/Link';
-import WithAvatarGroup from '#site/components/withAvatarGroup';
 import useClientContext from '#site/hooks/useClientContext';
 import useMediaQuery from '#site/hooks/useMediaQuery';
 import { DEFAULT_DATE_FORMAT } from '#site/next.calendar.constants.mjs';
@@ -15,7 +15,7 @@ import { getGitHubBlobUrl } from '#site/util/github';
 
 import type { FC } from 'react';
 
-const WithMetaBar: FC = () => {
+const MetaBar: FC = () => {
   const { headings, readingTime, frontmatter, filename } = useClientContext();
   const formatter = useFormatter();
   const lastUpdated = frontmatter.date
@@ -41,7 +41,7 @@ const WithMetaBar: FC = () => {
   const isSmallerThanDesktop = useMediaQuery('(max-width: 1280px)');
 
   return (
-    <MetaBar
+    <MetaBarContainer
       heading={t('components.metabar.tableOfContents')}
       as={Link}
       aria-label={t('components.metabar.metadata')}
@@ -52,7 +52,7 @@ const WithMetaBar: FC = () => {
           [t(
             `components.metabar.${usernames.length > 1 ? 'authors' : 'author'}`
           )]: (
-            <WithAvatarGroup
+            <AvatarGroup
               usernames={usernames}
               limit={isSmallerThanDesktop ? 5 : 8}
             />
@@ -78,4 +78,4 @@ const WithMetaBar: FC = () => {
   );
 };
 
-export default WithMetaBar;
+export default MetaBar;

apps/site/components/withNavBar.tsx → apps/site/components/NavBar.tsx

@@ -3,7 +3,7 @@
 import LanguageDropdown from '@node-core/ui-components/Common/LanguageDropDown';
 import Skeleton from '@node-core/ui-components/Common/Skeleton';
 import SkipToContentButton from '@node-core/ui-components/Common/SkipToContentButton';
-import NavBar from '@node-core/ui-components/Containers/NavBar';
+import NavBarContainer from '@node-core/ui-components/Containers/NavBar';
 // TODO(@AvivKeller): I don't like that we are importing styles from another module
 import styles from '@node-core/ui-components/Containers/NavBar/index.module.css';
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
@@ -13,9 +13,9 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 
 import Link from '#site/components/Link';
-import WithBanner from '#site/components/withBanner';
-import WithNodejsLogo from '#site/components/withNodejsLogo';
-import WithSearch from '#site/components/withSearch';
+import Search from '#site/components/Search';
+import SiteLogo from '#site/components/SiteLogo';
+import WebsiteBanner from '#site/components/WebsiteBanner';
 import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
@@ -33,7 +33,7 @@ const ThemeToggle = dynamic(
   }
 );
 
-const WithNavBar: FC = () => {
+const NavBar: FC = () => {
   const { navigationItems } = useSiteNavigation();
   const { theme, setTheme } = useTheme();
   const { replace } = useRouter();
@@ -51,9 +51,9 @@ const WithNavBar: FC = () => {
         {t('components.common.skipToContent')}
       </SkipToContentButton>
 
-      <WithBanner section="index" />
+      <WebsiteBanner section="index" />
 
-      <NavBar
+      <NavBarContainer
         navItems={navigationItems.map(
           ([, { label, link, target, accent }]) => ({
             link,
@@ -64,12 +64,12 @@ const WithNavBar: FC = () => {
         )}
         pathname={pathname}
         as={Link}
-        Logo={WithNodejsLogo}
+        Logo={SiteLogo}
         sidebarItemTogglerAriaLabel={t(
           'components.containers.navBar.controls.toggle'
         )}
       >
-        <WithSearch />
+        <Search />
 
         <ThemeToggle
           onChange={setTheme}
@@ -96,9 +96,9 @@ const WithNavBar: FC = () => {
         >
           <GitHubIcon />
         </Link>
-      </NavBar>
+      </NavBarContainer>
     </div>
   );
 };
 
-export default WithNavBar;
+export default NavBar;

apps/site/components/withReleaseAlertBox.tsx → apps/site/components/ReleaseAlertBox.tsx

@@ -6,15 +6,12 @@ import Link from '#site/components/Link';
 import type { NodeRelease } from '#site/types';
 import type { FC } from 'react';
 
-type WithReleaseAlertBoxProps = {
+type ReleaseAlertBoxProps = {
   release: NodeRelease;
   releases: Array<NodeRelease>;
 };
 
-const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({
-  release,
-  releases,
-}) => {
+const ReleaseAlertBox: FC<ReleaseAlertBoxProps> = ({ release, releases }) => {
   const t = useTranslations();
 
   switch (release.status) {
@@ -75,4 +72,4 @@ const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({
   }
 };
 
-export default WithReleaseAlertBox;
+export default ReleaseAlertBox;