|
| 1 | +import type React from "react"; |
| 2 | +import { colors, fonts } from "../components/styles"; |
| 3 | + |
| 4 | +interface BlogHeaderProps { |
| 5 | + title: string; |
| 6 | + icon: string; |
| 7 | + gradient: string; |
| 8 | + accentColor: string; |
| 9 | +} |
| 10 | + |
| 11 | +const BlogHeader: React.FC<BlogHeaderProps> = ({ title, icon, gradient, accentColor }) => ( |
| 12 | + <div |
| 13 | + style={{ |
| 14 | + width: "100%", |
| 15 | + height: "100%", |
| 16 | + background: `linear-gradient(135deg, ${colors.bg} 0%, #0d0d18 100%)`, |
| 17 | + display: "flex", |
| 18 | + flexDirection: "column", |
| 19 | + alignItems: "center", |
| 20 | + justifyContent: "center", |
| 21 | + fontFamily: fonts.sans, |
| 22 | + padding: 80, |
| 23 | + position: "relative", |
| 24 | + overflow: "hidden", |
| 25 | + }} |
| 26 | + > |
| 27 | + {/* Background pattern */} |
| 28 | + <div style={{ |
| 29 | + position: "absolute", |
| 30 | + inset: 0, |
| 31 | + backgroundImage: `radial-gradient(circle at 25% 25%, ${accentColor}15 0%, transparent 50%), radial-gradient(circle at 75% 75%, ${accentColor}10 0%, transparent 50%)`, |
| 32 | + }} /> |
| 33 | + |
| 34 | + {/* Grid lines */} |
| 35 | + <div style={{ |
| 36 | + position: "absolute", |
| 37 | + inset: 0, |
| 38 | + backgroundImage: `linear-gradient(${colors.border}30 1px, transparent 1px), linear-gradient(90deg, ${colors.border}30 1px, transparent 1px)`, |
| 39 | + backgroundSize: "60px 60px", |
| 40 | + opacity: 0.3, |
| 41 | + }} /> |
| 42 | + |
| 43 | + {/* Icon */} |
| 44 | + <div style={{ |
| 45 | + fontSize: 64, |
| 46 | + marginBottom: 32, |
| 47 | + filter: "drop-shadow(0 0 40px " + accentColor + "60)", |
| 48 | + position: "relative", |
| 49 | + }}> |
| 50 | + {icon} |
| 51 | + </div> |
| 52 | + |
| 53 | + {/* Title */} |
| 54 | + <h1 style={{ |
| 55 | + fontSize: 48, |
| 56 | + fontWeight: 800, |
| 57 | + color: colors.text, |
| 58 | + textAlign: "center", |
| 59 | + lineHeight: 1.2, |
| 60 | + maxWidth: 900, |
| 61 | + margin: 0, |
| 62 | + position: "relative", |
| 63 | + letterSpacing: -1, |
| 64 | + }}> |
| 65 | + {title} |
| 66 | + </h1> |
| 67 | + |
| 68 | + {/* AllSource branding */} |
| 69 | + <div style={{ |
| 70 | + position: "absolute", |
| 71 | + bottom: 40, |
| 72 | + display: "flex", |
| 73 | + alignItems: "center", |
| 74 | + gap: 10, |
| 75 | + }}> |
| 76 | + <div style={{ |
| 77 | + width: 24, |
| 78 | + height: 24, |
| 79 | + borderRadius: 7, |
| 80 | + background: `linear-gradient(135deg, ${colors.primary}, ${colors.cyan})`, |
| 81 | + display: "flex", |
| 82 | + alignItems: "center", |
| 83 | + justifyContent: "center", |
| 84 | + fontSize: 12, |
| 85 | + fontWeight: 800, |
| 86 | + color: "white", |
| 87 | + }}>A</div> |
| 88 | + <span style={{ fontSize: 14, fontWeight: 600, color: colors.textDim }}>AllSource Blog</span> |
| 89 | + </div> |
| 90 | + </div> |
| 91 | +); |
| 92 | + |
| 93 | +// Each blog post gets a themed header |
| 94 | +export const blogHeaders: Record<string, BlogHeaderProps> = { |
| 95 | + "introducing-allsource": { |
| 96 | + title: "Introducing AllSource", |
| 97 | + icon: "🚀", |
| 98 | + gradient: "from-indigo-500 to-purple-500", |
| 99 | + accentColor: "#6366f1", |
| 100 | + }, |
| 101 | + "time-travel-queries": { |
| 102 | + title: "Time-Travel Queries", |
| 103 | + icon: "⏳", |
| 104 | + gradient: "from-blue-500 to-cyan-500", |
| 105 | + accentColor: "#3b82f6", |
| 106 | + }, |
| 107 | + "ai-agents-need-memory": { |
| 108 | + title: "AI Agents Need Memory", |
| 109 | + icon: "🧠", |
| 110 | + gradient: "from-purple-500 to-pink-500", |
| 111 | + accentColor: "#a855f7", |
| 112 | + }, |
| 113 | + "event-store-vs-database": { |
| 114 | + title: "Event Store vs Database", |
| 115 | + icon: "⚡", |
| 116 | + gradient: "from-orange-500 to-red-500", |
| 117 | + accentColor: "#f97316", |
| 118 | + }, |
| 119 | + "mcp-tools-claude-integration": { |
| 120 | + title: "43 MCP Tools for Claude", |
| 121 | + icon: "🔧", |
| 122 | + gradient: "from-cyan-500 to-blue-500", |
| 123 | + accentColor: "#06b6d4", |
| 124 | + }, |
| 125 | + "building-agent-memory-in-rust": { |
| 126 | + title: "Building Agent Memory in Rust", |
| 127 | + icon: "🦀", |
| 128 | + gradient: "from-orange-500 to-amber-500", |
| 129 | + accentColor: "#f97316", |
| 130 | + }, |
| 131 | + "12-microsecond-agent-memory": { |
| 132 | + title: "12-Microsecond Agent Memory", |
| 133 | + icon: "⚡", |
| 134 | + gradient: "from-yellow-500 to-orange-500", |
| 135 | + accentColor: "#eab308", |
| 136 | + }, |
| 137 | + "temporal-ai-future-of-rag": { |
| 138 | + title: "Temporal AI: The Future of RAG", |
| 139 | + icon: "🔮", |
| 140 | + gradient: "from-violet-500 to-purple-500", |
| 141 | + accentColor: "#8b5cf6", |
| 142 | + }, |
| 143 | + "why-event-sourcing-2026": { |
| 144 | + title: "Why Event Sourcing in 2026", |
| 145 | + icon: "📐", |
| 146 | + gradient: "from-green-500 to-emerald-500", |
| 147 | + accentColor: "#22c55e", |
| 148 | + }, |
| 149 | + "compressed-index-doubles-cross-domain-recall": { |
| 150 | + title: "Compressed Index Doubles Recall", |
| 151 | + icon: "📊", |
| 152 | + gradient: "from-teal-500 to-cyan-500", |
| 153 | + accentColor: "#14b8a6", |
| 154 | + }, |
| 155 | + "from-zerodex-to-allsource": { |
| 156 | + title: "From Zer0dex to AllSource", |
| 157 | + icon: "🔄", |
| 158 | + gradient: "from-blue-500 to-indigo-500", |
| 159 | + accentColor: "#3b82f6", |
| 160 | + }, |
| 161 | + "zer0dex-vs-allsource-recall": { |
| 162 | + title: "Zer0dex vs AllSource Recall", |
| 163 | + icon: "⚖️", |
| 164 | + gradient: "from-slate-500 to-zinc-500", |
| 165 | + accentColor: "#64748b", |
| 166 | + }, |
| 167 | + "tiered-context-loading-for-agent-loops": { |
| 168 | + title: "Tiered Context Loading", |
| 169 | + icon: "🔄", |
| 170 | + gradient: "from-amber-500 to-orange-500", |
| 171 | + accentColor: "#f59e0b", |
| 172 | + }, |
| 173 | + "connecting-without-an-sdk": { |
| 174 | + title: "Connecting Without an SDK", |
| 175 | + icon: "🔌", |
| 176 | + gradient: "from-green-500 to-teal-500", |
| 177 | + accentColor: "#22c55e", |
| 178 | + }, |
| 179 | + "connection-path": { |
| 180 | + title: "The Connection Path", |
| 181 | + icon: "🛤️", |
| 182 | + gradient: "from-indigo-500 to-blue-500", |
| 183 | + accentColor: "#6366f1", |
| 184 | + }, |
| 185 | +}; |
| 186 | + |
| 187 | +// Factory: create a component for a specific blog slug |
| 188 | +export const makeBlogHeader = (slug: string): React.FC => { |
| 189 | + const props = blogHeaders[slug]; |
| 190 | + if (!props) return () => <BlogHeader title={slug} icon="📝" gradient="from-gray-500 to-gray-600" accentColor="#64748b" />; |
| 191 | + return () => <BlogHeader {...props} />; |
| 192 | +}; |
0 commit comments