+
+
+ 
+
+
+
+
+ {neighbors.length > 0 && (
+
+ )}
+
+
+
+
+
+
+
+ Open source.
diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro index 5c9bb234..63b1838b 100644 --- a/site/src/components/Header.astro +++ b/site/src/components/Header.astro @@ -62,6 +62,7 @@ const nav: NavItem[] = [ { label: 'Deliverability',href: '/deliverability/',match: '/deliverability' }, { label: 'Pricing', href: '/pricing/', match: '/pricing' }, { label: 'Learn', href: '/learn/', match: '/learn' }, + { label: 'Blog', href: '/blog/', match: '/blog' }, ]; function active(match?: string) { diff --git a/site/src/components/blog/BlogCover.astro b/site/src/components/blog/BlogCover.astro new file mode 100644 index 00000000..44529998 --- /dev/null +++ b/site/src/components/blog/BlogCover.astro @@ -0,0 +1,56 @@ +--- +/** + * Post cover art. Uses the frontmatter `cover` image when one is set; + * otherwise composes a deterministic sky scene from the post id, so every + * post gets stable, on-brand artwork without anyone designing it. + */ +import Cloud from '../Cloud.astro'; +import type { BlogPost } from '../../lib/blog'; + +interface Props { + post: BlogPost; + /** Lazy-load by default; the featured card should pass eager. */ + eager?: boolean; +} +const { post, eager = false } = Astro.props; + +let hash = 0; +for (const ch of post.id) hash = (hash * 31 + ch.charCodeAt(0)) % 9973; + +const skies = [ + // bright hero sky + 'radial-gradient(ellipse 140% 140% at 72% 25%, #7dd3fc 0%, #38bdf8 18%, #0ea5e9 36%, #0284c7 58%, #075985 82%)', + // deep band + 'radial-gradient(ellipse 130% 140% at 72% 28%, #0284c7 0%, #0369a1 25%, #075985 50%, #0c4a6e 80%, #0a3d5c 100%)', + // morning + 'radial-gradient(ellipse 130% 120% at 30% 0%, #bae6fd 0%, #7dd3fc 35%, #38bdf8 70%, #0ea5e9 100%)', + // dusk + 'radial-gradient(ellipse 130% 120% at 70% 10%, #a5b4fc 0%, #818cf8 30%, #38bdf8 70%, #0284c7 100%)', + // noon + 'radial-gradient(ellipse 150% 130% at 50% -20%, #e0f2fe 0%, #7dd3fc 40%, #0ea5e9 80%, #0284c7 100%)', +]; + +const sky = skies[hash % skies.length]; +const cloudA = ((hash % 5) + 1) as 1 | 2 | 3 | 4 | 5; +const cloudB = (((hash >> 3) % 5) + 1) as 1 | 2 | 3 | 4 | 5; +const flip = hash % 2 === 0; +--- +{post.data.cover ? ( +{post.data.description}
+ + ))} +Nothing matches that search.
+Try a different word, or clear the field.
+