Added blogs Blogs

.github/workflows/deploy.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.0.12 ./
-          docker push devarifhossain/retroui:1.0.12
+          docker build -t devarifhossain/retroui:1.0.13 ./
+          docker push devarifhossain/retroui:1.0.13
 
       # - name: Set up SSH
       #   uses: webfactory/ssh-agent@v0.9.0

app/(marketing)/blogs/[slug]/page.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { allBlogs } from "contentlayer/generated";
+import { notFound } from "next/navigation";
+import { format } from "date-fns";
+import MDX from "@/components/MDX";
+import { Avatar, Badge, Button, Text } from "@/packages/ui";
+import { Metadata } from "next";
+import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+interface IProps {
+  params: { slug: string[] };
+}
+
+function getBlogParams({ params }: IProps) {
+  const url = `/blogs/${params.slug}`;
+  const blog = allBlogs.find((blog) => blog.url === url);
+
+  if (!blog) {
+    return null;
+  }
+
+  return blog;
+}
+
+export async function generateMetadata({ params }: IProps): Promise<Metadata> {
+  const blog = getBlogParams({ params });
+
+  if (!blog) {
+    return {
+      title: "Not Found | Retro UI",
+    };
+  }
+
+  return {
+    title: `${blog.title} | RetroUI Blogs`,
+    description: blog.description,
+    openGraph: {
+      images: blog.coverImage,
+      title: `${blog.title} | RetroUI Blogs`,
+    },
+  };
+}
+
+export default function page({ params }: IProps) {
+  const blog = getBlogParams({ params });
+
+  if (!blog) {
+    return notFound();
+  }
+
+  if (!blog.publishedAt || blog.status !== "published") {
+    return notFound();
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="border-b border-black pb-6 mb-6">
+        <Text className="text-muted text-sm">
+          {format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
+        </Text>
+        <Text as="h2" className="mb-2">
+          {blog.title}
+        </Text>
+        <p className="text-lg text-muted  mb-8">{blog.description}</p>
+        <Image
+          src={blog.coverImage}
+          alt={blog.title}
+          width={1200}
+          height={800}
+          className="mb-8"
+        />
+        <div className="flex justify-between items-start">
+          <div className="flex gap-4">
+            <Avatar>
+              <Avatar.Image src={blog.author.avatar} alt={blog.author.name} />
+              <Avatar.Fallback>{blog.author.name}</Avatar.Fallback>
+            </Avatar>
+            <div>
+              <Text as="h5">{blog.author.name}</Text>
+              <Link
+                href={`https://x.com/@${blog.author.x}`}
+                target="_blank"
+                className="text-muted"
+              >
+                @{blog.author.x}
+              </Link>
+            </div>
+          </div>
+
+          <Link
+            target="_blank"
+            href={`https://x.com/share?url=${
+              "https://retroui.dev" + blog.url
+            }&text=${blog.title}.%0ACheck it out 👉`}
+          >
+            <Button size="sm" variant="outline">
+              Share on X
+            </Button>
+          </Link>
+        </div>
+      </div>
+      <MDX code={blog.body.code} type="blog" />
+    </div>
+  );
+}

app/(marketing)/blogs/layout.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "RetroUI Blogs",
+};
+
+export default function BlogsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <div className="max-w-6xl mx-auto pt-12">{children}</div>;
+}

app/(marketing)/blogs/page.tsx

