https://github.com/varya/shower-mdx

Presentation engine mdx -> Shower
https://github.com/varya/shower-mdx

presentation shower slides

Last synced: about 2 months ago
JSON representation

Presentation engine mdx -> Shower

• Host: GitHub
• URL: https://github.com/varya/shower-mdx
• Owner: varya
• Created: 2021-02-01T09:23:34.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-12-09T09:22:36.000Z (about 3 years ago)
• Last Synced: 2024-04-13T19:30:37.169Z (9 months ago)
• Topics: presentation, shower, slides
• Language: JavaScript
• Homepage: https://varya.me/shower-mdx/
• Size: 6.97 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Shower-Mdx

With this template you can create your [Shower](https://shwr.me/) presentation in .mdx - with common markdown syntax and custom React components. 

[Shower Presentation Template](https://github.com/shower/shower) is built by [Vadim Makeev](https://pepelsbey.net/).

## Getting started

1. Clone this repo and remove git history to start from blank:

    ```shell

    git clone https://github.com/varya/shower-mdx.git && rm -rf shower-mdx/.git/

    ```

2. Start development server: `yarn dev` or `npm run dev`

3. Open `index.mdx` and start adding your content! 

## Editing content

Each new slide has to start with `
` heading. If you don't need an actual heading, just leave it blank. Check index.mdx for markup examples.


### Adding custom attributes

If you need attributes for your slide `` tag, add it **below** the heading. If you need an attribute for the heading, add it on the same line. See below: 

```md

## Slide heading {#headingId .heading-class}

{#sectionId data-customtext="anything}

...Slide contents

```

Custom attributes are currently supported for sections, headings, links, code, strong or emphasized text. The list of attributes is limited to [HTML element attributes](https://github.com/wooorm/html-element-attributes)

### Adding custom styles.

If you want to change the theme, load theme css directly at the top of [index.js](https://github.com/varya/shower-mdx/blob/master/pages/index.js). The default themes "ribbon" and "material" are already included in package.

If you just want to tweak some components, provide css through "style" field in frontmatter or inside `` tags. See [index.mdx](https://github.com/varya/shower-mdx/blob/master/index.mdx) for examples.

### Adding custom components

You can add your React components to the presentation. Here is what you need to do:

1. Add your component to `components/` folder.

2. Re-export it in `components/index.js` like that: `export {default as MyComponent} from "./MyComponent"`

Now your component will be accessible in global .mdx scope. You don't need to import it directly to .mdx

## Deployment

Deployment to your Github Pages is set up automatically via Github Actions, and triggers every time you push into `master` branch.

If you need to test your build locally, run:

```shell

yarn export

```

## Contributing

Contributions to this project are warmly welcome. Send your pull request or open an issue to discuss the changes.