diff --git a/.gitignore b/.gitignore index ad87de6f..97168235 100644 --- a/.gitignore +++ b/.gitignore @@ -35,5 +35,7 @@ yarn-error.log* /.idea/* !/.idea/documentation.iml !/.idea/prettier.xml -.vscode + +# Reintroducing to add TailwindCSS @include rule +# .vscode diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..2a8b6007 --- /dev/null +++ b/.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" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..2f1ecf38 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "css.customData": [".vscode/tailwind.json"] +} diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 00000000..96a1f579 --- /dev/null +++ b/.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" + } + ] + } + ] +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bbd574a2..74ca5e85 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/README.md b/README.md index d3237046..86363447 100644 --- a/README.md +++ b/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. diff --git a/src/components/auth/safe-auth-check.tsx b/src/components/auth/safe-auth-check.tsx index 4fa6523a..ab52ffc3 100644 --- a/src/components/auth/safe-auth-check.tsx +++ b/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(); if (user) { diff --git a/src/components/docs/versions/build-failure-details.tsx b/src/components/docs/versions/build-failure-details.tsx deleted file mode 100644 index 860e7a78..00000000 --- a/src/components/docs/versions/build-failure-details.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useReducer } from 'react'; -import CodeBlock from '@theme/CodeBlock'; - -interface Props { - ciJob; - ciBuild; - repoVersionInfo; - editorVersionInfo; - style; -} - -const BuildFailureDetails = ({ - ciJob, - repoVersionInfo, - editorVersionInfo, - ciBuild, - ...rest -}: Props) => { - const { editorVersion, baseOs, targetPlatform } = ciBuild.buildInfo; - const { major, minor, patch } = repoVersionInfo; - - const reducer = (state, action) => { - const { tag, value } = action; - return { ...state, [tag]: value }; - }; - - const [tags /* , dispatch */] = useReducer(reducer, { - [`${baseOs}-${editorVersion}-${targetPlatform}-${major}`]: '❓', - [`${baseOs}-${editorVersion}-${targetPlatform}-${major}.${minor}`]: '❓', - [`${baseOs}-${editorVersion}-${targetPlatform}-${major}.${minor}.${patch}`]: '❓', - [`${editorVersion}-${targetPlatform}-${major}`]: '❓', - [`${editorVersion}-${targetPlatform}-${major}.${minor}`]: '❓', - [`${editorVersion}-${targetPlatform}-${major}.${minor}.${patch}`]: '❓', - }); - - // Todo - fetch docker info from dockerhub for all tags, or do it on the server - // useEffect(() => { - // (async () => { - // const repo = 'unityci/editor'; - // for (const tag of Object.keys(tags)) { - // const requestUrl = `https://index.docker.io/v1/repositories/${repo}/tags/${tag}`; - // try { - // const response = await fetch(requestUrl); - // dispatch({ tag, value: response.status === 0 }); - // } catch (error) { - // dispatch({ tag, value: false }); - // } - // } - // })(); - // }, []); - - const { changeSet } = editorVersionInfo; - const buildCommand = `#!/usr/bin/env bash -git clone git@github.com:game-ci/docker.git -cd docker - -editor_version=${editorVersion} -change_set=${changeSet} -base_os=${baseOs} -target_platform=${targetPlatform} -image_name=unityci-editor:$editor_version-$target_platform - -docker build . \\ - --file ./images/$base_os/editor/Dockerfile \\ - -t $image_name \\ - --build-arg=version=$editor_version \\ - --build-arg=changeSet=$change_set \\ - --build-arg=module=$target_platform -`; - - const pullCommand = `docker pull unityci/editor:${baseOs}-${editorVersion}-${targetPlatform}-${major}.${minor}.${patch}`; - - return ( -
-

CI Job identification

- {JSON.stringify(ciJob, null, 2)} -
-

Commands

-

Build the docker image locally for debugging:

- {buildCommand} -

Pull this docker image:

- {pullCommand} -
-

Associated tags on docker hub

- {JSON.stringify(tags, null, 2)} -
-

CI Build details

