Merge branch 'main' into I-36-use-pre-built-frontend-image

README.md

@@ -271,4 +271,4 @@ Looking to report a security vulnerability? Please don't post about it in GitHub
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 
-<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a>
+<a href="https://github.com/dangtony98"><img src="https://avatars.githubusercontent.com/u/25857006?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/mv-turtle"><img src="https://avatars.githubusercontent.com/u/78047717?s=96&v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/maidul98"><img src="https://avatars.githubusercontent.com/u/9300960?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/gangjun06"><img src="https://avatars.githubusercontent.com/u/50910815?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/hanywang2"><img src="https://avatars.githubusercontent.com/u/44352119?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/tobias-mintlify"><img src="https://avatars.githubusercontent.com/u/110702161?v=4" width="50" height="50" alt=""/></a> <a href="https://github.com/0xflotus"><img src="https://avatars.githubusercontent.com/u/26602940?v=4" width="50" height="50" alt=""/></a> 

docs/cli/overview.mdx

@@ -95,3 +95,9 @@ The Infisical CLI provides a way to inject environment variables from the platfo
 
    </Tab>
 </Tabs>
+
+## Log in to the Infisical CLI
+
+```bash
+infisical login
+```

docs/cli/usage.mdx

@@ -4,12 +4,6 @@ title: "Usage"
 
 Prerequisite: [Install the CLI](/cli/overview)
 
-## Log in to the Infisical CLI
-
-```bash
-infisical login
-```
-
 ## Initialize Infisical for your project
 
 ```bash
@@ -29,11 +23,11 @@ infisical run -- [your application start command]
 
 Options you can specify:
 
-| Option         | Description                                                                                                 | Default value |
-| -------------  | ----------------------------------------------------------------------------------------------------------- | ------------- |
-| `--env`        | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
-| `--projectId`  | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
-| `--expand`     | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)      | `true`        |
+| Option        | Description                                                                                                 | Default value |
+| ------------- | ----------------------------------------------------------------------------------------------------------- | ------------- |
+| `--env`       | Used to set the environment that secrets are pulled from. Accepted values: `dev`, `staging`, `test`, `prod` | `dev`         |
+| `--projectId` | Used to link a local project to the platform (required only if injecting via the service token method)      | `None`        |
+| `--expand`    | Parse shell parameter expansions in your secrets (e.g., `${DOMAIN}`)                                        | `true`        |
 
 ## Examples:
 

docs/integrations/frameworks/django.mdx

@@ -2,4 +2,23 @@
 title: "Django"
 ---
 
-Instructions coming soon.
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
+## Initialize Infisical for your [Django](https://www.djangoproject.com) project
+
+```bash
+# move to your Django project
+cd /path/to/project
+
+# initialize infisical
+infisical init
+```
+
+## Start your server with environment variables injected
+
+```bash
+infisical run -- python manage.py runserver
+```

docs/integrations/frameworks/express.mdx

@@ -2,7 +2,10 @@
 title: "Express, Fastify, Koa"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 The steps apply to the following non-exhaustive list of frameworks:
 

docs/integrations/frameworks/fiber.mdx

@@ -0,0 +1,10 @@
+---
+title: "Fiber"
+---
+
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
+Coming soon.

docs/integrations/frameworks/fibre.mdx

@@ -1,5 +0,0 @@
----
-title: "Fibre"
----
-
-Coming soon.

docs/integrations/frameworks/flask.mdx

@@ -2,7 +2,10 @@
 title: "Flask"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Flask](https://flask.palletsprojects.com/en/2.2.x) app
 

docs/integrations/frameworks/gatsby.mdx

@@ -2,7 +2,10 @@
 title: "Gatsby"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Gatsby](https://www.gatsbyjs.com) app
 

docs/integrations/frameworks/laravel.mdx

@@ -2,4 +2,9 @@
 title: "Laravel"
 ---
 
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
 Instructions coming soon.

docs/integrations/frameworks/nestjs.mdx

@@ -2,7 +2,10 @@
 title: "NestJS"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [NestJS](https://nestjs.com) app
 

docs/integrations/frameworks/nextjs.mdx

@@ -2,9 +2,12 @@
 title: "Next.js"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
 
-## Initialize Infisical for your [Next.js](https://nextjs.org)
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
+## Initialize Infisical for your [Next.js](https://nextjs.org) app
 
 ```bash
 # move to your Next.js app

