From 230fb013f3858ece46f032db62e7af70d9910ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 3 Jun 2020 20:09:17 +0200 Subject: [PATCH] upgrade to docusaurus-v2 (#233) Co-authored-by: swyx --- .gitignore | 10 +- docs/advanced/guides/extract-props.md | 2 +- docs/advanced/guides/handling-exceptions.md | 2 +- docs/advanced/guides/props-must-pass-both.md | 2 +- .../guides/props-one-other-not-both.md | 2 +- .../guides/props-optionally-pass-one.md | 2 +- docs/advanced/guides/third-party-libs.md | 2 +- docs/advanced/misc-concerns.md | 2 +- docs/advanced/patterns.md | 2 +- docs/advanced/types-react-ap.md | 4 +- docs/advanced/utility-types.md | 2 +- .../basic/getting-started/class-components.md | 2 +- .../react-prop-type-examples.md | 3 +- docs/basic/troubleshooting/non-ts-files.md | 2 +- docs/basic/troubleshooting/operators.md | 2 +- docs/basic/troubleshooting/ts-config.md | 2 +- docs/basic/troubleshooting/types.md | 2 +- docs/basic/troubleshooting/utilities.md | 2 +- docs/hoc/excluding-props.md | 2 +- docs/hoc/full-example.md | 2 +- docs/hoc/react-hoc-docs.md | 2 +- netlify.toml | 4 +- website/README.md | 191 +- website/core/Footer.js | 99 - website/docusaurus.config.js | 158 + website/i18n/en.json | 220 - website/package.json | 31 +- website/pages/en/help.js | 54 - website/pages/en/index.js | 201 - website/pages/en/users.js | 48 - website/sidebars.json | 20 +- website/siteConfig.js | 114 - website/src/css/custom.css | 28 + website/src/pages/help.js | 60 + website/src/pages/index.js | 34 + website/src/pages/users.js | 50 + website/static/css/custom.css | 49 - website/yarn.lock | 7594 ++++++++++++----- 38 files changed, 5897 insertions(+), 3111 deletions(-) delete mode 100644 website/core/Footer.js create mode 100644 website/docusaurus.config.js delete mode 100644 website/i18n/en.json delete mode 100644 website/pages/en/help.js delete mode 100644 website/pages/en/index.js delete mode 100644 website/pages/en/users.js delete mode 100644 website/siteConfig.js create mode 100644 website/src/css/custom.css create mode 100644 website/src/pages/help.js create mode 100644 website/src/pages/index.js create mode 100644 website/src/pages/users.js delete mode 100644 website/static/css/custom.css diff --git a/.gitignore b/.gitignore index 71c7127f..cb109043 100644 --- a/.gitignore +++ b/.gitignore @@ -107,6 +107,9 @@ dist # Stores VSCode versions used for testing VSCode extensions .vscode-test +# Idea / Jetbrains IDE +.idea + # yarn v2 .yarn/cache @@ -116,6 +119,11 @@ dist # Miscellaneous .history + +# Docusaurus files website/build +website/.docusaurus +website/.cache-loader + # Local Netlify folder -.netlify \ No newline at end of file +.netlify diff --git a/docs/advanced/guides/extract-props.md b/docs/advanced/guides/extract-props.md index 722f65de..d7ef6673 100644 --- a/docs/advanced/guides/extract-props.md +++ b/docs/advanced/guides/extract-props.md @@ -1,6 +1,6 @@ --- id: extract_props -title: Props: Extracting Prop Types of a Component +title: "Props: Extracting Prop Types of a Component" --- _(Contributed by [@ferdaber](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/63))_ diff --git a/docs/advanced/guides/handling-exceptions.md b/docs/advanced/guides/handling-exceptions.md index e84a9445..03813912 100644 --- a/docs/advanced/guides/handling-exceptions.md +++ b/docs/advanced/guides/handling-exceptions.md @@ -1,5 +1,5 @@ --- -id: handling_exception +id: handling_exceptions title: Handling Exceptions --- diff --git a/docs/advanced/guides/props-must-pass-both.md b/docs/advanced/guides/props-must-pass-both.md index 42ec17dd..42f09037 100644 --- a/docs/advanced/guides/props-must-pass-both.md +++ b/docs/advanced/guides/props-must-pass-both.md @@ -1,6 +1,6 @@ --- id: props_one_other_not_both -title: Props: Must Pass Both +title: "Props: Must Pass Both" --- ```tsx diff --git a/docs/advanced/guides/props-one-other-not-both.md b/docs/advanced/guides/props-one-other-not-both.md index 3895b95d..47fc823f 100644 --- a/docs/advanced/guides/props-one-other-not-both.md +++ b/docs/advanced/guides/props-one-other-not-both.md @@ -1,6 +1,6 @@ --- id: props_one_other_not_both -title: Props: One or the Other but not Both +title: "Props: One or the Other but not Both" --- Use the `in` keyword, function overloading, and union types to make components that take either one or another sets of props, but not both: diff --git a/docs/advanced/guides/props-optionally-pass-one.md b/docs/advanced/guides/props-optionally-pass-one.md index 7d43fbe3..86df3a32 100644 --- a/docs/advanced/guides/props-optionally-pass-one.md +++ b/docs/advanced/guides/props-optionally-pass-one.md @@ -1,6 +1,6 @@ --- id: props_optionally_pass_one -title: Props: Can Optionally Pass One Only If the Other Is Passed +title: "Props: Can Optionally Pass One Only If the Other Is Passed" --- Say you want a Text component that gets truncated if `truncate` prop is passed but expands to show the full text when `expanded` prop is passed (e.g. when the user clicks the text). diff --git a/docs/advanced/guides/third-party-libs.md b/docs/advanced/guides/third-party-libs.md index 261fe94a..f69d6958 100644 --- a/docs/advanced/guides/third-party-libs.md +++ b/docs/advanced/guides/third-party-libs.md @@ -1,6 +1,6 @@ --- id: third_party_libs -title: Props: Third Party Libraries +title: "Props: Third Party Libraries" --- Sometimes DefinitelyTyped can get it wrong, or isn't quite addressing your use case. You can declare your own file with the same interface name. TypeScript will merge interfaces with the same name. diff --git a/docs/advanced/misc-concerns.md b/docs/advanced/misc-concerns.md index 59ca3cf9..3f775611 100644 --- a/docs/advanced/misc-concerns.md +++ b/docs/advanced/misc-concerns.md @@ -1,6 +1,6 @@ --- id: misc_concerns -title: Section 3: Misc. Concerns +title: "Section 3: Misc. Concerns" sidebar_label: Misc. Concerns --- diff --git a/docs/advanced/patterns.md b/docs/advanced/patterns.md index 2b4bf295..8f734b02 100644 --- a/docs/advanced/patterns.md +++ b/docs/advanced/patterns.md @@ -1,6 +1,6 @@ --- id: patterns -title: Section 2: Useful Patterns by TypeScript Version +title: "Section 2: Useful Patterns by TypeScript Version" sidebar_label: Useful Patterns by TypeScript Version --- diff --git a/docs/advanced/types-react-ap.md b/docs/advanced/types-react-ap.md index ea4ac602..41af4d97 100644 --- a/docs/advanced/types-react-ap.md +++ b/docs/advanced/types-react-ap.md @@ -1,7 +1,7 @@ --- id: types_react_api -title: Section 4: @types/react and @types/react-dom APIs -sidebar_label: @types/react and @types/react-dom APIs +title: "Section 4: @types/react and @types/react-dom APIs" +sidebar_label: "@types/react and @types/react-dom APIs" --- The `@types` typings export both "public" types meant for your use as well as "private" types that are for internal use. diff --git a/docs/advanced/utility-types.md b/docs/advanced/utility-types.md index d67a2c1b..131eff71 100644 --- a/docs/advanced/utility-types.md +++ b/docs/advanced/utility-types.md @@ -1,6 +1,6 @@ --- id: utility_types -title: Section 0: Utility Types +title: "Section 0: Utility Types" sidebar_label: Utility Types --- diff --git a/docs/basic/getting-started/class-components.md b/docs/basic/getting-started/class-components.md index a06f55b6..1ba09abb 100644 --- a/docs/basic/getting-started/class-components.md +++ b/docs/basic/getting-started/class-components.md @@ -33,7 +33,7 @@ class App extends React.Component { Don't forget that you can export/import/extend these types/interfaces for reuse.
-Why annotate `state` twice? +Why annotate state twice? It isn't strictly necessary to annotate the `state` class property, but it allows better type inference when accessing `this.state` and also initializing the state. diff --git a/docs/basic/getting-started/react-prop-type-examples.md b/docs/basic/getting-started/react-prop-type-examples.md index b7b4c13e..46470495 100644 --- a/docs/basic/getting-started/react-prop-type-examples.md +++ b/docs/basic/getting-started/react-prop-type-examples.md @@ -24,7 +24,8 @@ Quote [@ferdaber](https://github.com/typescript-cheatsheets/react-typescript-che - `JSX.Element` -> Return value of `React.createElement` - `React.ReactNode` -> Return value of a component -
+ + [More discussion: Where ReactNode does not overlap with JSX.Element](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/129) diff --git a/docs/basic/troubleshooting/non-ts-files.md b/docs/basic/troubleshooting/non-ts-files.md index 126bfa96..d6289f09 100644 --- a/docs/basic/troubleshooting/non-ts-files.md +++ b/docs/basic/troubleshooting/non-ts-files.md @@ -1,6 +1,6 @@ --- id: non_ts_files -title: Troubleshooting Handbook: Images and other non-TS/TSX files +title: "Troubleshooting Handbook: Images and other non-TS/TSX files" sidebar_label: Images and other non-TS/TSX files --- diff --git a/docs/basic/troubleshooting/operators.md b/docs/basic/troubleshooting/operators.md index 0c034da7..e5839290 100644 --- a/docs/basic/troubleshooting/operators.md +++ b/docs/basic/troubleshooting/operators.md @@ -1,6 +1,6 @@ --- id: operators -title: Troubleshooting Handbook: Operators +title: "Troubleshooting Handbook: Operators" sidebar_label: Operators --- diff --git a/docs/basic/troubleshooting/ts-config.md b/docs/basic/troubleshooting/ts-config.md index c4ba0ceb..dc25e4c3 100644 --- a/docs/basic/troubleshooting/ts-config.md +++ b/docs/basic/troubleshooting/ts-config.md @@ -1,6 +1,6 @@ --- id: tsconfig -title: Troubleshooting Handbook: tsconfig.json +title: "Troubleshooting Handbook: tsconfig.json" sidebar_label: tsconfig.json --- diff --git a/docs/basic/troubleshooting/types.md b/docs/basic/troubleshooting/types.md index 7add276a..e3c7cdfe 100644 --- a/docs/basic/troubleshooting/types.md +++ b/docs/basic/troubleshooting/types.md @@ -1,6 +1,6 @@ --- id: types -title: Troubleshooting Handbook: Types +title: "Troubleshooting Handbook: Types" sidebar_label: Types --- diff --git a/docs/basic/troubleshooting/utilities.md b/docs/basic/troubleshooting/utilities.md index 8c854402..68758633 100644 --- a/docs/basic/troubleshooting/utilities.md +++ b/docs/basic/troubleshooting/utilities.md @@ -1,6 +1,6 @@ --- id: utilities -title: Troubleshooting Handbook: Utilities +title: "Troubleshooting Handbook: Utilities" sidebar_label: Utilities --- diff --git a/docs/hoc/excluding-props.md b/docs/hoc/excluding-props.md index a56d4b22..f1aa4b52 100644 --- a/docs/hoc/excluding-props.md +++ b/docs/hoc/excluding-props.md @@ -1,7 +1,7 @@ --- id: excluding_props sidebar_label: Excluding Props -title: Section 2: Excluding Props +title: "Section 2: Excluding Props" --- This is covered in passing in Section 1 but we focus on it here as it is such a common issue. HOCs often inject props to premade components. The problem we want to solve is having the HOC-wrapped-component exposing a type that reflects the reduced surface area of props - without manually retyping the HOC every time. This involves some generics, fortunately with some helper utilities. diff --git a/docs/hoc/full-example.md b/docs/hoc/full-example.md index 683f2029..5a6ae49c 100644 --- a/docs/hoc/full-example.md +++ b/docs/hoc/full-example.md @@ -1,7 +1,7 @@ --- id: full_example sidebar_label: Full HOC Example -title: Section 0: Full HOC Example +title: "Section 0: Full HOC Example" --- > This is an HOC example for you to copy and paste. If you certain pieces don't make sense for you, head to [Section 1](#section-1-react-hoc-docs-in-typescript) to get a detailed walkthrough via a complete translation of the React docs in TypeScript. diff --git a/docs/hoc/react-hoc-docs.md b/docs/hoc/react-hoc-docs.md index 189807a4..204e7854 100644 --- a/docs/hoc/react-hoc-docs.md +++ b/docs/hoc/react-hoc-docs.md @@ -1,7 +1,7 @@ --- id: react_hoc_docs sidebar_label: React HOC docs in TypeScript -title: Section 1: React HOC docs in TypeScript +title: "Section 1: React HOC docs in TypeScript" --- In this first section we refer closely to [the React docs on HOCs](https://reactjs.org/docs/higher-order-components.html) and offer direct TypeScript parallels. diff --git a/netlify.toml b/netlify.toml index 1bb619fb..88c1f930 100644 --- a/netlify.toml +++ b/netlify.toml @@ -6,10 +6,10 @@ # Directory (relative to root of your repo) that contains the deploy-ready # HTML files and assets generated by the build. If a base directory has # been specified, include it in the publish directory path. - publish = "build/react-typescript-cheatsheet" + publish = "build" # Default build command. command = "yarn build" # Directory with the serverless Lambda functions to deploy to AWS. - # functions = "project/functions/" \ No newline at end of file + # functions = "project/functions/" diff --git a/website/README.md b/website/README.md index 6477a55a..ee0ccc9d 100644 --- a/website/README.md +++ b/website/README.md @@ -1,198 +1,33 @@ -This website was created with [Docusaurus](https://docusaurus.io/). +# Website -# What's In This Document +This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. -- [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) +### Installation -# 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 - sidebars.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... +$ yarn ``` -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 ---- +### Local Development -My new content here.. ``` - -1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`: - -```javascript -// Add newly-created-doc to the Getting Started category of docs -{ - "docs": { - "Getting Started": [ - "quick-start", - "newly-created-doc" // new doc here - ], - ... - }, - ... -} +$ yarn start ``` -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) +This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. -## Adding a new blog post +### Build -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... +$ yarn build ``` -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) +This command generates static content into the `build` directory and can be served using any static contents hosting service. -## Adding items to your site's top navigation bar +### Deployment -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' }, - ... - ], - ... -} +$ GIT_USER= USE_SSH=true yarn deploy ``` -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/). +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/website/core/Footer.js b/website/core/Footer.js deleted file mode 100644 index 4c4f38b1..00000000 --- a/website/core/Footer.js +++ /dev/null @@ -1,99 +0,0 @@ -const React = require("react"); - -class Footer extends React.Component { - docUrl(doc, language) { - const baseUrl = this.props.config.baseUrl; - const docsUrl = this.props.config.docsUrl; - const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`; - const langPart = `${language ? `${language}/` : ""}`; - return `${baseUrl}${docsPart}${langPart}${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 00000000..5a17351c --- /dev/null +++ b/website/docusaurus.config.js @@ -0,0 +1,158 @@ +// List of projects/orgs using your project for the users page. +const users = [ + { + caption: "Docusaurus", + image: "https://docusaurus.io/img/docusaurus.svg", + infoLink: "https://docusaurus.io/", + pinned: true, + }, +]; + +const setupDoc = "docs/basic/setup"; + +module.exports = { + favicon: "img/icon.png", + title: "React TypeScript Cheatsheets", // Title for your website. + tagline: + "Cheatsheets for experienced React developers getting started with TypeScript", + url: "https://react-typescript-cheatsheet.netlify.app/", // Your website URL + baseUrl: "/", + projectName: "react-typescript-cheatsheet", + organizationName: "typescript-cheatsheets", + + presets: [ + [ + "@docusaurus/preset-classic", + { + theme: { + customCss: require.resolve("./src/css/custom.css"), + }, + docs: { + // Docs folder path relative to website dir. + path: "../docs", + // Sidebars file relative to website dir. + sidebarPath: require.resolve("./sidebars.json"), + }, + // ... + }, + ], + ], + + themeConfig: { + defaultDarkMode: true, + + image: + "https://user-images.githubusercontent.com/6764957/53868378-2b51fc80-3fb3-11e9-9cee-0277efe8a927.png", + + // Equivalent to `docsSideNavCollapsible`. + // sidebarCollapsible: false, + + prism: { + defaultLanguage: "typescript", + }, + + navbar: { + title: "React TypeScript Cheatsheet", + logo: { + alt: "Logo", + src: "img/icon.png", + }, + links: [ + { + to: setupDoc, + label: "Docs", + position: "right", + }, + { + to: "help", + label: "Help", + position: "right", + }, + // {to: 'blog', label: 'Blog', position: 'right'}, + ], + }, + + footer: { + style: "dark", + logo: { + alt: "TypeScript Cheatsheets Logo", + src: "img/icon.png", + maxWidth: 128, + style: { maxWidth: 128, maxHeight: 128 }, + }, + copyright: `Copyright © ${new Date().getFullYear()} TypeScript Cheatsheets`, + links: [ + { + title: "Docs", + items: [ + { + label: "Introduction", + to: setupDoc, + }, + { + label: "High Order Component (HOC)", + to: "docs/hoc/intro", + }, + { + label: "Advanced Guides", + to: "docs/advanced/intro", + }, + { + label: "Migrating", + to: "docs/migration/intro", + }, + ], + }, + { + title: "Community", + items: [ + { + label: "Stack Overflow", + href: "https://stackoverflow.com/questions/tagged/typescript", + }, + { + label: "User Showcase", + to: "users", + }, + { + label: "Help", + to: "help", + }, + ], + }, + { + title: "More", + items: [ + { + label: "GitHub", + href: + "https://github.com/typescript-cheatsheets/react-typescript-cheatsheet", + }, + { + html: + 'GitHub stars', + }, + ], + }, + ], + }, + + algolia: { + apiKey: "e1c87cdc9c52f8ccf84ceb7f9e18bcd3", + indexName: "react-typescript-cheatsheet", + // appId: "", + algoliaOptions: { + //... }, + }, + }, + }, + + customFields: { + firstDoc: setupDoc, + + // TODO useless user showcase page ? + users, + addUserUrl: + "https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/website/docusaurus.config.js", + }, +}; diff --git a/website/i18n/en.json b/website/i18n/en.json deleted file mode 100644 index 4f09aa7a..00000000 --- a/website/i18n/en.json +++ /dev/null @@ -1,220 +0,0 @@ -{ - "_comment": "This file is auto-generated by write-translations.js", - "localized-strings": { - "next": "Next", - "previous": "Previous", - "tagline": "Cheatsheets for experienced React developers getting started with TypeScript", - "docs": { - "advanced/guides/conditionally_rendering": { - "title": "Conditionally Rendering Components" - }, - "advanced/guides/extract_props": { - "title": "Props: Extracting Prop Types of a Component" - }, - "advanced/guides/generic_components": { - "title": "Generic Components" - }, - "advanced/guides/handling_exception": { - "title": "Handling Exceptions" - }, - "advanced/guides/hocs": { - "title": "Higher Order Components (HOCs)" - }, - "advanced/guides/omit_attr": { - "title": "Omit attribute from a type" - }, - "advanced/guides/polymorphic_components": { - "title": "Polymorphic Components" - }, - "advanced/guides/props_one_other_not_both": { - "title": "Props: One or the Other but not Both" - }, - "advanced/guides/props_optionally_pass_one": { - "title": "Props: Can Optionally Pass One Only If the Other Is Passed" - }, - "advanced/guides/render_props": { - "title": "Render Props" - }, - "advanced/guides/third_party_libs": { - "title": "Props: Third Party Libraries" - }, - "advanced/guides/type_component_diff_props": { - "title": "Typing a Component that Accepts Different Props" - }, - "advanced/guides/type_zoo": { - "title": "Type Zoo" - }, - "advanced/intro": { - "title": "Advanced Cheatsheet", - "sidebar_label": "Intro" - }, - "advanced/misc_concerns": { - "title": "Section 3: Misc. Concerns", - "sidebar_label": "Misc. Concerns" - }, - "advanced/patterns": { - "title": "Section 2: Useful Patterns by TypeScript Version", - "sidebar_label": "Useful Patterns by TypeScript Version" - }, - "advanced/types_react_api": { - "title": "Section 4: @types/react and @types/react-dom APIs", - "sidebar_label": "@types/react and @types/react-dom APIs" - }, - "advanced/utility_types": { - "title": "Section 0: Utility Types", - "sidebar_label": "Utility Types" - }, - "basic/editor_integration": { - "title": "Editor Tooling and Integration" - }, - "basic/examples": { - "title": "Example App", - "sidebar_label": "Examples" - }, - "basic/getting-started/basic_type_example": { - "title": "Basic Prop Types Examples" - }, - "basic/getting-started/class_components": { - "title": "Class Components" - }, - "basic/getting-started/concurrent": { - "title": "Concurrent React/React Suspense" - }, - "basic/getting-started/context": { - "title": "Context" - }, - "basic/getting-started/default_props": { - "title": "Typing defaultProps" - }, - "basic/getting-started/error_boundaries": { - "title": "Error Boundaries" - }, - "basic/getting-started/forms_and_events": { - "title": "Forms and Events" - }, - "basic/getting-started/forward_and_create_ref": { - "title": "forwardRef/createRef" - }, - "basic/getting-started/function_components": { - "title": "Function Components" - }, - "basic/getting-started/get_derived_props_from_state": { - "title": "getDerivedStateFromProps" - }, - "basic/getting-started/hooks": { - "title": "Hooks" - }, - "basic/getting-started/portals": { - "title": "Portals" - }, - "basic/getting-started/react_prop_type_example": { - "title": "Useful React Prop Type Examples" - }, - "basic/getting-started/types_or_interfaces": { - "title": "Types or Interfaces?" - }, - "basic/linting": { - "title": "Linting" - }, - "basic/recommended/other_resources": { - "title": "Other React + TypeScript resources", - "sidebar_label": "Other resources" - }, - "basic/recommended/resources": { - "title": "Recommended React + TypeScript codebases to learn from", - "sidebar_label": "Codebases to learn from" - }, - "basic/recommended/talks": { - "title": "Recommended React + TypeScript talks", - "sidebar_label": "Talks" - }, - "basic/setup": { - "title": "Setup" - }, - "basic/troubleshooting/learn_ts": { - "title": "Getting Started", - "sidebar_label": "Time to Really Learn TypeScript" - }, - "basic/troubleshooting/non_ts_files": { - "title": "Troubleshooting Handbook: Images and other non-TS/TSX files", - "sidebar_label": "Images and other non-TS/TSX files" - }, - "basic/troubleshooting/official_typings_bugs": { - "title": "Getting Started", - "sidebar_label": "Bugs in official typings" - }, - "basic/troubleshooting/operators": { - "title": "Troubleshooting Handbook: Operators", - "sidebar_label": "Operators" - }, - "basic/troubleshooting/tsconfig": { - "title": "Troubleshooting Handbook: tsconfig.json", - "sidebar_label": "tsconfig.json" - }, - "basic/troubleshooting/types": { - "title": "Troubleshooting Handbook: Types", - "sidebar_label": "Types" - }, - "basic/troubleshooting/utilities": { - "title": "Troubleshooting Handbook: Utilities", - "sidebar_label": "Utilities" - }, - "hoc/excluding_props": { - "title": "Section 2: Excluding Props", - "sidebar_label": "Excluding Props" - }, - "hoc/full_example": { - "title": "Section 0: Full HOC Example", - "sidebar_label": "Full HOC Example" - }, - "hoc/intro": { - "title": "HOC Cheatsheet", - "sidebar_label": "Intro" - }, - "hoc/react_hoc_docs": { - "title": "Section 1: React HOC docs in TypeScript", - "sidebar_label": "React HOC docs in TypeScript" - }, - "migration/academic_studies": { - "title": "Academic Studies of Migration" - }, - "migration/from_flow": { - "title": "From Flow" - }, - "migration/from_js": { - "title": "From JS" - }, - "migration/general_conversion_approaches": { - "title": "General Conversion approaches" - }, - "migration/intro": { - "title": "Migrating (to TypeScript) Cheatsheet", - "sidebar_label": "Intro" - }, - "migration/js_docs": { - "title": "JSDoc" - }, - "migration/links": { - "title": "Links" - }, - "migration/results": { - "title": "Results" - } - }, - "links": { - "Docs": "Docs", - "Help": "Help" - }, - "categories": { - "Basic": "Basic", - "HOC": "HOC", - "Advanced": "Advanced", - "Migration": "Migration" - } - }, - "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" - } -} diff --git a/website/package.json b/website/package.json index 30c4ca06..729529e2 100644 --- a/website/package.json +++ b/website/package.json @@ -1,14 +1,27 @@ { "scripts": { - "examples": "docusaurus-examples", - "start": "docusaurus-start", - "build": "docusaurus-build", - "deploy": "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" }, - "devDependencies": { - "docusaurus": "^1.14.4" + "dependencies": { + "@docusaurus/core": "^2.0.0-alpha.56", + "@docusaurus/preset-classic": "^2.0.0-alpha.56", + "classnames": "^2.2.6", + "react": "^16.13.1", + "react-dom": "^16.13.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/pages/en/help.js b/website/pages/en/help.js deleted file mode 100644 index 98c64615..00000000 --- a/website/pages/en/help.js +++ /dev/null @@ -1,54 +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; - -function Help(props) { - const { config: siteConfig, language = "" } = props; - const { baseUrl, docsUrl } = siteConfig; - const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`; - const langPart = `${language ? `${language}/` : ""}`; - const docUrl = (doc) => `${baseUrl}${docsPart}${langPart}${doc}`; - - const supportLinks = [ - { - content: `Learn more using the [documentation on this site.](${docUrl( - "doc1.html" - )})`, - 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/pages/en/index.js b/website/pages/en/index.js deleted file mode 100644 index b3043561..00000000 --- a/website/pages/en/index.js +++ /dev/null @@ -1,201 +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 MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ -const Container = CompLibrary.Container; -const GridBlock = CompLibrary.GridBlock; - -class HomeSplash extends React.Component { - render() { - const { siteConfig, language = "" } = this.props; - const { baseUrl, docsUrl } = siteConfig; - const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`; - const langPart = `${language ? `${language}/` : ""}`; - const docUrl = (doc) => `${baseUrl}${docsPart}${langPart}${doc}`; - - const SplashContainer = (props) => ( -
-
-
{props.children}
-
-
- ); - - // const Logo = (props) => ( - //
- // Project Logo - //
- // ); - - const ProjectTitle = (props) => ( -

