homepage: remove top bar + fix subscribe + Staff Editorial header

1. Remove SystemStatusBar from root layout. The "29,220 articles
   indexed / 13 events tracked / [v2.0.0]" strip ate vertical space
   above the fold without serving readers.

2. /api/newsletter/subscribe was returning 500 "Failed to save
   subscription" because:
   - The route used the anon-session client and tried to UPSERT on
     bb.newsletter_subscribers, but the table's RLS only has an
     INSERT policy for the public role. Upsert needs INSERT+UPDATE,
     so the second branch failed RLS.
   - Switched to createAdminClient (service-role) — bypasses RLS,
     which is fine because this is a server-side endpoint with
     server-side email validation.
   - Welcome email now sends via nodemailer in a non-blocking
     background task so a slow SMTP doesn't hold up the response.
     Newer HTML template, brand-aligned, with a real CTA back to
     /news.

   Side work to wire SMTP (done out-of-band):
   - Created newsletter@broadcastbeat.com mailbox in Mailcow via
     the API (2GB quota, active, no force-pw-update).
   - Set SMTP_HOST=mail.onsethost.com, SMTP_PORT=587,
     SMTP_USER/PASS/FROM_EMAIL/FROM_NAME in Coolify env so the
     welcome email actually fires after the next deploy.

3. FeaturedBentoFromDb section header: "Featured · staff editorial"
   (small mono caps) → "Staff Editorial" (font-serif 2xl/3xl, bold,
   with a thin metadata line "Selected by our newsroom" beside it
   and a 2px bottom rule). Matches the editorial typography on the
   article pages.
This commit is contained in:
Ryan Salazar
2026-05-20 18:51:25 +00:00
parent 8f8eaa5fe8
commit 74677a80b8
3 changed files with 106 additions and 56 deletions

View File

