feat: init

apps/space/app/[workspaceSlug]/[projectId]/page.ts

@@ -0,0 +1,41 @@
+import { notFound, redirect } from "next/navigation";
+// plane imports
+import { SitesProjectPublishService } from "@plane/services";
+import type { TProjectPublishSettings } from "@plane/types";
+
+const publishService = new SitesProjectPublishService();
+
+type Props = {
+  params: {
+    workspaceSlug: string;
+    projectId: string;
+  };
+  searchParams: Record<"board" | "peekId", string | string[] | undefined>;
+};
+
+export default async function IssuesPage(props: Props) {
+  const { params, searchParams } = props;
+  // query params
+  const { workspaceSlug, projectId } = params;
+  const { board, peekId } = searchParams;
+
+  let response: TProjectPublishSettings | undefined = undefined;
+  try {
+    response = await publishService.retrieveSettingsByProjectId(workspaceSlug, projectId);
+  } catch (error) {
+    console.error("Error fetching project publish settings:", error);
+    notFound();
+  }
+
+  let url = "";
+  if (response?.entity_name === "project") {
+    url = `/issues/${response?.anchor}`;
+    const params = new URLSearchParams();
+    if (board) params.append("board", String(board));
+    if (peekId) params.append("peekId", String(peekId));
+    if (params.toString()) url += `?${params.toString()}`;
+    redirect(url);
+  } else {
+    notFound();
+  }
+}

