From 1ded8f486facb0fae4f229e71a42f63050705d8a Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 16 Aug 2023 13:15:57 +0530
Subject: [PATCH] chore: updated meta tags for project issues (#1875)

* dev: updated meta tags for project issues

* dev: updated project description in meta tags in plane deploy.
---
 .../[project_slug]/layout.tsx                 | 27 +++++++++++++++++--
 apps/space/app/page.tsx                       |  2 +-
 apps/space/components/issues/navbar/index.tsx | 20 +++++++++++++-
 apps/space/package.json                       |  2 +-
 apps/space/store/types/project.ts             |  1 +
 5 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
index 8cc3ee8c8..fde4f5d99 100644
--- a/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
+++ b/apps/space/app/[workspace_slug]/[project_slug]/layout.tsx
@@ -1,11 +1,34 @@
-"use client";
-
 // next imports
 import Link from "next/link";
 import Image from "next/image";
+import { Metadata, ResolvingMetadata } from "next";
 // components
 import IssueNavbar from "components/issues/navbar";
 import IssueFilter from "components/issues/filters-render";
+// service
+import ProjectService from "services/project.service";
+
+type LayoutProps = {
+  params: { workspace_slug: string; project_slug: string };
+};
+
+export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
+  // read route params
+  const { workspace_slug, project_slug } = params;
+  const projectServiceInstance = new ProjectService();
+
+  const project = await projectServiceInstance?.getProjectSettingsAsync(workspace_slug, project_slug);
+
+  return {
+    title: `${project?.project_details?.name} | ${workspace_slug}`,
+    description: `${project?.project_details?.description || `${project?.project_details?.name} | ${workspace_slug}`}`,
+    icons: `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${
+      typeof project?.project_details?.emoji != "object"
+        ? String.fromCodePoint(parseInt(project?.project_details?.emoji))
+        : "✈️"
+    }</text></svg>`,
+  };
+}
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => (
   <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index c1b2926b3..6a18b7283 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -3,7 +3,7 @@
 import React from "react";
 
 const HomePage = () => (
-  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Space</div>
+  <div className="relative w-screen h-screen flex justify-center items-center text-5xl">Plane Deploy</div>
 );
 
 export default HomePage;
diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 0207aaee2..71a2fabcc 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+// next imports
+import Image from "next/image";
 // components
 import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
@@ -12,6 +14,18 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
+const renderEmoji = (emoji: string | { name: string; color: string }) => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
+
 const IssueNavbar = observer(() => {
   const store: RootStore = useMobxStore();
 
@@ -20,7 +34,11 @@ const IssueNavbar = observer(() => {
       {/* project detail */}
       <div className="flex-shrink-0 flex items-center gap-2">
         <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center bg-gray-100 text-[24px]">
-          {store?.project?.project && store?.project?.project?.icon ? store?.project?.project?.icon : "😊"}
+          {store?.project?.project && store?.project?.project?.emoji ? (
+            renderEmoji(store?.project?.project?.emoji)
+          ) : (
+            <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
+          )}
         </div>
         <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
           {store?.project?.project?.name || `...`}
diff --git a/apps/space/package.json b/apps/space/package.json
index 4af31d312..c2eaa8af1 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "plane-space",
+  "name": "plane-deploy",
   "version": "0.0.1",
   "private": true,
   "scripts": {
diff --git a/apps/space/store/types/project.ts b/apps/space/store/types/project.ts
index a55f30be0..41f4c2f44 100644
--- a/apps/space/store/types/project.ts
+++ b/apps/space/store/types/project.ts
@@ -8,6 +8,7 @@ export interface IProject {
   id: string;
   identifier: string;
   name: string;
+  description: string;
   icon: string;
   cover_image: string | null;
   icon_prop: string | null;