Update - Added import feature walkthrough

docs/astro.config.mjs

@@ -14,7 +14,7 @@ export default defineConfig({
   }),
   vite: {
     server: {
-      allowedHosts: ['.diploi.app'],
+      allowedHosts: [".diploi.me"],
     },
   },
   integrations: [
@@ -81,10 +81,11 @@ export default defineConfig({
         {
           label: 'Deploying',
           items: [
-            'deploying/creating-a-project',
-            'deploying/creating-a-deployment',
-            'deploying/cloning-a-deployment',
-            'deploying/custom-domain',
+            "deploying/creating-a-project",
+            "deploying/creating-a-deployment",
+            "deploying/import-from-github",
+            "deploying/cloning-a-deployment",
+            "deploying/custom-domain",
           ],
         },
         {

docs/src/components/ElementList.astro

@@ -0,0 +1,53 @@
+---
+import ElementCard from "./ElementCard.astro";
+import { ElementType, type DiploiElement } from "./types";
+
+interface Props {
+  type: 'component' | 'addon' | 'starter';
+  elementsToShow?: string[];
+  heading?: string;
+  hideHeading?: boolean;
+}
+
+const {
+  type,
+  elementsToShow = [],
+  heading,
+  hideHeading = false
+} = Astro.props;
+
+const defaultHeadings = {
+  component: "Components available",
+  addon: "Add-ons available",
+  starter: "Starter kits available",
+};
+
+const {
+  result: { data },
+} = await fetch(
+  `${import.meta.env.API_URL || "https://console.diploi.com"}/api/trpc/stack.listPreviewComponents`,
+).then((response) => response.json());
+
+if (!data || data.status !== "ok") {
+  throw new Error(`Failed to load ${type}s (${data})`);
+}
+
+const componentTypeID = ElementType[type];
+let elementList: DiploiElement[] = data.components.filter(
+  (element: DiploiElement) => element.componentTypeID === componentTypeID
+);
+
+if (elementsToShow.length > 0) {
+  elementList = elementList.filter((element) =>
+    elementsToShow.includes(element.name)
+  );
+}
+
+const displayHeading = heading || defaultHeadings[type];
+---
+
+{!hideHeading && <h4>{displayHeading}</h4>}
+
+<div class="flex gap-8 items-baseline flex-wrap">
+  {elementList.map((element) => <ElementCard element={element} />)}
+</div>

docs/src/components/types.ts

@@ -1,7 +1,15 @@
-export type DiploiElement = { name: string; type: string; url: string, badge: string };
+export type DiploiElement = { name: string; type: string; url: string; badge: string, componentTypeID: number };
 export type DiploiInstance = {
   name: string;
   vCpu: string;
   memoryGiB: string;
   price: number;
 };
+export type ComponentsAvailable = 'n8n' | 'FastAPI' | 'Laravel' | 'Flask' | 'Deno' | 'Supabase' | 'Next.js' | 'Node.js' | 'Bun' | 'React + Vite' | 'Astro' | 'SvelteKit' | 'Nue' | 'Ghost' | 'Hono' | 'Lovable' | 'ASP.NET' | 'Blazor' | 'Django'
+export type AddonsAvailable = 'PostgreSQL' | 'Redis' | 'MongoDB' | 'MariaDB' | 'MinIO'
+
+export const ElementType = {
+  component: 1,
+  addon: 2,
+  starter: 3,
+} as const;

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

@@ -10,16 +10,15 @@ import ProjectOptionsGeneral from '../../../assets/ProjectOptionsGeneral.png';
 import ProjectOptionsDomain from '../../../assets/ProjectOptionsDomain.png';
 import ProjectOptionsComponentsAndAddons from '../../../assets/ProjectOptionsComponentsAndAddons.png';
 import DeleteProject from '../../../assets/DeleteProject.png';
-import ComponentList from "../../../components/ComponentList.astro"
 import ImageToPNG from "../../../components/ImageToPNG.astro"
-import AddonList from "../../../components/AddonList.astro"
+import ElementList from "../../../components/ElementList.astro"
 import { LinkButton } from '@astrojs/starlight/components';
 
 ### Add-ons
 
 Add-ons provide services used by your application. In general, add-ons in Diploi are services that do not require direct development work, which can be services like databases, analytics services, CMS dashboards, etc.
 
-<AddonList/>
+<ElementList type={'addon'}/>
 
 :::note
 Services are not exposed publicly by default. They can only be accessed by the components in your project.

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

@@ -3,16 +3,15 @@ title: Using Components
 description: Components are the core building block in Diploi.
 ---
 
-import ComponentList from "../../../components/ComponentList.astro"
-import AddonList from "../../../components/AddonList.astro"
+import ElementList from "../../../components/ElementList.astro"
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 
 ## Components
 
 You can think of components as the application layer of your project. In Diploi you can have multiple options available to define your application, which you can mix as you wish.
 
-<ComponentList/>
+<ElementList type={'component'}/>
 
 ***
 

docs/src/content/docs/deploying/cloning-a-deployment.mdx

@@ -2,7 +2,7 @@
 title: Cloning a Deployment
 description: How to clone an existing deployment
 sidebar:
-    order: 3
+    order: 4
 ---
 
 import ImageToPNG from  "../../../components/ImageToPNG.astro"

docs/src/content/docs/deploying/creating-a-project.mdx

@@ -22,7 +22,7 @@ The overall process to launch a new application is as follows:
   <Image src={CreateProjectDiagram} alt='Create a project diagram'/>
 </div>
 
-## Create a Project
+## Creating the Stack for a Project
 
 In Diploi, a project refers to a combination of **components** and **add-ons** (also called **services**) that form the **stack** that will make up your application.
 

docs/src/content/docs/deploying/custom-domain.mdx

@@ -2,7 +2,7 @@
 title: Adding Custom Domains
 description: Diploi offers the flexibility to configure custom domains on two levels.
 sidebar:
-    order: 4
+    order: 5
 ---
 import ContactInfo from  "../../../components/ContactInfo.mdx"
 import ImageToPNG from  "../../../components/ImageToPNG.astro"