apps/space/app/error.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+// ui
+import { Button } from "@plane/propel/button";
+
+const ErrorPage = () => {
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <div className="grid h-screen place-items-center p-4">
+      <div className="space-y-8 text-center">
+        <div className="space-y-2">
+          <h3 className="text-lg font-semibold">Yikes! That doesn{"'"}t look good.</h3>
+          <p className="mx-auto md:w-1/2 text-sm text-custom-text-200">
+            That crashed Plane, pun intended. No worries, though. Our engineers have been notified. If you have more
+            details, please write to{" "}
+            <a href="mailto:support@plane.so" className="text-custom-primary">
+              support@plane.so
+            </a>{" "}
+            or on our{" "}
+            <a
+              href="https://discord.com/invite/A92xrEGCge"
+              target="_blank"
+              className="text-custom-primary"
+              rel="noopener noreferrer"
+            >
+              Discord
+            </a>
+            .
+          </p>
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <Button variant="primary" size="md" onClick={handleRetry}>
+            Refresh
+          </Button>
+          {/* <Button variant="neutral-primary" size="md" onClick={() => {}}>
+            Sign out
+          </Button> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;

apps/space/app/issues/[anchor]/client-layout.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PoweredBy } from "@/components/common/powered-by";
+import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error";
+import { IssuesNavbarRoot } from "@/components/issues/navbar";
+// hooks
+import { usePublish, usePublishList } from "@/hooks/store/publish";
+import { useIssueFilter } from "@/hooks/store/use-issue-filter";
+
+type Props = {
+  children: React.ReactNode;
+  anchor: string;
+};
+
+export const IssuesClientLayout = observer((props: Props) => {
+  const { children, anchor } = props;
+  // store hooks
+  const { fetchPublishSettings } = usePublishList();
+  const publishSettings = usePublish(anchor);
+  const { updateLayoutOptions } = useIssueFilter();
+  // fetch publish settings
+  const { error } = useSWR(
+    anchor ? `PUBLISH_SETTINGS_${anchor}` : null,
+    anchor
+      ? async () => {
+          const response = await fetchPublishSettings(anchor);
+          if (response.view_props) {
+            updateLayoutOptions({
+              list: !!response.view_props.list,
+              kanban: !!response.view_props.kanban,
+              calendar: !!response.view_props.calendar,
+              gantt: !!response.view_props.gantt,
+              spreadsheet: !!response.view_props.spreadsheet,
+            });
+          }
+        }
+      : null
+  );
+
+  if (!publishSettings && !error) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  if (error) return <SomethingWentWrongError />;
+
+  return (
+    <>
+      <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
+        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+          <IssuesNavbarRoot publishSettings={publishSettings} />
+        </div>
+        <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+      </div>
+      <PoweredBy />
+    </>
+  );
+});

apps/space/app/issues/[anchor]/layout.tsx

@@ -0,0 +1,57 @@
+"use server";
+
+import { IssuesClientLayout } from "./client-layout";
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    anchor: string;
+  };
+};
+
+export async function generateMetadata({ params }: Props) {
+  const { anchor } = params;
+  const DEFAULT_TITLE = "Plane";
+  const DEFAULT_DESCRIPTION = "Made with Plane, an AI-powered work management platform with publishing capabilities.";
+  // Validate anchor before using in request (only allow alphanumeric, -, _)
+  const ANCHOR_REGEX = /^[a-zA-Z0-9_-]+$/;
+  if (!ANCHOR_REGEX.test(anchor)) {
+    return { title: DEFAULT_TITLE, description: DEFAULT_DESCRIPTION };
+  }
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/anchor/${anchor}/meta/`);
+    const data = await response.json();
+    return {
+      title: data?.name || DEFAULT_TITLE,
+      description: data?.description || DEFAULT_DESCRIPTION,
+      openGraph: {
+        title: data?.name || DEFAULT_TITLE,
+        description: data?.description || DEFAULT_DESCRIPTION,
+        type: "website",
+        images: [
+          {
+            url: data?.cover_image,
+            width: 800,
+            height: 600,
+            alt: data?.name || DEFAULT_TITLE,
+          },
+        ],
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: data?.name || DEFAULT_TITLE,
+        description: data?.description || DEFAULT_DESCRIPTION,
+        images: [data?.cover_image],
+      },
+    };
+  } catch {
+    return { title: DEFAULT_TITLE, description: DEFAULT_DESCRIPTION };
+  }
+}
+
+export default async function IssuesLayout(props: Props) {
+  const { children, params } = props;
+  const { anchor } = params;
+
+  return <IssuesClientLayout anchor={anchor}>{children}</IssuesClientLayout>;
+}

apps/space/app/issues/[anchor]/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { IssuesLayoutsRoot } from "@/components/issues/issue-layouts";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useLabel } from "@/hooks/store/use-label";
+import { useStates } from "@/hooks/store/use-state";
+
+type Props = {
+  params: {
+    anchor: string;
+  };
+};
+
+const IssuesPage = observer((props: Props) => {
+  const { params } = props;
+  const { anchor } = params;
+  // params
+  const searchParams = useSearchParams();
+  const peekId = searchParams.get("peekId") || undefined;
+  // store
+  const { fetchStates } = useStates();
+  const { fetchLabels } = useLabel();
+
+  useSWR(anchor ? `PUBLIC_STATES_${anchor}` : null, anchor ? () => fetchStates(anchor) : null);
+  useSWR(anchor ? `PUBLIC_LABELS_${anchor}` : null, anchor ? () => fetchLabels(anchor) : null);
+
+  const publishSettings = usePublish(anchor);
+
+  if (!publishSettings) return null;
+
+  return <IssuesLayoutsRoot peekId={peekId} publishSettings={publishSettings} />;
+});
+
+export default IssuesPage;

apps/space/app/layout.tsx

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+// helpers
+import { SPACE_BASE_PATH } from "@plane/constants";
+// styles
+import "@/styles/globals.css";
+// components
+import { AppProvider } from "./provider";
+
+export const metadata: Metadata = {
+  title: "Plane Publish | Make your Plane boards public with one-click",
+  description: "Plane Publish is a customer feedback management tool built on top of plane.so",
+  openGraph: {
+    title: "Plane Publish | Make your Plane boards public with one-click",
+    description: "Plane Publish is a customer feedback management tool built on top of plane.so",
+    url: "https://sites.plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${SPACE_BASE_PATH}/favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${SPACE_BASE_PATH}/favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${SPACE_BASE_PATH}/favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${SPACE_BASE_PATH}/site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${SPACE_BASE_PATH}/favicon/favicon.ico`} />
+        <meta name="robots" content="noindex, nofollow" />
+      </head>
+      <body>
+        <div id="editor-portal" />
+        <AppProvider>
+          <>{children}</>
+        </AppProvider>
+      </body>
+    </html>
+  );
+}

apps/space/app/not-found.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Image from "next/image";
+// assets
+import SomethingWentWrongImage from "public/something-went-wrong.svg";
+
+const NotFound = () => (
+  <div className="h-screen w-screen grid place-items-center">
+    <div className="text-center">
+      <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+        <div className="size-16 md:size-32 grid place-items-center">
+          <Image src={SomethingWentWrongImage} alt="User already logged in" />
+        </div>
+      </div>
+      <h1 className="mt-8 md:mt-12 text-xl md:text-3xl font-semibold">That didn{"'"}t work</h1>
+      <p className="mt-2 md:mt-4 text-sm md:text-base">
+        Check the URL you are entering in the browser{"'"}s address bar and try again.
+      </p>
+    </div>
+  </div>
+);
+
+export default NotFound;

apps/space/app/page.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams, useRouter } from "next/navigation";
+// plane imports
+import { isValidNextPath } from "@plane/utils";
+// components
+import { UserLoggedIn } from "@/components/account/user-logged-in";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { AuthView } from "@/components/views";
+// hooks
+import { useUser } from "@/hooks/store/use-user";
+
+const HomePage = observer(() => {
+  const { data: currentUser, isAuthenticated, isInitializing } = useUser();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const nextPath = searchParams.get("next_path");
+
+  useEffect(() => {
+    if (currentUser && isAuthenticated && nextPath && isValidNextPath(nextPath)) {
+      router.replace(nextPath);
+    }
+  }, [currentUser, isAuthenticated, nextPath, router]);
+
+  if (isInitializing)
+    return (
+      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (currentUser && isAuthenticated) {
+    if (nextPath && isValidNextPath(nextPath)) {
+      return (
+        <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+          <LogoSpinner />
+        </div>
+      );
+    }
+    return <UserLoggedIn />;
+  }
+
+  return <AuthView />;
+});
+
+export default HomePage;

apps/space/app/provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import type { ReactNode, FC } from "react";
+import { ThemeProvider } from "next-themes";
+// components
+import { TranslationProvider } from "@plane/i18n";
+import { InstanceProvider } from "@/lib/instance-provider";
+import { StoreProvider } from "@/lib/store-provider";
+import { ToastProvider } from "@/lib/toast-provider";
+
+interface IAppProvider {
+  children: ReactNode;
+}
+
+export const AppProvider: FC<IAppProvider> = (props) => {
+  const { children } = props;
+
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <StoreProvider>
+        <TranslationProvider>
+          <ToastProvider>
+            <InstanceProvider>{children}</InstanceProvider>
+          </ToastProvider>
+        </TranslationProvider>
+      </StoreProvider>
+    </ThemeProvider>
+  );
+};

apps/space/app/views/[anchor]/layout.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PoweredBy } from "@/components/common/powered-by";
+import { SomethingWentWrongError } from "@/components/issues/issue-layouts/error";
+// hooks
+import { usePublish, usePublishList } from "@/hooks/store/publish";
+// Plane web
+import { ViewNavbarRoot } from "@/plane-web/components/navbar";
+import { useView } from "@/plane-web/hooks/store";
+
+type Props = {
+  children: React.ReactNode;
+  params: {
+    anchor: string;
+  };
+};
+
+const ViewsLayout = observer((props: Props) => {
+  const { children, params } = props;
+  // params
+  const { anchor } = params;
+  // store hooks
+  const { fetchPublishSettings } = usePublishList();
+  const { viewData, fetchViewDetails } = useView();
+  const publishSettings = usePublish(anchor);
+
+  // fetch publish settings && view details
+  const { error } = useSWR(
+    anchor ? `PUBLISHED_VIEW_SETTINGS_${anchor}` : null,
+    anchor
+      ? async () => {
+          const promises = [];
+          promises.push(fetchPublishSettings(anchor));
+          promises.push(fetchViewDetails(anchor));
+          await Promise.all(promises);
+        }
+      : null
+  );
+
+  if (error) return <SomethingWentWrongError />;
+
+  if (!publishSettings || !viewData) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
+      <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
+        <ViewNavbarRoot publishSettings={publishSettings} />
+      </div>
+      <div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
+      <PoweredBy />
+    </div>
+  );
+});
+
+export default ViewsLayout;

apps/space/app/views/[anchor]/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+// components
+import { PoweredBy } from "@/components/common/powered-by";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+// plane-web
+import { ViewLayoutsRoot } from "@/plane-web/components/issue-layouts/root";
+
+type Props = {
+  params: {
+    anchor: string;
+  };
+};
+
+const ViewsPage = observer((props: Props) => {
+  const { params } = props;
+  const { anchor } = params;
+  // params
+  const searchParams = useSearchParams();
+  const peekId = searchParams.get("peekId") || undefined;
+
+  const publishSettings = usePublish(anchor);
+
+  if (!publishSettings) return null;
+
+  return (
+    <>
+      <ViewLayoutsRoot peekId={peekId} publishSettings={publishSettings} />
+      <PoweredBy />
+    </>
+  );
+});
+
+export default ViewsPage;