Upgrade Homepage

.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

@@ -25,21 +25,21 @@ You may also view the markdown files directly at the following links:
 - [Getting Started with GameCI](docs/02-getting-started)
 - [Github Actions](docs/03-github)
 - [Gitlab Pipelines](docs/05-gitlab)
-- [CircleCi<](docs/11-circleci)
+- [CircleCi](docs/11-circleci)
 - [Docker](docs/08-docker)
 - [Github Cloud Runner](docs/03-github-cloud-runner)
 - [Troubleshooting](docs/09-troubleshooting)
 - [FAQ](docs/10-faq)
 
 ## Building the Docs Site
 
-Built with [Docusaurus 2.](https://docusaurus.io/)
+Built with [Docusaurus 2](https://docusaurus.io/).
 
 This project has a hard dependancy 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/builds/build-row.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import DockerImageLinkOrRetryButton, {
+  type Record,
+} from '@site/src/components/docs/versions/docker-image-link-or-retry-button';
+import Spinner from '@site/src/components/molecules/spinner';
+import Tooltip from '@site/src/components/molecules/tooltip/tooltip';
+import styles from './builds.module.scss';
+
+const mapBuildStatusToIcon = {
+  started: <Spinner type="slow" />,
+  failed: '⚠',
+  published: '✅',
+};
+
+type Props = {
+  children: React.JSX.Element | React.JSX.Element[];
+  build: Record;
+};
+
+const CopyToClipboard = (copyString: string) => {
+  navigator.clipboard.writeText(copyString);
+};
+
+export default function BuildRow({ children, build }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const [toolbarContent, setToolbarContent] = useState('Click to copy');
+
+  const MapBuildStatusToElement = (status: string) => {
+    const icon = mapBuildStatusToIcon[status];
+
+    switch (status) {
+      case 'started':
+        return <Spinner type="slow" />;
+      case 'failed':
+        return <Tooltip content={build.failure?.reason}>{icon}</Tooltip>;
+      case 'published':
+        return icon;
+      default:
+        return status;
+    }
+  };
+
+  return (
+    <>
+      <tr className={styles.tableRow}>
+        <td
+          onClick={() => setExpanded(!expanded)}
+          className="text-center select-none cursor-pointer"
+        >
+          {expanded ? '➖' : '➕'}
+        </td>
+        <td className="text-center">{MapBuildStatusToElement(build.status)}</td>
+        <td>
+          <span>
+            {/* <a
+              href={`https://hub.docker.com/layers/unityci/editor/${build.buildInfo.baseOs}-${build.buildInfo.editorVersion}-${build.buildInfo.targetPlatform}-${build.buildInfo.repoVersion}/images/${build.dockerInfo.digest}`}
+            > */}
+            <Tooltip content={toolbarContent}>
+              <button
+                onClick={() => {
+                  CopyToClipboard(build.buildId);
+                  setToolbarContent('Copied to clipboard!');
+                }}
+                onMouseLeave={() => {
+                  setToolbarContent('Click to copy');
+                }}
+                type="button"
+              >
+                {build.buildId}
+              </button>
+            </Tooltip>
+
+            {/* </a> */}
+            <DockerImageLinkOrRetryButton record={build} />
+          </span>
+        </td>
+        <td>{build.imageType}</td>
+        <td>{build.buildInfo.baseOs}</td>
+        <td>{build.buildInfo.targetPlatform}</td>
+      </tr>
+      {expanded && (
+        <tr className={styles.expandedContentRow}>
+          <td colSpan={6}>{children}</td>
+        </tr>
+      )}
+    </>
+  );
+}

src/components/docs/versions/builds.module.scss → src/components/docs/versions/builds/builds.module.scss

@@ -12,4 +12,11 @@
 }
 
 .expandedContentRow {
+  height: 0;
+  overflow: hidden;
+}
+
+
+.tableRow {
+  width: 100%;
 }