landing-page-components

Building blocks for landing pages

Installation

npm install @axdspub/landing-page-components

Configuration

The StaticMap component requires a Mapbox access token. For Storybook use, you'll need to export a STORYBOOK_MAPBOX_TOKEN environment variable. Create an .envrc (for use with direnv), or export that env var into whatever shell you run Storybook from.

Usage

These components are styled with Tailwind CSS classes; therefore it is a peer dependency of this package. These components also rely on a custom color names which must be defined in your project.

Configuring Next.js

Follow these steps to configure Tailwind if you are adding these components to a Next.js app.

Install peer dependencies

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Create configuration files

npx tailwindcss init -p

Update configuration

Ensure that your pages, components, and this package's components are checked when Tailwind purges unused classes.

// tailwind.config.js
module.exports = {
    // ...
    purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './node_modules/@axdspub/landing-page-components/**/*.{js,ts,jsx,tsx}',
    ],
    // ...
};

Add primary and secondary colors, including lighter and darker varieties.

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        extend: {
            colors: {
                primary: {
                    lighter: '#8c4fd1',
                    DEFAULT: '#7138b2',
                    darker: '#553197',
                },
                secondary: {
                    lighter: '#63B3ED',
                    DEFAULT: '#4299E1',
                    darker: '#3182CE',
                },
            },
        },
    },
    // ...
};

Some component support the display of Markdown content. If those components are being used and you want the generated HTML to be styled by default, ensure you have Tailwind's typography plugin enabled:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Development

See DEVELOPMENT.md