Upgrade to Docusaurus v2 (closes #105)

.gitignore

@@ -1,8 +1,29 @@
+# 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*
 *.log
-node_modules
-docs
-converted-docs
+
+# lock
 package-lock.json
 yarn.lock
-website/build
+
+# generated
+docs
+converted-docs

.npmrc

@@ -1 +1,2 @@
 package-lock=false
+loglevel=error

README.md

@@ -5,12 +5,36 @@ This is the repository containing the code for the official gulp website [gulpjs
 ![A screenshot of gulpjs.com](screenshot.png)
 
 ## Contributing
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Getting started
 
 To get started working on this site you first need to clone this repository
+
 ```
-$ git clone https://github.com/gulpjs/gulpjs.github.io.git
+$ git clone git://github.com/gulpjs/gulpjs.github.io
 ```
 
-__The rest is a work in progress, we'll update once things are working__
-
 When you are done making your improvements, create a [Pull Request](https://github.com/gulpjs/gulpjs.github.io/compare).
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm start
+```
+
+This command will first pull down the markdown documentation from the main gulp repository, then starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.

docusaurus.config.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var isProd = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  title: 'gulp.js',
+  favicon: 'img/favicon.png',
+  url: 'https://gulpjs.com/',
+  baseUrl: '/',
+  tagline: 'The streaming build system',
+  // Used by the deployment
+  organizationName: 'gulpjs',
+  projectName: 'gulpjs.github.io',
+  // The theme
+  themeConfig: {
+    disableDarkMode: true,
+    navbar: {
+      logo: {
+        alt: 'gulp',
+        src: 'img/gulp.svg',
+        // TODO: Remove these when we have a homepage in the router
+        href: 'https://gulpjs.com/',
+        target: '_self',
+      },
+      links: [
+        { to: 'docs/en/getting-started/quick-start',
+          label: 'Getting Started',
+          position: 'left',
+        },
+        { to: 'docs/en/api/concepts',
+          label: 'API',
+          position: 'left',
+        },
+        { href: 'https://gulpjs.com/plugins',
+          label: 'Plugins',
+          position: 'left',
+        },
+        { href: 'https://twitter.com/gulpjs',
+          logo: {
+            alt: 'Gulp on Twitter',
+            src: 'img/twitter.svg',
+          },
+          position: 'right'
+        },
+        { href: 'https://medium.com/gulpjs',
+          logo: {
+            alt: 'The gulp blog',
+            src: 'img/medium.svg',
+          },
+          position: 'right'
+        },
+      ]
+    },
+    footer: {
+      links: [
+        { items: [
+            { html: '<img src="/img/gulp-white-logo.svg" alt="gulp" href="/" />' }
+          ]
+        },
+        { title: 'Docs',
+          items: [
+            { to: 'docs/en/getting-started/quick-start',
+              label: 'Getting Started',
+            },
+            { to: 'docs/en/api/concepts',
+              label: 'API',
+            },
+          ]
+        },
+        { title: 'Community',
+          items: [
+            { href: 'https://github.com/gulpjs/gulp',
+              label: 'GitHub',
+            },
+            { href: 'https://stackoverflow.com/questions/tagged/gulp',
+              label: 'Stack Overflow',
+            },
+            { href: 'https://twitter.com/gulpjs',
+              label: 'Twitter',
+            }
+          ]
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} GulpJS`,
+    },
+    prism: {
+      // One of:
+      // dracula, duotoneDark, duotoneLight, github, nightOwl, nightOwlLight,
+      // oceanicNext, palenight, shad esOfPurple, ultramin, vsDark
+      theme: require('prism-react-renderer/themes/vsDark'),
+    },
+    algolia: {
+      apiKey: 'a6ef919bce0b83de1bcbad1d4ef753f8',
+      indexName: 'gulpjs',
+      algoliaOptions: {} // Optional, if provided by Algolia
+    },
+    googleAnalytics: {
+      trackingID: 'UA-128126650-1',
+    },
+    gtag: {
+      trackingID: 'UA-128126650-1',
+    },
+  },
+  themes: [
+    ['@docusaurus/theme-classic', {
+      customCss: require.resolve('./src/css/docs.css')
+    }],
+    ['@docusaurus/theme-search-algolia', {}]
+  ],
+  plugins: [
+    ['@docusaurus/plugin-content-docs', {
+      path: 'docs',
+      sidebarPath: require.resolve('./sidebars.json'),
+      // This is a holdover because we set up original docusaurus
+      // to support translations and v2 doesn't support them yet
+      routeBasePath: 'docs/en/',
+    }],
+    isProd && ['@docusaurus/plugin-google-analytics', {}],
+    isProd && ['@docusaurus/plugin-google-gtag', {}],
+    isProd && ['@docusaurus/plugin-sitemap', {}],
+  ]
+};

