feat(website): added a Docusaurus-based doc website

vercel.json

@@ -10,7 +10,14 @@
     {
       "src": "docs/package.json",
       "use": "@now/static-build"
+    },
+    {
+      "src": "website/package.json",
+      "use": "@now/static-build"
     }
   ],
-  "routes": [{ "src": "/(.*)", "dest": "/docs/$1" }]
+  "routes": [
+    { "src": "/next/(.*)", "dest": "/website/$1" },
+    { "src": "/(.*)", "dest": "/docs/$1" }
+  ]
 }

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

website/docs/effects/fade.mdx

@@ -0,0 +1,7 @@
+# Fade
+
+```jsx
+function FadeComponent(props) {
+  return <Fade>I am a fading text</Fade>;
+}
+```

website/docs/getting-started/installation.mdx

@@ -0,0 +1,7 @@
+# Installation
+
+To add `react-awesome-reveal` to your project, run the following command from the project root:
+
+```bash npm2yarn
+npm install react-awesome-reveal
+```

website/docs/intro.md

@@ -0,0 +1 @@
+# Introduction

website/docusaurus.config.js

@@ -0,0 +1,100 @@
+const pkg = require("../package.json");
+
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+module.exports = {
+  title: "React Awesome Reveal",
+  tagline: "Add revealing animations to your website with ease",
+  url: pkg.homepage,
+  baseUrl: "/next/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
+  organizationName: "morellodev", // Usually your GitHub org/user name.
+  projectName: pkg.name, // Usually your repo name.
+  themeConfig: {
+    algolia: {
+      apiKey: "YOUR_API_KEY",
+      indexName: "YOUR_INDEX_NAME",
+    },
+    colorMode: {
+      disableSwitch: true,
+    },
+    navbar: {
+      title: "React Awesome Reveal",
+      logo: {
+        alt: "React Awesome Reveal Logo",
+        src: "img/logo.svg",
+      },
+      items: [
+        {
+          type: "doc",
+          docId: "intro",
+          label: "Docs",
+          position: "left",
+        },
+        {
+          type: "doc",
+          docId: "effects/fade",
+          label: "Effects",
+          position: "left",
+        },
+        {
+          href: pkg.repository.url,
+          label: "GitHub",
+          position: "right",
+        },
+      ],
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Introduction",
+              to: "/docs/intro",
+            },
+          ],
+        },
+        {
+          title: "Community",
+          items: [
+            {
+              label: "Twitter",
+              href: "https://twitter.com/morellodev",
+            },
+          ],
+        },
+        {
+          title: "More",
+          items: [
+            {
+              label: "GitHub",
+              href: pkg.repository.url,
+            },
+          ],
+        },
+      ],
+      copyright: `Copyleft <span class="copyleft">&copy;</span> ${new Date().getFullYear()} Dennis Morello`,
+    },
+  },
+  presets: [
+    [
+      "@docusaurus/preset-classic",
+      {
+        docs: {
+          sidebarPath: require.resolve("./sidebars.js"),
+          remarkPlugins: [
+            [require("@docusaurus/remark-plugin-npm2yarn"), { sync: true }],
+          ],
+        },
+        blog: false,
+        theme: {
+          customCss: require.resolve("./src/css/custom.css"),
+        },
+      },
+    ],
+  ],
+  themes: ["@docusaurus/theme-live-codeblock"],
+};

website/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "docs-v-4",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.0",
+    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.0",
+    "@docusaurus/theme-live-codeblock": "^2.0.0-beta.0",
+    "@mdx-js/react": "^1.6.21",
+    "@svgr/webpack": "^5.5.0",
+    "clsx": "^1.1.1",
+    "file-loader": "^6.2.0",
+    "react": "^17.0.1",
+    "react-awesome-reveal": "^3.7.2",
+    "react-dom": "^17.0.1",
+    "url-loader": "^4.1.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

website/sidebars.js

@@ -0,0 +1,30 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+module.exports = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  docsSidebar: [
+    "intro",
+    { "Getting Started": ["getting-started/installation"] },
+  ],
+  examplesSidebar: ["effects/fade"],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['hello'],
+    },
+  ],
+   */
+};

website/src/components/HomepageFeatures/HomepageFeatures.js

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import React from "react";
+
+import styles from "./HomepageFeatures.module.css";
+
+const FeatureList = [
+  {
+    title: "Easy to Use",
+    Svg: require("../../../static/img/undraw_coolness.svg").default,
+    description: (
+      <>
+        Docusaurus was designed from the ground up to be easily installed and
+        used to get your website up and running quickly.
+      </>
+    ),
+  },
+  {
+    title: "Focus on What Matters",
+    Svg: require("../../../static/img/undraw_dev_focus.svg").default,
+    description: (
+      <>
+        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        ahead and move your docs into the <code>docs</code> directory.
+      </>
+    ),
+  },
+  {
+    title: "Powered by React",
+    Svg: require("../../../static/img/undraw_react.svg").default,
+    description: (
+      <>
+        Extend or customize your website layout by reusing React. Docusaurus can
+        be extended while reusing the same header and footer.
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} alt={title} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

website/src/components/HomepageFeatures/HomepageFeatures.module.css

@@ -0,0 +1,13 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

website/src/components/HomepageFeatures/index.js

@@ -0,0 +1,3 @@
+import HomepageFeatures from "./HomepageFeatures";
+
+export default HomepageFeatures;

website/src/css/custom.css

@@ -0,0 +1,30 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #805ad5;
+  --ifm-color-primary-dark: #6d42cf;
+  --ifm-color-primary-darker: #6436cc;
+  --ifm-color-primary-darkest: #522ba9;
+  --ifm-color-primary-light: #9372db;
+  --ifm-color-primary-lighter: #9c7ede;
+  --ifm-color-primary-lightest: #b8a2e7;
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.copyleft {
+  display: inline-block;
+  transform: rotate(180deg);
+}