Pages App

Wingsuit also ships with a pages preset, which uses StaticSiteGeneratorPlugin under the hood to automatically generate static files.

** This docs page is build with Wingsuit Pages. **

Installing the pages preset

To use this preset, firstly you install it as a dev-dependency via yarnor npm:

yarn add @wingsuit-designsystem/preset-pages -D

If you want mdx support you need to install

yarn add @wingsuit-designsystem/preset-mdx -D

After that, you'll need wingsuit to consume the preset by loading it via your wingsuit.config.js:

const namespaces = require('./source/default/namespaces');

module.exports = {
  presets: [
    '@wingsuit-designsystem/preset-pages',
    '@wingsuit-designsystem/preset-mdx',
  ],
  designSystems: {
    default: {
      namespaces,
    },
  },
};

Additonal to the preset you need to generate your pages app with

yarn ws generate-app

The wizard will ask you for the app type. Please select pages. Wingsuit will generate an app folder with a pages subfolder.

Page configuration

You can configure your page inside your [page].pages.jsx. You can choose either TWIG templates with MDX for docs pages. Or you can Wingsuit Components for landing pages.

Landing pages:

import 'protons';

export default {
  path: '/',
  pattern: {
    label: 'Homepage',
    extends: ['page'],
    fields: {
      menu: {
        preview: '',
      },
      content: {
        preview: [
          { id: 'hero' },
          {
            id: 'second_component',
            fields: {
              field_a: 'Value 1'
              },
            },
          },
        ],
      },
    },
  },
};

Composing patterns:

Composition allows you to embed patterns into patterns.

import 'protons';

export default {
  path: '/',
  pattern: {
    label: 'Homepage',
    extends: ['page'],
    fields: {
      menu: {
        preview: '',
      },
      content: {
        preview: [
          {
            id: 'root_component',
            fields: {
              button: {
                {
                  id: 'button',
                  fields: {
                    text: 'Read More'
                  },
                  settings: {
                    url: 'https://www.readmore.de'
                  }
                }
              },
            },
          },
        ],
      },
    },
  },
};

Loading from YAML

The pattern structure for large landing pages can get very complicated. To make this more readable and maintainable it often makes sense to manage each section into YAML.

import 'protons';

const section_1 = require('./section_1.yml');
export default {
  path: '/',
  pattern: {
    label: 'Homepage',
    extends: ['page'],
    fields: {
      menu: {
        preview: '',
      },
      content: {
        preview: [
          {
            id: 'section_pattern',
            fields: section_1,
          },
        ],
      },
    },
  },
};

MDX pages:

For simple docs pages it is more easy to render an MDX content inside a TWIG file.

import 'protons';
import MDX from './index.mdx';

const template = require('./index.twig');

export default {
  path: '/path',
  template,
  html,
  MDX,
};
``