Merge pull request #734 from IABTechLab/update-3.5.2

Docusaurus Update 3.5.2

blog/2021-08-26-welcome/index.md

@@ -6,3 +6,5 @@ tags: [news, release notes, announcements, uid2]
 ---
 
 Watch this space for updates, news, announcements, and other information about upcoming enhancements.
+
+<!-- truncate -->

blog/2023-04-15-first-blog-post.md

@@ -7,3 +7,5 @@ sidebar_position: 09
 ---
 
 Release of the UID2 website!
+
+<!-- truncate -->

blog/2023-05-15-long-blog-post.md

@@ -6,4 +6,6 @@ tags: [news, release notes, announcements, uid2, May]
 sidebar_position: 08
 ---
 
-Lots of stuff will have happened in May. But it hasn't happened yet...
+Lots of stuff will have happened in May. But it hasn't happened yet...
+
+<!-- truncate -->

docusaurus.config.js

@@ -307,4 +307,4 @@ const config = {
     }),
 };
 
-export default config;
+export default config;

package.json

@@ -13,38 +13,40 @@
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
-    "format:source": "prettier --loglevel warn --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "format:mdx": "prettier --loglevel warn --write \"docs/**/*.{md,mdx}\"",
+    "format:source": "prettier --log-level warn --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format:mdx": "prettier --log-level warn --write \"docs/**/*.{md,mdx}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --parser-options=project:tsconfig.json --fix",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --parser-options=project:tsconfig.json"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.2.1",
-    "@docusaurus/plugin-google-tag-manager": "^3.2.1",
-    "@docusaurus/preset-classic": "^3.2.1",
-    "@docusaurus/theme-common": "^3.1.1",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/plugin-google-tag-manager": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
+    "@docusaurus/theme-common": "^3.5.2",
     "@mdx-js/react": "^3.0.1",
-    "@types/lodash": "^4.17.0",
-    "clsx": "^2.1.0",
-    "docusaurus-plugin-sass": "^0.2.3",
+    "@types/lodash": "^4.17.10",
+    "clsx": "^2.1.1",
+    "docusaurus-plugin-sass": "^0.2.5",
     "lottie-react": "^2.4.0",
-    "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.75.0"
+    "prism-react-renderer": "^2.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "1.75.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.1.1",
+    "@docusaurus/module-type-aliases": "^3.5.2",
     "@tsconfig/docusaurus": "^2.0.3",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.7.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-mdx": "^3.1.5",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-yml": "^1.14.0",
-    "prettier": "^3.2.5",
-    "typescript": "^5.4.5"
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3"
   },
   "overrides": {
     "body-parser@1": "1.20.3",

src/components/HomepageConsumerBenefit/index.tsx

@@ -27,10 +27,10 @@ export default function HomepageConsumerBenefit(): JSX.Element {
           </h2>
           <p>
             <Translate id="homepage.benefitsCopy">
-              Unified ID 2.0 was created to be conscious of consumer privacy. 
-              Users can opt out of the use of their UID2 universally
-              by visiting the opt-out portal. Participants are required to honor
-              user opt-out requests made through the portal.
+              Unified ID 2.0 was created to be conscious of consumer privacy.
+              Users can opt out of the use of their UID2 universally by visiting
+              the opt-out portal. Participants are required to honor user
+              opt-out requests made through the portal.
             </Translate>
           </p>
         </div>

src/components/HomepagePartnersSegment/index.tsx

@@ -23,7 +23,7 @@ import uploadAnimation from "./uploadIconData.json";
 type PartnerItem = {
   heading: string;
   Svg: React.ComponentType<React.ComponentProps<"svg">>;
-  animationData: JSON;
+  animationData: Record<string, unknown>;
   url: string;
   description: string;
 };

src/theme/BlogPostItem/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import clsx from "clsx";
-import { useBlogPost } from "@docusaurus/theme-common/internal";
+import { useBlogPost } from "@docusaurus/plugin-content-blog/client";
 import BlogPostItemContainer from "@theme/BlogPostItem/Container";
 import BlogPostItemHeader from "@theme/BlogPostItem/Header";
 import BlogPostItemContent from "@theme/BlogPostItem/Content";

src/theme/BlogTagsPostsPage/index.tsx

@@ -28,8 +28,8 @@ function useBlogPostsPlural() {
             'Pluralized label for "{count} posts". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
           message: "One post|{count} posts",
         },
-        { count }
-      )
+        { count },
+      ),
     );
 }
 
