refactor: clean Canny integration + rename 'Feedback' to 'Feature Requests' + improve TS doc page (#5389)

* Better Canny integration

* Add missing netlify redirects

* polish

* TS doc: mention it's possible to use JSDoc in config

* issue templates: use /feature-requests new url

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: 🚀 Feature request
-    url: https://docusaurus.io/feedback/
+    url: https://docusaurus.io/feature-requests
     about: The Canny board to send us feature requests, vote and measure the interest of users. Useful to submit a featurre request when you have an idea but no concrete api design proposal.
   - name: ❓ Simple question - Discord chat
     url: https://discord.gg/docusaurus

.github/ISSUE_TEMPLATE/feature.md

@@ -8,7 +8,7 @@ labels: 'feature, needs triage'
   IMPORTANT:
   - We expect you to submit a feature request including a real design (API / UI...), not just a basic idea
   - The design does not have to be perfect, we'll discuss it and fix it if needed
-  - For a more "casual" feature requests, consider using Canny instead: https://docusaurus.io/feedback
+  - For a more "casual" feature requests, consider using Canny instead: https://docusaurus.io/feature-requests
 -->
 
 ## 🚀 Feature
@@ -19,7 +19,7 @@ labels: 'feature, needs triage'
 
 (Write your answer here.)
 
-### Has this been requested on [Canny](https://docusaurus.io/feedback)?
+### Has this been requested on [Canny](https://docusaurus.io/feature-requests)?
 
 (Please post the Canny link, it is helpful to see how much interest there is for this feature)
 
@@ -38,7 +38,7 @@ labels: 'feature, needs triage'
 
 <!--
   What happens if you skip this step? This issue will be automatically closed.
-  Your feature request is just an idea for now, please use Canny for that: https://docusaurus.io/feedback
+  Your feature request is just an idea for now, please use Canny for that: https://docusaurus.io/feature-requests
 -->
 
 ## Have you tried building it?

.github/ISSUE_TEMPLATE/proposal.md

@@ -6,7 +6,7 @@ labels: 'proposal, needs triage'
 
 <!--
   This is not for feature requests.
-  Consider requesting the feature on https://docusaurus.io/feedback instead.
+  Consider requesting the feature on https://docusaurus.io/feature-requests instead.
 -->
 
 ## 💥 Proposal

website/community/0-support.md

@@ -21,7 +21,7 @@ There are many online forums which are a great place for discussion about best p
 
 ## Feature requests {#feature-requests}
 
-For new feature requests, you can create a post on our [Canny board](/feedback), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
+For new feature requests, you can create a post on our [feature requests board (Canny)](/feature-requests), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
 
 ## News {#news}
 

website/docs/introduction.md

@@ -183,4 +183,4 @@ In comparison with statically generated HTML and interactivity added using `<scr
 
 If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/facebook/docusaurus) for us, or send a tweet mentioning the [@docusaurus](https://twitter.com/docusaurus) Twitter account.
 
-For new feature requests, you can create a post on our [Canny board](/feedback), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
+For new feature requests, you can create a post on our [feature requests board (Canny)](/feature-requests), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!

website/docs/typescript-support.md

@@ -3,6 +3,8 @@ id: typescript-support
 title: TypeScript Support
 ---
 
+Docusaurus is written in TypeScript, and provide first-class TypeScript support.
+
 ## Initialization {#initialization}
 
 Docusaurus supports writing and using TypeScript theme components. If the init template provides a Typescript variant, you can directly initialize a site with full TypeScript support by using the `--typescript` flag.
@@ -34,6 +36,44 @@ Docusaurus doesn't use this `tsconfig.json` to compile your project. It is added
 
 Now you can start writing TypeScript theme components.
 
+## Typing the config file {#typing-config}
+
+It is **not possible** to use a TypeScript config file in Docusaurus, unless you compile it yourself to JavaScript.
+
+We recommend using [JSDoc type annotations](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html):
+
+```js title="docusaurus.config.js
+// highlight-start
+/** @type {import('@docusaurus/types').Plugin} */
+// highlight-end
+function MyPlugin(context, options) {
+  return {
+    name: 'my-plugin',
+  };
+}
+
+// highlight-start
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+// highlight-end
+const config = {
+  title: 'Docusaurus',
+  tagline: 'Build optimized websites quickly, focus on your content',
+  organizationName: 'facebook',
+  projectName: 'docusaurus',
+  plugins: [MyPlugin],
+};
+
+module.exports = config;
+```
+
+:::tip
+
+Type annotations are very useful and help your IDE understand the type of config objects!
+
+The best IDEs (VSCode, WebStorm, Intellij...) will provide a nice auto-completion experience.
+
+:::
+
 ## Swizzling TypeScript theme components {#swizzling-typescript-theme-components}
 
 For themes that supports TypeScript theme components, you can add the `--typescript` flag to the end of swizzling command to get TypeScript source code. For example, the following command will generate `index.tsx` and `styles.module.css` into `src/theme/Footer`.

website/docusaurus.config.js

@@ -102,6 +102,7 @@ const TwitterSvg =
   clientModules: [require.resolve('./_dogfooding/clientModuleExample.ts')],
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
+    require('./src/featureRequests/FeatureRequestsPlugin'),
     [
       '@docusaurus/plugin-content-docs',
       {
@@ -414,8 +415,8 @@ const TwitterSvg =
               href: 'https://stackoverflow.com/questions/tagged/docusaurus',
             },
             {
-              label: 'Feedback',
-              to: 'feedback',
+              label: 'Feature Requests',
+              to: '/feature-requests',
             },
             {
               label: 'Discord',

website/sidebarsCommunity.js

@@ -18,8 +18,8 @@ module.exports = {
     },
     {
       type: 'link',
-      href: '/feedback',
-      label: 'Feedback',
+      href: '/feature-requests',
+      label: 'Feature Requests',
     },
     {
       type: 'link',

website/src/featureRequests/FeatureRequestsPage.tsx

@@ -8,34 +8,30 @@
 import React, {useEffect} from 'react';
 import Layout from '@theme/Layout';
 
-import canny from '../../scripts/canny';
+import cannyScript from './cannyScript';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
 
-function Feedback() {
+function FeatureRequests() {
   useEffect(() => {
-    canny();
-    (window as any).Canny &&
-      (window as any).Canny('render', {
+    cannyScript();
+    const Canny = (window as any).Canny;
+    Canny('render', {
       boardToken: BOARD_TOKEN,
-        basePath: '/feedback',
+      basePath: '/feature-requests',
     });
   }, []);
 
   return (
-    <Layout title="Feedback" description="Docusaurus 2 Feedback page">
+    <Layout title="Feedback" description="Docusaurus 2 Feature Requests page">
       <main
-        className={clsx(
-          'container',
-          'margin-vert--xl',
-          styles.feedbackBackground,
-        )}
+        className={clsx('container', 'margin-vert--lg', styles.main)}
         data-canny
       />
     </Layout>
   );
 }
 
-export default Feedback;
+export default FeatureRequests;

website/src/featureRequests/FeatureRequestsPlugin.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+/** @type {import('@docusaurus/types').Plugin} */
+function FeatureRequestsPlugin() {
+  return {
+    name: 'feature-requests-plugin',
+    contentLoaded({actions}) {
+      actions.addRoute({
+        path: '/feature-requests',
+        exact: false,
+        component: '@site/src/featureRequests/FeatureRequestsPage',
+      });
+    },
+  };
+}
+
+module.exports = FeatureRequestsPlugin;

website/src/featureRequests/cannyScript.js

@@ -7,7 +7,7 @@
 
 // Provided by Canny.
 
-function canny() {
+function cannyScript() {
   !(function (w, d, i, s) {
     function l() {
       if (!d.getElementById(i)) {
@@ -34,4 +34,4 @@ function canny() {
   })(window, document, 'canny-jssdk', 'script');
 }
 
-export default canny;
+export default cannyScript;

website/src/featureRequests/styles.module.css

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.feedbackBackground {
+.main {
   padding: var(--ifm-spacing-horizontal);
   border-radius: 4px;
   background: var(--ifm-color-feedback-background);
+  min-height: 500px;
 }

website/src/theme/NotFound.tsx

@@ -1,35 +0,0 @@
-/**
- * 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 from 'react';
-import Layout from '@theme/Layout';
-import Feedback from '../pages/feedback';
-
-function NotFound({location}: {location: {pathname: string}}): JSX.Element {
-  if (/^\/\bfeedback\b/.test(location.pathname)) {
-    return <Feedback />;
-  } else {
-    return (
-      <Layout title="Page Not Found">
-        <main className="container margin-vert--xl" data-canny>
-          <div className="row">
-            <div className="col col--6 col--offset-3">
-              <h1 className="hero__title">Page Not Found</h1>
-              <p>We could not find what you were looking for.</p>
-              <p>
-                Please contact the owner of the site that linked you to the
-                original URL and let them know their link is broken.
-              </p>
-            </div>
-          </div>
-        </main>
-      </Layout>
-    );
-  }
-}
-
-export default NotFound;

website/static/_redirects

@@ -27,3 +27,7 @@ https://docusaurus.io/docs/zh-cn/*      https://v1.docusaurus.io/docs/zh-cn/:spl
 # Redirect Docusaurus v1 blog RSS feed
 /blog/feed.xml   /blog/rss.xml
 
+
+# Feature requests redirects
+/feedback/*                 /feature-requests/:splat    301!
+/feature-requests/*         /feature-requests           200

website/versioned_docs/version-2.0.0-beta.3/introduction.md

@@ -183,4 +183,4 @@ In comparison with statically generated HTML and interactivity added using `<scr
 
 If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/facebook/docusaurus) for us, or send a tweet mentioning the [@docusaurus](https://twitter.com/docusaurus) Twitter account.
 
-For new feature requests, you can create a post on our [Canny board](/feedback), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
+For new feature requests, you can create a post on our [feature requests board (Canny)](/feature-requests), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!

website/versioned_docs/version-2.0.0-beta.4/introduction.md

@@ -183,4 +183,4 @@ In comparison with statically generated HTML and interactivity added using `<scr
 
 If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please [file an issue](https://github.com/facebook/docusaurus) for us, or send a tweet mentioning the [@docusaurus](https://twitter.com/docusaurus) Twitter account.
 
-For new feature requests, you can create a post on our [Canny board](/feedback), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!
+For new feature requests, you can create a post on our [feature requests board (Canny)](/feature-requests), which is a handy tool for roadmapping and allows for sorting by upvotes, which gives the core team a better indicator of what features are in high demand, as compared to GitHub issues which are harder to triage. Refrain from making a Pull Request for new features (especially large ones) as someone might already be working on it or will be part of our roadmap. Talk to us first!