shipd 0.1.3 → 0.2.0

package/features/seo/app/blog/[slug]/page.tsx

@@ -0,0 +1,314 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Calendar, Clock } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// Blog posts content
+// In production, this would come from a CMS, database, or markdown files
+const blogPosts: Record<string, {
+  title: string;
+  description: string;
+  date: string;
+  author: string;
+  readTime: string;
+  category: string;
+  content: string;
+}> = {
+  "getting-started-with-saas": {
+    title: "Getting Started with Your SaaS Journey",
+    description: "Learn how to validate your SaaS idea and build your first MVP in record time.",
+    date: "2024-12-15",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "5 min read",
+    category: "Guides",
+    content: `
+# Getting Started with Your SaaS Journey
+
+Building a successful SaaS product starts with validation. Here's how to get started quickly and efficiently.
+
+## 1. Validate Your Idea
+
+Before writing a single line of code, talk to potential customers. Understanding their pain points is crucial.
+
+### Key Questions to Ask:
+- What problem are they currently facing?
+- How are they solving it today?
+- Would they pay for a better solution?
+
+## 2. Build Your MVP
+
+Focus on the core features that solve the main problem. Don't get caught up in building everything at once.
+
+**Essential MVP features:**
+- User authentication
+- Core functionality
+- Basic payment integration
+- Simple dashboard
+
+## 3. Get Your First Customers
+
+Launch early and iterate based on feedback. Your first 10 customers will teach you more than any market research.
+
+> "The best way to predict the future is to create it." - Peter Drucker
+
+## Next Steps
+
+Ready to build? Check out our comprehensive starter template that includes everything you need to launch your SaaS in days, not months.
+    `,
+  },
+  "optimizing-conversion-rates": {
+    title: "10 Proven Ways to Optimize Your SaaS Conversion Rates",
+    description: "Discover actionable strategies to convert more visitors into paying customers.",
+    date: "2024-12-10",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "8 min read",
+    category: "Marketing",
+    content: `
+# 10 Proven Ways to Optimize Your SaaS Conversion Rates
+
+Increasing your conversion rate can dramatically impact your revenue. Here are 10 proven strategies.
+
+## 1. Simplify Your Signup Flow
+
+Remove unnecessary fields. Every additional field reduces conversions by an average of 11%.
+
+## 2. Add Social Proof
+
+Display customer testimonials, logos, and case studies prominently on your landing page.
+
+## 3. Offer a Free Trial
+
+Let users experience your product before asking for payment. Free trials can increase conversions by up to 300%.
+
+## 4. Optimize Your Pricing Page
+
+Make your pricing transparent and easy to understand. Highlight the most popular plan.
+
+## 5. Use Clear CTAs
+
+Your call-to-action buttons should be specific. Instead of "Submit," use "Start Your Free Trial."
+
+## 6. Implement Exit-Intent Popups
+
+Catch users before they leave with a special offer or helpful resource.
+
+## 7. A/B Test Everything
+
+Test your headlines, CTAs, colors, and copy. Small changes can lead to big improvements.
+
+## 8. Reduce Page Load Time
+
+Every second of delay can cost you 7% in conversions. Optimize for speed.
+
+## 9. Mobile Optimization
+
+Over 50% of traffic is mobile. Ensure your site works perfectly on all devices.
+
+## 10. Follow Up Quickly
+
+Respond to inquiries within 5 minutes. The odds of qualifying a lead decrease by 400% after that.
+
+## Conclusion
+
+Implementing these strategies systematically can double or triple your conversion rates. Start with the quickest wins and iterate from there.
+    `,
+  },
+  "scaling-your-saas": {
+    title: "Scaling Your SaaS: Infrastructure Best Practices",
+    description: "Technical insights on scaling your application to handle thousands of users.",
+    date: "2024-12-05",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "10 min read",
+    category: "Engineering",
+    content: `
+# Scaling Your SaaS: Infrastructure Best Practices
+
+As your SaaS grows, you'll need to scale your infrastructure. Here's how to do it right.
+
+## Database Optimization
+
+### Connection Pooling
+Use connection pooling to manage database connections efficiently. Tools like PgBouncer can help.
+
+\`\`\`typescript
+// Example: Using connection pooling with Drizzle
+import { drizzle } from 'drizzle-orm/postgres-js';
+import postgres from 'postgres';
+
+const client = postgres(process.env.DATABASE_URL!, { max: 10 });
+const db = drizzle(client);
+\`\`\`
+
+## Caching Strategy
+
+Implement multi-layer caching:
+1. **Browser caching** for static assets
+2. **CDN caching** for global distribution
+3. **Redis caching** for frequently accessed data
+
+## Load Balancing
+
+Distribute traffic across multiple servers to handle increased load and provide redundancy.
+
+## Monitoring & Observability
+
+Track these key metrics:
+- Response times
+- Error rates
+- Database query performance
+- Memory usage
+- CPU utilization
+
+## Horizontal Scaling
+
+Design your application to scale horizontally by adding more servers rather than upgrading existing ones.
+
+### Stateless Design
+Ensure your application doesn't store session state on individual servers. Use Redis or a database for session management.
+
+## Conclusion
+
+Scaling is an ongoing process. Start with good fundamentals and iterate as you grow. Monitor your metrics and optimize bottlenecks as they appear.
+    `,
+  },
+};
+
+export async function generateStaticParams() {
+  return Object.keys(blogPosts).map((slug) => ({
+    slug,
+  }));
+}
+
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  const post = blogPosts[params.slug];
+
+  if (!post) {
+    return {
+      title: "Post Not Found",
+    };
+  }
+
+  return {
+    title: post.title,
+    description: post.description,
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      publishedTime: post.date,
+      authors: [post.author],
+    },
+  };
+}
+
+export default function BlogPost({ params }: { params: { slug: string } }) {
+  const post = blogPosts[params.slug];
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen bg-black">
+      {/* Back Link */}
+      <div className="border-b border-[#2a2a2a]">
+        <div className="container mx-auto px-4 py-6 sm:px-6 lg:px-8">
+          <Link
+            href="/blog"
+            className="inline-flex items-center text-sm text-gray-400 hover:text-[#ff5722] transition-colors"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Blog
+          </Link>
+        </div>
+      </div>
+
+      {/* Article Header */}
+      <article className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-3xl">
+          <header className="mb-12">
+            <div className="mb-4">
+              <span className="inline-flex items-center rounded-full bg-[#ff5722]/10 px-3 py-1 text-sm font-medium text-[#ff5722] border border-[#ff5722]/20">
+                {post.category}
+              </span>
+            </div>
+            <h1 className="mb-4 text-4xl font-bold tracking-tight text-white sm:text-5xl">
+              {post.title}
+            </h1>
+            <p className="text-xl text-gray-400">{post.description}</p>
+            <div className="mt-6 flex items-center gap-4 text-sm text-gray-500">
+              <div className="flex items-center gap-2">
+                <Calendar className="h-4 w-4" />
+                <time dateTime={post.date}>
+                  {new Date(post.date).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                </time>
+              </div>
+              <span>•</span>
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4" />
+                <span>{post.readTime}</span>
+              </div>
+            </div>
+          </header>
+
+          {/* Article Content */}
+          <div className="prose prose-invert prose-lg max-w-none">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                h1: ({ children }) => (
+                  <h1 className="text-3xl font-bold text-white mt-8 mb-4">{children}</h1>
+                ),
+                h2: ({ children }) => (
+                  <h2 className="text-2xl font-bold text-white mt-8 mb-4">{children}</h2>
+                ),
+                h3: ({ children }) => (
+                  <h3 className="text-xl font-bold text-white mt-6 mb-3">{children}</h3>
+                ),
+                p: ({ children }) => (
+                  <p className="text-gray-300 mb-4 leading-relaxed">{children}</p>
+                ),
+                ul: ({ children }) => (
+                  <ul className="list-disc list-inside text-gray-300 mb-4 space-y-2">{children}</ul>
+                ),
+                ol: ({ children }) => (
+                  <ol className="list-decimal list-inside text-gray-300 mb-4 space-y-2">{children}</ol>
+                ),
+                blockquote: ({ children }) => (
+                  <blockquote className="border-l-4 border-[#ff5722] pl-4 italic text-gray-400 my-6">
+                    {children}
+                  </blockquote>
+                ),
+                code: ({ children, className }) => {
+                  const isBlock = className?.includes('language-');
+                  if (isBlock) {
+                    return (
+                      <pre className="bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg p-4 overflow-x-auto my-6">
+                        <code className="text-sm text-gray-300">{children}</code>
+                      </pre>
+                    );
+                  }
+                  return (
+                    <code className="bg-[#1a1a1a] text-[#ff5722] px-1.5 py-0.5 rounded text-sm">
+                      {children}
+                    </code>
+                  );
+                },
+                strong: ({ children }) => (
+                  <strong className="font-bold text-white">{children}</strong>
+                ),
+              }}
+            >
+              {post.content}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}

