Merge remote-tracking branch 'upstream/main' into next-windows

apps/embed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "embed",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3003",

apps/tasks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tasks",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "main": "src/index.ts",
   "scripts": {

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

@@ -0,0 +1,97 @@
+import { notFound } from "next/navigation";
+import Image from "next/image";
+import { format, parseISO } from "date-fns";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { getBlogPosts } from "@/utils/blog";
+import type { Metadata } from "next";
+import { Share } from "../_components/Share";
+import { ReadyToGetStarted } from "@/components/ReadyToGetStarted";
+import { calculateReadingTime } from "@/utils/readTime";
+
+interface PostProps {
+  params: {
+    slug: string;
+  };
+}
+
+export async function generateMetadata({
+  params,
+}: PostProps): Promise<Metadata | undefined> {
+  let post = getBlogPosts().find((post) => post.slug === params.slug);
+  if (!post) {
+    return;
+  }
+
+  let { title, publishedAt: publishedTime, description, image } = post.metadata;
+  let ogImage = `${process.env.NEXT_PUBLIC_URL}${image}`;
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: "article",
+      publishedTime,
+      url: `${process.env.NEXT_PUBLIC_URL}/blog/${post.slug}`,
+      images: [
+        {
+          url: ogImage,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [ogImage],
+    },
+  };
+}
+
+export default async function PostPage({ params }: PostProps) {
+  const post = getBlogPosts().find((post) => post.slug === params.slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  const readingTime = calculateReadingTime(post.content);
+
+  return (
+    <>
+      <article className="py-8 prose mx-auto ">
+        {post.metadata.image && (
+          <div className="relative mb-12 h-[345px] w-full">
+            <Image
+              className="m-0 w-full rounded-lg object-contain sm:object-cover"
+              src={post.metadata.image}
+              alt={post.metadata.title}
+              fill
+              priority
+            />
+          </div>
+        )}
+
+        <div className="wrapper">
+          <header>
+            <h1 className="mb-2">{post.metadata.title}</h1>
+            <p className="space-x-1 text-xs text-gray-500">
+              <span>
+                {format(parseISO(post.metadata.publishedAt), "MMMM dd, yyyy")}
+              </span>
+              <span>—</span>
+              <span>{readingTime} min read</span>
+            </p>
+          </header>
+          <hr className="my-6" />
+          <MDXRemote source={post.content} />
+          <Share post={post} />
+        </div>
+      </article>
+      <div className="wrapper mb-4">
+        <ReadyToGetStarted />
+      </div>
+    </>
+  );
+}

apps/web/app/blog/_components/Share.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import toast from "react-hot-toast";
+import { useState } from "react";
+
+interface ShareProps {
+  post: {
+    slug: string;
+    metadata: {
+      title: string;
+    };
+  };
+}
+
+export function Share({ post }: ShareProps) {
+  const shareUrl = `${process.env.NEXT_PUBLIC_URL}/blog/${post.slug}`;
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <>
+      <div className="mt-6 py-6 px-3 bg-gray-100 text-center rounded-xl">
+        <h3 className="mb-2 mt-0 text-lg font-semibold">Share this post</h3>
+        <div className="flex justify-center gap-4">
+          <a
+            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+              post.metadata.title
+            )}&url=${encodeURIComponent(shareUrl)}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-lg text-gray-600 hover:text-blue-500 hover:underline"
+          >
+            Twitter
+          </a>
+          <a
+            href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
+              shareUrl
+            )}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-lg text-gray-600 hover:text-blue-700 hover:underline"
+          >
+            LinkedIn
+          </a>
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(shareUrl);
+              toast.success("Link copied to clipboard");
+              setCopied(true);
+              setTimeout(() => setCopied(false), 2000);
+            }}
+            className="text-lg text-gray-600 hover:text-gray-900 underline"
+          >
+            {copied ? "Link copied" : "Copy Link"}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

apps/web/app/updates/_components/UpdatePage.tsx → apps/web/app/blog/_components/UpdatePage.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { format, parseISO } from "date-fns";
 import { MDXRemote } from "next-mdx-remote/rsc";
-import { getBlogPosts } from "@/utils/updates";
+import { getBlogPosts } from "@/utils/blog";
 
 export const UpdatePage = ({ postSlug }: { postSlug: string }) => {
   const post = getBlogPosts().find((post) => post.slug === postSlug);

apps/web/app/updates/page.tsx → apps/web/app/blog/page.tsx

@@ -2,7 +2,7 @@ import { UpdatesPage } from "@/components/pages/UpdatesPage";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Updates — Cap",
+  title: "Blog — Cap",
 };
 
 export default function App() {

apps/web/app/docs/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 import Image from "next/image";
 import { MDXRemote } from "next-mdx-remote/rsc";
-import { getDocs } from "@/utils/updates";
+import { getDocs } from "@/utils/blog";
 import type { Metadata } from "next";
 
 interface DocProps {

apps/web/app/docs/_components/DocPage.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { MDXRemote } from "next-mdx-remote/rsc";
-import { getDocs } from "@/utils/updates";
+import { getDocs } from "@/utils/blog";
 
 export const DocPage = ({ docSlug }: { docSlug: string }) => {
   const doc = getDocs().find((doc) => doc.slug === docSlug);

apps/web/app/globals.css

@@ -398,6 +398,10 @@ footer a {
   @apply text-2xl font-semibold mt-6;
 }
 
-.prose p {
-  @apply text-lg text-gray-400;
+.prose p, .prose li, .prose a {
+  @apply tracking-tight font-normal text-[1.125rem] leading-[1.75rem] !important;
 }
+
+.prose p, .prose li {
+  @apply text-gray-500/80 !important;
+}

apps/web/app/robots.ts

@@ -13,7 +13,7 @@ export default function robots(): MetadataRoute.Robots {
         userAgent: '*',
         allow: [
           '/',
-          '/updates/',
+          '/blog/',
           // Dynamically add all SEO pages
           ...seoPageSlugs.map(slug => `/${slug}`),
         ],

apps/web/app/sitemap.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from "fs";
 import path from "path";
-import { getBlogPosts } from "@/utils/updates";
+import { getBlogPosts } from "@/utils/blog";
 import { seoPages } from "../lib/seo-pages";
 
 async function getPagePaths(
@@ -15,7 +15,7 @@ async function getPagePaths(
       entry.isDirectory() &&
       entry.name !== "dashboard" &&
       !entry.name.startsWith("s") &&
-      entry.name !== "updates" &&
+      entry.name !== "blog" &&
       !entry.name.startsWith("[")
     ) {
       const subPaths = await getPagePaths(fullPath);
@@ -53,7 +53,7 @@ export default async function sitemap() {
     const publishDate = new Date(post.metadata.publishedAt);
     publishDate.setHours(9, 0, 0, 0); // Set time to 9:00 AM
     return {
-      path: `/updates/${post.slug}`,
+      path: `/blog/${post.slug}`,
       lastModified: publishDate.toISOString(),
     };
   });

apps/web/components/Footer.tsx

@@ -49,7 +49,7 @@ export const Footer = () => {
             <h3 className="text-lg font-semibold">Product</h3>
             <ul className="space-y-2">
               <li>
-                <a href="/updates">Updates</a>
+                <a href="/blog">Blog</a>
               </li>
               <li>
                 <a href="/docs">Docs</a>

apps/web/components/Navbar.tsx

@@ -114,7 +114,7 @@ export const Navbar = ({ auth }: { auth: boolean }) => {
                   </Link>
                 </NavigationMenuItem>
                 <NavigationMenuItem>
-                  <Link href="/updates" legacyBehavior passHref>
+                  <Link href="/blog" legacyBehavior passHref>
                     <NavigationMenuLink
                       className={classNames(
                         navigationMenuTriggerStyle(),
@@ -123,7 +123,7 @@ export const Navbar = ({ auth }: { auth: boolean }) => {
                           : ""
                       )}
                     >
-                      Updates
+                      Blog
                     </NavigationMenuLink>
                   </Link>
                 </NavigationMenuItem>