Merge branch 'main' of github.com:trycompai/comp into mariano/stuff

README.md

@@ -1,7 +1,7 @@
 <!-- PROJECT LOGO -->
 <p align="center">
   <a href="https://github.com/trycompai/comp">
-   <img src="https://avatars.githubusercontent.com/u/184552964?s=200&v=4" alt="Logo">
+   <img src="https://trycomp.ai/logo.png" alt="Logo">
   </a>
 
   <h3 align="center">Comp AI</h3>

apps/app/public/site.webmanifest

@@ -1 +1,21 @@
-{"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"}
+{
+  "name": "Comp AI",
+  "short_name": "Comp AI",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/app/src/app/[locale]/layout.tsx

@@ -5,7 +5,6 @@ import { env } from "@/env.mjs";
 import { initializeServer } from "@bubba/analytics/src/server";
 import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
 import { GeistMono } from "geist/font/mono";
-import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
 import { SessionProvider } from "next-auth/react";
 import localFont from "next/font/local";

apps/app/src/components/risks/risk-comments.tsx

@@ -47,7 +47,7 @@ export function RiskComments({
               return (
                 <div
                   key={comment.id}
-                  className="group relative flex flex-col gap-3 rounded-lg border bg-card p-4 shadow-sm transition-colors"
+                  className="group relative flex flex-col gap-3 border bg-card p-4 shadow-sm transition-colors"
                 >
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1">

apps/app/src/components/risks/tasks/task-attachment.tsx

@@ -40,7 +40,7 @@ export async function TaskAttachments({
                   <Link
                     href={signedUrls[index].signedUrl}
                     target="_blank"
-                    className="text-primary hover:underline"
+                    className="hover:underline"
                   >
                     {attachment.name}
                   </Link>

apps/app/src/components/risks/tasks/task-comments.tsx

@@ -28,6 +28,7 @@ export function TaskComment({
           <div className="flex items-center justify-between gap-2">
             {t("common.comments.title")}
             <Button variant="action" onClick={() => setOpen("true")}>
+              <MessageSquare className="h-4 w-4" />
               {t("common.comments.add")}
             </Button>
           </div>

apps/app/src/components/upload-dialog.tsx

@@ -15,6 +15,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@bubba/ui/dialog";
+import { Cloud } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
 
@@ -55,8 +56,8 @@ export function UploadDialog({ taskId, riskId }: UploadDialogProps) {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="action">
-          {t("common.attachments.upload")}{" "}
-          {files.length > 0 && `(${files.length})`}
+          <Cloud className="h-4 w-4" />
+          {t("common.attachments.upload")}
         </Button>
       </DialogTrigger>
       <DialogContent className="sm:max-w-xl">

apps/web/public/site.webmanifest

@@ -1 +1,21 @@
-{"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"}
+{
+  "name": "Comp AI",
+  "short_name": "Comp AI",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/web/src/app/(home)/page.tsx

@@ -5,15 +5,6 @@ import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 import Logo from "../components/logo";
 
-export const metadata: Metadata = {
-  title: "Comp AI - Get SOC 2, ISO 27001 and GDPR compliant",
-  description:
-    "The open-source compliance automation platform for SOC 2, ISO 27001, GDPR and more.",
-  alternates: {
-    canonical: "https://trycomp.ai",
-  },
-};
-
 export default function Home() {
   return (
     <section className="w-full">

apps/web/src/app/layout.tsx

@@ -1,24 +1,23 @@
+import { GeistMono } from "geist/font/mono";
 import type { Metadata } from "next";
-import { Geist } from "next/font/google";
 import { Toaster } from "sonner";
 import "@bubba/ui/globals.css";
 import { Providers } from "@/app/providers";
 import { env } from "@/env.mjs";
+import { generatePageMeta } from "@/lib/seo";
 import { cn } from "@/lib/utils";
 import { GoogleTagManager } from "@next/third-parties/google";
+import localFont from "next/font/local";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+export const metadata = generatePageMeta({
+  url: "/",
 });
 
-export const metadata: Metadata = {
-  title: "Comp AI",
-  description: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
-  icons: {
-    icon: "/android-chrome-192x192.png",
-  },
-};
+const font = localFont({
+  src: "../../public/fonts/GeneralSans-Variable.ttf",
+  display: "swap",
+  variable: "--font-general-sans",
+});
 
 export const preferredRegion = ["auto"];
 
@@ -33,7 +32,7 @@ export default function RootLayout({
       <body
         className={cn(
           "bg-background font-sans antialiased",
-          geistSans.variable,
+          `${GeistMono.variable} ${font.variable}`,
         )}
       >
         <Providers attribute="class" defaultTheme="system" enableSystem>

apps/web/src/lib/seo.tsx

@@ -0,0 +1,158 @@
+import type { Metadata } from "next";
+import type { OpenGraph } from "next/dist/lib/metadata/types/opengraph-types";
+import type { Twitter } from "next/dist/lib/metadata/types/twitter-types";
+import type { StaticImageData } from "next/image";
+
+const baseURL = "https://trycomp.ai";
+const title = "Comp AI - Open Source Platform for SOC 2, ISO 27001 & GDPR";
+const description =
+  "The Open Source Drata & Vanta alternative that does everything you need to get compliant, fast. Get SOC 2, ISO 27001 and GDPR compliant in minutes.";
+
+export const rootOpenGraph: OpenGraph = {
+  locale: "en",
+  type: "website",
+  url: baseURL,
+  siteName: "Comp AI",
+  title,
+  description,
+};
+
+export const rootTwitter: Twitter = {
+  title,
+  description,
+  card: "summary_large_image",
+  creator: "@trycompai",
+  site: "@trycompai",
+};
+
+export const rootMetadata: Metadata = {
+  metadataBase: new URL(baseURL),
+  title,
+  description,
+  applicationName: "Comp AI",
+  openGraph: rootOpenGraph,
+  twitter: rootTwitter,
+  robots:
+    "follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large",
+};
+
+function getImage(
+  image?: StaticImageData | string,
+  alt?: string,
+  width?: number,
+  height?: number,
+) {
+  if (!image) {
+    return null;
+  }
+
+  if (typeof image === "string") {
+    return {
+      url: image,
+      alt,
+      width,
+      height,
+      type: image.endsWith(".png") ? "image/png" : "image/jpeg",
+    };
+  }
+
+  return {
+    url: image.src,
+    width: image.width,
+    height: image.height,
+    alt,
+    type: image.src.endsWith(".png") ? "image/png" : "image/jpeg",
+  };
+}
+
+export function generatePageMeta({
+  title = rootMetadata.title as string,
+  description = rootMetadata.description as string,
+  url,
+  image,
+  image_alt,
+  image_width,
+  image_height,
+  publishedAt,
+  updatedAt,
+  siteName = rootMetadata.applicationName as string,
+  authors,
+  noindex,
+  locale = "en",
+}: {
+  title?: string;
+  description?: string;
+  url?: string;
+  image?: StaticImageData | string;
+  image_alt?: string;
+  image_width?: number;
+  image_height?: number;
+  publishedAt?: string;
+  updatedAt?: string;
+  authors?: string[];
+  siteName?: string;
+  noindex?: boolean;
+  locale?: string;
+} = {}): Metadata {
+  const metadata = {
+    ...rootMetadata,
+    title,
+    description,
+    alternates: {
+      canonical: url,
+    },
+    authors: authors,
+    openGraph: {
+      ...rootOpenGraph,
+      locale,
+      url,
+      title: title,
+      description,
+    } as OpenGraph,
+    twitter: {
+      ...rootTwitter,
+      title: title,
+      description,
+    } as Twitter,
+    publisher: siteName,
+    other: {},
+  } as Metadata;
+
+  if (publishedAt) {
+    metadata.openGraph = {
+      ...metadata.openGraph,
+      type: "article",
+      locale: locale,
+      publishedTime: publishedAt,
+      modifiedTime: updatedAt ?? publishedAt,
+      authors: authors ?? [],
+      section: siteName,
+      tags: [siteName ?? "Comp AI"],
+    };
+  }
+
+  const img = getImage(image, image_alt ?? title, image_width, image_height);
+  const screenshot = {
+    url: `${metadata.metadataBase}og.png`,
+    width: 1200,
+    height: 630,
+    alt: title,
+    type: "image/png",
+  };
+  metadata.openGraph!.images = img ? [img] : [screenshot];
+  metadata.twitter!.images = img ? [img] : [screenshot];
+
+  if (siteName) {
+    metadata.applicationName = siteName;
+    metadata.openGraph!.siteName = siteName;
+  }
+
+  if (noindex) {
+    metadata.robots = {
+      index: false,
+      follow: true,
+    };
+  }
+
+  return metadata;
+}