mirror of
https://github.com/katanemo/plano.git
synced 2026-04-25 00:36:34 +02:00
introduce SEO optimization and improve blog content rendering (#709)
* introduce SEO optimizations for marketing reach * quality of life updates to Next * format with biome * improve wording on home badge * adding additional keyword based on trends * add code block and markdown support for blogs * Update metadata for SEO
This commit is contained in:
Musa
GitHub
parent
2941392ed1
commit
56b3246f30
22 changed files with 3314 additions and 736 deletions
|
|
@ -21,18 +21,25 @@
|
|||
"@portabletext/react": "^5.0.0",
|
||||
"@portabletext/types": "^3.0.0",
|
||||
"@sanity/client": "^7.13.0",
|
||||
"@sanity/code-input": "^6.0.4",
|
||||
"@sanity/image-url": "^1.2.0",
|
||||
"@sanity/table": "^2.0.1",
|
||||
"@vercel/analytics": "^1.5.0",
|
||||
"csv-parse": "^6.1.0",
|
||||
"easymde": "^2.20.0",
|
||||
"framer-motion": "^12.23.24",
|
||||
"jsdom": "^27.2.0",
|
||||
"next": "^16.0.7",
|
||||
"next": "^16.1.6",
|
||||
"next-sanity": "^11.6.9",
|
||||
"papaparse": "^5.5.3",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-syntax-highlighter": "^16.1.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"resend": "^6.6.0",
|
||||
"sanity": "^4.18.0",
|
||||
"sanity-plugin-markdown": "^7.0.4",
|
||||
"styled-components": "^6.1.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -44,6 +51,7 @@
|
|||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-syntax-highlighter": "^15.5.13",
|
||||
"tailwindcss": "^4",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
import { defineConfig } from "sanity";
|
||||
import { codeInput } from "@sanity/code-input";
|
||||
import { table } from "@sanity/table";
|
||||
import { markdownSchema } from "sanity-plugin-markdown";
|
||||
import { structureTool } from "sanity/structure";
|
||||
import { schemaTypes } from "./schemaTypes";
|
||||
|
||||
|
|
@ -11,7 +14,7 @@ export default defineConfig({
|
|||
|
||||
basePath: "/studio",
|
||||
|
||||
plugins: [structureTool()],
|
||||
plugins: [structureTool(), codeInput(), table(), markdownSchema()],
|
||||
|
||||
schema: {
|
||||
types: schemaTypes,
|
||||
|
|
|
|||
|
|
@ -35,6 +35,45 @@ export const blogType = defineType({
|
|||
{
|
||||
type: "block",
|
||||
},
|
||||
{
|
||||
type: "code",
|
||||
options: {
|
||||
language: "typescript",
|
||||
languageAlternatives: [
|
||||
{ title: "TypeScript", value: "typescript" },
|
||||
{ title: "JavaScript", value: "javascript" },
|
||||
{ title: "HTML", value: "html" },
|
||||
{ title: "CSS", value: "css" },
|
||||
{ title: "Bash", value: "sh" },
|
||||
{ title: "Python", value: "python" },
|
||||
{ title: "Markdown", value: "markdown" },
|
||||
{ title: "YAML", value: "yaml" },
|
||||
{ title: "JSON", value: "json" },
|
||||
{ title: "XML", value: "xml" },
|
||||
{ title: "SQL", value: "sql" },
|
||||
{ title: "Shell", value: "shell" },
|
||||
{ title: "PowerShell", value: "powershell" },
|
||||
{ title: "Batch", value: "batch" },
|
||||
],
|
||||
withFilename: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "object",
|
||||
name: "markdownBlock",
|
||||
title: "Markdown",
|
||||
fields: [
|
||||
{
|
||||
name: "markdown",
|
||||
title: "Markdown",
|
||||
type: "markdown",
|
||||
description: "Markdown content with preview and image uploads",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "table",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
fields: [
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { Resend } from 'resend';
|
||||
import { NextResponse } from 'next/server';
|
||||
import { Resend } from "resend";
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
function getResendClient() {
|
||||
const apiKey = process.env.RESEND_API_KEY;
|
||||
if (!apiKey) {
|
||||
throw new Error('RESEND_API_KEY environment variable is not set');
|
||||
throw new Error("RESEND_API_KEY environment variable is not set");
|
||||
}
|
||||
return new Resend(apiKey);
|
||||
}
|
||||
|
|
@ -17,18 +17,24 @@ interface ContactPayload {
|
|||
lookingFor: string;
|
||||
}
|
||||
|
||||
function buildProperties(company?: string, lookingFor?: string): Record<string, string> | undefined {
|
||||
function buildProperties(
|
||||
company?: string,
|
||||
lookingFor?: string,
|
||||
): Record<string, string> | undefined {
|
||||
const properties: Record<string, string> = {};
|
||||
if (company) properties.company_name = company;
|
||||
if (lookingFor) properties.looking_for = lookingFor;
|
||||
return Object.keys(properties).length > 0 ? properties : undefined;
|
||||
}
|
||||
|
||||
function isDuplicateError(error: { message?: string; statusCode?: number | null }): boolean {
|
||||
const errorMessage = error.message?.toLowerCase() || '';
|
||||
function isDuplicateError(error: {
|
||||
message?: string;
|
||||
statusCode?: number | null;
|
||||
}): boolean {
|
||||
const errorMessage = error.message?.toLowerCase() || "";
|
||||
return (
|
||||
errorMessage.includes('already exists') ||
|
||||
errorMessage.includes('duplicate') ||
|
||||
errorMessage.includes("already exists") ||
|
||||
errorMessage.includes("duplicate") ||
|
||||
error.statusCode === 409
|
||||
);
|
||||
}
|
||||
|
|
@ -38,7 +44,7 @@ function createContactPayload(
|
|||
firstName: string,
|
||||
lastName: string,
|
||||
company?: string,
|
||||
lookingFor?: string
|
||||
lookingFor?: string,
|
||||
) {
|
||||
const properties = buildProperties(company, lookingFor);
|
||||
return {
|
||||
|
|
@ -53,50 +59,56 @@ function createContactPayload(
|
|||
export async function POST(req: Request) {
|
||||
try {
|
||||
const body = await req.json();
|
||||
const { firstName, lastName, email, company, lookingFor }: ContactPayload = body;
|
||||
const { firstName, lastName, email, company, lookingFor }: ContactPayload =
|
||||
body;
|
||||
|
||||
if (!email || !firstName || !lastName || !lookingFor) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Missing required fields' },
|
||||
{ status: 400 }
|
||||
{ error: "Missing required fields" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const contactPayload = createContactPayload(email, firstName, lastName, company, lookingFor);
|
||||
const contactPayload = createContactPayload(
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
company,
|
||||
lookingFor,
|
||||
);
|
||||
const resend = getResendClient();
|
||||
|
||||
const { data, error } = await resend.contacts.create(contactPayload);
|
||||
|
||||
if (error) {
|
||||
if (isDuplicateError(error)) {
|
||||
const { data: updateData, error: updateError } = await resend.contacts.update(
|
||||
contactPayload
|
||||
);
|
||||
const { data: updateData, error: updateError } =
|
||||
await resend.contacts.update(contactPayload);
|
||||
|
||||
if (updateError) {
|
||||
console.error('Resend update error:', updateError);
|
||||
console.error("Resend update error:", updateError);
|
||||
return NextResponse.json(
|
||||
{ error: updateError.message || 'Failed to update contact' },
|
||||
{ status: 500 }
|
||||
{ error: updateError.message || "Failed to update contact" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, data: updateData });
|
||||
}
|
||||
|
||||
console.error('Resend create error:', error);
|
||||
console.error("Resend create error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: error.message || 'Failed to create contact' },
|
||||
{ status: error.statusCode || 500 }
|
||||
{ error: error.message || "Failed to create contact" },
|
||||
{ status: error.statusCode || 500 },
|
||||
);
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, data });
|
||||
} catch (error) {
|
||||
console.error('Unexpected error:', error);
|
||||
console.error("Unexpected error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: error instanceof Error ? error.message : 'Unknown error' },
|
||||
{ status: 500 }
|
||||
{ error: error instanceof Error ? error.message : "Unknown error" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { client, urlFor } from "@/lib/sanity";
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { PortableText } from "@/components/PortableText";
|
||||
import { notFound } from "next/navigation";
|
||||
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
||||
import { createBlogPostMetadata } from "@/lib/metadata";
|
||||
|
||||
interface BlogPost {
|
||||
_id: string;
|
||||
|
|
@ -67,6 +69,30 @@ export async function generateStaticParams() {
|
|||
return slugs.map((slug) => ({ slug }));
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const post = await getBlogPost(slug);
|
||||
|
||||
if (!post) {
|
||||
return {
|
||||
title: "Post Not Found | Plano Blog",
|
||||
description: "The requested blog post could not be found.",
|
||||
};
|
||||
}
|
||||
|
||||
return createBlogPostMetadata({
|
||||
title: post.title,
|
||||
description: post.summary,
|
||||
slug: post.slug.current,
|
||||
publishedAt: post.publishedAt,
|
||||
author: post.author?.name,
|
||||
});
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({
|
||||
params,
|
||||
}: {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@ import { BlogHeader } from "@/components/BlogHeader";
|
|||
import { FeaturedBlogCard } from "@/components/FeaturedBlogCard";
|
||||
import { BlogCard } from "@/components/BlogCard";
|
||||
import { BlogSectionHeader } from "@/components/BlogSectionHeader";
|
||||
export const metadata: Metadata = {
|
||||
title: "Blog - Plano",
|
||||
description: "Latest insights, updates, and stories from Plano",
|
||||
};
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
|
||||
export const metadata: Metadata = pageMetadata.blog;
|
||||
|
||||
interface BlogPost {
|
||||
_id: string;
|
||||
|
|
|
|||
299
apps/www/src/app/contact/ContactPageClient.tsx
Normal file
299
apps/www/src/app/contact/ContactPageClient.tsx
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@katanemo/ui";
|
||||
import { MessageSquare, Building2, MessagesSquare } from "lucide-react";
|
||||
|
||||
export default function ContactPageClient() {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
lookingFor: "",
|
||||
message: "",
|
||||
});
|
||||
const [status, setStatus] = useState<
|
||||
"idle" | "submitting" | "success" | "error"
|
||||
>("idle");
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setStatus("submitting");
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Something went wrong");
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setFormData({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
lookingFor: "",
|
||||
message: "",
|
||||
});
|
||||
} catch (error) {
|
||||
setStatus("error");
|
||||
setErrorMessage(
|
||||
error instanceof Error ? error.message : "Failed to submit form",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Hero / Header Section */}
|
||||
<section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-324 mx-auto text-left">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-normal leading-tight tracking-tighter text-black mb-6 text-left">
|
||||
<span className="font-sans">Let's start a </span>
|
||||
<span className="font-sans font-medium text-secondary">
|
||||
conversation
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-black/60 max-w-2xl text-left font-sans">
|
||||
Whether you're an enterprise looking for a custom solution or a
|
||||
developer building cool agents, we'd love to hear from you.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content - Split Layout */}
|
||||
<section className="pb-24 px-4 sm:px-6 lg:px-8 grow">
|
||||
<div className="max-w-324 mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">
|
||||
{/* Left Side: Community (Discord) */}
|
||||
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 flex flex-col justify-between h-full overflow-hidden">
|
||||
{/* Background icon */}
|
||||
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-300">
|
||||
<MessagesSquare size={128} className="text-blue-600" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="relative z-10 mb-6">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||
<MessageSquare size={12} className="text-gray-600" />
|
||||
Community
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900">
|
||||
Join Our Discord
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed max-w-md">
|
||||
Connect with other developers, ask questions, share what
|
||||
you're building, and stay updated on the latest features by
|
||||
joining our Discord server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<Button asChild>
|
||||
<a
|
||||
href="https://discord.gg/pGZf2gcwEc"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MessageSquare size={18} />
|
||||
Join Discord Server
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Enterprise Contact */}
|
||||
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 h-full overflow-hidden">
|
||||
{/* Subtle background pattern */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_bottom_right,transparent_0%,rgba(0,0,0,0.01)_50%,transparent_100%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Background icon */}
|
||||
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.08]">
|
||||
<Building2 size={128} className="text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||
<Building2 size={12} className="text-gray-600" />
|
||||
Enterprise
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight mb-4 text-gray-900">
|
||||
Contact Us
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
{status === "success" ? (
|
||||
<div className="bg-gradient-to-br from-green-50 to-emerald-50/50 rounded-xl p-8 text-center border border-green-200/50 shadow-sm">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4 mx-auto">
|
||||
<svg
|
||||
className="w-8 h-8 text-green-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-green-700 text-xl font-semibold mb-2">
|
||||
Message Sent!
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6 text-sm">
|
||||
Thank you for reaching out. We'll be in touch shortly.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setStatus("idle")}
|
||||
className="bg-white border-gray-200 hover:bg-gray-50"
|
||||
>
|
||||
Send another message
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="firstName"
|
||||
className="text-sm font-medium text-gray-600"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
required
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Steve"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="lastName"
|
||||
className="text-sm font-medium text-gray-600"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
required
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Wozniak"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="text-sm font-medium text-gray-600"
|
||||
>
|
||||
Work Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="steve@apple.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="company"
|
||||
className="text-sm font-medium text-gray-600"
|
||||
>
|
||||
Company Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Apple Inc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label
|
||||
htmlFor="lookingFor"
|
||||
className="text-sm font-medium text-gray-600"
|
||||
>
|
||||
How can we help?
|
||||
</label>
|
||||
<textarea
|
||||
id="lookingFor"
|
||||
name="lookingFor"
|
||||
required
|
||||
value={formData.lookingFor}
|
||||
onChange={handleChange}
|
||||
className="flex min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300 resize-none"
|
||||
placeholder="Tell us about your use case, requirements, or questions..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div className="text-red-700 text-sm bg-red-50 p-4 rounded-lg border border-red-200/50 shadow-sm">
|
||||
<div className="font-medium mb-1">Error</div>
|
||||
<div className="text-red-600">{errorMessage}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-1">
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
disabled={status === "submitting"}
|
||||
>
|
||||
{status === "submitting"
|
||||
? "Sending..."
|
||||
: "Send Message"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,234 +1,9 @@
|
|||
"use client";
|
||||
import type { Metadata } from "next";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
import ContactPageClient from "./ContactPageClient";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@katanemo/ui";
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, MessageSquare, Building2, MessagesSquare } from "lucide-react";
|
||||
export const metadata: Metadata = pageMetadata.contact;
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
lookingFor: "",
|
||||
message: "",
|
||||
});
|
||||
const [status, setStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setStatus("submitting");
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/contact", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Something went wrong");
|
||||
}
|
||||
|
||||
setStatus("success");
|
||||
setFormData({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
company: "",
|
||||
lookingFor: "",
|
||||
message: "",
|
||||
});
|
||||
} catch (error) {
|
||||
setStatus("error");
|
||||
setErrorMessage(error instanceof Error ? error.message : "Failed to submit form");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
{/* Hero / Header Section */}
|
||||
<section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-324 mx-auto text-left">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-normal leading-tight tracking-tighter text-black mb-6 text-left">
|
||||
<span className="font-sans">Let's start a </span>
|
||||
<span className="font-sans font-medium text-secondary">
|
||||
conversation
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-black/60 max-w-2xl text-left font-sans">
|
||||
Whether you're an enterprise looking for a custom solution or a developer building cool agents, we'd love to hear from you.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Content - Split Layout */}
|
||||
<section className="pb-24 px-4 sm:px-6 lg:px-8 grow">
|
||||
<div className="max-w-324 mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 items-stretch">
|
||||
|
||||
{/* Left Side: Community (Discord) */}
|
||||
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 flex flex-col justify-between h-full overflow-hidden">
|
||||
{/* Background icon */}
|
||||
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.03] group-hover:opacity-[0.06] transition-opacity duration-300">
|
||||
<MessagesSquare size={128} className="text-blue-600" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="relative z-10 mb-6">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||
<MessageSquare size={12} className="text-gray-600" />
|
||||
Community
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900">Join Our Discord</h2>
|
||||
</div>
|
||||
<p className="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed max-w-md">
|
||||
Connect with other developers, ask questions, share what you're building, and stay updated on the latest features by joining our Discord server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mt-auto">
|
||||
<Button asChild>
|
||||
<a href="https://discord.gg/pGZf2gcwEc" target="_blank" rel="noopener noreferrer">
|
||||
<MessageSquare size={18} />
|
||||
Join Discord Server
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Enterprise Contact */}
|
||||
<div className="group relative bg-white rounded-2xl p-8 sm:p-10 h-full overflow-hidden">
|
||||
{/* Subtle background pattern */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_bottom_right,transparent_0%,rgba(0,0,0,0.01)_50%,transparent_100%)] opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
{/* Background icon */}
|
||||
<div className="absolute -top-4 -right-4 w-32 h-32 opacity-[0.08]">
|
||||
<Building2 size={128} className="text-gray-400" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-gray-100/80 backdrop-blur-sm text-gray-700 text-xs font-mono font-bold tracking-wider uppercase mb-6 w-fit border border-gray-200/50">
|
||||
<Building2 size={12} className="text-gray-600" />
|
||||
Enterprise
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight mb-4 text-gray-900">Contact Us</h2>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
{status === "success" ? (
|
||||
<div className="bg-gradient-to-br from-green-50 to-emerald-50/50 rounded-xl p-8 text-center border border-green-200/50 shadow-sm">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4 mx-auto">
|
||||
<svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-green-700 text-xl font-semibold mb-2">Message Sent!</div>
|
||||
<p className="text-gray-600 mb-6 text-sm">Thank you for reaching out. We'll be in touch shortly.</p>
|
||||
<Button variant="outline" onClick={() => setStatus("idle")} className="bg-white border-gray-200 hover:bg-gray-50">
|
||||
Send another message
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="firstName" className="text-sm font-medium text-gray-600">First Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
required
|
||||
value={formData.firstName}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Steve"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="lastName" className="text-sm font-medium text-gray-600">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
required
|
||||
value={formData.lastName}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Wozniak"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="email" className="text-sm font-medium text-gray-600">Work Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="steve@apple.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="company" className="text-sm font-medium text-gray-600">Company Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="flex h-11 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300"
|
||||
placeholder="Apple Inc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="lookingFor" className="text-sm font-medium text-gray-600">How can we help?</label>
|
||||
<textarea
|
||||
id="lookingFor"
|
||||
name="lookingFor"
|
||||
required
|
||||
value={formData.lookingFor}
|
||||
onChange={handleChange}
|
||||
className="flex min-h-[120px] w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm ring-offset-background placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary/20 focus-visible:border-secondary disabled:cursor-not-allowed disabled:opacity-50 transition-all shadow-sm hover:border-gray-300 resize-none"
|
||||
placeholder="Tell us about your use case, requirements, or questions..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMessage && (
|
||||
<div className="text-red-700 text-sm bg-red-50 p-4 rounded-lg border border-red-200/50 shadow-sm">
|
||||
<div className="font-medium mb-1">Error</div>
|
||||
<div className="text-red-600">{errorMessage}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-1">
|
||||
<Button type="submit" className="w-full" size="lg" disabled={status === "submitting"}>
|
||||
{status === "submitting" ? "Sending..." : "Send Message"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
return <ContactPageClient />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
export default function DocsPage() {
|
||||
return (
|
||||
<section className="px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
|
||||
<div className="max-w-[81rem] mx-auto">
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal leading-tight tracking-tighter text-black mb-6">
|
||||
<span className="font-sans">Documentation</span>
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl lg:text-2xl font-sans font-[400] tracking-[-1.2px] text-black/70">
|
||||
Coming soon...
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,11 +3,15 @@ import Script from "next/script";
|
|||
import "@katanemo/shared-styles/globals.css";
|
||||
import { Analytics } from "@vercel/analytics/next";
|
||||
import { ConditionalLayout } from "@/components/ConditionalLayout";
|
||||
import { defaultMetadata } from "@/lib/metadata";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Plano - Delivery Infrastructure for Agentic Apps",
|
||||
description:
|
||||
"Build agents faster, and deliver them reliably to production - by offloading the critical plumbing work to Plano!",
|
||||
...defaultMetadata,
|
||||
manifest: "/manifest.json",
|
||||
icons: {
|
||||
icon: "/PlanoIcon.svg",
|
||||
apple: "/Logomark.png",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
|
@ -23,7 +27,7 @@ export default function RootLayout({
|
|||
src="https://www.googletagmanager.com/gtag/js?id=G-ML7B1X9HY2"
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script id="google-analytics" strategy="afterInteractive">
|
||||
<Script strategy="afterInteractive">
|
||||
{`
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
|
|
|
|||
26
apps/www/src/app/research/ResearchPageClient.tsx
Normal file
26
apps/www/src/app/research/ResearchPageClient.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
ResearchHero,
|
||||
ResearchGrid,
|
||||
ResearchTimeline,
|
||||
ResearchCTA,
|
||||
ResearchCapabilities,
|
||||
ResearchBenchmarks,
|
||||
} from "@/components/research";
|
||||
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
||||
|
||||
export default function ResearchPageClient() {
|
||||
return (
|
||||
<>
|
||||
<ResearchHero />
|
||||
<ResearchGrid />
|
||||
<ResearchTimeline />
|
||||
<ResearchCTA />
|
||||
<ResearchCapabilities />
|
||||
<ResearchBenchmarks />
|
||||
{/* <ResearchFamily /> */}
|
||||
<UnlockPotentialSection variant="transparent" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,27 +1,9 @@
|
|||
"use client";
|
||||
import type { Metadata } from "next";
|
||||
import { pageMetadata } from "@/lib/metadata";
|
||||
import ResearchPageClient from "./ResearchPageClient";
|
||||
|
||||
import {
|
||||
ResearchHero,
|
||||
ResearchGrid,
|
||||
ResearchTimeline,
|
||||
ResearchCTA,
|
||||
ResearchCapabilities,
|
||||
ResearchBenchmarks,
|
||||
ResearchFamily,
|
||||
} from "@/components/research";
|
||||
import { UnlockPotentialSection } from "@/components/UnlockPotentialSection";
|
||||
export const metadata: Metadata = pageMetadata.research;
|
||||
|
||||
export default function ResearchPage() {
|
||||
return (
|
||||
<>
|
||||
<ResearchHero />
|
||||
<ResearchGrid />
|
||||
<ResearchTimeline />
|
||||
<ResearchCTA />
|
||||
<ResearchCapabilities />
|
||||
<ResearchBenchmarks />
|
||||
{/* <ResearchFamily /> */}
|
||||
<UnlockPotentialSection variant="transparent" />
|
||||
</>
|
||||
);
|
||||
return <ResearchPageClient />;
|
||||
}
|
||||
|
|
|
|||
32
apps/www/src/app/robots.ts
Normal file
32
apps/www/src/app/robots.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { MetadataRoute } from "next";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: [
|
||||
{
|
||||
userAgent: "*",
|
||||
allow: "/",
|
||||
disallow: [
|
||||
"/studio/", // Sanity Studio admin
|
||||
"/api/", // API routes
|
||||
"/_next/", // Next.js internal routes
|
||||
],
|
||||
},
|
||||
{
|
||||
// Specific rules for common crawlers
|
||||
userAgent: "Googlebot",
|
||||
allow: "/",
|
||||
disallow: ["/studio/", "/api/"],
|
||||
},
|
||||
{
|
||||
userAgent: "Bingbot",
|
||||
allow: "/",
|
||||
disallow: ["/studio/", "/api/"],
|
||||
},
|
||||
],
|
||||
sitemap: `${BASE_URL}/sitemap.xml`,
|
||||
host: BASE_URL,
|
||||
};
|
||||
}
|
||||
77
apps/www/src/app/sitemap.ts
Normal file
77
apps/www/src/app/sitemap.ts
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { MetadataRoute } from "next";
|
||||
import { client } from "@/lib/sanity";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
|
||||
|
||||
interface BlogPost {
|
||||
slug: { current: string };
|
||||
publishedAt?: string;
|
||||
_updatedAt?: string;
|
||||
}
|
||||
|
||||
async function getBlogPosts(): Promise<BlogPost[]> {
|
||||
const query = `*[_type == "blog" && published == true] | order(publishedAt desc) {
|
||||
slug,
|
||||
publishedAt,
|
||||
_updatedAt
|
||||
}`;
|
||||
|
||||
try {
|
||||
return await client.fetch(query);
|
||||
} catch (error) {
|
||||
console.error("Error fetching blog posts for sitemap:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
|
||||
// Static pages with their priorities and change frequencies
|
||||
const staticPages: MetadataRoute.Sitemap = [
|
||||
{
|
||||
url: BASE_URL,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "weekly",
|
||||
priority: 1.0,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/research`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/blog`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "daily",
|
||||
priority: 0.8,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/contact`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.6,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/docs`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "weekly",
|
||||
priority: 0.7,
|
||||
},
|
||||
];
|
||||
|
||||
// Fetch dynamic blog posts
|
||||
const blogPosts = await getBlogPosts();
|
||||
|
||||
const blogPages: MetadataRoute.Sitemap = blogPosts.map((post) => ({
|
||||
url: `${BASE_URL}/blog/${post.slug.current}`,
|
||||
lastModified: post._updatedAt
|
||||
? new Date(post._updatedAt)
|
||||
: post.publishedAt
|
||||
? new Date(post.publishedAt)
|
||||
: new Date(),
|
||||
changeFrequency: "monthly" as const,
|
||||
priority: 0.7,
|
||||
}));
|
||||
|
||||
return [...staticPages, ...blogPages];
|
||||
}
|
||||
|
|
@ -31,9 +31,11 @@ export function Hero() {
|
|||
</span>
|
||||
<span className="text-xs sm:text-sm font-[600] tracking-[-0.6px]! text-black leading-tight">
|
||||
<span className="hidden sm:inline">
|
||||
Signals: Trace Sampling & Preference Data for Continuous Improvement
|
||||
Signals: Trace Sampling for Fast Error Analysis
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
Signals: Trace Sampling for Fast Error Analysis
|
||||
</span>
|
||||
<span className="sm:hidden">Signals: Trace Sampling & Preference Data for Continuous Improvement</span>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -58,12 +60,20 @@ export function Hero() {
|
|||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-start gap-3 sm:gap-4">
|
||||
<Button asChild className="w-full sm:w-auto">
|
||||
<Link href="https://docs.planoai.dev/get_started/quickstart" target="_blank" rel="noopener noreferrer">
|
||||
<Link
|
||||
href="https://docs.planoai.dev/get_started/quickstart"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="secondary" asChild className="w-full sm:w-auto">
|
||||
<Link href="https://docs.planoai.dev" target="_blank" rel="noopener noreferrer">
|
||||
<Link
|
||||
href="https://docs.planoai.dev"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,273 @@
|
|||
"use client";
|
||||
|
||||
import { PortableText as SanityPortableText } from "@portabletext/react";
|
||||
import Image from "next/image";
|
||||
import { urlFor } from "@/lib/sanity";
|
||||
import type { PortableTextBlock } from "@portabletext/types";
|
||||
import { useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import type { Components } from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
|
||||
interface PortableTextProps {
|
||||
content: PortableTextBlock[];
|
||||
}
|
||||
|
||||
const codeTheme: any = oneLight;
|
||||
|
||||
function CodeBlock({
|
||||
code,
|
||||
language,
|
||||
filename,
|
||||
highlightedLines,
|
||||
}: {
|
||||
code: string;
|
||||
language?: string;
|
||||
filename?: string;
|
||||
highlightedLines: Set<number>;
|
||||
}) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const displayLanguage = language || "text";
|
||||
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(code);
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 1200);
|
||||
} catch {
|
||||
setCopied(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="my-6 lg:my-8 not-prose">
|
||||
<div className="rounded-xl border border-black/10 bg-white overflow-hidden shadow-sm">
|
||||
{(filename || language) && (
|
||||
<div className="flex items-center justify-between gap-4 px-4 py-2 text-xs font-semibold text-black/70 bg-black/4 border-b border-black/10">
|
||||
<span className="truncate text-black/80">{filename || "Code"}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="uppercase tracking-wide text-black/60 font-mono">
|
||||
{displayLanguage}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="inline-flex items-center justify-center h-6 w-6 rounded border border-black/10 text-black/60 hover:text-black hover:border-black/20 hover:bg-black/5 transition-colors"
|
||||
aria-label="Copy code"
|
||||
title={copied ? "Copied" : "Copy"}
|
||||
>
|
||||
{copied ? (
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-3.5 w-3.5"
|
||||
>
|
||||
<title>Copied</title>
|
||||
<path d="M16.704 5.296a1 1 0 010 1.414l-7.25 7.25a1 1 0 01-1.414 0l-3.25-3.25a1 1 0 011.414-1.414L8.25 11.343l6.543-6.547a1 1 0 011.411 0z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
className="h-4 w-4"
|
||||
>
|
||||
<title>Copy</title>
|
||||
<rect x="9" y="9" width="10" height="10" rx="2" />
|
||||
<rect x="5" y="5" width="10" height="10" rx="2" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<SyntaxHighlighter
|
||||
language={displayLanguage}
|
||||
style={codeTheme}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
background: "transparent",
|
||||
padding: "1rem",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
lineProps={(lineNumber: number) =>
|
||||
highlightedLines.has(lineNumber)
|
||||
? {
|
||||
style: {
|
||||
backgroundColor: "rgba(251, 191, 36, 0.2)",
|
||||
},
|
||||
}
|
||||
: { style: {} }
|
||||
}
|
||||
wrapLines
|
||||
codeTagProps={{ style: { fontFamily: "inherit" } }}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const markdownComponents: Components = {
|
||||
h1: (props) => (
|
||||
<h1 className="text-2xl font-semibold text-black mb-3" {...props} />
|
||||
),
|
||||
h2: (props) => (
|
||||
<h2 className="text-xl font-semibold text-black mt-10 mb-5" {...props} />
|
||||
),
|
||||
h3: (props) => (
|
||||
<h3 className="text-lg font-semibold text-black mt-10 mb-5" {...props} />
|
||||
),
|
||||
p: (props) => (
|
||||
<p className="text-base text-black/80 mb-3 leading-relaxed" {...props} />
|
||||
),
|
||||
ul: (props) => (
|
||||
<ul className="list-disc list-inside mb-3 text-black/80" {...props} />
|
||||
),
|
||||
ol: (props) => (
|
||||
<ol className="list-decimal list-inside mb-3 text-black/80" {...props} />
|
||||
),
|
||||
a: (props) => (
|
||||
<a className="text-secondary hover:underline font-medium" {...props} />
|
||||
),
|
||||
blockquote: (props) => (
|
||||
<blockquote
|
||||
className="border-l-4 border-secondary pl-4 italic text-black/70"
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
table: (props) => (
|
||||
<div className="my-4 overflow-x-auto">
|
||||
<table
|
||||
className="w-full border-collapse text-sm text-left border border-black/20"
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
thead: (props) => <thead className="bg-black/4" {...props} />,
|
||||
tbody: (props) => <tbody className="divide-y divide-black/10" {...props} />,
|
||||
tr: (props) => <tr className="even:bg-black/2" {...props} />,
|
||||
th: (props) => (
|
||||
<th className="border border-black/20 px-3 py-2 text-left font-semibold text-black" {...props} />
|
||||
),
|
||||
td: (props) => (
|
||||
<td className="border border-black/20 px-3 py-2 text-left text-black/80" {...props} />
|
||||
),
|
||||
pre: (props) => (
|
||||
<pre className="rounded bg-black/10 p-3 text-sm overflow-x-auto" {...props} />
|
||||
),
|
||||
code: ({ className, children }) => {
|
||||
const match = /language-(\w+)/.exec(className || "");
|
||||
if (match) {
|
||||
return (
|
||||
<SyntaxHighlighter
|
||||
style={codeTheme}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
background: "transparent",
|
||||
fontSize: "0.875rem",
|
||||
}}
|
||||
codeTagProps={{ style: { fontFamily: "inherit" } }}
|
||||
>
|
||||
{String(children).replace(/\n$/, "")}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<code
|
||||
className="rounded bg-black/10 px-1.5 py-0.5 text-[0.95em] font-mono"
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
const components = {
|
||||
types: {
|
||||
code: ({ value }: any) => {
|
||||
if (!value?.code) return null;
|
||||
const highlightedLines = new Set<number>(
|
||||
Array.isArray(value.highlightedLines) ? value.highlightedLines : [],
|
||||
);
|
||||
return (
|
||||
<CodeBlock
|
||||
code={String(value.code)}
|
||||
language={value.language}
|
||||
filename={value.filename}
|
||||
highlightedLines={highlightedLines}
|
||||
/>
|
||||
);
|
||||
},
|
||||
table: ({ value }: any) => {
|
||||
const rows = Array.isArray(value?.rows) ? value.rows : [];
|
||||
if (rows.length === 0) return null;
|
||||
const headerRowIndex = rows.findIndex((row: any) => row?.isHeader);
|
||||
const headerRow =
|
||||
headerRowIndex >= 0 ? rows[headerRowIndex] : undefined;
|
||||
const bodyRows =
|
||||
headerRowIndex >= 0
|
||||
? rows.filter((_: any, index: number) => index !== headerRowIndex)
|
||||
: rows;
|
||||
const renderCells = (cells: any[], isHeader: boolean) =>
|
||||
(cells || []).map((cell: any, index: number) => {
|
||||
const Tag = isHeader ? "th" : "td";
|
||||
return (
|
||||
<Tag
|
||||
key={cell?._key || index}
|
||||
className={`border border-black/20 px-3 py-2 text-left align-top ${
|
||||
isHeader ? "font-semibold text-black" : "text-black/80"
|
||||
}`}
|
||||
>
|
||||
{cell?.value || ""}
|
||||
</Tag>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="my-6 lg:my-8 overflow-x-auto not-prose">
|
||||
<div className="rounded-xl border border-black/20 overflow-hidden bg-white">
|
||||
<table className="w-full border-collapse text-sm text-left">
|
||||
{headerRow?.cells?.length ? (
|
||||
<thead className="bg-black/4 text-black/80">
|
||||
<tr>{renderCells(headerRow.cells, true)}</tr>
|
||||
</thead>
|
||||
) : null}
|
||||
<tbody className="divide-y divide-black/10">
|
||||
{bodyRows.map((row: any, rowIndex: number) => (
|
||||
<tr key={row?._key || rowIndex} className="even:bg-black/2">
|
||||
{renderCells(row?.cells || [], false)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
markdownBlock: ({ value }: any) => {
|
||||
const markdown = value?.markdown;
|
||||
if (!markdown) return null;
|
||||
return (
|
||||
<div className="my-6 lg:my-8">
|
||||
<div className="rounded-xl border border-black/10 bg-black/2 px-5 py-4">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={markdownComponents}
|
||||
>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
image: ({ value }: any) => {
|
||||
if (!value?.asset) return null;
|
||||
|
||||
|
|
@ -55,12 +314,12 @@ const components = {
|
|||
</h1>
|
||||
),
|
||||
h2: (props: any) => (
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-normal leading-tight tracking-tighter text-black mt-8 mb-4 first:mt-0">
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-normal leading-tight tracking-tighter text-black mt-10 mb-5 first:mt-0">
|
||||
<span className="font-sans">{props.children}</span>
|
||||
</h2>
|
||||
),
|
||||
h3: (props: any) => (
|
||||
<h3 className="text-2xl sm:text-3xl lg:text-4xl font-normal leading-tight tracking-tighter text-black mt-6 mb-3 first:mt-0">
|
||||
<h3 className="text-2xl sm:text-3xl lg:text-4xl font-normal leading-tight tracking-tighter text-black mt-8 mb-4 first:mt-0">
|
||||
<span className="font-sans">{props.children}</span>
|
||||
</h3>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -33,10 +33,14 @@ export function UnlockPotentialSection({
|
|||
|
||||
<div className="flex flex-col sm:flex-row gap-5">
|
||||
<Button asChild>
|
||||
<Link href="https://docs.planoai.dev/get_started/quickstart">Deploy today</Link>
|
||||
<Link href="https://docs.planoai.dev/get_started/quickstart">
|
||||
Deploy today
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="secondaryDark" asChild>
|
||||
<Link href="https://docs.planoai.dev/get_started/quickstart">Documentation</Link>
|
||||
<Link href="https://docs.planoai.dev/get_started/quickstart">
|
||||
Documentation
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
338
apps/www/src/lib/metadata.ts
Normal file
338
apps/www/src/lib/metadata.ts
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
import type { Metadata } from "next";
|
||||
|
||||
const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://planoai.dev";
|
||||
|
||||
/**
|
||||
* Site-wide metadata configuration
|
||||
* Centralized SEO settings for consistent branding and search optimization
|
||||
*/
|
||||
export const siteConfig = {
|
||||
name: "Plano",
|
||||
tagline: "Delivery Infrastructure for Agentic Apps",
|
||||
description:
|
||||
"Build agents faster and deliver them reliably to production. Plano is an AI-native proxy and data plane for agent orchestration, LLM routing, guardrails, and observability.",
|
||||
url: BASE_URL,
|
||||
ogImage: `${BASE_URL}/Logomark.png`,
|
||||
links: {
|
||||
docs: "https://docs.planoai.dev",
|
||||
github: "https://github.com/katanemo/plano",
|
||||
discord: "https://discord.gg/pGZf2gcwEc",
|
||||
huggingface: "https://huggingface.co/katanemo",
|
||||
},
|
||||
keywords: [
|
||||
// High-intent comparison/alternative searches (proven search volume)
|
||||
"LiteLLM alternative",
|
||||
"Portkey alternative",
|
||||
"Helicone alternative",
|
||||
"OpenRouter alternative",
|
||||
"Kong AI Gateway alternative",
|
||||
|
||||
// Primary keywords (high volume, validated by industry reports)
|
||||
"AI gateway",
|
||||
"LLM gateway",
|
||||
"agentic AI",
|
||||
"AI agents",
|
||||
"agent orchestration",
|
||||
"LLM routing",
|
||||
|
||||
// MCP - massive 2025 trend (97M+ SDK downloads, industry standard)
|
||||
"MCP server",
|
||||
"Model Context Protocol",
|
||||
"MCP gateway",
|
||||
"MCP observability",
|
||||
"MCP security",
|
||||
|
||||
// Problem-aware searches (how developers search)
|
||||
"LLM rate limiting",
|
||||
"LLM load balancing",
|
||||
"LLM failover",
|
||||
"provider fallback",
|
||||
"multi-provider LLM",
|
||||
"LLM cost optimization",
|
||||
"token usage tracking",
|
||||
|
||||
// Agent framework integration (trending frameworks)
|
||||
"LangGraph gateway",
|
||||
"LangChain infrastructure",
|
||||
"CrewAI deployment",
|
||||
"AutoGen orchestration",
|
||||
"multi-agent orchestration",
|
||||
|
||||
// Production & reliability (enterprise focus)
|
||||
"AI agents in production",
|
||||
"production AI infrastructure",
|
||||
"agent reliability",
|
||||
"deploy AI agents",
|
||||
"scaling AI agents",
|
||||
"LLM traffic management",
|
||||
|
||||
// Observability & LLMOps (growing category)
|
||||
"LLM observability",
|
||||
"AI observability",
|
||||
"agent tracing",
|
||||
"LLMOps",
|
||||
"AI telemetry",
|
||||
"prompt versioning",
|
||||
|
||||
// Guardrails & safety (enterprise requirement)
|
||||
"AI guardrails",
|
||||
"LLM content filtering",
|
||||
"prompt injection protection",
|
||||
"AI safety middleware",
|
||||
|
||||
// Routing & optimization
|
||||
"model routing",
|
||||
"inference routing",
|
||||
"latency based routing",
|
||||
"intelligent model selection",
|
||||
"semantic caching LLM",
|
||||
|
||||
// Emerging trends (A2A, agentic RAG)
|
||||
"A2A protocol",
|
||||
"agent to agent communication",
|
||||
"agentic RAG",
|
||||
"tool calling orchestration",
|
||||
"function calling routing",
|
||||
|
||||
// Use cases (specific applications)
|
||||
"RAG infrastructure",
|
||||
"chatbot backend",
|
||||
"AI customer service infrastructure",
|
||||
"coding agent infrastructure",
|
||||
|
||||
// Infrastructure architecture
|
||||
"AI data plane",
|
||||
"AI control plane",
|
||||
"AI proxy",
|
||||
"unified LLM API",
|
||||
|
||||
// Open source & self-hosted (strong developer interest)
|
||||
"open source AI gateway",
|
||||
"open source LLM gateway",
|
||||
"self hosted AI gateway",
|
||||
"on premise LLM routing",
|
||||
|
||||
// Brand (minimal, necessary)
|
||||
"Plano AI",
|
||||
"Plano gateway",
|
||||
"Arch gateway",
|
||||
],
|
||||
authors: [{ name: "Katanemo", url: "https://github.com/katanemo/plano" }],
|
||||
creator: "Katanemo",
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate page-specific metadata with consistent defaults
|
||||
*/
|
||||
export function createMetadata({
|
||||
title,
|
||||
description,
|
||||
keywords = [],
|
||||
image,
|
||||
noIndex = false,
|
||||
pathname = "",
|
||||
}: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
keywords?: string[];
|
||||
image?: string;
|
||||
noIndex?: boolean;
|
||||
pathname?: string;
|
||||
}): Metadata {
|
||||
const pageTitle = title
|
||||
? `${title} | ${siteConfig.name}`
|
||||
: `${siteConfig.name} - ${siteConfig.tagline}`;
|
||||
|
||||
const pageDescription = description || siteConfig.description;
|
||||
const pageImage = image || siteConfig.ogImage;
|
||||
const pageUrl = pathname ? `${BASE_URL}${pathname}` : BASE_URL;
|
||||
|
||||
return {
|
||||
title: pageTitle,
|
||||
description: pageDescription,
|
||||
keywords: [...siteConfig.keywords, ...keywords],
|
||||
authors: siteConfig.authors,
|
||||
creator: siteConfig.creator,
|
||||
metadataBase: new URL(BASE_URL),
|
||||
alternates: {
|
||||
canonical: pageUrl,
|
||||
},
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
url: pageUrl,
|
||||
title: pageTitle,
|
||||
description: pageDescription,
|
||||
siteName: siteConfig.name,
|
||||
images: [
|
||||
{
|
||||
url: pageImage,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: `${siteConfig.name} - ${siteConfig.tagline}`,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: pageTitle,
|
||||
description: pageDescription,
|
||||
images: [pageImage],
|
||||
creator: "@katanemo",
|
||||
},
|
||||
robots: noIndex
|
||||
? {
|
||||
index: false,
|
||||
follow: false,
|
||||
}
|
||||
: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-video-preview": -1,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Default metadata for the root layout
|
||||
*/
|
||||
export const defaultMetadata: Metadata = createMetadata({});
|
||||
|
||||
/**
|
||||
* Page-specific metadata configurations
|
||||
*/
|
||||
export const pageMetadata = {
|
||||
home: createMetadata({
|
||||
pathname: "/",
|
||||
keywords: ["AI gateway", "agent orchestration", "LLM routing"],
|
||||
}),
|
||||
|
||||
research: createMetadata({
|
||||
title: "Research",
|
||||
description:
|
||||
"Explore Plano's applied AI research focusing on safe and efficient agent delivery. Discover our orchestrator models, benchmarks, and open-source LLMs on Hugging Face.",
|
||||
pathname: "/research",
|
||||
keywords: [
|
||||
"AI research",
|
||||
"orchestrator models",
|
||||
"Plano orchestrator",
|
||||
"AI benchmarks",
|
||||
"open source LLM",
|
||||
],
|
||||
}),
|
||||
|
||||
blog: createMetadata({
|
||||
title: "Blog",
|
||||
description:
|
||||
"Latest insights, tutorials, and updates from Plano. Learn about AI agents, agent orchestration, LLM routing, and building production-ready agentic applications.",
|
||||
pathname: "/blog",
|
||||
keywords: [
|
||||
"AI blog",
|
||||
"agent tutorials",
|
||||
"LLM guides",
|
||||
"AI engineering",
|
||||
"agentic AI",
|
||||
"Plano blog",
|
||||
"Plano blog posts",
|
||||
"Arch gateway blog",
|
||||
],
|
||||
}),
|
||||
|
||||
contact: createMetadata({
|
||||
title: "Contact",
|
||||
description:
|
||||
"Get in touch with the Plano team. Join our Discord community or contact us for enterprise solutions for your AI agent infrastructure needs.",
|
||||
pathname: "/contact",
|
||||
keywords: ["contact Plano", "AI support", "enterprise AI", "AI consulting"],
|
||||
}),
|
||||
|
||||
docs: createMetadata({
|
||||
title: "Documentation",
|
||||
description:
|
||||
"Comprehensive documentation for Plano. Learn how to set up agent orchestration, LLM routing, guardrails, and observability for your AI applications.",
|
||||
pathname: "/docs",
|
||||
keywords: [
|
||||
"Plano docs",
|
||||
"AI gateway documentation",
|
||||
"agent setup guide",
|
||||
"LLM configuration",
|
||||
],
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate metadata for blog posts
|
||||
*/
|
||||
export function createBlogPostMetadata({
|
||||
title,
|
||||
description,
|
||||
slug,
|
||||
publishedAt,
|
||||
author,
|
||||
image,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
slug: string;
|
||||
publishedAt?: string;
|
||||
author?: string;
|
||||
image?: string;
|
||||
}): Metadata {
|
||||
const pageUrl = `${BASE_URL}/blog/${slug}`;
|
||||
// Use the dynamic OG image endpoint for blog posts
|
||||
const ogImage = `${BASE_URL}/api/og/${slug}`;
|
||||
|
||||
return {
|
||||
title: `${title} | ${siteConfig.name} Blog`,
|
||||
description:
|
||||
description ||
|
||||
`Read "${title}" on the Plano blog. Insights about AI agents, orchestration, and building production-ready agentic applications.`,
|
||||
authors: author ? [{ name: author }] : siteConfig.authors,
|
||||
metadataBase: new URL(BASE_URL),
|
||||
alternates: {
|
||||
canonical: pageUrl,
|
||||
},
|
||||
openGraph: {
|
||||
type: "article",
|
||||
locale: "en_US",
|
||||
url: pageUrl,
|
||||
title: title,
|
||||
description: description || `Read "${title}" on the Plano blog.`,
|
||||
siteName: siteConfig.name,
|
||||
publishedTime: publishedAt,
|
||||
authors: author ? [author] : undefined,
|
||||
images: [
|
||||
{
|
||||
url: ogImage,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: title,
|
||||
},
|
||||
],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: title,
|
||||
description: description || `Read "${title}" on the Plano blog.`,
|
||||
images: [ogImage],
|
||||
creator: "@katanemo",
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
"max-video-preview": -1,
|
||||
"max-image-preview": "large",
|
||||
"max-snippet": -1,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue