feat: new images + work in progress component

* chore: dark mode image * chore: update pr template * chore: fix icon colors in dark mode * chore: add twitter in /help * chore: fix sidebar padding & new component * chore: remove dist * new images * Update github-integration.mdx * feat: add work in progress component + rounded corners for video * chore: update images * feat: caption with image * chore: fix gitignore * Update .gitignore * update images
zeropsio · Sep 25, 2024 · 9dd23d1 · 9dd23d1
1 parent 77f4285
commit 9dd23d1
Show file tree

Hide file tree

Showing 23 changed files with 182 additions and 61 deletions.
diff --git a/apps/docs/content/dotnet/how-to/trigger-pipeline.mdx b/apps/docs/content/dotnet/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger .NET build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/features/pipeline.mdx b/apps/docs/content/features/pipeline.mdx
@@ -2,6 +2,8 @@
 title: Build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 ## Configure the pipeline
 Zerops provides a customizable build and runtime environment for your application.
 Start by adding a [zerops.yml](/references/zeropsyml) file to the **root of your repository** and modify it to fit your application.
@@ -45,14 +47,25 @@ Learn more about all `zerops.yml` parameters for your runtime:
 ## Trigger the pipeline
 
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ### Automatically
 Trigger the build & deploy pipeline automatically with each push to the selected branch or with a new tag. Create a new runtime service and connect it to your GitHub repository or GitLab repository.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+  caption="Github Integration via Zerops GUI"
+/>
 </p>
 
 ### Manually
@@ -90,7 +103,12 @@ If you just want to [deploy](#deploy-phase) your already built application to Ze
 ## Build phase
 
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step2.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-2.webp"
+  darkImage="/img/mind-maps/build-deploy/step-2.webp"
+  alt="build deploy pipeline step 2"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 Zerops starts a temporary build container and performs following actions:

diff --git a/apps/docs/content/go/how-to/trigger-pipeline.mdx b/apps/docs/content/go/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Go build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/help/faq.mdx b/apps/docs/content/help/faq.mdx
@@ -9,7 +9,6 @@ import Accordion from "/src/components/Accordion"
   Docusaurus is an open-source static site generator that helps you build optimized websites quickly, focusing on documentation sites.
 </Accordion> */}
 
-
 <details>
   <summary>1. What is the Zerops GUI URL?</summary>
   <p>

diff --git a/apps/docs/content/java/how-to/trigger-pipeline.mdx b/apps/docs/content/java/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Java build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/nginx/how-to/trigger-pipeline.mdx b/apps/docs/content/nginx/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Nginx build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/nodejs/how-to/trigger-pipeline.mdx b/apps/docs/content/nodejs/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Node.js build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/php/how-to/trigger-pipeline.mdx b/apps/docs/content/php/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger PHP build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/python/how-to/trigger-pipeline.mdx b/apps/docs/content/python/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Python build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/content/references/github-integration.mdx b/apps/docs/content/references/github-integration.mdx
@@ -24,7 +24,7 @@ Zerops needs full access to your repositories on GitHub to be able to configure
 5. Or choose the **Push to branch** option and select the branch from the list. Every push to the selected branch will trigger a new build & deploy pipeline, unless you [skip the pipeline](#skip-the-automatic-pipeline-once) with a specific commit message.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<img src="/img/gui/github-integration.webp" alt="image" width="95%" height="auto"/>
 </p>
 
 ### Skip the automatic pipeline once

diff --git a/apps/docs/content/rust/how-to/trigger-pipeline.mdx b/apps/docs/content/rust/how-to/trigger-pipeline.mdx
@@ -2,8 +2,15 @@
 title: Trigger Rust build & deploy pipeline
 ---
 
+import Image from "/src/components/Image"
+
 <p align="center">
-<img src="/img/screenshots/build_deploy_pipeline-step1.png" alt="image" width="100%" height="auto"/>
+<Image
+  lightImage="/img/mind-maps/build-deploy/step-1.webp"
+  darkImage="/img/mind-maps/build-deploy/step-1-dark.webp"
+  alt="build deploy pipeline"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 ## Automatic builds and deploys from GitHub or GitLab
@@ -16,7 +23,12 @@ Follow these steps:
 Then each time you create a new tag or push to a specific branch, depending on the configuration, GitHub or GitLab will initiate a new build & deploy pipeline.
 
 <p align="center">
-<img src="/img/screenshots/github_integration.png" alt="image" width="70%" height="auto"/>
+<Image
+  lightImage="/img/gui/github-integration.webp"
+  darkImage="/img/gui/github-integration.webp"
+  alt="github integration"
+  style={{ width: '95%', height: 'auto' }}
+/>
 </p>
 
 :::info

diff --git a/apps/docs/src/components/Accordion/index.tsx b/apps/docs/src/components/Accordion/index.tsx
@@ -1,16 +1,16 @@
-import React, { useState, ReactNode } from "react"
+import React, { useState, ReactNode } from 'react';
 
 interface AccordionProps {
-  title: string
-  children: ReactNode
+  title: string;
+  children: ReactNode;
 }
 
 const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
 
   const toggleAccordion = () => {
-    setIsOpen(!isOpen)
-  }
+    setIsOpen(!isOpen);
+  };
 
   return (
     <div className="border border-gray-300 rounded mb-4">
@@ -19,11 +19,11 @@ const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
         onClick={toggleAccordion}
       >
         <span className="text-lg">{title}</span>
-        <span className="text-xl font-bold">{isOpen ? "-" : "+"}</span>
+        <span className="text-xl font-bold">{isOpen ? '-' : '+'}</span>
       </button>
       {isOpen && <div className="p-4 bg-white">{children}</div>}
     </div>
-  )
-}
+  );
+};
 
-export default Accordion
+export default Accordion;
diff --git a/apps/docs/src/components/Image/index.tsx b/apps/docs/src/components/Image/index.tsx
@@ -1,25 +1,21 @@
-import React from "react"
-import useBaseUrl from "@docusaurus/useBaseUrl"
-import { useColorMode } from "@docusaurus/theme-common"
+import React from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import { useColorMode } from '@docusaurus/theme-common';
 
 type ImageProps = {
-  lightImage: string
-  darkImage: string
-  alt: string
-  [key: string]: any
-}
+  lightImage: string;
+  darkImage?: string;
+  alt: string;
+  caption?: string;
+  [key: string]: any;
+};
 
-const Image: React.FC<ImageProps> = ({
-  lightImage,
-  darkImage,
-  alt,
-  ...props
-}) => {
-  const { colorMode } = useColorMode()
+const Image: React.FC<ImageProps> = ({ lightImage, darkImage, alt, caption, ...props }) => {
+  const { colorMode } = useColorMode();
 
-  const imageUrl = colorMode === "dark" ? darkImage : lightImage
+  const imageUrl = colorMode === 'dark' ? darkImage : lightImage;
 
-  return <img src={useBaseUrl(imageUrl)} alt={alt} {...props} />
-}
+  return <div className="py-0.5 text-center text-sm flex flex-col "><img className="mx-auto" src={useBaseUrl(imageUrl)} alt={alt} {...props} /><span className="pt-0.5 opacity-65">{caption}</span></div>;
+};
 
-export default Image
+export default Image;