feat(v2): migrate bootstrap components to ts (#3496)

* feat(v2): Migrate bootstrap theme to typescript * chore(v2): Add eslint rule to avoid delete import of modules * chore(v2): Add lib to gitignore * chore(v2): Add prettier script * chore(v2): change hooks to ts * fix(v2): Fix Navbar and Layout problems * fix(v2): scroll * fix(v2): navbar metadata * refactor(v2): improve css styles * chore(v2): Restore debug layout * feat(v2): Remove console.log Co-authored-by: fanny <fanny.vieira@ccc.ufcg.edu.br>
facebook · Sep 29, 2020 · f343450 · f343450
1 parent 1c251bc
commit f343450
Show file tree

Hide file tree

Showing 33 changed files with 417 additions and 99 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -24,6 +24,7 @@ packages/docusaurus-plugin-sitemap/lib/
 packages/docusaurus-plugin-ideal-image/lib/
 packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js
 packages/docusaurus-theme-classic/lib/
+packages/docusaurus-theme-bootstrap/lib/
 packages/docusaurus-migrate/lib/
 
 packages/docusaurus-1.x/.eslintrc.js

diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,7 @@ packages/docusaurus-plugin-debug/lib/
 packages/docusaurus-plugin-sitemap/lib/
 packages/docusaurus-plugin-ideal-image/lib/
 packages/docusaurus-theme-classic/lib/
+packages/docusaurus-theme-bootstrap/lib/
 packages/docusaurus-migrate/lib/
 
 website/netlifyDeployPreview

diff --git a/README.md b/README.md
@@ -20,19 +20,20 @@
 
 > **We are working hard on Docusaurus v2. If you are new to Docusaurus, try using the new version instead of v1. See the [Docusaurus v2 website](https://v2.docusaurus.io/) for more details.**
 >
-> You can see the clean live demo with classic theme by clicking this badge  [![Runme](https://runme.io/static/button.svg)](https://runme.io/run?app_id=0dd80306-47bb-4e80-95dc-dc95eb05d3fd)
+> You can see the clean live demo with classic theme by clicking this badge [![Runme](https://runme.io/static/button.svg)](https://runme.io/run?app_id=0dd80306-47bb-4e80-95dc-dc95eb05d3fd)
 
 ## Introduction
 
 Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
 
-- **Simple to Start** 
+- **Simple to Start**
 
->Docusaurus is built in a way so that it can [get running](https://docusaurus.io/docs/en/installation/) in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.
-- **Localizable** 
->Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation/) via CrowdIn. Empower and grow your international community by translating your documentation.
-- **Customizable** 
->While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/adding-blog/), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages/) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages/).
+> Docusaurus is built in a way so that it can [get running](https://docusaurus.io/docs/en/installation/) in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.
+
+- **Localizable**
+  > Docusaurus ships with [localization support](https://docusaurus.io/docs/en/translation/) via CrowdIn. Empower and grow your international community by translating your documentation.
+- **Customizable**
+  > While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a [blog](https://docusaurus.io/docs/en/adding-blog/), and additional support pages, it is also [customizable](https://docusaurus.io/docs/en/custom-pages/) as well to ensure you have a site that is [uniquely yours](https://docusaurus.io/docs/en/api-pages/).
 
 ## Installation
 

diff --git a/packages/docusaurus-init/templates/bootstrap/src/pages/index.js b/packages/docusaurus-init/templates/bootstrap/src/pages/index.js
@@ -58,6 +58,7 @@ function Feature({imageUrl, title, description}) {
 function Home() {
   const context = useDocusaurusContext();
   const {siteConfig = {}} = context;
+
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}

diff --git a/packages/docusaurus-theme-bootstrap/babel.config.js b/packages/docusaurus-theme-bootstrap/babel.config.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+module.exports = {
+  presets: [['@babel/preset-typescript', {isTSX: true, allExtensions: true}]],
+};
diff --git a/packages/docusaurus-theme-bootstrap/package.json b/packages/docusaurus-theme-bootstrap/package.json
@@ -3,19 +3,33 @@
   "version": "2.0.0-alpha.64",
   "description": "Bootstrap theme for docusaurus",
   "main": "src/index.js",
+  "types": "src/types.d.ts",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@docusaurus/core": "2.0.0-alpha.64",
+    "@docusaurus/types": "2.0.0-alpha.64",
+    "@docusaurus/plugin-content-blog": "2.0.0-alpha.64",
+    "@docusaurus/plugin-content-docs": "2.0.0-alpha.64",
+    "@docusaurus/plugin-content-pages": "2.0.0-alpha.64",
     "@mdx-js/react": "^1.5.8",
     "bootstrap": "^4.4.1",
     "classnames": "^2.2.6",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.1.0",
     "reactstrap": "^8.4.1"
   },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.0.0-alpha.64"
+  },
+  "scripts": {
+    "build": "tsc --noEmit && yarn babel && yarn prettier",
+    "watch": "yarn babel --watch",
+    "babel": "babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.{js,ts}\""
+  },
   "peerDependencies": {
     "react": "^16.8.4",
     "react-dom": "^16.8.4"

diff --git a/packages/docusaurus-theme-bootstrap/src/index.js b/packages/docusaurus-theme-bootstrap/src/index.js
@@ -11,6 +11,9 @@ module.exports = function () {
   return {
     name: 'docusaurus-theme-bootstrap',
     getThemePath() {
+      return path.resolve(__dirname, '..', 'lib', 'theme');
+    },
+    getTypeScriptThemePath() {
       return path.resolve(__dirname, './theme');
     },
     getClientModules() {

diff --git a/...bootstrap/src/theme/BlogListPage/index.js → ...ootstrap/src/theme/BlogListPage/index.tsx b/...bootstrap/src/theme/BlogListPage/index.js → ...ootstrap/src/theme/BlogListPage/index.tsx
@@ -10,8 +10,9 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BlogPostCard from '@theme/BlogPostItem';
 import BlogListPaginator from '@theme/BlogListPaginator';
 import Layout from '@theme/Layout';
+import type {Props} from '@theme/BlogListPage';
 
-function BlogListPage(props) {
+function BlogListPage(props: Props): JSX.Element {
   const {items, metadata} = props;
   const {
     siteConfig: {title: siteTitle},

diff --git a/...trap/src/theme/BlogListPaginator/index.js → ...rap/src/theme/BlogListPaginator/index.tsx b/...trap/src/theme/BlogListPaginator/index.js → ...rap/src/theme/BlogListPaginator/index.tsx
@@ -7,8 +7,9 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogListPaginator';
 
-function BlogListPaginator(props) {
+function BlogListPaginator(props: Props): JSX.Element {
   const {previousPage, nextPage} = props.metadata;
 
   return (

diff --git a/...bootstrap/src/theme/BlogPostItem/index.js → ...ootstrap/src/theme/BlogPostItem/index.tsx b/...bootstrap/src/theme/BlogPostItem/index.js → ...ootstrap/src/theme/BlogPostItem/index.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostItem';
 
 const MONTHS = [
   'January',
@@ -29,7 +30,7 @@ const getReadingTime = (readingTime) => {
   return Math.ceil(readingTime);
 };
 
-function BlogPostItem(props) {
+function BlogPostItem(props: Props): JSX.Element {
   const {
     children,
     frontMatter,
@@ -61,7 +62,7 @@ function BlogPostItem(props) {
         <div className="col">
           {author && (
             <h5>
-              <a href={authorURL} alt={author}>
+              <a href={authorURL} rel={author}>
                 {author}
               </a>
             </h5>

diff --git a/...bootstrap/src/theme/BlogPostPage/index.js → ...ootstrap/src/theme/BlogPostPage/index.tsx b/...bootstrap/src/theme/BlogPostPage/index.js → ...ootstrap/src/theme/BlogPostPage/index.tsx
@@ -9,11 +9,12 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import BlogPostItem from '@theme/BlogPostItem';
 import BlogPostPaginator from '@theme/BlogPostPaginator';
+import type {Props} from '@theme/BlogPostPage';
 
-function BlogPostPage(props) {
+function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;
-  const {title, description, frontMatter, metadata} = BlogPostContents;
-  const {nextItem, prevItem} = metadata;
+  const {frontMatter, metadata} = BlogPostContents;
+  const {title, description, nextItem, prevItem} = metadata;
 
   return (
     <Layout title={title} description={description}>

diff --git a/...trap/src/theme/BlogPostPaginator/index.js → ...rap/src/theme/BlogPostPaginator/index.tsx b/...trap/src/theme/BlogPostPaginator/index.js → ...rap/src/theme/BlogPostPaginator/index.tsx
@@ -7,8 +7,9 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogPostPaginator';
 
-function BlogPostPaginator(props) {
+function BlogPostPaginator(props: Props): JSX.Element {
   const {nextItem, prevItem} = props;
 
   return (

diff --git a/...strap/src/theme/BlogTagsListPage/index.js → ...trap/src/theme/BlogTagsListPage/index.tsx b/...strap/src/theme/BlogTagsListPage/index.js → ...trap/src/theme/BlogTagsListPage/index.tsx
@@ -8,8 +8,9 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogTagsListPage';
 
-function BlogTagsListPage(props) {
+function BlogTagsListPage(props: Props): JSX.Element {
   const {tags} = props;
   const renderAllTags = () => (
     <>

diff --git a/...trap/src/theme/BlogTagsPostsPage/index.js → ...rap/src/theme/BlogTagsPostsPage/index.tsx b/...trap/src/theme/BlogTagsPostsPage/index.js → ...rap/src/theme/BlogTagsPostsPage/index.tsx
@@ -9,12 +9,13 @@ import React from 'react';
 import BlogPostItem from '@theme/BlogPostItem';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import type {Props} from '@theme/BlogTagsPostsPage';
 
 function pluralize(count, word) {
   return count > 1 ? `${word}s` : word;
 }
 
-function BlogTagsPostPage(props) {
+function BlogTagsPostPage(props: Props): JSX.Element {
   const {metadata, items} = props;
   const {allTagsPath, name, count} = metadata;
 

diff --git a/...me-bootstrap/src/theme/CodeBlock/index.js → ...e-bootstrap/src/theme/CodeBlock/index.tsx b/...me-bootstrap/src/theme/CodeBlock/index.js → ...e-bootstrap/src/theme/CodeBlock/index.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import theme from 'prism-react-renderer/themes/nightOwl';
 
-export default ({children, className}) => {
+export default ({children, className}): JSX.Element => {
   const language = className && className.replace(/language-/, '');
 
   return (

diff --git a/...-bootstrap/src/theme/DebugLayout/index.js → ...bootstrap/src/theme/DebugLayout/index.tsx b/...-bootstrap/src/theme/DebugLayout/index.js → ...bootstrap/src/theme/DebugLayout/index.tsx
@@ -14,13 +14,14 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
+import type {Props} from '@theme/Layout';
 
-function Layout(props) {
+function Layout(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
   const {
     favicon,
     title: siteTitle,
-    themeConfig: {image: defaultImage},
+    themeConfig: {image: defaultImage, metadatas},
     url: siteUrl,
     titleDelimiter,
   } = siteConfig;
@@ -32,7 +33,6 @@ function Layout(props) {
     image,
     keywords,
     permalink,
-    version,
   } = props;
   const metaTitle = title
     ? `${title} ${titleDelimiter} ${siteTitle}`
@@ -57,7 +57,6 @@ function Layout(props) {
         {description && (
           <meta property="og:description" content={description} />
         )}
-        {version && <meta name="docsearch:version" content={version} />}
         {keywords && keywords.length && (
           <meta name="keywords" content={keywords.join(',')} />
         )}
@@ -69,6 +68,18 @@ function Layout(props) {
         {permalink && <meta property="og:url" content={siteUrl + permalink} />}
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
+      <Head
+      // it's important to have an additional <Head> element here,
+      // as it allows react-helmet to override values set in previous <Head>
+      // ie we can override default metadatas such as "twitter:card"
+      // In same Head, the same meta would appear twice instead of overriding
+      // See react-helmet doc
+      >
+        {metadatas?.length > 0 &&
+          metadatas.map((metadata, i) => (
+            <meta key={`metadata_${i}`} {...metadata} />
+          ))}
+      </Head>
       <Navbar />
       <div className="container-fluid px-0 d-inline-flex flex-row">
         {children}

diff --git a/...heme-bootstrap/src/theme/DocItem/index.js → ...eme-bootstrap/src/theme/DocItem/index.tsx b/...heme-bootstrap/src/theme/DocItem/index.js → ...eme-bootstrap/src/theme/DocItem/index.tsx
@@ -11,10 +11,11 @@ import Head from '@docusaurus/Head';
 import DocPaginator from '@theme/DocPaginator';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {Props} from '@theme/DocItem';
 
-function DocItem(props) {
+function DocItem(props: Props): JSX.Element {
   const {siteConfig = {}} = useDocusaurusContext();
-  const {url: siteUrl, title: siteTitle, titleDelimiter} = siteConfig;
+  const {url: siteUrl, title: siteTitle, titleDelimiter = ' | '} = siteConfig;
   const {content: DocContent} = props;
   const {metadata} = DocContent;
   const {description, title, permalink} = metadata;
@@ -25,7 +26,8 @@ function DocItem(props) {
   const metaTitle = title
     ? `${title} ${titleDelimiter} ${siteTitle}`
     : siteTitle;
-  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  let metaImageUrl: string | undefined = siteUrl + useBaseUrl(metaImage);
+
   if (!isInternalUrl(metaImage)) {
     metaImageUrl = metaImage;
   }

diff --git a/...heme-bootstrap/src/theme/DocPage/index.js → ...eme-bootstrap/src/theme/DocPage/index.tsx b/...heme-bootstrap/src/theme/DocPage/index.js → ...eme-bootstrap/src/theme/DocPage/index.tsx
@@ -5,40 +5,49 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import renderRoutes from '@docusaurus/renderRoutes';
 import NotFound from '@theme/NotFound';
 import DocSidebar from '@theme/DocSidebar';
 import MDXComponents from '@theme/MDXComponents';
 import Layout from '@theme/Layout';
 import {MDXProvider} from '@mdx-js/react';
 import {matchPath} from '@docusaurus/router';
+import type {Props} from '@theme/DocPage';
+import type {DocumentRoute} from '@theme/DocItem';
+import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
 
-function DocPageContent({currentDocRoute, versionMetadata, children}) {
+type DocPageContentProps = {
+  readonly currentDocRoute: DocumentRoute;
+  readonly versionMetadata: PropVersionMetadata;
+  readonly children: ReactNode;
+};
+
+function DocPageContent({
+  currentDocRoute,
+  versionMetadata,
+  children,
+}: DocPageContentProps): JSX.Element {
   const {permalinkToSidebar, docsSidebars} = versionMetadata;
   const sidebarName = permalinkToSidebar[currentDocRoute.path];
   const sidebar = docsSidebars[sidebarName];
   return (
     <Layout title="Doc page" description="My Doc page">
-      <div className="d-flex vh-100 overflow-hidden">
+      <div className="d-flex vh-100">
         {sidebar && (
-          <div className="vh-100" role="complementary">
-            <DocSidebar
-              key={sidebarName}
-              path={currentDocRoute.path}
-              sidebar={sidebar}
-            />
+          <div role="complementary">
+            <DocSidebar key={sidebarName} sidebar={sidebar} />
           </div>
         )}
-        <main className="vh-100 w-100 d-flex flex-column align-items-center overflow-auto p-5">
+        <main className="w-100 align-items-center overflow-auto p-5">
           <MDXProvider components={MDXComponents}>{children}</MDXProvider>
         </main>
       </div>
     </Layout>
   );
 }
 
-function DocPage(props) {
+function DocPage(props: Props): JSX.Element {
   const {
     route: {routes: docRoutes},
     versionMetadata,

diff --git a/...bootstrap/src/theme/DocPaginator/index.js → ...ootstrap/src/theme/DocPaginator/index.tsx b/...bootstrap/src/theme/DocPaginator/index.js → ...ootstrap/src/theme/DocPaginator/index.tsx
@@ -7,8 +7,9 @@
 
 import React from 'react';
 import Link from '@docusaurus/Link';
+import {Props} from '@theme/DocPaginator';
 
-function DocPaginator(props) {
+function DocPaginator(props: Props): JSX.Element {
   const {previous, next} = props.metadata;
 
   return (