README.md

Dash4 Plugin Readme

Show readme files on your Dash4 Dashboard

Table of Contents

• Installation
• Usage
  • Readme
  • Readme list
• License

Installation

npm i -D @dash4/plugin-readme

Usage

Readme

By using the PluginReadme you can add single Readme file to your Dash4 Dashboard

dash4.config.js

const { PluginReadme } = require('@dash4/plugin-readme');

async function getConfig() {
  return {
    tabs: [
      {
        title: 'Root',
        rows: [
          [
            new PluginReadme({
              file: 'README.md',
            }),
          ],
        ],
      },
    ],
  };
}

module.exports = getConfig;

PluginReadme options:

// relative path to the README file
file: string;
// grid with per breakpoint
// [12,6,3] means 100% width on small viewports, 50% on medium viewports and 33.3% on large viewports
width?: number[];
// height of readme window in pixels, percent or viewheight (vh)
height?: number | string;

Readme list

By using the PluginReadmeList you can add multiple Readme files on one card to your Dash4 Dashboard

dash4.config.js

const { PluginReadmeList } = require('@dash4/plugin-readme');

async function getConfig() {
  return {
    tabs: [
      {
        title: 'Root',
        rows: [
          [
            new PluginReadmeList({
              files: [
                {
                  title: 'Dash4',
                  file: '../../README.md',
                },
                {
                  title: 'Dash4 - PluginTerminal',
                  file: '../plugin-terminal/README.md',
                },
                {
                  title: 'Dash4 - PluginNpmScripts',
                  file: '../plugin-npm-scripts/README.md',
                },
              ],
            }),
          ],
        ],
      },
    ],
  };
}

module.exports = getConfig;

PluginReadme options:

// title of readme list
title?: string;
files: Array<{
  // title of readme file which is displayed under the file preview
  title: string;
  // relative path to the README file
  file: string;
}>;
// grid with per breakpoint
// [12,6,3] means 100% width on small viewports, 50% on medium viewports and 33.3% on large viewports
width?: number[];

License

The @dash4/plugin-readme is MIT licensed