add websites

This commit is contained in:
Jack Zhuang 2019-03-18 14:45:05 +08:00
parent 03f711e59a
commit fb0c2ab86c
15 changed files with 771 additions and 1 deletions

12
.gitignore vendored
View File

@ -13,4 +13,14 @@
**/.vscode **/.vscode
**/yarn.lock **/yarn.lock
settings.yml settings.yml
lib/core/metadata.js
lib/core/MetadataBlog.js
website/translated_docs
website/build/
website/yarn.lock
website/node_modules
website/i18n/*

193
website/README.md Normal file
View File

@ -0,0 +1,193 @@
This website was created with [Docusaurus](https://docusaurus.io/).
# What's In This Document
* [Get Started in 5 Minutes](#get-started-in-5-minutes)
* [Directory Structure](#directory-structure)
* [Editing Content](#editing-content)
* [Adding Content](#adding-content)
* [Full Documentation](#full-documentation)
# Get Started in 5 Minutes
1. Make sure all the dependencies for the website are installed:
```sh
# Install dependencies
$ yarn
```
2. Run your dev server:
```sh
# Start the site
$ yarn start
```
## Directory Structure
Your project file structure should look something like this
```
my-docusaurus/
docs/
doc-1.md
doc-2.md
doc-3.md
website/
blog/
2016-3-11-oldest-post.md
2017-10-24-newest-post.md
core/
node_modules/
pages/
static/
css/
img/
package.json
sidebar.json
siteConfig.js
```
# Editing Content
## Editing an existing docs page
Edit docs by navigating to `docs/` and editing the corresponding document:
`docs/doc-to-be-edited.md`
```markdown
---
id: page-needs-edit
title: This Doc Needs To Be Edited
---
Edit me...
```
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
## Editing an existing blog post
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
`website/blog/post-to-be-edited.md`
```markdown
---
id: post-needs-edit
title: This Blog Post Needs To Be Edited
---
Edit me...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
# Adding Content
## Adding a new docs page to an existing sidebar
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
```md
---
id: newly-created-doc
title: This Doc Needs To Be Edited
---
My new content here..
```
1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
```javascript
// Add newly-created-doc to the Getting Started category of docs
{
"docs": {
"Getting Started": [
"quick-start",
"newly-created-doc" // new doc here
],
...
},
...
}
```
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
## Adding a new blog post
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
```
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
`website/blog/2018-05-21-New-Blog-Post.md`
```markdown
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: New Blog Post
---
Lorem Ipsum...
```
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
## Adding items to your site's top navigation bar
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
/* you can add docs */
{ doc: 'my-examples', label: 'Examples' },
/* you can add custom pages */
{ page: 'help', label: 'Help' },
/* you can add external links */
{ href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
...
],
...
}
```
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
## Adding custom pages
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
`website/siteConfig.js`
```javascript
{
headerLinks: [
...
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
...
],
...
}
```
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
# Full Documentation
Full documentation can be found on the [website](https://docusaurus.io/).

View File

@ -0,0 +1,8 @@
---
title: New Version 1.0.0
author: Eric Nakagawa
authorURL: http://twitter.com/ericnakagawa
authorFBID: 661277173
---
This blog post will test file name parsing issues when periods are present.

104
website/core/Footer.js Normal file
View File

@ -0,0 +1,104 @@
/**
* 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');
class Footer extends React.Component {
docUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
const docsUrl = this.props.config.docsUrl;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
return `${baseUrl}${docsPart}${langPart}${doc}`;
}
pageUrl(doc, language) {
const baseUrl = this.props.config.baseUrl;
return baseUrl + (language ? `${language}/` : '') + doc;
}
render() {
return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<a href={this.props.config.baseUrl} className="nav-home">
{this.props.config.footerIcon && (
<img
src={this.props.config.baseUrl + this.props.config.footerIcon}
alt={this.props.config.title}
width="66"
height="58"
/>
)}
</a>
<div>
<h5>Docs</h5>
<a href={this.docUrl('doc1.html', this.props.language)}>
Getting Started (or other categories)
</a>
<a href={this.docUrl('doc2.html', this.props.language)}>
Guides (or other categories)
</a>
<a href={this.docUrl('doc3.html', this.props.language)}>
API Reference (or other categories)
</a>
</div>
<div>
<h5>Community</h5>
<a href={this.pageUrl('users.html', this.props.language)}>
User Showcase
</a>
<a
href="http://stackoverflow.com/questions/tagged/"
target="_blank"
rel="noreferrer noopener">
Stack Overflow
</a>
<a href="https://discordapp.com/">Project Chat</a>
<a
href="https://twitter.com/"
target="_blank"
rel="noreferrer noopener">
Twitter
</a>
</div>
<div>
<h5>More</h5>
<a href={`${this.props.config.baseUrl}blog`}>Blog</a>
<a href="https://github.com/">GitHub</a>
<a
className="github-button"
href={this.props.config.repoUrl}
data-icon="octicon-star"
data-count-href="/facebook/docusaurus/stargazers"
data-show-count="true"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star this project on GitHub">
Star
</a>
</div>
</section>
<a
href="https://code.facebook.com/projects/"
target="_blank"
rel="noreferrer noopener"
className="fbOpenSource">
<img
src={`${this.props.config.baseUrl}img/oss_logo.png`}
alt="Facebook Open Source"
width="170"
height="45"
/>
</a>
<section className="copyright">{this.props.config.copyright}</section>
</footer>
);
}
}
module.exports = Footer;

14
website/package.json Normal file
View File

@ -0,0 +1,14 @@
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus-start",
"build": "docusaurus-build",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version"
},
"devDependencies": {
"docusaurus": "^1.7.2"
}
}

54
website/pages/en/help.js Normal file
View File

@ -0,0 +1,54 @@
/**
* 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;
function Help(props) {
const {config: siteConfig, language = ''} = props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const supportLinks = [
{
content: `Learn more using the [documentation on this site.](${docUrl(
'doc1.html',
)})`,
title: 'Browse Docs',
},
{
content: 'Ask questions about the documentation and project',
title: 'Join the community',
},
{
content: "Find out what's new with this project",
title: 'Stay up to date',
},
];
return (
<div className="docMainWrapper wrapper">
<Container className="mainContainer documentContainer postContainer">
<div className="post">
<header className="postHeader">
<h1>Need help?</h1>
</header>
<p>This project is maintained by a dedicated group of people.</p>
<GridBlock contents={supportLinks} layout="threeColumn" />
</div>
</Container>
</div>
);
}
module.exports = Help;

208
website/pages/en/index.js Normal file
View File

@ -0,0 +1,208 @@
/**
* 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 MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
const Container = CompLibrary.Container;
const GridBlock = CompLibrary.GridBlock;
class HomeSplash extends React.Component {
render() {
const {siteConfig, language = ''} = this.props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const SplashContainer = props => (
<div className="homeContainer">
<div className="homeSplashFade">
<div className="wrapper homeWrapper">{props.children}</div>
</div>
</div>
);
const Logo = props => (
<div className="projectLogo">
<img src={props.img_src} alt="Project Logo" />
</div>
);
const ProjectTitle = () => (
<h2 className="projectTitle">
{siteConfig.title}
<small>{siteConfig.tagline}</small>
</h2>
);
const PromoSection = props => (
<div className="section promoSection">
<div className="promoRow">
<div className="pluginRowBlock">{props.children}</div>
</div>
</div>
);
const Button = props => (
<div className="pluginWrapper buttonWrapper">
<a className="button" href={props.href} target={props.target}>
{props.children}
</a>
</div>
);
return (
<SplashContainer>
<Logo img_src={`${baseUrl}img/docusaurus.svg`} />
<div className="inner">
<ProjectTitle siteConfig={siteConfig} />
<PromoSection>
<Button href="#try">Try It Out</Button>
<Button href={docUrl('doc1.html')}>Example Link</Button>
<Button href={docUrl('doc2.html')}>Example Link 2</Button>
</PromoSection>
</div>
</SplashContainer>
);
}
}
class Index extends React.Component {
render() {
const {config: siteConfig, language = ''} = this.props;
const {baseUrl} = siteConfig;
const Block = props => (
<Container
padding={['bottom', 'top']}
id={props.id}
background={props.background}>
<GridBlock
align="center"
contents={props.children}
layout={props.layout}
/>
</Container>
);
const FeatureCallout = () => (
<div
className="productShowcaseSection paddingBottom"
style={{textAlign: 'center'}}>
<h2>Feature Callout</h2>
<MarkdownBlock>These are features of this project</MarkdownBlock>
</div>
);
const TryOut = () => (
<Block id="try">
{[
{
content: 'Talk about trying this out',
image: `${baseUrl}img/docusaurus.svg`,
imageAlign: 'left',
title: 'Try it Out',
},
]}
</Block>
);
const Description = () => (
<Block background="dark">
{[
{
content:
'This is another description of how this project is useful',
image: `${baseUrl}img/docusaurus.svg`,
imageAlign: 'right',
title: 'Description',
},
]}
</Block>
);
const LearnHow = () => (
<Block background="light">
{[
{
content: 'Talk about learning how to use this',
image: `${baseUrl}img/docusaurus.svg`,
imageAlign: 'right',
title: 'Learn How',
},
]}
</Block>
);
const Features = () => (
<Block layout="fourColumn">
{[
{
content: 'This is the content of my feature',
image: `${baseUrl}img/docusaurus.svg`,
imageAlign: 'top',
title: 'Feature One',
},
{
content: 'The content of my second feature',
image: `${baseUrl}img/docusaurus.svg`,
imageAlign: 'top',
title: 'Feature Two',
},
]}
</Block>
);
const Showcase = () => {
if ((siteConfig.users || []).length === 0) {
return null;
}
const showcase = siteConfig.users
.filter(user => user.pinned)
.map(user => (
<a href={user.infoLink} key={user.infoLink}>
<img src={user.image} alt={user.caption} title={user.caption} />
</a>
));
const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page;
return (
<div className="productShowcaseSection paddingBottom">
<h2>Who is Using This?</h2>
<p>This project is used by all these people</p>
<div className="logos">{showcase}</div>
<div className="more-users">
<a className="button" href={pageUrl('users.html')}>
More {siteConfig.title} Users
</a>
</div>
</div>
);
};
return (
<div>
<HomeSplash siteConfig={siteConfig} language={language} />
<div className="mainContainer">
<Features />
<FeatureCallout />
<LearnHow />
<TryOut />
<Description />
<Showcase />
</div>
</div>
);
}
}
module.exports = Index;

48
website/pages/en/users.js Normal file
View File

@ -0,0 +1,48 @@
/**
* 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;
class Users extends React.Component {
render() {
const {config: siteConfig} = this.props;
if ((siteConfig.users || []).length === 0) {
return null;
}
const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`;
const showcase = siteConfig.users.map(user => (
<a href={user.infoLink} key={user.infoLink}>
<img src={user.image} alt={user.caption} title={user.caption} />
</a>
));
return (
<div className="mainContainer">
<Container padding={['bottom', 'top']}>
<div className="showcaseSection">
<div className="prose">
<h1>Who is Using This?</h1>
<p>This project is used by many folks</p>
</div>
<div className="logos">{showcase}</div>
<p>Are you using this project?</p>
<a href={editUrl} className="button">
Add your company
</a>
</div>
</Container>
</div>
);
}
}
module.exports = Users;

