iconとmetadata追加

MurakawaTakuya · Jan 7, 2025 · b3f46e7 · b3f46e7
1 parent c1bdcec
commit b3f46e7
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/public/appIcon.svg b/public/appIcon.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,9 +7,11 @@ import { UserProvider } from "@/utils/UserContext";
 import type { Metadata } from "next";
 import "./firebase";
 
+const description = "TODO REALはTODOリストとBeRealを組み合わせたアプリです。";
+
 export const metadata: Metadata = {
-  title: "Todo Real(仮)",
-  description: "BeRealとTodoアプリを組み合わせたアプリ",
+  title: "Todo Real",
+  description,
 };
 
 export const viewport = {
@@ -22,9 +24,24 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const rootURL = "https://todo-real-c28fa.web.app/";
+
   return (
     <html lang="ja">
-      <head></head>
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/appIcon.svg" />
+        {/* Open Graph */}
+        <meta property="og:title" content="TODO REAL" />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={`${rootURL}/img/app.png`} />
+        <meta property="og:url" content={`${rootURL}`} />
+        <meta property="og:type" content="website" />
+        {/* Twitter Card */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="サンプルページタイトル" />
+        <meta name="twitter:description" content={description} />
+        <meta name="twitter:image" content={`${rootURL}/img/app.png`} />
+      </head>
       <body>
         <UserProvider>
           <Loader>

diff --git a/src/app/page.module.scss b/src/app/page.module.scss
@@ -1,9 +1,11 @@
 .introductionBody {
-  color: #008edc;
+  --primary-color: #008edc;
+
+  color: var(--primary-color);
   font-family: Roboto, "Zen Kaku Gothic New", sans-serif;
   line-height: 1.7;
 
-  --joy-palette-text-primary: #008edc;
+  --joy-palette-text-primary: var(--primary-color);
   --joy-fontFamily-display: Roboto, "Zen Kaku Gothic New", sans-serif;
 
   > div {
@@ -32,10 +34,16 @@
     object-fit: contain;
     width: 95%;
   }
+
+  svg {
+    fill: var(--primary-color);
+    margin: 0;
+    width: 30px;
+  }
 }
 
 .highlight {
-  background-color: #008edc;
+  background-color: var(--primary-color);
   color: white;
   margin: 0 2px;
   padding: 1px 2px 0;

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -21,7 +21,24 @@ export default function Top() {
         <StyledTypography level="h4" component="h2">
           友達と共有・競争できるTODOリスト
         </StyledTypography>
-        <StyledTypography level="h1">TODO REAL</StyledTypography>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: "5px",
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5m0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5m0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5M7 19h14v-2H7zm0-6h14v-2H7zm0-8v2h14V5z"></path>
+          </svg>
+
+          <StyledTypography level="h1">TODO REAL</StyledTypography>
+        </div>
         <img src="/img/app.png" />
       </div>