Skip to main content
Version: Next

Pages

pages.json

Create a src/vision/layouts/pages.json file (case-sensitive)

The src/vision/layouts/pages.json file is responsible for:

  • Defining what OML Vision can render
    • Home Page
      • Titles
      • Icons
    • Sidebar
      • Titles
      • Icons
    • Child Pages
      • Titles
      • Table, Tree, or Diagram
      • Icons
  • Defining the path to the content that OML Vision renders

It is formatted as a JSON data structure.

An example of what this looks like is seen below with the source code found here

[
  { "title": "Home", "path": "/", "treeIcon": "home" },
  {
    "title": "Kepler16b",
    "treeIcon": "server",
    "iconUrl": "https://nasa-jpl.github.io/stellar/icons/satellite.svg",
    "children": [
      { 
        "title": "Objectives",
        "treeIcon": "window",
        "path": "objectives" 
      },
      {
        "title": "Missions",
        "treeIcon": "graph-scatter",
        "path": "missions",
        "isDiagram": true
      },
      {
        "title": "Components",
        "treeIcon": "list-tree",
        "path": "components",
        "isTree": true
      },
      {
        "title": "Connections",
        "treeIcon": "window",
        "path": "connections"
      },
      {
        "title": "Requirements",
        "treeIcon": "list-tree",
        "path": "requirements",
        "isTree": true
      }
    ]
  }
]

Home Page​

The home page acts as an entry point for users to navigate through the pages that OML Vision renders.

Home Page

title​

REQUIRED
title: string

This string defines the title of the home page. A good name for the home page is "Home" or "Frontpage"

USER INTERFACE

The name of the title is rendered in the sidebar for the OML Vision extension shown in the red boxes.

Title Home Page

path​

REQUIRED
path: string

This string defines the path of the page.

For the Home Page the path must be /

USER INTERFACE

The name of the path is rendered in the sidebar when you hover and hold for 2 seconds over the Home Page in the OML Vision extension shown in the red boxes.

Path Home Page

treeIcon​

OPTIONAL
treeIcon: string

This string defines the icon to be rendered in the sidebar next to the Title of the page.

A full list of available icons can be seen here. Use the default codicon ID as the value of the treeIcon

USER INTERFACE

The Home Page icon of the treeIcon is rendered in the sidebar for the OML Vision extension shown in the red boxes.

Path Home Page

Child Pages​

Child pages are pages that are grouped with other similar pages. The paths to these pages are rendered in the sidebar and in the Home Page shown in the red boxes.

OML Vision supports more than 1 child page.

Child Page

title​

REQUIRED
title: string

This string defines the title of the child page.

USER INTERFACE

The name of the title is rendered in the sidebar and in the Home Page.

treeIcon​

OPTIONAL
treeIcon: string

This string defines the icon to be rendered in the sidebar next to the Title of the page.

A full list of available icons can be seen here. Use the default codicon ID as the value of the treeIcon

USER INTERFACE

The Child Page icon of the treeIcon is rendered in the sidebar for the OML Vision extension.

iconUrl​

REQUIRED
iconUrl: string

This string defines the path of the icon that is rendered in the home page.

Supported image file formats are .svg, .png, or .jpg

USER INTERFACE

The Child Page icon of the iconUrl is rendered in the Home Page in the OML Vision extension shown in the red boxes.

Icon URL Child Page

children​

REQUIRED
children: {
    title: string;
    path: string;
    treeIcon: string;
    isTree: boolean;
    isDiagram: boolean;
  }[];

This children array of objects defines the title, path, and treeIcon of the Child Page.

You can more than one Child Page in the children array.

By default all child pages are rendered as tables unless specified with the isTree or isDiagram booleans.

USER INTERFACE

The Child Pages are rendered in the sidebar and in the Home Page of the OML Vision extension shown in the red boxes.

Children Pages

title​

REQUIRED
title: string

This string defines the title of the child page.

USER INTERFACE

The name of the title of the Child Page is rendered in the sidebar and in the Home Page of the OML Vision extension.

path​

REQUIRED
path: string

This string defines the path of the Child Page.

Remember this string as it will be needed for the layouts of the tables, trees, and diagrams

USER INTERFACE

The name of the path is rendered in the sidebar when you hover and hold for 2 seconds over the Child Page in the OML Vision extension.

treeIcon​

OPTIONAL
treeIcon: string

This string defines the icon to be rendered in the sidebar next to the Title of the page.

A full list of available icons can be seen here. Use the default codicon ID as the value of the treeIcon

USER INTERFACE

The Child Page icon of the treeIcon is rendered in the sidebar for the OML Vision extension.

isTree​

OPTIONAL
isTree: boolean

This bool specifies whether or not the Child Page will be a tree. Set isTree to true to turn the Child Page into a tree.

isDiagram​

OPTIONAL
isDiagram: boolean

This bool specifies whether or not the Child Page will be a diagram. Set isDiagram to true to turn the Child Page into a diagram.