Merge branch 'ADP-4947' into develop

Author: eandreeva-twr

astro.config.mjs

@@ -14,6 +14,7 @@ import { remarkTransformDetails } from './src/plugins/remark-transform-details.m
 import { remarkHeadingId } from './src/plugins/remark-heading-id.mjs';
 import { remarkTransformLinks } from './src/plugins/remark-transform-links.mjs';
 import { remarkStripImports } from './src/plugins/remark-strip-imports.mjs';
+import rehypeSlug from 'rehype-slug';
 
 // https://astro.build/config
 export default defineConfig({
@@ -41,6 +42,7 @@ export default defineConfig({
 
   markdown: {
     remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkStripImports, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
+    rehypePlugins: [rehypeSlug],
     shikiConfig: {
       theme: 'github-light',
       wrap: true,
@@ -71,6 +73,7 @@ export default defineConfig({
     sitemap(),
     mdx({
       remarkPlugins: [remarkHeadingId, remarkDirective, remarkAside, remarkStripImports, remarkTransformRequire, remarkTransformDetails, remarkTransformLinks],
+      rehypePlugins: [rehypeSlug],
       shikiConfig: {
         theme: 'github-light',
         wrap: true,

package-lock.json

@@ -24,6 +24,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-medium-image-zoom": "^5.4.0",
+    "rehype-slug": "^6.0.0",
     "remark-directive": "^4.0.0",
     "remark-heading-id": "^1.0.1",
     "remark-mdx": "^3.1.1",

package.json

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export const Layout = ({ children, title, description }: any) => {
+  return <div className="docusaurus-layout-shim">{children}</div>;
+};
+
+export const Head = ({ children }: any) => {
+  return <>{children}</>;
+};
+
+export const BrowserOnly = ({ children, fallback }: any) => {
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+  return isClient ? <>{children()}</> : <>{fallback}</>;
+};
+
+export const Link = ({ children, to, ...props }: any) => {
+  return <a href={to} {...props}>{children}</a>;
+};
+
+export default { Layout, Head, BrowserOnly, Link };