diff --git a/docs/content/deployments/server/deploying-on-qovery.md b/docs/content/deployments/server/deploying-on-qovery.md index e2a4f990b0..0782bde33a 100644 --- a/docs/content/deployments/server/deploying-on-qovery.md +++ b/docs/content/deployments/server/deploying-on-qovery.md @@ -1,138 +1,503 @@ -# Deploying on Qovery +# Deploy Your Medusa Server on Qovery -This is a guide for deploying a Medusa project to Qovery. Qovery is a Continuous Deployment Platform, that provides you with the developer experience of Heroku on top of your cloud provider (e.g. AWS, DigitalOcean). +In this document, you'll learn how to deploy your Medusa server on Qovery with the help of Terraform. + +[Qovery](https://www.qovery.com/) is a Continuous Deployment Platform that provides you with the developer experience of Heroku on top of your cloud provider (e.g. AWS, DigitalOcean). + +[Terraform](https://www.terraform.io/) is an open source infrastructure as code software (IaC) tool that allows you to easily deploy apps like Medusa and the resources it needs to Qovery using a single script. :::note -We assume, that you are currently running a local instance of Medusa. If not, check out our [Quickstart](https://docs.medusajs.com/quickstart/quick-start) or use `npx create-medusa-app` to set up your application in a matter of minutes. For the latter, see [this guide](../../usage/create-medusa-app.mdx) for a small walkthrough. +This tutorial explains how to deploy Medusa to a Qovery organization with an AWS cluster. If you want to use a cloud provider other than AWS, you need to make changes to some of the keys and variables used in the tutorial. ::: -### 1. Qovery Console +## Prerequisites -Create an account on [Qovery](https://www.qovery.com/) on their free community plan and jump into the console. +### Medusa Server -### 2. Setup +It is assumed that you already have a Medusa server installed locally. If you don’t, please follow our [quickstart guide](../../quickstart/quick-start.md). -Create a project and an environment. +Furthermore, your Medusa server should be configured to work with PostgreSQL and Redis. You can follow the [Configure your Server documentation](../../usage/configurations.md) to learn how to do that. -### 3. Add your Medusa app +### Needed Accounts -Add a new app to your Qovery environment and connect the Git repository that holds your Medusa project. In your application settings, set the port to 9000 unless something else is specified in your setup. - -:::note - -If you used our `npx` starter, your repository will most likely hold all components; storefront, admin and backend. Ensure that **Root application path** in Qovery is pointing to your Medusa project (`/backend`). - -::: - -### 4. Add a database - -Navigate to your environment overview and add the databases required by Medusa. - -- Add Postgres database version 10, 11 or 12 -- Add Redis database version 5 or 6 - -### 5. Configure Medusa - -Our Medusa project needs a bit of configuration to fit the needs of Qovery. - -#### Update `medusa-config.js` - -First, add the Postgres and Redis database url to your `medusa-config.js`. In Qovery, click on your Medusa app in the environment overview. Navigate to environment variables in the sidebar on the left. Among the secret variables you should find your database urls. They should look something like this: - -```bash -QOVERY_REDIS_123456789_DATABASE_URL -QOVERY_POSTGRESQL_123456789_DATABASE_URL -``` - -Add these to your `medusa-config.js`. - -```js -const DATABASE_URL = process.env.QOVERY_POSTGRESQL_123456789_DATABASE_URL -const REDIS_URL= process.env.QOVERY_REDIS_123456789_DATABASE_URL -``` - -Furthermore, update `module.exports` to include the following: - -```js -module.exports = { - projectConfig: { - redis_url: REDIS_URL, - database_url: DATABASE_URL, - database_type: "postgres", - store_cors: STORE_CORS, - admin_cors: ADMIN_CORS, - database_extra: { } - }, - plugins, -}; -``` - -:::caution IMPORTANT - -We are using the Qovery community plan, that does not allow SSL connections for the database, so this is disabled. - -In a production environment, you would need the following in the config: - `database_extra: { ssl: { rejectUnauthorized: false } }` - -::: - -#### Add some extra variables - -We need to add a couple of more environment variables in Qovery. Add the following variables in your Console with an application scope: - -```bash -JTW_SECRET=something_secret_jwt -COOKIE_SECRET=something_secret_cookie -``` +- A [Qovery](https://start.qovery.com/) account with a created organization. Qovery provides a free plan that you can use. +- An [AWS](https://aws.amazon.com/) account that you’ll connect to a Qovery cluster. +- A [GitHub](https://github.com/) account to create a repository to host your server’s codebase. :::tip -Make sure to use actual secrets in a production environment. +If you want to use another [Git Provider supported by Qovery](https://hub.qovery.com/docs/useful-resources/faq/#what-git-providers-do-you-support), it’s possible to follow along with this guide but you’ll have to perform the equivalent steps in your Git Provider. ::: -#### Update `package.json` +### Required Tools -Update `scripts` to the following: +- Git’s CLI tool. You can follow [this documentation to learn how to install it for your operating system](../../tutorial/0-set-up-your-development-environment.mdx#git). +- Terraform’s CLI tool. You can follow [this guide to install it based on your operating system](https://www.terraform.io/downloads). +- Qovery’s CLI tool. You can follow [this guide to install it based on your operating system](https://hub.qovery.com/docs/using-qovery/interface/cli/#install). -```json -"scripts": { - "serve": "medusa start", - "start": "medusa migrations run && medusa start", - "prepare": "npm run build", - "build": "babel src -d dist --extensions \".ts,.js\"" - }, +## Create GitHub Repository + +Before you can deploy your Medusa server you need to create a GitHub repository and push the code base to it. + +On GitHub, click the plus icon at the top right, then click New Repository. + +![Click plus icon at the top right](https://i.imgur.com/0YlxBRi.png) + +You’ll then be redirected to a new page with a form. In the form, enter the Repository Name then scroll down and click Create repository. + +![An image of the Create Repository form](https://i.imgur.com/YPYXAF2.png) + +### Push Code to GitHub Repository + +The next step is to push the code to the GitHub repository you just created. + +After creating the repository, you’ll be redirected to the repository’s page. On that page, you should see a URL that you can copy to connect your repository to a local directory. + +![An image of the GitHub URL in a new repository](https://i.imgur.com/pHfSTuT.png) + +Copy the link. Then, open your terminal in the directory that holds your Medusa server codebase and run the following commands: + +```bash +git init +git remote add origin ``` -### 6. Deploy Medusa +Where `` is the URL you just copied. -Finally, deploy your Redis and Postgres followed by your Medusa application. - -#### Deploy databases - -In your environment overview in Qovery, deploy your databases one after the other. Only when these are deployed, proceed to next step. - -#### Push changes to your repository - -To initialise your first build Qovery, simply commit and push your changes. +Then, add, commit, and push the changes into the repository: ```bash git add . -git commit -m "chore: Qovery setup" -git push origin main +git commit -m "initial commit" +git push origin master ``` -### 6. Try it out! +After pushing the changes, you can find the files in your GitHub repository. -In Qovery, click on your Medusa app in the environment overview. In the top right you are able to open up your application. Navigate to `/health` to ensure, that the app is running. +## Deploy to Qovery -### What's next? +In this section, you’ll learn how to deploy your Medusa server to Qovery with the help of Terraform. -You now have an application running on Qovery. This can be scaled and configured to fit your business needs. As mentioned, we used the community plan, so this should be upgraded when moving to production. +### Sign in Using Qovery CLI -Furthermore, you can deploy Medusa Admin for your application, such that you can start managing your store from an interface. +If you haven’t logged in to your Qovery account using the Qovery CLI tool yet, run the following command: -- [Deploy Admin on Netlify](../admin/deploying-on-netlify.md) -- Deploy Admin on Gatsby Cloud (Coming soon) +```bash +qovery auth +``` + +This opens a new page in your browser to log in to Qovery. + +### Retrieve Qovery Access Token + +Terraform needs an access token from Qovery so that it can deploy to your Qovery organization. + +Run the following command to retrieve a Qovery access token: + +```bash +qovery token +``` + +You’ll be prompted to choose an organization and add a name and description for the token. Once the command finishes executing, you’ll be given an access token. Save it to use in the next steps. + +### Add Terraform Variables + +You need to add some variables to use for your Medusa deployment to Qovery. + +In the root directory of your Medusa server, create the file `variables.tf` with the following content: + +``` +variable "qovery_organization_id" { + type = string + nullable = false + description = "ID of Qovery organization" +} + +variable "qovery_create_cluster" { + type = bool + nullable = false + default = true + description = "Whether to create a new cluster or not" +} + +variable "qovery_cluster_id" { + type = string + nullable = true + default = "" + description = "The ID of the cluster you want to use if you don't want to create a new one. You can get the Cluster ID using this endpoint: https://api-doc.qovery.com/#tag/Clusters/operation/listOrganizationCluster" +} + +variable "qovery_access_token" { + type = string + sensitive = true + nullable = false + description = "Qovery's access token generated with the command 'qovery token'" +} + +variable "aws_access_key_id" { + type = string + sensitive = true + nullable = true + description = "Necessary only if creating a new cluster" +} + +variable "aws_secret_access_key" { + type = string + sensitive = true + nullable = true + description = "Necessary only if creating a new cluster" +} + +variable "aws_region" { + type = string + nullable = false + default = "us-east-2" + description = "Necessary only if creating a new cluster" +} + +variable "medusa_jwt_secret" { + type = string + default = "your-super-secret" # TO CHANGE FOR PRODUCTION + sensitive = true + nullable = false + description = "The JWT Secret to use in Medusa" +} + +variable "medusa_cookie_secret" { + type = string + default = "your-super-secret-pt2" # TO CHANGE FOR PRODUCTION + sensitive = true + nullable = false + description = "The Cookie Secret to use in Medusa" +} + +variable "git_url" { + type = string + nullable = false + description = "The Git repo associated with the qovery app. Make sure it ends with '.git'." +} + +variable "git_branch" { + type = string + nullable = false + default = "master" + description = "The branch of the Git repo. Default is master" +} + +variable "git_root_path" { + type = string + nullable = false + default = "/" + description = "The base directory to run the app from. Default is /" +} +``` + +This defines the required variables and sets some of them as `secret` to ensure their values aren’t printed in the console during deployment. + +Next, to set the values of these variables, create the file `terraform.tfvars` with the following content: + +```bash +qovery_organization_id = "" + +# Optional +qovery_create_cluster = true + +# Optional +qovery_cluster_id = null + +qovery_access_token = "" + +# Optional +aws_access_key_id = null + +# Optional +aws_secret_access_key = null + +# Optional +aws_region = null + +# Optional +medusa_jwt_secret = "secret" + +# Optional +medusa_cookie_secret = "secret" + +git_url = "" + +# Optional +git_branch = "master" + +# Optional +git_root_path = "/" +``` + +Here’s an explanation of each of the variables and how to retrieve their variables: + +- `qovery_organization_id`: The ID of the Qovery organization to deploy the server to. It can be found by logging into your [Qovery Console](https://console.qovery.com/). You’ll be redirected to the organization’s main page with a URL of the format `https://console.qovery.com/platform/organization//projects`. Copy the `` in the URL to use as the value of this field. +- `qovery_create_cluster`: A boolean value indicating whether a new cluster should be created or not. If you already have a cluster that you want to use, you can set the value to `false` and set the value of `qovery_cluster_id`. Otherwise, set the value to `true` and set the values of `aws_access_key_id`, `aws_secret_access_key`, and `aws_region`. +- `qovery_cluster_id`: The ID of the existing cluster to use (if `qovery_create_cluster` is set to `false`). You can use [Qovery’s REST API](https://api-doc.qovery.com/#tag/Clusters/operation/listOrganizationCluster) to retrieve the cluster ID. You can use the token you generated earlier for the Bearer authorization token as explained [here](https://hub.qovery.com/docs/using-qovery/interface/cli/#generate-api-token). +- `aws_access_key_id`, `aws_secret_access_key`, and `aws_region`: The credentials used to create the cluster (if `qovery_create_cluster` is set to `true`). You can refer to [this guide](https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys) to learn how to retrieve the `aws_access_key_id` and `aws_secret_access_key`. +- `medusa_jwt_secret`: The value of the JWT Secret on your Medusa server. It’s recommended to use a strong randomly generated string. +- `medusa_cookie_secret`: The value of the Cookie Secret on your Medusa server. It’s recommended to use a strong randomly generated string. +- `git_url`: The URL of the Git repository you created earlier. Make sure it ends with `.git`. +- `git_branch`: The branch to use in the GitHub repo. By default it’s `master`. +- `git_root_path`: The root path of the Medusa server. By default, it’s `/`. If you are hosting your Medusa server in a monorepo in a nested directory, you need to change the value of this variable. + +### Add Terraform Configuration File + +In the root directory of your Medusa server, create the file `main.tf` with the following content: + +```bash +# Install the Qovery Terraform provider +terraform { + required_providers { + qovery = { + source = "qovery/qovery" + } + } +} + +# Set the access token +provider "qovery" { + token = var.qovery_access_token +} + +# Create the AWS credentials if qovery_create_cluster is true +resource "qovery_aws_credentials" "my_aws_creds" { + organization_id = var.qovery_organization_id + name = "My AWS Creds" + access_key_id = var.aws_access_key_id + secret_access_key = var.aws_secret_access_key + count = var.qovery_create_cluster ? 1 : 0 +} + +# Create a new cluster if qovery_create_cluster is true +resource "qovery_cluster" "my_cluster" { + organization_id = var.qovery_organization_id + credentials_id = qovery_aws_credentials.my_aws_creds[0].id + name = "Demo Medusa cluster" + description = "Terraform medusa cluster" + cloud_provider = "AWS" + region = var.aws_region + instance_type = "T3A_MEDIUM" + min_running_nodes = 3 + max_running_nodes = 4 + state = "RUNNING" + count = var.qovery_create_cluster ? 1 : 0 + + depends_on = [ + qovery_aws_credentials.my_aws_creds + ] +} + +# Create a new project +resource "qovery_project" "my_project" { + organization_id = var.qovery_organization_id + name = "Medusa" + + depends_on = [ + qovery_cluster.my_cluster + ] +} + +# Create a new environment in the project +resource "qovery_environment" "production" { + project_id = qovery_project.my_project.id + name = "production" + mode = "PRODUCTION" + cluster_id = !var.qovery_create_cluster && var.qovery_cluster_id != "" ? var.qovery_cluster_id : qovery_cluster.my_cluster[0].id + + depends_on = [ + qovery_project.my_project + ] +} + +# Create a PostgreSQL database in the environment +resource "qovery_database" "my_psql_database" { + environment_id = qovery_environment.production.id + name = "medusa psql db" + type = "POSTGRESQL" + version = "13" + mode = "MANAGED" # Use AWS RDS for PostgreSQL (backup and PITR automatically configured by Qovery) + storage = 10 # 10GB of storage + accessibility = "PRIVATE" # do not make it publicly accessible + state = "RUNNING" + + depends_on = [ + qovery_environment.production, + ] +} + +# Create a Redis database in the environment +resource "qovery_database" "my_redis_database" { + environment_id = qovery_environment.production.id + name = "medusa redis db" + type = "REDIS" + version = "6" + mode = "CONTAINER" + storage = 10 # 10GB of storage + accessibility = "PRIVATE" + state = "RUNNING" + + depends_on = [ + qovery_environment.production, + qovery_database.my_psql_database, + ] +} + +# Create the Medusa application with all the configuration needed +resource "qovery_application" "medusa_app" { + environment_id = qovery_environment.production.id + name = "medusa app" + cpu = 1000 + memory = 512 + state = "RUNNING" + git_repository = { + url = var.git_url + branch = var.git_branch + root_path = var.git_root_path + } + build_mode = "DOCKER" + dockerfile_path = "Dockerfile" + min_running_instances = 1 + max_running_instances = 1 + ports = [ + { + internal_port = 9000 + external_port = 443 + protocol = "HTTP" + publicly_accessible = true + } + ] + environment_variables = [ + { + key = "PORT" + value = "9000" + }, + { + key = "NODE_ENV" + value = "production" + }, + { + key = "NPM_CONFIG_PRODUCTION" + value = "false" + } + ] + secrets = [ + { + key = "JWT_SECRET" + value = var.medusa_jwt_secret + }, + { + key = "COOKIE_SECRET" + value = var.medusa_cookie_secret + }, + { + key = "DATABASE_URL" + value = "postgresql://${qovery_database.my_psql_database.login}:${qovery_database.my_psql_database.password}@${qovery_database.my_psql_database.internal_host}:${qovery_database.my_psql_database.port}/postgres" + }, + { + key = "REDIS_URL" + value = "redis://${qovery_database.my_redis_database.login}:${qovery_database.my_redis_database.password}@${qovery_database.my_redis_database.internal_host}:${qovery_database.my_redis_database.port}" + } + ] + + depends_on = [ + qovery_environment.production, + qovery_database.my_psql_database, + qovery_database.my_redis_database, + ] +} +``` + +This is a Terraform configuration file that creates all the resources necessary to deploy Medusa to Qovery. If you set `qovery_create_cluster` to `true`, it will create new credentials and a cluster in your Qovery organization using the AWS credentials you set in the variables. + +Next, it creates a new project, environment, PostgreSQL database, and a Redis database in your Qovery organization. + +Finally, it creates the Medusa app and sets all the necessary environment variables needed to run it. + +:::tip + +This deployment uses Docker. By default, you should have the files [`Dockerfile`](https://github.com/medusajs/medusa-starter-default/blob/master/Dockerfile) and [`docker-compose.yml`](https://github.com/medusajs/medusa-starter-default/blob/master/docker-compose.yml)` in the root of your Medusa server. + +::: + +### Change develop.sh + +The `Dockerfile` runs the file `develop.sh` to start the server. Change the content of `develop.sh` to the following: + +```bash +#!/bin/bash + +#Run migrations to ensure the database is updated +medusa migrations run + +#Start production server +medusa start +``` + +This makes sure the production server is started and not a development server. + +### Initialize Terraform + +In your terminal, run the following command to initialize Terraform: + +```bash +terraform init +``` + +This will install the Qovery Terraform provider and have everything ready before the deployment. + +### Deploy the Medusa App + +Finally, run the following command to deploy your Medusa app: + +```bash +terraform apply +``` + +You’ll be asked to confirm creating all the necessary resources in Qovery. Enter `yes` and the deployment will start. + +The deployment can take up to 30 minutes to finish. You’ll be able to track its status both in your terminal and in the [Qovery Console](https://console.qovery.com/). + +:::tip + +If you run into any errors while running this command, you can just re-run it after fixing the errors and it will pick up from where it left off. For example, if an error occurred after the creation of the PostgreSQL database, terraform continues from the next task and does not recreate the PostgreSQL database. + +::: + +## Test your Server + +Once the command finishes and the deployment is successful, you can access your server in the [Qovery Console](https://console.qovery.com/). Go to the project, environment, then the app that you created using Terraform and Qovery. In the app, click the Open button at the top right to open your website in a new tab. + +![open button at the top right](https://i.imgur.com/Ji59ZSJ.png) + +You can access any of the endpoints on your server using the server URL. For example, you can get the list of products using the endpoint `/store/products`. + +## Run Commands on Your Server + +To run commands on your server, run the following command: + +```bash +qovery shell +``` + +You’ll be asked to either confirm the existing context or choose a new context. + +After choosing your Medusa app in the context, you should be able to execute any command in the directory of your Medusa server. For example, you can run the [`user` command using Medusa’s CLI tool to create a new user](../../cli/reference.md#user). + +## Add Environment Variables + +You’ll likely need to add environment variables later such as Admin CORS and Store CORS variables. + +To add environment variables, in your [Qovery Console](https://console.qovery.com/) go to the Medusa app and choose Environment Variables from the sidebar. You can add environment variables here at any point later on. + +![Environment Variables in the sidebar](https://i.imgur.com/aQl7zdz.png) + +## What’s Next 🚀 + +- Learn how to [deploy the Medusa Admin to Netlify](../admin/deploying-on-netlify.md). +- Learn how to [deploy the Gatsby Storefront to Netlify](../storefront/deploying-gatsby-on-netlify.md). diff --git a/www/docs/docusaurus.config.js b/www/docs/docusaurus.config.js index e557498440..c051b4bd74 100644 --- a/www/docs/docusaurus.config.js +++ b/www/docs/docusaurus.config.js @@ -72,6 +72,10 @@ module.exports = { target: "_self", label: "API Reference", }, + { + to: "cli/reference", + label: "CLI Reference", + }, { to: "advanced/backend/subscribers/events-list", label: "Events Reference", diff --git a/www/docs/sidebars.js b/www/docs/sidebars.js index fbc0eaf994..8894a10dab 100644 --- a/www/docs/sidebars.js +++ b/www/docs/sidebars.js @@ -85,17 +85,26 @@ module.exports = { { type: "doc", id: "deployments/server/deploying-on-heroku", - label: "Deploy on Heroku" + label: "Deploy on Heroku", + customProps: { + image: 'https://i.imgur.com/xNvxSkf.png' + } }, { type: "doc", id: "deployments/server/deploying-on-digital-ocean", - label: "Deploy on DigitalOcean" + label: "Deploy on DigitalOcean", + customProps: { + image: 'https://i.imgur.com/aahqJp4.png' + } }, { type: "doc", id: "deployments/server/deploying-on-qovery", - label: "Deploy on Qovery" + label: "Deploy on Qovery", + customProps: { + image: 'https://i.imgur.com/qOvY2dN.png' + } } ] }, @@ -110,7 +119,10 @@ module.exports = { { type: "doc", id: "deployments/admin/deploying-on-netlify", - label: "Deploy on Netlify" + label: "Deploy on Netlify", + customProps: { + image: 'https://i.imgur.com/gCbsCvX.png' + } }, ] }, @@ -125,7 +137,10 @@ module.exports = { { type: "doc", id: "deployments/storefront/deploying-gatsby-on-netlify", - label: "Deploy Gatsby on Netlify" + label: "Deploy Gatsby on Netlify", + customProps: { + image: 'https://i.imgur.com/gCbsCvX.png' + } }, ] }, diff --git a/www/docs/src/css/custom.css b/www/docs/src/css/custom.css index c92191e425..8973844eed 100644 --- a/www/docs/src/css/custom.css +++ b/www/docs/src/css/custom.css @@ -115,8 +115,7 @@ html[data-theme="dark"] footer:not(.theme-doc-footer) { } html[data-theme="dark"] .card { - border: 1px solid #fff; - color: var(--ifm-color-primary); + border: 1px solid var(--ifm-color-primary); } .navbar { @@ -286,7 +285,7 @@ details summary { } .theme-doc-markdown a:not(.box-link):hover { - color: var(--ifm-color-primary-darkest); + color: rgba(255, 255, 255, 0.8); text-decoration: none; } diff --git a/www/docs/src/theme/DocCard/index.js b/www/docs/src/theme/DocCard/index.js new file mode 100644 index 0000000000..06ae171f6d --- /dev/null +++ b/www/docs/src/theme/DocCard/index.js @@ -0,0 +1,100 @@ +import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common'; + +import Link from '@docusaurus/Link'; +/** + * 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. + */ +import React from 'react'; +import clsx from 'clsx'; +import isInternalUrl from '@docusaurus/isInternalUrl'; +import styles from './styles.module.css'; +import {translate} from '@docusaurus/Translate'; + +function CardContainer({href, children}) { + const className = clsx( + 'card margin-bottom--lg padding--lg', + styles.cardContainer, + href && styles.cardContainerLink, + ); + return href ? ( + + {children} + + ) : ( +
{children}
+ ); +} + +function CardLayout({href, icon, title, description}) { + return ( + +

+ {icon} {title} +

+
+ {description} +
+ + ); +} + +function CardCategory({item}) { + const href = findFirstCategoryLink(item); + return ( + + ); +} + +function CardLink({item}) { + let icon; + if (item.customProps && item.customProps.image) { + icon = {item.label}; + } else if (item.customProps && item.customProps.icon) { + icon = item.customProps.icon; + } else { + icon = isInternalUrl(item.href) ? '📄️' : '🔗'; + } + + const doc = useDocById(item.docId ?? undefined); + return ( + + ); +} + +export default function DocCard({item}) { + switch (item.type) { + case 'link': + return ; + + case 'category': + return ; + + default: + throw new Error(`unknown item type ${JSON.stringify(item)}`); + } +} diff --git a/www/docs/src/theme/DocCard/styles.module.css b/www/docs/src/theme/DocCard/styles.module.css new file mode 100644 index 0000000000..8e90cce6f7 --- /dev/null +++ b/www/docs/src/theme/DocCard/styles.module.css @@ -0,0 +1,48 @@ +/** + * 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. + */ + +.cardContainer { + height: 8rem; + color: var(--ifm-color-emphasis-800); + --ifm-link-color: var(--ifm-color-emphasis-800); + --ifm-link-hover-color: var(--ifm-color-emphasis-800); + --ifm-link-hover-decoration: none; + + /* box-shadow: var(--ifm-global-shadow-lw); */ + box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%); + border: 1px solid var(--ifm-color-emphasis-200); + transition: box-shadow var(--ifm-transition-fast) ease, + background-color var(--ifm-transition-fast) ease; +} + +.cardContainer.cardContainerLink:hover { + /* box-shadow: var(--ifm-global-shadow-md); */ + box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); +} + +[data-theme='dark'] .cardContainer.cardContainerLink:hover { + --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */ +} + +.cardContainer:not(.cardContainerLink) { + cursor: not-allowed; +} + +.cardTitle { + font-size: 1.2rem; + min-height: 1.2rem; +} + +.cardTitle img { + vertical-align: bottom; + margin-right: 2px; +} + +.cardDescription { + font-size: 0.8rem; + min-height: 0.8rem; +}