docs: add architecture diagram (#214)

Signed-off-by: stefanicjuraj <[email protected]>

astro.config.mjs

@@ -52,6 +52,13 @@ export default defineConfig({
                 icon: 'flag.svg',
               },
             },
+            {
+              label: 'Architecture',
+              link: '/about/architecture',
+              attrs: {
+                icon: 'architecture.svg',
+              },
+            },
             {
               label: 'Getting Started',
               link: '/about/getting-started',

src/components/Image.astro

@@ -0,0 +1,170 @@
+---
+import { Image as AstroImage } from 'astro:assets'
+
+const { imageAlt, iconLight, iconDark, height, width } = Astro.props
+---
+
+<theme-aware-image>
+  <picture class="cursor-pointer">
+    <source
+      srcset={iconDark.src}
+      data-dark-src={iconDark.src}
+      data-light-src={iconLight.src}
+    />
+    <AstroImage
+      src={iconLight}
+      alt={imageAlt}
+      style={`height: ${height || 'auto'}; width: ${width || 'auto'};`}
+      class="theme-image"
+    />
+  </picture>
+
+  <dialog class="modal">
+    <picture class="modal-picture">
+      <source
+        srcset={iconDark.src}
+        data-dark-src={iconDark.src}
+        data-light-src={iconLight.src}
+      />
+      <AstroImage
+        src={iconLight}
+        alt={imageAlt}
+        class="modal-image theme-image"
+      />
+    </picture>
+    <button class="close-button" aria-label="Close modal">X</button>
+  </dialog>
+</theme-aware-image>
+
+<style>
+  .modal {
+    padding: 0;
+    border: none;
+    background: rgba(0, 0, 0, 0.8);
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal:not([open]) {
+    display: none;
+  }
+
+  .modal::backdrop {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
+  .modal-image {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+  }
+
+  .close-button {
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    background: white;
+    border: none;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: black;
+  }
+
+  .close-button:hover {
+    background: #eee;
+  }
+
+  .cursor-pointer {
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  class ThemeAwareImage extends HTMLElement {
+    constructor() {
+      super()
+      this.setupModal()
+      this.updateImage(
+        document.documentElement.dataset.theme as 'light' | 'dark'
+      )
+
+      const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (mutation.attributeName === 'data-theme') {
+            const theme = document.documentElement.dataset.theme as
+              | 'light'
+              | 'dark'
+            this.updateImage(theme)
+          }
+        })
+      })
+
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+      })
+    }
+
+    setupModal() {
+      const mainPicture = this.querySelector('picture:not(.modal-picture)')
+      const modal = this.querySelector('dialog')
+      const closeButton = modal?.querySelector('.close-button')
+
+      if (mainPicture && modal) {
+        mainPicture.addEventListener('click', () => {
+          modal.showModal()
+        })
+
+        closeButton?.addEventListener('click', () => {
+          modal.close()
+        })
+
+        modal.addEventListener('click', e => {
+          if (e.target === modal) {
+            modal.close()
+          }
+        })
+
+        document.addEventListener('keydown', e => {
+          if (e.key === 'Escape' && modal.open) {
+            modal.close()
+          }
+        })
+      }
+    }
+
+    updateImage(theme: 'light' | 'dark') {
+      const sources = this.querySelectorAll('source')
+      const images = this.querySelectorAll('img')
+
+      sources.forEach(source => {
+        const newSrc =
+          theme === 'dark' ? source.dataset.darkSrc : source.dataset.lightSrc
+        if (newSrc) {
+          source.srcset = newSrc
+        }
+      })
+
+      images.forEach(img => {
+        const source = img.previousElementSibling as HTMLSourceElement
+        if (source) {
+          img.src = source.srcset
+        }
+      })
+    }
+  }
+
+  customElements.define('theme-aware-image', ThemeAwareImage)
+</script>

src/content/docs/about/architecture.mdx

