Merge pull request #105 from sinanptm/pwa-seo

feat: Add PWA Support, metadata Improvements.

28 files changed, 123 insertions, 35 deletions

diff --git a/apps/web/public/browserconfig.xml b/apps/web/public/browserconfig.xml
new file mode 100644
index 00000000..39060b21
--- /dev/null
+++ b/apps/web/public/browserconfig.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/icons/ms-icon-70x70.png"/>
+            <square150x150logo src="/icons/ms-icon-150x150.png"/>
+            <square310x310logo src="/icons/ms-icon-310x310.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
\ No newline at end of file
diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
new file mode 100644
index 00000000..9b2cba8f
--- /dev/null
+++ b/apps/web/public/favicon.ico
diff --git a/apps/web/public/icons/android-icon-144x144.png b/apps/web/public/icons/android-icon-144x144.png
new file mode 100644
index 00000000..7320ece7
--- /dev/null
+++ b/apps/web/public/icons/android-icon-144x144.png
diff --git a/apps/web/public/icons/android-icon-192x192.png b/apps/web/public/icons/android-icon-192x192.png
new file mode 100644
index 00000000..f534f429
--- /dev/null
+++ b/apps/web/public/icons/android-icon-192x192.png
diff --git a/apps/web/public/icons/android-icon-36x36.png b/apps/web/public/icons/android-icon-36x36.png
new file mode 100644
index 00000000..6b8db020
--- /dev/null
+++ b/apps/web/public/icons/android-icon-36x36.png
diff --git a/apps/web/public/icons/android-icon-48x48.png b/apps/web/public/icons/android-icon-48x48.png
new file mode 100644
index 00000000..30a68fa5
--- /dev/null
+++ b/apps/web/public/icons/android-icon-48x48.png
diff --git a/apps/web/public/icons/android-icon-72x72.png b/apps/web/public/icons/android-icon-72x72.png
new file mode 100644
index 00000000..e4019c84
--- /dev/null
+++ b/apps/web/public/icons/android-icon-72x72.png
diff --git a/apps/web/public/icons/android-icon-96x96.png b/apps/web/public/icons/android-icon-96x96.png
new file mode 100644
index 00000000..85591ab4
--- /dev/null
+++ b/apps/web/public/icons/android-icon-96x96.png
diff --git a/apps/web/public/icons/apple-icon-114x114.png b/apps/web/public/icons/apple-icon-114x114.png
new file mode 100644
index 00000000..c776e3f9
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-114x114.png
diff --git a/apps/web/public/icons/apple-icon-120x120.png b/apps/web/public/icons/apple-icon-120x120.png
new file mode 100644
index 00000000..76604df8
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-120x120.png
diff --git a/apps/web/public/icons/apple-icon-144x144.png b/apps/web/public/icons/apple-icon-144x144.png
new file mode 100644
index 00000000..7320ece7
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-144x144.png
diff --git a/apps/web/public/icons/apple-icon-152x152.png b/apps/web/public/icons/apple-icon-152x152.png
new file mode 100644
index 00000000..eb5ef0df
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-152x152.png
diff --git a/apps/web/public/icons/apple-icon-180x180.png b/apps/web/public/icons/apple-icon-180x180.png
new file mode 100644
index 00000000..b90e62fb
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-180x180.png
diff --git a/apps/web/public/icons/apple-icon-57x57.png b/apps/web/public/icons/apple-icon-57x57.png
new file mode 100644
index 00000000..7cfb2e56
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-57x57.png
diff --git a/apps/web/public/icons/apple-icon-60x60.png b/apps/web/public/icons/apple-icon-60x60.png
new file mode 100644
index 00000000..1d90a370
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-60x60.png
diff --git a/apps/web/public/icons/apple-icon-72x72.png b/apps/web/public/icons/apple-icon-72x72.png
new file mode 100644
index 00000000..e4019c84
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-72x72.png
diff --git a/apps/web/public/icons/apple-icon-76x76.png b/apps/web/public/icons/apple-icon-76x76.png
new file mode 100644
index 00000000..34575f42
--- /dev/null
+++ b/apps/web/public/icons/apple-icon-76x76.png
diff --git a/apps/web/public/icons/favicon-16x16.png b/apps/web/public/icons/favicon-16x16.png
new file mode 100644
index 00000000..96db3a2f
--- /dev/null
+++ b/apps/web/public/icons/favicon-16x16.png
diff --git a/apps/web/public/icons/favicon-32x32.png b/apps/web/public/icons/favicon-32x32.png
new file mode 100644
index 00000000..f8f589dc
--- /dev/null
+++ b/apps/web/public/icons/favicon-32x32.png
diff --git a/apps/web/public/icons/favicon-96x96.png b/apps/web/public/icons/favicon-96x96.png
new file mode 100644
index 00000000..85591ab4
--- /dev/null
+++ b/apps/web/public/icons/favicon-96x96.png
diff --git a/apps/web/public/icons/ms-icon-144x144.png b/apps/web/public/icons/ms-icon-144x144.png
new file mode 100644
index 00000000..7320ece7
--- /dev/null
+++ b/apps/web/public/icons/ms-icon-144x144.png
diff --git a/apps/web/public/icons/ms-icon-150x150.png b/apps/web/public/icons/ms-icon-150x150.png
new file mode 100644
index 00000000..248ef48a
--- /dev/null
+++ b/apps/web/public/icons/ms-icon-150x150.png
diff --git a/apps/web/public/icons/ms-icon-310x310.png b/apps/web/public/icons/ms-icon-310x310.png
new file mode 100644
index 00000000..950a3d6b
--- /dev/null
+++ b/apps/web/public/icons/ms-icon-310x310.png
diff --git a/apps/web/public/icons/ms-icon-70x70.png b/apps/web/public/icons/ms-icon-70x70.png
new file mode 100644
index 00000000..7b9c2694
--- /dev/null
+++ b/apps/web/public/icons/ms-icon-70x70.png
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
new file mode 100644
index 00000000..fcbfad59
--- /dev/null
+++ b/apps/web/public/manifest.json
@@ -0,0 +1,44 @@
+{
+    "name": "OpenCut",
+    "description": "A simple but powerful video editor that gets the job done. In your browser.",
+    "display": "standalone",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/icons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "0.75"
+        },
+        {
+            "src": "/icons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1.0"
+        },
+        {
+            "src": "/icons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "/icons/android-icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+        {
+            "src": "/icons/android-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png",
+            "density": "3.0"
+        },
+        {
+            "src": "/icons/android-icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png",
+            "density": "4.0"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/apps/web/src/app/favicon.ico b/apps/web/src/app/favicon.ico
deleted file mode 100644
index cb20127b..00000000
--- a/apps/web/src/app/favicon.ico
+++ /dev/null
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 5d33100d..ee045647 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
@@ -6,46 +5,14 @@ import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { baseMetaData } from "./metadata";
 
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
 });
 
