Awesome Website Components for MyST Markdown websites

The plugin currently includes:

• Hero
• Footer

Setup and Usage

This package is published on npm and holds a MyST Markdown plugin for use on command line when building your website and a set of front end React components and functions that can be built into a custom theme.

To install the plugin in your MyST project:

1. Download the javascript module (curvenote-web.mjs) from https://unpkg.com/[email protected]/dist/curvenote-web.mjs and save this in your project folder
2. Add the module to the list of plugins in myst.yml:

project:
  plugins:
    - curvenote-web.mjs

The plugin will be loaded when you next run myst start

myst start

🔌 Website Components by Curvenote (web.mjs) loaded: 2 directives, 0 roles, 0 transforms
📖 Built example.md in 4.68 ms.
📚 Built 1 page for project in 30 ms.


        ✨✨✨  Starting Article Theme  ✨✨✨



🔌 Server started on port 3001!  🥳 🎉


        👉  http://localhost:3001  👈

Then add roles and directives to your pages.

Tip

MyST Markdown's plugin loading system is still developing, look out for updates on easier ways to access and load plugins.

Directive Usage

Hero

{arg}

(MyST) The main title to display in the hero unit

tagline

(MyST) A tagline to display under the main title

description

(MyST) A longer description to display under the tagline

background-image

(File|String) URL or local path to the background image

background-color

(String) Background color of the hero unit (e.g. #aabbcc)

text-color

(String) Text color within the hero unit (e.g. #aabbcc)

layout

(String) Layout of the hero unit (default: `center`), (values:`left`, `center`, `right`)

padding

(String) Padding around the hero unit using a css padding string like `1rem` or `1rem 2rem`

cta-title

(String) Text for the first call to action button

cta-url

(String) URL for the first call to action button

cta-title-1

(String) Text for the second call to action button

cta-url-1

(String) URL for the second call to action button

cta-style

Style of the call to action button (default: `light`), (values: `light`, `dark`)

Footer

logo

(File|String) URL or local path to the logo

logo-dark

(File|String) URL or local path to the dark mode logo

logo-title

(String) Title of the logo, used as alt text

logo-url

(String) URL to navigate to when the logo is clicked

tagline

(MyST) A tagline to display under the logo

padding

(String) Padding around the hero unit using a css padding string like `1rem` or `1rem 2rem`

background-color

(String) Background color of the footer (e.g. #aabbcc)

text-color

(String) Text color of the footer (e.g. #aabbcc)

copyright

(String|MyST) Text to display at the very bottom of the footer, typically a copyright statement

{body}

(MyST) The body of the footer should contain links in the form of a list with up to 2 nested lists. Links with [`scienceicon` roles](https://www.npmjs.com/package/@scienceicons/myst) as their titles will be picked up as social icons.

React Component Usage

TODO: Docs

Developing

This repo builds the plugin and it's dependencies into a single javascript module bundle using tusp.

1. clone this repo
2. cd myst-ext-curvenote-web
3. npm install
4. npm build

Contributing

Issues and PRs to extend this plugin are welcome!