Skip to content

[blog-section] ship /blog — index + article pages + sitemap + 5M EGP case-study post #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Smetools merged 1 commit into from
Jun 11, 2026
Merged

[blog-section] ship /blog — index + article pages + sitemap + 5M EGP case-study post #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 148 additions & 0 deletions app/app/blog/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { getAllPosts, getPost } from '@/lib/blog'
import { BLOG_CSS } from '../blog-styles'

export function generateStaticParams() {
return getAllPosts().map((p) => ({ slug: p.slug }))
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
const post = getPost(params.slug)
if (!post) return {}
const url = `https://knowcap.ai/blog/${post.slug}`
return {
title: `${post.title} — Knowcap Blog`,
description: post.description,
alternates: { canonical: url },
openGraph: {
title: post.title,
description: post.description,
url,
type: 'article',
publishedTime: post.date,
authors: [post.author],
},
}
}

const RELATED_LABELS: Record<string, string> = {
'/for/odoo-partners': 'For Odoo Partners',
'/compare/knowcap-vs-otter': 'Knowcap vs Otter',
'/compare/knowcap-vs-read-ai': 'Knowcap vs Read AI',
'/compare/knowcap-vs-fireflies': 'Knowcap vs Fireflies',
'/compare/knowcap-vs-fellow': 'Knowcap vs Fellow',
'/compare/knowcap-vs-granola': 'Knowcap vs Granola',
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {
const post = getPost(params.slug)
if (!post) notFound()

const jsonLd: Record<string, any>[] = [
{
'@context': 'https://schema.org',
'@type': 'BlogPosting',
headline: post.title,
description: post.description,
datePublished: post.date,
author: { '@type': 'Person', name: post.author },
publisher: { '@type': 'Organization', name: 'Knowcap', url: 'https://knowcap.ai' },
mainEntityOfPage: `https://knowcap.ai/blog/${post.slug}`,
keywords: post.tags.join(', '),
},
]
if (post.faqs.length > 0) {
jsonLd.push({
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: post.faqs.map((f) => ({
'@type': 'Question',
name: f.q,
acceptedAnswer: { '@type': 'Answer', text: f.a },
})),
})
}

return (
<div className="kb-root">
<style dangerouslySetInnerHTML={{ __html: BLOG_CSS }} />
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />

<nav className="kb-nav">
<div className="kb-nav-inner">
<Link className="kb-logo" href="/">knowcap<span>.</span></Link>
<div className="kb-nav-links">
<Link href="/for/odoo-partners">For Odoo Partners</Link>
<Link href="/compare/knowcap-vs-otter">Compare</Link>
<Link href="/blog">Blog</Link>
<a className="kb-nav-cta" href={`https://app.knowcap.ai/register?utm_source=blog_${post.slug.slice(0, 40)}`}>Start Verifying →</a>
</div>
</div>
</nav>

<header className="kb-hero">
<div className="kb-hero-inner">
<div className="kb-crumbs">
<Link href="/">knowcap.ai</Link> / <Link href="/blog">blog</Link> / {post.slug}
</div>
{(post.targetPersona || post.tags.length > 0) && (
<div className="kb-pills">
{post.targetPersona && (
<span className="kb-pill"><span className="kb-dot" />{post.targetPersona}</span>
)}
{post.tags.slice(0, 3).map((t) => (
<span key={t} className="kb-pill">{t}</span>
))}
</div>
)}
<h1 className="kb-h1">{post.title}</h1>
<div className="kb-meta">
<span><b>{post.date}</b></span>
<span><b>{post.author}</b></span>
<span><b>{post.readMinutes} min</b> read</span>
</div>
</div>
</header>

{post.sourceKnowcapIds.length > 0 && (
<div className="kb-provenance">
<div className="kb-provenance-inner">
<span className="kb-dot" />
<span>Anchored on a real recorded meeting — verified-source workflow, not a stock anecdote.</span>
</div>
</div>
)}

<article className="kb-article" dangerouslySetInnerHTML={{ __html: post.html }} />

{post.relatedPages.length > 0 && (
<div className="kb-related">
<div className="kb-eyebrow">Related</div>
<div className="kb-related-row">
{post.relatedPages.map((p) => (
<Link key={p} href={p}>{RELATED_LABELS[p] ?? p}</Link>
))}
<Link href="/blog">All posts</Link>
</div>
</div>
)}

<section className="kb-cta">
<h2>AI that only acts on truth.</h2>
<p>Record the meeting. Confirm the claims. Let agents do the work.</p>
<a className="kb-btn" href={`https://app.knowcap.ai/register?utm_source=blog_${post.slug.slice(0, 40)}_cta`}>Start Verifying →</a>
</section>

<footer className="kb-foot">
<div className="kb-foot-inner">
<span>© 2026 Knowcap</span>
<span>
<Link href="/policy">Privacy</Link> · <Link href="/terms">Terms</Link> · <Link href="/contact-us">Contact</Link>
</span>
</div>
</footer>
</div>
)
}
78 changes: 78 additions & 0 deletions app/app/blog/blog-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* Shared scoped CSS for the blog surface (index + article pages).
* Tokens follow docs/DESIGN.md — cream paper, Space Grotesk display,
* JetBrains Mono for meta/claims, single green accent (#1F6B3A).
* Injected as a <style> string (same pattern the compare pages use).
*/
export const BLOG_CSS = `
.kb-root{--bg:#FBFAF8;--surface:#FFFFFF;--bg-muted:#F5F4F1;--border:#E7E4DD;--ink:#18181B;--ink-2:#4A4F5A;--ink-3:#8A8F99;--accent:#1F6B3A;--accent-light:#E8F5ED;
background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.6;min-height:100vh}
.kb-grotesk{font-family:var(--font-space-grotesk),sans-serif}
.kb-mono{font-family:var(--font-mono),monospace}
.kb-nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.kb-nav-inner{max-width:1100px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between}
.kb-logo{font-family:var(--font-space-grotesk),sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.kb-logo span{color:var(--accent)}
.kb-nav-links{display:flex;gap:24px;align-items:center}
.kb-nav-links a{font-size:13px;color:var(--ink-2);text-decoration:none}
.kb-nav-links a:hover{color:var(--ink)}
.kb-nav-cta{background:var(--accent);color:#fff!important;padding:7px 14px;border-radius:8px;font-weight:600}
.kb-hero{background:linear-gradient(135deg,#18181B,#0A0A0A);color:#fff;padding:72px 40px 64px}
.kb-hero-inner{max-width:780px;margin:0 auto}
.kb-crumbs{font-family:var(--font-mono),monospace;font-size:12px;color:rgba(255,255,255,.45);margin-bottom:28px}
.kb-crumbs a{color:rgba(255,255,255,.45);text-decoration:none}
.kb-crumbs a:hover{color:rgba(255,255,255,.7)}
.kb-eyebrow{font-family:var(--font-space-grotesk),sans-serif;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--ink-3);margin-bottom:12px}
.kb-hero .kb-eyebrow{color:rgba(255,255,255,.45)}
.kb-h1{font-family:var(--font-space-grotesk),sans-serif;font-size:clamp(2rem,4.5vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0 0 22px}
.kb-meta{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--font-mono),monospace;font-size:12px;color:rgba(255,255,255,.5)}
.kb-meta b{color:rgba(255,255,255,.85);font-weight:500}
.kb-pills{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.kb-pill{font-family:var(--font-mono),monospace;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.75);display:inline-flex;align-items:center;gap:6px}
.kb-pill .kb-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;display:inline-block}
.kb-provenance{background:var(--accent-light);border-bottom:1px solid var(--border);padding:12px 40px}
.kb-provenance-inner{max-width:780px;margin:0 auto;font-family:var(--font-mono),monospace;font-size:12px;color:var(--accent);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-provenance-inner .kb-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.kb-article{max-width:720px;margin:0 auto;padding:56px 40px 48px}
.kb-article p{margin:0 0 22px;color:var(--ink-2);font-size:16px;line-height:1.75}
.kb-article>p:first-of-type{color:var(--ink);font-size:17px}
.kb-article h2{font-family:var(--font-space-grotesk),sans-serif;font-size:clamp(1.4rem,3vw,1.7rem);font-weight:700;letter-spacing:-.02em;margin:44px 0 16px;color:var(--ink)}
.kb-article h3{font-family:var(--font-space-grotesk),sans-serif;font-size:16px;font-weight:600;margin:28px 0 10px;color:var(--ink)}
.kb-article h4{font-family:var(--font-space-grotesk),sans-serif;font-size:15px;font-weight:600;margin:24px 0 8px;color:var(--ink)}
.kb-article code{font-family:var(--font-mono),monospace;font-size:.86em;background:var(--bg-muted);border:1px solid var(--border);padding:1px 6px;border-radius:6px;color:var(--ink)}
.kb-article a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(31,107,58,.3);text-underline-offset:3px}
.kb-article a:hover{text-decoration-color:var(--accent)}
.kb-article ul,.kb-article ol{margin:0 0 22px;padding-left:24px;color:var(--ink-2);font-size:16px;line-height:1.75}
.kb-article li{margin-bottom:8px}
.kb-article blockquote{border-left:3px solid var(--accent);margin:0 0 22px;padding:4px 0 4px 20px}
.kb-article blockquote p{margin:0;color:var(--ink-2);font-style:italic}
.kb-article hr{border:0;border-top:1px solid var(--border);margin:36px 0}
.kb-related{max-width:720px;margin:0 auto;padding:0 40px 56px}
.kb-related-row{display:flex;gap:10px;flex-wrap:wrap}
.kb-related a{font-family:var(--font-mono),monospace;font-size:12px;color:var(--accent);text-decoration:none;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px}
.kb-related a:hover{border-color:var(--accent)}
.kb-cta{background:linear-gradient(135deg,#18181B,#0A0A0A);padding:72px 40px;text-align:center;color:#fff}
.kb-cta h2{font-family:var(--font-space-grotesk),sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;margin:0 0 14px}
.kb-cta p{color:rgba(255,255,255,.55);font-size:15px;margin:0 0 28px}
.kb-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:12px 24px;border-radius:8px;font-weight:600;font-size:15px}
.kb-foot{background:#0A0A0A;padding:24px 40px}
.kb-foot-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.35)}
.kb-foot-inner a{color:rgba(255,255,255,.35);text-decoration:none}
.kb-foot-inner a:hover{color:rgba(255,255,255,.6)}
.kb-index-head{background:linear-gradient(135deg,#18181B,#0A0A0A);color:#fff;padding:72px 40px 56px}
.kb-index-head-inner{max-width:1100px;margin:0 auto}
.kb-index-sub{color:rgba(255,255,255,.55);font-size:16px;max-width:560px;margin:0}
.kb-grid{max-width:1100px;margin:0 auto;padding:48px 40px 72px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kb-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.kb-card:hover{border-color:#D9D5CC;box-shadow:0 2px 12px rgba(24,24,27,.06)}
.kb-card-date{font-family:var(--font-mono),monospace;font-size:11px;color:var(--ink-3)}
.kb-card h2{font-family:var(--font-space-grotesk),sans-serif;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin:0}
.kb-card p{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0;flex:1}
.kb-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.kb-card-tag{font-family:var(--font-mono),monospace;font-size:10.5px;color:var(--ink-3);background:var(--bg-muted);border:1px solid var(--border);border-radius:999px;padding:2px 9px}
.kb-card-read{font-family:var(--font-mono),monospace;font-size:11px;color:var(--accent)}
@media(max-width:960px){.kb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kb-grid{grid-template-columns:1fr;padding:32px 20px 56px}
.kb-nav-inner,.kb-hero,.kb-index-head,.kb-article,.kb-related,.kb-cta,.kb-provenance{padding-left:20px;padding-right:20px}
.kb-nav-links a:not(.kb-nav-cta){display:none}}
`
81 changes: 81 additions & 0 deletions app/app/blog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import type { Metadata } from 'next'
import Link from 'next/link'
import { getAllPosts } from '@/lib/blog'
import { BLOG_CSS } from './blog-styles'

export const metadata: Metadata = {
title: 'Blog — Knowcap',
description:
'Verified-meeting intelligence for MENA teams: Odoo partners, agencies, audit firms. Case studies, comparisons, and field notes from the trust layer for AI agents.',
alternates: { canonical: 'https://knowcap.ai/blog' },
openGraph: {
title: 'Knowcap Blog',
description: 'Case studies, comparisons, and field notes from the trust layer for AI agents.',
url: 'https://knowcap.ai/blog',
type: 'website',
},
}

export default function BlogIndexPage() {
const posts = getAllPosts()

return (
<div className="kb-root">
<style dangerouslySetInnerHTML={{ __html: BLOG_CSS }} />

<nav className="kb-nav">
<div className="kb-nav-inner">
<Link className="kb-logo" href="/">knowcap<span>.</span></Link>
<div className="kb-nav-links">
<Link href="/for/odoo-partners">For Odoo Partners</Link>
<Link href="/compare/knowcap-vs-otter">Compare</Link>
<Link href="/blog">Blog</Link>
<a className="kb-nav-cta" href="https://app.knowcap.ai/register?utm_source=blog_index">Start Verifying →</a>
</div>
</div>
</nav>

<header className="kb-index-head">
<div className="kb-index-head-inner">
<div className="kb-eyebrow">Field notes</div>
<h1 className="kb-h1">The Knowcap Blog</h1>
<p className="kb-index-sub">
Verified-meeting intelligence for MENA teams — Odoo partners, agencies, audit firms.
Real cases, real numbers, no recycled listicles.
</p>
</div>
</header>

<main className="kb-grid">
{posts.map((post) => (
<Link key={post.slug} href={`/blog/${post.slug}`} className="kb-card">
<span className="kb-card-date">{post.date}</span>
<h2>{post.title}</h2>
<p>{post.description}</p>
<div className="kb-card-tags">
{post.tags.slice(0, 3).map((t) => (
<span key={t} className="kb-card-tag">{t}</span>
))}
</div>
<span className="kb-card-read">{post.readMinutes} min read →</span>
</Link>
))}
</main>

<section className="kb-cta">
<h2>AI that only acts on truth.</h2>
<p>Record the meeting. Confirm the claims. Let agents do the work.</p>
<a className="kb-btn" href="https://app.knowcap.ai/register?utm_source=blog_index_cta">Start Verifying →</a>
</section>

<footer className="kb-foot">
<div className="kb-foot-inner">
<span>© 2026 Knowcap</span>
<span>
<Link href="/policy">Privacy</Link> · <Link href="/terms">Terms</Link> · <Link href="/contact-us">Contact</Link>
</span>
</div>
</footer>
</div>
)
}
17 changes: 15 additions & 2 deletions app/app/sitemap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,34 @@
import type { MetadataRoute } from 'next'
import { getAllPosts } from '@/lib/blog'

/**
* Sitemap for knowcap.ai — covers main, /for/* sub-pages, /compare/* comparison pages,
* and the blog index. Lists known routes; future programmatic SEO pages should be
* appended here or generated dynamically from a content source.
* and the blog (index + every post in content/blog/, read at build time).
*/
export default function sitemap(): MetadataRoute.Sitemap {
const base = 'https://knowcap.ai'
const now = new Date()

const blogEntries: MetadataRoute.Sitemap = [
{ url: `${base}/blog`, lastModified: now, changeFrequency: 'weekly', priority: 0.8 },
...getAllPosts().map((post) => ({
url: `${base}/blog/${post.slug}`,
lastModified: new Date(post.date),
changeFrequency: 'monthly' as const,
priority: 0.6,
})),
]

return [
// Main
{ url: `${base}/`, lastModified: now, changeFrequency: 'weekly', priority: 1.0 },

// Conversion sub-pages (paid traffic destinations)
{ url: `${base}/for/odoo-partners`, lastModified: now, changeFrequency: 'weekly', priority: 0.9 },

// Blog (index + posts)
...blogEntries,

// Comparison pages (SEO bait)
{ url: `${base}/compare/knowcap-vs-otter`, lastModified: now, changeFrequency: 'monthly', priority: 0.7 },
{ url: `${base}/compare/knowcap-vs-read-ai`, lastModified: now, changeFrequency: 'monthly', priority: 0.7 },
Expand Down
Loading