- {JSON.stringify(ciBuild, null, 2)} -
- ); -}; - -export default BuildFailureDetails; diff --git a/src/components/docs/versions/builds.module.scss b/src/components/docs/versions/builds.module.scss deleted file mode 100644 index c712aed9..00000000 --- a/src/components/docs/versions/builds.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.stickyRow:global(.ant-table-row.ant-table-row-level-0) > :global(td) { - position: sticky; - top: 99px; /* height of the collapse-item-header + the parent tr > td sticky */ - background-color: rgb(255, 255, 255); - z-index: 2; - box-shadow: 0 0 25px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1); - clip-path: inset(-25px 0 0 0); -} - -.stickyRow:global(.ant-table-row.ant-table-row-level-0) > :global(td:not(:last-child)) { - clip-path: inset(-25px -1px 0 0); /* fix for space from responsive vs fixed width on cells */ -} - -.expandedContentRow { -} diff --git a/src/components/docs/versions/builds.tsx b/src/components/docs/versions/builds.tsx deleted file mode 100644 index 9ed5c5cf..00000000 --- a/src/components/docs/versions/builds.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { ColumnsType } from 'antd/es/table'; -import React from 'react'; -import { useFirestore, useFirestoreCollectionData } from 'reactfire'; -import { Table, Tooltip } from 'antd'; -import Spinner from '@site/src/components/molecules/spinner'; -import DockerImageLinkOrRetryButton from '@site/src/components/docs/versions/docker-image-link-or-retry-button'; -import BuildFailureDetails from '@site/src/components/docs/versions/build-failure-details'; -// import styles from './builds.module.scss'; - -interface RepoVersionInfo { - version: string; - major: number; - minor: number; - patch: number; -} - -interface Props { - ciJobId: string; - repoVersionInfo: RepoVersionInfo; - editorVersionInfo; -} - -const mapBuildStatusToIcon = { - started: , - failed: '⚠', - published: '✅', -}; - -const Builds = ({ ciJobId, repoVersionInfo, editorVersionInfo, ...props }: Props) => { - const loading =

Fetching builds...

