website: upgrade docusaurus and other dependencies (facebookincubator#215)

* website: upgrade docusaurus and other dependencies

* upgrade

* revert prettier change

* upgrade node

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>

Author: pranabdas

.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install
         run: yarn install
       - name: Prettier
-        run: yarn prettier:ci
+        run: yarn format:ci
       - name: Stylelint
         run: yarn lint:ci
       # Ensure that all the expected files have been commited (yarn.lock, /dist...)

.nvmrc

@@ -1 +1 @@
-12
+16.14.0

.prettierrc

@@ -1,7 +1,7 @@
 {
   "arrowParens": "always",
   "bracketSpacing": false,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,

netlify.toml

@@ -4,3 +4,5 @@
   command = "yarn workspace infima build && yarn workspace infima-website build && cp -R packages/core/demo website/build/demo"
   publish = "/website/build"
 
+[build.environment]
+  NODE_VERSION = "16"

package.json

@@ -8,9 +8,9 @@
   ],
   "private": true,
   "scripts": {
-    "prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx}\"",
-    "prettier:docs": "prettier --config .prettierrc --write \"**/*.{md,mdx}\"",
-    "prettier:ci": "prettier --config .prettierrc --check \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
+    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx}\"",
+    "format:docs": "prettier --config .prettierrc --write \"**/*.{md,mdx}\"",
+    "format:ci": "prettier --config .prettierrc --check \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
     "lint:ci": "yarn workspace infima lint",
     "start": "cd packages/core && npm start",
     "build": "yarn workspace infima build",
@@ -19,12 +19,12 @@
     "website:build": "yarn workspace infima-website build",
     "website:deploy": "yarn workspace infima-website deploy",
     "lock:update": "npx yarn-deduplicate",
-    "postinstall": "is-ci || husky install && yarn lock:update"
+    "postinstall": "yarn lock:update",
+    "prepare": "husky install"
   },
   "devDependencies": {
-    "husky": "^5.0.9",
-    "is-ci": "^3.0.0",
-    "prettier": "^2.2.1"
+    "husky": "^7.0.4",
+    "prettier": "^2.6.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

website/package.json

@@ -4,19 +4,23 @@
   "description": "Website for Infima",
   "private": true,
   "scripts": {
+    "docusaurus": "docusaurus",
     "start": "docusaurus start",
     "build": "docusaurus build",
-    "eject": "docusaurus eject",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "GIT_USER=facebookincubator USE_SSH=true docusaurus deploy",
+    "clear": "docusaurus clear",
     "serve": "docusaurus serve",
-    "deploy": "GIT_USER=facebookincubator USE_SSH=true docusaurus deploy"
+    "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",
-    "classnames": "^2.2.6",
-    "prettier": "^1.17.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-element-to-jsx-string": "^14.0.2"
+    "@docusaurus/core": "2.0.0-beta.17",
+    "@docusaurus/preset-classic": "2.0.0-beta.17",
+    "clsx": "^1.1.1",
+    "prettier": "1.17.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-element-to-jsx-string": "^14.3.4"
   }
 }

website/src/pages/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -21,17 +21,17 @@ function Home() {
     <Layout
       title={siteConfig.title}
       description="A modern styling framework for content-driven websites">
-      <header className={classnames('hero', styles.heroBanner)}>
+      <header className={clsx('hero', styles.heroBanner)}>
         <div className="container">
           <img
-            className={classnames(styles.heroBannerLogo, 'margin-vert--md')}
+            className={clsx(styles.heroBannerLogo, 'margin-vert--md')}
             src={useBaseUrl('img/logo.png')}
           />
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
             <Link
-              className={classnames(
+              className={clsx(
                 'button button--primary button--lg',
                 styles.getStarted,
               )}

website/src/theme/Playground.js

@@ -26,7 +26,7 @@ function Playground(props) {
         dangerouslySetInnerHTML={{__html: htmlString}}
       />
       <br />
-      <CodeBlock className="html">{htmlString}</CodeBlock>
+      <CodeBlock language="html">{htmlString}</CodeBlock>
     </div>
   );
 }