add persistence badge for aws services (#34)

Author: HarshCasper

astro.config.mjs

@@ -40,7 +40,7 @@ export default defineConfig({
       favicon: '/images/favicons/favicon.ico',
       customCss: ['./src/styles/global.css'],
       components: {
-        PageTitle: './src/components/PageTitleWithPricing.astro',
+        PageTitle: './src/components/PageTitleWithBadges.astro',
       },
       head: [
         {

src/components/PageTitleWithBadges.astro

@@ -0,0 +1,79 @@
+---
+import Default from '@astrojs/starlight/components/PageTitle.astro';
+import PersistenceBadge from './PersistenceBadge.astro';
+
+// Get the current page route
+const route = Astro.locals.starlightRoute;
+const isAwsServicePage = route.id.startsWith('aws/services/') && !route.id.includes('/index');
+const tags = route.entry?.data?.tags || [];
+
+const pricingTags = tags.filter(tag => 
+  ['Free', 'Base', 'Ultimate'].includes(tag)
+);
+
+const getAvailablePlans = (plans) => {
+  if (plans.includes('Free')) {
+    return ['Free', 'Base', 'Ultimate'];
+  } else if (plans.includes('Base')) {
+    return ['Base', 'Ultimate'];
+  } else if (plans.includes('Ultimate')) {
+    return ['Ultimate'];
+  }
+  return plans;
+};
+
+const availablePlans = getAvailablePlans(pricingTags);
+---
+
+<Default />
+
+{isAwsServicePage && availablePlans.length > 0 && (
+  <div class="pricing-badges">
+    {availablePlans.map(plan => (
+      <span class={`pricing-badge pricing-badge-${plan.toLowerCase()}`}>
+        {plan}
+      </span>
+    ))}
+  </div>
+)}
+
+<PersistenceBadge />
+
+<style>
+  .pricing-badges {
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .pricing-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  .pricing-badge-free {
+    background-color: #dcfce7;
+    color: #166534;
+    border: 1px solid #bbf7d0;
+  }
+
+  .pricing-badge-base {
+    background-color: #dbeafe;
+    color: #1e40af;
+    border: 1px solid #93c5fd;
+  }
+
+  .pricing-badge-ultimate {
+    background-color: #fef3c7;
+    color: #92400e;
+    border: 1px solid #fcd34d;
+  }
+</style> 

src/components/PersistenceBadge.astro

@@ -0,0 +1,78 @@
+---
+// Get the current page route
+const route = Astro.locals.starlightRoute;
+const isAwsServicePage = route.id.startsWith('aws/services/') && !route.id.includes('/index');
+const persistence = route.entry?.data?.persistence || null;
+
+// Determine persistence status and display text
+const getPersistenceInfo = (persistenceValue) => {
+  if (!persistenceValue) {
+    return { status: 'not-supported', text: 'Not Supported' };
+  } else if (persistenceValue === 'supported') {
+    return { status: 'supported', text: 'Supported' };
+  } else if (persistenceValue === 'supported with limitations') {
+    return { status: 'limited', text: 'Limited Support' };
+  } else {
+    return { status: 'not-supported', text: 'Not Supported' };
+  }
+};
+
+const persistenceInfo = getPersistenceInfo(persistence);
+---
+
+{isAwsServicePage && (
+  <div class="persistence-badges">
+    <span class="badge-label">Persistence:</span>
+    <span class={`persistence-badge persistence-badge-${persistenceInfo.status}`}>
+      {persistenceInfo.text}
+    </span>
+  </div>
+)}
+
+<style>
+  .persistence-badges {
+    margin-top: 0.5rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .badge-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #6b7280;
+    margin-right: 0.25rem;
+  }
+
+  .persistence-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  /* Persistence badge styles */
+  .persistence-badge-supported {
+    background-color: #d1fae5;
+    color: #065f46;
+    border: 1px solid #a7f3d0;
+  }
+
+  .persistence-badge-limited {
+    background-color: #fef3c7;
+    color: #92400e;
+    border: 1px solid #fcd34d;
+  }
+
+  .persistence-badge-not-supported {
+    background-color: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #fecaca;
+  }
+</style> 

src/content.config.ts

@@ -13,6 +13,7 @@ export const collections = {
 				pro: z.boolean().optional(),
 				leadimage: z.string().optional(),
 				tags: z.array(z.string()).optional(),
+				persistence: z.string().optional(),
 			}),
 		}),
 	}),