Merge pull request #7 from cuculus-dev/feature/home

トップページのサンプル実装
cuculus-dev · Aug 6, 2023 · e7497e5 · e7497e5
2 parents 9e291ef + c4e7d46
commit e7497e5
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 3 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+META_ROBOTS=""
diff --git a/src/app/_components/Caption.stories.ts b/src/app/_components/Caption.stories.ts
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Caption from './Caption';
+
+const meta = {
+  title: 'app/index/Caption',
+  component: Caption,
+} satisfies Meta<typeof Caption>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { styled } from '@mui/material/styles';
+
+const Caption = () => {
+  return (
+    <div>
+      <div style={{ padding: '16px' }}>
+        <Title>
+          <span>Cuculus</span>
+          <span>&nbsp;</span>
+          <span>Roadmap</span>
+        </Title>
+        <Description>
+          <span>CuculusはTwitterに替わる場所として</span>
+          <span>開発される新しいSNSです。</span>
+          <span>事前に計画を公開することでプロジェクトの方向性を共有し、</span>
+          <span>フィードバックや意見を収集したいと考えています。</span>
+        </Description>
+      </div>
+    </div>
+  );
+};
+
+const Title = styled('h1')`
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  flex-wrap: wrap;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-family:
+    'General Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  font-size: 112px;
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    font-size: 80px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('tablet')} {
+    font-size: 72px;
+  }
+
+  font-weight: 600;
+  color: #00ced1;
+`;
+
+const Description = styled('div')`
+  font-weight: 400;
+  text-align: center;
+  margin: 0 auto;
+  padding-right: 16px;
+  padding-left: 16px;
+  color: #334155;
+
+  max-width: 780px;
+  font-size: 24px;
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    max-width: 530px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('tablet')} {
+    max-width: 480px;
+  }
+`;
+
+export default Caption;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,15 @@
+import '@/styles/globals.css';
+
 import type { Metadata } from 'next';
 import EmotionRegistry from '@/components/provider/Registry';
 import React from 'react';
 import Header from '@/components/header/Header';
+import CssBaseline from '@mui/material/CssBaseline';
 
 export const metadata: Metadata = {
   title: 'Cuculus Roadmap',
   description: 'Generated by create next app',
+  robots: process.env.META_ROBOTS,
 };
 
 export default function RootLayout({
@@ -16,6 +20,7 @@ export default function RootLayout({
   return (
     <html lang="ja">
       <head />
+      <CssBaseline />
       <body>
         <EmotionRegistry>
           <Header />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,9 @@
+import Caption from '@/app/_components/Caption';
+
 export default function Home() {
-  return <main>Home</main>;
+  return (
+    <main>
+      <Caption />
+    </main>
+  );
 }
diff --git a/src/components/header/Header.stories.ts b/src/components/header/Header.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Header from './Header';
 
 const meta = {
-  title: 'header/Header',
+  title: 'components/header/Header',
   component: Header,
 } satisfies Meta<typeof Header>;
 

diff --git a/src/components/header/Logo.stories.ts b/src/components/header/Logo.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Logo from './Logo';
 
 const meta = {
-  title: 'header/Logo',
+  title: 'components/header/Logo',
   component: Logo,
 } satisfies Meta<typeof Logo>;
 

diff --git a/src/types/env.d.ts b/src/types/env.d.ts
@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly META_ROBOTS?: string;
+  }
+}
diff --git a/sst.config.ts b/sst.config.ts
@@ -18,6 +18,9 @@ export default {
               : `${stack.stage}.about.cuculus.jp`,
           hostedZone: 'cuculus.jp',
         },
+        environment: {
+          META_ROBOTS: stack.stage == 'prod' ? '' : 'noindex',
+        },
       });
 
       stack.addOutputs({