@@ -0,0 +1,38 @@
+import { allBlogs } from "@/.contentlayer/generated";
+import { Card, Text } from "@/packages/ui";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+function page() {
+  const blogs = allBlogs.filter((blog) => blog.status === "published");
+
+  return (
+    <div>
+      <Text as="h2" className="mb-12 text-center ">
+        All RetroUI Blogs
+      </Text>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
+        {blogs.map((blog) => (
+          <Link href={`${blog.url}`} key={blog._id}>
+            <Card>
+              <Card.Header>
+                <Image
+                  src={blog.coverImage}
+                  alt={blog.title}
+                  width={600}
+                  height={400}
+                  className="mb-6"
+                />
+                <Card.Title>{blog.title}</Card.Title>
+                <Card.Description>{blog.description}</Card.Description>
+              </Card.Header>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default page;

app/(marketing)/page.tsx

@@ -63,7 +63,7 @@ export default async function Home() {
             <Link
               id="checkout-figma-kit"
               data-umami-event="checkout-figma-kit"
-              href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
+              href="https://dub.sh/retroui-figma"
               target="_blank"
               className="mb-6 inline-block"
             >
@@ -311,7 +311,7 @@ export default async function Home() {
           <Link
             id="checkout-figma-kit"
             data-umami-event="checkout-figma-kit"
-            href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
+            href="https://dub.sh/retroui-figma"
             target="_blank"
           >
             <Button>Checkout Now</Button>

app/layout.tsx

@@ -25,9 +25,13 @@ const shareTechMono = Share_Tech_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Retro Styled Tailwind UI Library | Retro UI",
+  title: "Retro Styled React UI Library | Retro UI",
   description:
-    "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
+    "RetroUI - Retro styled component library built with React and TailwindCSS for modern web apps.",
+  openGraph: {
+    images: "/banner.png",
+    title: "Retro Styled React UI Library | Retro UI",
+  },
 };
 
 export default function RootLayout({
@@ -47,7 +51,7 @@ export default function RootLayout({
       <body
         className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
       >
-        <div className="relative z-40 mb-16">
+        <div className="relative z-40 pb-16">
           <TopNav />
         </div>
         {children}

components/MDX.tsx

@@ -2,19 +2,23 @@
 
 import { Text } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
-import React, { HTMLAttributes } from "react";
+import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
 import { cn } from "@/lib/utils";
 import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
+import Link from "next/link";
 
-const components = {
+const components = (type: "doc" | "blog") => ({
   h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Text as="h1" {...props} />
   ),
-  h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <Text as="h2" className="border-b lg:text-3xl pb-1 mb-6" {...props} />
-  ),
+  h2: (props: HTMLAttributes<HTMLHeadingElement>) =>
+    type === "blog" ? (
+      <Text as="h2" className="mb-4" {...props} />
+    ) : (
+      <Text as="h2" className="border-b pb-1 mb-6" {...props} />
+    ),
   h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
     <Text as="h3" className="mb-4" {...props} />
   ),
@@ -23,6 +27,50 @@ const components = {
   ),
   h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h5" {...props} />,
   h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h6" {...props} />,
+  p: (props: HTMLAttributes<HTMLHeadElement>) =>
+    type === "blog" ? (
+      <Text {...props} className="text-lg text-zinc-600" />
+    ) : (
+      <Text {...props} />
+    ),
+  li: (props: HTMLAttributes<HTMLHeadElement>) =>
+    type === "blog" ? (
+      <Text
+        as="li"
+        {...props}
+        className="text-lg text-zinc-600 ml-4 lg:ml-8 mb-2"
+      />
+    ) : (
+      <Text as="li" {...props} />
+    ),
+  img: (props: HTMLAttributes<HTMLImageElement>) => (
+    <img className="mx-auto w-full max-w-[600px] my-8" {...props} />
+  ),
+  a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    const { href, target, rel, ...rest } = props;
+
+    if (!href) {
+      return <a {...rest} />;
+    }
+
+    const isExternal = href.startsWith("http");
+
+    return isExternal ? (
+      <a
+        href={href}
+        target={target || "_blank"}
+        rel={rel || "noopener noreferrer"}
+        className="underline underline-offset-4 hover:decoration-primary-500"
+        {...rest}
+      />
+    ) : (
+      <Link
+        href={href}
+        className="underline underline-offset-4 hover:decoration-primary-500"
+        {...rest}
+      />
+    );
+  },
   pre: CodeBlock,
   code: ({
     className,
@@ -41,10 +89,16 @@ const components = {
   ),
   ComponentShowcase,
   ComponentSource,
-};
+});
 
-export default function MDX({ code }: { code: string }) {
+export default function MDX({
+  code,
+  type = "doc",
+}: {
+  code: string;
+  type?: "doc" | "blog";
+}) {
   const Content = useMDXComponent(code);
 
-  return <Content components={components} />;
+  return <Content components={components(type)} />;
 }

components/TopNav.tsx

@@ -29,12 +29,12 @@ export default function TopNav() {
           </div>
 
           {/* Navigation Links */}
-          <div className="hidden md:flex space-x-8">
+          <div className="hidden md:flex space-x-6">
             {navConfig.topNavItems.map((item) => (
               <Link
                 key={item.title}
                 href={item.href}
-                className="hover:text-primary-500 transition-all"
+                className="hover:underline decoration-primary-500 underline-offset-2 transition-all"
               >
                 {item.title}
               </Link>
@@ -47,13 +47,13 @@ export default function TopNav() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <HeartIcon />
+              <GithubIcon />
             </Link>
             <HamburgerMenu />
           </div>
 
           <div className="hidden lg:flex items-center">
-            {/* <Link
+            <Link
               href="https://github.com/Logging-Stuff/retroui"
               target="_blank"
               rel="noopener noreferrer"
@@ -62,16 +62,6 @@ export default function TopNav() {
                 <GithubIcon size="16" className="mr-2" />
                 Star on GitHub
               </Button>
-            </Link> */}
-            <Link
-              href="https://opencollective.com/retroui"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Button className="flex items-center" size="sm" variant="outline">
-                <HeartIcon size="16" className="mr-2" />
-                Support Us
-              </Button>
             </Link>
           </div>
         </div>

config/navigation.ts

@@ -7,6 +7,7 @@ export const navConfig: INavigationConfig = {
   topNavItems: [
     { title: "Documentation", href: "/docs" },
     { title: "Components", href: `${componentsRoute}/button` },
+    { title: "Blogs", href: "/blogs" },
   ],
   sideNavItems: [
     {