Merge pull request #53 from AirWalk-Digital/beta-scroll-location

fix(scroll location): scroll to anchor works

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

src/_components/Layouts/ContentLoader.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import components from '@/components/Layouts/lib/mdxComponents';
 import type { ContentItem } from '@/lib/Types';
 
+import { topBarHeight } from './constants';
 import { loadMDX } from './lib/loadMDX';
 // import { mdComponents } from '../../constants/mdxProvider.js';
 
@@ -21,7 +22,7 @@ function ContentSkeleton() {
   return (
     <div
       style={{
-        marginTop: 64,
+        marginTop: topBarHeight,
         paddingLeft: 0,
       }}
     >

src/_components/Layouts/ContentPrint.tsx

@@ -19,7 +19,7 @@ export default function ContentPrint({ children }: PagedOutputProps) {
   const currentPath = usePathname();
 
   function handleClose() {
-    const pathnameArray = currentPath.split('/');
+    const pathnameArray = currentPath?.split('/') ?? [];
 
     // Replace 'print' with 'view' in the URL path
     pathnameArray[2] = 'view';

src/_components/Layouts/ContentViewer.tsx

@@ -24,6 +24,7 @@ import { ContentMenu, TableOfContents } from '@/components/Menus';
 import { getLogger } from '@/lib/Logger';
 import type { ContentItem, RelatedContent } from '@/lib/Types';
 
+import { topBarHeight } from './constants';
 import { loadMDX } from './lib/loadMDX';
 // import { mdComponents } from '../../constants/mdxProvider.js';
 const logger = getLogger().child({ namespace: 'ContentViewer' });
@@ -42,7 +43,7 @@ interface ContentViewerProps {
   relatedContent: RelatedContent;
 }
 
-function ContentSkeleton({ topBarHeight }: { topBarHeight: number }) {
+function ContentSkeleton() {
   return (
     <div
       style={{
@@ -63,8 +64,6 @@ export function ContentViewer({
   loading,
   relatedContent,
 }: ContentViewerProps) {
-  const topBarHeight = 64;
-
   logger.info({
     msg: 'ContentViewer',
     pageContent,
@@ -114,7 +113,7 @@ export function ContentViewer({
   }
 
   if (loading) {
-    return <ContentSkeleton topBarHeight={topBarHeight} />;
+    return <ContentSkeleton />;
   }
   if (pageContent) {
     let frontmatter;

src/_components/Layouts/TopBar.tsx

@@ -25,11 +25,12 @@ import { usePathname, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
 import { siteConfig } from '../../../site.config';
+import { topBarHeight } from './constants';
 // import logo from '../../public/logos/airwalk-logo.png';
 const Logo = styled('img')({
   display: 'block',
   width: 'auto',
-  height: 64,
+  height: topBarHeight,
 });
 
 export interface ComponentProps {

src/_components/Layouts/constants.ts

@@ -0,0 +1 @@
+export const topBarHeight = 64;

src/_components/Layouts/lib/CopyButton.tsx

@@ -1,5 +1,3 @@
-import 'react-toastify/dist/ReactToastify.css';
-
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import { Alert, IconButton, Snackbar } from '@mui/material';
 import * as React from 'react';

src/_components/Layouts/lib/mdxComponents.tsx

@@ -8,6 +8,7 @@ import type { ContentItem } from '@/lib/Types';
 import { palette } from '@/styles/baseTheme';
 import { getContrastYIQ } from '@/styles/lib/colors';
 
+import { topBarHeight } from '../constants';
 import { CopyButton } from './CopyButton';
 
 // const StatRoot = styled('table', {
@@ -60,6 +61,21 @@ const components = (baseContext: ContentItem) => ({
   table: (props: any) => <Table>{props.children}</Table>,
   pre: (props: any) => props.children,
   img: (props: any) => <MdxImage props={props} baseContext={baseContext} />,
+  h2: (props: any) => (
+    <h2 id={props.id} style={{ scrollMarginTop: topBarHeight }}>
+      {props.children}
+    </h2>
+  ),
+  h3: (props: any) => (
+    <h3 id={props.id} style={{ scrollMarginTop: topBarHeight }}>
+      {props.children}
+    </h3>
+  ),
+  h4: (props: any) => (
+    <h4 id={props.id} style={{ scrollMarginTop: topBarHeight }}>
+      {props.children}
+    </h4>
+  ),
   code: (props: any) => {
     const { className } = props;
     const language = className?.replace('language-', '');

src/app/layout.tsx

@@ -14,7 +14,7 @@ export const metadata = {
 
 export default function RootLayout(props: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <html lang='en' style={{ scrollBehavior: 'smooth' }}>
       <body>
         <AppRouterCacheProvider options={{ enableCssLayer: true }}>
           <ThemeProvider theme={baseTheme}>