@@ -41,7 +41,7 @@ function useBlogTagsPostsPageTitle(tag: Props["tag"]): string {
       description: "The title of the page for a blog tag",
       message: '{nPosts} tagged with "{tagName}"',
     },
-    { nPosts: blogPostsPlural(tag.count), tagName: tag.label }
+    { nPosts: blogPostsPlural(tag.count), tagName: tag.label },
   );
 }
 
@@ -97,7 +97,7 @@ export default function BlogTagsPostsPage(props: Props): JSX.Element {
     <HtmlClassNameProvider
       className={clsx(
         ThemeClassNames.wrapper.blogPages,
-        ThemeClassNames.page.blogTagPostListPage
+        ThemeClassNames.page.blogTagPostListPage,
       )}
     >
       <BlogTagsPostsPageMetadata {...props} />

src/theme/DocItem/Layout/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { useWindowSize } from "@docusaurus/theme-common";
-import { useDoc } from "@docusaurus/theme-common/internal";
+import { useDoc } from "@docusaurus/plugin-content-docs/client";
 import DocItemPaginator from "@theme/DocItem/Paginator";
 import DocVersionBanner from "@theme/DocVersionBanner";
 import DocVersionBadge from "@theme/DocVersionBadge";

src/theme/DocSidebarItem/Category/index.tsx

@@ -7,12 +7,12 @@ import {
   Collapsible,
   useCollapsible,
 } from "@docusaurus/theme-common";
+import { isSamePath } from "@docusaurus/theme-common/internal";
 import {
   isActiveSidebarItem,
   findFirstSidebarItemLink,
   useDocSidebarItemsExpandedState,
-  isSamePath,
-} from "@docusaurus/theme-common/internal";
+} from "@docusaurus/plugin-content-docs/client";
 import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
 import useIsBrowser from "@docusaurus/useIsBrowser";
@@ -187,7 +187,9 @@ export default function DocSidebarItemCategory({
           }
           aria-current={isCurrentPage ? "page" : undefined}
           aria-expanded={collapsible ? !collapsed : undefined}
-          href={collapsible ? hrefWithSSRFallback ?? "#" : hrefWithSSRFallback}
+          href={
+            collapsible ? (hrefWithSSRFallback ?? "#") : hrefWithSSRFallback
+          }
           {...props}
         >
           <span className="menu__label">{label}</span>

src/theme/DocSidebarItem/Html/index.tsx

@@ -17,7 +17,7 @@ export default function DocSidebarItemHtml({
         ThemeClassNames.docs.docSidebarItemLink,
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
         defaultStyle && [styles.menuHtmlItem, "menu__list-item"],
-        className
+        className,
       )}
       key={index}
       dangerouslySetInnerHTML={{ __html: value }}

src/theme/DocSidebarItem/Link/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import clsx from "clsx";
 import { ThemeClassNames } from "@docusaurus/theme-common";
-import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
+import { isActiveSidebarItem } from "@docusaurus/plugin-content-docs/client";
 import Link from "@docusaurus/Link";
 import isInternalUrl from "@docusaurus/isInternalUrl";
 import IconExternalLink from "@theme/Icon/ExternalLink";
@@ -15,7 +15,6 @@ export default function DocSidebarItemLink({
   onItemClick,
   activePath,
   level,
-  index,
   ...props
 }: Props): JSX.Element {
   const { href, label, className, autoAddBaseUrl } = item;
@@ -36,7 +35,7 @@ export default function DocSidebarItemLink({
         ThemeClassNames.docs.docSidebarItemLink,
         ThemeClassNames.docs.docSidebarItemLinkLevel(level),
         "menu__list-item",
-        className
+        className,
       )}
       key={label}
     >
@@ -46,7 +45,7 @@ export default function DocSidebarItemLink({
           !isInternalLink && styles.menuExternalLink,
           {
             "menu__link--active": isActive,
-          }
+          },
         )}
         autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? "page" : undefined}

src/theme/Footer/LinkItem/index.tsx

@@ -2,8 +2,6 @@ import React from "react";
 
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import isInternalUrl from "@docusaurus/isInternalUrl";
-import IconExternalLink from "@theme/Icon/ExternalLink";
 import type { Props } from "@theme/Footer/LinkItem";
 import { pushGtmEvent } from "@site/src/utils/pushGtmEvent";
 

src/theme/Footer/Logo/index.tsx

