Add About Slash page (#282)

It will show up in the header as "About/" :)
This commit is contained in:
Joel Marcey 2017-12-13 15:27:35 -08:00 committed by GitHub
parent 8481791221
commit be1ea72237
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 48 additions and 1 deletions

View file

@ -3,7 +3,7 @@ id: custom-pages
title: Custom Pages
---
You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding `.js` files to the `website/pages` directory. These files are React components and the `render()` is called to create them, backed by CSS classes, etc.
You can add pages to your site that are not part of the standard docs or blog markdown files. You can do this by adding `.js` files to the `website/pages` directory. These files are [React](https://facebook.github.io/react) components and the `render()` is called to create them, backed by CSS classes, etc.
## Customizing Your Home Page
@ -35,6 +35,8 @@ root-of-repo
Of course, you are also free to write your own pages. It is strongly suggested that you at least have an index page, but none of the pages provided are mandatory to include in your site. More information on how to use the provided components or include your own can be found [here](api-pages.md). Information on how to link to your different pages in the header navigation bar can be found [here](guides-navigation.md).
> If you want your page to show up in your navigation header, you will need to update `siteConfig.js` to add to the `headerLinks` element. e.g., `{ page: "about-slash", label: "About/"}`,
## Adding Static Pages
Static `.html` files can also be used, but they will not include Docusaurus's header, footer, or styles by default. These can be added to the `static` folder in the same way as other [static assets](api-pages.md#using-static-assets). Alternatively, they can be placed in the `pages` folder and would be served as-is instead of being rendered from React.

View file

@ -0,0 +1,44 @@
/**
* 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 CompLibrary = require("../../core/CompLibrary.js");
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
const siteConfig = require(process.cwd() + "/siteConfig.js");
class AboutSlash extends React.Component {
render() {
return (
<div className="pageContainer">
<Container className="mainContainer documentContainer postContainer">
<h1>About Slash</h1>
<img src={`${siteConfig.baseUrl}img/docusaurus.svg`} />
<p>
Slash is the official mascot of Docusaurus. You will find different variations of her throughout the <a href="https://docusaurus.io">website</a>, whether she is moving fast on her scooter or writing documentation at her standing desk. At Facebook, we have actual Slash plushies -- and you never know, you may see these plushies at various events and conferences in the future.
</p>
</Container>
<Container className="mainContainer">
<h2>Birth of Slash</h2>
<img src={`${siteConfig.baseUrl}img/slash-birth.png`} />
<p>
The team sat in a conference room trying to come up with a name for the project. Dinosaurs became a theme, finally landing on Docusaurus, combining documentation with those many dinosaurus that end in "saurus". Of course, we needed a logo for our new project. Eric sat down and designed a logo that was quite beyond the norm of our normal open source project logos, but yet was just so awesome, we had to use it. We needed a name for this cute Docusaur. "Marky" for markdown? "Docky" for documentation? No, "Slash" for the normal way someone starts code documentation in many programming languages <code>//</code> or <code>/*</code> or <code>///</code>. And Slash was born.
</p>
</Container>
<br/>
</div>
);
}
}
AboutSlash.defaultProps = {
language: "en"
};
module.exports = AboutSlash;

View file

@ -78,6 +78,7 @@ const siteConfig = {
headerLinks: [
{ doc: "installation", label: "Docs" },
{ page: "help", label: "Help" },
{ page: "about-slash", label: "About/"},
{ blog: true, label: "Blog" },
{
href: "https://github.com/facebook/docusaurus",

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB