Setup website with docusaurus (#11)

Summary:
Set up landing page, docs page, and html versions of the ipython notebook tutorials.
Pull Request resolved: https://github.com/fairinternal/pytorch3d/pull/11

Reviewed By: gkioxari

Differential Revision: D19730380

Pulled By: nikhilaravi

fbshipit-source-id: 5df8d3f2ac2f8dce4d51f5d14fc336508c2fd0ea

website/.dockerignore

+*/node_modules
+*.log

website/.gitignore

+.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/*
+website/_tutorials/*

website/README.md

+This website was created with [Docusaurus](https://docusaurus.io/).
+
+# Building the PyTorch3d website
+
+## Install 
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ yarn
+
+or 
+
+$ npm install docusaurus-init
+```
+
+2. Run your dev server:
+
+```sh
+# Start the site
+$ yarn start
+
+or
+$ ./node_modules/docusaurus/lib/start-server.js
+```
+
+## Build the tutorials
+
+We convert the ipython notebooks to html using `parse_tutorials.py` which is found in the scripts folder at the root of the PyTorch3D directory.
+
+Before running this script install the following dependencies:
+
+```
+pip install nbformat==4.4.0 nbconvert==5.3.1 ipywidgets==7.5.1 tornado==4.2 bs4
+```
+
+Install yarn:
+
+```
+brew install yarn
+
+# or 
+
+curl -o- -L https://yarnpkg.com/install.sh | bash
+```
+
+Then run the build script:
+
+```
+bash scripts/build_website.sh
+```
+
+This will build the docusaurus website and run a script to parse the tutorials and generate:
+- `.html` files in the `website/_tutorials` folder
+- `.js` files in the `website/pages/tutorials` folder
+- `.py`/`.ipynb` files in the `website/static/files` folder
+
+
+TODO: Add support for latex in markdown in jupyter notebooks and embedded images. 
+
+
+## Add a new tutorial
+
+The tutorials to include in the website are listed in `website/tutorials.json`. If you create a new tutorial add an entry to the list in this file. This is needed in order to generate the sidebar for the tutorials page. 
+
+
+## Edit the landing page
+
+To change the content of the landing page modify: `website/pages/en/index.js`. 
+
+
+## Edit the tutorials page
+
+To change the content of the tutorials home page modify: `website/pages/tutorials/index.js`. 
+
+
+---------------------------------------------------------
+
+## Docusaurus docs
+
+- [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)
+
+
+## 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/).

website/core/Footer.js

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ */
+const PropTypes = require("prop-types");
+const React = require('react');
+
+function SocialFooter(props) {
+  const repoUrl = `https://github.com/${props.config.organizationName}/${props.config.projectName}`;
+  return (
+    <div className="footerSection">
+      <div className="social">
+        <a
+          className="github-button" // part of the https://buttons.github.io/buttons.js script in siteConfig.js
+          href={repoUrl}
+          data-count-href={`${repoUrl}/stargazers`}
+          data-show-count="true"
+          data-count-aria-label="# stargazers on GitHub"
+          aria-label="Star PyTorch3d on GitHub"
+        >
+          {props.config.projectName}
+        </a>
+      </div>
+    </div>
+  );
+}
+
+SocialFooter.propTypes = {
+  config: PropTypes.object
+};
+
+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() {
+    const repoUrl = `https://github.com/${this.props.config.organizationName}/${this.props.config.projectName}`;
+    return (
+      <footer className="nav-footer" id="footer">
+        <section className="sitemap">
+          <SocialFooter config={this.props.config} />
+        </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>
+    );
+  }
+}
+
+module.exports = Footer;

website/core/Tutorial.js

