Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the ability to provide custom layout #128

Merged
merged 2 commits into from
Oct 18, 2017
Merged

Add the ability to provide custom layout #128

merged 2 commits into from
Oct 18, 2017

Conversation

vjeux
Copy link
Contributor

@vjeux vjeux commented Oct 17, 2017

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 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:
---
layout: mylayout
---
  1. In your siteConfig, add
  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 :)

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 :)
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 17, 2017
Copy link
Contributor

@JoelMarcey JoelMarcey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. I like that we can just plug in a layout by using configuration. Thanks!

I added a task to add this to our docs.

And I know what the unnamed project is :P :-)

@JoelMarcey
Copy link
Contributor

I also like that this is not a breaking change as well since it is, for lack of a better phrase, opt-in.

@JoelMarcey JoelMarcey merged commit a26bba1 into master Oct 18, 2017
@JoelMarcey JoelMarcey deleted the vjeux-patch-2 branch October 18, 2017 22:10
@JoelMarcey JoelMarcey restored the vjeux-patch-2 branch October 18, 2017 22:10
@JoelMarcey JoelMarcey deleted the vjeux-patch-2 branch October 18, 2017 22:10
vjeux added a commit that referenced this pull request Apr 20, 2018
#347 added support for warning for unknown fields but didn't take into account `layout` which was added by #128
yangshun pushed a commit that referenced this pull request Apr 20, 2018
#347 added support for warning for unknown fields but didn't take into account `layout` which was added by #128
@yangshun yangshun mentioned this pull request Jun 20, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants