openship 0.1.0 → 0.1.1

package/apps/web/next.config.mjs

@@ -1,6 +1,20 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import { createMDX } from "fumadocs-mdx/next";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const withMDX = createMDX({ configPath: "./source.config.ts" });
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ["openship-ui", "openship-core"],
+  output: "standalone",
+  transpilePackages: ["@repo/ui", "@repo/core"],
+  turbopack: {
+    root: path.resolve(__dirname, "../.."),
+    resolveAlias: {
+      "@/.source/*": "./.source/*",
+    },
+  },
 };
 
-export default nextConfig;
+export default withMDX(nextConfig);

package/apps/web/package.json

@@ -1,26 +1,33 @@
 {
-  "name": "openship-web",
+  "name": "@repo/web",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port 3000",
+    "dev": "next dev --port 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "clean": "rm -rf .next .turbo node_modules"
   },
   "dependencies": {
-    "openship-ui": "workspace:*",
-    "openship-core": "workspace:*",
-    "next": "^14.2.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "@repo/core": "workspace:*",
+    "@repo/ui": "workspace:*",
+    "fumadocs-core": "^16.6.10",
+    "fumadocs-mdx": "^14.2.9",
+    "fumadocs-ui": "^16.6.10",
+    "gsap": "^3.12.7",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "openship-tsconfig": "workspace:*",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "typescript": "^5.4.0"
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^22.13.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3"
   }
 }

package/apps/web/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/apps/web/public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

package/apps/web/source.config.ts

@@ -0,0 +1,17 @@
+import { defineDocs, defineConfig, frontmatterSchema } from "fumadocs-mdx/config";
+import { z } from "zod";
+
+export const docs = defineDocs({ dir: "content/docs" });
+
+export const blog = defineDocs({
+  dir: "content/blog",
+  docs: {
+    schema: frontmatterSchema.extend({
+      date: z.string().optional(),
+      category: z.string().optional(),
+      author: z.string().optional(),
+    }),
+  },
+});
+
+export default defineConfig();

package/apps/web/src/app/(marketing)/layout.tsx

@@ -1,24 +1,9 @@
+/**
+ * Marketing layout — wraps docs, pricing, and other marketing sub-routes.
+ * The landing page (/) has its own Navbar/Footer built-in, so this layout
+ * provides a shared wrapper for secondary marketing pages only.
+ */
+
 export default function MarketingLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-screen">
-      {/* Marketing nav / header goes here */}
-      <header className="border-b px-6 py-4">
-        <nav className="mx-auto flex max-w-7xl items-center justify-between">
-          <span className="text-xl font-bold">Openship</span>
-          <div className="flex items-center gap-6">
-            <a href="/pricing" className="text-sm hover:underline">
-              Pricing
-            </a>
-            <a href="/docs" className="text-sm hover:underline">
-              Docs
-            </a>
-            <a href="/login" className="text-sm font-medium hover:underline">
-              Login
-            </a>
-          </div>
-        </nav>
-      </header>
-      {children}
-    </div>
-  );
+  return <>{children}</>;
 }

package/apps/web/src/app/blog/[...slug]/page.tsx

