feat: Upgrade to Docusaurus v3 (#149)

Co-authored-by: donghwi park <[email protected]>

.github/workflows/deploy.yml

@@ -6,24 +6,40 @@ on:
       - source
 
 jobs:
-  deploy:
-    runs-on: ubuntu-18.04
+  build:
+    permissions:
+      contents: read
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '10.x'
+          node-version: 18
+
+      - run: npm ci
 
-      - run: npm install
       - run: npm run build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Deploy
-        # Use the SHA because I am untrustworthy
-        # TODO: We probably should fork any non-GitHub owned actions
-        uses: peaceiris/actions-gh-pages@1828d864aeb7ba79a37f40035aa6d0b7ff66254f
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
-          publish_branch: master
+          path: build
+
+  deploy:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

docusaurus.config.js

@@ -1,6 +1,8 @@
 'use strict';
 
-var isProd = process.env.NODE_ENV === 'production';
+const {themes} = require('prism-react-renderer');
+
+const isProd = process.env.NODE_ENV === 'production';
 
 module.exports = {
   title: 'gulp.js',
@@ -44,27 +46,16 @@ module.exports = {
           href: 'https://github.com/sponsors/gulpjs',
           label: 'Donate',
           position: 'left',
-        },
-        {
-          to: 'docs/en/support/for-enterprise',
-          label: 'Enterprise',
-          position: 'left',
-          emphasis: true,
+          className: 'emphasis',
         },
         {
           href: 'https://twitter.com/gulpjs',
-          logo: {
-            alt: 'Gulp on Twitter',
-            src: 'img/twitter.svg',
-          },
+          html: '<img class="navbarIcon" src="/img/twitter.svg" alt="Gulp on Twitter" />',
           position: 'right'
         },
         {
           href: 'https://medium.com/gulpjs',
-          logo: {
-            alt: 'The gulp blog',
-            src: 'img/medium.svg',
-          },
+          html: '<img class="navbarIcon" src="/img/medium.svg" alt="The gulp blog" />',
           position: 'right'
         },
       ]
@@ -112,19 +103,14 @@ module.exports = {
       // One of:
       // dracula, duotoneDark, duotoneLight, github, nightOwl, nightOwlLight,
       // oceanicNext, palenight, shad esOfPurple, ultramin, vsDark
-      theme: require('prism-react-renderer/themes/vsDark'),
+      theme: themes.vsDark,
     },
     algolia: {
-      apiKey: 'a6ef919bce0b83de1bcbad1d4ef753f8',
+      appId: 'HQ9BYTRO7N',
+      apiKey: 'e0f1bf55fa3f4fb5150c708638b02e22',
       indexName: 'gulpjs',
       algoliaOptions: {} // Optional, if provided by Algolia
     },
-    googleAnalytics: {
-      trackingID: 'UA-128126650-1',
-    },
-    gtag: {
-      trackingID: 'UA-128126650-1',
-    },
     companyLogos: [
       // Stopped donating on April 1, 2020
       // {
@@ -224,8 +210,12 @@ module.exports = {
     }],
     ['docusaurus-plugin-sass', {}],
     ['@docusaurus/plugin-content-pages', {}],
-    isProd && ['@docusaurus/plugin-google-analytics', {}],
-    isProd && ['@docusaurus/plugin-google-gtag', {}],
+    isProd && ['@docusaurus/plugin-google-analytics', {
+      trackingID: 'UA-128126650-1',
+    }],
+    isProd && ['@docusaurus/plugin-google-gtag', {
+      trackingID: 'UA-128126650-1',
+    }],
     isProd && ['@docusaurus/plugin-sitemap', {}],
   ]
 };

gulpfile.js → gulpfile.mjs

@@ -1,15 +1,15 @@
-'use strict';
-
 // This file is only for generating the docs
 // No need to use any of this if working on the main website
-const del = require('del');
-const gulplog = require('gulplog');
-const { series } = require('gulp');
-const frontMatter = require('gray-matter');
-const download = require('github-download-directory');
+import { deleteAsync } from 'del';
+import gulplog from 'gulplog';
+import { series } from 'gulp';
+import frontMatter from 'gray-matter';
+import { Downloader } from 'github-download-directory';
+import { dirname } from 'path';
+import { mkdir, writeFile } from 'fs/promises';
 
 // Exports for task registration
-exports.default = series(clean, generateDocs);
+export default series(clean, generateDocs);
 
 const owner = 'gulpjs';
 const repo = 'gulp';
@@ -20,10 +20,25 @@ const fmOptions = {
 };
 
 async function clean() {
-  return del(directory);
+  return deleteAsync(directory);
+}
+
+async function createDirectories(filepath) {
+  var dir = dirname(filepath);
+  return mkdir(dir, { recursive: true });
+}
+
+async function output(file) {
+  await createDirectories(file.path);
+  await writeFile(file.path, file.contents);
 }
 
 async function generateDocs() {
+  const download = new Downloader({
+    github: {
+      auth: process.env.GITHUB_TOKEN
+    }
+  });
   // Fetch
   const files = await download.fetchFiles(owner, repo, directory, { sha: "master" });
 
@@ -42,5 +57,5 @@ async function generateDocs() {
   }, []);
 
   // Write
-  await Promise.all(docusaurusFiles.map(download.output))
+  await Promise.all(docusaurusFiles.map(output))
 }