-export const metadata: Metadata = {
-  title: "OpenCut",
-  description:
-    "A simple but powerful video editor that gets the job done. In your browser.",
-  openGraph: {
-    title: "OpenCut",
-    description:
-      "A simple but powerful video editor that gets the job done. In your browser.",
-    url: "https://opencut.app",
-    siteName: "OpenCut",
-    locale: "en_US",
-    type: "website",
-    images: [
-      {
-        url: "https://opencut.app/opengraph-image.jpg",
-        width: 1200,
-        height: 630,
-        alt: "OpenCut",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "OpenCut",
-    description:
-      "A simple but powerful video editor that gets the job done. In your browser.",
-    creator: "@opencutapp",
-    images: ["/opengraph-image.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+export const metadata = baseMetaData;
 
 export default function RootLayout({
   children,
diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
new file mode 100644
index 00000000..4e387014
--- /dev/null
+++ b/apps/web/src/app/metadata.ts
@@ -0,0 +1,66 @@
+import { Metadata } from "next";
+
+const title = "OpenCut";
+const description = "A simple but powerful video editor that gets the job done. In your browser.";
+const openGraphImageUrl = "https://opencut.app/opengraph-image.jpg";
+const twitterImageUrl = "/opengraph-image.jpg";
+
+export const baseMetaData: Metadata = {
+    title: title,
+    description: description,
+    openGraph: {
+        title: title,
+        description: description,
+        url: "https://opencut.app",
+        siteName: "OpenCut",
+        locale: "en_US",
+        type: "website",
+        images: [
+            {
+                url: openGraphImageUrl,
+                width: 1200,
+                height: 630,
+                alt: "OpenCut",
+            },
+        ],
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: title,
+        description: description,
+        creator: "@opencutapp",
+        images: [twitterImageUrl],
+    },
+    robots: {
+        index: true,
+        follow: true,
+    },
+    icons: {
+        icon: [
+            { url: "/favicon.ico" },
+            { url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+            { url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+            { url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+        ],
+        apple: [
+            { url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
+            { url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
+            { url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
+            { url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
+            { url: "/icons/apple-icon-114x114.png", sizes: "114x114", type: "image/png" },
+            { url: "/icons/apple-icon-120x120.png", sizes: "120x120", type: "image/png" },
+            { url: "/icons/apple-icon-144x144.png", sizes: "144x144", type: "image/png" },
+            { url: "/icons/apple-icon-152x152.png", sizes: "152x152", type: "image/png" },
+            { url: "/icons/apple-icon-180x180.png", sizes: "180x180", type: "image/png" },
+        ],
+        shortcut: ["/favicon.ico"]
+    },
+    appleWebApp: {
+        capable: true,
+        title: title,
+    },
+    manifest: "/manifest.json",
+    other: {
+        "msapplication-config": "/browserconfig.xml"
+    }
+};