gulpfile.js

@@ -2,60 +2,45 @@
 
 // This file is only for generating the docs
 // No need to use any of this if working on the main website
-
-const { src, dest, series } = require('gulp');
-const pump = require('pump');
-const through2 = require('through2');
+const del = require('del');
+const gulplog = require('gulplog');
+const { series } = require('gulp');
 const frontMatter = require('gray-matter');
 const download = require('github-download-directory');
 
 // Exports for task registration
-exports.default = series(fetchDocs, convertComments);
+exports.default = series(clean, generateDocs);
 
 const owner = 'gulpjs';
 const repo = 'gulp';
 const directory = 'docs';
-const outDirectory = 'converted-docs';
 
 const fmOptions = {
   delimiters: ['<!-- front-matter', '-->']
 };
 
-function fetchDocs() {
-  return download(owner, repo, directory, { sha: "master" });
-}
-
-function convertComments(cb) {
-  pump([
-    // Only process markdown files in the directory we fetched
-    src('**/*.md', { cwd: directory }),
-    pluginless(convertToDocusaurus),
-    // Overwrite the markdown files we fetched
-    dest(outDirectory)
-  ], cb)
+async function clean() {
+  return del(directory);
 }
 
-/* utils */
-function convertToDocusaurus(file) {
-  var config = frontMatter(file.contents, fmOptions);
-  if (!config.data.id) {
-    console.error(`File missing front-matter. Path: ${file.path}`);
-    return; // Filter out any file without frontmatter
-  }
-
-  file.contents = Buffer.from(config.stringify());
+async function generateDocs() {
+  // Fetch
+  const files = await download.fetchFiles(owner, repo, directory, { sha: "master" });
 
-  return file;
-}
+  // Process
+  const docusaurusFiles = files.reduce((result, {path, contents}) => {
+    const config = frontMatter(contents, fmOptions);
+    if (!config.data.id) {
+      gulplog.debug(`File missing front-matter. Path: ${path}`);
+      return result;
+    }
 
-function pluginless(fn) {
-  return through2.obj(handler);
+    return result.concat({
+      path,
+      contents: Buffer.from(config.stringify())
+    });
+  }, []);
 
-  function handler(file, _, cb) {
-    try {
-      cb(null, fn(file));
-    } catch(err) {
-      cb(err);
-    }
-  }
+  // Write
+  await Promise.all(docusaurusFiles.map(download.output))
 }

package.json

@@ -2,24 +2,46 @@
   "name": "gulpjs.github.io",
   "version": "0.0.0",
   "private": true,
+  "engines": {
+    "node": ">=8.0.0"
+  },
   "scripts": {
-    "clean": "rm -r docs converted-docs",
     "fetch-docs": "gulp",
     "prestart": "npm run fetch-docs",
-    "start": "cd website && npm run start",
+    "start": "docusaurus start",
     "prebuild": "npm run fetch-docs",
-    "build": "cd website && npm run build",
-    "pregh-pages": "npm run fetch-docs",
-    "gh-pages": "cd website && npm run publish-gh-pages"
-  },
-  "engines": {
-    "node": ">=8.0.0"
+    "build": "docusaurus build",
+    "predeploy": "npm run fetch-docs",
+    "deploy": "docusaurus deploy",
+    "swizzle": "docusaurus swizzle"
   },
   "devDependencies": {
-    "github-download-directory": "^1.1.1",
+    "@docusaurus/core": "^2.0.0-alpha.50",
+    "@docusaurus/plugin-content-docs": "^2.0.0-alpha.50",
+    "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.50",
+    "@docusaurus/plugin-google-gtag": "^2.0.0-alpha.50",
+    "@docusaurus/plugin-sitemap": "^2.0.0-alpha.50",
+    "@docusaurus/theme-classic": "^2.0.0-alpha.50",
+    "@docusaurus/theme-search-algolia": "^2.0.0-alpha.50",
+    "del": "^5.1.0",
+    "github-download-directory": "^1.2.0",
     "gray-matter": "^3.1.1",
-    "gulp": "^4.0.0",
-    "pump": "^2.0.1",
-    "through2": "^2.0.3"
+    "gulp": "^4.0.2",
+    "gulplog": "^1.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "remark-admonitions": "^1.2.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }