chore(website): fix github edit links for docs (#1550)

docs/README.md

@@ -48,7 +48,7 @@ Details which different generator options are supported.
 ### [Presets](./presets.md)
 Goes more in-depth into how the preset system works, which enables full customization of generators.
 
-### [Interpretation of JSON Schema](./inputs/json-schema.md)
+### [Interpretation of JSON Schema](./inputs/json_schema.md)
 Explains how a JSON Schema is interpreted to a data model.
 
 ### [Migration](./migrations/README.md)

modelina-website/scripts/build-docs.js

@@ -43,13 +43,14 @@ async function buildDocsTree(rootPath) {
   if (!fileStat.isDirectory()) {
     //Ignore non-markdown and README files
     if(rootPath.endsWith('.md') && !rootPath.includes('README')) {
+      const relativeRootPath = rootPath.split(MODELINA_ROOT_PATH)[1];
       let title = path.basename(rootPath, '.md');
       title = title.replace(/_/g, ' ');
       title = title.replace(/-/g, ' ');
       title = title.charAt(0).toUpperCase() + title.slice(1);
       let content = await readFile(rootPath, "utf8");
       content = prepareContent(content);
-      return {type: 'file', fullPath: rootPath, slug: slug.split('.md')[0], title, content};
+      return {type: 'file', fullPath: rootPath, relativeRootPath: relativeRootPath, slug: slug.split('.md')[0], title, content};
     }
     return undefined;
   }
@@ -85,8 +86,9 @@ async function buildDocsTree(rootPath) {
     if(tree !== undefined) subPaths.push(tree);
   }
   const folderName = path.basename(rootPath);
+  const relativeRootPath = rootPath.split(MODELINA_ROOT_PATH)[1] + '/README.md';
   const pascalFolderName = folderName.replace(/(\w)(\w*)/g, function(g0,g1,g2){return g1.toUpperCase() + g2.toLowerCase();});
-  return {type: 'dir', fullPath: rootPath, title: pascalFolderName, slug, subPaths, content: readmeContent};
+  return {type: 'dir', fullPath: rootPath, relativeRootPath: relativeRootPath, title: pascalFolderName, slug, subPaths, content: readmeContent};
 }
 
 function unwrapTree(tree) {

modelina-website/src/components/docs/Docs.tsx

@@ -8,7 +8,6 @@ import CodeBlock from '../CodeBlock';
 import rehypeRaw from 'rehype-raw';
 import GithubButton from '../buttons/GithubButton';
 
-
 interface WithRouterProps {
   router: NextRouter;
 }
@@ -34,6 +33,9 @@ class Docs extends React.Component<
     this.renderMenuTree = this.renderMenuTree.bind(this);
 
   }
+  /**
+   * Render the menu items dynamically in a depth first approach
+   */
   renderMenuTree(value: any, isRoot: boolean) {
     const isSelected = value.slug === `/docs/${this.props.slug}`;
     if(value.type === 'dir') {
@@ -44,8 +46,8 @@ class Docs extends React.Component<
       } else {
         headerReadme = <li key={value.slug} className={`p-2`}>{value.title}</li>;
       }
-      return <>{headerReadme}<li>
-        <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+      return <>{headerReadme}<li key={`${value.slug}-li`}>
+        <ul key={`${value.slug}-ul`} className='border-l border-gray-200 pl-4 ml-3 mt-1'>
           {isRoot && <li key={'apidocs'} className={`cursor-pointer p-2`}><a href={'/apidocs'}>API Docs</a></li>}
           {value.subPaths.map((subPath: any) => this.renderMenuTree(subPath, false))}
         </ul>
@@ -54,9 +56,11 @@ class Docs extends React.Component<
       return <li key={value.slug} className={`cursor-pointer ${isSelected && 'bg-sky-500/[.3]'} p-2`} onClick={() => { this.setState({ showMenu: false }) }}><a href={`/docs/${value.slug}`}>{value.title}</a></li>;
     }
   }
+
   render() {
     let { showMenu } = this.state;
     const menuItems = this.renderMenuTree(DocsList.tree, true);
+    const item = (DocsList.unwrapped as any)[this.props.slug];
     return (
       <div className="py-4 lg:py-8">
         <div className="bg-white px-4 sm:px-6 lg:px-8 w-full xl:max-w-7xl xl:mx-auto">
@@ -102,7 +106,7 @@ class Docs extends React.Component<
                     </div>
                     <div className="flex-1 h-0 pt-5 overflow-y-auto">
                       <nav className="mt-5 px-2 mb-4">
-                        <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+                        <ul key="rootMenuList" className='border-l border-gray-200 pl-4 ml-3 mt-1'>
                           { menuItems }
                         </ul>
                       </nav>
@@ -130,7 +134,7 @@ class Docs extends React.Component<
               <div className={"flex md:justify-end my-4 md:my-0"}>
                 <GithubButton
                   text="Edit on GitHub"
-                  href={`https://github.com/asyncapi/modelina/edit/master/docs/${this.props.slug}`}
+                  href={`https://github.com/asyncapi/modelina/edit/master${item.relativeRootPath}`}
                   inNav="true"
                 />
               </div>