mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-01 19:27:48 +02:00
a26bba14c6
* 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
90 lines
3 KiB
JavaScript
90 lines
3 KiB
JavaScript
/**
|
|
* Copyright (c) 2017-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
const React = require("react");
|
|
const Container = require("./Container.js");
|
|
const Doc = require("./Doc.js");
|
|
const DocsSidebar = require("./DocsSidebar.js");
|
|
const Site = require("./Site.js");
|
|
const translation = require("../server/translation.js");
|
|
|
|
// component used to generate whole webpage for docs, including sidebar/header/footer
|
|
class DocsLayout extends React.Component {
|
|
render() {
|
|
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}
|
|
className="sideNavVisible"
|
|
title={
|
|
i18n
|
|
? translation[this.props.metadata.language]["localized-strings"][
|
|
this.props.metadata.localized_id
|
|
] || this.props.metadata.title
|
|
: this.props.metadata.title
|
|
}
|
|
description={content.trim().split("\n")[0]}
|
|
language={metadata.language}
|
|
version={metadata.version}
|
|
>
|
|
<div className="docMainWrapper wrapper">
|
|
<DocsSidebar metadata={metadata} />
|
|
<Container className="mainContainer">
|
|
<DocComponent
|
|
metadata={metadata}
|
|
content={content}
|
|
config={this.props.config}
|
|
source={metadata.source}
|
|
title={
|
|
i18n
|
|
? translation[this.props.metadata.language][
|
|
"localized-strings"
|
|
][this.props.metadata.localized_id] ||
|
|
this.props.metadata.title
|
|
: this.props.metadata.title
|
|
}
|
|
language={metadata.language}
|
|
/>
|
|
<div className="docs-prevnext">
|
|
{metadata.previous_id &&
|
|
<a
|
|
className="docs-prev button"
|
|
href={metadata.previous_id + ".html#content"}
|
|
>
|
|
←{" "}
|
|
{i18n
|
|
? translation[this.props.metadata.language][
|
|
"localized-strings"
|
|
]["previous"] || "Previous"
|
|
: "Previous"}
|
|
</a>}
|
|
{metadata.next_id &&
|
|
<a
|
|
className="docs-next button"
|
|
href={metadata.next_id + ".html#content"}
|
|
>
|
|
{i18n
|
|
? translation[this.props.metadata.language][
|
|
"localized-strings"
|
|
]["next"] || "Next"
|
|
: "Next"}{" "}
|
|
→
|
|
</a>}
|
|
</div>
|
|
</Container>
|
|
</div>
|
|
</Site>
|
|
);
|
|
}
|
|
}
|
|
module.exports = DocsLayout;
|