Skip to content

Commit

Permalink
Add the ability to provide custom layout (#128)
Browse files Browse the repository at this point in the history
* Add the ability to provide custom layout

When I designed the system, I added the ability to provide a custom layout that would use arbitrary JavaScript to render some custom pages. This is why files are called "DocsLayout.js", "BlogPostLayout.js"... This ability to customize it was [ripped out](https://github.com/facebook/react-native/blob/master/website/server/convert.js#L78) during the migration to Docusaurus but I need it for the project I'm working on right now (that should remain unnamed!).

This adds back the ability to do it in a way that fits the third party system. In order to provide a new layout:

1) Add a `layout` field in the header of your markdown file:

```js
---
layout: mylayout
---
```

2) In your `siteConfig`, add

```js
  layouts: {
    mylayout: function({React, Marked}) {
      return class extends React.Component {
        render() {
           return React.createElement('div', {}, this.props.metadata.layout);
         }
      }
    }
  }
```

I think that it's a reasonable to add and would unblock me :)

* Update DocsLayout.js
  • Loading branch information
vjeux authored and JoelMarcey committed Oct 18, 2017
1 parent 5693eba commit a26bba1
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
7 changes: 6 additions & 1 deletion lib/core/DocsLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ class DocsLayout extends React.Component {
const metadata = this.props.metadata;
const content = this.props.children;
const i18n = translation[this.props.metadata.language];
let DocComponent = Doc;
if (this.props.Doc) {
DocComponent = this.props.Doc;
}
return (
<Site
config={this.props.config}
Expand All @@ -36,7 +40,8 @@ class DocsLayout extends React.Component {
<div className="docMainWrapper wrapper">
<DocsSidebar metadata={metadata} />
<Container className="mainContainer">
<Doc
<DocComponent
metadata={metadata}
content={content}
config={this.props.config}
source={metadata.source}
Expand Down
11 changes: 10 additions & 1 deletion lib/server/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,17 @@ function execute(port) {

removeModuleAndChildrenFromCache("../core/DocsLayout.js");
const DocsLayout = require("../core/DocsLayout.js");

let Doc;
if (metadata.layout && siteConfig.layouts[metadata.layout]) {
Doc = siteConfig.layouts[metadata.layout]({
React,
Marked: require("../core/Marked.js")
});
}

const docComp = (
<DocsLayout metadata={metadata} language={language} config={siteConfig}>
<DocsLayout metadata={metadata} language={language} config={siteConfig} Doc={Doc}>
{rawContent}
</DocsLayout>
);
Expand Down

0 comments on commit a26bba1

Please sign in to comment.