diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index 40654755072..e5018f68b29 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -13,10 +13,7 @@ jobs: - name: Build run: | npm install - # This will be replaced with the actual documentation builder once it's - # configured - mkdir -p docs-dist/ - cp website/index.html docs-dist/index.html + npm run build-docs-production - name: Set up SSH uses: webfactory/ssh-agent@v0.4.1 with: diff --git a/.prettierignore b/.prettierignore index dacae78b7cb..4885590378b 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,3 +6,4 @@ vendor/ package-lock.json yarn.lock package.json +docs-dist/ diff --git a/package.json b/package.json index 0bdb101bc1d..414a99d8cd8 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "ensure-correct-devtools-protocol-revision": "ts-node -s scripts/ensure-correct-devtools-protocol-package", "ensure-pinned-deps": "ts-node -s scripts/ensure-pinned-deps", "test-types-file": "ts-node -s scripts/test-ts-definition-files.ts", - "release": "node utils/remove_version_suffix.js && standard-version --commit-all" + "release": "node utils/remove_version_suffix.js && standard-version --commit-all", + "build-docs-production": "cd website && npm install && npm run build" }, "files": [ "lib/types.d.ts", diff --git a/website/.gitignore b/website/.gitignore new file mode 100644 index 00000000000..b2d6de30624 --- /dev/null +++ b/website/.gitignore @@ -0,0 +1,20 @@ +# 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* diff --git a/website/README.md b/website/README.md new file mode 100644 index 00000000000..1c9cdcb1ff6 --- /dev/null +++ b/website/README.md @@ -0,0 +1,31 @@ +# Website + +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. + +Its dependencies are purposefully kept separate from the main Puppeteer codebase's in order to avoid having all our end users install them when installing Puppeteer. In the future we may move this website into its own repository. + +## Installation + +```console +npm install +``` + +## Local Development + +```console +npm start +``` + +This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. + +## Build + +```console +npm build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + +## Deployment + +Deploys are automatically handled by the `deploy-docs.yml` workflow. diff --git a/website/babel.config.js b/website/babel.config.js new file mode 100644 index 00000000000..cea7e04a43c --- /dev/null +++ b/website/babel.config.js @@ -0,0 +1,18 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/website/docs/intro.md b/website/docs/intro.md new file mode 100644 index 00000000000..03b6b8b179d --- /dev/null +++ b/website/docs/intro.md @@ -0,0 +1,35 @@ +--- +sidebar_position: 1 +--- + +# Tutorial Intro + +Let's discover **Docusaurus in less than 5 minutes**. + +## Getting Started + +Get started by **creating a new site**. + +Or **try Docusaurus immediately** with **[new.docusaurus.io](https://new.docusaurus.io)**. + +## Generate a new site + +Generate a new Docusaurus site using the **classic template**: + +```shell +npx @docusaurus/init@latest init my-website classic +``` + +## Start your site + +Run the development server: + +```shell +cd my-website + +npx docusaurus start +``` + +Your site starts at `http://localhost:3000`. + +Open `docs/intro.md` and edit some lines: the site **reloads automatically** and display your changes. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js new file mode 100644 index 00000000000..e95a131fcf5 --- /dev/null +++ b/website/docusaurus.config.js @@ -0,0 +1,72 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +const lightCodeTheme = require('prism-react-renderer/themes/github'); +const darkCodeTheme = require('prism-react-renderer/themes/dracula'); + +/** @type {import('@docusaurus/types').DocusaurusConfig} */ +module.exports = { + title: 'Puppeteer documentation', + tagline: 'Note: this documentation is WIP. Please use https://pptr.dev.', + url: 'https://puppeteer.github.io/', + baseUrl: '/puppeteer/', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', + favicon: 'img/favicon.ico', + organizationName: 'puppeteer', // Usually your GitHub org/user name. + projectName: 'puppeteer', // Usually your repo name. + themeConfig: { + navbar: { + title: 'Puppeteer', + logo: { + alt: 'My Site Logo', + src: 'img/logo.svg', + }, + items: [ + { + type: 'doc', + docId: 'intro', + position: 'left', + label: 'Tutorial', + }, + { + href: 'https://github.com/puppeteer/puppeteer', + label: 'GitHub', + position: 'right', + }, + ], + }, + footer: { + style: 'dark', + links: [], + }, + prism: { + theme: lightCodeTheme, + darkTheme: darkCodeTheme, + }, + }, + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + sidebarPath: require.resolve('./sidebars.js'), + // Please change this to your repo. + editUrl: 'https://github.com/facebook/puppeteer/edit/main/website/', + }, + }, + ], + ], +}; diff --git a/website/index.html b/website/index.html deleted file mode 100644 index bbfe0f83e9d..00000000000 --- a/website/index.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - Puppeteer Documentation - - -

Hello world

