woly-ui / gatsby-theme Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://npmjs.com/gatsby-theme-woly
License: MIT License
Home Page: https://npmjs.com/gatsby-theme-woly
License: MIT License
It is required to create an encapsulated page to test component media-queries.
Steps how it can be implemented:
./gatsby-theme-woly/plugins/gatsby-plugin.js
import
nodes of pagejsx
nodeimport
nodes to a new page with jsx
node (maybe it can be created with createNode
and createPage
API in actions
, look at gatsby-source-filesystem
)jsx
node to an iframe with a link to a created page (node type html
)Hint: you need to clean cache to reload gatsby plugins after code change
Useyarn clean && yarn example develop
after each change
Source src/components/button/usage.mdx
file:
import { Button } from './button'
import { Wrapper } from '../lib/wrap'
## Example button
<Button text="hi" />
<Wrapper><Button text="another" /></Wrapper>
Expected output:
## Example button
<iframe src="/package/woly/components/button/example/1" />
```jsx
<Button text="hi" />
```
<iframe src="/package/woly/components/button/example/2" />
```jsx
<Wrapper><Button text="another" /></Wrapper>
```
Expected output for example 1:
import { Button } from './button'
import { Wrapper } from '../lib/wrap'
<Button text="hi" />
Expected output for example 2:
import { Button } from './button'
import { Wrapper } from '../lib/wrap'
<Wrapper><Button text="another" /></Wrapper>
How to visit import nodes and collect it:
const visit = require('unist-util-visit');
module.exports = ({ markdownAST, actions }, options) => {
const imports = [];
visit(markdownAST, 'import', (node, index, parent) => {
imports.push(node);
});
console.log('IMPORTS', imports);
};
What is collected in imports
:
[
{
type: 'import',
value: "import * as button from './index';\n" +
"import { New } from './new';\n" +
"import { Example } from './example';",
position: Position { start: [Object], end: [Object], indent: [Array] }
}
]
Be careful! Do not modify AST inside
visit
callback. Before modifying collect all required nodes.
gatsby-theme-woly/plugins/remark-plugin.js
This plugin creates a copy of the jsx
node as code
node, to show the source of the markdown.
For example source .mdx
file:
import { Button } from './button'
### Button
<Button type="submit" text="demo" />
Gatsby creates live button from that mdx
node. Remark plugin adds code
block to show source below:
import { Button } from './button'
### Button
<Button type="submit" text="demo" />
```jsx
<Button type="submit" text="demo" />
```
Rehype plugin is a transformer for converting markdown AST to HTML AST
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.