amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 03:42:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

gatsby-remark-codepen-examples supports 'directory' option

Browse Source
This commit is contained in:
Brian Vaughn
2017-11-07 11:03:49 +00:00
parent aa04afb822
commit d743b1c6ed
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby-config.js
View File

@@ -56,7 +56,12 @@ module.exports = {
},
},
'gatsby-remark-autolink-headers',
'gatsby-remark-codepen-examples',
{
resolve: 'gatsby-remark-codepen-examples',
options: {
directory: 'examples',
},
},
'gatsby-remark-use-jsx',
{
resolve: 'gatsby-remark-prismjs',

2
gatsby-node.js
View File

@@ -171,7 +171,7 @@ exports.createPages = async ({graphql, boundActionCreators}) => {
// Create Codepen redirects.
// These use the Codepen prefill API to JIT-create Pens.
// https://blog.codepen.io/documentation/api/prefill/
const files = await recursiveReaddir('./codepen');
const files = await recursiveReaddir('./examples');
files.forEach(file => {
const slug = file.substring(0, file.length - 3); // Trim extension
const code = readFileSync(file, 'utf8');

16
plugins/gatsby-remark-codepen-examples/index.js
View File

@@ -6,15 +6,23 @@ const CODEPEN_PROTOCOL = 'codepen://';
const DEFAULT_LINK_TEXT = 'Try it on CodePen';
// TODO target="_blank"
module.exports = ({markdownAST}) => {
module.exports = ({markdownAST}, {directory}) => {
map(markdownAST, (node, index, parent) => {
if (!directory.startsWith('/')) {
directory = `/${directory}`;
}
if (!directory.endsWith('/')) {
directory = `${directory}/`;
}
// eg convert
// from: [](codepen:introducing-jsx)
// to: <a href="/codepen/introducing-jsx" target="_blank">Try it on CodePen</a>
// to: <a href="/<directory>/introducing-jsx" target="_blank">Try it on CodePen</a>
// from: [Try the Hello World example on CodePen](codepen:hello-world)
// to: <a href="/codepen/hello-world" target="_blank">Try the Hello World example on CodePen</a>
// to: <a href="/<directory>/hello-world" target="_blank">Try the Hello World example on CodePen</a>
if (node.type === 'link' && node.url.startsWith(CODEPEN_PROTOCOL)) {
const href = node.url.replace(CODEPEN_PROTOCOL, '/codepen/');
const href = node.url.replace(CODEPEN_PROTOCOL, `${directory}`);
const text =
node.children.length === 0 ? DEFAULT_LINK_TEXT : node.children[0].value;