get the mvp ready

Author: HarshCasper

astro.config.mjs

@@ -39,6 +39,9 @@ export default defineConfig({
       title: 'Docs',
       favicon: '/images/favicons/favicon.ico',
       customCss: ['./src/styles/global.css'],
+      components: {
+        TwoColumnContent: './src/components/ContentWithPricing.astro',
+      },
       head: [
         {
           tag: 'script',

src/components/ContentWithPricing.astro

@@ -0,0 +1,19 @@
+---
+import Default from '@astrojs/starlight/components/TwoColumnContent.astro';
+import PricingBadge from './PricingBadge.astro';
+
+// Check if this is an AWS service page (but not the index page)
+const route = Astro.locals.starlightRoute;
+const isAwsServicePage = route.id.startsWith('aws/services/') && !route.id.includes('/index');
+---
+
+<Default>
+  <!-- Show pricing info at the top of content for AWS service pages -->
+  {isAwsServicePage && <PricingBadge />}
+  
+  <!-- Regular page content -->
+  <slot />
+  
+  <!-- Pass through right sidebar slot -->
+  <slot name="right-sidebar" slot="right-sidebar" />
+</Default> 

src/components/PricingBadge.astro

@@ -0,0 +1,33 @@
+---
+import PricingBadge from './PricingBadge.tsx';
+
+// Get the current page's frontmatter data
+const route = Astro.locals.starlightRoute;
+const tags = route.entry?.data?.tags || [];
+
+---
+
+{tags.length > 0 && <PricingBadge tags={tags} client:load />}
+
+
+<style>
+  :global(.pricing-badge-container) {
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    border-left: 4px solid var(--sl-color-accent);
+  }
+
+  :global(.pricing-badge-header) {
+    margin-bottom: 0.5rem;
+  }
+
+  :global(.pricing-badge-details) {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+</style> 

src/components/PricingBadge.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+type PricingTier = 'Free' | 'Base' | 'Ultimate';
+
+interface PricingBadgeProps {
+  tags: string[];
+}
+
+const PricingBadge: React.FC<PricingBadgeProps> = ({ tags }) => {
+  // Find pricing tags from the tags array
+  const pricingTags = tags.filter((tag): tag is PricingTier => 
+    ['Free', 'Base', 'Ultimate'].includes(tag)
+  );
+  
+  if (pricingTags.length === 0) return null;
+  
+  // Sort by hierarchy and take the highest tier
+  const sortedTags = pricingTags.sort((a, b) => {
+    const order: Record<PricingTier, number> = { 'Free': 0, 'Base': 1, 'Ultimate': 2 };
+    return order[a] - order[b];
+  });
+  
+  const primaryPlan = sortedTags[sortedTags.length - 1];
+  
+  // Determine which plans have access based on inheritance
+  const getAvailablePlans = (plan: PricingTier): PricingTier[] => {
+    switch (plan) {
+      case 'Free':
+        return ['Free', 'Base', 'Ultimate'];
+      case 'Base':
+        return ['Base', 'Ultimate'];
+      case 'Ultimate':
+        return ['Ultimate'];
+    }
+  };
+  
+  const availablePlans = getAvailablePlans(primaryPlan);
+  
+  const getBadgeColor = (plan: PricingTier) => {
+    switch (plan) {
+      case 'Free':
+        return '#10b981'; // green
+      case 'Base':
+        return '#3b82f6'; // blue  
+      case 'Ultimate':
+        return '#f59e0b'; // amber
+    }
+  };
+  
+  return (
+    <div className="pricing-badge-container">
+      <div className="pricing-badge-header">
+        <span 
+          className="pricing-badge-main"
+          style={{ 
+            backgroundColor: getBadgeColor(primaryPlan),
+            color: 'white',
+            padding: '0.25rem 0.75rem',
+            borderRadius: '0.375rem',
+            fontSize: '0.875rem',
+            fontWeight: 600
+          }}
+        >
+          Available on {primaryPlan}
+        </span>
+      </div>
+      <div className="pricing-badge-details">
+        <span style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+          This service is available on: {' '}
+        </span>
+        {availablePlans.map((plan, index) => (
+          <span key={plan}>
+            <span 
+              style={{ 
+                fontWeight: 600,
+                color: getBadgeColor(plan)
+              }}
+            >
+              {plan}
+            </span>
+            {index < availablePlans.length - 1 && (
+              <span style={{ color: '#6b7280' }}> • </span>
+            )}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { PricingBadge };
+export default PricingBadge; 

src/content.config.ts

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