fix(misc): fixed toc issue and other minor issues (#859)

fetchai · Aug 14, 2024 · e98700c · e98700c
1 parent f75e25b
commit e98700c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/components/landing-page.tsx b/components/landing-page.tsx
@@ -143,7 +143,7 @@ function LandingPage() {
     <section className={styles.page}>
       <div className={styles.headingSection}>
         <p className={styles.welcomeText}>Welcome to</p>
-        <p className={styles.mainTitle}>The Fetch.ai developer portal</p>
+        <h1 className={styles.mainTitle}>The Fetch.ai developer portal</h1>
         <p className={styles.description}>
           Explore our documentation, guides and examples to get to know Fetch.ai
           tools and products. Create an account to claim badges, and take part

diff --git a/theme/fetch-ai-docs/components/head.tsx b/theme/fetch-ai-docs/components/head.tsx
@@ -13,6 +13,7 @@ export function Head(): ReactElement {
   const { resolvedTheme } = useTheme();
   const mounted = useMounted();
   const router = useRouter();
+  const DOMAIN = "https://fetch.ai";
 
   // `head` can be either FC or ReactNode. We have to directly call it if it's an
   // FC because hooks like Next.js' `useRouter` aren't allowed inside NextHead.
@@ -28,7 +29,7 @@ export function Head(): ReactElement {
       <NextSeo
         title={config.title}
         description={frontMatter.description}
-        canonical={`${router.basePath}${router.pathname}`}
+        canonical={`${DOMAIN}${router.basePath}${router.pathname}`}
         openGraph={frontMatter.openGraph}
         {...config.useNextSeoProps?.()}
       />

diff --git a/theme/fetch-ai-docs/components/toc.tsx b/theme/fetch-ai-docs/components/toc.tsx
@@ -99,27 +99,26 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
                 </a>
               </li>
             ))}
+            {hasMetaInfo && (
+              <div
+                className={cn(
+                  hasHeadings &&
+                    "nx-border-t nx-bg-white nx-pt-4 nx-shadow-[0_-12px_16px_white] dark:nx-bg-dark dark:nx-shadow-[0_-12px_16px_#111]",
+                  "nx-sticky nx-bottom-0 nx-flex nx-flex-col nx-items-start nx-gap-2 nx-pb-8 dark:nx-border-neutral-800",
+                  "contrast-more:nx-border-t contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-border-neutral-400",
+                )}
+              >
+                {renderComponent(config.editLink.component, {
+                  filePath,
+                  className: linkClassName,
+                  children: renderComponent(config.editLink.text),
+                })}
+                {renderComponent(config.toc.extraContent)}
+              </div>
+            )}
           </ul>
         </>
       )}
-
-      {hasMetaInfo && (
-        <div
-          className={cn(
-            hasHeadings &&
-              "nx-border-t nx-bg-white nx-pt-4 nx-shadow-[0_-12px_16px_white] dark:nx-bg-dark dark:nx-shadow-[0_-12px_16px_#111]",
-            "nx-sticky nx-bottom-0 nx-flex nx-flex-col nx-items-start nx-gap-2 nx-pb-8 dark:nx-border-neutral-800",
-            "contrast-more:nx-border-t contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-border-neutral-400",
-          )}
-        >
-          {renderComponent(config.editLink.component, {
-            filePath,
-            className: linkClassName,
-            children: renderComponent(config.editLink.text),
-          })}
-          {renderComponent(config.toc.extraContent)}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/theme/fetch-ai-docs/index.tsx b/theme/fetch-ai-docs/index.tsx
@@ -29,17 +29,23 @@ import FeedbackComponent from "components/feedback";
 import type { Item } from "nextra/normalize-pages";
 import { setCookie } from "cookies-next";
 import Error404 from "components/error-404";
-import { useActiveAnchor } from "./contexts";
 
 type MyItem = Item & {
   // Add or modify properties as needed
   tags?: string[];
   permission: string[];
 };
 
+type Heading = {
+  depth: number;
+  value: string;
+  id: string;
+};
+
 interface BodyProps {
   themeContext: PageTheme;
   breadcrumb: ReactNode;
+  headings: Heading[];
   timestamp?: number;
   navigation: ReactNode;
   tags: string[] | null;
@@ -65,6 +71,7 @@ const Body = ({
   tags,
   children,
   directoriesWithTags,
+  headings,
 }: BodyProps): ReactElement => {
   const config = useConfig();
   const mounted = useMounted();
@@ -123,13 +130,10 @@ const Body = ({
     </div>
   );
 
-  const tocData = useActiveAnchor();
-  const structuredHeadings = Object.entries(tocData).map(([key, value]) => ({
-    // eslint-disable-next-line unicorn/prefer-string-replace-all
-    value: key.replace(/-/g, " "),
-    id: key,
-    depth: 2,
-    isActive: value.isActive,
+  const structuredHeadings = headings.map((heading) => ({
+    value: heading.value,
+    id: heading.id,
+    depth: heading.depth,
   }));
 
   const routeOriginal = useFSRoute();
@@ -311,6 +315,7 @@ const InnerLayout = ({
           />
           <SkipNavContent />
           <Body
+            headings={headings}
             themeContext={themeContext}
             breadcrumb={
               activeType !== "page" && themeContext.breadcrumb ? (