diploi · wickathou · Nov 9, 2025 · Aug 15, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/docs/README.md b/docs/README.md
@@ -8,9 +8,9 @@ Our docs are built using [Astro Starlight](https://starlight.astro.build), desig
 
 ## 💡 About
 
-This repository powers all the public documentation for [**Diploi**](https://diploi.com) — a next-generation SaaS platform for developing and hosting your applications with zero friction.
+This repository powers all the public documentation for [**Diploi**](https://diploi.com) - a next-generation SaaS platform for developing and hosting your applications with zero friction.
 
-If you spot something unclear, outdated, or missing — please help us improve it!  
+If you spot something unclear, outdated, or missing - please help us improve it!  
 Every pull request helps make Diploi easier to use for everyone.
 
 
@@ -41,7 +41,7 @@ pnpm install
 pnpm run dev
 ```
 
-Then visit [http://localhost:4321](http://localhost:4321) — your local Diploi Docs will be running there
+Then visit [http://localhost:4321](http://localhost:4321) - your local Diploi Docs will be running there
 
 
 ## Structure
@@ -57,7 +57,7 @@ Then visit [http://localhost:4321](http://localhost:4321) — your local Diploi
 ## Deployment
 
 Docs are automatically deployed when changes are merged into `main`.  
-The site is hosted directly on Diploi’s infrastructure — so edits will go live within minutes.
+The site is hosted directly on Diploi’s infrastructure - so edits will go live within minutes.
 
 
 ## Useful Links

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -90,7 +90,40 @@ export default defineConfig({
           label: "Building",
           items: [
             "building/components",
+            {
+              label: "Components supported",
+              collapsed: true,
+              items: [
+                "building/components/astro",
+                "building/components/bun",
+                "building/components/deno",
+                "building/components/django",
+                "building/components/fastapi",
+                "building/components/flask",
+                "building/components/ghost",
+                "building/components/hono",
+                "building/components/laravel",
+                "building/components/n8n",
+                "building/components/nextjs",
+                "building/components/nodejs",
+                "building/components/nue",
+                "building/components/react-vite",
+                "building/components/supabase",
+                "building/components/sveltekit",
+              ],
+            },
             "building/add-ons",
+            {
+              label: "Add-ons supported",
+              collapsed:true,
+              items: [
+                "building/add-ons/mariadb",
+                "building/add-ons/minio",
+                "building/add-ons/mongo",
+                "building/add-ons/postgres",
+                "building/add-ons/redis",
+              ],
+            },
             "building/add-ssh-key",
             "building/remote-development",
           ],

diff --git a/docs/src/assets/CreateProjectDiagram.svg b/docs/src/assets/CreateProjectDiagram.svg
diff --git a/docs/src/assets/CreateProjectRepo.png b/docs/src/assets/CreateProjectRepo.png
diff --git a/docs/src/assets/CreateProjectWithoutRepo.png b/docs/src/assets/CreateProjectWithoutRepo.png
diff --git a/docs/src/assets/QuickStartBuilder.png b/docs/src/assets/QuickStartBuilder.png
diff --git a/docs/src/content/docs/building/add-ons/mariadb.mdx b/docs/src/content/docs/building/add-ons/mariadb.mdx
@@ -0,0 +1,39 @@
+---
+title: MariaDB
+description: Provision MariaDB when your Diploi app needs MySQL compatibility.
+---
+
+MariaDB is a relational database that's compatible with MySQL, and adds performance and tooling improvements. You can use MariaDB when your project requires a db compatible with MySQL or if you are migrating existing MySQL workloads.
+
+## Add to your project
+
+Paste this entry into the `addons` list in `diploi.yaml` to add MariaDB to your project.
+
+```yaml
+addons:
+  - name: MariaDB
+    identifier: mariadb
+    package: https://github.com/diploi/addon-mariadb#main
+```
+
+:::note
+- identifier must match the folder name you use for this add-on in your repo.
+- Components can import ENV from this add-on using env.include:
+
+```yaml
+components:
+  - name: Bun
+    identifier: bun
+    package: https://github.com/diploi/component-bun#main
+    env:
+      include:
+        - mariadb.*
+```
+:::
+
+## See also
+
+- [Using Add-ons](/building/add-ons)
+- [MariaDB add-on repository](https://github.com/diploi/addon-mariadb)
+- [MariaDB docs](https://mariadb.com/kb/en/documentation/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/add-ons/minio.mdx b/docs/src/content/docs/building/add-ons/minio.mdx
@@ -0,0 +1,39 @@
+---
+title: MinIO
+description: Provision MinIO as an S3-compatible Diploi add-on.
+---
+
+MinIO is an open-source, S3-compatible, object storage system that you can run in Diploi. Use this add-on when your components need to store uploads, backups, or other binary data without relying on an external cloud bucket.
+
+## Add to your project
+
+Paste this entry into the `addons` list in `diploi.yaml` to add MinIO to your project.
+
+```yaml
+addons:
+  - name: MinIO
+    identifier: minio
+    package: https://github.com/diploi/addon-minio#main
+```
+
+:::note
+- identifier must match the folder name you use for this add-on in your repo.
+- Components can import ENV from this add-on using env.include. For example, an Astro component can expose the MinIO credentials like this:
+
+```yaml
+components:
+  - name: Astro
+    identifier: astro
+    package: https://github.com/diploi/component-astro#main
+    env:
+      include:
+        - minio.*
+```
+:::
+
+## See also
+
+- [Using Add-ons](/building/add-ons)
+- [MinIO add-on repository](https://github.com/diploi/addon-minio)
+- [MinIO docs](https://docs.min.io/enterprise/aistor-object-store/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/add-ons/mongo.mdx b/docs/src/content/docs/building/add-ons/mongo.mdx
@@ -0,0 +1,39 @@
+---
+title: Mongo
+description: Attach a Mongo database to Diploi components.
+---
+
+Mongo is a document database that stores flexible JSON-like records with dynamic schemas. Use this add-on when your application benefits from schema-less data modeling or rapid iteration.
+
+## Add to your project
+
+Paste this entry into the `addons` list in `diploi.yaml` to add Mongo to your project.
+
+```yaml
+addons:
+  - name: Mongo
+    identifier: mongo
+    package: https://github.com/diploi/addon-mongo#main
+```
+
+:::note
+- identifier must match the folder name you use for this add-on in your repo.
+- Components can import ENV from this add-on using env.include. For example, a Next.js API route can rely on Mongo variables like this:
+
+```yaml
+components:
+  - name: Next.js
+    identifier: nextjs
+    package: https://github.com/diploi/component-nextjs#main
+    env:
+      include:
+        - mongo.*
+```
+:::
+
+## See also
+
+- [Using Add-ons](/building/add-ons)
+- [Mongo add-on repository](https://github.com/diploi/addon-mongo)
+- [MongoDB docs](https://www.mongodb.com/docs/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/add-ons/postgres.mdx b/docs/src/content/docs/building/add-ons/postgres.mdx
@@ -0,0 +1,39 @@
+---
+title: PostgreSQL
+description: Provision PostgreSQL as a Diploi add-on for relational data.
+---
+
+PostgreSQL is a popular relational database suited for transactional workloads and complex queries. Use this add-on when your application needs structured data storage with ACID guarantees.
+
+## Add to your project
+
+Paste this entry into the `addons` list in `diploi.yaml` to add PostgreSQL to your project.
+
+```yaml
+addons:
+  - name: PostgreSQL
+    identifier: postgres
+    package: https://github.com/diploi/addon-postgres#main
+```
+
+:::note
+- identifier must match the folder name you use for this add-on in your repo.
+- Components can import ENV from this add-on using env.include. For example, a FastAPI component can pull Postgres connection variables like this:
+
+```yaml
+components:
+  - name: FastAPI
+    identifier: fastapi
+    package: https://github.com/diploi/component-fastapi#main
+    env:
+      include:
+        - postgres.*
+```
+:::
+
+## See also
+
+- [Using Add-ons](/building/add-ons)
+- [PostgreSQL add-on repository](https://github.com/diploi/addon-postgres)
+- [PostgreSQL docs](https://www.postgresql.org/docs/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/add-ons/redis.mdx b/docs/src/content/docs/building/add-ons/redis.mdx
@@ -0,0 +1,39 @@
+---
+title: Redis
+description: Add Redis for caching, queues, and ephemeral data in Diploi.
+---
+
+Redis is an in-memory data store ideal for caching, rate limiting, queues, and other latency-sensitive workloads. Choose this add-on when your components need fast key-value access or pub/sub messaging.
+
+## Add to your project
+
+Paste this entry into the `addons` list in `diploi.yaml` to add Redis to your project.
+
+```yaml
+addons:
+  - name: Redis
+    identifier: redis
+    package: https://github.com/diploi/addon-redis#main
+```
+
+:::note
+- identifier must match the folder name you use for this add-on in your repo.
+- Components can import ENV from this add-on using env.include. For example, a Node.js worker can grab the Redis host and password like this:
+
+```yaml
+components:
+  - name: Node.js
+    identifier: nodejs
+    package: https://github.com/diploi/component-nodejs#main
+    env:
+      include:
+        - redis.*
+```
+:::
+
+## See also
+
+- [Using Add-ons](/building/add-ons)
+- [Redis add-on repository](https://github.com/diploi/addon-redis)
+- [Redis docs](https://redis.io/docs/latest/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/components/astro.mdx b/docs/src/content/docs/building/components/astro.mdx
@@ -0,0 +1,42 @@
+---
+title: Astro
+description: Ship Astro sites with Diploi-managed builds and hosting.
+---
+
+Astro is a modern static site builder focused on shipping minimal JavaScript to the browser. Choose this component when you are delivering content-heavy marketing sites, blogs, or documentation that benefit from fast page loads. Diploi handles the SSR build pipeline and pushes assets where they need to run.
+
+## Add to your project
+
+Paste this entry into the `components` list in `diploi.yaml` to add Astro to your project.
+
+```yaml
+components:
+  - name: Astro
+    identifier: astro
+    package: https://github.com/diploi/component-astro#main
+
+```
+
+:::note
+- identifier must match the folder name you use for this component in your repo.
+- You can import ENV from add-ons into components using env.include, depending on the db your project uses.
+
+Example:
+
+```yaml
+env:
+  include:
+    - mariadb.*
+    - minio.*
+    - mongo.*
+    - postgres.*
+    - redis.*
+```
+:::
+
+## See also
+
+- [Using Components](/building/components)
+- [Astro component repository](https://github.com/diploi/component-astro)
+- [Astro docs](https://docs.astro.build/)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/components/bun.mdx b/docs/src/content/docs/building/components/bun.mdx
@@ -0,0 +1,39 @@
+---
+title: Bun
+description: Deploy Bun apps and tooling with Diploi.
+---
+
+Bun is a high-performance JavaScript runtime that includes a bundler, test runner, and package manager. Use this component when you want Bun's fast startup times and all-in-one tooling for web services or utilities. Diploi handles the deployment so you can take advantage of Bun without custom infrastructure.
+
+## Add to your project
+
+Paste this entry into the `components` list in `diploi.yaml` to add Bun to your project.
+
+```yaml
+components:
+  - name: Bun
+    identifier: bun
+    package: https://github.com/diploi/component-bun#main
+
+```
+
+:::note
+- identifier must match the folder name you use for this component in your repo.
+- You can import ENV from add-ons into components using env.include.
+
+Example:
+
+```yaml
+env:
+  include:
+    - postgres.*
+    - redis.*
+```
+:::
+
+## See also
+
+- [Using Components](/building/components)
+- [Bun component repository](https://github.com/diploi/component-bun)
+- [Bun docs](https://bun.sh/docs)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)
diff --git a/docs/src/content/docs/building/components/deno.mdx b/docs/src/content/docs/building/components/deno.mdx
@@ -0,0 +1,39 @@
+---
+title: Deno
+description: Run Deno apps on Diploi with automated builds and deploys.
+---
+
+Deno is a secure JavaScript and TypeScript runtime with batteries-included tooling and standards-based APIs. Use this component when you want Diploi to manage cache-friendly builds and keep Deno services updated without self-hosting.
+
+## Add to your project
+
+Paste this entry into the `components` list in `diploi.yaml` to add Deno to your project.
+
+```yaml
+components:
+  - name: Deno
+    identifier: deno
+    package: https://github.com/diploi/component-deno#main
+
+```
+
+:::note
+- identifier must match the folder name you use for this component in your repo.
+- You can import ENV from add-ons into components using env.include.
+
+Example:
+
+```yaml
+env:
+  include:
+    - postgres.*
+    - minio.*
+```
+:::
+
+## See also
+
+- [Using Components](/building/components)
+- [Deno component repository](https://github.com/diploi/component-deno)
+- [Deno docs](https://docs.deno.com/runtime/manual)
+- [Learn more about the `diploi.yaml` file](reference/diploi-yaml)