package/features/seo/app/blog/page.tsx

@@ -0,0 +1,107 @@
+import Link from "next/link";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ArrowRight, Calendar } from "lucide-react";
+
+// Blog posts metadata
+// In a real app, this would come from a CMS or markdown files
+const blogPosts = [
+  {
+    slug: "getting-started-with-saas",
+    title: "Getting Started with Your SaaS Journey",
+    description: "Learn how to validate your SaaS idea and build your first MVP in record time.",
+    date: "2024-12-15",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "5 min read",
+    category: "Guides",
+  },
+  {
+    slug: "optimizing-conversion-rates",
+    title: "10 Proven Ways to Optimize Your SaaS Conversion Rates",
+    description: "Discover actionable strategies to convert more visitors into paying customers.",
+    date: "2024-12-10",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "8 min read",
+    category: "Marketing",
+  },
+  {
+    slug: "scaling-your-saas",
+    title: "Scaling Your SaaS: Infrastructure Best Practices",
+    description: "Technical insights on scaling your application to handle thousands of users.",
+    date: "2024-12-05",
+    author: "{{PROJECT_NAME}} Team",
+    readTime: "10 min read",
+    category: "Engineering",
+  },
+];
+
+export const metadata = {
+  title: "Blog",
+  description: "Insights, guides, and best practices for building successful SaaS products.",
+};
+
+export default function BlogPage() {
+  return (
+    <div className="min-h-screen bg-black">
+      {/* Header */}
+      <div className="border-b border-[#2a2a2a] bg-gradient-to-b from-[#0a0a0a] to-black">
+        <div className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
+          <div className="max-w-3xl">
+            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl md:text-6xl">
+              Blog
+            </h1>
+            <p className="mt-4 text-xl text-gray-400">
+              Insights, guides, and best practices for building successful SaaS products.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Blog Posts Grid */}
+      <div className="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
+        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+          {blogPosts.map((post) => (
+            <Link key={post.slug} href={`/blog/${post.slug}`}>
+              <Card className="h-full bg-[#0a0a0a] border-[#2a2a2a] hover:border-[#ff5722]/30 transition-all duration-300 group">
+                <CardHeader>
+                  <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
+                    <Calendar className="h-4 w-4" />
+                    <time dateTime={post.date}>
+                      {new Date(post.date).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                      })}
+                    </time>
+                    <span>•</span>
+                    <span>{post.readTime}</span>
+                  </div>
+                  <CardTitle className="text-white group-hover:text-[#ff5722] transition-colors">
+                    {post.title}
+                  </CardTitle>
+                  <CardDescription className="text-gray-400">
+                    {post.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center justify-between">
+                    <span className="inline-flex items-center rounded-full bg-[#ff5722]/10 px-3 py-1 text-xs font-medium text-[#ff5722] border border-[#ff5722]/20">
+                      {post.category}
+                    </span>
+                    <ArrowRight className="h-4 w-4 text-gray-500 group-hover:text-[#ff5722] group-hover:translate-x-1 transition-all" />
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+
+        {/* Coming Soon Message */}
+        <div className="mt-12 text-center">
+          <p className="text-gray-500">
+            More articles coming soon. Subscribe to our newsletter to stay updated!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/features/seo/app/robots.txt

@@ -0,0 +1,13 @@
+# Allow all crawlers
+User-agent: *
+Allow: /
+
+# Disallow specific paths
+Disallow: /api/
+Disallow: /dashboard/
+Disallow: /sign-in
+Disallow: /sign-up
+
+# Sitemap location
+Sitemap: {{APP_URL}}/sitemap.xml
+

package/features/seo/app/sitemap.ts

@@ -0,0 +1,70 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000'
+
+  // Blog posts - update this array with your actual blog posts
+  // In production, you might fetch this from a CMS or markdown files
+  const blogPosts = [
+    {
+      slug: 'getting-started-with-saas',
+      date: '2024-12-15',
+    },
+    {
+      slug: 'optimizing-conversion-rates',
+      date: '2024-12-10',
+    },
+    {
+      slug: 'scaling-your-saas',
+      date: '2024-12-05',
+    },
+  ]
+
+  const blogRoutes = blogPosts.map((post) => ({
+    url: `${baseUrl}/blog/${post.slug}`,
+    lastModified: new Date(post.date),
+    changeFrequency: 'monthly' as const,
+    priority: 0.7,
+  }))
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/blog`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.9,
+    },
+    ...blogRoutes,
+    {
+      url: `${baseUrl}/pricing`,
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/docs`,
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/terms-of-service`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 0.3,
+    },
+    {
+      url: `${baseUrl}/privacy-policy`,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 0.3,
+    },
+  ]
+}
+

package/features/seo/feature.config.json

@@ -0,0 +1,19 @@
+{
+  "name": "seo",
+  "version": "1.0.0",
+  "description": "Complete SEO module with sitemap, robots.txt, blog structure, and structured data",
+  "dependencies": {},
+  "devDependencies": {},
+  "envVars": [
+    "NEXT_PUBLIC_APP_URL"
+  ],
+  "files": [
+    "app/sitemap.ts",
+    "app/robots.txt",
+    "app/blog/**/*",
+    "lib/seo-utils.ts"
+  ],
+  "requires": [],
+  "conflicts": []
+}
+

package/features/seo/lib/seo-utils.ts

@@ -0,0 +1,163 @@
+/**
+ * SEO Utilities
+ * Helper functions for structured data, meta tags, and SEO optimization
+ */
+
+export interface StructuredData {
+  "@context": string;
+  "@type": string;
+  [key: string]: any;
+}
+
+/**
+ * Generate JSON-LD structured data for a WebApplication
+ */
+export function generateWebAppStructuredData(
+  name: string,
+  description: string,
+  url: string
+): StructuredData {
+  return {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name,
+    description,
+    url,
+    applicationCategory: "BusinessApplication",
+    offers: {
+      "@type": "Offer",
+      category: "SaaS",
+    },
+    creator: {
+      "@type": "Organization",
+      name,
+      url,
+    },
+  };
+}
+
+/**
+ * Generate JSON-LD structured data for a BlogPosting
+ */
+export function generateBlogPostStructuredData(
+  title: string,
+  description: string,
+  url: string,
+  datePublished: string,
+  dateModified?: string,
+  author?: string,
+  image?: string
+): StructuredData {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: title,
+    description,
+    url,
+    datePublished,
+    dateModified: dateModified || datePublished,
+    author: author
+      ? {
+          "@type": "Person",
+          name: author,
+        }
+      : undefined,
+    image: image
+      ? {
+          "@type": "ImageObject",
+          url: image,
+        }
+      : undefined,
+  };
+}
+
+/**
+ * Generate JSON-LD structured data for an Organization
+ */
+export function generateOrganizationStructuredData(
+  name: string,
+  url: string,
+  logo?: string,
+  socialProfiles?: {
+    twitter?: string;
+    github?: string;
+    linkedin?: string;
+  }
+): StructuredData {
+  const data: StructuredData = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name,
+    url,
+  };
+
+  if (logo) {
+    data.logo = {
+      "@type": "ImageObject",
+      url: logo,
+    };
+  }
+
+  if (socialProfiles) {
+    data.sameAs = [];
+    if (socialProfiles.twitter) {
+      data.sameAs.push(socialProfiles.twitter);
+    }
+    if (socialProfiles.github) {
+      data.sameAs.push(socialProfiles.github);
+    }
+    if (socialProfiles.linkedin) {
+      data.sameAs.push(socialProfiles.linkedin);
+    }
+  }
+
+  return data;
+}
+
+/**
+ * Generate OpenGraph metadata object
+ */
+export function generateOpenGraphMetadata(
+  title: string,
+  description: string,
+  url: string,
+  image?: string,
+  type: "website" | "article" = "website"
+) {
+  return {
+    title,
+    description,
+    url,
+    siteName: title,
+    images: image
+      ? [
+          {
+            url: image,
+            width: 1200,
+            height: 630,
+            alt: title,
+          },
+        ]
+      : [],
+    type,
+  };
+}
+
+/**
+ * Generate Twitter Card metadata
+ */
+export function generateTwitterCardMetadata(
+  title: string,
+  description: string,
+  image?: string,
+  creator?: string
+) {
+  return {
+    card: "summary_large_image" as const,
+    title,
+    description,
+    images: image ? [image] : [],
+    creator: creator ? `@${creator}` : undefined,
+  };
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shipd",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Generate production-ready SaaS applications with authentication, billing, and more",
   "type": "module",
   "bin": {
@@ -11,6 +11,8 @@
     "dist",
     "template",
     "docs-template",
+    "features",
+    "base-package",
     "README.md",
     "LICENSE"
   ],