+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * @format
+ */
+
+const React = require('react');
+
+const fs = require('fs-extra');
+const path = require('path');
+const CWD = process.cwd();
+
+const CompLibrary = require(`${CWD}/node_modules/docusaurus/lib/core/CompLibrary.js`);
+const Container = CompLibrary.Container;
+
+const TutorialSidebar = require(`${CWD}/core/TutorialSidebar.js`);
+
+function renderDownloadIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      data-prefix="fas"
+      data-icon="file-download"
+      className="svg-inline--fa fa-file-download fa-w-12"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512">
+      <path
+        fill="currentColor"
+        d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"
+      />
+    </svg>
+  );
+}
+
+class Tutorial extends React.Component {
+  render() {
+    const {baseUrl, tutorialID} = this.props;
+
+    const htmlFile = `${CWD}/_tutorials/${tutorialID}.html`;
+    const normalizedHtmlFile = path.normalize(htmlFile);
+
+    return (
+      <div className="docMainWrapper wrapper">
+        <TutorialSidebar currentTutorialID={tutorialID} />
+        <Container className="mainContainer">
+          <div className="tutorialButtonsWrapper">
+              <div className="colabButtonWrapper">
+                <a
+    href={`https://colab.research.google.com/github/facebookresearch/pytorch3d/blob/master/docs/tutorials/${tutorialID}.ipynb`}>
+                  <img align="left" src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
+                </a>
+              </div>
+              <div className="tutorialButtonWrapper buttonWrapper">
+                <a
+                  className="tutorialButton button"
+                  download
+                  href={`${baseUrl}files/${tutorialID}.ipynb`}
+                  target="_blank">
+                  {renderDownloadIcon()}
+                  {'Download Tutorial Jupyter Notebook'}
+                </a>
+              </div>
+              <div className="tutorialButtonWrapper buttonWrapper">
+                <a
+                  className="tutorialButton button"
+                  download
+                  href={`${baseUrl}files/${tutorialID}.py`}
+                  target="_blank">
+                  {renderDownloadIcon()}
+                  {'Download Tutorial Source Code'}
+                </a>
+              </div>
+          </div>
+          <div
+            className="tutorialBody"
+            dangerouslySetInnerHTML={{
+              __html: fs.readFileSync(normalizedHtmlFile, {encoding: 'utf8'}),
+            }}
+          />
+        </Container>
+      </div>
+    );
+  }
+}
+
+module.exports = Tutorial;

website/core/TutorialSidebar.js

+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * @format
+ */
+
+const React = require('react');
+const fs = require('fs-extra');
+const path = require('path');
+const join = path.join;
+const CWD = process.cwd();
+
+const CompLibrary = require(join(
+  CWD,
+  '/node_modules/docusaurus/lib/core/CompLibrary.js',
+));
+const SideNav = require(join(
+  CWD,
+  '/node_modules/docusaurus/lib/core/nav/SideNav.js',
+));
+
+const Container = CompLibrary.Container;
+
+const OVERVIEW_ID = 'tutorial_overview';
+
+class TutorialSidebar extends React.Component {
+  render() {
+    const {currentTutorialID} = this.props;
+    const current = {
+      id: currentTutorialID || OVERVIEW_ID,
+    };
+
+    const toc = [
+      {
+        type: 'CATEGORY',
+        title: 'Tutorials',
+        children: [
+          {
+            type: 'LINK',
+            item: {
+              permalink: 'tutorials/',
+              id: OVERVIEW_ID,
+              title: 'Overview',
+            },
+          },
+        ],
+      },
+    ];
+
+    const jsonFile = join(CWD, 'tutorials.json');
+    const normJsonFile = path.normalize(jsonFile);
+    const json = JSON.parse(fs.readFileSync(normJsonFile, {encoding: 'utf8'}));
+
+    Object.keys(json).forEach(category => {
+      const categoryItems = json[category];
+      const items = [];
+      categoryItems.map(item => {
+        items.push({
+          type: 'LINK',
+          item: {
+            permalink: `tutorials/${item.id}`,
+            id: item.id,
+            title: item.title,
+          },
+        });
+      });
+
+      toc.push({
+        type: 'CATEGORY',
+        title: category,
+        children: items,
+      });
+    });
+
+    return (
+      <Container className="docsNavContainer" id="docsNav" wrapper={false}>
+        <SideNav
+          language={'tutorials'}
+          root={'tutorials'}
+          title="Tutorials"
+          contents={toc}
+          current={current}
+        />
+      </Container>
+    );
+  }
+}
+
+module.exports = TutorialSidebar;

website/package.json

+{
+  "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"
+  }
+}

website/pages/en/help.js

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+**/
+
+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;

