Skip to content

Commit

Permalink
fix((docs)): update to README.md and package.json description
Browse files Browse the repository at this point in the history
  • Loading branch information
mirabilio committed Apr 4, 2020
1 parent 7be0c51 commit d7d59f6
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 5 deletions.
108 changes: 104 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,20 @@
> This plugin is in **beta**.
>
> Create an issue for question, bug, idea, etc. PRs welcome 👍.
>
> If this plugin doesn't fulfill your use case, please create an issue to request the feature.
Removes the `<p>` tag from the markdown AST that `gatsby-transformer-remark`, in some cases, automatically wraps around the markup it is given to process to HTML. `<p>` tags that are present in the input markdown content are preserved.
Removes the wrapping HTML `<p>` tag that `gatsby-transformer-remark` automatically adds during its markdown transformation process. The root `<p>` tag or root line break `\n` is preserved if it exists in the user-provided markdown.

## 🚀 Install

1. Add the package to your site:

```shell
npm i gatsby-remark-remove-root-p-tag
```

```shell
yarn add gatsby-remark-remove-root-p-tag
```

Expand All @@ -35,15 +39,111 @@ yarn add gatsby-remark-remove-root-p-tag
{
resolve: `gatsby-remark-remove-root-p-tag`,
options: {
parents: [`gatsby-plugin-json-remark`] // Optional: will process only the MarkdownRemark nodes created by these plugins
parents: ["gatsby-plugin-json-remark", "default-site-plugin"] // Optional: will process only the MarkdownRemark nodes created by these plugins
}
},
...
```

## Usage
## Usage Example

### `gatsby-config.js`
```javascript
module.exports = {
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-remove-root-p-tag`,
options: {
parents: ["default-site-plugin"],
},
},
],
},
},
],
};
```

### `gatsby-node.js`

After the above configuration is completed, processing is automatic.
```javascript
const markdownContentNode = {
id: createNodeId("this is a unique string >>> MyMarkdown"),
internal: {
content: "*some italic text*",
type: `MyMarkdown`,
mediaType: "text/markdown",
},
};
markdownContentNode.internal.contentDigest = createContentDigest(
JSON.stringify(markdownContentNode)
);
const markdownRemark = await createNode(markdownContentNode);
```
### GraphQL Schema / Query

The above setup will create a markdown node with the `<p>` tag removed:

```graphql
query MyQuery {
allMyMarkdown {
edges {
node {
childMarkdownRemark {
html
rawMarkdownBody
}
}
}
}
}
```

Query results:

```graphql
{
"data": {
"allMyMarkdown": {
"edges": [
{
"node": {
"childMarkdownRemark": {
"html": "<em>some italic text</em>",
"rawMarkdownBody": "*some italic text*"
}
}
}
]
}
}
}
```

Without `gatsby-remark-remove-root-p-tag`, a `<p>` tag wraps the transformed HTML:

```graphql
{
"data": {
"allMyMarkdown": {
"edges": [
{
"node": {
"childMarkdownRemark": {
"html": "<p><em>some italic text</em></p>",
"rawMarkdownBody": "*some italic text*"
}
}
}
]
}
}
}
```

## Requirements

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "gatsby-remark-remove-root-p-tag",
"version": "0.0.0-development",
"description": "Gatsby transformer-remark sub-plugin to remove the root <p></p> around markdown content.",
"description": "Removes the wrapping HTML `<p>` tag that `gatsby-transformer-remark` automatically adds during its markdown transformation process. The root `<p>` tag or root line break `\n` is preserved if it exists in the user-provided markdown.",
"main": "index.js",
"keywords": [
"gatsby",
Expand Down

0 comments on commit d7d59f6

Please sign in to comment.