From ac7064afa5bc1a7888ee0ff24cd39efdda3185cd Mon Sep 17 00:00:00 2001
From: Nabarun Gogoi <nabarun@deepstacksoft.com>
Date: Mon, 5 Feb 2024 14:56:28 +0530
Subject: [PATCH] Set subdomain for project and set URL for each deployment
 (#52)

* Display current deployment info in overview tab

* Add assign domain dialog box in deployments

* Add empty link for project settings in assign domain dialog box

* Use react router dom link

* Add sub domain to project entity

* Add deployment url with custom generated string

* Set nano id to deployment id

* Add sub domain while creating new project

* Use same id as in url

* Update readme steps for production build

* Update README

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
---
 README.md                                     |  22 ++
 packages/backend/package.json                 |   2 +
 packages/backend/src/constants.ts             |   2 +
 packages/backend/src/database.ts              |  21 +-
 packages/backend/src/entity/Deployment.ts     |  10 +-
 packages/backend/src/entity/Project.ts        |   3 +
 packages/backend/src/schema.gql               |   2 +
 packages/backend/src/utils.ts                 |   1 +
 .../backend/test/fixtures/deployments.json    |  40 ++-
 packages/backend/test/fixtures/projects.json  |  15 +-
 packages/backend/test/initialize-db.ts        |   4 +-
 packages/frontend/package.json                |   1 +
 .../projects/project/DeploymentsTabPanel.tsx  |   7 +-
 .../projects/project/OverviewTabPanel.tsx     |  42 +--
 .../projects/project/ProjectTabs.tsx          |   2 +-
 .../deployments/AssignDomainDialog.tsx        |  52 ++++
 .../deployments/DeploymentDetailsCard.tsx     |  22 +-
 packages/gql-client/src/queries.ts            |   7 +
 packages/gql-client/src/types.ts              |   2 +
 yarn.lock                                     | 260 +++++++++++++++++-
 20 files changed, 460 insertions(+), 57 deletions(-)
 create mode 100644 packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx

diff --git a/README.md b/README.md
index 354bb05f..27cb4f2e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # snowballtools
 
+## Setup
+
 - Clone the  `snowballtools` repo
 
   ```bash
@@ -18,6 +20,8 @@
   yarn build --ignore frontend
   ```
 
+## Backend
+
 - Change directory to `packages/backend`
 
   ```bash
@@ -43,6 +47,8 @@
   yarn start
   ```
 
+## Frontend
+
 - Change directory to `packages/frontend` in a new terminal
 
   ```bash
@@ -61,6 +67,8 @@
   REACT_APP_GITHUB_CLIENT_ID = <CLIENT_ID>
   ```
 
+### Development
+
 - Start the React application
 
   ```bash
@@ -68,3 +76,17 @@
   ```
 
 - The React application will be running in `http://localhost:3000/`
+
+### Production
+
+- Build the React application
+
+  ```bash
+  yarn build
+  ```
+
+- Use a web server for hosting static built files
+
+  ```bash
+  python3 -m http.server -d build 3000
+  ```
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 68a9540e..9505b686 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -15,6 +15,8 @@
     "express": "^4.18.2",
     "fs-extra": "^11.2.0",
     "graphql": "^16.8.1",
+    "nanoid": "3",
+    "nanoid-dictionary": "^5.0.0-beta.1",
     "reflect-metadata": "^0.2.1",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
diff --git a/packages/backend/src/constants.ts b/packages/backend/src/constants.ts
index 9da4aae2..b91868d4 100644
--- a/packages/backend/src/constants.ts
+++ b/packages/backend/src/constants.ts
@@ -4,3 +4,5 @@ export const DEFAULT_GQL_PATH = '/graphql';
 
 // Note: temporary hardcoded user, later to be derived from auth token
 export const USER_ID = 1;
+
+export const PROJECT_DOMAIN = 'snowball.xyz';
diff --git a/packages/backend/src/database.ts b/packages/backend/src/database.ts
index f8dc062c..263bc516 100644
--- a/packages/backend/src/database.ts
+++ b/packages/backend/src/database.ts
@@ -2,6 +2,8 @@ import { DataSource, DeepPartial } from 'typeorm';
 import path from 'path';
 import debug from 'debug';
 import assert from 'assert';
+import { customAlphabet } from 'nanoid';
+import { lowercase, numbers } from 'nanoid-dictionary';
 
 import { DatabaseConfig } from './config';
 import { User } from './entity/User';
@@ -11,9 +13,12 @@ import { Deployment, Environment } from './entity/Deployment';
 import { Permission, ProjectMember } from './entity/ProjectMember';
 import { EnvironmentVariable } from './entity/EnvironmentVariable';
 import { Domain } from './entity/Domain';
+import { PROJECT_DOMAIN } from './constants';
 
 const log = debug('snowball:database');
 
+const nanoid = customAlphabet(lowercase + numbers, 8);
+
 // TODO: Fix order of methods
 export class Database {
   private dataSource: DataSource;
@@ -90,6 +95,7 @@ export class Database {
     const project = await projectRepository
       .createQueryBuilder('project')
       .leftJoinAndSelect('project.deployments', 'deployments', 'deployments.isCurrent = true')
+      .leftJoinAndSelect('deployments.createdBy', 'user')
       .leftJoinAndSelect('deployments.domain', 'domain')
       .leftJoinAndSelect('project.owner', 'owner')
       .leftJoinAndSelect('project.organization', 'organization')
@@ -314,7 +320,7 @@ export class Database {
 
   async updateDeploymentById (deploymentId: string, updates: DeepPartial<Deployment>): Promise<boolean> {
     const deploymentRepository = this.dataSource.getRepository(Deployment);
-    const updateResult = await deploymentRepository.update({ id: Number(deploymentId) }, updates);
+    const updateResult = await deploymentRepository.update({ id: deploymentId }, updates);
 
     if (updateResult.affected) {
       return updateResult.affected > 0;
@@ -341,6 +347,8 @@ export class Database {
       id: Number(projectDetails.organizationId)
     });
 
+    newProject.subDomain = `${newProject.name}.${PROJECT_DOMAIN}`;
+
     return projectRepository.save(newProject);
   }
 
@@ -364,14 +372,14 @@ export class Database {
         createdBy: true
       },
       where: {
-        id: Number(deploymentId)
+        id: deploymentId
       }
     });
 
     if (deployment === null) {
       throw new Error('Deployment not found');
     }
-    const { id, createdAt, updatedAt, ...updatedDeployment } = deployment;
+    const { createdAt, updatedAt, ...updatedDeployment } = deployment;
 
     if (updatedDeployment.environment === Environment.Production) {
       // TODO: Put isCurrent field in project
@@ -381,7 +389,10 @@ export class Database {
       });
     }
 
-    await deploymentRepository.update({ id: Number(deploymentId) }, { domain: null, isCurrent: false });
+    await deploymentRepository.update({ id: deploymentId }, { domain: null, isCurrent: false });
+
+    updatedDeployment.id = nanoid();
+    updatedDeployment.url = `${updatedDeployment.id}-${updatedDeployment.project.subDomain}`;
 
     return deploymentRepository.save(updatedDeployment);
   }