10
website/sidebars.json Normal file
View File

@ -0,0 +1,10 @@
{
"docs": {
"Docusaurus": ["doc1"],
"First Category": ["doc2"],
"Second Category": ["doc3"]
},
"docs-other": {
"First Category": ["doc4", "doc5"]
}
}

104
website/siteConfig.js Normal file
View File

@ -0,0 +1,104 @@
/**
* 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.
*/
// See https://docusaurus.io/docs/site-config for all the possible
// site configuration options.
// List of projects/orgs using your project for the users page.
const users = [
{
caption: 'User1',
// You will need to prepend the image path with your baseUrl
// if it is not '/', like: '/test-site/img/docusaurus.svg'.
image: '/img/docusaurus.svg',
infoLink: 'https://www.facebook.com',
pinned: true,
},
];
const siteConfig = {
title: 'Steedos Objects', // Title for your website.
tagline: '',
url: 'https://steedos.github.io/steedos-core/', // Your website URL
baseUrl: '/', // Base URL for your project */
// For github.io type URLs, you would set the url and baseUrl like:
// url: 'https://facebook.github.io',
// baseUrl: '/test-site/',
// Used for publishing and more
projectName: 'Steedos Objects',
organizationName: 'Steedos',
// For top-level user or org sites, the organization is still the same.
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
// organizationName: 'JoelMarcey'
// For no header links in the top nav bar -> headerLinks: [],
headerLinks: [
{doc: 'README', label: 'Docs'},
{blog: true, label: 'Blog'},
],
// If you have users set above, you add it here:
users,
/* path to images for header/footer */
headerIcon: 'img/docusaurus.svg',
footerIcon: 'img/docusaurus.svg',
favicon: 'img/favicon.png',
/* Colors for website */
colors: {
primaryColor: '#2E8555',
secondaryColor: '#205C3B',
},
/* Custom fonts for website */
/*
fonts: {
myFont: [
"Times New Roman",
"Serif"
],
myOtherFont: [
"-apple-system",
"system-ui"
]
},
*/
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
copyright: `Copyright © ${new Date().getFullYear()} Your Name or Your Company Name`,
highlight: {
// Highlight.js theme to use for syntax highlighting in code blocks.
theme: 'default',
},
// Add custom scripts here that would be placed in <script> tags.
scripts: ['https://buttons.github.io/buttons.js'],
// On page navigation for the current documentation page.
onPageNav: 'separate',
// No .html extensions for paths.
cleanUrl: true,
// Open Graph and Twitter card images.
ogImage: 'img/docusaurus.png',
twitterImage: 'img/docusaurus.png',
// Show documentation's last contributor's name.
// enableUpdateBy: true,
// Show documentation's last update time.
// enableUpdateTime: true,
// You may provide arbitrary config keys to be used as needed by your
// template. For example, if you need your repo's URL...
// repoUrl: 'https://github.com/facebook/test-site',
};
module.exports = siteConfig;

View File

@ -0,0 +1,16 @@
/* your custom css */
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}
@media only screen and (min-width: 1024px) {
}
@media only screen and (max-width: 1023px) {
}
@media only screen and (min-width: 1400px) {
}
@media only screen and (min-width: 1500px) {
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 984 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB