base-org · kirkas · Aug 14, 2024
diff --git a/apps/base-docs/base-learn/docs/structs/structs-exercise.md b/apps/base-docs/base-learn/docs/structs/structs-exercise.md
@@ -75,8 +75,9 @@ import CafeUnitTest from '../../../src/components/CafeUnitTest/index.jsx'
 
 <br/>
 <details>
-  <summary>
-    ⚠️ Spoiler Alert: Open only if tests fail</summary>
+<summary>
+  ⚠️ Spoiler Alert: Open only if tests fail
+</summary>
 
 Ensure your variable sizes align with their intended use, and consider the nuances of packing in Solidity. Resources: [Solidity - Layout in Storage](https://docs.soliditylang.org/en/v0.8.17/internals/layout_in_storage.html#layout-of-state-variables-in-storage), [Variables in Struct](https://docs.base.org/base-learn/docs/structs/structs-sbs#setting-up-the-struct)
 

diff --git a/apps/base-docs/docusaurus.config.js b/apps/base-docs/docusaurus.config.js
@@ -18,8 +18,8 @@ const baseConfig = {
   },
 };
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/oceanicNext');
+const lightCodeTheme = require('prism-react-renderer/').themes.github;
+const darkCodeTheme = require('prism-react-renderer/').themes.oceanicNext;
 
 const APP_TITLE = 'Base';
 const PRODUCT_NAME = 'Base';

