From a505682375320c13eb8a8a654b3d5215a11ec97c Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Fri, 3 Apr 2020 22:13:22 -0700 Subject: [PATCH 1/6] Intial work migrating to Docusaurus v2 (ref #105) --- .gitignore | 29 +++- website/core/Footer.js | 77 ---------- website/docusaurus.config.js | 115 +++++++++++++++ website/package.json | 36 ++++- website/pages/en/help.js | 58 -------- website/siteConfig.js | 45 ------ website/src/css/docs.css | 145 ++++++++++++++++++ website/static/docs-css/custom.css | 227 ----------------------------- 8 files changed, 313 insertions(+), 419 deletions(-) delete mode 100644 website/core/Footer.js create mode 100644 website/docusaurus.config.js delete mode 100755 website/pages/en/help.js delete mode 100644 website/siteConfig.js create mode 100644 website/src/css/docs.css delete mode 100644 website/static/docs-css/custom.css diff --git a/.gitignore b/.gitignore index 61e7a48..4394572 100644 --- a/.gitignore +++ b/.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 diff --git a/website/core/Footer.js b/website/core/Footer.js deleted file mode 100644 index 1afdecb..0000000 --- a/website/core/Footer.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -class Footer extends React.Component { - docUrl(doc, language) { - const baseUrl = this.props.config.baseUrl; - return `${baseUrl}docs/${language ? `${language}/` : ''}${doc}`; - } - - pageUrl(doc, language) { - const baseUrl = this.props.config.baseUrl; - return baseUrl + (language ? `${language}/` : '') + doc; - } - - render() { - return ( - - ); - } -} - -module.exports = Footer; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js new file mode 100644 index 0000000..caa5faf --- /dev/null +++ b/website/docusaurus.config.js @@ -0,0 +1,115 @@ +'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, + sidebarCollapsible: false, + navbar: { + logo: { + alt: 'gulp', + src: 'img/gulp.svg', + }, + links: [ + { to: 'getting-started/quick-start', + label: 'Getting Started', + position: 'left', + }, + { to: 'api/concepts', + label: 'API', + position: 'left', + }, + { href: 'https://gulpjs.com/plugins', + label: 'Plugins', + position: 'left', + }, + { href: 'https://twitter.com/gulpjs', + label: 'Twitter', + position: 'right' + }, + { href: 'https://medium.com/gulpjs', + label: 'Blog', + position: 'right' + }, + ] + }, + footer: { + links: [ + { items: [ + { html: 'gulp' } + ] + }, + { title: 'Docs', + items: [ + { to: 'getting-started/quick-start', + label: 'Getting Started', + }, + { to: 'api/concepts', + label: 'API', + }, + ] + }, + { title: 'Community', + items: [ + { href: 'https://stackoverflow.com/questions/tagged/gulp', + label: 'Stack Overflow', + }, + { href: 'https://twitter.com/gulpjs', + label: 'Twitter', + } + ] + }, + { title: 'More', + items: [ + { href: 'https://github.com/gulpjs/gulp', + label: 'GitHub', + } + ] + }, + ], + 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: '../converted-docs', + sidebarPath: require.resolve('./sidebars.json'), + }], + isProd && ['@docusaurus/plugin-google-analytics', {}], + isProd && ['@docusaurus/plugin-google-gtag', {}], + isProd && ['@docusaurus/plugin-sitemap', {}], + ] +}; diff --git a/website/package.json b/website/package.json index d1af394..bc11f20 100644 --- a/website/package.json +++ b/website/package.json @@ -1,14 +1,34 @@ { "scripts": { - "examples": "docusaurus-examples", - "start": "docusaurus-start", - "build": "docusaurus-build", - "publish-gh-pages": "docusaurus-publish", - "write-translations": "docusaurus-write-translations", - "version": "docusaurus-version", - "rename-version": "docusaurus-rename-version" + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy" + }, + "dependencies": { + "react": "^16.13.1", + "react-dom": "^16.13.1", + "remark-admonitions": "^1.2.1" }, "devDependencies": { - "docusaurus": "^1.6.0" + "@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" + }, + "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/pages/en/help.js b/website/pages/en/help.js deleted file mode 100755 index 512e335..0000000 --- a/website/pages/en/help.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -const CompLibrary = require('../../core/CompLibrary.js'); - -const Container = CompLibrary.Container; -const GridBlock = CompLibrary.GridBlock; - -const siteConfig = require(`${process.cwd()}/siteConfig.js`); - -function docUrl(doc, language) { - return `${siteConfig.baseUrl}docs/${language ? `${language}/` : ''}${doc}`; -} - -class Help extends React.Component { - render() { - const language = this.props.language || ''; - const supportLinks = [ - { - content: `Learn more using the [documentation on this site.](${docUrl( - 'doc1.html', - language, - )})`, - title: 'Browse Docs', - }, - { - content: 'Ask questions about the documentation and project', - title: 'Join the community', - }, - { - content: "Find out what's new with this project", - title: 'Stay up to date', - }, - ]; - - return ( -
- -
-
-

Need help?

-
-

This project is maintained by a dedicated group of people.

- -
- -
- ); - } -} - -module.exports = Help; diff --git a/website/siteConfig.js b/website/siteConfig.js deleted file mode 100644 index 331d371..0000000 --- a/website/siteConfig.js +++ /dev/null @@ -1,45 +0,0 @@ -const siteConfig = { - disableHeaderTitle: true, - disableHeaderTagline: true, - title: 'gulp.js', - tagline: 'The streaming build system', - url: 'https://gulpjs.com/', - baseUrl: '/', - customDocsPath: 'converted-docs', - organizationName: 'gulpjs', - projectName: 'gulpjs.github.io', - headerLinks: [ - { doc: 'getting-started/quick-start', label: 'Getting Started' }, - { doc: 'api/concepts', label: 'API' }, - { href: 'https://gulpjs.com/plugins', label: 'Plugins' }, - { href: 'https://twitter.com/gulpjs', label: 'Twitter' }, - { href: 'https://medium.com/gulpjs', label: 'Blog' }, - { search: true }, - ], - headerIcon: 'img/gulp.svg', - footerIcon: 'img/gulp.svg', - favicon: 'img/favicon.png', - colors: { - primaryColor: '#cf4647', - secondaryColor: '#cf4647', - }, - copyright: `Copyright © ${new Date().getFullYear()} GulpJS`, - highlight: { - theme: 'tomorrow-night', - }, - separateCss: ['static/css'], - onPageNav: 'separate', - cleanUrl: true, - useEnglishUrl: true, - scripts: ['https://buttons.github.io/buttons.js'], - repoUrl: 'https://github.com/gulpjs/gulp', - algolia: { - apiKey: 'a6ef919bce0b83de1bcbad1d4ef753f8', - indexName: 'gulpjs', - algoliaOptions: {} // Optional, if provided by Algolia - }, - gaGtag: true, - gaTrackingId: 'UA-128126650-1', -}; - -module.exports = siteConfig; diff --git a/website/src/css/docs.css b/website/src/css/docs.css new file mode 100644 index 0000000..8bb28a6 --- /dev/null +++ b/website/src/css/docs.css @@ -0,0 +1,145 @@ +:root { + --ifm-background-color: var(--ifm-color-white); + --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; + --ifm-navbar-background-color: var(--ifm-color-primary); + --ifm-navbar-link-color: var(--ifm-color-white); + --ifm-footer-background-color: #20232a; + --ifm-footer-color: var(--ifm-color-white); + --ifm-footer-link-color: var(--ifm-color-white); + --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,'); +} + +small { + font-size: 14px; + font-style: italic; +} + +code { + background-color: rgba(27, 31, 35, 0.1); +} + +h1 { + margin-top: 0; +} + +i { + font-style: normal; +} + +/* Navbar */ +.navbar .navbar__toggle { + color: var(--ifm-navbar-link-color); +} + +/* Tables */ +table { + border: none; + display: block; + overflow-x: auto; +} + +table thead { + border: none; +} + +table tr { + border: none; +} + +table tr th { + text-transform: none; + color: #fff; + border: none; +} + +table tr th, +table tr td { + border: none; +} + +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%; +} + +table tr:nth-of-type(odd) { + background: none; +} + +table tbody tr:nth-of-type(even) { + background-color: rgba(76, 76, 76, 0.1); +} + +table thead tr:nth-of-type(odd) { + background-color: #cf4547; +} + +/* Code Blocks */ +.prism-code { + margin-top: 2rem; + margin-bottom: 2rem; +} + +/* Search */ +.navbar .navbar__search .navbar__search-input { + border-radius: 4px; + transition: width 0.5s ease 0s; +} + +.navbar .navbar__search .navbar__search-input:active, +.navbar .navbar__search .navbar__search-input:focus { + width: 15.5rem; +} + +@media (max-width: 360px) { + .logo { + display: initial; + } + + .navbar .navbar__search .navbar__search-input { + transition: none; + } +} + +@media only screen and (max-width: 488px) {} + +@media only screen and (max-width: 735px) { + table { + box-shadow: -10px 0px 10px -10px #000000 inset; + display: inline-block; + max-width: 100%; + width: unset; + } +} + +@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {} + +@media only screen and (min-width: 1024px) {} + +@media only screen and (max-width: 1023px) {} + +@media only screen and (max-width: 1024px) {} + +@media only screen and (min-width: 1400px) {} + +@media only screen and (min-width: 1500px) {} diff --git a/website/static/docs-css/custom.css b/website/static/docs-css/custom.css deleted file mode 100644 index 3e0064e..0000000 --- a/website/static/docs-css/custom.css +++ /dev/null @@ -1,227 +0,0 @@ -/* your custom css */ - -small { - font-size: 14px; - font-style: italic; -} - -code { - background-color: rgba(27, 31, 35, 0.1); -} - -h1 { - margin-top: 0; -} - -i { - font-style: normal; -} - -body, -.mainContainer, -nav.toc .toggleNav, -nav.toc .toggleNav .navGroup, -nav.toc .toggleNav .navGroup.navGroupActive { - background: #fff; -} - -.mainContainer { - padding: 40px 0; -} - -.mainContainer .wrapper blockquote p { - padding: 0; -} - -.mainContainer .wrapper .post .postHeader { - margin-bottom: 0; -} - -nav.toc .toggleNav .navToggle::before, -nav.toc .toggleNav .navToggle::after { - border-color: #fff; -} - -nav.toc .toggleNav .navToggle i::before, -nav.toc .toggleNav .navToggle i::after { - border-color: transparent #fff; -} - -.navBreadcrumb i { - color: #fff; -} - -.navBreadcrumb span { - color: #fff; -} - -.docsNavContainer { - background: none; -} - -.docsNavContainer nav.toc .navBreadcrumb, -.docsSliderActive nav.toc .navBreadcrumb { - background: #cf4647; - border-top: 2px solid #fff; -} - -.navigationSlider .slidingNav ul { - justify-content: space-around; - flex-wrap: wrap; -} - -.navigationSlider .slidingNav ul li a { - color: #fff; - padding: 10px 20px; -} - -/* Tables */ -table { - border: none; - display: block; - overflow-x: auto; -} - -table thead { - border: none; -} - -table tr { - border: none; -} - -table tr th { - text-transform: none; - color: #fff; - border: none; -} - -table tr th, -table tr td { - border: none; -} - -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%; -} - -table tr:nth-of-type(odd) { - background: none; -} - -table tbody tr:nth-of-type(even) { - background-color: rgba(76, 76, 76, 0.1); -} - -table thead tr:nth-of-type(odd) { - background-color: #cf4547; -} - -/* Code Blocks */ -.hljs { - margin-top: 2rem; - margin-bottom: 2rem; -} - -/* Search */ -input#search_input_react { - line-height: 25px; - border-radius: 4px; -} - -input#search_input_react:focus, -input#search_input_react:active { - background-color: #a91b1c; -} - -@media (max-width: 375px) { - .logo { - display: initial; - } -} - -@media only screen and (max-width: 488px) { - .fixedHeaderContainer a { - display: none; - } - .navSearchWrapper { - display: none; - } - - .navigationSlider .slidingNav ul { - margin-top: 0; - } -} - -@media only screen and (max-width: 735px) { - - .docs-next { - clear: unset; - float: right; - } - - table { - box-shadow: -10px 0px 10px -10px #000000 inset; - display: inline-block; - max-width: 100%; - width: unset; - } -} - - -@media only screen and (min-device-width: 360px) and (max-device-width: 736px) { - /* Better use of screen on mobile */ - .wrapper { - width: 100%; - } -} - -@media only screen and (min-width: 1024px) { - .docMainWrapper > * { - margin: 0 10px; - } - - .docsNavContainer { - height: unset; - } - - .docOnPageNav, - .separateOnPageNav .docsNavContainer { - flex: 1 0 180px; - } -} - -@media only screen and (max-width: 1023px) { - .mainContainer { - padding-top: 50px; - } -} - -@media only screen and (max-width: 1024px) { - .reactNavSearchWrapper input#search_input_react { - line-height: 25px; - border-radius: 4px; - } - .reactNavSearchWrapper input#search_input_react:focus, - .reactNavSearchWrapper input#search_input_react:active { - background-color: #a91b1c; - } -} - -@media only screen and (min-width: 1400px) { -} - -@media only screen and (min-width: 1500px) { -} From d3d14db1f43560daabd943c8b2fb5515324cbdce Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sat, 4 Apr 2020 14:59:53 -0700 Subject: [PATCH 2/6] More cleanup of docusaurus upgrade --- website/docusaurus.config.js | 5 +-- website/src/css/docs.css | 74 +++++++++++++++--------------------- 2 files changed, 32 insertions(+), 47 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index caa5faf..e2f7d4a 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -14,18 +14,17 @@ module.exports = { // The theme themeConfig: { disableDarkMode: true, - sidebarCollapsible: false, navbar: { logo: { alt: 'gulp', src: 'img/gulp.svg', }, links: [ - { to: 'getting-started/quick-start', + { to: 'docs/getting-started/quick-start', label: 'Getting Started', position: 'left', }, - { to: 'api/concepts', + { to: 'docs/api/concepts', label: 'API', position: 'left', }, diff --git a/website/src/css/docs.css b/website/src/css/docs.css index 8bb28a6..9a23662 100644 --- a/website/src/css/docs.css +++ b/website/src/css/docs.css @@ -1,4 +1,5 @@ :root { + --ifm-global-radius: 4px; --ifm-background-color: var(--ifm-color-white); --ifm-color-primary: #cf4647; --ifm-color-primary-dark: #c63334; @@ -7,63 +8,59 @@ --ifm-color-primary-light: #d55c5d; --ifm-color-primary-lighter: #d86768; --ifm-color-primary-lightest: #e08889; + /* Navbar */ --ifm-navbar-background-color: var(--ifm-color-primary); --ifm-navbar-link-color: var(--ifm-color-white); - --ifm-footer-background-color: #20232a; - --ifm-footer-color: var(--ifm-color-white); - --ifm-footer-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: #20232a; + --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); } +/* Element defaults */ small { font-size: 14px; font-style: italic; } -code { - background-color: rgba(27, 31, 35, 0.1); -} - -h1 { - margin-top: 0; -} - i { font-style: normal; } +/* hash links */ +h1 .hash-link { + display: none; +} + /* Navbar */ .navbar .navbar__toggle { color: var(--ifm-navbar-link-color); } -/* Tables */ -table { - border: none; - display: block; - overflow-x: auto; -} - -table thead { - border: none; +.navbar .navbar__link:hover { + text-decoration: var(--ifm-navbar-link-hover-decoration); } -table tr { - border: none; -} - -table tr th { - text-transform: none; - color: #fff; - border: none; +/* Tables */ +th, td { + text-align: start; } -table tr th, -table tr td { - border: none; +th[align="center"], +td[align="center"] { + text-align: center; } table tr th code, @@ -82,27 +79,16 @@ table tr td + td + td:last-child { width: 100%; } -table tr:nth-of-type(odd) { - background: none; -} - -table tbody tr:nth-of-type(even) { - background-color: rgba(76, 76, 76, 0.1); -} - -table thead tr:nth-of-type(odd) { - background-color: #cf4547; -} - /* Code Blocks */ .prism-code { margin-top: 2rem; margin-bottom: 2rem; + border-radius: var(--ifm-global-radius); } /* Search */ .navbar .navbar__search .navbar__search-input { - border-radius: 4px; + border-radius: var(--ifm-global-radius); transition: width 0.5s ease 0s; } From 5a644e2bf3816b8e2e19a498add31526119107f1 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sat, 4 Apr 2020 18:03:08 -0700 Subject: [PATCH 3/6] More styling stuff and component cleanup --- website/docusaurus.config.js | 22 +-- website/src/css/docs.css | 111 +++++++++--- website/src/theme/Navbar/index.js | 191 +++++++++++++++++++++ website/src/theme/Navbar/styles.module.css | 35 ++++ website/static/img/medium.svg | 3 + website/static/img/twitter.svg | 3 + 6 files changed, 329 insertions(+), 36 deletions(-) create mode 100644 website/src/theme/Navbar/index.js create mode 100644 website/src/theme/Navbar/styles.module.css create mode 100644 website/static/img/medium.svg create mode 100644 website/static/img/twitter.svg diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index e2f7d4a..22831e4 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -33,11 +33,17 @@ module.exports = { position: 'left', }, { href: 'https://twitter.com/gulpjs', - label: 'Twitter', + logo: { + alt: 'Gulp on Twitter', + src: 'img/twitter.svg', + }, position: 'right' }, { href: 'https://medium.com/gulpjs', - label: 'Blog', + logo: { + alt: 'The gulp blog', + src: 'img/medium.svg', + }, position: 'right' }, ] @@ -45,7 +51,7 @@ module.exports = { footer: { links: [ { items: [ - { html: 'gulp' } + { html: 'gulp' } ] }, { title: 'Docs', @@ -60,6 +66,9 @@ module.exports = { }, { title: 'Community', items: [ + { href: 'https://github.com/gulpjs/gulp', + label: 'GitHub', + }, { href: 'https://stackoverflow.com/questions/tagged/gulp', label: 'Stack Overflow', }, @@ -68,13 +77,6 @@ module.exports = { } ] }, - { title: 'More', - items: [ - { href: 'https://github.com/gulpjs/gulp', - label: 'GitHub', - } - ] - }, ], copyright: `Copyright © ${new Date().getFullYear()} GulpJS`, }, diff --git a/website/src/css/docs.css b/website/src/css/docs.css index 9a23662..d2dfddb 100644 --- a/website/src/css/docs.css +++ b/website/src/css/docs.css @@ -1,6 +1,7 @@ :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; @@ -8,7 +9,11 @@ --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); @@ -19,7 +24,7 @@ --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: #20232a; + --ifm-footer-background-color: var(--ifm-color-secondary); --ifm-footer-color: var(--ifm-color-white); --ifm-footer-link-color: var(--ifm-color-white); /* Tables */ @@ -27,6 +32,8 @@ --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 */ @@ -45,6 +52,10 @@ h1 .hash-link { } /* Navbar */ +.navbar .navbar__logo { + max-width: unset; +} + .navbar .navbar__toggle { color: var(--ifm-navbar-link-color); } @@ -53,6 +64,36 @@ h1 .hash-link { 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; @@ -88,44 +129,62 @@ table tr td + td + td:last-child { /* Search */ .navbar .navbar__search .navbar__search-input { + width: 15.5rem; border-radius: var(--ifm-global-radius); - transition: width 0.5s ease 0s; } -.navbar .navbar__search .navbar__search-input:active, -.navbar .navbar__search .navbar__search-input:focus { - width: 15.5rem; +/* Footer (for logo) */ +.footer__col:first-of-type .footer__item { + text-align: center; } - -@media (max-width: 360px) { - .logo { - display: initial; - } - - .navbar .navbar__search .navbar__search-input { - transition: none; - } +.footer__item img { + width: 60px; } -@media only screen and (max-width: 488px) {} - -@media only screen and (max-width: 735px) { +@media only screen and (max-width: 720px) { table { box-shadow: -10px 0px 10px -10px #000000 inset; - display: inline-block; - max-width: 100%; - width: unset; } } -@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {} +/* 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: 1024px) {} +@media only screen and (min-width: 768px) { + .navbar .navbar__search .navbar__search-input { + width: 12.5rem; + transition: width 0.5s ease 0s; + } -@media only screen and (max-width: 1023px) {} + .navbar .navbar__search .navbar__search-input:active, + .navbar .navbar__search .navbar__search-input:focus { + width: 16.5rem; + } +} -@media only screen and (max-width: 1024px) {} -@media only screen and (min-width: 1400px) {} +@media only screen and (max-width: 996px) { + .footer .col.col.col { + --ifm-col-width: 33%; + } +} -@media only screen and (min-width: 1500px) {} +@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/website/src/theme/Navbar/index.js b/website/src/theme/Navbar/index.js new file mode 100644 index 0000000..8c7808d --- /dev/null +++ b/website/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 ? {logoAlt} : label; + + return ( + + location.pathname.startsWith(activeBaseUrl), + } + : null), + })} + {...props}> + {content} + + ); +} + +function NavItem({items, position, ...props}) { + if (!items) { + return ; + } + + return ( +
+ + {props.label} + +
    + {items.map((linkItemInner, i) => ( +
  • + +
    • + ))} +
+
+ ); +} + + +function Navbar() { + const { + siteConfig: { + themeConfig: { + navbar: {title, links = [], hideOnScroll = false} = {}, + disableDarkMode = false, + }, + }, + isClient, + } = useDocusaurusContext(); + const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false); + + const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext(); + const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll); + const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); + + const onToggleChange = useCallback( + e => (e.target.checked ? setDarkTheme() : setLightTheme()), + [setLightTheme, setDarkTheme], + ); + + return ( + + ); +} + +export default Navbar; diff --git a/website/src/theme/Navbar/styles.module.css b/website/src/theme/Navbar/styles.module.css new file mode 100644 index 0000000..04c3a9e --- /dev/null +++ b/website/src/theme/Navbar/styles.module.css @@ -0,0 +1,35 @@ +/** + * 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. + */ + +@media screen and (max-width: 997px) { + .displayOnlyInLargeViewport { + display: none !important; + } +} + +@media (max-width: 360px) { + .hideLogoText { + display: none; + } +} + +.navbarHideable { + transition: top 0.2s ease-in-out; +} + +.navbarHidden { + top: calc(var(--ifm-navbar-height) * -1) !important; +} + +.noWrap { + white-space: nowrap; +} + +.navbarIcon { + vertical-align: middle; + max-width: unset; +} diff --git a/website/static/img/medium.svg b/website/static/img/medium.svg new file mode 100644 index 0000000..dfb3921 --- /dev/null +++ b/website/static/img/medium.svg @@ -0,0 +1,3 @@ + + + diff --git a/website/static/img/twitter.svg b/website/static/img/twitter.svg new file mode 100644 index 0000000..893004b --- /dev/null +++ b/website/static/img/twitter.svg @@ -0,0 +1,3 @@ + + + From bc3be6ff8aa898164673e08bdd72e60ffb376b9a Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sat, 4 Apr 2020 20:07:32 -0700 Subject: [PATCH 4/6] More v2 cleanup --- website/docusaurus.config.js | 16 +++-- website/i18n/en.json | 117 ----------------------------------- 2 files changed, 11 insertions(+), 122 deletions(-) delete mode 100644 website/i18n/en.json diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 22831e4..d555bc6 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -18,13 +18,16 @@ module.exports = { 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/getting-started/quick-start', + { to: 'docs/en/getting-started/quick-start', label: 'Getting Started', position: 'left', }, - { to: 'docs/api/concepts', + { to: 'docs/en/api/concepts', label: 'API', position: 'left', }, @@ -56,10 +59,10 @@ module.exports = { }, { title: 'Docs', items: [ - { to: 'getting-started/quick-start', + { to: 'docs/en/getting-started/quick-start', label: 'Getting Started', }, - { to: 'api/concepts', + { to: 'docs/en/api/concepts', label: 'API', }, ] @@ -106,8 +109,11 @@ module.exports = { ], plugins: [ ['@docusaurus/plugin-content-docs', { - path: '../converted-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', {}], diff --git a/website/i18n/en.json b/website/i18n/en.json deleted file mode 100644 index 05f564f..0000000 --- a/website/i18n/en.json +++ /dev/null @@ -1,117 +0,0 @@ -{ - "_comment": "This file is auto-generated by write-translations.js", - "localized-strings": { - "next": "Next", - "previous": "Previous", - "tagline": "The streaming build system", - "docs": { - "api/concepts": { - "title": "API Concepts", - "sidebar_label": "Concepts" - }, - "api/dest": { - "title": "dest()", - "sidebar_label": "dest()" - }, - "api/lastrun": { - "title": "lastRun()", - "sidebar_label": "lastRun()" - }, - "api/parallel": { - "title": "parallel()", - "sidebar_label": "parallel()" - }, - "api/registry": { - "title": "registry()", - "sidebar_label": "registry()" - }, - "api/series": { - "title": "series()", - "sidebar_label": "series()" - }, - "api/src": { - "title": "src()", - "sidebar_label": "src()" - }, - "api/symlink": { - "title": "symlink()", - "sidebar_label": "symlink()" - }, - "api/task": { - "title": "task()", - "sidebar_label": "task()" - }, - "api/tree": { - "title": "tree()", - "sidebar_label": "tree()" - }, - "api/vinyl-iscustomprop": { - "title": "Vinyl.isCustomProp()", - "sidebar_label": "Vinyl.isCustomProp()" - }, - "api/vinyl-isvinyl": { - "title": "Vinyl.isVinyl()", - "sidebar_label": "Vinyl.isVinyl()" - }, - "api/vinyl": { - "title": "Vinyl", - "sidebar_label": "Vinyl" - }, - "api/watch": { - "title": "watch()", - "sidebar_label": "watch()" - }, - "documentation-missing": { - "title": "Documentation Missing" - }, - "getting-started/quick-start": { - "title": "Quick Start", - "sidebar_label": "Quick Start" - }, - "getting-started/javascript-and-gulpfiles": { - "title": "JavaScript and Gulpfiles", - "sidebar_label": "JavaScript and Gulpfiles" - }, - "getting-started/creating-tasks": { - "title": "Creating Tasks", - "sidebar_label": "Creating Tasks" - }, - "getting-started/async-completion": { - "title": "Async Completion", - "sidebar_label": "Async Completion" - }, - "getting-started/working-with-files": { - "title": "Working with Files", - "sidebar_label": "Working with Files" - }, - "getting-started/explaining-globs": { - "title": "Explaining Globs", - "sidebar_label": "Explaining Globs" - }, - "getting-started/using-plugins": { - "title": "Using Plugins", - "sidebar_label": "Using Plugins" - }, - "getting-started/watching-files": { - "title": "Watching Files", - "sidebar_label": "Watching Files" - } - }, - "links": { - "Getting Started": "Getting Started", - "API": "API", - "Plugins": "Plugins", - "Twitter": "Twitter", - "Blog": "Blog" - }, - "categories": { - "Getting Started": "Getting Started", - "API": "API" - } - }, - "pages-strings": { - "Help Translate|recruit community translators for your project": "Help Translate", - "Edit this Doc|recruitment message asking to edit the doc source": "Edit", - "Translate this Doc|recruitment message asking to translate the docs": "Translate" - } -} From 177f9782e96a5b397a5149c92afbca98c253886e Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sat, 4 Apr 2020 20:28:55 -0700 Subject: [PATCH 5/6] Reorganize the project since v2 does not require website directory --- .npmrc | 1 + ...cusaurus.config.js => docusaurus.config.js | 2 +- gulpfile.js | 61 +++--- package.json | 46 +++-- website/sidebars.json => sidebars.json | 0 {website/src => src}/css/docs.css | 0 {website/src => src}/theme/Navbar/index.js | 0 .../theme/Navbar/styles.module.css | 0 {website/static => static}/.nojekyll | 0 {website/static => static}/CNAME | 0 {website/static => static}/css/devices.css | 0 {website/static => static}/css/homepage.css | 0 {website/static => static}/img/atom.svg | 0 {website/static => static}/img/book.svg | 0 {website/static => static}/img/browser.svg | 0 {website/static => static}/img/cli.svg | 0 .../img/docs-gulp-command.png | Bin .../img/docs-gulp-tasks-command.png | Bin .../img/docs-gulp-version-command.png | Bin .../img/docs-node-version-command.png | Bin .../img/docs-npm-version-command.png | Bin .../img/docs-npx-version-command.png | Bin {website/static => static}/img/favicon.png | Bin {website/static => static}/img/guage.svg | 0 .../img/gulp-shirt-photo.jpg | Bin .../static => static}/img/gulp-white-logo.svg | 0 .../static => static}/img/gulp-white-text.svg | 0 {website/static => static}/img/gulp.jpg | Bin {website/static => static}/img/gulp.svg | 0 {website/static => static}/img/medium.svg | 0 .../static => static}/img/new-gulp-shirt.jpg | Bin .../static => static}/img/opencollective.svg | 0 {website/static => static}/img/pipe-error.png | Bin {website/static => static}/img/pump-error.png | Bin {website/static => static}/img/tidelift.png | Bin {website/static => static}/img/twitter.svg | 0 {website/static => static}/index.html | 0 {website/static => static}/js/script.js | 0 website/README.md | 193 ------------------ website/package.json | 34 --- 40 files changed, 59 insertions(+), 278 deletions(-) rename website/docusaurus.config.js => docusaurus.config.js (99%) rename website/sidebars.json => sidebars.json (100%) rename {website/src => src}/css/docs.css (100%) rename {website/src => src}/theme/Navbar/index.js (100%) rename {website/src => src}/theme/Navbar/styles.module.css (100%) rename {website/static => static}/.nojekyll (100%) rename {website/static => static}/CNAME (100%) rename {website/static => static}/css/devices.css (100%) rename {website/static => static}/css/homepage.css (100%) rename {website/static => static}/img/atom.svg (100%) rename {website/static => static}/img/book.svg (100%) rename {website/static => static}/img/browser.svg (100%) rename {website/static => static}/img/cli.svg (100%) rename {website/static => static}/img/docs-gulp-command.png (100%) rename {website/static => static}/img/docs-gulp-tasks-command.png (100%) rename {website/static => static}/img/docs-gulp-version-command.png (100%) rename {website/static => static}/img/docs-node-version-command.png (100%) rename {website/static => static}/img/docs-npm-version-command.png (100%) rename {website/static => static}/img/docs-npx-version-command.png (100%) rename {website/static => static}/img/favicon.png (100%) rename {website/static => static}/img/guage.svg (100%) rename {website/static => static}/img/gulp-shirt-photo.jpg (100%) rename {website/static => static}/img/gulp-white-logo.svg (100%) rename {website/static => static}/img/gulp-white-text.svg (100%) rename {website/static => static}/img/gulp.jpg (100%) rename {website/static => static}/img/gulp.svg (100%) rename {website/static => static}/img/medium.svg (100%) rename {website/static => static}/img/new-gulp-shirt.jpg (100%) rename {website/static => static}/img/opencollective.svg (100%) rename {website/static => static}/img/pipe-error.png (100%) rename {website/static => static}/img/pump-error.png (100%) rename {website/static => static}/img/tidelift.png (100%) rename {website/static => static}/img/twitter.svg (100%) rename {website/static => static}/index.html (100%) rename {website/static => static}/js/script.js (100%) delete mode 100644 website/README.md delete mode 100644 website/package.json diff --git a/.npmrc b/.npmrc index 43c97e7..cf86fe1 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ package-lock=false +loglevel=error diff --git a/website/docusaurus.config.js b/docusaurus.config.js similarity index 99% rename from website/docusaurus.config.js rename to docusaurus.config.js index d555bc6..8373001 100644 --- a/website/docusaurus.config.js +++ b/docusaurus.config.js @@ -109,7 +109,7 @@ module.exports = { ], plugins: [ ['@docusaurus/plugin-content-docs', { - path: '../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 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/website/src/css/docs.css b/src/css/docs.css similarity index 100% rename from website/src/css/docs.css rename to src/css/docs.css diff --git a/website/src/theme/Navbar/index.js b/src/theme/Navbar/index.js similarity index 100% rename from website/src/theme/Navbar/index.js rename to src/theme/Navbar/index.js diff --git a/website/src/theme/Navbar/styles.module.css b/src/theme/Navbar/styles.module.css similarity index 100% rename from website/src/theme/Navbar/styles.module.css rename to src/theme/Navbar/styles.module.css diff --git a/website/static/.nojekyll b/static/.nojekyll similarity index 100% rename from website/static/.nojekyll rename to static/.nojekyll diff --git a/website/static/CNAME b/static/CNAME similarity index 100% rename from website/static/CNAME rename to static/CNAME diff --git a/website/static/css/devices.css b/static/css/devices.css similarity index 100% rename from website/static/css/devices.css rename to static/css/devices.css diff --git a/website/static/css/homepage.css b/static/css/homepage.css similarity index 100% rename from website/static/css/homepage.css rename to static/css/homepage.css diff --git a/website/static/img/atom.svg b/static/img/atom.svg similarity index 100% rename from website/static/img/atom.svg rename to static/img/atom.svg diff --git a/website/static/img/book.svg b/static/img/book.svg similarity index 100% rename from website/static/img/book.svg rename to static/img/book.svg diff --git a/website/static/img/browser.svg b/static/img/browser.svg similarity index 100% rename from website/static/img/browser.svg rename to static/img/browser.svg diff --git a/website/static/img/cli.svg b/static/img/cli.svg similarity index 100% rename from website/static/img/cli.svg rename to static/img/cli.svg diff --git a/website/static/img/docs-gulp-command.png b/static/img/docs-gulp-command.png similarity index 100% rename from website/static/img/docs-gulp-command.png rename to static/img/docs-gulp-command.png diff --git a/website/static/img/docs-gulp-tasks-command.png b/static/img/docs-gulp-tasks-command.png similarity index 100% rename from website/static/img/docs-gulp-tasks-command.png rename to static/img/docs-gulp-tasks-command.png diff --git a/website/static/img/docs-gulp-version-command.png b/static/img/docs-gulp-version-command.png similarity index 100% rename from website/static/img/docs-gulp-version-command.png rename to static/img/docs-gulp-version-command.png diff --git a/website/static/img/docs-node-version-command.png b/static/img/docs-node-version-command.png similarity index 100% rename from website/static/img/docs-node-version-command.png rename to static/img/docs-node-version-command.png diff --git a/website/static/img/docs-npm-version-command.png b/static/img/docs-npm-version-command.png similarity index 100% rename from website/static/img/docs-npm-version-command.png rename to static/img/docs-npm-version-command.png diff --git a/website/static/img/docs-npx-version-command.png b/static/img/docs-npx-version-command.png similarity index 100% rename from website/static/img/docs-npx-version-command.png rename to static/img/docs-npx-version-command.png diff --git a/website/static/img/favicon.png b/static/img/favicon.png similarity index 100% rename from website/static/img/favicon.png rename to static/img/favicon.png diff --git a/website/static/img/guage.svg b/static/img/guage.svg similarity index 100% rename from website/static/img/guage.svg rename to static/img/guage.svg diff --git a/website/static/img/gulp-shirt-photo.jpg b/static/img/gulp-shirt-photo.jpg similarity index 100% rename from website/static/img/gulp-shirt-photo.jpg rename to static/img/gulp-shirt-photo.jpg diff --git a/website/static/img/gulp-white-logo.svg b/static/img/gulp-white-logo.svg similarity index 100% rename from website/static/img/gulp-white-logo.svg rename to static/img/gulp-white-logo.svg diff --git a/website/static/img/gulp-white-text.svg b/static/img/gulp-white-text.svg similarity index 100% rename from website/static/img/gulp-white-text.svg rename to static/img/gulp-white-text.svg diff --git a/website/static/img/gulp.jpg b/static/img/gulp.jpg similarity index 100% rename from website/static/img/gulp.jpg rename to static/img/gulp.jpg diff --git a/website/static/img/gulp.svg b/static/img/gulp.svg similarity index 100% rename from website/static/img/gulp.svg rename to static/img/gulp.svg diff --git a/website/static/img/medium.svg b/static/img/medium.svg similarity index 100% rename from website/static/img/medium.svg rename to static/img/medium.svg diff --git a/website/static/img/new-gulp-shirt.jpg b/static/img/new-gulp-shirt.jpg similarity index 100% rename from website/static/img/new-gulp-shirt.jpg rename to static/img/new-gulp-shirt.jpg diff --git a/website/static/img/opencollective.svg b/static/img/opencollective.svg similarity index 100% rename from website/static/img/opencollective.svg rename to static/img/opencollective.svg diff --git a/website/static/img/pipe-error.png b/static/img/pipe-error.png similarity index 100% rename from website/static/img/pipe-error.png rename to static/img/pipe-error.png diff --git a/website/static/img/pump-error.png b/static/img/pump-error.png similarity index 100% rename from website/static/img/pump-error.png rename to static/img/pump-error.png diff --git a/website/static/img/tidelift.png b/static/img/tidelift.png similarity index 100% rename from website/static/img/tidelift.png rename to static/img/tidelift.png diff --git a/website/static/img/twitter.svg b/static/img/twitter.svg similarity index 100% rename from website/static/img/twitter.svg rename to static/img/twitter.svg diff --git a/website/static/index.html b/static/index.html similarity index 100% rename from website/static/index.html rename to static/index.html diff --git a/website/static/js/script.js b/static/js/script.js similarity index 100% rename from website/static/js/script.js rename to static/js/script.js diff --git a/website/README.md b/website/README.md deleted file mode 100644 index f3da77f..0000000 --- a/website/README.md +++ /dev/null @@ -1,193 +0,0 @@ -This website was created with [Docusaurus](https://docusaurus.io/). - -# What's In This Document - -* [Get Started in 5 Minutes](#get-started-in-5-minutes) -* [Directory Structure](#directory-structure) -* [Editing Content](#editing-content) -* [Adding Content](#adding-content) -* [Full Documentation](#full-documentation) - -# Get Started in 5 Minutes - -1. Make sure all the dependencies for the website are installed: - -```sh -# Install dependencies -$ yarn -``` -2. Run your dev server: - -```sh -# Start the site -$ yarn start -``` - -## Directory Structure - -Your project file structure should look something like this - -``` -my-docusaurus/ - docs/ - doc-1.md - doc-2.md - doc-3.md - website/ - blog/ - 2016-3-11-oldest-post.md - 2017-10-24-newest-post.md - core/ - node_modules/ - pages/ - static/ - css/ - img/ - package.json - sidebar.json - siteConfig.js -``` - -# Editing Content - -## Editing an existing docs page - -Edit docs by navigating to `docs/` and editing the corresponding document: - -`docs/doc-to-be-edited.md` - -```markdown ---- -id: page-needs-edit -title: This Doc Needs To Be Edited ---- - -Edit me... -``` - -For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Editing an existing blog post - -Edit blog posts by navigating to `website/blog` and editing the corresponding post: - -`website/blog/post-to-be-edited.md` -```markdown ---- -id: post-needs-edit -title: This Blog Post Needs To Be Edited ---- - -Edit me... -``` - -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) - -# Adding Content - -## Adding a new docs page to an existing sidebar - -1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: - -```md ---- -id: newly-created-doc -title: This Doc Needs To Be Edited ---- - -My new content here.. -``` - -1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: - -```javascript -// Add newly-created-doc to the Getting Started category of docs -{ - "docs": { - "Getting Started": [ - "quick-start", - "newly-created-doc" // new doc here - ], - ... - }, - ... -} -``` - -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding a new blog post - -1. Make sure there is a header link to your blog in `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -headerLinks: [ - ... - { blog: true, label: 'Blog' }, - ... -] -``` - -2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: - -`website/blog/2018-05-21-New-Blog-Post.md` - -```markdown ---- -author: Frank Li -authorURL: https://twitter.com/foobarbaz -authorFBID: 503283835 -title: New Blog Post ---- - -Lorem Ipsum... -``` - -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) - -## Adding items to your site's top navigation bar - -1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - /* you can add docs */ - { doc: 'my-examples', label: 'Examples' }, - /* you can add custom pages */ - { page: 'help', label: 'Help' }, - /* you can add external links */ - { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, - ... - ], - ... -} -``` - -For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding custom pages - -1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: -1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - { page: 'my-new-custom-page', label: 'My New Custom Page' }, - ... - ], - ... -} -``` - -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). - -# Full Documentation - -Full documentation can be found on the [website](https://docusaurus.io/). diff --git a/website/package.json b/website/package.json deleted file mode 100644 index bc11f20..0000000 --- a/website/package.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "scripts": { - "start": "docusaurus start", - "build": "docusaurus build", - "swizzle": "docusaurus swizzle", - "deploy": "docusaurus deploy" - }, - "dependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1", - "remark-admonitions": "^1.2.1" - }, - "devDependencies": { - "@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" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } -} From 36b5cf8fadeee4825028e2c4eae377ffc3a100e4 Mon Sep 17 00:00:00 2001 From: Blaine Bublitz Date: Sat, 4 Apr 2020 20:34:55 -0700 Subject: [PATCH 6/6] Update development workflow (closes #96) --- README.md | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c248ef4..be81253 100644 --- a/README.md +++ b/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.