You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@bookkeeper.apache.org by eo...@apache.org on 2020/10/06 08:53:22 UTC

[bookkeeper] branch master updated: New Bookkeeper docusaurus based website

This is an automated email from the ASF dual-hosted git repository.

eolivelli pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/bookkeeper.git


The following commit(s) were added to refs/heads/master by this push:
     new b781480  New Bookkeeper docusaurus based website
b781480 is described below

commit b7814804fc081c6ca72094c5659739f074cf8be9
Author: Anup Ghatage <gh...@gmail.com>
AuthorDate: Tue Oct 6 01:53:15 2020 -0700

    New Bookkeeper docusaurus based website
    
    The Apache Bookkeeper website is a custom built website. While that is cool, its also additional maintenance for the PMC/Committers.
    sijie suggested that we can follow the same path as the Pulsar project and have a docusaurus based website which  uses markdown heavily and is easier to manage and update.
    
    This is a a WIP and this draft PR is to keep the PMC/Committers updated about the progress on the website.
    
    The goal of this PR is to be able to create a basic skeleton of the website with the following pages (and their sub pages) fully fleshed out:
    * Project
    * Community
    * Blog
    * Landing page
    
    So with this, the only thing that remains is the rest of the versioned documentation.
    That work can be done in smaller modules as follow ups.
    This PR will be opened for review and then can be merged once the above mentioned pages are declared to be complete.
    
    cc eolivelli
    
    Reviewers: Enrico Olivelli <eo...@gmail.com>, Sijie Guo <si...@apache.org>
    
    This closes #2426 from Ghatage/docusaurus-website-poc
---
 pom.xml                                            |   1 +
 site2/.dockerignore                                |   2 +
 site2/.gitignore                                   |  12 +
 site2/Dockerfile                                   |  10 +
 site2/docker-compose.yml                           |  18 ++
 site2/docs/bylaws.md                               |  16 ++
 site2/docs/doc2.md                                 |   7 +
 site2/docs/doc3.md                                 |  14 +
 site2/docs/exampledoc4.md                          |   6 +
 site2/docs/exampledoc5.md                          |   6 +
 site2/docs/getting-started.md                      |  29 ++
 site2/website/README.md                            | 198 ++++++++++++++
 site2/website/blog/2017-10-24-new-version-1.0.0.md |   7 +
 site2/website/core/Footer.js                       | 203 ++++++++++++++
 site2/website/package.json                         |  14 +
 site2/website/pages/en/community.js                | 300 +++++++++++++++++++++
 site2/website/pages/en/index.js                    | 206 ++++++++++++++
 site2/website/pages/en/powered-by.js               |  60 +++++
 site2/website/pages/en/project.js                  |  56 ++++
 site2/website/pages/en/users.js                    |  48 ++++
 site2/website/sidebars.json                        |  10 +
 site2/website/siteConfig.js                        | 124 +++++++++
 site2/website/static/css/code-blocks-buttons.css   |  46 ++++
 site2/website/static/css/custom.css                | 149 ++++++++++
 site2/website/static/img/bk-header.png             | Bin 0 -> 25961 bytes
 site2/website/static/img/favicon.ico               | Bin 0 -> 37987 bytes
 site2/website/static/img/oss_logo.png              | Bin 0 -> 4370 bytes
 site2/website/static/img/undraw_code_review.svg    |   1 +
 site2/website/static/img/undraw_monitor.svg        |   1 +
 site2/website/static/img/undraw_note_list.svg      |   1 +
 site2/website/static/img/undraw_online.svg         |   1 +
 site2/website/static/img/undraw_open_source.svg    |   1 +
 .../website/static/img/undraw_operating_system.svg |   1 +
 site2/website/static/img/undraw_react.svg          |   1 +
 site2/website/static/img/undraw_tweetstorm.svg     |   1 +
 .../website/static/img/undraw_youtube_tutorial.svg |   1 +
 36 files changed, 1551 insertions(+)