; - - const ciBuilds = useFirestore().collection('ciBuilds').where('relatedJobId', '==', ciJobId); - - const { status, data } = useFirestoreCollectionData<{ [key: string]: any }>(ciBuilds); - const isLoading = status === 'loading'; - - if (isLoading) { - return loading; - } - - const columns = [ - { - width: 45, - dataIndex: 'status', - key: 'status', - render: (value, record) => { - const icon = mapBuildStatusToIcon[value]; - switch (value) { - case 'published': - return icon; - case 'failed': - return {icon}; - case 'started': - return {icon}; - default: - return value; - } - }, - }, - { - width: 45, - render: (value, record) => , - key: 'docker-image-link-or-retry-button', - }, - { - title: 'Build identifier', - dataIndex: 'buildId', - key: 'buildId', - onFilter: (value, record) => record.buildId.includes(value), - defaultSortOrder: 'ascend', - sorter: (a, b) => a.buildId.localeCompare(b.buildId, 'en-GB'), - ellipsis: true, - }, - { - title: 'Image type', - dataIndex: 'imageType', - key: 'imageType', - onFilter: (value, record) => record.imageType.includes(value), - sorter: (a, b) => a.imageType.localeCompare(b.imageType, 'en-GB'), - ellipsis: true, - }, - { - title: 'OS', - dataIndex: ['buildInfo', 'baseOs'], - key: 'buildInfo.baseOs', - onFilter: (value, record) => record.buildInfo.baseOs.includes(value), - sorter: (a, b) => a.buildInfo.baseOs.localeCompare(b.buildInfo.baseOs, 'en-GB'), - ellipsis: true, - }, - { - title: 'Target platform', - dataIndex: ['buildInfo', 'targetPlatform'], - key: 'buildInfo.targetPlatform', - onFilter: (value, record) => record.buildInfo.targetPlatform.includes(value), - sorter: (a, b) => - a.buildInfo.targetPlatform.localeCompare(b.buildInfo.targetPlatform, 'en-GB'), - ellipsis: true, - }, - { - title: 'Editor version', - dataIndex: ['buildInfo', 'editorVersion'], - key: 'buildInfo.editorVersion', - onFilter: (value, record) => record.buildInfo.editorVersion.includes(value), - sorter: (a, b) => a.buildInfo.editorVersion.localeCompare(b.buildInfo.editorVersion, 'en-GB'), - ellipsis: true, - }, - { - title: 'Repo version', - dataIndex: ['buildInfo', 'repoVersion'], - key: 'buildInfo.repoVersion', - onFilter: (value, record) => record.buildInfo.repoVersion.includes(value), - sorter: (a, b) => a.buildInfo.repoVersion.localeCompare(b.buildInfo.repoVersion, 'en-GB'), - ellipsis: true, - }, - ] as ColumnsType; - - const expandable = { - rowExpandable: () => true, - // expandedRowClassName: () => styles.expandedContentRow, - expandedRowRender: (record) => ( - - ), - }; - - return ( - row.NO_ID_FIELD} - // rowClassName={() => styles.stickyRow} - expandable={expandable} - pagination={false} - /> - ); -}; - -export default Builds; diff --git a/src/components/docs/versions/major-editor-version.tsx b/src/components/docs/versions/major-editor-version.tsx index f7c1a29c..09fcc1e9 100644 --- a/src/components/docs/versions/major-editor-version.tsx +++ b/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', }} > ▶ {/* ▶ */} diff --git a/src/components/pages/about-us/section/header-section/header-section.tsx b/src/components/pages/about-us/section/header-section/header-section.tsx index 05af97bd..2de17eca 100644 --- a/src/components/pages/about-us/section/header-section/header-section.tsx +++ b/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 (
diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx index 400ec8e3..e087c7ad 100644 --- a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx +++ b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx @@ -5,7 +5,7 @@ interface Props { right?: boolean; } -const TimelineItemBullet = ({ right }: Props): JSX.Element => { +const TimelineItemBullet = ({ right }: Props): React.JSX.Element => { const positions = !right ? [ { cx: 54, cy: 6, r: 5.5 }, diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx index 958073f2..b8ccb019 100644 --- a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx +++ b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx @@ -1,11 +1,11 @@ import React from 'react'; interface Props { - title: string | JSX.Element; - subTitle: string | JSX.Element; + title: string | React.JSX.Element; + subTitle: string | React.JSX.Element; } -const TimelineItemText = ({ title, subTitle }: Props): JSX.Element => { +const TimelineItemText = ({ title, subTitle }: Props): React.JSX.Element => { return (

{title}

diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item.tsx index f30774ef..d2eae548 100644 --- a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item.tsx +++ b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item.tsx @@ -5,12 +5,12 @@ import TimelineItemBullet from '@site/src/components/pages/about-us/section/our- import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view'; interface Props { - title: string | JSX.Element; - subTitle: string | JSX.Element; + title: string | React.JSX.Element; + subTitle: string | React.JSX.Element; right?: boolean; } -const TimelineItem = ({ title, subTitle, right }: Props): JSX.Element => { +const TimelineItem = ({ title, subTitle, right }: Props): React.JSX.Element => { return ( <> {right ? ( diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline.tsx index 887c56c6..daa06ac4 100644 --- a/src/components/pages/about-us/section/our-story-section/timeline/timeline.tsx +++ b/src/components/pages/about-us/section/our-story-section/timeline/timeline.tsx @@ -5,7 +5,7 @@ interface Props { children: ReactNodeLike; } -const Timeline = ({ children }: Props): JSX.Element => { +const Timeline = ({ children }: Props): React.JSX.Element => { return
{children}
; }; diff --git a/src/components/pages/about-us/section/the-team-section/profile.tsx b/src/components/pages/about-us/section/the-team-section/profile.tsx index 88767ad1..ad11618b 100644 --- a/src/components/pages/about-us/section/the-team-section/profile.tsx +++ b/src/components/pages/about-us/section/the-team-section/profile.tsx @@ -34,7 +34,7 @@ const Profile = ({ title, continent, social, -}: Props): JSX.Element => { +}: Props): React.JSX.Element => { return (
{ +const TheTeamSection = (): React.JSX.Element => { return (

diff --git a/src/components/pages/home/section/getting-started.tsx b/src/components/pages/home/section/getting-started.tsx index b03e3de7..83fa948d 100644 --- a/src/components/pages/home/section/getting-started.tsx +++ b/src/components/pages/home/section/getting-started.tsx @@ -3,30 +3,31 @@ import React from 'react'; import cx from 'classnames'; import styles from '@site/src/components/pages/home/section/section.module.scss'; import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view'; -import Section from '@site/src/components/pages/home/section/section'; +import GitHubLogo from '@site/static/assets/images/icons/github.svg'; +import GitLabLogo from '@site/static/assets/images/icons/gitlab.svg'; +import CircleCiLogo from '@site/static/assets/images/icons/circleci.svg'; const GettingStarted = () => { return ( -
+ -

Get started

+

Get Started Using:

 - -

My automation runs on

-
+ +
- GitHub + - GitLab + - CircleCI +
-
+ ); }; diff --git a/src/components/pages/home/section/opening-section.tsx b/src/components/pages/home/section/opening-section.tsx index 28494d48..6967deb7 100644 --- a/src/components/pages/home/section/opening-section.tsx +++ b/src/components/pages/home/section/opening-section.tsx @@ -1,19 +1,18 @@ import React, { createRef } from 'react'; -import { Typography } from 'antd'; +import cx from 'classnames'; import { useColorMode } from '@docusaurus/theme-common'; import GameCiLogo from '@site/static/assets/images/game-ci-brand-logo-wordmark.svg'; import GameCiLogoLight from '@site/static/assets/images/game-ci-brand-logo-wordmark-light.svg'; import Section from '@site/src/components/pages/home/section/section'; import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view'; import styles from './section.module.scss'; - -const { Title } = Typography; +import GettingStarted from './getting-started'; const OpeningSection = () => { const ref = createRef(); - const { isDarkTheme } = useColorMode(); - + const { colorMode } = useColorMode(); + const isDarkTheme = colorMode === 'dark'; const Logo = isDarkTheme ? GameCiLogo : GameCiLogoLight; const scrollToNextSection = () => { @@ -28,27 +27,31 @@ const OpeningSection = () => { - + <h1 className={cx('text-sm md:text-2xl', styles.title)}> The fastest and <strong>easiest</strong> way to automatically test and build your game projects - +

- - - + + + ); }; diff --git a/src/components/pages/home/section/pricing-section.tsx b/src/components/pages/home/section/pricing-section.tsx index 773c1a25..731fdf95 100644 --- a/src/components/pages/home/section/pricing-section.tsx +++ b/src/components/pages/home/section/pricing-section.tsx @@ -1,15 +1,107 @@ -import React from 'react'; -import { Typography } from 'antd'; - +import React, { useState } from 'react'; +import cx from 'classnames'; +import { SiGitlab, SiGithub, SiCircleci } from 'react-icons/si'; +import { useColorMode } from '@docusaurus/theme-common'; import Section from '@site/src/components/pages/home/section/section'; import styles from './section.module.scss'; -const { Title } = Typography; +const currencyToSymbol = (currency: string) => { + switch (currency) { + case 'USD': + case 'AUD': + case 'CAD': + default: + return '$'; + + case 'ILS': + return '₪'; + + case 'JYP': + return '¥'; + + case 'RUB': + return '₽'; + + case 'EUR': + return '€'; + } +}; const PricingSection = () => { + const [minutes, setMinutes] = useState(0); + const [currency, setCurrency] = useState('EUR'); + const [selectedVsc, setVsc] = useState(0); + const { colorMode } = useColorMode(); + const isDarkTheme = colorMode === 'dark'; + + const backgroundClassName = isDarkTheme ? 'bg-black' : 'bg-white'; + const totalPriceBackgroundClassName = isDarkTheme ? 'bg-gray-800' : 'bg-gray-200'; + return (
- Pricing calculator <3 +

+ Pricing calculator +

+ +
+
+
+ + + +
+
+ +
+ +
+ + +
0.00 {currencyToSymbol(currency)}
+ +
+
); }; diff --git a/src/components/pages/home/section/section.module.scss b/src/components/pages/home/section/section.module.scss index 5438afe2..0718564e 100644 --- a/src/components/pages/home/section/section.module.scss +++ b/src/components/pages/home/section/section.module.scss @@ -4,33 +4,42 @@ display: flex; flex-direction: column; align-items: center; - justify-content: center; padding: 10vh 10vw; background: var(--ifm-navbar-background-color); + &:nth-of-type(even) { + background-color: var(--ifm-navbar-background-color-dark); + } + color: var(--brand-text); - .title { - color: var(--brand-primary); - width: 70vmin; - text-align: center; - } +} + +.title { + color: var(--brand-primary); + width: 70vmin; + text-align: center; +} + +.subtitle { + color: var(--brand-primary); + text-align: center; + font-size: 7vmin; } .openingSection { min-height: calc(100vh - 64px); - - user-select: none; padding: 0; + position: relative; .logo { - height: 50vmin; - width: 50vmin; + user-select: none; + height: 35vmin; + width: 35vmin; } .title { color: var(--ifm-navbar-background-link-color); - font-size: 3.5vmin; } } @@ -57,17 +66,37 @@ } .gettingStartedSection { + margin-top: 3em; .button { - color: var(--brand-text); - border: 2px solid var(--brand-text); + border: 2px solid rgb(83, 86, 90); border-radius: 3px; - padding: 4px 16px; + padding: 10px 25px; + transition: all 0.25s; + width: 200px; + display: flex; + justify-content: center; + align-items: center; + height: 70px; + + svg { + fill: var(--brand-text); + } + + &:hover { + transform: scale(1.1); + background-color: rgb(84, 86, 88); + + svg { + fill: white; + } + } } } .sponsorsSection { - .linkSpan { - color: var(--brand-text); + .logo { + width: 120px; + fill: var(--brand-text); } } @@ -76,8 +105,58 @@ color: var(--ifm-navbar-background-color); } -.whoIsUsingGameCiSection {} +.whoIsUsingGameCiSection { + .devsList { + // TODO: revisit the choice of layout system when we have more users + @apply flex gap-5 list-none ps-0 flex-wrap justify-center; + + .item { + @apply bg-gray-800; + display: flex; + justify-content: center; + align-items: center; + width: 150px; + padding: 10px 25px; + transition: transform 0.25s; + border-radius: 0.5rem; + min-height: 70px; + + img { + display: block; + } + + &:hover { + transform: scale(1.2); + } + } + } +} -.pricingSection {} +.pricingSection { + > div { + background-color: var(--brand-primary); + } + .vscButton { + svg { + @apply w-5 h-5; + } + @apply rounded-md p-1 mx-1 aspect-square w-11 h-11 transition-all duration-300; + background-color: transparent; + border: 1px solid var(--brand-secondary); + outline: none; + cursor: pointer; + + } + .vscButton.selected { + @apply border-4; + border-color: var(--brand-primary); + } +} .gallerySection {} + + +.versionsSection { + min-height: 100vh; + justify-content: flex-start; +} diff --git a/src/components/pages/home/section/sponsors-section.tsx b/src/components/pages/home/section/sponsors-section.tsx index 30803549..0256374b 100644 --- a/src/components/pages/home/section/sponsors-section.tsx +++ b/src/components/pages/home/section/sponsors-section.tsx @@ -4,6 +4,7 @@ import cx from 'classnames'; import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view'; import styles from '@site/src/components/pages/home/section/section.module.scss'; import Section from '@site/src/components/pages/home/section/section'; +import CircleCiLogo from '@site/static/assets/images/icons/circleci.svg'; const SponsorsSection = () => { return ( @@ -13,26 +14,16 @@ const SponsorsSection = () => { -
- - - - - - - -
+
    +
  • + + + +
    • +
); diff --git a/src/components/pages/home/section/who-is-using-game-ci-section.tsx b/src/components/pages/home/section/who-is-using-game-ci-section.tsx index 6329abea..c311a1c6 100644 --- a/src/components/pages/home/section/who-is-using-game-ci-section.tsx +++ b/src/components/pages/home/section/who-is-using-game-ci-section.tsx @@ -1,12 +1,45 @@ import React from 'react'; +import cx from 'classnames'; import Section from '@site/src/components/pages/home/section/section'; import styles from './section.module.scss'; +const list: DeveloperInfo[] = [ + { + url: 'https://www.madronagames.com/', + logoUrl: '/assets/images/devs/madronagames-logo.png', + name: 'Madrona Games', + }, + { + url: 'https://totemastudio.com/', + logoUrl: '/assets/images/devs/totemastudio-logo.svg', + name: 'Totema Studios', + }, +]; + +type DeveloperInfo = { + url: string; + logoUrl: string; + name: string; +}; + const WhoIsUsingGameCiSection = () => { return (
-

Developers that chose us

- {/* Todo: 5 columns 3 rows for mobile - 10 columns 4 rows for large screens */} +

+ Developers that chose us +

+
    + {list.map((item) => ( +
  • + + {item.name} + +
    • + ))} +
+

+ And more than 3,500 other developers +

); }; diff --git a/src/css/custom.css b/src/css/custom.css index a8144fdc..84f652d4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -36,6 +36,7 @@ --ifm-background-color: #363344; --ifm-navbar-link-color: #ffffff; --ifm-navbar-background-color: #373445; + --ifm-navbar-background-color-dark: #32303F; --brand-primary: rgb(61, 192, 148); --brand-secondary: rgb(55, 52, 69); --brand-tertiary: rgb(240, 242, 245); diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 5fc59d5b..a99cb086 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -4,7 +4,7 @@ import OurStory from '@site/src/components/pages/about-us/section/our-story-sect import HeaderSection from '@site/src/components/pages/about-us/section/header-section/header-section'; import TheTeamSection from '@site/src/components/pages/about-us/section/the-team-section/the-team-section'; -export default function About(): JSX.Element { +export default function About(): React.JSX.Element { return ( diff --git a/src/pages/docs/docker/versions.tsx b/src/pages/docs/docker/versions.tsx index 54d73553..969c82b1 100644 --- a/src/pages/docs/docker/versions.tsx +++ b/src/pages/docs/docker/versions.tsx @@ -42,14 +42,14 @@ function VersionsAntdWrapper() { return ; } -export default function VersionsPage(): JSX.Element { +export default function VersionsPage(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( -
+
Loading...
}> {() => } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 293f2eef..6863f929 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,21 +2,26 @@ import React from 'react'; import Layout from '@theme/Layout'; import ThePerksSection from '@site/src/components/pages/home/section/the-perks-section'; import OpeningSection from '@site/src/components/pages/home/section/opening-section'; -import GettingStarted from '@site/src/components/pages/home/section/getting-started'; import SponsorsSection from '@site/src/components/pages/home/section/sponsors-section'; +// import VisualRepresentationOfWhatWeDoSection from '@site/src/components/pages/home/section/visual-representation-of-what-we-do'; +// import OurVisionSection from '@site/src/components/pages/home/section/our-vision-section'; +import PricingSection from '@site/src/components/pages/home/section/pricing-section'; +// import CodeExamplesSection from '@site/src/components/pages/home/section/code-examples-section'; +import WhoIsUsingGameCiSection from '@site/src/components/pages/home/section/who-is-using-game-ci-section'; +// import GallerySection from '@site/src/components/pages/home/section/gallery-section'; -export default function Home(): JSX.Element { +export default function Home(): React.JSX.Element { return ( + {/* */} {/* */} {/* */} - - {/* */} + {/* */} - {/* */} + {/* */} ); diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx index f0ce32a4..5cfc126f 100644 --- a/src/theme/Root.tsx +++ b/src/theme/Root.tsx @@ -15,7 +15,7 @@ interface Props { children: React.ReactNode; } -function Root({ children }: Props): JSX.Element { +function Root({ children }: Props): React.JSX.Element { return ( diff --git a/static/assets/images/devs/madronagames-logo.png b/static/assets/images/devs/madronagames-logo.png new file mode 100644 index 00000000..07d5d92f Binary files /dev/null and b/static/assets/images/devs/madronagames-logo.png differ diff --git a/static/assets/images/devs/totemastudio-logo.svg b/static/assets/images/devs/totemastudio-logo.svg new file mode 100644 index 00000000..b64c21c5 --- /dev/null +++ b/static/assets/images/devs/totemastudio-logo.svg @@ -0,0 +1,238 @@ + +image/svg+xml diff --git a/static/assets/images/icons/circleci.svg b/static/assets/images/icons/circleci.svg new file mode 100644 index 00000000..899b0bd4 --- /dev/null +++ b/static/assets/images/icons/circleci.svg @@ -0,0 +1,6 @@ + + CircleCI + + \ No newline at end of file diff --git a/static/assets/images/icons/github.svg b/static/assets/images/icons/github.svg new file mode 100644 index 00000000..2fed493e --- /dev/null +++ b/static/assets/images/icons/github.svg @@ -0,0 +1,19 @@ + + GitHub + + + + + + + + + + \ No newline at end of file diff --git a/static/assets/images/icons/gitlab.svg b/static/assets/images/icons/gitlab.svg new file mode 100644 index 00000000..18066e0c --- /dev/null +++ b/static/assets/images/icons/gitlab.svg @@ -0,0 +1,18 @@ + + GitLab + + + + + + + + + + \ No newline at end of file diff --git a/tests/test-utils.tsx b/tests/test-utils.tsx index 958fa56b..9b2902c3 100644 --- a/tests/test-utils.tsx +++ b/tests/test-utils.tsx @@ -14,7 +14,7 @@ const Providers = ({ children }) => { // ) }; -const customRender = (ui: JSX.Element, options = {}): RenderResult => +const customRender = (ui: React.JSX.Element, options = {}): RenderResult => render(ui, { wrapper: Providers, ...options }); // re-export everything