@@ -0,0 +1,94 @@
+---
+title: Architecture
+description: Learn about the architecture of Daytona and its components.
+---
+
+import Label from '@components/Label.astro'
+import Image from '@components/Image.astro';
+import ArchitectureDiagramLight from '@assets/index/images/architecture-diagram-light.png';
+import ArchitectureDiagramDark from '@assets/index/images/architecture-diagram-dark.png';
+
+<Label>
+  Distribution: **Open Source**, **Cloud**, **Self-Managed**
+</Label>
+
+Daytona architecture diagram represents the Daytona platform, featuring components and services available in its [Open Source](#open-source) and [Enterprise](#enterprise) distributions. Daytona Open Source is designed to provide core functionality for development, while Daytona Enterprise builds on this foundation with enhanced features tailored for larger organizations, including authentication, authorization, dashboard, observability capabilities, and resource management.
+
+<br />
+
+<Image
+  iconLight={ArchitectureDiagramLight}
+  iconDark={ArchitectureDiagramDark}
+  height="100%"
+  width="100%"
+  imageAlt="Daytona Architecture Diagram"
+/>
+
+## Open Source
+
+Daytona Open Source includes the [Daytona API](/docs/tools/api), which serves as the central interface for programmatically interacting with Daytona. The Open Source version provides a comprehensive set of features and tools to manage development environments, including [Interfaces](#interfaces), [Git Providers](#git-providers), [Container Registries](#container-registries), [Providers](#providers), and [Targets](#targets).
+
+### Interfaces
+
+Daytona Open Source offers a variety of [Interfaces](/docs/usage/ide) to interact with the platform and manage development environments. Interfaces provide different ways to interact with Daytona, enabling developers to choose the most suitable method based on their preferences and workflows.
+
+These include the [Command Line Interface (CLI)](/docs/tools/cli) for direct control, [IDEs](/docs/usage/ide) such as [Visual Studio Code (VSCode)](/docs/usage/ide#vs-code), [Jupyter](/docs/usage/ide#jupyter), [Zed](/docs/usage/ide#zed), [Cursor](/docs/usage/ide#cursor), JetBrains IDEs for integrated development, and [Terminal SSH](/docs/usage/ide#terminal-ssh).
+
+Additionally, Daytona SDK is provided to enable developers to create custom integrations and extend platform functionality.
+
+### Git Providers
+
+Daytona Open Source integrates Git Providers to manage version control operations and interact with Git repositories. Git Providers enable efficient source code management and synchronization with Workspaces.
+
+Supported Git Providers include [GitHub](/docs/configuration/git-providers#github), [GitLab](/docs/configuration/git-providers#gitlab), [Bitbucket](/docs/configuration/git-providers#bitbucket), [GitHub Enterprise Server](/docs/configuration/git-providers#github-enterprise-server), [GitLab Self-Managed](/docs/configuration/git-providers#gitlab-self-managed), [Bitbucket Server](/docs/configuration/git-providers#bitbucket-server), [Codeberg](/docs/configuration/git-providers#codeberg), [Gitea](/docs/configuration/git-providers#gitea), [Gitness](/docs/configuration/git-providers#gitness), [Azure DevOps](/docs/configuration/git-providers#azure-devops), [AWS CodeCommit](/docs/configuration/git-providers#aws-codecommit), [Gogs](/docs/configuration/git-providers#gogs), and [Gitee](/docs/configuration/git-providers#gitee).
+
+The Git Providers integration facilitates collaborative development workflows and streamlines the connection between repositories and development environments.
+
+### Container Registries
+
+Container registries store credentials used to pull container images from specified registry servers. Adding container registry credentials is useful for users who want to create Workspaces from private images and those hosted on private registries.
+
+### Providers
+
+Daytona Open Source uses Providers to enable integration with various technologies to create and manage development environments. Providers abstract complexities of underlying technologies and serve as the foundational engines that Daytona leverages to deploy and run your environments.
+
+Supported Providers include [Docker](/docs/configuration/providers#docker), [DigitalOcean](/docs/configuration/providers#digitalocean), [AWS](/docs/configuration/providers#aws), [Azure](/docs/configuration/providers#azure), [GCP](/docs/configuration/providers#gcp), [Hetzner](/docs/configuration/providers#hetzner), and [Fly](/docs/configuration/providers#fly).
+
+### Targets
+
+[Targets](/docs/configuration/targets) represent isolated processing units where Workspaces are executed. They can operate on various infrastructures, including cloud-based and on-premises environments. Targets provide the necessary compute resources and meet security requirements within the defined infrastructure.
+
+Daytona supports a variety of Targets, including [Docker (Local)](/docs/configuration/targets#docker), [Docker (Remote)](/docs/configuration/targets#docker), [DigitalOcean](/docs/configuration/targets#digitalocean), [AWS](/docs/configuration/targets#aws), [Azure](/docs/configuration/targets#azure), [GCP](/docs/configuration/targets#gcp), [Hetzner](/docs/configuration/targets#hetzner), and [Fly](/docs/configuration/targets#fly).
+
+## Enterprise
+
+The Enterprise edition of Daytona extends the capabilities of the Open Source version with additional features and services tailored for enterprise-grade development environments. These enhancements include advanced security, authentication, and authorization mechanisms, as well as observability and resource management tools to optimize workspace performance and utilization.
+
+### Dashboard
+
+The Enterprise version introduces a Dashboard, which provides a centralized interface for managing and monitoring the platform, improving visibility and control over development environments.
+
+### Authentication
+
+Authentication features support Single Sign-On (SSO) and standards such as Security Assertion Markup Language (SAML) and
+System for Cross-domain Identity Management (SCIM), ensuring secure access to the platform. This enables seamless integration with enterprise identity systems and simplifies user management.
+
+### Authorization
+
+Authorization capabilities allow for granular control of access and permissions across users, teams, organizations, and projects. This ensures secure collaboration and adherence to organizational policies by providing role-based access management.
+
+### Observability
+
+Observability tools offer enhanced monitoring, logging, and tracing capabilities for Workspaces and development activities. This ensures that teams can track system performance, debug issues effectively, and maintain operational insights into their environments.
+
+### Resource Management
+
+Resource Management is expanded with enterprise features, enhancing workspace classes and quota management to meet large-scale, organization-wide requirements.
+
+### Identity Providers
+
+The Enterprise version integrates with Identity Providers (IDP) to enhance authentication and identity management. Supported IDPs include EntraID, Cognito, Okta, OpenID, Google, and others. These integrations ensure that enterprises can use their existing identity systems to manage user authentication, enabling secure and compliant access to the platform.
+
+### Security
+
+Daytona Enterprise enhances security by integrating with advanced security tools and services. These include JFrog, Snyk, Sonatype, and more, ensuring that vulnerabilities in dependencies and containerized environments are identified and mitigated. These security integrations provide automated scanning, reporting, and remediation, reinforcing the integrity of development workflows and applications.

src/content/docs/about/getting-started.mdx

@@ -9,6 +9,7 @@ import DocumentListItem from "@components/DocumentListItem.astro";
 import CardGrid from '@components/cards/CardGrid.astro';
 import TitleCard from '@components/cards/TitleCard.astro';
 import ImageCard from '@components/cards/ImageCard.astro';
+import Image from '@components/Image.astro';
 import Keyboard from "@components/Keyboard.astro"
 import bitbucketLogo from '@assets/index/icons/Bitbucket.svg?raw';
 import githubLogo from '@assets/index/icons/GitHub.svg?raw';
@@ -23,7 +24,11 @@ import RDlogo from '@assets/index/images/rider.png';
 import RMlogo from '@assets/index/images/rubyMine.png';
 import TerminalSSHlogo from '@assets/index/icons/terminal.svg';
 
-This section will guide you through the steps required to install, configure, and use Daytona to manage your development environments.
+Welcome to Daytona! This guide will help you get started with Daytona, an open-source Development Environment Manager (DEM) designed to simplify the creation, management, and deployment of development environments.
+
+## Understanding Daytona
+
+Daytona is an open-source Development Environment Manager (DEM) licensed under the Apache License 2.0. Daytona allows you to manage and deploy [Workspaces](/docs/usage/workspaces) — reproducible development environments based on standard OCI containers, with built-in support for the Dev Container standard.
 
 ## Before You Begin
 

src/content/docs/index.mdx

@@ -25,6 +25,11 @@ import DocumentListItem from "@components/DocumentListItem.astro";
     subtitle="Learn about Daytona and how it can help you manage your development environments."
     href="about/what-is-daytona"
   />
+  <DocumentListItem
+    title="Architecture Overview"
+    subtitle="Understand the architecture of Daytona and how it manages Workspaces."
+    href="about/architecture"
+  />
   <DocumentListItem
     title="Getting Started"
     subtitle="Get started with Daytona and learn how to use and configure your development environments."
@@ -34,7 +39,6 @@ import DocumentListItem from "@components/DocumentListItem.astro";
     title="Install Daytona"
     subtitle="Install Daytona on Linux, macOS, or Windows operating system."
     href="installation/installation"
-    expanded
   />
 </DocumentList>