' }
+ ]
+ },
+ { 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', {}],
+ ]
+};
diff --git a/gulpfile.js b/gulpfile.js
index 0189803..40090d3 100644
--- a/gulpfile.js
+++ b/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: ['']
};
-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))
}
diff --git a/package.json b/package.json
index af89b5b..1a65392 100644
--- a/package.json
+++ b/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"
+ ]
}
}
diff --git a/website/sidebars.json b/sidebars.json
similarity index 100%
rename from website/sidebars.json
rename to sidebars.json
diff --git a/src/css/docs.css b/src/css/docs.css
new file mode 100644
index 0000000..d2dfddb
--- /dev/null
+++ b/src/css/docs.css
@@ -0,0 +1,190 @@
+:root {
+ --ifm-global-radius: 4px;
+ --ifm-background-color: var(--ifm-color-white);
+ /* Primary color */
+ --ifm-color-primary: #cf4647;
+ --ifm-color-primary-dark: #c63334;
+ --ifm-color-primary-darker: #bb3132;
+ --ifm-color-primary-darkest: #9a2829;
+ --ifm-color-primary-light: #d55c5d;
+ --ifm-color-primary-lighter: #d86768;
+ --ifm-color-primary-lightest: #e08889;
+ /* Secondary color */
+ --ifm-color-secondary: #20232a;
+ /* Navbar */
+ --ifm-navbar-height: unset;
+ --ifm-navbar-item-padding-horizontal: 0.5rem;
+ --ifm-navbar-background-color: var(--ifm-color-primary);
+ --ifm-navbar-link-color: var(--ifm-color-white);
+ --ifm-navbar-link-hover-color: var(--ifm-color-white);
+ --ifm-navbar-link-hover-decoration: underline;
+ /* Search */
+ --ifm-navbar-search-input-background-color: var(--ifm-color-primary-darkest);
+ --ifm-navbar-search-input-color: var(--ifm-color-white);
+ --ifm-navbar-search-input-placeholder-color: var(--ifm-color-white);
+ --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,');
+ /* Footer */
+ --ifm-footer-background-color: var(--ifm-color-secondary);
+ --ifm-footer-color: var(--ifm-color-white);
+ --ifm-footer-link-color: var(--ifm-color-white);
+ /* Tables */
+ --ifm-table-border-width: 0;
+ --ifm-table-head-background: var(--ifm-color-primary);
+ --ifm-table-head-color: var(--ifm-color-white);
+ --ifm-table-stripe-background: rgba(76, 76, 76, 0.1);
+ /* Button */
+ --ifm-button-background-color: var(--ifm-color-primary);
+}
+
+/* Element defaults */
+small {
+ font-size: 14px;
+ font-style: italic;
+}
+
+i {
+ font-style: normal;
+}
+
+/* hash links */
+h1 .hash-link {
+ display: none;
+}
+
+/* Navbar */
+.navbar .navbar__logo {
+ max-width: unset;
+}
+
+.navbar .navbar__toggle {
+ color: var(--ifm-navbar-link-color);
+}
+
+.navbar .navbar__link:hover {
+ text-decoration: var(--ifm-navbar-link-hover-decoration);
+}
+
+@media (max-width: 996px) {
+ .navbar .navbar__item {
+ display: unset;
+ }
+}
+
+/* Buttons */
+.button.button--secondary {
+ --ifm-button-border-color: var(--ifm-color-white);
+}
+
+.button.button--secondary:not(.button--outline) {
+ --ifm-button-background-color: var(--ifm-color-primary);
+
+ color: var(--ifm-color-white);
+}
+
+.button.button--secondary:not(.button--outline):hover {
+ --ifm-button-background-color: var(--ifm-color-primary);
+ --ifm-button-border-color: var(--ifm-color-white);
+}
+
+.button.button.button--secondary:active,
+.button.button.button--secondary.button--active {
+ --ifm-button-background-color: var(--ifm-color-primary);
+ --ifm-button-border-color: var(--ifm-color-white);
+ background-color: var(--ifm-color-primary);
+ border-color: var(--ifm-color-white);
+}
+
+/* Tables */
+th, td {
+ text-align: start;
+}
+
+th[align="center"],
+td[align="center"] {
+ text-align: center;
+}
+
+table tr th code,
+table tr td code {
+ word-break: normal;
+}
+
+table tr th:last-child,
+table tr td:last-child {
+ min-width: 175px;
+}
+
+table tr th + th + th:last-child,
+table tr td + td + td:last-child {
+ min-width: 320px;
+ width: 100%;
+}
+
+/* Code Blocks */
+.prism-code {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ border-radius: var(--ifm-global-radius);
+}
+
+/* Search */
+.navbar .navbar__search .navbar__search-input {
+ width: 15.5rem;
+ border-radius: var(--ifm-global-radius);
+}
+
+/* Footer (for logo) */
+.footer__col:first-of-type .footer__item {
+ text-align: center;
+}
+.footer__item img {
+ width: 60px;
+}
+
+@media only screen and (max-width: 720px) {
+ table {
+ box-shadow: -10px 0px 10px -10px #000000 inset;
+ }
+}
+
+/* TODO: These will need to be update when "Enterprise" is added */
+@media only screen and (max-width: 767px) {
+ .navbar .navbar__items {
+ padding-top: var(--ifm-navbar-item-padding-vertical);
+ padding-bottom: var(--ifm-navbar-item-padding-vertical);
+ justify-content: space-around;
+ }
+
+ .navbar .navbar__items.navbar__items--right {
+ justify-content: space-around;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .navbar .navbar__search .navbar__search-input {
+ width: 12.5rem;
+ transition: width 0.5s ease 0s;
+ }
+
+ .navbar .navbar__search .navbar__search-input:active,
+ .navbar .navbar__search .navbar__search-input:focus {
+ width: 16.5rem;
+ }
+}
+
+
+@media only screen and (max-width: 996px) {
+ .footer .col.col.col {
+ --ifm-col-width: 33%;
+ }
+}
+
+@media only screen and (max-width: 375px) {
+ /* This is our logo */
+ .footer__col:first-of-type {
+ display: none;
+ }
+ .footer .col.col.col {
+ --ifm-col-width: 50%;
+ }
+}
diff --git a/src/theme/Navbar/index.js b/src/theme/Navbar/index.js
new file mode 100644
index 0000000..8c7808d
--- /dev/null
+++ b/src/theme/Navbar/index.js
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useCallback, useState} from 'react';
+import classnames from 'classnames';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+
+import SearchBar from '@theme/SearchBar';
+import Toggle from '@theme/Toggle';
+import useThemeContext from '@theme/hooks/useThemeContext';
+import useHideableNavbar from '@theme/hooks/useHideableNavbar';
+import useLogo from '@theme/hooks/useLogo';
+
+import styles from './styles.module.css';
+
+
+const useLinkLogo = (logo = {}) => {
+ const {
+ siteConfig: {baseUrl} = {},
+ } = useDocusaurusContext();
+ const {isDarkTheme} = useThemeContext();
+ const logoLink = logo.href || baseUrl;
+ let logoLinkProps = {};
+
+ if (logo.target) {
+ logoLinkProps = {target: logo.target};
+ } else if (!isInternalUrl(logoLink)) {
+ logoLinkProps = {
+ rel: 'noopener noreferrer',
+ target: '_blank',
+ };
+ }
+
+ const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
+ const logoImageUrl = useBaseUrl(logoSrc);
+
+ return {
+ logoImageUrl,
+ logoAlt: logo.alt,
+ };
+};
+
+function NavLink({activeBasePath, to, href, logo, label, position, ...props}) {
+ const toUrl = useBaseUrl(to);
+ const activeBaseUrl = useBaseUrl(activeBasePath);
+ const {logoImageUrl, logoAlt} = useLinkLogo(logo);
+
+ const content = logoImageUrl != null ? This project is maintained by a dedicated group of people.
-