Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/mdx-blocks
https://github.com/jxnblk/mdx-blocks
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jxnblk/mdx-blocks
- Owner: jxnblk
- License: mit
- Created: 2019-03-09T02:31:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-05-12T14:05:32.000Z (over 5 years ago)
- Last Synced: 2024-10-19T19:19:53.437Z (15 days ago)
- Language: JavaScript
- Homepage: https://mdx-blocks.netlify.com/
- Size: 1.22 MB
- Stars: 191
- Watchers: 4
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# MDX Blocks
A wild new way to build websites
**EXPERIMENTAL**
[![build status][]][travis]
[![version][]][npm]
![MIT License][license]
[build status]: https://flat.badgen.net/travis/jxnblk/mdx-blocks
[version]: https://flat.badgen.net/npm/v/mdx-blocks
[license]: https://flat.badgen.net/badge/license/MIT/blue
[npm]: https://npmjs.com/package/mdx-blocks
[travis]: https://travis-ci.org/jxnblk/mdx-blocks
https://mdx-blocks.netlify.com
```sh
npm i mdx-blocks
```
Import and use MDX Blocks as layout components
```mdx
import { Bar } from 'mdx-blocks'
export default props =>
# Hello
- [Link](/)
- [Click](/click)
- [Beep](/beep)
```
Create a block for each section of a page
```mdx
import { Banner } from 'mdx-blocks'
export default Banner
# Hello
This is a banner with a background image.
```
```jsx
// Combine blocks together to create a page
import { BlocksProvider } from 'mdx-blocks'
import Header from './header.mdx'
import Banner from './banner.mdx'
export default props =>
```
## Features
- Write content in markdown and use React components inline with [MDX][]
- Customize the look and feel with theming
- Create custom block layouts with minimal effort
- Quickly swap out the layout of blocks without touching the content
## Get Started
[Read the docs][docs]
---
## Related
- [MDX][]
- [Emotion][]
- [Styled System][]
[Code of Conduct](CODE_OF_CONDUCT.md)
[MIT License](LICENSE.md)
[mdx]: https://mdxjs.com
[emotion]: https://emotion.sh
[styled-system]: https://styled-system.com
[styled system]: https://styled-system.com
[demo]: https://mdx-blocks.netlify.com
[docs]: https://mdx-blocks.netlify.com/docs/
[theming docs]: https://mdx-blocks.netlify.com/docs/creating-themes