@@ -13,7 +13,7 @@ function LogoImage({ logo }: Props) {
 
   React.useEffect(() => {
     setIsMarketingPage(
-      document.documentElement.classList.contains("plugin-pages")
+      document.documentElement.classList.contains("plugin-pages"),
     );
   }, []);
 

src/theme/Layout/Provider/index.tsx

@@ -8,11 +8,12 @@ import { useLocation } from "@docusaurus/router";
 import {
   ColorModeProvider,
   AnnouncementBarProvider,
-  DocsPreferredVersionContextProvider,
   ScrollControllerProvider,
   NavbarProvider,
   PluginHtmlClassNameProvider,
 } from "@docusaurus/theme-common/internal";
+import { DocsPreferredVersionContextProvider } from "@docusaurus/plugin-content-docs/client";
+
 const Provider = composeProviders([
   ColorModeProvider,
   AnnouncementBarProvider,

src/theme/Navbar/ColorModeToggle/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import clsx from "clsx";
-import { useColorMode, useThemeConfig } from "@docusaurus/theme-common";
+import { useColorMode } from "@docusaurus/theme-common";
 import ColorModeToggle from "@theme/ColorModeToggle";
 import type { Props } from "@theme/Navbar/ColorModeToggle";
 

src/theme/Navbar/Content/index.tsx

@@ -1,9 +1,6 @@
 import React, { type ReactNode } from "react";
 import { useThemeConfig } from "@docusaurus/theme-common";
-import {
-  splitNavbarItems,
-  useNavbarMobileSidebar,
-} from "@docusaurus/theme-common/internal";
+import { splitNavbarItems } from "@docusaurus/theme-common/internal";
 import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
 import SearchBar from "@theme/SearchBar";
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
@@ -41,13 +38,9 @@ function NavbarContentLayout({
 }
 
 export default function NavbarContent(): JSX.Element {
-  const mobileSidebar = useNavbarMobileSidebar();
-
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
 
-  const searchBarItem = items.find((item) => item.type === "search");
-
   return (
     <NavbarContentLayout
       left={

src/theme/Navbar/Search/index.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import clsx from "clsx";
 import type { Props } from "@theme/Navbar/Search";
 
-import styles from "./styles.module.css";
-
 export default function NavbarSearch({
   children,
   className,

src/theme/TOCItems/index.tsx

@@ -1,17 +1,17 @@
-import React, {useMemo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import React, { useMemo } from "react";
+import { useThemeConfig } from "@docusaurus/theme-common";
 import {
   useTOCHighlight,
   useFilteredAndTreeifiedTOC,
   type TOCHighlightConfig,
-} from '@docusaurus/theme-common/internal';
-import TOCItemTree from '@theme/TOCItems/Tree';
-import type {Props} from '@theme/TOCItems';
+} from "@docusaurus/theme-common/internal";
+import TOCItemTree from "@theme/TOCItems/Tree";
+import type { Props } from "@theme/TOCItems";
 
 export default function TOCItems({
   toc,
-  className = 'table-of-contents table-of-contents__left-border',
-  linkClassName = 'table-of-contents__link',
+  className = "table-of-contents table-of-contents__left-border",
+  linkClassName = "table-of-contents__link",
   linkActiveClassName = undefined,
   minHeadingLevel: minHeadingLevelOption,
   maxHeadingLevel: maxHeadingLevelOption,

src/utils/index.ts

@@ -17,7 +17,7 @@ export const isInputElement = (element: Node) => {
 };
 
 export const identifyClosestSiblingInput = (
-  node: Node
+  node: Node,
 ): HTMLInputElement | null => {
   let currentElement: Node | null = node.nextSibling;
 

src/utils/useForcedDarkTheme.ts

@@ -7,7 +7,7 @@ export function useForcedDarkTheme() {
   React.useEffect(() => {
     const originalTheme = colorMode;
 
-    // The second parameter exists, it's just not on the type :(
+    //@ts-expect-error - The second parameter exists, it's just not on the type :(
     setColorMode("dark", { persist: false });
 
     return () => {

src/utils/usePrefersReducesMotion.ts

@@ -6,7 +6,7 @@ export function usePrefersReducedMotion() {
 
   React.useEffect(() => {
     const prefersReducedMotion = window.matchMedia(
-      "(prefers-reduced-motion: reduce)"
+      "(prefers-reduced-motion: reduce)",
     ).matches;
     setPrefersReducedMotion(prefersReducedMotion);
   }, []);