@startupjs-ui/mdx 0.1.12 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.md +36 -8
- package/client/mdxComponents/index.js +3 -3
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **mdx:** fix bold and italic ([415b5b8](https://github.com/startupjs/startupjs-ui/commit/415b5b8c0ec4f9e16ea4f762d175c1e14df5012b))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @startupjs-ui/mdx
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @startupjs-ui/mdx
|
package/README.md
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
1
|
# MDX components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
MDX provider with a set of custom components for React Native support and syntax highlighting. It maps standard Markdown and HTML elements (headings, paragraphs, lists, tables, code blocks, etc.) to React Native components so that `.mdx` and `.md` files render correctly on all platforms.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```sh
|
|
8
|
-
yarn @startupjs-ui/mdx expo-clipboard
|
|
8
|
+
yarn add @startupjs-ui/mdx expo-clipboard
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
This
|
|
13
|
+
This package is used automatically by `@startupjs/bundler` to compile `.mdx` and `.md` files. No additional configuration is required -- the bundler picks up the `useMDXComponents` export and applies the component mappings during compilation.
|
|
14
14
|
|
|
15
15
|
## Custom components
|
|
16
16
|
|
|
17
|
-
You can override the default MDX components by
|
|
18
|
-
using the `overrideMDXComponents` function. Do it once as early as possible
|
|
19
|
-
(for example in the topmost `_layout` file of your Expo project):
|
|
17
|
+
You can override the default MDX components globally by calling the `overrideMDXComponents` function. Call it once as early as possible (for example, in the topmost `_layout` file of your Expo project):
|
|
20
18
|
|
|
21
19
|
```jsx
|
|
22
20
|
// _layout.js
|
|
23
|
-
import { overrideMDXComponents } from '@startupjs/mdx'
|
|
21
|
+
import { overrideMDXComponents } from '@startupjs-ui/mdx'
|
|
24
22
|
|
|
25
23
|
overrideMDXComponents({
|
|
26
24
|
h1: ({ children }) => <Text style={{ fontSize: 40 }}>{children}</Text>,
|
|
@@ -28,7 +26,37 @@ overrideMDXComponents({
|
|
|
28
26
|
})
|
|
29
27
|
```
|
|
30
28
|
|
|
31
|
-
For the full list of
|
|
29
|
+
For the full list of overridable component names, see the [MDX Table of Components](https://mdxjs.com/table-of-components/).
|
|
30
|
+
|
|
31
|
+
## Exports
|
|
32
|
+
|
|
33
|
+
- **default** -- an object containing all MDX component mappings
|
|
34
|
+
- **overrideMDXComponents(newComponents)** -- merges your custom components into the global component map, overriding any existing mappings for the same keys
|
|
35
|
+
- **useMDXComponents()** -- returns the current component map (used internally by `@mdx-js/mdx`)
|
|
36
|
+
|
|
37
|
+
## Built-in component mappings
|
|
38
|
+
|
|
39
|
+
The following Markdown elements are mapped to React Native components out of the box:
|
|
40
|
+
|
|
41
|
+
- **h1** -- renders as a bold `Span` with `h2` styling
|
|
42
|
+
- **h2** -- renders as a `Span` with `h5` styling followed by a divider line
|
|
43
|
+
- **h3** -- renders as a bold `Span` with `h6` styling
|
|
44
|
+
- **h4, h5, h6** -- render as standard paragraph text
|
|
45
|
+
- **p** -- renders as a `Span`; inside blockquotes, uses a special blockquote style
|
|
46
|
+
- **strong** -- bold `Span`
|
|
47
|
+
- **em** -- italic `Span`
|
|
48
|
+
- **a** -- renders as a `Link` component
|
|
49
|
+
- **ul, ol, li** -- list items with bullet or ordered markers; nested ordered lists use alphabetic markers
|
|
50
|
+
- **blockquote** -- renders as an `Alert` component
|
|
51
|
+
- **table, thead, tbody, tr, td, th** -- renders using the `Table` component
|
|
52
|
+
- **img** -- renders as a React Native `Image` with automatic aspect-ratio scaling
|
|
53
|
+
- **hr** -- renders as a large `Divider`
|
|
54
|
+
- **code** -- inline code uses a monospace `Span`; block code uses the `Code` component with syntax highlighting
|
|
55
|
+
- **pre** -- wraps block-level code
|
|
56
|
+
|
|
57
|
+
## Syntax highlighting
|
|
58
|
+
|
|
59
|
+
Code blocks support syntax highlighting for the following languages: JSX, Stylus, Pug, Markdown, JSON, and Bash (including `sh`). The highlighting is powered by [refractor](https://github.com/wooorm/refractor).
|
|
32
60
|
|
|
33
61
|
## License
|
|
34
62
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useState, useContext } from 'react'
|
|
2
|
-
import { Image, ScrollView, Platform } from 'react-native'
|
|
2
|
+
import { Image, ScrollView, Platform, Text } from 'react-native'
|
|
3
3
|
import { pug, observer, $, BASE_URL } from 'startupjs'
|
|
4
4
|
import Alert from '@startupjs-ui/alert'
|
|
5
5
|
import Div from '@startupjs-ui/div'
|
|
@@ -112,10 +112,10 @@ export default {
|
|
|
112
112
|
`
|
|
113
113
|
},
|
|
114
114
|
strong: ({ children }) => pug`
|
|
115
|
-
|
|
115
|
+
Text(style={ fontWeight: 'bold' })= children
|
|
116
116
|
`,
|
|
117
117
|
em: ({ children }) => pug`
|
|
118
|
-
|
|
118
|
+
Text(style={ fontStyle: 'italic' })= children
|
|
119
119
|
`,
|
|
120
120
|
hr: ({ children }) => pug`
|
|
121
121
|
Divider(size='l')
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/mdx",
|
|
3
3
|
"description": "MDX provider with a set of custom components for react-native support and syntax highlighting",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.16",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
@@ -10,18 +10,18 @@
|
|
|
10
10
|
".": "./index.js"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@fortawesome/free-solid-svg-icons": "^
|
|
13
|
+
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
|
14
14
|
"@mdx-js/react": "^3.0.0",
|
|
15
|
-
"@startupjs-ui/alert": "^0.1.
|
|
16
|
-
"@startupjs-ui/br": "^0.1.
|
|
17
|
-
"@startupjs-ui/collapse": "^0.1.
|
|
18
|
-
"@startupjs-ui/div": "^0.1.
|
|
19
|
-
"@startupjs-ui/divider": "^0.1.
|
|
20
|
-
"@startupjs-ui/icon": "^0.1.
|
|
21
|
-
"@startupjs-ui/link": "^0.1.
|
|
22
|
-
"@startupjs-ui/scroll-view": "^0.1.
|
|
23
|
-
"@startupjs-ui/span": "^0.1.
|
|
24
|
-
"@startupjs-ui/table": "^0.1.
|
|
15
|
+
"@startupjs-ui/alert": "^0.1.16",
|
|
16
|
+
"@startupjs-ui/br": "^0.1.16",
|
|
17
|
+
"@startupjs-ui/collapse": "^0.1.16",
|
|
18
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
19
|
+
"@startupjs-ui/divider": "^0.1.16",
|
|
20
|
+
"@startupjs-ui/icon": "^0.1.16",
|
|
21
|
+
"@startupjs-ui/link": "^0.1.16",
|
|
22
|
+
"@startupjs-ui/scroll-view": "^0.1.16",
|
|
23
|
+
"@startupjs-ui/span": "^0.1.16",
|
|
24
|
+
"@startupjs-ui/table": "^0.1.16",
|
|
25
25
|
"refractor": "^3.0.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
@@ -30,5 +30,5 @@
|
|
|
30
30
|
"react-native": "*",
|
|
31
31
|
"startupjs": "*"
|
|
32
32
|
},
|
|
33
|
-
"gitHead": "
|
|
33
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
34
34
|
}
|