@@ -442,7 +453,7 @@ export class Database {
 
     const oldCurrentDeploymentUpdate = await deploymentRepository.update({ project: { id: projectId }, isCurrent: true }, { isCurrent: false, domain: null });
 
-    const newCurrentDeploymentUpdate = await deploymentRepository.update({ id: Number(deploymentId) }, { isCurrent: true, domain: oldCurrentDeployment?.domain });
+    const newCurrentDeploymentUpdate = await deploymentRepository.update({ id: deploymentId }, { isCurrent: true, domain: oldCurrentDeployment?.domain });
 
     if (oldCurrentDeploymentUpdate.affected && newCurrentDeploymentUpdate.affected) {
       return oldCurrentDeploymentUpdate.affected > 0 && newCurrentDeploymentUpdate.affected > 0;
diff --git a/packages/backend/src/entity/Deployment.ts b/packages/backend/src/entity/Deployment.ts
index 14710b0f..53a66473 100644
--- a/packages/backend/src/entity/Deployment.ts
+++ b/packages/backend/src/entity/Deployment.ts
@@ -1,6 +1,6 @@
 import {
   Entity,
-  PrimaryGeneratedColumn,
+  PrimaryColumn,
   Column,
   CreateDateColumn,
   UpdateDateColumn,
@@ -27,8 +27,9 @@ enum Status {
 
 @Entity()
 export class Deployment {
-  @PrimaryGeneratedColumn()
-    id!: number;
+  // TODO: set custom generated id
+  @PrimaryColumn('varchar')
+    id!: string;
 
   @ManyToOne(() => Project, { onDelete: 'CASCADE' })
   @JoinColumn({ name: 'projectId' })
@@ -47,6 +48,9 @@ export class Deployment {
   @Column('varchar')
     title!: string;
 
+  @Column('varchar')
+    url!: string;
+
   @Column({
     enum: Environment
   })
diff --git a/packages/backend/src/entity/Project.ts b/packages/backend/src/entity/Project.ts
index 92b89a11..187707b0 100644
--- a/packages/backend/src/entity/Project.ts
+++ b/packages/backend/src/entity/Project.ts
@@ -57,6 +57,9 @@ export class Project {
   @Column('varchar')
     icon!: string;
 
+  @Column('varchar')
+    subDomain!: string;
+
   @CreateDateColumn()
     createdAt!: Date;
 
diff --git a/packages/backend/src/schema.gql b/packages/backend/src/schema.gql
index 4015d293..ecd05a0d 100644
--- a/packages/backend/src/schema.gql
+++ b/packages/backend/src/schema.gql
@@ -72,6 +72,7 @@ type Project {
   updatedAt: String!
   organization: Organization!
   icon: String
+  subDomain: String
 }
 
 type ProjectMember {
@@ -89,6 +90,7 @@ type Deployment {
   branch: String!
   commitHash: String!
   title: String!
+  url: String!
   environment: Environment!
   isCurrent: Boolean!
   status: DeploymentStatus!
diff --git a/packages/backend/src/utils.ts b/packages/backend/src/utils.ts
index d262cc82..6d7f8066 100644
--- a/packages/backend/src/utils.ts
+++ b/packages/backend/src/utils.ts
@@ -52,6 +52,7 @@ export const deploymentToGqlType = (dbDeployment: Deployment): any => {
     branch: dbDeployment.branch,
     commitHash: dbDeployment.commitHash,
     title: dbDeployment.title,
+    url: dbDeployment.url,
     environment: dbDeployment.environment,
     isCurrent: dbDeployment.isCurrent,
     status: dbDeployment.status,
diff --git a/packages/backend/test/fixtures/deployments.json b/packages/backend/test/fixtures/deployments.json
index e4347bf7..2909aa46 100644
--- a/packages/backend/test/fixtures/deployments.json
+++ b/packages/backend/test/fixtures/deployments.json
@@ -3,110 +3,130 @@
     "projectIndex": 0,
     "domainIndex":0,
     "createdByIndex": 0,
+    "id":"ffhae3zq",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-ffhae3zq.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex":1,
     "createdByIndex": 0,
+    "id":"vehagei8",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-vehagei8.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex":2,
     "createdByIndex": 0,
+    "id":"qmgekyte",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-qmgekyte.testProject.snowball.xyz"
   },
   {
     "projectIndex": 0,
     "domainIndex": null,
     "createdByIndex": 0,
+    "id":"f8wsyim6",
     "title": "nextjs-boilerplate-4",
     "status": "Ready",
     "environment": "Production",
     "isCurrent": false,
     "branch": "prod",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-f8wsyim6.testProject.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":3,
     "createdByIndex": 1,
+    "id":"eO8cckxk",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-eO8cckxk.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":4,
     "createdByIndex": 1,
+    "id":"yaq0t5yw",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-yaq0t5yw.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 1,
     "domainIndex":5,
     "createdByIndex": 1,
+    "id":"hwwr6sbx",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "testProject-2-hwwr6sbx.testProject-2.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":6,
     "createdByIndex": 2,
+    "id":"ndxje48a",
     "title": "nextjs-boilerplate-1",
     "status": "Building",
     "environment": "Production",
     "isCurrent": true,
     "branch": "main",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-ndxje48a.iglootools.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":7,
     "createdByIndex": 2,
+    "id":"gtgpgvei",
     "title": "nextjs-boilerplate-2",
     "status": "Ready",
     "environment": "Preview",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-gtgpgvei.iglootools.snowball.xyz"
   },
   {
     "projectIndex": 2,
     "domainIndex":8,
     "createdByIndex": 2,
+    "id":"b4bpthjr",
     "title": "nextjs-boilerplate-3",
     "status": "Error",
     "environment": "Development",
     "isCurrent": false,
     "branch": "test",
-    "commitHash": "testXyz"
+    "commitHash": "testXyz",
+    "url": "iglootools-b4bpthjr.iglootools.snowball.xyz"
   }
 ]
diff --git a/packages/backend/test/fixtures/projects.json b/packages/backend/test/fixtures/projects.json
index 0447b4c7..a670b010 100644
--- a/packages/backend/test/fixtures/projects.json
+++ b/packages/backend/test/fixtures/projects.json
@@ -9,7 +9,8 @@
     "template": "test",
     "framework": "test",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "testProject.snowball.xyz"
   },
   {
     "ownerIndex": 1,
@@ -21,7 +22,8 @@
     "template": "test-2",
     "framework": "test-2",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "testProject-2.snowball.xyz"
   },
   {
     "ownerIndex": 2,
@@ -33,7 +35,8 @@
     "template": "test-3",
     "framework": "test-3",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "iglootools.snowball.xyz"
   },
   {
     "ownerIndex": 1,
@@ -45,7 +48,8 @@
     "template": "test-4",
     "framework": "test-4",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "iglootools-2.snowball.xyz"
   },
   {
     "ownerIndex": 0,
@@ -57,6 +61,7 @@
     "template": "test-5",
     "framework": "test-5",
     "webhooks": [],
-    "icon": ""
+    "icon": "",
+    "subDomain": "snowball-2.snowball.xyz"
   }
 ]
diff --git a/packages/backend/test/initialize-db.ts b/packages/backend/test/initialize-db.ts
index f28afaaf..fdfeeedb 100644
--- a/packages/backend/test/initialize-db.ts
+++ b/packages/backend/test/initialize-db.ts
@@ -55,8 +55,6 @@ const loadAndSaveData = async <Entity extends ObjectLiteral>(entityType: EntityT
 };
 
 const generateTestData = async (dataSource: DataSource) => {
-  const domainRepository = await dataSource.getRepository(Domain);
-
   const savedUsers = await loadAndSaveData(User, dataSource, path.resolve(__dirname, USER_DATA_PATH));
   const savedOrgs = await loadAndSaveData(Organization, dataSource, path.resolve(__dirname, ORGANIZATION_DATA_PATH));
 
@@ -67,6 +65,8 @@ const generateTestData = async (dataSource: DataSource) => {
 
   const savedProjects = await loadAndSaveData(Project, dataSource, path.resolve(__dirname, PROJECT_DATA_PATH), projectRelations);
 
+  const domainRepository = dataSource.getRepository(Domain);
+
   const domainPrimaryRelations = {
     project: savedProjects
   };
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 5ce472e1..fde85799 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -19,6 +19,7 @@
     "luxon": "^3.4.4",
     "octokit": "^3.1.2",
     "react": "^18.2.0",
+    "react-code-blocks": "^0.1.6",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",
     "react-dropdown": "^1.11.0",
diff --git a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx
index 9b385ec3..aba7bbec 100644
--- a/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Project } from 'gql-client';
 
 import { Button, Typography } from '@material-tailwind/react';
 
@@ -16,14 +17,14 @@ const DEFAULT_FILTER_VALUE: FilterValue = {
   status: StatusOptions.ALL_STATUS,
 };
 
-const DeploymentsTabPanel = ({ projectId }: { projectId: string }) => {
+const DeploymentsTabPanel = ({ project }: { project: Project }) => {
   const client = useGQLClient();
 
   const [filterValue, setFilterValue] = useState(DEFAULT_FILTER_VALUE);
   const [deployments, setDeployments] = useState<DeploymentDetails[]>([]);
 
   const fetchDeployments = async () => {
-    const { deployments } = await client.getDeployments(projectId);
+    const { deployments } = await client.getDeployments(project.id);
     const updatedDeployments = deployments.map((deployment) => {
       return {
         ...deployment,
@@ -91,7 +92,7 @@ const DeploymentsTabPanel = ({ projectId }: { projectId: string }) => {
                 key={key}
                 currentDeployment={currentDeployment!}
                 onUpdate={onUpdateDeploymenToProd}
-                projectId={projectId}
+                project={project}
               />
             );
           })
diff --git a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
index 5473f4c1..7777b64f 100644
--- a/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
+++ b/packages/frontend/src/components/projects/project/OverviewTabPanel.tsx
@@ -23,8 +23,7 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {
           <div className="grow">
             <Typography>{project.name}</Typography>
             <Typography variant="small" color="gray">
-              {project.deployments[0]?.domain?.name ??
-                'No Production Deployment'}
+              {project.subDomain}
             </Typography>
           </div>
         </div>
@@ -55,22 +54,29 @@ const OverviewTabPanel = ({ project }: OverviewProps) => {
             </Button>
           )}
         </div>
-        <div className="flex justify-between p-2 text-sm">
-          <p>^ Source</p>
-          <p>{project.deployments[0]?.branch}</p>
-        </div>
-        <div className="flex justify-between p-2 text-sm">
-          <p>^ Deployment</p>
-          <p className="text-blue-600">
-            {project.deployments[0]?.domain?.name}
-          </p>
-        </div>
-        <div className="flex justify-between p-2 text-sm">
-          <p>^ Created</p>
-          <p>
-            {relativeTimeMs(project.createdAt)} by ^ {project.owner.name}
-          </p>
-        </div>
+        {project.deployments.length !== 0 ? (
+          <>
+            <div className="flex justify-between p-2 text-sm">
+              <p>^ Source</p>
+              <p>{project.deployments[0]?.branch}</p>
+            </div>
+            <div className="flex justify-between p-2 text-sm">
+              <p>^ Deployment</p>
+              <p className="text-blue-600">
+                {project.deployments[0]?.domain?.name}
+              </p>
+            </div>
+            <div className="flex justify-between p-2 text-sm">
+              <p>^ Created</p>
+              <p>
+                {relativeTimeMs(project.deployments[0].createdAt)} by ^{' '}
+                {project.deployments[0].createdBy.name}
+              </p>
+            </div>
+          </>
+        ) : (
+          <div>No current deployment found</div>
+        )}
       </div>
       <div className="col-span-2 p-2">
         <div className="flex justify-between">
diff --git a/packages/frontend/src/components/projects/project/ProjectTabs.tsx b/packages/frontend/src/components/projects/project/ProjectTabs.tsx
index 5bb384b6..5aead90e 100644
--- a/packages/frontend/src/components/projects/project/ProjectTabs.tsx
+++ b/packages/frontend/src/components/projects/project/ProjectTabs.tsx
@@ -47,7 +47,7 @@ const ProjectTabs = ({ project, onUpdate }: ProjectTabsProps) => {
         <OverviewTabPanel project={project} />
       </TabPanel>
       <TabPanel>
-        <DeploymentsTabPanel projectId={project.id} />
+        <DeploymentsTabPanel project={project} />
       </TabPanel>
       <TabPanel>
         <Database />
diff --git a/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx b/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
new file mode 100644
index 00000000..7c51b59b
--- /dev/null
+++ b/packages/frontend/src/components/projects/project/deployments/AssignDomainDialog.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { CopyBlock, atomOneLight } from 'react-code-blocks';
+import { Link } from 'react-router-dom';
+
+import {
+  Button,
+  Dialog,
+  DialogHeader,
+  DialogBody,
+  DialogFooter,
+} from '@material-tailwind/react';
+
+interface AssignDomainProps {
+  open: boolean;
+  handleOpen: () => void;
+}
+
+const AssignDomainDialog = ({ open, handleOpen }: AssignDomainProps) => {
+  return (
+    <Dialog open={open} handler={handleOpen}>
+      <DialogHeader>Assign Domain</DialogHeader>
+      <DialogBody>
+        In order to assign a domain to your production deployments, configure it
+        in the{' '}
+        {/* TODO: Navigate to settings tab panel after clicking on project settings */}
+        <Link to="" className="text-light-blue-800 inline">
+          project settings{' '}
+        </Link>
+        (recommended). If you want to assign to this specific deployment,
+        however, you can do so using our command-line interface:
+        <CopyBlock
+          text="snowball alias <deployment> <domain>"
+          language=""
+          showLineNumbers={false}
+          theme={atomOneLight}
+        />
+      </DialogBody>
+      <DialogFooter className="flex justify-start">
+        <Button
+          className="rounded-3xl"
+          variant="gradient"
+          color="blue"
+          onClick={handleOpen}
+        >
+          <span>Okay</span>
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default AssignDomainDialog;
diff --git a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
index 5a42ae13..c030c66e 100644
--- a/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
+++ b/packages/frontend/src/components/projects/project/deployments/DeploymentDetailsCard.tsx
@@ -10,11 +10,12 @@ import {
   ChipProps,
 } from '@material-tailwind/react';
 import toast from 'react-hot-toast';
-import { Environment } from 'gql-client';
+import { Environment, Project } from 'gql-client';
 
 import { relativeTimeMs } from '../../../../utils/time';
 import ConfirmDialog from '../../../shared/ConfirmDialog';
 import DeploymentDialogBodyCard from './DeploymentDialogBodyCard';
+import AssignDomainDialog from './AssignDomainDialog';
 import { DeploymentDetails, Status } from '../../../../types/project';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 
@@ -22,7 +23,7 @@ interface DeployDetailsCardProps {
   deployment: DeploymentDetails;
   currentDeployment: DeploymentDetails;
   onUpdate: () => Promise<void>;
-  projectId: string;
+  project: Project;
 }
 
 const STATUS_COLORS: { [key in Status]: ChipProps['color'] } = {
@@ -35,13 +36,14 @@ const DeploymentDetailsCard = ({
   deployment,
   currentDeployment,
   onUpdate,
-  projectId,
+  project,
 }: DeployDetailsCardProps) => {
   const client = useGQLClient();
 
   const [changeToProduction, setChangeToProduction] = useState(false);
   const [redeployToProduction, setRedeployToProduction] = useState(false);
   const [rollbackDeployment, setRollbackDeployment] = useState(false);
+  const [assignDomainDialog, setAssignDomainDialog] = useState(false);
 
   const updateDeployment = async () => {
     const isUpdated = await client.updateDeploymentToProd(deployment.id);
@@ -65,7 +67,7 @@ const DeploymentDetailsCard = ({
 
   const rollbackDeploymentHandler = async () => {
     const isRollbacked = await client.rollbackDeployment(
-      projectId,
+      project.id,
       deployment.id,
     );
     if (isRollbacked) {
@@ -80,7 +82,7 @@ const DeploymentDetailsCard = ({
     <div className="grid grid-cols-4 gap-2 border-b border-gray-300 p-3 my-2">
       <div className="col-span-2">
         <div className="flex">
-          <Typography className=" basis-3/4">{deployment.title}</Typography>
+          <Typography className=" basis-3/4">{deployment.url}</Typography>
           <Chip
             value={deployment.status}
             color={STATUS_COLORS[deployment.status] ?? 'gray'}
@@ -110,7 +112,11 @@ const DeploymentDetailsCard = ({
           </MenuHandler>
           <MenuList>
             <MenuItem>^ Visit</MenuItem>
-            <MenuItem>^ Assign domain</MenuItem>
+            <MenuItem
+              onClick={() => setAssignDomainDialog(!assignDomainDialog)}
+            >
+              ^ Assign domain
+            </MenuItem>
             {!(deployment.environment === Environment.Production) && (
               <MenuItem
                 onClick={() => setChangeToProduction(!changeToProduction)}
@@ -235,6 +241,10 @@ const DeploymentDetailsCard = ({
           </Typography>
         </div>
       </ConfirmDialog>
+      <AssignDomainDialog
+        open={assignDomainDialog}
+        handleOpen={() => setAssignDomainDialog(!assignDomainDialog)}
+      />
     </div>
   );
 };
diff --git a/packages/gql-client/src/queries.ts b/packages/gql-client/src/queries.ts
index 68ab9f68..150a68eb 100644
--- a/packages/gql-client/src/queries.ts
+++ b/packages/gql-client/src/queries.ts
@@ -27,6 +27,7 @@ query ($projectId: String!) {
     repository
     webhooks
     icon
+    subDomain
     organization {
       id
       name
@@ -54,6 +55,10 @@ query ($projectId: String!) {
         id
         name
       }
+      createdBy {
+        id
+        name
+      }
     }
   }
 }
@@ -72,6 +77,7 @@ query ($organizationId: String!) {
     repository
     updatedAt
     icon
+    subDomain
     deployments {
       id
       branch
@@ -121,6 +127,7 @@ query ($projectId: String!)  {
     branch
     commitHash
     title
+    url
     environment
     isCurrent
     status
diff --git a/packages/gql-client/src/types.ts b/packages/gql-client/src/types.ts
index 4c89f3dd..74d01d66 100644
--- a/packages/gql-client/src/types.ts
+++ b/packages/gql-client/src/types.ts
@@ -63,6 +63,7 @@ export type Deployment = {
   branch: string
   commitHash: string
   title: string
+  url: string
   environment: Environment
   isCurrent: boolean
   status: DeploymentStatus
@@ -131,6 +132,7 @@ export type Project = {
   updatedAt: string
   organization: Organization
   icon: string
+  subDomain: string
 }
 
 export type GetProjectMembersResponse = {
diff --git a/yarn.lock b/yarn.lock
index a8096960..ffabacdd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1280,6 +1280,13 @@
   resolved "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
+"@babel/runtime@^7.10.4", "@babel/runtime@^7.3.1":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.23.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz"
@@ -1476,6 +1483,13 @@
   resolved "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz"
   integrity sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==
 
+"@emotion/is-prop-valid@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
+  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+  dependencies:
+    "@emotion/memoize" "^0.8.1"
+
 "@emotion/is-prop-valid@^0.8.2":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -1488,6 +1502,16 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/unitless@0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
 "@eslint-community/eslint-utils@^4.1.2", "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -3224,6 +3248,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.10"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
+  integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==
+  dependencies:
+    "@types/unist" "^2"
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz"
@@ -3469,6 +3500,11 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/stylis@4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.0.tgz#199a3f473f0c3a6f6e4e1b17cdbc967f274bdc6b"
+  integrity sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==
+
 "@types/testing-library__jest-dom@^5.9.1":
   version "5.14.9"
   resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz"
@@ -3481,6 +3517,11 @@
   resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
+"@types/unist@^2":
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.10.tgz#04ffa7f406ab628f7f7e97ca23e290cd8ab15efc"
+  integrity sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==
+
 "@types/ws@^8.5.5":
   version "8.5.10"
   resolved "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz"
@@ -5145,6 +5186,11 @@ camelcase@^6.2.0, camelcase@^6.2.1, camelcase@^6.3.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz"
@@ -5208,6 +5254,21 @@ char-regex@^2.0.0:
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-2.0.1.tgz"
   integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -5424,6 +5485,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@^2.20.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
@@ -5735,6 +5801,11 @@ css-blank-pseudo@^3.0.3:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
 css-declaration-sorter@^6.3.1:
   version "6.4.1"
   resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz"
@@ -5804,6 +5875,15 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-to-react-native@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz"
@@ -5923,6 +6003,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
+  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
@@ -7309,6 +7394,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz"
@@ -7507,6 +7599,11 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -8041,6 +8138,22 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
@@ -8051,7 +8164,7 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
-highlight.js@^10.7.1:
+highlight.js@^10.4.1, highlight.js@^10.7.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
@@ -8438,6 +8551,19 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz"
   integrity sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4, is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz"
@@ -8522,6 +8648,11 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
@@ -8568,6 +8699,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-inside-container@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz"
@@ -9930,6 +10066,14 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 "lru-cache@7.10.1 - 7.13.1":
   version "7.13.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.13.1.tgz#267a81fbd0881327c46a81c5922606a2cfe336c4"
@@ -10415,7 +10559,12 @@ mz@^2.4.0, mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.7:
+nanoid-dictionary@^5.0.0-beta.1:
+  version "5.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/nanoid-dictionary/-/nanoid-dictionary-5.0.0-beta.1.tgz#f2a2aa05b04f7ac6a9327c62a96146e8aa1b025d"
+  integrity sha512-xBkL9zzkNjzJ/UnmWyiOUDVX/COoi05eS0oU28RYKFFQhdnzO5dTOPbVZ/fCFgIOGr1zNinDHJ68mm/KQfcgcw==
+
+nanoid@3, nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -11137,6 +11286,18 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -11865,11 +12026,20 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.35:
   version "7.0.39"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
@@ -11982,6 +12152,16 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 proc-log@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"
@@ -12036,6 +12216,13 @@ prop-types@15.8.1, prop-types@^15.5.0, prop-types@^15.7.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
 protocols@^2.0.0, protocols@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
@@ -12160,6 +12347,16 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
+react-code-blocks@^0.1.6:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/react-code-blocks/-/react-code-blocks-0.1.6.tgz#ec64e7899223d3e910eb916465a66d95ce1ae1b2"
+  integrity sha512-ENNuxG07yO+OuX1ChRje3ieefPRz6yrIpHmebQlaFQgzcAHbUfVeTINpOpoI9bSRSObeYo/OdHsporeToZ7fcg==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    react-syntax-highlighter "^15.5.0"
+    styled-components "^6.1.0"
+    tslib "^2.6.0"
+
 react-day-picker@^8.9.1:
   version "8.9.1"
   resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.9.1.tgz#62dcc2bc1282ac72d057266112d9c8558334e757"
@@ -12322,6 +12519,17 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-syntax-highlighter@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-tabs@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-6.0.2.tgz#bc1065c3828561fee285a8fd045f22e0fcdde1eb"
@@ -12491,6 +12699,15 @@ reflect.getprototypeof@^1.0.4:
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.1"
   resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz"
@@ -12993,6 +13210,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -13156,6 +13378,11 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 spdx-correct@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.2.0.tgz#4f5ab0668f0059e34f9c00dce331784a12de4e9c"
@@ -13482,6 +13709,21 @@ style-value-types@5.0.0:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
+styled-components@^6.1.0:
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.8.tgz#c109d36aeea52d8f049e12de2f3be39a6fc86201"
+  integrity sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.1"
+    "@emotion/unitless" "0.8.0"
+    "@types/stylis" "4.2.0"
+    css-to-react-native "3.2.0"
+    csstype "3.1.2"
+    postcss "8.4.31"
+    shallowequal "1.1.0"
+    stylis "4.3.1"
+    tslib "2.5.0"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz"
@@ -13490,6 +13732,11 @@ stylehacks@^5.1.1:
     browserslist "^4.21.4"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
+  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
+
 sucrase@^3.32.0:
   version "3.34.0"
   resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz"
@@ -13948,6 +14195,11 @@ tsconfig-paths@^4.1.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -15008,7 +15260,7 @@ xss@^1.0.8:
     commander "^2.20.3"
     cssfilter "0.0.10"
 
-xtend@~4.0.1:
+xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==