Webomage.com Stack
Architecture Visual
Webomage.com Architecture
You are looking at it. This portal was built to demonstrate that you can have a “Premium” feel without a premium price tag. The entire site is deployed for free on Vercel, with dynamic features handled by Supabase Edge Functions.
Architecture
- Astro: The meta-framework. It generates static HTML for 95% of the site (Documentation, Landing Pages) for maximum SEO/Performance.
- React Islands: Used only for the interactive bits (Cost Estimator, Filters, Comparison Tool).
- Supabase:
- Edge Functions: Generates OG Images on the fly.
- Storage: Hosts the diagram images.
- Mermaid.js: All diagrams are code. This allows us to “Compile” diagrams into SVG/PNGs.
Use Cases
- Documentation Sites: Fast, searchable, and SEO-friendly.
- Portfolios: Showcase work with high-performance visuals.
- Content Marketing: Blogs that load instantly.
Implementation Guide
How we implemented the “Interactive Cost Estimator”.
Prerequisites
- Astro 4.0
- Supabase
Step 1: The Astro Page
We pass static data (the blueprint details) into a React component.
/* src/pages/blueprints/[...slug].astro */
---
import CostEstimator from '../../components/CostEstimator';
const { entry } = Astro.props;
---
<Layout>
<h1>{entry.data.title}</h1>
<!-- Hydrate this island immediately -->
<CostEstimator
client:load
baseCost={entry.data.estimatedCost}
/>
</Layout>Step 2: The React Component
This runs in the browser.
/* src/components/CostEstimator.jsx */
import { useState } from 'react';
export default function CostEstimator({ baseCost }) {
const [scale, setScale] = useState(1); // 1x, 10x, 100x traffic
return (
<div className="p-4 border rounded-xl glass-panel">
<h3>Cloud Cost Calculator</h3>
<input
type="range"
min="1" max="100"
onChange={(e) => setScale(e.target.value)}
/>
<div className="text-4xl font-bold text-emerald-400">
${(baseCost * scale).toLocaleString()} / month
</div>
</div>
);
}Step 3: View Transitions
Astro 4.0 makes the site feel like a SPA (Single Page App) even though it’s Multi-Page.
/* src/layouts/Layout.astro */
---
import { ViewTransitions } from 'astro:transitions';
---
<head>
<ViewTransitions />
</head>Now, clicking a link doesn’t do a full page refresh. The browser swaps the DOM content and animates the difference.
Production Readiness Checklist
[ ] OG Images: Don’t let social cards be an afterthought. We use a custom Edge Function to generate them dynamically based on the blueprint title.
[ ] Semantic HTML: Use <article>, <aside>, and <nav> so Screen Readers can navigate the complex layout.
[ ] Tailwind Config: Use a custom tailwind.config.mjs to enforce consistent colors (e.g., emerald-400 for primary actions) across all components.
[ ] Analytics: Use privacy-friendly analytics (Vercel Analytics or Plausible) to track which blueprints are most popular without cookies.
Cloud Cost Estimator
Dynamic Pricing Calculator