Fix issues found when upgrading homepage (#457)

* Upgrade Homepage (#412)

* chore: upgrade docusaurus / fix deprecations

* chore: upgrade docusaurus / fix deprecations

* feat: introduce v3

* chore: upgrade node in ci

* Reconcile v2 and v3 docs with latest unity builder changes. Remove parameters not available in v2 from v2 docs.

* Remove parameters and outputs from v2.2.0-pre

* Update version tags to align with new version

* chore: upgrade docusaurus tsconfig

* chore: import/order

* fix: unresolved import

* chore: versions as client-side block

* fix: firebase resolution

* Re-enable sections, Prettier readme, use LF line endings

* Upgraded getting-started.tsx
- Upgraded getting-started.tsx to use company SVGs instead of text
- Moved getting-started.tsx section up
- Updated node16 references to node18 in .md files

* Revamped versions page

* INCOMPLETE: Changed out Ant's table

* Starting Section Rework
- Reworked Starting/Opening Section
- Began Working on pricing calculator
- Changed JSX.Element (dep.) -> React.JSX.Element

* Created tooltip component
- Created tooltip.tsx
- Centered VSC buttons in Getting Started

* Devs that chose us section
- Moved GH, GL, CCI SVGs to /static/assets/images/icons
- 'Finished' Devs that chose us section (more logos needed)
- Reintroduced '.vscode' directory from .gitignore to support @apply rule

* Docker versions progress
- Finished expandable menu
- Only left to implement a Tooltip and DockerImageLinkOrRetryButton (will leave this one to webber)

* Tooltip & Docker Table finished

* pricing section

* disabled unused sections

* resolved requests

---------

Co-authored-by: Webber <[email protected]>
Co-authored-by: Andrew Kahr <[email protected]>
Co-authored-by: Gabriel Le Breton <[email protected]>

* Fix deparated error

* Fix logo issue in light mode and update HTML tag structure

* Update HTML tag in dev section

* Fix pricing section color and class name typo

* Update css and optimize logo

* Improve quality

* Update code

---------

Co-authored-by: Elias <[email protected]>
Co-authored-by: Webber <[email protected]>
Co-authored-by: Andrew Kahr <[email protected]>
Co-authored-by: Gabriel Le Breton <[email protected]>

.gitignore

@@ -35,5 +35,7 @@ yarn-error.log*
 /.idea/*
 !/.idea/documentation.iml
 !/.idea/prettier.xml
-.vscode
+
+# Reintroducing to add TailwindCSS @include rule
+# .vscode
 

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  "recommendations": [
+    "aaron-bond.better-comments",
+    "dbaeumer.vscode-eslint",
+    "dsznajder.es7-react-js-snippets",
+    "zignd.html-css-class-completion",
+    "ms-vscode.vscode-typescript-next",
+    "csstools.postcss",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "wix.vscode-import-cost"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.customData": [".vscode/tailwind.json"]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

CONTRIBUTING.md

@@ -18,7 +18,7 @@ When fixing a bug it is fine to submit a pull request right away.
 
 You need the following tools to be installed.
 
-- [Node](https://nodejs.org/) installed at v16.X.
+- [NodeJS](https://nodejs.org/) installed at v18.X.
 - [Yarn](https://yarnpkg.com/) at v1.22.4+.
 
 > **Tip:** _Use [nvm](https://github.com/nvm-sh/nvm) or [n](https://github.com/tj/n) or

README.md

@@ -33,13 +33,13 @@ You may also view the markdown files directly at the following links:
 
 ## Building the Docs Site
 
-Built with [Docusaurus 2.](https://docusaurus.io/)
+Built with [Docusaurus 2](https://docusaurus.io/).
 
 This project has a hard dependency on Node16. You will need to make sure that you have the proper
 version of node installed to avoid errors.
 
-- [Install Node16 on Ubuntu](https://joshtronic.com/2021/05/09/how-to-install-nodejs-16-on-ubuntu-2004-lts/)
-- [Install Node16 using brew](https://apple.stackexchange.com/a/207883)
+- [Install NodeJS v18 on Ubuntu](https://joshtronic.com/2022/04/24/how-to-install-nodejs-18-on-ubuntu-2004-lts/)
+- [Install NodeJS v18 using brew](https://apple.stackexchange.com/a/207883)
 
 This project relies on yarn for package management. You will need to install yarn in order to build
 and test the documentation site.

src/components/auth/safe-auth-check.tsx

@@ -23,7 +23,11 @@ export function SafeClaimsCheck({ user, fallback, children, requiredClaims }: Cl
 }
 
 // Apply fix while this is not merged https://github.com/FirebaseExtended/reactfire/pull/336
-export function SafeAuthCheck({ fallback, children, requiredClaims }: AuthCheckProps): JSX.Element {
+export function SafeAuthCheck({
+  fallback,
+  children,
+  requiredClaims,
+}: AuthCheckProps): React.JSX.Element {
   const { data: user } = useUser<firebase.User>();
 
   if (user) {

src/components/docs/versions/major-editor-version.tsx

@@ -21,7 +21,6 @@ export default function MajorEditorVersion({ versionString, versions }: Props) {
           className={styles.arrow}
           style={{
             transform: `rotateZ(${enabled ? '90deg' : 0})`,
-            fontSize: '1.5rem',
           }}
         >
           ▶ {/* ▶ */}

src/components/pages/about-us/section/header-section/header-section.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const HeaderSection = (): JSX.Element => {
+const HeaderSection = (): React.JSX.Element => {
   return (
     <div className="2xl:container 2xl:mx-auto py-4 sm:py-6 lg:px-20 md:pt-8 md:px-6 px-4">
       <div className="relative">