@@ -1,76 +1,123 @@
import { createClient } from '@/lib/supabase/server';
import { createAdminClient } from '@/lib/supabase/admin';
import { NextRequest, NextResponse } from 'next/server';
import nodemailer from 'nodemailer';
export const runtime = 'nodejs';
// Public newsletter subscribe endpoint. Used by:
// - NewsletterModal (site-wide popup)
// - Header subscribe widget
// - Homepage NewsletterSignup section
// - Footer signup
//
// Why service-role (not the session client):
// bb.newsletter_subscribers' RLS only has an INSERT policy for anon
// ('public_subscribe_newsletter') — upsert needs both INSERT+UPDATE
// to handle re-subscribers. Service-role bypasses RLS cleanly.
export async function POST(req: NextRequest) {
try {
const { email, topics } = await req.json();
const { email, topics, source } = await req.json();
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
return NextResponse.json({ error: 'Valid email is required' }, { status: 400 });
return NextResponse.json({ error: 'Please enter a valid email address.' }, { status: 400 });
}
const supabase = await createClient();
const normalized = email.toLowerCase().trim();
const supabase = createAdminClient();
// Upsert subscriber (re-subscribe if previously unsubscribed)
const { error } = await supabase
.from('newsletter_subscribers')
.upsert(
{
email: email.toLowerCase().trim(),
topics: topics || [],
email: normalized,
topics: topics && Array.isArray(topics) ? topics : [],
status: 'active',
subscribed_at: new Date().toISOString(),
unsubscribed_at: null,
},
{ onConflict: 'email' }
{ onConflict: 'email' },
);
if (error) {
console.error('Supabase error:', error);
return NextResponse.json({ error: 'Failed to save subscription' }, { status: 500 });
console.error('newsletter_subscribers upsert failed:', error.message, error.details);
return NextResponse.json(
{ error: 'Could not save subscription. Please try again in a moment.' },
{ status: 500 },
);
}
// Send confirmation email via SMTP
const smtpHost = process.env.SMTP_HOST;
const smtpPort = parseInt(process.env.SMTP_PORT || '587');
const smtpUser = process.env.SMTP_USER;
const smtpPass = process.env.SMTP_PASS;
const fromEmail = process.env.SMTP_FROM_EMAIL || smtpUser;
const fromName = process.env.SMTP_FROM_NAME || 'Broadcast Beat';
// Best-effort welcome email — never block the API response on SMTP.
// The signup is already saved to the DB, so we return 200 either way
// and let the email fire in the background.
void sendWelcome(normalized, topics).catch((e) =>
console.error('newsletter welcome email failed:', e?.message || e),
);
if (smtpHost && smtpUser && smtpPass) {
const transporter = nodemailer.createTransport({
host: smtpHost,
port: smtpPort,
secure: smtpPort === 465,
auth: { user: smtpUser, pass: smtpPass },
});
const topicsList = topics && topics.length > 0
? `<p style="color:#aaa;font-size:14px;">You'll receive updates on: <strong style="color:#3b82f6;">${topics.join(', ')}</strong></p>`
: '';
await transporter.sendMail({
from: `"${fromName}" <${fromEmail}>`,
to: email,
subject: `Welcome to Broadcast Beat — You're subscribed!`,
html: `
<div style="background:#0d1520;padding:40px 20px;font-family:sans-serif;max-width:600px;margin:0 auto;">
<h1 style="color:#3b82f6;font-size:24px;margin-bottom:8px;">You're in!</h1>
<p style="color:#e0e0e0;font-size:16px;">Thanks for subscribing to <strong>Broadcast Beat</strong> — the digital platform for broadcast engineering.</p>
${topicsList}
<p style="color:#aaa;font-size:14px;margin-top:24px;">You'll be the first to know about the latest news, product launches, and industry insights.</p>
<hr style="border:none;border-top:1px solid #1e3a5f;margin:32px 0;" />
<p style="color:#555;font-size:12px;">You're receiving this because you signed up at broadcastbeat.com. <a href="${process.env.NEXT_PUBLIC_SITE_URL}/unsubscribe?email=${encodeURIComponent(email)}" style="color:#3b82f6;">Unsubscribe</a></p>
</div>
`,
});
}
return NextResponse.json({ success: true });
} catch (err: unknown) {
console.error('Subscribe error:', err);
return NextResponse.json({ success: true, source: source || null });
} catch (err: any) {
console.error('Subscribe handler error:', err?.message || err);
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
}
}
async function sendWelcome(email: string, topics?: string[]) {
const smtpHost = process.env.SMTP_HOST;
const smtpPort = parseInt(process.env.SMTP_PORT || '587', 10);
const smtpUser = process.env.SMTP_USER;
const smtpPass = process.env.SMTP_PASS;
const fromEmail = process.env.SMTP_FROM_EMAIL || smtpUser;
const fromName = process.env.SMTP_FROM_NAME || 'Broadcast Beat';
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://broadcastbeat.com';
if (!smtpHost || !smtpUser || !smtpPass || !fromEmail) {
// SMTP not configured — signal that to logs but don't blow up.
console.warn('newsletter welcome: SMTP env not set; skipping send');
return;
}
const transporter = nodemailer.createTransport({
host: smtpHost,
port: smtpPort,
secure: smtpPort === 465,
auth: { user: smtpUser, pass: smtpPass },
});
const topicsBlock =
topics && topics.length > 0
? `<p style="color:#aaa;font-size:14px;line-height:1.5;margin:14px 0 0;">You'll receive coverage on: <strong style="color:#3b82f6;">${topics.join(', ')}</strong></p>`
: '';
await transporter.sendMail({
from: `"${fromName}" <${fromEmail}>`,
to: email,
subject: 'Welcome to Broadcast Beat',
html: `
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Welcome to Broadcast Beat</title></head>
<body style="margin:0;padding:0;background:#0a0e15;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#0a0e15;padding:40px 16px;">
<tr><td align="center">
<table role="presentation" cellpadding="0" cellspacing="0" width="600" style="max-width:600px;background:#11192a;border:1px solid #1e3a5f;border-radius:10px;overflow:hidden;">
<tr><td style="padding:32px 36px 8px;">
<div style="font-family:'Courier New',monospace;font-size:10px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:#3b82f6;">Broadcast Beat Newsletter</div>
<h1 style="margin:14px 0 8px;font-size:24px;line-height:1.2;color:#ffffff;font-weight:800;">You're in</h1>
<p style="margin:0;color:#cfd6e1;font-size:15px;line-height:1.55;">Thanks for subscribing to <strong style="color:#ffffff;">Broadcast Beat</strong> — the digital platform for broadcast engineering professionals.</p>
${topicsBlock}
</td></tr>
<tr><td style="padding:18px 36px 8px;">
<p style="margin:0;color:#98a3b3;font-size:14px;line-height:1.6;">You'll get one editorial dispatch a week — industry news, product launches, NAB/IBC coverage, and deep-dives. No spam, no sales calls.</p>
</td></tr>
<tr><td style="padding:18px 36px 26px;" align="center">
<a href="${siteUrl}/news" style="display:inline-block;background:#3b82f6;color:#ffffff;text-decoration:none;padding:11px 22px;border-radius:6px;font-weight:700;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;">Browse The Latest News</a>
</td></tr>
<tr><td style="padding:18px 36px 28px;border-top:1px solid #1e3a5f;">
<p style="margin:0;color:#5a6470;font-size:11px;line-height:1.5;">You're receiving this because you signed up at <a href="${siteUrl}" style="color:#3b82f6;text-decoration:none;">broadcastbeat.com</a>. <a href="${siteUrl}/unsubscribe?email=${encodeURIComponent(email)}" style="color:#98a3b3;">Unsubscribe anytime</a>.</p>
</td></tr>
</table>
</td></tr>
</table>
</body></html>`,
});
}