resolved merge conflicts

Author: Khalidnoori568

.github/copilot-instructions.md

@@ -0,0 +1,36 @@
+# Copilot PR Instructions for New Component Creation
+
+When submitting a PR for a **new component**, please follow these rules:
+
+## 1. Tab in `apps/web/app/page.tsx`
+- Add a new tab for your component in `apps/web/app/page.tsx`.
+- The tab should allow users to navigate to your new editor.
+
+## 2. Editor in `apps/web/components`
+- Implement the main editor logic and UI in a new file under `apps/web/components`.
+- Name the file appropriately (e.g., `my-component-editor.tsx`).
+
+### Important:
+- Do **not** use other brand names in your editor component.
+- All states, props, and logic should be relevant to postmaker.dev (see `x-editor.tsx` for example).
+
+## 3. Preview in `packages/ui/src`
+- Add a preview component for your new editor in `packages/ui/src`.
+- Name the file appropriately (e.g., `my-component-preview.tsx`).
+
+## Example Structure
+```
+apps/web/app/page.tsx         # Add a new tab for your component
+apps/web/components/          # Add your editor here
+packages/ui/src/              # Add your preview here
+```
+
+## Checklist for PR Review
+- [ ] Tab added in `apps/web/app/page.tsx`
+- [ ] Editor created in `apps/web/components`
+- [ ] Preview created in `packages/ui/src`
+
+- [ ] No other brand names used in editor component; states are relevant to postmaker.dev
+
+---
+**PRs that do not follow this structure may be rejected or require changes.**

.github/workflows/review.yml

@@ -0,0 +1,21 @@
+name: PR Review Bot
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: pnpm install
+      - run: pnpm run lint
+      - uses: reviewdog/action-eslint@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          reporter: github-pr-review

.github/workflows/test-on-comment.yml

@@ -0,0 +1,20 @@
+name: PR Test on Comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  test:
+    if: github.event.issue.pull_request != '' && contains(github.event.comment.body, 'test again')
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - run: pnpm install
+      - run: pnpm test

apps/web/app/layout.tsx

@@ -32,9 +32,54 @@ const keyworsSeo = [
 ];
 
 export const metadata: Metadata = {
-  title: "Postmaker.dev",
-  description: "iClasser PosterMaker",
-  keywords: keyworsSeo,
+  title: "Postmaker.dev - Create Stunning Posters Online",
+  description:
+    "Postmaker.dev is an interactive poster maker app that allows you to design your own posters easily with our web-based tool.",
+  generator: "Turborepo",
+  icons: [
+    { url: "/favicon.ico", sizes: "any", rel: "icon" },
+    { url: "/favicon-32x32.png", type: "image/png", sizes: "32x32" },
+    { url: "/favicon-16x16.png", type: "image/png", sizes: "16x16" },
+  ],
+  manifest: "/site.webmanifest",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#0b0b0b" },
+  ],
+  keywords: [
+    "Postmaker.dev",
+    "interactive",
+    "posters",
+    "poster maker",
+    "web-based tool",
+    "design posters",
+    "create posters online",
+  ],
+  authors: [{ name: "Postmaker.dev" }],
+  openGraph: {
+    title: "Postmaker.dev - Create Stunning Posters Online",
+    description:
+      "Postmaker.dev is an interactive poster maker app that allows you to design your own posters easily with our web-based tool.",
+    url: "https://postmaker.dev",
+    siteName: "Postmaker.dev",
+    locale: "en_US",
+    type: "website",
+    images: [
+      {
+        url: "https://postmaker.dev/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "Postmaker.dev - Create Stunning Posters Online",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Postmaker.dev - Create Stunning Posters Online",
+    images: "https://postmaker.dev/og-image.png",
+    description:
+      "Postmaker.dev is an interactive poster maker app that allows you to design your own posters easily with our web-based tool.",
+  },
 };
 
 export default function RootLayout({

apps/web/app/page.tsx

@@ -1,3 +1,4 @@
+
 "use client";
 import { MainHomeLayout } from "@repo/web-ui/layout";
 import React, { useCallback, Suspense } from "react";
@@ -74,4 +75,17 @@ export default function Home() {
       <HomeContent />
     </Suspense>
   );
-}
+}
+
+import { Suspense } from "react";
+import "./page.module.css";
+import TabContents from "./tabs";
+
+export default function Home() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <TabContents />
+    </Suspense>
+  );
+}
+

apps/web/app/robots.ts

@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next"
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: "*",
+        allow: "/",
+        disallow: ["/private/", "/admin/"],
+      },
+    ],
+    sitemap: "https://postamaker.dev/sitemap.xml",
+    host: "https://postamaker.dev",
+  }
+}

apps/web/app/sitemap.ts

@@ -0,0 +1,32 @@
+import type { MetadataRoute } from "next"
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = "https://postmaker.dev"
+
+  return [
+    {
+      url: baseUrl,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 1,
+    },
+    {
+      url: `${baseUrl}/?t=chatgpt`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
+    {
+      url: `${baseUrl}/?t=gradient`,
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 0.7,
+    },
+    {
+      url: `${baseUrl}/?t=x`,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.9,
+    }
+  ]
+}

apps/web/app/tabs.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { MainHomeLayout } from "@repo/web-ui/layout";
+import React, { useCallback, Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import "./page.module.css";
+import QuizMarkdownEditor from "../components/markdown-editor";
+import ChatgptEditor from "../components/chatgpt-editor";
+import XEditor from "../components/x-editor";
+
+import GradientEditor from "../components/gradient-editor";
+import { CardSizeProvider } from "@repo/ui/context/CardSizeContext";
+
+const tabs = [
+  {
+    key: "markdown",
+    label: "Markdown Card",
+  },
+  {
+    key: "chatgpt",
+    label: "ChatGPT Card",
+  },
+  {
+    key: "gradient",
+    label: "Gradient Card",
+  },
+  {
+    key: "x",
+    label: "X Card",
+  },
+
+];
+
+export default function TabContents() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  
+  const currentTab = searchParams.get("t") || "markdown";
+  
+  const setTab = useCallback((newTab: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("t", newTab);
+    router.push(`?${params.toString()}`);
+  }, [searchParams, router]);
+
+  return (
+    <MainHomeLayout tab={currentTab} tabs={tabs} setTab={setTab}>
+      <CardSizeProvider>
+        {currentTab === "markdown" ? <QuizMarkdownEditor /> : null}
+        {currentTab === "chatgpt" ? <ChatgptEditor /> : null}
+        {currentTab === "gradient" ? <GradientEditor /> : null}
+        {currentTab === "x" ? <XEditor /> : null}
+      </CardSizeProvider>
+    </MainHomeLayout>
+  );
+}
+