Adding a new route

How it works

Please, read the NextJS documentation referent to routes to get a deeper understand of this feature.

We use the NextJS feature that converts each document inside the /pages folder to a route. You can find the folder here

There are a few routes on TNRSweb already. The main route is the index, which can be accessed via htts://tnrs.xyz/. When this documentation was written, the existing routes were the following:

.
├── about.js
├── _app.js
├── cite.js
├── contribute.js
├── _document.js
├── index.js
├── instructions.js
├── sources.js
├── tnrsapi.js
└── warnings.js

Except for the files _app.js and _document.js, every other file can be accessed through <URL>/<name-of-the-file-without(.js)>. For example, you can access sources by typing https://tnrs.xyz/sources on your browser.

How to add a new route

To add a new route you need to create a file inside /pages with the name of the route that you want.

The modular architecture of TNRS already provides components to facilitate the addition of a new route.

Let's assume you want to add a new route named newroute. The first step is to create a file named newroute.js under the /pages directory.

The code below is an example of the basics of what you might include in your file. The component Layout comes with the navigation bar and the footer. It also inserts the correct margin to the page.

import { Layout } from "../components";

import { Typography } from "@material-ui/core";

export default function NewRoute() {
  return (
    <Layout>
      <Typography>New Route</Typography>
    </Layout>
  );
}

The code provided above should show the navigation bar + footer + the text New Route at the center.

TNRSweb has two types of menus. One for desktops and one for low-resolution mobile devices. If you want to include the new route in the navigation bar you need to add the references in top-bar component.

You will need to include one entry to each menu.

One to the TopBar function:

<Link href="/newroute" passHref>
    <Button size="small" component="a" color="inherit">
        New Route
    </Button>
</Link>

And the other to the LowResMenu function:

<MenuItem onClick={handleClose} component={MUILink} href="/tnrsapi">
    Api
</MenuItem>

That should be it.