- {props.title} - {props.tagline} -

- ); - - const PromoSection = (props) => ( -
-
-
{props.children}
-
-
- ); - - const Button = (props) => ( -
- - {props.children} - -
- ); - - return ( - - {/* */} -
- - - - -
- - ); - } -} - -class Index extends React.Component { - render() { - const { config: siteConfig, language = "" } = this.props; - const { baseUrl } = siteConfig; - - const Block = (props) => ( - - - - ); - - const FeatureCallout = () => ( -
-

Feature Callout

- These are features of this project -
- ); - - const TryOut = () => ( - - {[ - { - content: - "To make your landing page more attractive, use illustrations! Check out " + - "[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. " + - "The illustrations you see on this page are from unDraw.", - image: `${baseUrl}img/undraw_code_review.svg`, - imageAlign: "left", - title: "Wonderful SVG Illustrations", - }, - ]} - - ); - - const Description = () => ( - - {[ - { - content: - "This is another description of how this project is useful", - image: `${baseUrl}img/undraw_note_list.svg`, - imageAlign: "right", - title: "Description", - }, - ]} - - ); - - const LearnHow = () => ( - - {[ - { - content: - "Each new Docusaurus project has **randomly-generated** theme colors.", - image: `${baseUrl}img/undraw_youtube_tutorial.svg`, - imageAlign: "right", - title: "Randomly Generated Theme Colors", - }, - ]} - - ); - - const Features = () => ( - - {[ - { - content: "This is the content of my feature", - image: `${baseUrl}img/undraw_react.svg`, - imageAlign: "top", - title: "Feature One", - }, - { - content: "The content of my second feature", - image: `${baseUrl}img/undraw_operating_system.svg`, - imageAlign: "top", - title: "Feature Two", - }, - ]} - - ); - - const Showcase = () => { - if ((siteConfig.users || []).length === 0) { - return null; - } - - const showcase = siteConfig.users - .filter((user) => user.pinned) - .map((user) => ( - - {user.caption} - - )); - - const pageUrl = (page) => - baseUrl + (language ? `${language}/` : "") + page; - - return ( -
-

Who is Using This?

-

This project is used by all these people

-
{showcase}
- -
- ); - }; - - return ; - } -} - -module.exports = Index; diff --git a/website/pages/en/users.js b/website/pages/en/users.js deleted file mode 100644 index 9147c97d..00000000 --- a/website/pages/en/users.js +++ /dev/null @@ -1,48 +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; - -class Users extends React.Component { - render() { - const { config: siteConfig } = this.props; - if ((siteConfig.users || []).length === 0) { - return null; - } - - const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`; - const showcase = siteConfig.users.map((user) => ( - - {user.caption} - - )); - - return ( -
- -
-
-

Who is Using This?

-

This project is used by many folks

-
-
{showcase}
-

Are you using this project?

- - Add your company - -
- -
- ); - } -} - -module.exports = Users; diff --git a/website/sidebars.json b/website/sidebars.json index 02364b72..33d2e7e2 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -3,9 +3,9 @@ "Basic": [ "basic/setup", { - "type": "subcategory", + "type": "category", "label": "Getting Started", - "ids": [ + "items": [ "basic/getting-started/function_components", "basic/getting-started/hooks", "basic/getting-started/class_components", @@ -23,21 +23,21 @@ ] }, { - "type": "subcategory", + "type": "category", "label": "Troubleshooting Handbook", - "ids": [ + "items": [ "basic/troubleshooting/types", "basic/troubleshooting/operators", "basic/troubleshooting/utilities", "basic/troubleshooting/non_ts_files", "basic/troubleshooting/tsconfig", - "basic/troubleshooting/oficial_typings_bug" + "basic/troubleshooting/official_typings_bugs" ] }, { - "type": "subcategory", + "type": "category", "label": "Recommended React + TypeScript", - "ids": [ + "items": [ "basic/recommended/resources", "basic/recommended/talks", "basic/recommended/other_resources" @@ -57,9 +57,9 @@ "advanced/intro", "advanced/utility_types", { - "type": "subcategory", + "type": "category", "label": "Guides", - "ids": [ + "items": [ "advanced/guides/render_props", "advanced/guides/hocs", "advanced/guides/conditionally_rendering", @@ -71,7 +71,7 @@ "advanced/guides/omit_attr", "advanced/guides/type_zoo", "advanced/guides/extract_props", - "advanced/guides/handling-exceptions", + "advanced/guides/handling_exceptions", "advanced/guides/third_party_libs" ] }, diff --git a/website/siteConfig.js b/website/siteConfig.js deleted file mode 100644 index 8cd1cf14..00000000 --- a/website/siteConfig.js +++ /dev/null @@ -1,114 +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. - */ - -// See https://docusaurus.io/docs/site-config for all the possible -// site configuration options. - -// List of projects/orgs using your project for the users page. -const users = [ - { - caption: "User1", - // You will need to prepend the image path with your baseUrl - // if it is not '/', like: '/test-site/img/image.jpg'. - image: "/img/undraw_open_source.svg", - infoLink: "https://www.facebook.com", - pinned: true, - }, -]; - -const siteConfig = { - title: "React TypeScript Cheatsheets", // Title for your website. - tagline: - "Cheatsheets for experienced React developers getting started with TypeScript", - /* TODO: Change this to official branch before gets merged */ - url: "https://raulfdm.github.io", // Your website URL - baseUrl: "/", - /* TODO: Change this to official branch before gets merged */ - projectName: "react-typescript-cheatsheet", - organizationName: "raulfdm", - - // For no header links in the top nav bar -> headerLinks: [], - headerLinks: [ - { doc: "basic/setup", label: "Docs" }, - { page: "help", label: "Help" }, - // {blog: true, label: 'Blog'}, - ], - - // If you have users set above, you add it here: - users, - - /* path to images for header/footer */ - /* TODO: Make it smaller */ - headerIcon: "img/icon.png", - footerIcon: "img/icon.png", - favicon: "img/icon.png", - - /* Colors for website */ - colors: { - primaryColor: "#222222", - secondaryColor: "#171717", - urlColor: "#138cd3", - }, - - /* Custom fonts for website */ - /* - fonts: { - myFont: [ - "Times New Roman", - "Serif" - ], - myOtherFont: [ - "-apple-system", - "system-ui" - ] - }, - */ - - // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. - copyright: `Copyright © ${new Date().getFullYear()} Your Name or Your Company Name`, - - highlight: { - // Highlight.js theme to use for syntax highlighting in code blocks. - theme: "default", - }, - - // Add custom scripts here that would be placed in