fix: use-cases order

Author: ronggur

src/content.config.ts

@@ -275,6 +275,7 @@ const useCases = defineCollection({
       description: z.string().optional(),
       date: z.date().optional(),
       author: z.string().optional(),
+      order: z.number().optional().default(0),
       thumbnail: image().optional(),
       featuredImage: image().optional(),
       draft: z.boolean().optional().default(false),

src/content/use-cases/bring-connectivity-workflows.mdx

@@ -4,6 +4,7 @@ subtitle: "Seamless integration with your current infrastructure"
 description: "From protecting your app with a global proxy to creating CNAME's or using OTel for detailed end-to-end observability, Datum is designed to work the way you work. Leverage existing Kubernetes resource patterns."
 slug: "bring-connectivity-workflows"
 draft: false
+order: 7
 meta:
   title: "Bring Connectivity into Your Existing Workflows | Datum"
   description: "Integrate Datum's connectivity solutions seamlessly with your existing workflows, Kubernetes patterns, and observability tools."

src/content/use-cases/control-traffic-patterns.mdx

@@ -4,6 +4,7 @@ subtitle: "Programmatic traffic management and shaping"
 description: "Shape, prioritize, and isolate traffic programmatically. Datum gives you fine-grained control without the need for hardware or middleboxes."
 slug: "control-traffic-patterns"
 draft: false
+order: 2
 meta:
   title: "Control Traffic Patterns Without Hardware | Datum"
   description: "Shape, prioritize, and isolate traffic programmatically with Datum's software-defined networking approach."

src/content/use-cases/embed-private-connectivity.mdx

@@ -4,6 +4,7 @@ subtitle: "Simple APIs and SDKs for seamless integration"
 description: "With simple APIs and SDKs, Datum makes it easy to embed private connectivity directly into your apps—no custom tunnels or brokers required."
 slug: "embed-private-connectivity"
 draft: false
+order: 3
 meta:
   title: "Embed Private Connectivity into Your Applications | Datum"
   description: "Integrate private connectivity directly into your applications using Datum's simple APIs and SDKs."

src/content/use-cases/interact-privately-alt-clouds.mdx

@@ -4,6 +4,7 @@ subtitle: "Extend private connectivity to AI platforms and SaaS ecosystems"
 description: "Extend private connectivity to AI platforms, SaaS ecosystems, and emerging alt clouds with the same consistency you expect from the public cloud."
 slug: "interact-privately-alt-clouds"
 draft: false
+order: 4
 meta:
   title: "Interact Privately with Alt Clouds | Datum"
   description: "Connect securely to AI platforms, SaaS ecosystems, and emerging cloud providers with Datum's private connectivity."

src/content/use-cases/leverage-public-cloud-onramps.mdx

@@ -4,6 +4,7 @@ subtitle: "Seamless integration with major cloud providers"
 description: "Datum integrates directly with major cloud on-ramps, turning them into seamless extensions of your Galactic VPC."
 slug: "leverage-public-cloud-onramps"
 draft: false
+order: 5
 meta:
   title: "Leverage Public Cloud On-Ramps | Datum"
   description: "Integrate with major cloud on-ramps and turn them into seamless extensions of your Galactic VPC."

src/content/use-cases/take-vpc-everywhere.mdx

@@ -4,6 +4,7 @@ subtitle: "Unified networking across all environments"
 description: "Cloud networking is powerful, yet fragmented. With Datum's Galactic VPC, we smooth out the rough edges and help you leverage programmatic networking wherever you need it, from public clouds to connected cars."
 slug: "take-vpc-everywhere"
 draft: false
+order: 6
 meta:
   title: "Take Your VPC Everywhere | Datum"
   description: "Extend your VPC connectivity across public clouds, edge locations, and IoT devices with Datum's Galactic VPC."

src/pages/use-cases.astro

@@ -11,8 +11,9 @@ import GlobalSection from '@components/GlobalSection.astro';
 
 const page = await getCollectionEntry('pages', 'use-cases');
 
-// Get all use cases from the collection
+// Get all use cases from the collection and sort by order
 const useCases = await getCollection('useCases', ({ data }) => !data.draft);
+useCases.sort((a, b) => (a.data.order || 0) - (b.data.order || 0));
 
 // SEO
 const fm = page.data;

src/pages/use-cases/[slug].astro

@@ -39,7 +39,7 @@ const allUseCaseEntries = await getCollection('useCases');
 // Get navigation articles (sorted by title)
 const sortedUseCases = allUseCaseEntries
   .filter((uc) => !uc.data.draft)
-  .sort((a, b) => a.data.title.localeCompare(b.data.title));
+  .sort((a, b) => (a.data.order || 0) - (b.data.order || 0));
 
 const currentIndex = sortedUseCases.findIndex((uc) => uc.id === entry.id);
 const previousArticle = currentIndex > 0 ? sortedUseCases[currentIndex - 1] : undefined;

src/v1/styles/components.css

@@ -367,7 +367,7 @@
   }
 
   .uc-card-link {
-    @apply absolute top-0 left-0 h-full w-full overflow-hidden -indent-[100%];
+    @apply absolute top-0 left-0 h-full w-full overflow-hidden -indent-[9999px];
   }
 }