Update - Add-ons and Components intro page listing

docs/src/content/docs/building/add-ons.mdx

@@ -28,7 +28,11 @@ Services are not exposed publicly by default. They can only be accessed by the c
 ***
 
 ### PostgreSQL
-The open-source relational database system known for reliability, feature robustness, and performance, ideal for handling complex queries and transactions.
+An open-source relational database system known for being reliable, and performant handling complex queries and transactions.
+
+<LinkButton href="/building/add-ons/postgres" variant="secondary">
+  How to add PostgreSQL to a project
+</LinkButton>
 
 <LinkButton target="_blank" href="https://github.com/diploi/addon-postgres" variant="secondary">
   To the add-on's repository
@@ -43,6 +47,10 @@ The open-source relational database system known for reliability, feature robust
 ### Redis
 An in-memory data structure store used as a database, cache, and message broker, known for its high speed and support for various data structures.
 
+<LinkButton href="/building/add-ons/redis" variant="secondary">
+  How to add Redis to a project
+</LinkButton>
+
 <LinkButton target="_blank" href="https://github.com/diploi/addon-redis" variant="secondary">
   To the add-on's repository
 </LinkButton>
@@ -55,7 +63,11 @@ An in-memory data structure store used as a database, cache, and message broker,
 
 ### Mongo
 
-A popular NoSQL document database that stores data in flexible, JSON-like documents, enabling rapid development and scalability.
+A NoSQL document database that stores data in JSON-like documents.
+
+<LinkButton href="/building/add-ons/mongo" variant="secondary">
+  How to add Mongo to a project
+</LinkButton>
 
 <LinkButton target="_blank" href="https://github.com/diploi/addon-mongo" variant="secondary">
   To the add-on's repository
@@ -69,12 +81,34 @@ A popular NoSQL document database that stores data in flexible, JSON-like docume
 
 ### MariaDB
 
-An open-source relational database forked from MySQL, offering compatibility with MySQL and additional features and performance improvements.
+An open-source relational database forked from MySQL, with additional features and performance improvements.
+
+<LinkButton href="/building/add-ons/mariadb" variant="secondary">
+  How to add MariaDB to a project
+</LinkButton>
 
 <LinkButton target="_blank" href="https://github.com/diploi/addon-mariadb" variant="secondary">
   To the add-on's repository
 </LinkButton>
 
 <LinkButton target="_blank" href="https://mariadb.com/docs/" variant="secondary">
   Official documentation for MariaDB
-</LinkButton>
+</LinkButton>
+
+***
+
+### MinIO
+
+An S3-compatible object storage service used to save uploads, backups, and other binary data.
+
+<LinkButton href="/building/add-ons/minio" variant="secondary">
+  How to add MinIO to a project
+</LinkButton>
+
+<LinkButton target="_blank" href="https://github.com/diploi/addon-minio" variant="secondary">
+  To the add-on's repository
+</LinkButton>
+
+<LinkButton target="_blank" href="https://docs.min.io/enterprise/aistor-object-store/" variant="secondary">
+  Official documentation for MinIO
+</LinkButton>

docs/src/content/docs/building/components.mdx

@@ -25,32 +25,35 @@ You can think of components as the application layer of your project. In Diploi
 ***
 
 ### Ghost
-A modern, open-source content management system designed for publishing and managing blogs, online publications or website, offering a smooth writing experience and with many ways to customize.
+An open-source content management system designed for publishing and managing blogs, online publications or websites.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_a_ghost_blog" />
+  <LinkCard title="How to add Ghost to a project" href="/building/components/ghost" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-ghost" />
   <LinkCard title="Official documentation for Ghost" href="https://ghost.org/help/manual/" />
 </CardGrid>
 
 ***
 
 ### Next.js
-A framework that enables server-side rendering and static site generation, providing an optimized development experience for building web applications.
+A React-based web development framework for server-side and static web rendering.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_nextjs_apps" />
+  <LinkCard title="How to add Next.js to a project" href="/building/components/nextjs" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-nextjs" />
   <LinkCard title="Official documentation for Next.js" href="https://nextjs.org/docs" />
 </CardGrid>
 
 ***
 
 ### React + Vite
-Mixes Vite's bundling capabilities and React's frontend development capabilities, in a component that requires no configuration and provides instant hot module reload.
+Mixes Vite's bundling capabilities and React's frontend development capabilities, in a component that requires no configuration and provides instant hot module reload for frontend applications.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_react_apps" />
+  <LinkCard title="How to add React + Vite to a project" href="/building/components/react-vite" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-react-vite" />
   <LinkCard title="Official documentation for Vite" href="https://vite.dev/guide/" />
   <LinkCard title="Official documentation for React" href="https://react.dev/reference/react" />
@@ -59,76 +62,155 @@ Mixes Vite's bundling capabilities and React's frontend development capabilities
 ***
 
 ### Node.js
-A versatile JavaScript runtime built on Chrome's V8 engine, enabling scalable backend applications and APIs with high performance.
+A runtime used to develop backend applications and APIs using JavaScript.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_node_apps" />
+  <LinkCard title="How to add Node.js to a project" href="/building/components/nodejs" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-nodejs" />
   <LinkCard title="Official documentation for Node.js" href="https://nodejs.org/docs/latest/api/" />
 </CardGrid>
 
 ***
 
 ### Bun