diff --git a/pom.xml b/pom.xml
index 6b9b039..ee65bf2 100644
--- a/pom.xml
+++ b/pom.xml
@@ -964,6 +964,7 @@
 
             <!-- Website -->
             <exclude>site/**</exclude>
+            <exclude>site2/**</exclude>
 
             <!-- Thrift generated files -->
             <exclude>**/org/apache/distributedlog/thrift/*</exclude>
diff --git a/site2/.dockerignore b/site2/.dockerignore
new file mode 100644
index 0000000..27d2dae
--- /dev/null
+++ b/site2/.dockerignore
@@ -0,0 +1,2 @@
+*/node_modules
+*.log
diff --git a/site2/.gitignore b/site2/.gitignore
new file mode 100644
index 0000000..5395ea7
--- /dev/null
+++ b/site2/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+
+node_modules
+
+lib/core/metadata.js
+lib/core/MetadataBlog.js
+
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+website/i18n/*
diff --git a/site2/Dockerfile b/site2/Dockerfile
new file mode 100644
index 0000000..c7f1856
--- /dev/null
+++ b/site2/Dockerfile
@@ -0,0 +1,10 @@
+FROM node:lts
+
+WORKDIR /app/website
+
+EXPOSE 3000 35729
+COPY ./docs /app/docs
+COPY ./website /app/website
+RUN yarn install
+
+CMD ["yarn", "start"]
diff --git a/site2/docker-compose.yml b/site2/docker-compose.yml
new file mode 100644
index 0000000..6711192
--- /dev/null
+++ b/site2/docker-compose.yml
@@ -0,0 +1,18 @@
+version: "3"
+
+services:
+  docusaurus:
+    build: .
+    ports:
+      - 3000:3000
+      - 35729:35729
+    volumes:
+      - ./docs:/app/docs
+      - ./website/blog:/app/website/blog
+      - ./website/core:/app/website/core
+      - ./website/i18n:/app/website/i18n
+      - ./website/pages:/app/website/pages
+      - ./website/static:/app/website/static
+      - ./website/sidebars.json:/app/website/sidebars.json
+      - ./website/siteConfig.js:/app/website/siteConfig.js
+    working_dir: /app/website
diff --git a/site2/docs/bylaws.md b/site2/docs/bylaws.md
new file mode 100644
index 0000000..78dd503
--- /dev/null
+++ b/site2/docs/bylaws.md
@@ -0,0 +1,16 @@
+---
+id: bylaws
+title: Bylaws
+---
+
+# Introduction
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odi [...]
+
+# Roles and responsibilities
+Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique.
+
+Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis.
+
+Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor.
+
+Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur.
diff --git a/site2/docs/doc2.md b/site2/docs/doc2.md
new file mode 100644
index 0000000..20c0c95
--- /dev/null
+++ b/site2/docs/doc2.md
@@ -0,0 +1,7 @@
+---
+id: doc2
+title: document number 2
+---
+
+This is a link to [another document.](doc3.md)  
+This is a link to an [external page.](http://www.example.com)
diff --git a/site2/docs/doc3.md b/site2/docs/doc3.md
new file mode 100644
index 0000000..2cc6183
--- /dev/null
+++ b/site2/docs/doc3.md
@@ -0,0 +1,14 @@
+---
+id: doc3
+title: This is document number 3
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac euismod odio, eu consequat dui. Nullam molestie consectetur risus id imperdiet. Proin sodales ornare turpis, non mollis massa ultricies id. Nam at nibh scelerisque, feugiat ante non, dapibus tortor. Vivamus volutpat diam quis tellus elementum bibendum. Praesent semper gravida velit quis aliquam. Etiam in cursus neque. Nam lectus ligula, malesuada et mauris a, bibendum faucibus mi. Phasellus ut interdum felis. Phasellus in odi [...]
+
+Duis et egestas libero, imperdiet faucibus ipsum. Sed posuere eget urna vel feugiat. Vivamus a arcu sagittis, fermentum urna dapibus, congue lectus. Fusce vulputate porttitor nisl, ac cursus elit volutpat vitae. Nullam vitae ipsum egestas, convallis quam non, porta nibh. Morbi gravida erat nec neque bibendum, eu pellentesque velit posuere. Fusce aliquam erat eu massa eleifend tristique.
+
+Sed consequat sollicitudin ipsum eget tempus. Integer a aliquet velit. In justo nibh, pellentesque non suscipit eget, gravida vel lacus. Donec odio ante, malesuada in massa quis, pharetra tristique ligula. Donec eros est, tristique eget finibus quis, semper non nisl. Vivamus et elit nec enim ornare placerat. Sed posuere odio a elit cursus sagittis.
+
+Phasellus feugiat purus eu tortor ultrices finibus. Ut libero nibh, lobortis et libero nec, dapibus posuere eros. Sed sagittis euismod justo at consectetur. Nulla finibus libero placerat, cursus sapien at, eleifend ligula. Vivamus elit nisl, hendrerit ac nibh eu, ultrices tempus dui. Nam tellus neque, commodo non rhoncus eu, gravida in risus. Nullam id iaculis tortor.
+
+Nullam at odio in sem varius tempor sit amet vel lorem. Etiam eu hendrerit nisl. Fusce nibh mauris, vulputate sit amet ex vitae, congue rhoncus nisl. Sed eget tellus purus. Nullam tempus commodo erat ut tristique. Cras accumsan massa sit amet justo consequat eleifend. Integer scelerisque vitae tellus id consectetur.
diff --git a/site2/docs/exampledoc4.md b/site2/docs/exampledoc4.md
new file mode 100644
index 0000000..6f94ffe
--- /dev/null
+++ b/site2/docs/exampledoc4.md
@@ -0,0 +1,6 @@
+---
+id: doc4
+title: Other Document
+---
+
+this is another document
diff --git a/site2/docs/exampledoc5.md b/site2/docs/exampledoc5.md
new file mode 100644
index 0000000..92e2d0d
--- /dev/null
+++ b/site2/docs/exampledoc5.md
@@ -0,0 +1,6 @@
+---
+id: doc5
+title: Fifth Document
+---
+
+Another one
diff --git a/site2/docs/getting-started.md b/site2/docs/getting-started.md
new file mode 100644
index 0000000..7381eb5
--- /dev/null
+++ b/site2/docs/getting-started.md
@@ -0,0 +1,29 @@
+---
+id: getting-started
+title: Latin-ish Lol
+sidebar_label: Example Page
+---
+
+Check the [documentation](https://docusaurus.io) for how to use Docusaurus.
+
+## Lorem
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien.
+
+## Mauris In Code
+
+```
+Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maece [...]
+```
+
+## Nulla
+
+Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pelle [...]
+
+## Orci
+
+Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi  [...]
+
+## Phasellus
+
+Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bib [...]
diff --git a/site2/website/README.md b/site2/website/README.md
new file mode 100644
index 0000000..6477a55
--- /dev/null
+++ b/site2/website/README.md
@@ -0,0 +1,198 @@
+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
+    sidebars.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/sidebars.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/).
diff --git a/site2/website/blog/2017-10-24-new-version-1.0.0.md b/site2/website/blog/2017-10-24-new-version-1.0.0.md
new file mode 100644
index 0000000..4a88cdc
--- /dev/null
+++ b/site2/website/blog/2017-10-24-new-version-1.0.0.md
@@ -0,0 +1,7 @@
+---
+title: New Website Version 1.0.0
+author: Anup Ghatage
+authorURL: http://twitter.com/ghatageanup
+---
+
+Welcome to the new Apache Bookkeeper website!
diff --git a/site2/website/core/Footer.js b/site2/website/core/Footer.js
new file mode 100644
index 0000000..0b27345
--- /dev/null
+++ b/site2/website/core/Footer.js
@@ -0,0 +1,203 @@
+/**
+ * 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="https://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>
+            {this.props.config.twitterUsername && (
+              <div className="social">
+                <a
+                  href={`https://twitter.com/${this.props.config.twitterUsername}`}
+                  className="twitter-follow-button">
+                  Follow @{this.props.config.twitterUsername}
+                </a>
+              </div>
+            )}
+            {this.props.config.facebookAppId && (
+              <div className="social">
+                <div
+                  className="fb-like"
+                  data-href={this.props.config.url}
+                  data-colorscheme="dark"
+                  data-layout="standard"
+                  data-share="true"
+                  data-width="225"
+                  data-show-faces="false"
+                />
+              </div>
+            )}
+          </div>
+        </section>
+
+        <a
+          href="https://opensource.facebook.com/"
+          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>
+    );
+  }
+}
+*/
+
+class Footer extends React.Component {
+    docUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+    }
+
+    pageUrl(doc, language) {
+        const baseUrl = this.props.config.baseUrl;
+        return baseUrl + (language ? language + '/' : '') + doc;
+    }
+
+    render() {
+        const currentYear = new Date().getFullYear();
+
+        const contactUrl = this.pageUrl('contact', this.props.language)
+        const eventsUrl = this.pageUrl('events', this.props.language)
+        const twitterUrl = 'https://twitter.com/asfbookkeeper'
+        const wikiUrl = 'https://github.com/apache/bookkeeper/wiki'
+        const issuesUrl = 'https://github.com/apache/bookkeeper/issues'
+        const resourcesUrl = this.pageUrl('resources', this.props.language)
+        const teamUrl = this.pageUrl('team', this.props.language)
+        const poweredByUrl = this.pageUrl('powered-by', this.props.language)
+        const contributingUrl = this.pageUrl('contributing', this.props.language)
+        const codingUrl = this.pageUrl('coding-guide', this.props.language)
+
+        const communityMenuJs = `
+      const community = document.querySelector("a[href='#community']").parentNode;
+      const communityMenu =
+        '<li>' +
+        '<a id="community-menu" href="#">Community <span style="font-size: 0.75em">&nbsp;▼</span></a>' +
+        '<div id="community-dropdown" class="hide">' +
+          '<ul id="community-dropdown-items">' +
+            '<li><a href="${contactUrl}">Contact</a></li>' +
+            '<li><a href="${contributingUrl}">Contributing</a></li>' +
+            '<li><a href="${codingUrl}">Coding guide</a></li>' +
+            '<li><a href="${eventsUrl}">Events</a></li>' +
+            '<li><a href="${twitterUrl}" target="_blank">Twitter &#x2750</a></li>' +
+            '<li><a href="${wikiUrl}" target="_blank">Wiki &#x2750</a></li>' +
+            '<li><a href="${issuesUrl}" target="_blank">Issue tracking &#x2750</a></li>' +
+            '<li>&nbsp;</li>' +
+            '<li><a href="${resourcesUrl}">Resources</a></li>' +
+            '<li><a href="${teamUrl}">Team</a></li>' +
+            '<li><a href="${poweredByUrl}">Powered By</a></li>' +
+          '</ul>' +
+        '</div>' +
+        '</li>';
+
+      community.innerHTML = communityMenu;
+
+      const communityMenuItem = document.getElementById("community-menu");
+      const communityDropDown = document.getElementById("community-dropdown");
+      communityMenuItem.addEventListener("click", function(event) {
+        event.preventDefault();
+
+        if (communityDropDown.className == 'hide') {
+          communityDropDown.className = 'visible';
+        } else {
+          communityDropDown.className = 'hide';
+        }
+      });
+    `
+
+        return (
+            <footer className="nav-footer" id="footer">
+                <section className="copyright">{this.props.config.copyright}</section>
+                <span>
+        <script dangerouslySetInnerHTML={{__html: communityMenuJs }} />
+        </span>
+            </footer>
+        );
+    }
+}
+
+
+
+module.exports = Footer;
diff --git a/site2/website/package.json b/site2/website/package.json
new file mode 100644
index 0000000..1f87392
--- /dev/null
+++ b/site2/website/package.json
@@ -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.14.4"
+  }
+}
diff --git a/site2/website/pages/en/community.js b/site2/website/pages/en/community.js
new file mode 100644
index 0000000..f20b2a1
--- /dev/null
+++ b/site2/website/pages/en/community.js
@@ -0,0 +1,300 @@
+/**
+ * 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 about the [license.](http://www.apache.org/licenses/)`,
+      title: 'Apache License',
+    },
+    {
+      content: 'Ask questions about the documentation and project',
+      title: 'Join the community',
+    },
+    {
+      content: "Learn more about our [sponsors.](http://www.apache.org/licenses/)",
+      title: 'Sponsorship',
+    },
+  ];
+
+  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" />
+	  <p>BookKeeper’s PMC members are:</p>
+	  <table>
+  <thead>
+    <tr>
+      <th>Username</th>
+      <th>Name</th>
+      <th>Organization</th>
+      <th>Timezone</th>
+    </tr>
+  </thead>
+		<tbody>
+    <tr>
+      <td>breed</td>
+      <td>Ben Reed</td>
+      <td>Facebook</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>drusek</td>
+      <td>Dave Rusek</td>
+      <td>Twitter</td>
+      <td>-7</td>
+    </tr>
+    <tr>
+      <td>eolivelli</td>
+      <td>Enrico Olivelli</td>
+      <td>Diennea</td>
+      <td>+2</td>
+    </tr>
+    <tr>
+      <td>fcuny</td>
+      <td>Franck Cuny</td>
+      <td>Twitter</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>fpj</td>
+      <td>Flavio Junqueira</td>
+      <td>Pravega</td>
+      <td>+1</td>
+    </tr>
+    <tr>
+      <td>hsaputra</td>
+      <td>Henry Saputra</td>
+      <td> </td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>ivank</td>
+      <td>Ivan Kelly</td>
+      <td>Splunk</td>
+      <td>+2</td>
+    </tr>
+    <tr>
+      <td>jiannan</td>
+      <td>Jiannan Wang</td>
+      <td>Yahoo Inc.</td>
+      <td>+8</td>
+    </tr>
+    <tr>
+      <td>jujjuri</td>
+      <td>Venkateswararao (JV) Jujjuri</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>lstewart</td>
+      <td>Leigh Stewart</td>
+      <td>Twitter</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>mmerli</td>
+      <td>Matteo Merli</td>
+      <td>Splunk</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>rakeshr</td>
+      <td>Rakesh Radhakrishnan</td>
+      <td>Huawei</td>
+      <td>+5:30</td>
+    </tr>
+    <tr>
+      <td>sijie</td>
+      <td>Sijie Guo</td>
+      <td>StreamNative</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>umamahesh</td>
+      <td>Uma Maheswara Rao G</td>
+      <td>Intel</td>
+      <td>+5</td>
+    </tr>
+    <tr>
+      <td>zhaijia</td>
+      <td>Jia Zhai</td>
+      <td>StreamNative</td>
+      <td>+8</td>
+    </tr>
+    <tr>
+      <td>rdhabalia</td>
+      <td>Rajan Dhabalia</td>
+      <td>Yahoo Inc.</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>reddycharan</td>
+      <td>Charan Reddy Guttapalem</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+		</tbody>
+	  </table>
+
+
+<h2 id="committers">Committers</h2>
+
+<p>BookKeeper’s active committers are:</p>
+
+<table>
+  <thead>
+    <tr>
+      <th>Username</th>
+      <th>Name</th>
+      <th>Organization</th>
+      <th>Timezone</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>ayegorov</td>
+      <td>Andrey Yegorov</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>breed</td>
+      <td>Ben Reed</td>
+      <td>Facebook</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>drusek</td>
+      <td>Dave Rusek</td>
+      <td>Twitter</td>
+      <td>-7</td>
+    </tr>
+    <tr>
+      <td>eolivelli</td>
+      <td>Enrico Olivelli</td>
+      <td>Diennea</td>
+      <td>+2</td>
+    </tr>
+    <tr>
+      <td>fcuny</td>
+      <td>Franck Cuny</td>
+      <td>Twitter</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>fpj</td>
+      <td>Flavio Junqueira</td>
+      <td>Pravega</td>
+      <td>+1</td>
+    </tr>
+    <tr>
+      <td>hsaputra</td>
+      <td>Henry Saputra</td>
+      <td> </td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>ivank</td>
+      <td>Ivan Kelly</td>
+      <td>Splunk</td>
+      <td>+2</td>
+    </tr>
+    <tr>
+      <td>jiannan</td>
+      <td>Jiannan Wang</td>
+      <td>Yahoo Inc.</td>
+      <td>+8</td>
+    </tr>
+    <tr>
+      <td>jujjuri</td>
+      <td>Venkateswararao (JV) Jujjuri</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>mmerli</td>
+      <td>Matteo Merli</td>
+      <td>Splunk</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>rakeshr</td>
+      <td>Rakesh Radhakrishnan</td>
+      <td>Huawei</td>
+      <td>+5:30</td>
+    </tr>
+    <tr>
+      <td>reddycharan</td>
+      <td>Charan Reddy G</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>robindh</td>
+      <td>Robin Dhamankar</td>
+      <td>Facebook</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>sboobna</td>
+      <td>Siddharth Boobna</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>sijie</td>
+      <td>Sijie Guo</td>
+      <td>StreamNative</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>sjust</td>
+      <td>Sam Just</td>
+      <td>Salesforce</td>
+      <td>-8</td>
+    </tr>
+    <tr>
+      <td>umamahesh</td>
+      <td>Uma Maheswara Rao G</td>
+      <td>Intel</td>
+      <td>+5</td>
+    </tr>
+    <tr>
+      <td>zhaijia</td>
+      <td>Jia Zhai</td>
+      <td>StreamNative</td>
+      <td>+8</td>
+    </tr>
+  </tbody>
+</table>
+
+        </div>
+      </Container>
+    </div>
+  );
+}
+
+module.exports = Help;
diff --git a/site2/website/pages/en/index.js b/site2/website/pages/en/index.js
new file mode 100644
index 0000000..4561821
--- /dev/null
+++ b/site2/website/pages/en/index.js
@@ -0,0 +1,206 @@
+/**
+ * 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;
+
+const CWD = process.cwd();
+const siteConfig = require(`${CWD}/siteConfig.js`);
+// const translate = require('../../server/translate.js').translate;
+// const users = require(`${CWD}/data/users.js`)
+// const featuredUsers = users.filter(x => x.hasOwnProperty('featured'))
+// featuredUsers.sort((a, b) => (a.featured > b.featured) ? 1 : -1);
+
+function imgUrl(img) {
+    return siteConfig.baseUrl + 'img/' + img;
+}
+
+function docUrl(doc, language) {
+    return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc;
+}
+
+function pageUrl(page, language) {
+    return siteConfig.baseUrl + (language ? language + '/' : '') + page;
+}
+
+function githubUrl() {
+    return siteConfig.githubUrl;
+}
+
+class HomeSplash extends React.Component {
+    render() {
+        let language = this.props.language || '';
+        return (
+            <SplashContainer>
+                <Logo img_src={imgUrl('bk-header.png')}/>
+                <div className="inner">
+                    <ProjectTitle/>
+                    <PromoSection>
+                        <Button href={docUrl('standalone', language)}>Read the docs</Button>
+                        <Button href={githubUrl()}>GitHub</Button>
+                    </PromoSection>
+                </div>
+            </SplashContainer>
+        );
+    }
+}
+
+const SplashContainer = props => (
+    <div className="homeContainer">
+        <div className="homeSplashFade" style={{marginTop: '5rem'}}>
+            <div className="wrapper homeWrapper">{props.children}</div>
+        </div>
+    </div>
+);
+
+const Logo = props => (
+    <div className="" style={{width: '500px', alignItems: 'center', margin: 'auto'}}>
+        <img src={props.img_src} />
+    </div>
+);
+
+const ProjectTitle = props => (
+    <h2 className="projectTitle" style={{maxWidth:'1024px', margin: 'auto'}}>
+        <small style={{color: 'black', fontSize: '2.0rem'}}>{siteConfig.projectDescription}</small>
+    </h2>
+);
+
+const PromoSection = props => (
+    <div className="section promoSection">
+        <div className="promoRow">
+            <div className="pluginRowBlock">{props.children}</div>
+        </div>
+    </div>
+);
+
+class Button extends React.Component {
+    render() {
+        return (
+            <div className="pluginWrapper buttonWrapper">
+                <a className="button" href={this.props.href} target={this.props.target}>
+                    {this.props.children}
+                </a>
+            </div>
+        );
+    }
+}
+
+const KeyFeaturesGrid = props => (
+    <Container
+        padding={['bottom']}
+        id={props.id}
+        background={props.background}>
+        <GridBlock align="center" contents={props.features.row1} layout="threeColumn" />
+        <GridBlock align="center" contents={props.features.row2} layout="threeColumn" />
+        <GridBlock align="center" contents={props.features.row3} layout="threeColumn" />
+    </Container>
+);
+
+const features_lang = language => {
+    return {
+        row1: [
+            {
+                content: 'BookKeeper has run in production at Yahoo, Twitter and Salesforce at scale for over 3 years, with petabytes of data stored',
+                title: `[Proven in production](${docUrl('concepts-architecture-overview', language)})`,
+            },
+            {
+                content: 'Seamlessly expand capacity to hundreds of nodes',
+                title: `[Horizontally scalable](${docUrl('concepts-architecture-overview', language)})`,
+            },
+            {
+                content: 'Persistent message storage based on Apache BookKeeper. Provides IO-level isolation between write and read operations',
+                title: `[Persistent storage](${docUrl('concepts-architecture-overview#persistent-storage', language)})`,
+            },
+        ],
+        row2: [
+            {
+                content: 'Designed for low publish latency (< 5ms) at scale with strong durabilty guarantees',
+                title: `[Low latency with durability](${docUrl('concepts-architecture-overview', language)})`,
+            },
+            {
+                content: 'Designed for configurable replication between data centers across multiple geographic regions',
+                title: `[Geo-replication](${docUrl('administration-geo', language)})`,
+            },
+            {
+                content: 'Built from the ground up as a multi-tenant system. Supports Isolation, Authentication, Authorization and Quotas',
+                title: `[Multi-tenancy](${docUrl('concepts-multi-tenancy', language)})`,
+            }
+        ]
+    };
+};
+
+const UsersBlock = props => (
+    <Container
+        padding={['bottom']}
+        id={props.id}
+        background={props.background}>
+
+        <p align="center"><small style={{color: 'black', fontSize: '1.7rem'}}>Used by companies such as</small></p>
+        <div class="logo-wrapper">
+            {
+/* TODO: Ghatage/eolivelli: Confirm with companies if it is OK to use their logo for BookKeeper website.
+                featuredUsers.map(
+                    c => (
+                        (() => {
+                            if (c.hasOwnProperty('logo_white')) {
+                                return <div className="logo-box-background-for-white">
+                                    <a href={c.url} title={c.name} target="_blank">
+                                        <img src={c.logo} alt={c.name} className={c.logo.endsWith('.svg') ? 'logo-svg' : ''}/>
+                                    </a>
+                                </div>
+                            } else {
+                                return <div className="logo-box">
+                                    <a href={c.url} title={c.name} target="_blank">
+                                        <img src={c.logo} alt={c.name} className={c.logo.endsWith('.svg') ? 'logo-svg' : ''}/>
+                                    </a>
+                                </div>
+                            }
+                        })()
+                    )
+                )
+*/
+	}
+        </div>
+        <p align="center"><small style={{color: 'black', fontSize: '1.7rem'}}>and many more</small></p>
+
+    </Container>
+);
+
+const ApacheBlock = prop => (
+    <Container>
+        <div className="Block" style={{textAlign: 'center'}}>
+            <p>
+                Apache BookKeeper is available under the <a href="https://www.apache.org/licenses">Apache License, version 2.0</a>.
+            </p>
+        </div>
+    </Container>
+);
+
+class Index extends React.Component {
+    render() {
+        let language = this.props.language || '';
+        let features = features_lang(language);
+
+        return (
+            <div>
+                <HomeSplash language={language} />
+                <div className="mainContainer">
+                    <KeyFeaturesGrid features={features} id={'key-features'} />
+                    //<UsersBlock id={'users'} />
+                    <ApacheBlock />
+                </div>
+            </div>
+        );
+    }
+}
+
+module.exports = Index;
diff --git a/site2/website/pages/en/powered-by.js b/site2/website/pages/en/powered-by.js
new file mode 100644
index 0000000..9107ee0
--- /dev/null
+++ b/site2/website/pages/en/powered-by.js
@@ -0,0 +1,60 @@
+
+
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+const Container = CompLibrary.Container;
+const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
+const GridBlock = CompLibrary.GridBlock;
+
+const CWD = process.cwd();
+
+const translate = require('../../server/translate.js').translate;
+
+const siteConfig = require(`${CWD}/siteConfig.js`);
+const users = require(`${CWD}/data/users.js`)
+
+class Users extends React.Component {
+  render() {
+    let language = this.props.language || '';
+
+
+    return (
+        <div className="docMainWrapper wrapper">
+          <Container className="mainContainer documentContainer postContainer">
+            <div className="post">
+              <header className="postHeader">
+                <h1><translate>Companies using or contributing to Apache BookKeeper</translate></h1>
+                <hr />
+              </header>
+
+              <div class="logo-wrapper">
+                {
+                  users.map(
+                      c => (
+                          (() => {
+                            if (c.hasOwnProperty('logo_white')) {
+                              return <div className="logo-box-background-for-white">
+                                <a href={c.url} title={c.name} target="_blank">
+                                  <img src={c.logo} alt={c.name} className={c.logo.endsWith('.svg') ? 'logo-svg' : ''}/>
+                                </a>
+                              </div>
+                            } else {
+                              return <div className="logo-box">
+                                <a href={c.url} title={c.name} target="_blank">
+                                  <img src={c.logo} alt={c.name} className={c.logo.endsWith('.svg') ? 'logo-svg' : ''}/>
+                                </a>
+                              </div>
+                            }
+                          })()
+                      )
+                  )}
+              </div>
+            </div>
+          </Container>
+        </div>
+    );
+  }
+}
+
+module.exports = Users;
diff --git a/site2/website/pages/en/project.js b/site2/website/pages/en/project.js
new file mode 100644
index 0000000..a7f669f
--- /dev/null
+++ b/site2/website/pages/en/project.js
@@ -0,0 +1,56 @@
+/**
+ * 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 about the [license.](http://www.apache.org/licenses/)`,
+      title: 'Apache License',
+    },
+    {
+      content: 'Learn more about our [sponsors.](http://www.apache.org/foundation/thanks.html)',
+      title: 'Join the community',
+    },
+    {
+      content: "Learn more about how to be an Apache [sponsor.](http://www.apache.org/licenses/)",
+      title: 'Sponsorship',
+    },
+    {
+      content: `Read through our [bylaws.](${docUrl('bylaws')})`,
+      title: 'Bylaws',
+    },
+  ];
+
+  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;
diff --git a/site2/website/pages/en/users.js b/site2/website/pages/en/users.js
new file mode 100644
index 0000000..039dc39
--- /dev/null
+++ b/site2/website/pages/en/users.js
@@ -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;
diff --git a/site2/website/sidebars.json b/site2/website/sidebars.json
new file mode 100644
index 0000000..7a1d054
--- /dev/null
+++ b/site2/website/sidebars.json
@@ -0,0 +1,10 @@
+{
+  "docs": {
+    "Docusaurus": ["doc1"],
+    "First Category": ["doc2"],
+    "Second Category": ["doc3"]
+  },
+  "docs-other": {
+    "First Category": ["doc4", "doc5"]
+  }
+}
diff --git a/site2/website/siteConfig.js b/site2/website/siteConfig.js
new file mode 100644
index 0000000..9f68a32
--- /dev/null
+++ b/site2/website/siteConfig.js
@@ -0,0 +1,124 @@
+/**
+ * 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/image.jpg'.
+    image: '/img/undraw_open_source.svg',
+    infoLink: 'https://www.facebook.com',
+    pinned: true,
+  },
+];
+
+const url = 'https://bookkeeper.apache.org/'
+const javadocUrl = url + '/api';
+const restApiUrl = url + '/en' + "/admin-rest-api";
+const functionsApiUrl = url + '/en' + "/functions-rest-api";
+const sourceApiUrl = url + '/en' + "/source-rest-api";
+const sinkApiUrl = url + '/en' + "/sink-rest-api";
+const baseUrl = '/bookkeeper-test/';
+const githubUrl = 'https://github.com/apache/bookkeeper';
+
+const siteConfig = {
+  title: 'Apache BookKeeper', // Title for your website.
+  disableTitleTagline: true,
+  tagline: '',
+  url: 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: 'bookkeeper',
+  organizationName: 'apache',
+  // 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: 'getting-started', label: 'Documentation'},
+    {page: 'community', label: 'Community'},
+    {page: 'project', label: 'Project'},
+    {blog: true, label: 'Blog'},
+  ],
+
+  // If you have users set above, you add it here:
+  users,
+
+  /* path to images for header/footer */
+  headerIcon: 'img/bk-header.png',
+  footerIcon: 'img/favicon.ico',
+  favicon: 'img/favicon.ico',
+
+  /* Colors for website */
+  colors: {
+    primaryColor: '#c86803',
+    secondaryColor: '#35092d',
+  },
+
+  /* Custom fonts for website */
+  /*
+  fonts: {
+    myFont: [
+      "Times New Roman",
+      "Serif"
+    ],
+    myOtherFont: [
+      "-apple-system",
+      "system-ui"
+    ]
+  },
+  */
+
+  githubUrl: githubUrl,
+
+  // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
+  copyright: `
+  Copyright © 2020 The Apache Software Foundation. All Rights Reserved. Apache, Apache BookKeeper and the Apache feather logo are trademarks of The Apache Software Foundation.
+  `,
+
+  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/undraw_online.svg',
+  twitterImage: 'img/undraw_tweetstorm.svg',
+
+  // For sites with a sizable amount of content, set collapsible to true.
+  // Expand/collapse the links and subcategories under categories.
+  // docsSideNavCollapsible: true,
+
+  // 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;
diff --git a/site2/website/static/css/code-blocks-buttons.css b/site2/website/static/css/code-blocks-buttons.css
new file mode 100644
index 0000000..06127c1
--- /dev/null
+++ b/site2/website/static/css/code-blocks-buttons.css
@@ -0,0 +1,46 @@
+/* "Copy" code block button */
+pre {
+    position: relative;
+}
+
+pre .btnIcon {
+    position: absolute;
+    top: 4px;
+    z-index: 2;
+    cursor: pointer;
+    border: 1px solid transparent;
+    padding: 0;
+    color: #fff;
+    background-color: transparent;
+    height: 30px;
+    transition: all .25s ease-out;
+}
+
+pre .btnIcon:hover {
+    text-decoration: none;
+}
+
+.btnIcon__body {
+    align-items: center;
+    display: flex;
+}
+
+.btnIcon svg {
+    fill: currentColor;
+    margin-right: .4em;
+}
+
+.btnIcon__label {
+    font-size: 11px;
+}
+
+.btnClipboard {
+    right: 10px;
+}
+
+.version_select {
+    width: 200px;
+    height: 30px;
+    border: 1px solid #000000;
+    border-radius: 4px;
+}
\ No newline at end of file
diff --git a/site2/website/static/css/custom.css b/site2/website/static/css/custom.css
new file mode 100644
index 0000000..e23b26d
--- /dev/null
+++ b/site2/website/static/css/custom.css
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+ 
+/* 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) {
+}
+
+.topic {
+    color: #bcc5c5;
+    background-color: #232937;
+    font-size: 1.25rem;
+    font-family: "Inconsolata", monospace;
+    font-weight: 700;
+    padding: .5rem 0 .5rem 1rem;
+    border-radius: 0;
+}
+
+.tenant-color {
+    color: #b1cc00;
+}
+
+.navigationSlider .slidingNav ul li a {
+    color: #c86803;
+}
+
+.navigationSlider .slidingNav ul li.siteNavGroupActive a,
+.navigationSlider .slidingNav ul li.siteNavItemActive a,
+.navigationSlider .slidingNav ul li a:focus,
+.navigationSlider .slidingNav ul li a:hover {
+    background: white;
+    color: #c86803;
+}
+
+.navigationSlider .slidingNav ul li.siteNavItemActive a {
+    background: #c86803;
+    color: white;
+}
+
+/* header navigation */
+.fixedHeaderContainer {
+    background-color: white;
+}
+
+
+/* for drop down menus */
+#community-dropdown.hide,
+#apache-dropdown.hide,
+#restapis-dropdown.hide,
+#cli-dropdown.hide,
+#languages-dropdown.hide {
+    display: none;
+}
+
+
+#community-dropdown.visible,
+#apache-dropdown.visible,
+#restapis-dropdown.visible,
+#cli-dropdown.visible,
+#languages-dropdown.visible {
+    display: flex;
+}
+
+#community-dropdown,
+#apache-dropdown,
+#restapis-dropdown,
+#cli-dropdown,
+#languages-dropdown {
+    pointer-events: none;
+    position: absolute;
+    width: 100%;
+}
+
+#community-dropdown-items,
+#apache-dropdown-items,
+#restapis-dropdown-items,
+#cli-dropdown-items,
+#languages-dropdown-items {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    min-width: 120px;
+    pointer-events: all;
+    border: 1px solid rgba(35, 41, 55, 0.15);
+    border-radius: 0.25rem;
+}
+
+
+.logo-wrapper {
+    display: grid;
+    grid-template-columns: 250px 250px 250px 250px;
+    grid-gap: 30px;
+    /* background-color: #fff; */
+    /* color: #444; */
+    /* border: dashed red 1px; */
+    /* align-items: center; */
+    justify-content: center;
+}
+
+.logo-box {
+    /* background-color: #fafafa; */
+    /* color: #fff; */
+    border-radius: 5px;
+    padding: 20px;
+    font-size: 150%;
+    /* border: dashed blue 1px; */
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.logo-box-background-for-white {
+    background-color: #0f1637;
+    border-radius: 5px;
+    padding: 20px;
+    font-size: 150%;
+    /* border: dashed blue 1px; */
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-box img {
+    max-height: 80px;
+    /* border: dashed green 1px; */
+}
+
+.logo-svg {
+    min-width: 200px;
+}
\ No newline at end of file
diff --git a/site2/website/static/img/bk-header.png b/site2/website/static/img/bk-header.png
new file mode 100644
index 0000000..9e38105
Binary files /dev/null and b/site2/website/static/img/bk-header.png differ
diff --git a/site2/website/static/img/favicon.ico b/site2/website/static/img/favicon.ico
new file mode 100644
index 0000000..b2f132b
Binary files /dev/null and b/site2/website/static/img/favicon.ico differ
diff --git a/site2/website/static/img/oss_logo.png b/site2/website/static/img/oss_logo.png
new file mode 100644
index 0000000..8183e28
Binary files /dev/null and b/site2/website/static/img/oss_logo.png differ
diff --git a/site2/website/static/img/undraw_code_review.svg b/site2/website/static/img/undraw_code_review.svg
new file mode 100644
index 0000000..fc22b95
--- /dev/null
+++ b/site2/website/static/img/undraw_code_review.svg
@@ -0,0 +1 @@
+<svg id="a594ac37-6d44-4297-8862-1cbd9c01c0b7" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1126.19355" height="855" viewBox="0 0 1126.19355 855"><title>code review</title><path d="M581.7675,778.43794C339.36866,759.99137,50.29677,572.17166,65.01385,378.78054S359.70017,5.35846,602.099,23.805,984.03089,403.667,969.31381,597.05809,824.16633,796.88451,581.7675,778.43794Z" transform="translate(-36.90323 -22.5)" fill="#f2f2f2"/><ellipse cx="565.19355" cy="756" rx="506" ry="31" [...]
diff --git a/site2/website/static/img/undraw_monitor.svg b/site2/website/static/img/undraw_monitor.svg
new file mode 100644
index 0000000..2eb2e3a
--- /dev/null
+++ b/site2/website/static/img/undraw_monitor.svg
@@ -0,0 +1 @@
+<svg id="ad7c1fe1-eb22-473c-bc85-8b4fe073a50d" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1094.72" height="788.69" viewBox="0 0 1094.72 788.69"><defs><linearGradient id="f137b292-0aa2-40b3-a442-9a256144b6d8" x1="2938.83" y1="215.4" x2="2938.83" y2="-91.93" gradientTransform="matrix(0.51, 0.86, -0.86, 0.51, -713.07, -2373.14)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0 [...]
diff --git a/site2/website/static/img/undraw_note_list.svg b/site2/website/static/img/undraw_note_list.svg
new file mode 100644
index 0000000..68c6108
--- /dev/null
+++ b/site2/website/static/img/undraw_note_list.svg
@@ -0,0 +1 @@
+<svg id="ada6f7ae-8394-4767-8700-18704e9e9034" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="974" height="805.02" viewBox="0 0 974 805.02"><title>note list</title><path d="M1087,816.24v5a19.11,19.11,0,0,1-20.91,19c-39.15-3.72-78.12-10.64-117.4-9.43-72.42,2.21-145.44,31.83-215.54,13.53-19.77-5.16-39.32-14.13-59.66-12.2-18.25,1.73-34.49,12.05-52.17,16.89C567.55,863.79,512.8,826.49,457.06,828c-36.74,1-71.92,18.89-108.62,16.9-21.27-1.14-41.53-8.92-62.28-13.71-51.66-11.94-104. [...]
diff --git a/site2/website/static/img/undraw_online.svg b/site2/website/static/img/undraw_online.svg
new file mode 100644
index 0000000..83d08f6
--- /dev/null
+++ b/site2/website/static/img/undraw_online.svg
@@ -0,0 +1 @@
+<svg id="f9ea829a-01ef-4860-a3a7-641ca853f294" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1082.19" height="847.94" viewBox="0 0 1082.19 847.94"><defs><linearGradient id="0bbd7947-ca61-424a-a753-fb567ef3345a" x1="276.42" y1="818" x2="276.42" y2="60" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray"  [...]
diff --git a/site2/website/static/img/undraw_open_source.svg b/site2/website/static/img/undraw_open_source.svg
new file mode 100644
index 0000000..ac065dd
--- /dev/null
+++ b/site2/website/static/img/undraw_open_source.svg
@@ -0,0 +1 @@
+<svg id="a58ef234-55dd-4456-b368-278f056cc5c7" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1028" height="598.99741" viewBox="0 0 1028 598.99741"><title>open source</title><circle cx="332.00497" cy="292.00357" r="292.00357" fill="#f2f2f2"/><path d="M1114,668.4987a13.68982,13.68982,0,0,1-.16992,2.12c-7.14014,43.76-234.46008,78.88-513.83008,78.88s-506.69-35.12-513.83-78.88a13.67509,13.67509,0,0,1-.17-2.12c0-.2,0-.41.02-.61,0-.11005.01-.21.01-.32a.48944.48944,0,0,0,.01-.12c [...]
diff --git a/site2/website/static/img/undraw_operating_system.svg b/site2/website/static/img/undraw_operating_system.svg
new file mode 100644
index 0000000..c4b5c11
--- /dev/null
+++ b/site2/website/static/img/undraw_operating_system.svg
@@ -0,0 +1 @@
+<svg id="a91a722e-5259-4ef2-8c31-2e8a1147b313" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1100" height="806.74" viewBox="0 0 1100 806.74"><defs><linearGradient id="f0793c8d-2cc7-4dcf-96d3-b23677fc2573" x1="459.23" y1="847.99" x2="459.23" y2="385.75" gradientTransform="translate(250.84)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.1 [...]
diff --git a/site2/website/static/img/undraw_react.svg b/site2/website/static/img/undraw_react.svg
new file mode 100644
index 0000000..b2230d1
--- /dev/null
+++ b/site2/website/static/img/undraw_react.svg
@@ -0,0 +1 @@
+<svg id="a75d69e6-d07c-4db3-9c83-72b2470e5561" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1108" height="731.18" viewBox="0 0 1108 731.18"><title>react</title><path d="M813.68,415.2l6.89-2.7c.66-.26,1.31-.54,2-.81a59.85,59.85,0,0,1,15.28-115.77l-4.8,24.2,18.22-23.92.16,0a59.87,59.87,0,0,1,51.16,67.45c-.15,1.13-.39,2.23-.6,3.34,5.61-4.43,10.87-9.32,14.81-15,8-11.54,10.71-25.76,13.47-43.17,5.47-34.48,10.4-69.34,14.84-104.18a59.83,59.83,0,0,1-42-65.36c.25-1.82.6-3.59,1-5.3 [...]
diff --git a/site2/website/static/img/undraw_tweetstorm.svg b/site2/website/static/img/undraw_tweetstorm.svg
new file mode 100644
index 0000000..2fa8b0f
--- /dev/null
+++ b/site2/website/static/img/undraw_tweetstorm.svg
@@ -0,0 +1 @@
+<svg id="5315dcf4-9ab7-45f5-a3d8-2e76525705db" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="813.15" height="752" viewBox="0 0 813.15 752"><title>tweetstorm</title><polygon points="559.73 403.7 347.86 352.67 347.86 752 559.73 696.54 559.73 403.7" fill="#e0e0e0"/><polygon points="559.73 403.7 347.86 352.67 347.86 752 559.73 696.54 559.73 403.7" opacity="0.1"/><polygon points="135.99 403.7 347.86 352.67 347.86 752 135.99 697.65 135.99 403.7" fill="#e0e0e0"/><polygon points= [...]
diff --git a/site2/website/static/img/undraw_youtube_tutorial.svg b/site2/website/static/img/undraw_youtube_tutorial.svg
new file mode 100644
index 0000000..bbb3b88
--- /dev/null
+++ b/site2/website/static/img/undraw_youtube_tutorial.svg
@@ -0,0 +1 @@
+<svg id="b847c0d8-de26-4ae3-b269-ef35a8ef771f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1130" height="831.56" viewBox="0 0 1130 831.56"><defs><linearGradient id="af868219-7e5b-405b-a411-f7ffae4abd96" x1="321.68" y1="857.11" x2="321.68" y2="447.21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" [...]