Add A New Page

If you want to add a new page, you must create a new Markdown or Custom page in the pages folder. In addition, you must import the page in App.tsx and create a new route. The last step is to add the new page to the navigation.

You find the pages folder in root > src > pages.

You find the App.tsx in root > src > App.tsx.

You find the Navigation in root > src > components > MainNav.tsx.

How to add a new markdown page

Create a new Markdown file in the pages folder:

The common Github Markdown is supported. In addition, you must import the Markdown file in the App.tsx, create a new route and pass the Markdown file to the MarkdownPage component:

Import as:

import tableExample from './pages/example.md';

Add route as:

...
<Routes>
...
    <Route
      path="/example"
      element={<MarkdownPage filePath={tableExample} />}
     />
...
</Routes>
...

How to add a new custom page

Create a new component file in the pages folder:

Wrap your whole content into a CustomPage component:

import { CustomPage } from '../../../components/shared/CustomPage';
export const YourPage = () => {
    return (<CustomPage>{your_content}</CustomPage>);
};

You can use all components from the shared folder to create a custom page. You can also create your own.

In addition, you must import the custom page in the App.tsx and create a new route:

Import as:

import { NeuralNetworksQuickstart } from './pages/GettingStarted/NeuralNetworksQuickstart/NeuralNetworksQuickstart';

Add route as:

...
<Routes>
...
    <Route
      path="/getting-started/neural-networks-quickstart"
      element={<NeuralNetworksQuickstart />}
    />
...
</Routes>
...

Add new link to navigation

The main navigation is defined in the MainNav component. A new entry should be wrapped from the NavLink component to have all styles and behaviors defined.

You have two options. You can define a new section via h4 or you can add the new entry to an existing section.

Adding a new section to <div calssName="main"> </div>:

<h4>New Section</h4>
<ul className="main_list">
    <NavLink href="/getting-started/neural-networks-quickstart">
      Neural Networks Quickstart
    </NavLink>
</ul>

It's importent that a new section is followed up by an unordered list (ul). If you don't want to add a new section than just add your entry to the existing unordered list 🙃

So after you followed all the steps (add a new page > add a markdown page or add a custom page > add new link to navigation) you should see the new page in the navigation and be able to open it 🎉✨🎊