Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362
2025-11-07 00:00:52 +08:00
commit 8ebde8aa05
4886 changed files with 462270 additions and 0 deletions
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -0,0 +1,126 @@
+import type { ReactNode } from "react";
+import Script from "next/script";
+import { Links, Meta, Outlet, Scripts } from "react-router";
+import type { LinksFunction } from "react-router";
+// plane imports
+import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
+import { cn } from "@plane/utils";
+// types
+// assets
+import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
+import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
+import faviconIco from "@/app/assets/favicon/favicon.ico?url";
+import icon180 from "@/app/assets/icons/icon-180x180.png?url";
+import icon512 from "@/app/assets/icons/icon-512x512.png?url";
+import ogImage from "@/app/assets/og-image.png?url";
+import globalStyles from "@/styles/globals.css?url";
+import type { Route } from "./+types/root";
+// local
+import { CustomErrorComponent } from "./error";
+import { AppProvider } from "./provider";
+
+const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
+
+export const links: LinksFunction = () => [
+  { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 },
+  { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 },
+  { rel: "shortcut icon", href: faviconIco },
+  { rel: "manifest", href: "/site.webmanifest.json" },
+  { rel: "apple-touch-icon", href: icon512 },
+  { rel: "apple-touch-icon", sizes: "180x180", href: icon180 },
+  { rel: "apple-touch-icon", sizes: "512x512", href: icon512 },
+  { rel: "manifest", href: "/manifest.json" },
+  { rel: "stylesheet", href: globalStyles },
+];
+
+export function Layout({ children }: { children: ReactNode }) {
+  const isSessionRecorderEnabled = parseInt(process.env.NEXT_PUBLIC_ENABLE_SESSION_RECORDER || "0");
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#fff" />
+        {/* Meta info for PWA */}
+        <meta name="application-name" content="Plane" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-title" content={SITE_NAME} />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <div id="context-menu-portal" />
+        <div id="editor-portal" />
+        <AppProvider>
+          <div
+            className={cn(
+              "h-screen w-full overflow-hidden bg-custom-background-100 relative flex flex-col",
+              "app-container"
+            )}
+          >
+            <main className="w-full h-full overflow-hidden relative">{children}</main>
+          </div>
+        </AppProvider>
+        <Scripts />
+        {process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN && (
+          <Script
+            defer
+            data-domain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
+            src="https://plausible.io/js/script.js"
+          />
+        )}
+        {!!isSessionRecorderEnabled && process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY && (
+          <Script id="clarity-tracking">
+            {`(function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+              y=l.getElementsByTagName(r)[0];if(y){y.parentNode.insertBefore(t,y);}
+          })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_SESSION_RECORDER_KEY}");`}
+          </Script>
+        )}
+      </body>
+    </html>
+  );
+}
+
+export const meta: Route.MetaFunction = () => [
+  { title: APP_TITLE },
+  { name: "description", content: SITE_DESCRIPTION },
+  { property: "og:title", content: APP_TITLE },
+  {
+    property: "og:description",
+    content: "Open-source project management tool to manage work items, cycles, and product roadmaps easily",
+  },
+  { property: "og:url", content: "https://app.plane.so/" },
+  { property: "og:image", content: ogImage },
+  { property: "og:image:width", content: "1200" },
+  { property: "og:image:height", content: "630" },
+  { property: "og:image:alt", content: "Plane - Modern project management" },
+  {
+    name: "keywords",
+    content:
+      "software development, plan, ship, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
+  },
+  { name: "twitter:site", content: "@planepowers" },
+  { name: "twitter:card", content: "summary_large_image" },
+  { name: "twitter:image", content: ogImage },
+  { name: "twitter:image:width", content: "1200" },
+  { name: "twitter:image:height", content: "630" },
+  { name: "twitter:image:alt", content: "Plane - Modern project management" },
+];
+
+export default function Root() {
+  return <Outlet />;
+}
+
+export function HydrateFallback() {
+  return null;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  return <CustomErrorComponent error={error} />;
+}