- - diff --git a/website/package.json b/website/package.json new file mode 100644 index 00000000000..72f6d550d71 --- /dev/null +++ b/website/package.json @@ -0,0 +1,39 @@ +{ + "name": "website", + "version": "0.0.0", + "private": true, + "scripts": { + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build --out-dir=../docs-dist/", + "swizzle": "docusaurus swizzle", + "clear": "docusaurus clear", + "serve": "docusaurus serve --out-dir=../docs-dist/", + "write-translations": "docusaurus write-translations", + "write-heading-ids": "docusaurus write-heading-ids" + }, + "dependencies": { + "@docusaurus/core": "2.0.0-beta.3", + "@docusaurus/preset-classic": "2.0.0-beta.3", + "@mdx-js/react": "^1.6.21", + "@svgr/webpack": "^5.5.0", + "clsx": "^1.1.1", + "file-loader": "^6.2.0", + "prism-react-renderer": "^1.2.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "url-loader": "^4.1.1" + }, + "browserslist": { + "production": [ + ">0.5%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/website/sidebars.js b/website/sidebars.js new file mode 100644 index 00000000000..b934a5ac9c6 --- /dev/null +++ b/website/sidebars.js @@ -0,0 +1,41 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +module.exports = { + // By default, Docusaurus generates a sidebar from the docs folder structure + tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }], + + // But you can create a sidebar manually + /* + tutorialSidebar: [ + { + type: 'category', + label: 'Tutorial', + items: ['hello'], + }, + ], + */ +}; diff --git a/website/src/css/custom.css b/website/src/css/custom.css new file mode 100644 index 00000000000..62b33e5180d --- /dev/null +++ b/website/src/css/custom.css @@ -0,0 +1,45 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* stylelint-disable docusaurus/copyright-header */ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +/* You can override the default Infima variables here. */ +:root { + --ifm-color-primary: #25c2a0; + --ifm-color-primary-dark: rgb(33, 175, 144); + --ifm-color-primary-darker: rgb(31, 165, 136); + --ifm-color-primary-darkest: rgb(26, 136, 112); + --ifm-color-primary-light: rgb(70, 203, 174); + --ifm-color-primary-lighter: rgb(102, 212, 189); + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-code-font-size: 95%; +} + +.docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); +} + +html[data-theme='dark'] .docusaurus-highlight-code-line { + background-color: rgba(0, 0, 0, 0.3); +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js new file mode 100644 index 00000000000..305c6b8f1d3 --- /dev/null +++ b/website/src/pages/index.js @@ -0,0 +1,44 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import clsx from 'clsx'; +import Layout from '@theme/Layout'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import styles from './index.module.css'; + +function HomepageHeader() { + const { siteConfig } = useDocusaurusContext(); + return ( +
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+
+ ); +} + +export default function Home() { + const { siteConfig } = useDocusaurusContext(); + return ( + + + + ); +} diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css new file mode 100644 index 00000000000..0f5c6456555 --- /dev/null +++ b/website/src/pages/index.module.css @@ -0,0 +1,27 @@ +/** + * Copyright 2021 Google Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} diff --git a/website/static/.nojekyll b/website/static/.nojekyll new file mode 100644 index 00000000000..e69de29bb2d diff --git a/website/static/img/docusaurus.png b/website/static/img/docusaurus.png new file mode 100644 index 00000000000..f458149e3c8 Binary files /dev/null and b/website/static/img/docusaurus.png differ diff --git a/website/static/img/favicon.ico b/website/static/img/favicon.ico new file mode 100644 index 00000000000..c01d54bcd39 Binary files /dev/null and b/website/static/img/favicon.ico differ diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg new file mode 100644 index 00000000000..9db6d0d066e --- /dev/null +++ b/website/static/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/static/img/tutorial/docsVersionDropdown.png b/website/static/img/tutorial/docsVersionDropdown.png new file mode 100644 index 00000000000..ff1cbe68893 Binary files /dev/null and b/website/static/img/tutorial/docsVersionDropdown.png differ diff --git a/website/static/img/tutorial/localeDropdown.png b/website/static/img/tutorial/localeDropdown.png new file mode 100644 index 00000000000..d7163f96752 Binary files /dev/null and b/website/static/img/tutorial/localeDropdown.png differ diff --git a/website/static/img/undraw_docusaurus_mountain.svg b/website/static/img/undraw_docusaurus_mountain.svg new file mode 100644 index 00000000000..431cef2f7fe --- /dev/null +++ b/website/static/img/undraw_docusaurus_mountain.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/undraw_docusaurus_react.svg b/website/static/img/undraw_docusaurus_react.svg new file mode 100644 index 00000000000..e4170504333 --- /dev/null +++ b/website/static/img/undraw_docusaurus_react.svg @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/undraw_docusaurus_tree.svg b/website/static/img/undraw_docusaurus_tree.svg new file mode 100644 index 00000000000..a05cc03dda9 --- /dev/null +++ b/website/static/img/undraw_docusaurus_tree.svg @@ -0,0 +1 @@ +docu_tree \ No newline at end of file