npm install react react-dom react-bootstrap gatsby

npm install react-helmet

npm install @legendarymediatv/bootstrap

exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => {
    const config = getConfig()
    config.module.rules = [
        // omit the default rule where test === '\.jsx?$'
        ...config.module.rules.filter(
            rule => String(rule.test) !== String(/\.jsx?$/)
        ),
        // re-create it with custom exclude filter
        {
            // apply required Babel presets/plugins and merge in your configuration from `babel.config.js`.
            ...loaders.js(),
            test: /\.jsx?$/,
            // exclude all node_modules from transpilation, except for this plugin
            // NOTE: their pattern has "\/" but this has "[\\\/]" to support all OS path separators
            exclude: modulePath =>
                /node_modules/.test(modulePath) &&
                !/node_modules[\\\/]@legendarymediatv[\\\/]bootstrap/.test(modulePath),
        },
    ]
    // replace the webpack config with the modified object.
    actions.replaceWebpackConfig(config)
}

import React from 'react';
import { Helmet } from 'react-helmet';

import Container from 'react-bootstrap/Container';

const Layout = (props) => {
    return (
        <>
            <Helmet>
                <title>{props.title}</title>

                <meta name="description" content={props.description} />

                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" />
            </Helmet>
            <Container className="py-4">
                <h1 className="display-1">{props.title}</h1>

                {props.children}
            </Container>
        </>
    );
}

export default Layout;

// dependencies
import React from 'react';

// page layout template
import Layout from '../components/Layout';

// sample LegendaryMediaTV component
import { Icon } from '@legendarymediatv/bootstrap';

const Home = () => {
    return (
        <Layout title="Page Title" description="Page Description">
            <Icon name="fas fa-camera" />
        </Layout>
    );
}

export default Home;

import { DisplayHeading1, DisplayHeading2, DisplayHeading3, DisplayHeading4 } from '@legendarymediatv/bootstrap';

...

<DisplayHeading1>Display Heading 1</DisplayHeading1>

<DisplayHeading2>Display Heading 2</DisplayHeading2>

<DisplayHeading3>Display Heading 3</DisplayHeading3>

<DisplayHeading4>Display Heading 4</DisplayHeading4>

import { FormGroup } from '@legendarymediatv/bootstrap';

...

<FormGroup
    title="Sample textbox"
    info={<p>Things, <i>stuff</i>, <b>content</b>!</p>}
>
    <Form.Control
        name="sample"
        maxLength="80"
        defaultValue="eleventeen"
    />
</FormGroup>

import { Icon } from '@legendarymediatv/bootstrap';

...

<Icon name="fas fa-camera" />

<Icon
    name="fas fa-camera"
    alt="DSLR"
    variant="success"
    className="ml-3"
    style={{ fontSize: '2rem' }}
/>

import { InfoIcon } from '@legendarymediatv/bootstrap';

...

<InfoIcon title="Info Title">Info Content</InfoIcon>

<InfoIcon
    title="Info Title"
    name="bi bi-info-circle-fill"
    alt="help me!"
    variant="danger"
    iconStyle={{ fontSize: '2rem' }}
>Things, <i>stuff</i>, <b>content</b>!</InfoIcon>

import { Link } from '@legendarymediatv/bootstrap';

...

<Link href="/">Gatsby</Link>

<Link href="#link">HTML</Link>

<Link href="https://www.legendarymediatv.com/">HTML</Link>

import { ListGroup } from '@legendarymediatv/bootstrap';

...

const linkArray = [
    '/test',
    '/sample'
];
...
<ListGroup title="Array of Links" items={linkArray} />

...

const linkObjects = [
    { title: 'Test Link', url: '/test' },
    { title: 'Sample Link', url: '/sample' }
];
...
<ListGroup title="Array of Objects with Links" items={linkObjects} />

...

function sampleHandler(itemSelected) {
    alert(JSON.stringify(itemSelected, null, 4));
}
...
const objectArray = [
    { id: 1, title: 'Test Non-Link' },
    { id: 2, title: 'Sample Non-Link' }
];
...
<ListGroup
    title="Array of Objects with Click Handler"
    titleVariant="success"
    items={objectArray}
    click={sampleHandler}
    className="mt-3"
/>

import { Icon } from '@legendarymediatv/bootstrap';

...

<Spinner />

<Spinner
    animation="grow"
    variant="success"
/>

import { DisplayHeading1, DisplayHeading2, DisplayHeading3, DisplayHeading4 } from '@legendarymediatv/bootstrap';

...

<p class="text-danger">
  <VisuallyHidden>Danger: </VisuallyHidden>
  This action is not reversible
</p>