website/pages/en/index.js

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+**/
+
+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 bash = (...args) => `~~~bash\n${String.raw(...args)}\n~~~`;
+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="splashLogo">
+        <img src={props.img_src} alt="Project Logo" />
+      </div>
+    );
+
+    const ProjectTitle = props => (
+      <h2 className="projectTitle">
+        <small>{props.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/pytorch3dlogowhite.svg'} />
+        <div className="inner">
+          <ProjectTitle tagline={siteConfig.tagline} title={siteConfig.title} />
+          <PromoSection>
+            <Button href={docUrl('why_pytorch3d.html')}>Docs</Button>
+            <Button href={`${baseUrl}tutorials/`}>Tutorials</Button>
+            <Button href={'#quickstart'}>Get Started</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 Description = () => (
+      <Block background="light">
+        {[
+          {
+            content:
+              'This is another description of how this project is useful',
+            image: `${baseUrl}img/docusaurus.svg`,
+            imageAlign: 'right',
+            title: 'Description',
+          },
+        ]}
+      </Block>
+    );
+
+    const pre = '```';
+
+    const codeExample = `${pre}python
+from pytorch3d.utils import ico_sphere
+from pytorch3d.io import load_obj
+from pytorch3d.structures import Meshes
+from pytorch3d.ops import sample_points_from_meshes
+from pytorch3d.loss import chamfer_distance
+
+# Use an ico_sphere mesh and load a mesh from an .obj e.g. model.obj
+sphere_mesh = ico_sphere(level=3)
+verts, faces, _ = load_obj("model.obj")
+test_mesh = Meshes(verts=[verts], faces=[faces.verts_idx])
+
+# Differentiably sample 5k points from the surface of each mesh and then compute the loss.
+sample_sphere = sample_points_from_meshes(sphere_mesh, 5000)
+sample_test = sample_points_from_meshes(test_mesh, 5000)
+loss_chamfer, _ = chamfer_distance(sample_sphere, sample_test)
+    `;
+
+    const QuickStart = () => (
+      <div
+        className="productShowcaseSection"
+        id="quickstart"
+        style={{textAlign: 'center'}}>
+        <h2>Get Started</h2>
+        <Container>
+          <ol>
+            <li>
+              <strong>Install PyTorch3D:</strong>
+              <MarkdownBlock>{bash`conda install pytorch torchvision -c pytorch  # OSX only
+conda install pytorch3d -c pytorch3d  # all systems`}</MarkdownBlock>
+            </li>
+            <li>
+              <strong>Try a few 3D operators  </strong>
+              e.g. compute the chamfer loss between two meshes:
+              <MarkdownBlock>{codeExample}</MarkdownBlock>
+            </li>
+          </ol>
+        </Container>
+      </div>
+    );
+
+    const Features = () => (
+      <div className="productShowcaseSection" style={{textAlign: 'center'}}>
+        <Block layout="fourColumn">
+          {[
+            {
+              content:
+                'Supports batching of 3D inputs of different sizes ' +
+                'such as meshes' ,
+              image: `${baseUrl}img/batching.svg`,
+              imageAlign: 'top',
+              title: 'Heterogeneous Batching',
+            },
+            {
+              content:
+                'Supports optimized implementations of ' +
+                'several common  functions for 3D data',
+              image: `${baseUrl}img/ops.png`,
+              imageAlign: 'top',
+              title: 'Fast 3D Operators',
+            },
+            {
+              content:
+                'Modular differentiable rendering API ' +
+                'with parallel implementations in ' +
+                'PyTorch, C++ and CUDA' ,
+              image: `${baseUrl}img/rendering.svg`,
+              imageAlign: 'top',
+              title: 'Differentiable Rendering',
+            },
+          ]}
+        </Block>
+      </div>
+    );
+
+    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="landingPage mainContainer">
+          <Features />
+          <QuickStart />
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = Index;

website/pages/en/users.js

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+**/
+
+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;

website/pages/tutorials/index.js

+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * @format
+**/
+
+const React = require('react');
+
+const CWD = process.cwd();
+
+const CompLibrary = require(`${CWD}/node_modules/docusaurus/lib/core/CompLibrary.js`);
+const Container = CompLibrary.Container;
+const MarkdownBlock = CompLibrary.MarkdownBlock;
+
+const TutorialSidebar = require(`${CWD}/core/TutorialSidebar.js`);
+const bash = (...args) => `~~~bash\n${String.raw(...args)}\n~~~`;
+
+class TutorialHome extends React.Component {
+  render() {
+    return (
+      <div className="docMainWrapper wrapper">
+        <TutorialSidebar currentTutorialID={null} />
+        <Container className="mainContainer documentContainer postContainer">
+          <div className="post">
+            <header className="postHeader">
+              <h1 className="postHeaderTitle">Welcome to the PyTorch3D Tutorials</h1>
+            </header>
+            <p>
+              Here you can learn about the structure and applications of Pytorch3D from
+              examples which are in the form of ipython notebooks.
+            </p>
+            <h3> Run interactively </h3>
+            <p>
+              At the top of each example you can find a button named <strong>"Open in Colab"</strong> which will open the notebook in <a href="https://colab.research.google.com/notebooks/intro.ipynb"> Google Colaboratory </a> where you can run the code directly in the browser with access to GPU support e.g.
+            </p>
+           <img align="center" src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
+           <p> You can modify the code and experiment with varying different settings.
+        Remember to install pytorch, torchvision, fvcore and pytorch3d in the first cell of the colab notebook by running: </p>
+            <MarkdownBlock>{bash`!pip install torch torchvision
+!pip install 'git+https://github.com/facebookresearch/pytorch3d.git`}</MarkdownBlock>
+           <h3> Run locally </h3>
+           <p> There is also a button to download the notebook and source code to run it locally. </p>
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+module.exports = TutorialHome;

website/sidebars.json

+{
+  "docs": {
+    "Introduction": ["why_pytorch3d"],
+    "Meshes": ["batching", "meshes_io"],
+    "Differentiable Renderer": ["renderer", "renderer_getting_started"]
+  }
+}

website/siteConfig.js

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ */
+
+// 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 baseUrl = '/'
+
+const siteConfig = {
+  title: 'PyTorch3d', // Title for your website.
+  tagline: 'A library for deep learning with 3D data',
+  url: 'https://pytorch3d.org', // Your website URL
+  baseUrl: baseUrl, // Base URL for your project */
+  projectName: 'pytorch3d',
+  organizationName: 'facebookresearch',
+  customDocsPath: 'docs/notes',
+  headerLinks: [
+    {doc: 'why_pytorch3d', label: 'Docs'},
+    {page: 'tutorials', label: 'Tutorials'},
+    {href: "https://pytorch3d.readthedocs.io/", label: 'API'},
+    {href: "https://github.com/facebookresearch/pytorch3d", label: 'GitHub'},
+  ],
+
+  // If you have users set above, you add it here:
+  users,
+
+  /* path to images for header/footer */
+  headerIcon: 'img/pytorch3dfavicon.png',
+  footerIcon: 'img/pytorch3dfavicon.png',
+  favicon: 'img/pytorch3dfavicon.png',
+
+  /* Colors for website */
+  colors: {
+    primaryColor: '#812CE5',
+    secondaryColor: '#FFAF00',
+  },
+
+  // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
+  copyright: `Copyright "\u00A9" ${new Date().getFullYear()} Facebook Inc`,
+
+  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/pytorch3dlogoicon.svg',
+  twitterImage: 'img/pytorch3dlogoicon.svg',
+
+   // Google analytics
+   gaTrackingId: 'UA-157376881-1',
+
+  // 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,
+};
+
+module.exports = siteConfig;

website/static/css/custom.css

+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+**/
+
+html body {
+  font-family: 'Montserrat', sans-serif;
+  overflow-x: hidden;
+}
+
+.fixedHeaderContainer {
+  background-color: #222222;
+}
+
+
+.fixedHeaderContainer header .headerTitleWithLogo {
+  display: block;
+  color: #ffffff;
+}
+
+.fixedHeaderContainer header .logo {
+  height: 50px;
+}
+
+.fixedHeaderContainer header a:nth-child(2) {
+  position: absolute;
+  right: 0px;
+}
+
+.fixedHeaderContainer header a:nth-child(2) h3 {
+  font-size: 14px;
+}
+
+.fixedHeaderContainer header a:nth-child(2) h3::before {
+  content: 'v: ';
+}
+
+.navigationSlider {
+  margin-right: 80px;
+}
+
+.navigationSlider .slidingNav ul {
+  background: #222222;
+}
+
+.navigationSlider .slidingNav ul li a {
+  color: #c7d4fd;
+}
+
+.navigationSlider .slidingNav ul li a:hover,
+.navigationSlider .slidingNav ul li a:focus {
+  color: #ffffff;
+  background-color: inherit;
+}
+
+.navigationSlider .slidingNav ul li.siteNavItemActive > a,
+.navigationSlider .slidingNav ul li.siteNavGroupActive > a {
+  background-color: inherit;
+}
+
+.homeContainer {
+  background: rgb(2, 0, 36);
+  background: linear-gradient(
+    0deg,
+    rgba(2, 0, 36, 1),
+    rgba(255, 175, 0, 1) 0%,
+    rgba(129, 44, 229, 1) 100%
+  );
+  padding: 30px 0px;
+}
+
+.splashLogo {
+  display: block;
+  margin: 0 auto;
+  height: 200px;
+  width: 800px;
+}
+
+.projectTitle {
+  color: #ffffff;
+  font-variant: small-caps;
+  font-weight: 300;
+}
+
+.promoSection .button {
+  border: 2px solid #fff;
+  color: #ffffff;
+  font-size: 19px;
+  margin: 10px;
+}
+
+.promoSection .button:hover {
+  background: inherit;
+  border: 2px solid #ffffff;
+  color: #ffffff;
+}
+
+.landingPage {
+  padding: 0px;
+}
+
+
+.productShowcaseSection {
+   padding: 45px 20px 30px 20px;
+}
+
+div.productShowcaseSection {
+  color: #6c6c6c;
+  padding-top: 40px;
+}
+
+#quickstart {
+  padding-top: 80px;
+}
+
+.productShowcaseSection > h2 {
+  font-variant: small-caps;
+  font-weight: 360;
+  margin: 0px;
+  padding: 0px;
+  color: #5b1861;
+}
+
+.productShowcaseSection p {
+  font-weight: 360;
+}
+
+# Subtitles for key features
+.productShowcaseSection .blockContent > div span p {
+  font-size: 18px;
+}
+
+.productShowcaseSection div.container {
+  padding: 40px 0px;
+}
+
+.productShowcaseSection img {
+  height: 100px;
+}
+
+.gridBlock .fourByGridBlock img {
+    max-width: 200%;
+}
+
+.productShowcaseSection li {
+  padding: 10px 0;
+}
+
+.productShowcaseSection pre {
+  margin: 10px 0;
+}
+
+.productShowcaseSection code {
+  background: #fff;
+}
+
+.container .wrapper .alignCenter h2 {
+  color: #222222;
+}
+
+div#quickstart {
+  background: #efefef;
+}
+
+div#quickstart ol {
+  margin-bottom: 0px;
+}
+
+.nav-footer {
+  background-color: #222222;
+}
+
+.nav-footer .sitemap a {
+  color: #c7d4fd;
+}
+
+.nav-footer .sitemap a:hover {
+  color: #ffffff;
+}
+
+.social {
+ text-align: center
+}
+
+a,
+p a {
+  color: #4872f9;
+}
+
+a:hover,
+p a:hover {
+  color: #4872f9;
+}
+
+.imageAlignTop .blockImage {
+    margin-bottom: 20px;
+    max-width: 200px;
+}
+
+/* Style tutorials */
+.tutorialBody {
+  margin-top: -20px;
+  color: #6c6c6c;
+}
+
+.tutorialBody h1 {
+  margin: 0px;
+}
+
+.tutorialBody h1,
+.tutorialBody h2,
+.tutorialBody h3 {
+  color: #222222;
+}
+
+.tutorialBody pre {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 14px;
+  margin: 0px;
+}
+
+.tutorialBody .input_prompt,
+.tutorialBody .output_prompt {
+  color: darkred;
+  font-size: 12px;
+}
+
+.tutorialBody .highlight {
+  background: #f3f4f7;
+  padding: 10px 20px;
+  border: lightgray 1px solid;
+  border-radius: 3px;
+}
+
+.tutorialBody .cell {
+  margin: 20px;
+}
+
+.tutorialBody .output_stderr {
+  background-color: #fdede9;
+}
+
+.tutorialBody .anchor-link {
+  color: lightgray;
+}
+
+.tutorialBody iframe {
+  width: 100%;
+  height: 100vh;
+}
+
+.tutorialButtonWrapper,
+.tutorialRuntime {
+  margin: 20px;
+}
+
+.tutorialButtonWrapper {
+  float: left;
+  margin: 5px;
+}
+
+.colabButtonWrapper {
+  float: left;
+  margin: 5px;
+}
+
+.colabButtonWrapper img {
+ padding-right: 0.25em;
+}
+
+.tutorialButtonsWrapper {
+ display: flex;
+ align-items: center;
+}
+
+/* .tutorialButton {
+  color: #4872f9;
+  border: 1px solid #4872f9;
+}
+ */
+.tutorialButton svg {
+  height: 15px;
+  margin-right: 5px;
+}
+
+.tutorialButton:hover {
+  color: #4872f9;
+  background-color: inherit;
+}
+
+.wrapper {
+  max-width: 1400px;
+}
+
+@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) {
+}

website/static/css/pygments.css

+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+**/
+
+.highlight .hll {
+  background-color: #ffffcc;
+}
+.highlight .c {
+  color: #60a0b0;
+  font-style: italic;
+} /* Comment */
+.highlight .err {
+  border: 1px solid #ff0000;
+} /* Error */
+.highlight .k {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword */
+.highlight .o {
+  color: #666666;
+} /* Operator */
+.highlight .cm {
+  color: #60a0b0;
+  font-style: italic;
+} /* Comment.Multiline */
+.highlight .cp {
+  color: #007020;
+} /* Comment.Preproc */
+.highlight .c1 {
+  color: #60a0b0;
+  font-style: italic;
+} /* Comment.Single */
+.highlight .cs {
+  color: #60a0b0;
+  background-color: #fff0f0;
+} /* Comment.Special */
+.highlight .gd {
+  color: #a00000;
+} /* Generic.Deleted */
+.highlight .ge {
+  font-style: italic;
+} /* Generic.Emph */
+.highlight .gr {
+  color: #ff0000;
+} /* Generic.Error */
+.highlight .gh {
+  color: #000080;
+  font-weight: bold;
+} /* Generic.Heading */
+.highlight .gi {
+  color: #00a000;
+} /* Generic.Inserted */
+.highlight .go {
+  color: #808080;
+} /* Generic.Output */
+.highlight .gp {
+  color: #c65d09;
+  font-weight: bold;
+} /* Generic.Prompt */
+.highlight .gs {
+  font-weight: bold;
+} /* Generic.Strong */
+.highlight .gu {
+  color: #800080;
+  font-weight: bold;
+} /* Generic.Subheading */
+.highlight .gt {
+  color: #0040d0;
+} /* Generic.Traceback */
+.highlight .kc {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword.Constant */
+.highlight .kd {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword.Declaration */
+.highlight .kn {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword.Namespace */
+.highlight .kp {
+  color: #007020;
+} /* Keyword.Pseudo */
+.highlight .kr {
+  color: #007020;
+  font-weight: bold;
+} /* Keyword.Reserved */
+.highlight .kt {
+  color: #902000;
+} /* Keyword.Type */
+.highlight .m {
+  color: #40a070;
+} /* Literal.Number */
+.highlight .s {
+  color: #4070a0;
+} /* Literal.String */
+.highlight .na {
+  color: #4070a0;
+} /* Name.Attribute */
+.highlight .nb {
+  color: #007020;
+} /* Name.Builtin */
+.highlight .nc {
+  color: #0e84b5;
+  font-weight: bold;
+} /* Name.Class */
+.highlight .no {
+  color: #60add5;
+} /* Name.Constant */
+.highlight .nd {
+  color: #555555;
+  font-weight: bold;
+} /* Name.Decorator */
+.highlight .ni {
+  color: #d55537;
+  font-weight: bold;
+} /* Name.Entity */
+.highlight .ne {
+  color: #007020;
+} /* Name.Exception */
+.highlight .nf {
+  color: #06287e;
+} /* Name.Function */
+.highlight .nl {
+  color: #002070;
+  font-weight: bold;
+} /* Name.Label */
+.highlight .nn {
+  color: #0e84b5;
+  font-weight: bold;
+} /* Name.Namespace */
+.highlight .nt {
+  color: #062873;
+  font-weight: bold;
+} /* Name.Tag */
+.highlight .nv {
+  color: #bb60d5;
+} /* Name.Variable */
+.highlight .ow {
+  color: #007020;
+  font-weight: bold;
+} /* Operator.Word */
+.highlight .w {
+  color: #bbbbbb;
+} /* Text.Whitespace */
+.highlight .mf {
+  color: #40a070;
+} /* Literal.Number.Float */
+.highlight .mh {
+  color: #40a070;
+} /* Literal.Number.Hex */
+.highlight .mi {
+  color: #40a070;
+} /* Literal.Number.Integer */
+.highlight .mo {
+  color: #40a070;
+} /* Literal.Number.Oct */
+.highlight .sb {
+  color: #4070a0;
+} /* Literal.String.Backtick */
+.highlight .sc {
+  color: #4070a0;
+} /* Literal.String.Char */
+.highlight .sd {
+  color: #4070a0;
+  font-style: italic;
+} /* Literal.String.Doc */
+.highlight .s2 {
+  color: #4070a0;
+} /* Literal.String.Double */
+.highlight .se {
+  color: #4070a0;
+  font-weight: bold;
+} /* Literal.String.Escape */
+.highlight .sh {
+  color: #4070a0;
+} /* Literal.String.Heredoc */
+.highlight .si {
+  color: #70a0d0;
+  font-style: italic;
+} /* Literal.String.Interpol */
+.highlight .sx {
+  color: #c65d09;
+} /* Literal.String.Other */
+.highlight .sr {
+  color: #235388;
+} /* Literal.String.Regex */
+.highlight .s1 {
+  color: #4070a0;
+} /* Literal.String.Single */
+.highlight .ss {
+  color: #517918;
+} /* Literal.String.Symbol */
+.highlight .bp {
+  color: #007020;
+} /* Name.Builtin.Pseudo */
+.highlight .vc {
+  color: #bb60d5;
+} /* Name.Variable.Class */
+.highlight .vg {
+  color: #bb60d5;
+} /* Name.Variable.Global */
+.highlight .vi {
+  color: #bb60d5;
+} /* Name.Variable.Instance */
+.highlight .il {
+  color: #40a070;
+} /* Literal.Number.Integer.Long */

website/static/img/batching.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="100px" viewBox="0 0 110 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
+    <title>Group 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-190.000000, -85.000000)">
+            <g id="Group-3" transform="translate(190.000000, 85.000000)">
+                <rect id="Rectangle" fill="#FF7D1E" x="60" y="3" width="44" height="44"></rect>
+                <ellipse id="Oval" fill="#000000" cx="84.5108694" cy="75.9893615" rx="24.5108694" ry="23.9893615"></ellipse>
+                <polygon id="Triangle" fill="#FFAF00" points="28.5 53 57 98 0 98"></polygon>
+                <polygon id="Polygon" fill="#812CE5" points="26.5099999 0 51.7225081 17.9587837 42.0921869 47.0167063 10.9278129 47.0167063 1.29749175 17.9587837"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

website/static/img/ops.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="176px" height="175px" viewBox="0 0 176 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 58 (84663) - https://sketch.com -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-413.000000, -451.000000)">
+            <g id="Group-2" transform="translate(422.000000, 456.000000)">
+                <g id="Group-4" transform="translate(39.000000, 64.499932)" fill="#FFFFFF" stroke="#812CE5" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
+                    <path d="M0,22 L20,0" id="Line-4"></path>
+                    <path d="M0,23 L22,42" id="Line-4"></path>
+                </g>
+                <g id="Group-4" transform="translate(105.000000, 85.499932) scale(-1, 1) translate(-105.000000, -85.499932) translate(94.000000, 64.499932)" fill="#FFFFFF" stroke="#812CE5" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
+                    <path d="M0,22 L20,0" id="Line-4"></path>
+                    <path d="M0,23 L22,42" id="Line-4"></path>
+                </g>
+                <path d="M72,106.499932 L83,65.4999323" id="Line-4" stroke="#812CE5" stroke-width="8" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path id="Line-9" d="M74.4859874,86.9999949 L75.5383535,87.0032598 C103.773173,87.2063259 125.510981,96.896589 140.284811,116.02653 L159.026859,108.8732 C160.688876,108.238748 162.550533,109.071754 163.184985,110.733771 C163.363327,111.200957 163.430447,111.70325 163.381029,112.200872 L163.381029,112.200872 L158.126597,165.110922 C157.950791,166.881211 156.37317,168.173795 154.602881,167.99799 C153.90933,167.929114 153.256827,167.637149 152.743311,167.165918 L152.743311,167.165918 L113.56793,131.216342 C112.257182,130.013524 112.169687,127.975877 113.372505,126.665129 C113.710612,126.296683 114.12986,126.012017 114.597046,125.833674 L114.597046,125.833674 L130.458207,119.778029 C117.558504,104.578587 99.0874369,97 74.6296296,97 L74.6296296,97 L73.0820878,97.004911 C66.4718147,97.0540006 62.2741863,97.4876879 56.5279179,99.0603259 C47.7855392,101.452939 38.689293,106.123227 28.9324354,113.829564 C14.5080834,125.222466 6.51709607,142.264661 4.98906448,165.330508 C4.80652993,168.085892 2.42487619,170.171599 -0.330508042,169.989064 C-3.08589227,169.80653 -5.17159904,167.424876 -4.98906448,164.669492 C-3.28379511,138.928216 5.94743978,119.240974 22.7342313,105.982127 C33.5277551,97.4569916 43.8289935,92.1680242 53.888193,89.4150238 C60.6332478,87.5690381 65.5743724,87.0613052 72.9723676,87.0054117 L72.9723676,87.0054117 L74.4859874,86.9999949 Z" fill="#FFAF00" fill-rule="nonzero"></path>
+                <path id="Line-9" d="M76.486002,-5.0000054 L77.5660101,-4.99635656 C106.765823,-4.76855288 129.01092,6.14121529 143.768839,27.5954736 L162.584107,21.0066878 C164.263104,20.4186391 166.100907,21.3030272 166.688956,22.9820238 C166.854254,23.4539832 166.907398,23.9579467 166.844178,24.4540036 L166.844178,24.4540036 L160.12231,77.1977136 C159.897407,78.9624371 158.284495,80.210708 156.519772,79.9858046 C155.828401,79.8976935 155.184258,79.5877189 154.684028,79.1024075 L154.684028,79.1024075 L116.522181,42.0786869 C115.245344,40.8399301 115.214474,38.8006385 116.453231,37.5238017 C116.801441,37.1648878 117.228433,36.8919753 117.700392,36.7266771 L117.700392,36.7266771 L133.937253,31.0392764 C120.964757,13.6380026 102.023945,5 76.6296296,5 L76.6296296,5 L75.1288112,5.004828 C68.513673,5.05473503 64.3301462,5.50847659 58.5948099,7.16413065 C49.8731212,9.68187305 40.7881482,14.601962 31.0337645,22.7285034 C16.5631727,34.784197 8.52566138,52.8648677 6.99016787,77.3134081 C6.81707736,80.0694017 4.44258552,82.1632584 1.68659191,81.9901679 C-1.06940171,81.8170774 -3.16325838,79.4425855 -2.99016787,76.6865919 C-1.29236043,49.6536455 7.89235048,28.9923081 24.6329022,15.0454726 C35.4288998,6.05114514 45.7414116,0.466266085 55.821301,-2.44355631 C62.5896722,-4.39742276 67.5506001,-4.93507734 74.9684167,-4.99426877 L74.9684167,-4.99426877 L76.486002,-5.0000054 Z" fill="#FFAF00" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file