diff --git a/apps/base-docs/package.json b/apps/base-docs/package.json
@@ -19,9 +19,9 @@
   "dependencies": {
     "@coinbase/cookie-banner": "^1.0.3",
     "@coinbase/cookie-manager": "^1.1.1",
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@mdx-js/react": "^3.0.1",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tanstack/react-query": "^5.51.11",
@@ -45,14 +45,14 @@
     "wagmi": "^2.5.19"
   },
   "devDependencies": {
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/logger": "2.4.3",
-    "@docusaurus/module-type-aliases": "2.4.3",
-    "@docusaurus/plugin-client-redirects": "^2.4.3",
-    "@docusaurus/plugin-content-docs": "2.4.3",
-    "@docusaurus/plugin-content-pages": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@docusaurus/theme-common": "2.4.3",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/logger": "3.5.2",
+    "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/plugin-client-redirects": "^3.5.2",
+    "@docusaurus/plugin-content-docs": "3.5.2",
+    "@docusaurus/plugin-content-pages": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/theme-common": "3.5.2",
     "@tsconfig/docusaurus": "^1.0.5"
   },
   "browserslist": {

diff --git a/apps/base-docs/src/components/DocFeedback/index.tsx b/apps/base-docs/src/components/DocFeedback/index.tsx
@@ -1,9 +1,10 @@
 import { useState, useCallback } from 'react';
-import { useDoc } from '@docusaurus/theme-common/internal';
+
 import FeedbackModal from './FeedbackModal';
 import Icon from '../Icon';
 
 import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const logDocFeedback = (isHelpful: boolean, reason?: string) => {
   if (window.ClientAnalytics) {
@@ -79,8 +80,8 @@ export default function DocFeedback() {
     setVisible(false);
   }, []);
 
-  const { metadata } = useDoc();
-  const docFilePath = metadata.source.slice(6); // Remove @site/ from file path
+  const { siteMetadata } = useDocusaurusContext();
+  // const docFilePath = siteMetadata.source.slice(6); // Remove @site/ from file path
 
   return (
     <div className={styles.docFeedbackContainer}>
@@ -95,7 +96,7 @@ export default function DocFeedback() {
           {helpful === false && <Icon name="thumbs-down-filled" width="20" height="20" />}
         </button>
       </div>
-      <a
+      {/* <a
         href={`https://github.com/base-org/web/blob/master/apps/base-docs/${docFilePath}?plain=1`}
         target="_blank"
         className={styles.editDocLink}
@@ -119,7 +120,7 @@ export default function DocFeedback() {
           onSubmit={handleNotHelpfulModalSubmit}
           options={notHelpfulReasons}
         />
-      )}
+      )} */}
     </div>
   );
 }
diff --git a/apps/base-docs/src/theme/DocItem/Content/index.js b/apps/base-docs/src/theme/DocItem/Content/index.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import clsx from 'clsx';
 import { ThemeClassNames } from '@docusaurus/theme-common';
-import { useDoc } from '@docusaurus/theme-common/internal';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
 
@@ -13,6 +12,7 @@ import tutorialData from '../../../../tutorials/data.json';
 import authors from '@app/base-docs/static/json/authors.json';
 
 import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 /**
  Title can be declared inside md content or declared through
@@ -25,19 +25,20 @@ import styles from './styles.module.css';
  - the markdown content does not already contain a top-level h1 heading
 */
 function useSyntheticTitle() {
-  const { metadata, frontMatter, contentTitle } = useDoc();
-  const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  const { siteMetadata, frontMatter, contentTitle } = useDocusaurusContext();
+  // const shouldRender = !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  const shouldRender = true;
   if (!shouldRender) {
     return null;
   }
-  return metadata.title;
+  return siteMetadata.title;
 }
 export default function DocItemContent({ children }) {
-  const { frontMatter } = useDoc();
+  const { siteMetadata } = useDocusaurusContext();
   const syntheticTitle = useSyntheticTitle();
-  const tutorial =
-    frontMatter && frontMatter.slug ? tutorialData[frontMatter.slug.substring(1)] : null;
-  const authorData = tutorial ? authors[tutorial.author] : null;
+  // const tutorial =
+  //   frontMatter && frontMatter.slug ? tutorialData[frontMatter.slug.substring(1)] : null;
+  // const authorData = tutorial ? authors[tutorial.author] : null;
 
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
@@ -46,7 +47,7 @@ export default function DocItemContent({ children }) {
           <header>
             <Heading as="h1">{syntheticTitle}</Heading>
           </header>
-          {tutorial && authorData && (
+          {/* {tutorial && authorData && (
             <div className={clsx(styles.tutorialInfo)}>
               {authorData && authorData.link && (
                 <a
@@ -64,7 +65,7 @@ export default function DocItemContent({ children }) {
               <p>{tutorial.last_updated ? tutorial.last_updated : ''}</p>
               <p>{tutorial.duration ? tutorial.duration : ''}</p>
             </div>
-          )}
+          )} */}
         </div>
       )}
       <MDXContent>{children}</MDXContent>

diff --git a/apps/base-docs/src/theme/DocItem/Layout/index.js b/apps/base-docs/src/theme/DocItem/Layout/index.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import clsx from 'clsx';
 import { useWindowSize } from '@docusaurus/theme-common';
-import { useDoc } from '@docusaurus/theme-common/internal';
 // import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -12,14 +11,17 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 // import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import styles from './styles.module.css';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
 function useDocTOC() {
-  const { metadata, frontMatter, toc } = useDoc();
+  const { metadata, frontMatter, toc } = useDocusaurusContext();
   const windowSize = useWindowSize();
-  const hidden = frontMatter.hide_table_of_contents;
-  const canRender = !hidden && toc.length > 0;
+  // const hidden = frontMatter.hide_table_of_contents;
+  const hidden = false;
+  // const canRender = !hidden && toc.length > 0;
+  const canRender = true;
   const mobile = canRender ? <DocItemTOCMobile /> : undefined;
   const desktop =
     canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (

diff --git a/apps/base-docs/src/theme/DocSidebarItem/Category/index.js b/apps/base-docs/src/theme/DocSidebarItem/Category/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo} from 'react';
+import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   ThemeClassNames,
@@ -8,18 +8,20 @@ import {
   useCollapsible,
 } from '@docusaurus/theme-common';
 import {
-  isActiveSidebarItem,
   findFirstCategoryLink,
-  useDocSidebarItemsExpandedState,
   isSamePath,
+  useLocalPathname,
+  useNavbarSecondaryMenu,
+  useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
-import {translate} from '@docusaurus/Translate';
+import { translate } from '@docusaurus/Translate';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
-function useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed}) {
+function useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed }) {
   const wasActive = usePrevious(isActive);
   useEffect(() => {
     const justBecameActive = isActive && !wasActive;
@@ -50,17 +52,16 @@ function useCategoryHrefWithSSRFallback(item) {
     return findFirstCategoryLink(item);
   }, [item, isBrowser]);
 }
-function CollapseButton({categoryLabel, onClick}) {
+function CollapseButton({ categoryLabel, onClick }) {
   return (
     <button
       aria-label={translate(
         {
           id: 'theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel',
           message: "Toggle the collapsible sidebar category '{label}'",
-          description:
-            'The ARIA label to toggle the collapsible sidebar category',
+          description: 'The ARIA label to toggle the collapsible sidebar category',
         },
-        {label: categoryLabel},
+        { label: categoryLabel },
       )}
       type="button"
       className="clean-btn menu__caret"
@@ -76,16 +77,19 @@ export default function DocSidebarItemCategory({
   index,
   ...props
 }) {
-  const {items, label, collapsible, className, href} = item;
+  const { items, label, collapsible, className, href } = item;
   const {
     docs: {
-      sidebar: {autoCollapseCategories},
+      sidebar: { autoCollapseCategories },
     },
   } = useThemeConfig();
   const hrefWithSSRFallback = useCategoryHrefWithSSRFallback(item);
-  const isActive = isActiveSidebarItem(item, activePath);
-  const isCurrentPage = isSamePath(href, activePath);
-  const {collapsed, setCollapsed} = useCollapsible({
+  const path = useLocalPathname();
+
+  // const isActive = isActiveSidebarItem(item, activePath);
+  const isActive = path === activePath;
+  const isCurrentPage = isActive;
+  const { collapsed, setCollapsed } = useCollapsible({
     // Active categories are always initialized as expanded. The default
     // (`item.collapsed`) is only used for non-active categories.
     initialState: () => {
@@ -95,23 +99,24 @@ export default function DocSidebarItemCategory({
       return isActive ? false : item.collapsed;
     },
   });
-  const {expandedItem, setExpandedItem} = useDocSidebarItemsExpandedState();
+  // const { expandedItem, setExpandedItem } = useDocSidebarItemsExpandedState();
+
+  const blue = useNavbarMobileSidebar();
+  const bla = useNavbarSecondaryMenu();
+  console.log({ blue, bla });
+
+  // const test = useexpan;
   // Use this instead of `setCollapsed`, because it is also reactive
   const updateCollapsed = (toCollapsed = !collapsed) => {
-    setExpandedItem(toCollapsed ? null : index);
+    // setExpandedItem(toCollapsed ? null : index);
     setCollapsed(toCollapsed);
   };
-  useAutoExpandActiveCategory({isActive, collapsed, updateCollapsed});
-  useEffect(() => {
-    if (
-      collapsible &&
-      expandedItem != null &&
-      expandedItem !== index &&
-      autoCollapseCategories
-    ) {
-      setCollapsed(true);
-    }
-  }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
+  useAutoExpandActiveCategory({ isActive, collapsed, updateCollapsed });
+  // useEffect(() => {
+  //   if (collapsible && expandedItem != null && expandedItem !== index && autoCollapseCategories) {
+  //     setCollapsed(true);
+  //   }
+  // }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
   return (
     <li
       className={clsx(
@@ -122,11 +127,13 @@ export default function DocSidebarItemCategory({
           'menu__list-item--collapsed': collapsed,
         },
         className,
-      )}>
+      )}
+    >
       <div
         className={clsx('menu__list-item-collapsible', {
           'menu__list-item-collapsible--active': isCurrentPage,
-        })}>
+        })}
+      >
         <Link
           className={clsx('menu__link', {
             'menu__link--sublist': collapsible,
@@ -151,7 +158,8 @@ export default function DocSidebarItemCategory({
           aria-current={isCurrentPage ? 'page' : undefined}
           aria-expanded={collapsible ? !collapsed : undefined}
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
-          {...props}>
+          {...props}
+        >
           {label}
         </Link>
         {href && collapsible && (

diff --git a/apps/base-docs/src/theme/DocSidebarItem/Link/index.js b/apps/base-docs/src/theme/DocSidebarItem/Link/index.js
@@ -1,12 +1,16 @@
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {isActiveSidebarItem} from '@docusaurus/theme-common/internal';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useLocalPathname } from '@docusaurus/theme-common/internal';
 import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
-import logEvent, { ActionType, AnalyticsEventImportance, ComponentType } from 'base-ui/utils/logEvent';
+import logEvent, {
+  ActionType,
+  AnalyticsEventImportance,
+  ComponentType,
+} from 'base-ui/utils/logEvent';
 export default function DocSidebarItemLink({
   item,
   onItemClick,
@@ -15,8 +19,13 @@ export default function DocSidebarItemLink({
   index,
   ...props
 }) {
-  const {href, label, className, autoAddBaseUrl} = item;
-  const isActive = isActiveSidebarItem(item, activePath);
+  const { href, label, className, autoAddBaseUrl } = item;
+
+  console.log({ item });
+  const path = useLocalPathname();
+
+  // const isActive = isActiveSidebarItem(item, activePath);
+  const isActive = path === activePath;
   const isInternalLink = isInternalUrl(href);
   const linkClick = useCallback(() => {
     const eventData = {
@@ -38,20 +47,18 @@ export default function DocSidebarItemLink({
         'menu__list-item',
         className,
       )}
-      key={label}>
+      key={label}
+    >
       <Link
-        className={clsx(
-          'menu__link',
-          !isInternalLink && styles.menuExternalLink,
-          {
-            'menu__link--active': isActive,
-          },
-        )}
+        className={clsx('menu__link', !isInternalLink && styles.menuExternalLink, {
+          'menu__link--active': isActive,
+        })}
         autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? 'page' : undefined}
         to={href}
         onClick={linkClick}
-        {...props}>
+        {...props}
+      >
         {label}
         {!isInternalLink && <IconExternalLink />}
       </Link>