docs/integrations/frameworks/nuxt.mdx

@@ -2,7 +2,10 @@
 title: "Nuxt"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Nuxt](https://nuxtjs.org) app
 

docs/integrations/frameworks/rails.mdx

@@ -2,4 +2,23 @@
 title: "Ruby on Rails"
 ---
 
-Instructions coming soon.
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
+
+## Initialize Infisical for your [Rails](https://rubyonrails.org) app
+
+```bash
+# move to your Rails app
+cd /path/to/project
+
+# initialize infisical
+infisical init
+```
+
+## Start your server with environment variables injected
+
+```bash
+infisical run -- bin/rails server
+```

docs/integrations/frameworks/react.mdx

@@ -2,7 +2,10 @@
 title: "React"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Create React App](https://create-react-app.dev)
 

docs/integrations/frameworks/remix.mdx

@@ -2,7 +2,10 @@
 title: "Remix"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Remix](https://remix.run) app
 

docs/integrations/frameworks/vite.mdx

@@ -2,7 +2,10 @@
 title: "Vite"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Vite](https://vitejs.dev) app
 

docs/integrations/frameworks/vue.mdx

@@ -2,7 +2,10 @@
 title: "Vue"
 ---
 
-Prerequisite: [Install the CLI](/cli/overview)
+Prerequisites:
+
+- Set up and add envars to [Infisical Cloud](https://app.infisical.com)
+- [Install the CLI](/cli/overview)
 
 ## Initialize Infisical for your [Vue](https://vuejs.org) app
 

docs/integrations/overview.mdx

@@ -31,8 +31,8 @@ Missing an integration? Throw in a [request](https://github.com/Infisical/infisi
 | [Gatsby](/integrations/frameworks/gatsby)                | Framework | Available   |
 | [Remix](/integrations/frameworks/remix)                  | Framework | Available   |
 | [Vite](/integrations/frameworks/vite)                    | Framework | Available   |
-| [Fibre](/integrations/frameworks/fibre)                  | Framework | Coming soon |
-| [Django](/integrations/frameworks/django)                | Framework | Coming soon |
+| [Fiber](/integrations/frameworks/fiber)                  | Framework | Coming soon |
+| [Django](/integrations/frameworks/django)                | Framework | Available   |
 | [Flask](/integrations/frameworks/flask)                  | Framework | Available   |
 | [Laravel](/integrations/frameworks/laravel)              | Framework | Coming soon |
-| [Ruby on Rails](/integrations/frameworks/rails)          | Framework | Coming soon |
+| [Ruby on Rails](/integrations/frameworks/rails)          | Framework | Available   |

docs/mint.json

@@ -142,7 +142,7 @@
         "integrations/frameworks/gatsby",
         "integrations/frameworks/remix",
         "integrations/frameworks/vite",
-        "integrations/frameworks/fibre",
+        "integrations/frameworks/fiber",
         "integrations/frameworks/django",
         "integrations/frameworks/flask",
         "integrations/frameworks/laravel",

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -8,6 +8,7 @@ import nacl from "tweetnacl";
 import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 
+import { envMapping } from "../../../public/data/frequentConstants";
 import {
   decryptAssymmetric,
   encryptAssymmetric,
@@ -16,13 +17,6 @@ import Button from "../buttons/Button";
 import InputField from "../InputField";
 import ListBox from "../Listbox";
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 const expiryMapping = {
   "1 day": 86400,
   "7 days": 604800,

frontend/components/basic/table/ServiceTokenTable.js

@@ -2,18 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 
+import { reverseEnvMapping } from "../../../public/data/frequentConstants";
 import guidGenerator from "../../utilities/randomId";
 import Button from "../buttons/Button";
 
-const roles = ["admin", "user"];
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 /**
  * This is the component that we utilize for the user table - in future, can reuse it for some other purposes too.
  * #TODO: add the possibility of choosing and doing operations on multiple users.

frontend/components/dashboard/DashboardInputField.js

@@ -1,27 +1,10 @@
-import React from "react";
+import React, { useRef } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import guidGenerator from "../utilities/randomId";
 
-/**
- * This function splits the input of a dashboard field into the parts that are inside and outside of ${...}
- * @param {string} text - the value of the input in the Dashboard Input Field
- * @returns
- */
-const findReferences = (text) => {
-  var splitText = text.split("${");
-  let textArray = [splitText[0]];
-  for (var i = 1; i < splitText.length; i++) {
-    let insideBrackets = "${" + splitText[i].split("}")[0];
-    if (splitText[i].includes("}")) {
-      insideBrackets += "}";
-    }
-    textArray.push(insideBrackets);
-    textArray.push(splitText[i].split("}")[1]);
-  }
-  return textArray;
-};
+const REGEX = /([$]{.*?})/g;
 
 /**
  * This component renders the input fields on the dashboard
@@ -42,6 +25,12 @@ const DashboardInputField = ({
   blurred,
   duplicates
 }) => {
+  const ref = useRef(null);
+  const syncScroll = (e) => {
+    ref.current.scrollTop = e.target.scrollTop;
+    ref.current.scrollLeft = e.target.scrollLeft;
+  };
+  
   if (type === "varName") {
     const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
     const hasDuplicates = duplicates?.includes(value);
@@ -76,52 +65,54 @@ const DashboardInputField = ({
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+          className={`group relative whitespace-pre	flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value, index)}
-            type={type}
             value={value}
+            onChange={(e) => onChangeHandler(e.target.value, index)}
+            onScroll={syncScroll}
             className={`${
               blurred
                 ? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
                 : ""
-            } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
+            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
             spellCheck="false"
           />
-          <div
+          <div 
+            ref={ref} 
             className={`${
               blurred
                 ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400"
                 : ""
-            } flex flex-row font-mono absolute z-0 ph-no-capture bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
+            } flex flex-row whitespace-pre font-mono absolute z-0 ph-no-capture max-w-2xl overflow-x-scroll bg-bunker-800 h-9 rounded-md text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100`}
           >
-            {findReferences(value).map((texts, id) => {
-              if (id % 2 == 0 || texts.length <= 2) {
-                return (
-                  <span className="ph-no-capture" key={id}>
-                    {texts}
-                  </span>
-                );
-              }
-              return (
-                <span className="ph-no-capture text-yellow" key={id}>
-                  {texts.slice(0, 2)}
-                  <span className="ph-no-capture text-yellow-200/80">
-                    {texts.slice(2, texts.length - 1)}
-                  </span>
-                  {texts.slice(texts.length - 1, texts.length) == "}" ? (
-                    <span className="ph-no-capture text-yellow">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
+            {
+              value
+              .split(REGEX)
+              .map((word, id) => {
+                if (word.match(REGEX) !== null) {
+                  return (
+                    <span className="ph-no-capture text-yellow" key={id}>
+                      {word.slice(0, 2)}
+                      <span className="ph-no-capture text-yellow-200/80">
+                        {word.slice(2, word.length - 1)}
+                      </span>
+                      {word.slice(word.length - 1, word.length) == "}" ? (
+                        <span className="ph-no-capture text-yellow">
+                          {word.slice(word.length - 1, word.length)}
+                        </span>
+                      ) : (
+                        <span className="ph-no-capture text-yellow-400">
+                          {word.slice(word.length - 1, word.length)}
+                        </span>
+                      )}
                     </span>
-                  ) : (
-                    <span className="ph-no-capture text-yellow-400">
-                      {texts.slice(texts.length - 1, texts.length)}{" "}
-                    </span>
-                  )}
-                </span>
-              );
-            })}
+                  );
+                } else {
+                  return <span key={id} className="ph-no-capture">{word}</span>;
+                }
+              })
+            }
           </div>
           {blurred && (
             <div className="z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible absolute h-9 w-fit max-w-xl rounded-md flex items-center text-gray-400/50 text-clip overflow-hidden">
@@ -137,7 +128,7 @@ const DashboardInputField = ({
                   />
                 ))}
             </div>
-          )}
+          )} 
         </div>
       </div>
     );

frontend/components/utilities/secrets/getSecretsForProject.js

@@ -1,5 +1,6 @@
 import getSecrets from "~/pages/api/files/GetSecrets";
 
+import { envMapping } from "../../../public/data/frequentConstants";
 import guidGenerator from "../randomId";
 
 const {
@@ -9,13 +10,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 const getSecretsForProject = async ({
   env,
   setFileState,

frontend/components/utilities/secrets/pushKeys.js

@@ -2,6 +2,8 @@ import uploadSecrets from "~/pages/api/files/UploadSecrets";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
 
+import { envMapping } from "../../../public/data/frequentConstants";
+
 const crypto = require("crypto");
 const {
   decryptAssymmetric,
@@ -12,12 +14,6 @@ const {
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
 
 const pushKeys = async (obj, workspaceId, env) => {
   let sharedKey = await getLatestFileKey(workspaceId);

frontend/next.config.js

@@ -2,11 +2,19 @@
 
 const ContentSecurityPolicy = `
 	default-src 'self';
+<<<<<<< HEAD
 	script-src 'self' https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
+=======
+	script-src 'self' https://app.posthog.com https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
+>>>>>>> main
 	style-src 'self' https://rsms.me 'unsafe-inline';
-	child-src https://infisical.com https://api.stripe.com;
+	child-src https://api.stripe.com;
 	frame-src https://js.stripe.com/ https://api.stripe.com;
+<<<<<<< HEAD
 	connect-src 'self' ws: wss: https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
+=======
+	connect-src 'self' https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://api.stripe.com;
+>>>>>>> main
 	img-src 'self' https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src;
 	font-src 'self' https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  

frontend/pages/dashboard/[id].js

@@ -34,19 +34,13 @@ import pushKeys from "~/components/utilities/secrets/pushKeys";
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import { envMapping } from "../../public/data/frequentConstants";
 import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
 import getUser from "../api/user/getUser";
 import checkUserAction from "../api/userActions/checkUserAction";
 import registerUserAction from "../api/userActions/registerUserAction";
 import getWorkspaces from "../api/workspace/getWorkspaces";
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
 /**
  * This component represent a single row for an environemnt variable on the dashboard
  * @param {object} obj

frontend/pages/integrations/[id].js

@@ -17,6 +17,11 @@ import getSecretsForProject from "~/components/utilities/secrets/getSecretsForPr
 import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
 import guidGenerator from "~/utilities/randomId";
 
+import { 
+  envMapping, 
+  frameworks, 
+  reverseEnvMapping
+} from "../../public/data/frequentConstants";
 import deleteIntegration from "../api/integrations/DeleteIntegration";
 import deleteIntegrationAuth from "../api/integrations/DeleteIntegrationAuth";
 import getIntegrationApps from "../api/integrations/GetIntegrationApps";
@@ -27,20 +32,6 @@ import startIntegration from "../api/integrations/StartIntegration";
 
 const crypto = require("crypto");
 
-const envMapping = {
-  Development: "dev",
-  Staging: "staging",
-  Production: "prod",
-  Testing: "test",
-};
-
-const reverseEnvMapping = {
-  dev: "Development",
-  staging: "Staging",
-  prod: "Production",
-  test: "Testing",
-};
-
 const Integration = ({ projectIntegration }) => {
   const [integrationEnvironment, setIntegrationEnvironment] = useState(
     reverseEnvMapping[projectIntegration.environment]
@@ -248,7 +239,7 @@ export default function Integrations() {
           )}
           <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
             <div className="flex flex-row justify-start items-center text-3xl">
-              <p className="font-semibold mr-4">Available Integrations</p>
+              <p className="font-semibold mr-4">Platform & Cloud Integrations</p>
             </div>
             <p className="mr-4 text-base text-gray-400">
               Click on the itegration you want to connect. This will let your
@@ -265,7 +256,7 @@ export default function Integrations() {
               reach out support@infisical.com.
             </p>
           </div>
-          <div className="grid gap-4 grid-cols-3 grid-rows-3 mx-6 mt-4 max-w-5xl">
+          <div className="grid gap-4 grid-cols-4 grid-rows-2 mx-6 mt-4 max-w-5xl">
             {Object.keys(integrations).map((integration) => (
               <div
                 className={`relative ${
@@ -290,12 +281,12 @@ export default function Integrations() {
                 >
                   <Image
                     src={`/images/integrations/${integrations[integration].name}.png`}
-                    height={100}
-                    width={100}
+                    height={70}
+                    width={70}
                     alt="integration logo"
                   ></Image>
                   {integrations[integration].name.split(" ").length > 2 ? (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
                       <div>{integrations[integration].name.split(" ")[0]}</div>
                       <div className="text-base">
                         {integrations[integration].name.split(" ")[1]}{" "}
@@ -303,7 +294,7 @@ export default function Integrations() {
                       </div>
                     </div>
                   ) : (
-                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-2xl ml-8 max-w-xs">
+                    <div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-xl ml-4 max-w-xs">
                       {integrations[integration].name}
                     </div>
                   )}
@@ -353,6 +344,35 @@ export default function Integrations() {
               </div>
             ))}
           </div>
+          <div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
+            <div className="flex flex-row justify-start items-center text-3xl">
+              <p className="font-semibold mr-4">Framework Integrations</p>
+            </div>
+            <p className="mr-4 text-base text-gray-400">
+              Click on a framework to get the setup instructions.
+            </p>
+          </div><div className="grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl">
+            {frameworks.map((framework) => (
+              <div key={framework.name}>
+                <a
+                  href={framework.link}
+                  rel="noopener"
+                  className={`relative flex flex-row items-center justify-center bg-bunker-500 hover:bg-gradient-to-tr hover:from-sky-400 hover:to-primary duration-200 h-32 rounded-md p-0.5 items-center cursor-pointer`}
+                >
+                  <div className={`font-semibold bg-bunker-500 flex flex-col items-center justify-center h-full w-full rounded-md text-gray-300 group-hover:text-gray-200 duration-200 ${framework?.name?.split(" ").length > 1 ? "text-sm px-1" : "text-xl px-2"} text-center w-full max-w-xs`}>
+                    {framework?.image && <Image
+                      src={`/images/integrations/${framework.image}.png`}
+                      height={framework?.name ? 60 : 90}
+                      width={framework?.name ? 60 : 90}
+                      alt="integration logo"
+                    ></Image>}
+                    {framework?.name && framework?.image && <div className="h-2"></div>}
+                    {framework?.name && framework.name}
+                  </div>
+                </a>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     </div>

frontend/public/data/frequentConstants.ts

@@ -0,0 +1,82 @@
+const envMapping = {
+  Development: "dev",
+  Staging: "staging",
+  Production: "prod",
+  Testing: "test",
+};
+  
+const reverseEnvMapping = {
+  dev: "Development",
+  staging: "Staging",
+  prod: "Production",
+  test: "Testing",
+};
+
+const frameworks = [{
+    "name": "Docker",
+    "image": "Docker",
+    "link": "https://infisical.com/docs/integrations/platforms/docker"
+  }, {
+    "name": "Docker Compose",
+    "image": "Docker Compose",
+    "link": "https://infisical.com/docs/integrations/platforms/docker-compose"
+  }, {
+    "name": "React",
+    "image": "React",
+    "link": "https://infisical.com/docs/integrations/frameworks/react"
+  }, {
+    "name": "Vue",
+    "image": "Vue",
+    "link": "https://infisical.com/docs/integrations/frameworks/vue"
+  }, {
+    "image": "Express",
+    "link": "https://infisical.com/docs/integrations/frameworks/express"
+  },{
+    "image": "Next.js",
+    "link": "https://infisical.com/docs/integrations/frameworks/nextjs"
+  }, {
+    "name": "Django",
+    "image": "Django",
+    "link": "https://infisical.com/docs/integrations/frameworks/django"
+  }, {
+    "name": "NestJS",
+    "image": "NestJS",
+    "link": "https://infisical.com/docs/integrations/frameworks/nestjs"
+  }, {
+    "name": "Nuxt",
+    "image": "Nuxt",
+    "link": "https://infisical.com/docs/integrations/frameworks/nuxt"
+  }, {
+    "name": "Gatsby",
+    "image": "Gatsby",
+    "link": "https://infisical.com/docs/integrations/frameworks/gatsby"
+  }, {
+    "name": "Remix",
+    "image": "Remix",
+    "link": "https://infisical.com/docs/integrations/frameworks/remix"
+  }, {
+    "name": "Vite",
+    "image": "Vite",
+    "link": "https://infisical.com/docs/integrations/frameworks/vite"
+  }, {
+    "image": "Fiber",
+    "link": "https://infisical.com/docs/integrations/frameworks/fiber"
+  }, {
+    "name": "Flask",
+    "image": "Flask",
+    "link": "https://infisical.com/docs/integrations/frameworks/flask"
+  }, {
+    "name": "Laravel",
+    "image": "Laravel",
+    "link": "https://infisical.com/docs/integrations/frameworks/laravel"
+  }, {
+    "image": "Rails",
+    "link": "https://infisical.com/docs/integrations/frameworks/rails"
+  }
+]
+
+export {
+  envMapping,
+  frameworks,
+  reverseEnvMapping
+};