Skip to content

Commit 83d139d

Browse files
phatedphated
authored
Upgrade to Docusaurus v2 (closes #105) (#106)
* Intial work migrating to Docusaurus v2 (ref #105) * More cleanup of docusaurus upgrade * More styling stuff and component cleanup * More v2 cleanup * Reorganize the project since v2 does not require website directory * Update development workflow (closes #96)
1 parent dd1385c commit 83d139d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+654
-788
lines changed

‎.gitignore

+25-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
1+
# dependencies
2+
node_modules
3+
4+
# production
5+
build
6+
7+
# generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# misc
112
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
221
*.log
3-
node_modules
4-
docs
5-
converted-docs
22+
23+
# lock
624
package-lock.json
725
yarn.lock
8-
website/build
26+
27+
# generated
28+
docs
29+
converted-docs

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
package-lock=false
2+
loglevel=error

‎README.md

+27-3
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,36 @@ This is the repository containing the code for the official gulp website [gulpjs
55
![A screenshot of gulpjs.com](screenshot.png)
66

77
## Contributing
8+
This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
9+
10+
### Getting started
811

912
To get started working on this site you first need to clone this repository
13+
1014
```
11-
$ git clone https://github.com/gulpjs/gulpjs.github.io.git
15+
$ git clone git://github.com/gulpjs/gulpjs.github.io
1216
```
1317

14-
__The rest is a work in progress, we'll update once things are working__
15-
1618
When you are done making your improvements, create a [Pull Request](https://github.com/gulpjs/gulpjs.github.io/compare).
19+
20+
### Installation
21+
22+
```
23+
$ npm install
24+
```
25+
26+
### Local Development
27+
28+
```
29+
$ npm start
30+
```
31+
32+
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.
33+
34+
### Build
35+
36+
```
37+
$ npm build
38+
```
39+
40+
This command generates static content into the `build` directory and can be served using any static contents hosting service.

‎docusaurus.config.js

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
'use strict';
2+
3+
var isProd = process.env.NODE_ENV === 'production';
4+
5+
module.exports = {
6+
title: 'gulp.js',
7+
favicon: 'img/favicon.png',
8+
url: 'https://gulpjs.com/',
9+
baseUrl: '/',
10+
tagline: 'The streaming build system',
11+
// Used by the deployment
12+
organizationName: 'gulpjs',
13+
projectName: 'gulpjs.github.io',
14+
// The theme
15+
themeConfig: {
16+
disableDarkMode: true,
17+
navbar: {
18+
logo: {
19+
alt: 'gulp',
20+
src: 'img/gulp.svg',
21+
// TODO: Remove these when we have a homepage in the router
22+
href: 'https://gulpjs.com/',
23+
target: '_self',
24+
},
25+
links: [
26+
{ to: 'docs/en/getting-started/quick-start',
27+
label: 'Getting Started',
28+
position: 'left',
29+
},
30+
{ to: 'docs/en/api/concepts',
31+
label: 'API',
32+
position: 'left',
33+
},
34+
{ href: 'https://gulpjs.com/plugins',
35+
label: 'Plugins',
36+
position: 'left',
37+
},
38+
{ href: 'https://twitter.com/gulpjs',
39+
logo: {
40+
alt: 'Gulp on Twitter',
41+
src: 'img/twitter.svg',
42+
},
43+
position: 'right'
44+
},
45+
{ href: 'https://medium.com/gulpjs',
46+
logo: {
47+
alt: 'The gulp blog',
48+
src: 'img/medium.svg',
49+
},
50+
position: 'right'
51+
},
52+
]
53+
},
54+
footer: {
55+
links: [
56+
{ items: [
57+
{ html: '<img src="/img/gulp-white-logo.svg" alt="gulp" href="/" />' }
58+
]
59+
},
60+
{ title: 'Docs',
61+
items: [
62+
{ to: 'docs/en/getting-started/quick-start',
63+
label: 'Getting Started',
64+
},
65+
{ to: 'docs/en/api/concepts',
66+
label: 'API',
67+
},
68+
]
69+
},
70+
{ title: 'Community',
71+
items: [
72+
{ href: 'https://github.com/gulpjs/gulp',
73+
label: 'GitHub',
74+
},
75+
{ href: 'https://stackoverflow.com/questions/tagged/gulp',
76+
label: 'Stack Overflow',
77+
},
78+
{ href: 'https://twitter.com/gulpjs',
79+
label: 'Twitter',
80+
}
81+
]
82+
},
83+
],
84+
copyright: `Copyright © ${new Date().getFullYear()} GulpJS`,
85+
},
86+
prism: {
87+
// One of:
88+
// dracula, duotoneDark, duotoneLight, github, nightOwl, nightOwlLight,
89+
// oceanicNext, palenight, shad esOfPurple, ultramin, vsDark
90+
theme: require('prism-react-renderer/themes/vsDark'),
91+
},
92+
algolia: {
93+
apiKey: 'a6ef919bce0b83de1bcbad1d4ef753f8',
94+
indexName: 'gulpjs',
95+
algoliaOptions: {} // Optional, if provided by Algolia
96+
},
97+
googleAnalytics: {
98+
trackingID: 'UA-128126650-1',
99+
},
100+
gtag: {
101+
trackingID: 'UA-128126650-1',
102+
},
103+
},
104+
themes: [
105+
['@docusaurus/theme-classic', {
106+
customCss: require.resolve('./src/css/docs.css')
107+
}],
108+
['@docusaurus/theme-search-algolia', {}]
109+
],
110+
plugins: [
111+
['@docusaurus/plugin-content-docs', {
112+
path: 'docs',
113+
sidebarPath: require.resolve('./sidebars.json'),
114+
// This is a holdover because we set up original docusaurus
115+
// to support translations and v2 doesn't support them yet
116+
routeBasePath: 'docs/en/',
117+
}],
118+
isProd && ['@docusaurus/plugin-google-analytics', {}],
119+
isProd && ['@docusaurus/plugin-google-gtag', {}],
120+
isProd && ['@docusaurus/plugin-sitemap', {}],
121+
]
122+
};

‎gulpfile.js

+23-38
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,45 @@
22

33
// This file is only for generating the docs
44
// No need to use any of this if working on the main website
5-
6-
const { src, dest, series } = require('gulp');
7-
const pump = require('pump');
8-
const through2 = require('through2');
5+
const del = require('del');
6+
const gulplog = require('gulplog');
7+
const { series } = require('gulp');
98
const frontMatter = require('gray-matter');
109
const download = require('github-download-directory');
1110

1211
// Exports for task registration
13-
exports.default = series(fetchDocs, convertComments);
12+
exports.default = series(clean, generateDocs);
1413

1514
const owner = 'gulpjs';
1615
const repo = 'gulp';
1716
const directory = 'docs';
18-
const outDirectory = 'converted-docs';
1917

2018
const fmOptions = {
2119
delimiters: ['<!-- front-matter', '-->']
2220
};
2321

24-
function fetchDocs() {
25-
return download(owner, repo, directory, { sha: "master" });
26-
}
27-
28-
function convertComments(cb) {
29-
pump([
30-
// Only process markdown files in the directory we fetched
31-
src('**/*.md', { cwd: directory }),
32-
pluginless(convertToDocusaurus),
33-
// Overwrite the markdown files we fetched
34-
dest(outDirectory)
35-
], cb)
22+
async function clean() {
23+
return del(directory);
3624
}
3725

38-
/* utils */
39-
function convertToDocusaurus(file) {
40-
var config = frontMatter(file.contents, fmOptions);
41-
if (!config.data.id) {
42-
console.error(`File missing front-matter. Path: ${file.path}`);
43-
return; // Filter out any file without frontmatter
44-
}
45-
46-
file.contents = Buffer.from(config.stringify());
26+
async function generateDocs() {
27+
// Fetch
28+
const files = await download.fetchFiles(owner, repo, directory, { sha: "master" });
4729

48-
return file;
49-
}
30+
// Process
31+
const docusaurusFiles = files.reduce((result, {path, contents}) => {
32+
const config = frontMatter(contents, fmOptions);
33+
if (!config.data.id) {
34+
gulplog.debug(`File missing front-matter. Path: ${path}`);
35+
return result;
36+
}
5037

51-
function pluginless(fn) {
52-
return through2.obj(handler);
38+
return result.concat({
39+
path,
40+
contents: Buffer.from(config.stringify())
41+
});
42+
}, []);
5343

54-
function handler(file, _, cb) {
55-
try {
56-
cb(null, fn(file));
57-
} catch(err) {
58-
cb(err);
59-
}
60-
}
44+
// Write
45+
await Promise.all(docusaurusFiles.map(download.output))
6146
}

‎package.json

+34-12
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,46 @@
22
"name": "gulpjs.github.io",
33
"version": "0.0.0",
44
"private": true,
5+
"engines": {
6+
"node": ">=8.0.0"
7+
},
58
"scripts": {
6-
"clean": "rm -r docs converted-docs",
79
"fetch-docs": "gulp",
810
"prestart": "npm run fetch-docs",
9-
"start": "cd website && npm run start",
11+
"start": "docusaurus start",
1012
"prebuild": "npm run fetch-docs",
11-
"build": "cd website && npm run build",
12-
"pregh-pages": "npm run fetch-docs",
13-
"gh-pages": "cd website && npm run publish-gh-pages"
14-
},
15-
"engines": {
16-
"node": ">=8.0.0"
13+
"build": "docusaurus build",
14+
"predeploy": "npm run fetch-docs",
15+
"deploy": "docusaurus deploy",
16+
"swizzle": "docusaurus swizzle"
1717
},
1818
"devDependencies": {
19-
"github-download-directory": "^1.1.1",
19+
"@docusaurus/core": "^2.0.0-alpha.50",
20+
"@docusaurus/plugin-content-docs": "^2.0.0-alpha.50",
21+
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.50",
22+
"@docusaurus/plugin-google-gtag": "^2.0.0-alpha.50",
23+
"@docusaurus/plugin-sitemap": "^2.0.0-alpha.50",
24+
"@docusaurus/theme-classic": "^2.0.0-alpha.50",
25+
"@docusaurus/theme-search-algolia": "^2.0.0-alpha.50",
26+
"del": "^5.1.0",
27+
"github-download-directory": "^1.2.0",
2028
"gray-matter": "^3.1.1",
21-
"gulp": "^4.0.0",
22-
"pump": "^2.0.1",
23-
"through2": "^2.0.3"
29+
"gulp": "^4.0.2",
30+
"gulplog": "^1.0.0",
31+
"react": "^16.13.1",
32+
"react-dom": "^16.13.1",
33+
"remark-admonitions": "^1.2.1"
34+
},
35+
"browserslist": {
36+
"production": [
37+
">0.2%",
38+
"not dead",
39+
"not op_mini all"
40+
],
41+
"development": [
42+
"last 1 chrome version",
43+
"last 1 firefox version",
44+
"last 1 safari version"
45+
]
2446
}
2547
}

‎website/sidebars.json ‎sidebars.json

File renamed without changes.

0 commit comments

Comments
 (0)