fix(nx-dev): adjust scroll offset for headings on docs and blog container

Author: juristr

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -37,6 +37,7 @@ export function DocViewer({
     document.content.toString(),
     {
       filePath: document.filePath,
+      headingClass: 'scroll-mt-8',
     }
   );
 

nx-dev/ui-blog/src/lib/blog-details.tsx

@@ -32,6 +32,7 @@ export async function generateMetadata({ post }: BlogDetailsProps) {
 export function BlogDetails({ post }: BlogDetailsProps) {
   const { node } = renderMarkdown(post.content, {
     filePath: post.filePath ?? '',
+    headingClass: 'scroll-mt-20',
   });
 
   const formattedDate = new Date(post.date).toLocaleDateString('en-US', {

nx-dev/ui-markdoc/src/index.ts

@@ -9,7 +9,7 @@ import {
 import { load as yamlLoad } from '@zkochan/js-yaml';
 import React, { ReactNode } from 'react';
 import { Heading } from './lib/nodes/heading.component';
-import { heading } from './lib/nodes/heading.schema';
+import { getHeadingSchema } from './lib/nodes/heading.schema';
 import { getImageSchema } from './lib/nodes/image.schema';
 import { CustomLink } from './lib/nodes/link.component';
 import { link } from './lib/nodes/link.schema';
@@ -63,12 +63,13 @@ import { VideoPlayer, videoPlayer } from './lib/tags/video-player.component';
 export { GithubRepository } from './lib/tags/github-repository.component';
 
 export const getMarkdocCustomConfig = (
-  documentFilePath: string
+  documentFilePath: string,
+  headingClass: string = ''
 ): { config: any; components: any } => ({
   config: {
     nodes: {
       fence,
-      heading,
+      heading: getHeadingSchema(headingClass),
       image: getImageSchema(documentFilePath),
       link,
     },
@@ -156,14 +157,17 @@ export const extractFrontmatter = (
 
 export const renderMarkdown: (
   documentContent: string,
-  options: { filePath: string }
+  options: { filePath: string; headingClass?: string }
 ) => {
   metadata: Record<string, any>;
   node: ReactNode;
   treeNode: RenderableTreeNode;
 } = (documentContent, options = { filePath: '' }) => {
   const ast = parseMarkdown(documentContent);
-  const configuration = getMarkdocCustomConfig(options.filePath);
+  const configuration = getMarkdocCustomConfig(
+    options.filePath,
+    options.headingClass
+  );
   const treeNode = transform(ast, configuration.config);
 
   return {

nx-dev/ui-markdoc/src/lib/nodes/heading.schema.ts

@@ -41,7 +41,7 @@ export function generateID(
     .replace(/\s+/g, '-');
 }
 
-export const heading: Schema = {
+export const getHeadingSchema = (headingClass: string): Schema => ({
   render: 'Heading',
   children: ['inline'],
   attributes: {
@@ -58,8 +58,8 @@ export const heading: Schema = {
     return new Tag(
       this.render,
       // `h${node.attributes['level']}`,
-      { ...attributes, id },
+      { ...attributes, id, className: headingClass },
       children
     );
   },
-};
+});