-An all-in-one JavaScript runtime designed to be faster than Node.js, with native bundling, transpiling, and package management support.
+An JavaScript runtime designed to be faster than Node.js, with native bundling, support for TypeScript, and package management support.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_bun_apps" />
+  <LinkCard title="How to add Bun to a project" href="/building/components/bun" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-bun" />
   <LinkCard title="Official documentation for Bun" href="https://bun.sh/docs" />
 </CardGrid>
 
 ***
 
 ### Astro
-A modern static site builder that lets you write components with your favorite frameworks while optimizing for minimal client-side JavaScript.
+A static site builder that lets you write components with your a broad selection of frontend frameworks, while optimizing for performance and modern SEO practices.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_astro_apps" />
+  <LinkCard title="How to add Astro to a project" href="/building/components/astro" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-astro" />
   <LinkCard title="Official documentation for Astro" href="https://docs.astro.build/en/getting-started/" />
 </CardGrid>
 
 ***
 
 ### SvelteKit
-A framework for building performant web applications with Svelte, offering server-side rendering and a simple syntax.
+A framework for building performant web applications with Svelte, offering server-side rendering.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_svelte_apps" />
+  <LinkCard title="How to add SvelteKit to a project" href="/building/components/sveltekit" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-sveltekit" />
   <LinkCard title="Official documentation for SvelteKit" href="https://svelte.dev/docs/kit/introduction" />
 </CardGrid>
 
 ***
 
 ### Nue.js
-A framework focused on building efficient, modular web applications with simplicity and developer productivity.
+A framework focused on building lightweight fullstack applications using JavaScript, and with native support for Rust or Zig to run workloads.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_nuejs_apps" />
+  <LinkCard title="How to add Nue.js to a project" href="/building/components/nue" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-nue" />
   <LinkCard title="Official documentation for Nue.js" href="https://nuejs.org/docs/" />
 </CardGrid>
 
 ***
 
 ### Django
-A high-level Python web framework that promotes rapid development, clean design, and robust, secure web applications.
+A high-level Python web fullstack framework that uses Python.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_django_apps" />
+  <LinkCard title="How to add Django to a project" href="/building/components/django" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-django" />
   <LinkCard title="Official documentation for Django" href="https://docs.djangoproject.com/en/5.2/" />
 </CardGrid>
 
 ***
 
 ### Hono
-A small, ultra-fast web framework tailored for the edge, designed for building low-overhead APIs and applications.
+A small web framework designed to build APIs and backend applications.
 
 <CardGrid>
   <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_hono_apps" />
+  <LinkCard title="How to add Hono to a project" href="/building/components/hono" />
   <LinkCard title="To the component's repository" href="https://github.com/diploi/component-hono" />
   <LinkCard title="Official documentation for Hono" href="https://hono.dev/docs/" />
-</CardGrid>
+</CardGrid>
+
+***
+
+### Deno
+A JavaScript and TypeScript runtime for APIs and backend services.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_deno_apps" />
+  <LinkCard title="How to add Deno to a project" href="/building/components/deno" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-deno" />
+  <LinkCard title="Official documentation for Deno" href="https://docs.deno.com/runtime/manual" />
+</CardGrid>
+
+***
+
+### FastAPI
+A Python framework used to create APIs with automatic documentation.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_fastapi_apps" />
+  <LinkCard title="How to add FastAPI to a project" href="/building/components/fastapi" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-fastapi" />
+  <LinkCard title="Official documentation for FastAPI" href="https://fastapi.tiangolo.com/" />
+</CardGrid>
+
+***
+
+### Flask
+A minimalist Python framework, design for lightweight APIs, dashboards, services, and fullstack applications.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_flask_apps" />
+  <LinkCard title="How to add Flask to a project" href="/building/components/flask" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-flask" />
+  <LinkCard title="Official documentation for Flask" href="https://flask.palletsprojects.com/" />
+</CardGrid>
+
+***
+
+### Laravel
+A fullstack PHP framework with native support for modern JS-based frontend frameworks.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_laravel_apps" />
+  <LinkCard title="How to add Laravel to a project" href="/building/components/laravel" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-laravel" />
+  <LinkCard title="Official documentation for Laravel" href="https://laravel.com/docs" />
+</CardGrid>
+
+***
+
+### n8n
+A workflow automation platform used to run trigger-driven workloads, using a GUI to setup triggers and logic workflow.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_n8n" />
+  <LinkCard title="How to add n8n to a project" href="/building/components/n8n" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-n8n" />
+  <LinkCard title="Official documentation for n8n" href="https://docs.n8n.io/" />
+</CardGrid>
+
+***
+
+### Supabase
+An open-source backend platform that bundles multiple services into one, such as Postgres, storage, auth, real-time listeners, and edge functions.
+
+<CardGrid>
+  <LinkCard title="To the tutorial" href="https://diploi.com/blog/hosting_supabase" />
+  <LinkCard title="How to add Supabase to a project" href="/building/components/supabase" />
+  <LinkCard title="To the component's repository" href="https://github.com/diploi/component-supabase" />
+  <LinkCard title="Official documentation for Supabase" href="https://supabase.com/docs" />
+</CardGrid>