@@ -0,0 +1,247 @@
+import { blogSource } from "@/lib/source";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import type { Metadata } from "next";
+import BlogShareSidebar from "@/components/blog/share-sidebar";
+import BlogWriterSidebar from "@/components/blog/writer-sidebar";
+
+const SITE_URL = "https://openship.org";
+
+type Params = Promise<{ slug: string[] }>;
+
+function calculateReadingTime(content: string): number {
+  return Math.max(1, Math.ceil(content.split(/\s+/).length / 200));
+}
+
+function formatDate(raw: string): string {
+  try {
+    return new Date(raw).toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return raw;
+  }
+}
+
+function formatDateShort(raw: string): string {
+  try {
+    return new Date(raw).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  } catch {
+    return raw;
+  }
+}
+
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const { slug } = await params;
+  const page = blogSource.getPage(slug);
+  if (!page) return {};
+
+  const title = `${page.data.title} – Openship Blog`;
+  const description = page.data.description ?? "A blog post from the Openship team.";
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url: `${SITE_URL}${page.url}`,
+      siteName: "Openship",
+      type: "article",
+      publishedTime: page.data.date,
+      authors: [page.data.author || "Openship Team"],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+    },
+    alternates: {
+      canonical: `${SITE_URL}${page.url}`,
+    },
+  };
+}
+
+export default async function BlogPostPage({ params }: { params: Params }) {
+  const { slug } = await params;
+  const page = blogSource.getPage(slug);
+  if (!page) notFound();
+
+  const MDXContent = page.data.body;
+  const readingTime = calculateReadingTime(
+    (page.data as any)._exports?.raw || page.data.title || ""
+  );
+
+  /* Related posts (same category, excluding current) */
+  const allPages = blogSource.getPages();
+  const related = allPages
+    .filter(
+      (p) =>
+        p.url !== page.url &&
+        p.data.category?.toLowerCase() === page.data.category?.toLowerCase()
+    )
+    .sort((a, b) => (b.data.date ?? "").localeCompare(a.data.date ?? ""))
+    .slice(0, 3);
+
+  /* Structured data */
+  const articleStructuredData = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: page.data.title,
+    description: page.data.description,
+    datePublished: page.data.date,
+    author: {
+      "@type": "Person",
+      name: page.data.author || "Openship Team",
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "Openship",
+    },
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": `${SITE_URL}${page.url}`,
+    },
+    articleSection: page.data.category,
+    url: `${SITE_URL}${page.url}`,
+  };
+
+  const breadcrumbStructuredData = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      { "@type": "ListItem", position: 1, name: "Home", item: SITE_URL },
+      { "@type": "ListItem", position: 2, name: "Blog", item: `${SITE_URL}/blog` },
+      {
+        "@type": "ListItem",
+        position: 3,
+        name: page.data.title,
+        item: `${SITE_URL}${page.url}`,
+      },
+    ],
+  };
+
+  return (
+    <div className="blog-post">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleStructuredData) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbStructuredData) }}
+      />
+
+      <div className="blog-post-inner">
+        <div className="bp-body-wrap">
+          {/* ── LEFT: Share actions ── */}
+          <div className="bp-left-col">
+            <BlogShareSidebar />
+          </div>
+
+          {/* ── CENTER: Article ── */}
+          <div className="bp-center-col">
+            <div className="bp-header">
+              <Link href="/blog" className="bp-back">
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                All posts
+              </Link>
+
+              <header>
+                {page.data.category && (
+                  <span className="bp-category">{page.data.category}</span>
+                )}
+                <h1 className="bp-title">{page.data.title}</h1>
+                {page.data.description && (
+                  <p className="bp-desc">{page.data.description}</p>
+                )}
+                <div className="bp-meta">
+                  <div className="bp-meta-avatar">
+                    {(page.data.author || "O")[0].toUpperCase()}
+                  </div>
+                  <div className="bp-meta-text">
+                    <span className="bp-author-name">
+                      {page.data.author || "Openship Team"}
+                    </span>
+                    <span className="bp-meta-row">
+                      {page.data.date && (
+                        <time dateTime={page.data.date}>
+                          {formatDate(page.data.date)}
+                        </time>
+                      )}
+                      <span className="bp-dot" />
+                      <span>{readingTime} min read</span>
+                    </span>
+                  </div>
+                </div>
+              </header>
+            </div>
+
+            {/* Article body */}
+            <div className="bp-body">
+              <MDXContent />
+            </div>
+          </div>
+
+          {/* ── RIGHT: Writer info ── */}
+          <div className="bp-right-col">
+            <BlogWriterSidebar authorName={page.data.author} />
+          </div>
+        </div>
+
+        {/* Related articles */}
+        {related.length > 0 && (
+          <section className="bp-related">
+            <span className="bp-related-label">Related articles</span>
+            <div className="bp-related-grid">
+              {related.map((post) => (
+                <Link key={post.url} href={post.url} className="bp-related-card">
+                  <span className="bp-related-cat">
+                    {post.data.category || "Post"}
+                  </span>
+                  <h4 className="bp-related-title">{post.data.title}</h4>
+                  {post.data.description && (
+                    <p className="bp-related-desc">{post.data.description}</p>
+                  )}
+                  <div className="bp-related-foot">
+                    <div className="bp-related-foot-avatar">
+                      {(post.data.author || "O")[0].toUpperCase()}
+                    </div>
+                    <span className="bp-related-author">
+                      {post.data.author || "Openship Team"}
+                    </span>
+                    {post.data.date && (
+                      <>
+                        <span className="bp-related-dot" />
+                        <time className="bp-related-date">
+                          {formatDateShort(post.data.date)}
+                        </time>
+                      </>
+                    )}
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function generateStaticParams() {
+  return blogSource.generateParams();
+}