Launch: Preset

Rocket comes with a preset you will love. Simple, responsive and behaving like native, it sure is going to be a hit among your users.

Installation

Install @rocket/launch from the NPM repository using your favourite package manager.

npm i @rocket/launch

yarn add @rocket/launch

pnpm add @rocket/launch

Usage

👉 rocket.config.js

import { rocketLaunch } from '@rocket/launch';

/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
  presets: [rocketLaunch()],
});

Data

The launch preset configures 11ty data using a few overridable files:

• site.cjs: Responsible for most of the site-wide config
• rocketLaunch.json: configures the homepage layout
• footer.json: Configures the content of the footer

Inline Notification

Launch ships with <inline-notification>, a custom element that applies some styles similar to "info boxes". The element works for <noscript> users as well, as long as you don't override the default noscript.css file.

To add an inline notification you need to remember to import the element definition:

```js script
import '@rocket/launch/inline-notification/inline-notification.js';
```

Then you can add your notification to the page. If you want to write the notification's content using markdown, just pad the opening and closing tags with empty lines.

There are three varieties of <inline-notification>, "tip", "warning", and "danger"

<inline-notification type="tip">

Take a tip from me

</inline-notification>

<inline-notification type="warning">

Be *sure* about this...

</inline-notification>

<inline-notification type="danger">

You **really** shouldn't!

</inline-notification>

Modify the Title

The notification title defautls to it's type. You can write a custom title with the title attribute.

<inline-notification type="tip" title="success">

I am a success message

</inline-notification>