Pages

Pages

Creating new pages

New pages can be created for the documentation. To add a new page, create a new folder inside the App directory. Title the folder in lowercase using hyphens between separate words. For example, case-study. Inside the folder, create a new page file titled page.mdx.

Add content to the page by writing using Markdown syntax inside the page.mdx file. Refer to the editing section of the Wiki to review how to add text and images.

Creating a link to the new page

To add the new page to the navigation menu in the left sidebar, open the Components directory and then click on the file titled Navigation.tsx.

Inside Navigation.tsx there is an array of menu links that exported, grouped as objects for each section. The navigation array looks like so:

export const navigation: Array<NavGroup> = [
  {
    title: 'Science',
    links: [
      { title: 'Introduction', href: '/' },
      { title: 'Background', href: '/background' },
      { title: 'Regions', href: '/regions' },
      { title: 'Glossary', href: '/glossary' },
      { title: 'Links', href: '/links' },
      { title: 'Partners', href: '/partners' },
      { title: 'Case Study', href: '/case-study' },
    ],
  },
  {
    title: 'Methodology',
    links: [
      { title: 'Plantation Forests', href: '/plantation-forests' },
      { title: 'Age Class Process', href: '/age-class-process' },
      { title: 'Clearfelling', href: '/clearfelling' },
      { title: 'Depositional Zones', href: '/depositional-zones' },
      {
        title: 'Catchment Management Units',
        href: '/catchment-management-units',
      },
      { title: 'Stream Orders', href: '/stream-orders' },
      {
        title: 'River Environment Classification',
        href: '/rec',
      },
      {
        title: 'Erosion Susceptibility',
        href: '/erosion-susceptibility',
      },
      {
        title: 'Hill Slope Units',
        href: '/hill-slope-units',
      },
      {
        title: 'Analysis',
        href: '/analysis',
      },
      {
        title: 'Melton Ratio',
        href: '/melton-ratio',
      },
      {
        title: 'References',
        href: '/references',
      },
    ],
  },
  {
    title: 'Guides',
    links: [
      { title: 'Quickstart', href: '/quickstart' },
      { title: 'Guides', href: '/guides' },
      { title: 'Errors', href: '/errors' },
      { title: 'Changelog', href: '/changelog' },
    ],
  },
  {
    title: 'Data',
    links: [
      {
        title: 'Forestry Stand Calculations',
        href: '/forestry-stand-calculations-data',
      },
      {
        title: 'Hillslope Management Units',
        href: '/hillslope-management-units-data',
      },
      {
        title: 'Catchment Management Units',
        href: '/catchment-management-units-data',
      },
    ],
  },
]

Follow the pattern of adding a new object, with a title and href field — title the page in title case, and provide the href field with the exact same file name you used for the new page directory, proceeded by a forward slash. For instance, if you added a new folder titled case-study then the href field should be /case-study.

Adding metadata for the new page

To optimise the new page for search engines, you can add a metadata object within the page.mdx file. The metadata object should follow this syntax:

export const metadata = {
  title: 'Age class process',
  description:
    'Age class process detects forest stand age in order to predict when clearfell harvesting will happen at any time in the future.',
}

All of the standard metadata fields are available — view those here. The codebase already exports a default set of metadata globally, so in most cases there is no need to add more than simply the title and description metadata for new page files.

Page sections

To add page sections within a page, create h2 headings using the Markdown syntax ##. New section headings that are h2 will get anchor links so that you can share links to a specific section. To create new sub heading navigation links in the sidebar within a page, export a sections object within the the page.mdx file like so:

export const sections = [
  { title: 'Investigation', id: 'investigation' },
  { title: 'North Island results', id: 'north-island-results' },
  { title: 'South Island results', id: 'south-island-results' },
  { title: 'Example output', id: 'example-output' },
]