Monorepo for web related devfile projects

It is highly recommended to download the Nx Console extension for your IDE if available.

Run yarn install to download dependencies.

• yarn nx serve <project-name> --configuration=<development | production>: serves the project's application
• yarn nx build <project-name> --configuration=<development | production>: builds the project's application
• yarn nx run <project-name>:export: exports the project's application to be static
• yarn nx test <project-name>: tests the project's application
• yarn nx lint <project-name>: lints the project's application

• yarn create:component <name>: creates a React component
• yarn create:hook <name>: creates a React hook
• yarn create:function <name>: creates a function

Landing Page project for devfile.io.

• Header

  Header navigation can be configured on navigation.ts.

  export const headerNavigation: HeaderNavigation = [
    ...
  ];

  Each element in headerNavigation is as follows:

  [
    { 
      name: 'Example', // the name of the link 
      href: 'https://example.com', // the URI of the link
      image: ExampleIcon, // Optional: the image of the link
    }
  ]

• Footer

  Footer navigation can be configured on navigation.ts.

  export const footerNavigation: FooterNavigation = {
    contributors: [
      ...
    ],
    links: [
      ...
    ],
    social: [
      ...
    ],
  };

  • contributors: contributors the the devfile project in alphabetical order
  • links: miscellaneous links related to the devfile project
  • social: social links for the devfile project

  Each element in contributors, links, and social is as follows:

  [
    { 
      name: 'Example', // the name of the link 
      href: 'https://example.com', // the URI of the link
      image: ExampleIcon, // Optional: the image of the link
    },
    ...
  ]

• Sidebar

  Sidebar navigation can be configured under ./docs-navigation.

  Each file under /docs-navigation corresponds to a version except no-version.yaml which allows uniform navigation pages between all versions.

  Whenever you update the sidebar navigation you MUST restart the server.

  Each sidebar section requires a title and links. Each element in links requires a title and href. Currently, sidebar navigation is only supported one layer deep.

  - title: Example section 1
    links:
      - title: Element 1
        href: /element1
      - title: Element 2
        href: /element2
  - title: Example section 2
    links:
      - title: Element 3
        href: /element3
      - title: Element 3
        href: /element4

To update or add documentation, edit or create a markdown file under ./docs. The markdown is converted to html pages automatically by the markdoc Next.js addon. Instead of using .mdx, markdoc extends markdown by enclosing snippets in curly brackets.

• Built-in tags

• Custom tags

  Custom tags can be found under ./tags.tsx

  • fences

    Curly brackets after specifying the code language is optional.

    ```yaml {% title="Optional: Example" filename="Optional: devfile.yaml" %}
      schemaVersion: 2.2.0
      metadata:
        name: mydevfile
      components:
        - name: mydevfile
          volume:
            size: 200G
    ```

  • callout

    The children for callout can be any valid markdown or snippet.

    {% callout title="Note!" %}
    - All location references to `starterProjects` will change to local
        paths relative to the stacks directory.
    
    - Stack component image references will change to use the offline
        accessible image repository.
    {% /callout %}

  • figure

    {% figure src="./example" alt="Example" caption="This is an example caption" /%}

  • quick-link and quick-links

    {% quick-links %}
    
    {% quick-link title="Installation" icon="installation" href="/" description="Step-by-step guides to setting up your system and installing the library." /%}
    
    {% quick-link title="Architecture guide" icon="presets" href="/" description="Learn how the internals work and contribute." /%}
    
    {% quick-link title="Plugins" icon="plugins" href="/" description="Extend the library with third-party plugins or write your own." /%}
    
    {% quick-link title="API reference" icon="theming" href="/" description="Learn to easily customize and modify your app's visual design to fit your brand." /%}
    
    {% /quick-links %}

  After you update any documentation, update the navigation if you added a new page or changed a file name.