From b9a57e7c6c8a0b0e376c7c86281dec0c67305178 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 01:28:04 +0900 Subject: [PATCH 1/9] =?UTF-8?q?=E6=A8=AA=E5=B9=85=E3=81=AE=E5=88=B6?= =?UTF-8?q?=E9=99=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Caption.tsx | 9 +++++++++ src/app/_components/WidthProvider.tsx | 26 ++++++++++++++++++++++++++ src/app/page.tsx | 8 +++++++- 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/app/_components/Caption.tsx create mode 100644 src/app/_components/WidthProvider.tsx diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx new file mode 100644 index 0000000..23e5aca --- /dev/null +++ b/src/app/_components/Caption.tsx @@ -0,0 +1,9 @@ +'use client'; + +import WidthProvider from '@/app/_components/WidthProvider'; + +const Caption = () => { + return TEST; +}; + +export default Caption; diff --git a/src/app/_components/WidthProvider.tsx b/src/app/_components/WidthProvider.tsx new file mode 100644 index 0000000..b269054 --- /dev/null +++ b/src/app/_components/WidthProvider.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { ReactNode } from 'react'; +import styled from '@mui/material/styles/styled'; + +/** + * 横幅を制限する + * @constructor + */ +const WidthProvider = ({ children }: { children: ReactNode }) => { + return {children}; +}; + +const paddingSide = '20px'; + +const StyledDiv = styled('div')` + max-width: 100%; + margin-left: auto; + margin-right: auto; + width: ${({ theme }) => + `calc(${theme.breakpoints.values.desktop}px + calc(2 * ${paddingSide}))`}; + padding-left: ${paddingSide}; + padding-right: ${paddingSide}; +`; + +export default WidthProvider; diff --git a/src/app/page.tsx b/src/app/page.tsx index f4e7b5a..a728319 100644 --- 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
Home
; + return ( +
+ +
+ ); } From e7a5f40caf766361a1bb656168fabec146b715b7 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 21:22:42 +0900 Subject: [PATCH 2/9] =?UTF-8?q?eslint=E3=82=A8=E3=83=A9=E3=83=BC=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/WidthProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/_components/WidthProvider.tsx b/src/app/_components/WidthProvider.tsx index b269054..a1960c7 100644 --- a/src/app/_components/WidthProvider.tsx +++ b/src/app/_components/WidthProvider.tsx @@ -1,7 +1,7 @@ 'use client'; import { ReactNode } from 'react'; -import styled from '@mui/material/styles/styled'; +import { styled } from '@mui/material/styles'; /** * 横幅を制限する From 15044ca4c209d730089c2934ffcba523c77fcd53 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 21:28:21 +0900 Subject: [PATCH 3/9] CSS Baseline --- src/app/layout.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 40d353a..9cfbce2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ 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', @@ -16,6 +17,7 @@ export default function RootLayout({ return ( +
From 3051e5c0816e91fa0e18bd64b04ab8568113a146 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 22:41:00 +0900 Subject: [PATCH 4/9] =?UTF-8?q?=E3=82=BF=E3=82=A4=E3=83=88=E3=83=AB?= =?UTF-8?q?=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Caption.tsx | 52 +++++++++++++++++++++++++-- src/app/_components/WidthProvider.tsx | 26 -------------- 2 files changed, 50 insertions(+), 28 deletions(-) delete mode 100644 src/app/_components/WidthProvider.tsx diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx index 23e5aca..a605a94 100644 --- a/src/app/_components/Caption.tsx +++ b/src/app/_components/Caption.tsx @@ -1,9 +1,57 @@ 'use client'; -import WidthProvider from '@/app/_components/WidthProvider'; +import { styled } from '@mui/material/styles'; const Caption = () => { - return TEST; + return ( +
+
+ + <span>Cuculus</span> + <span> </span> + <span>Roadmap</span> + +

+ CuculusはTwitterに替わる場所として開発される新しいSNSです。 + 事前に計画を公開することで、プロジェクトの方向性を共有し、フィードバックや意見を収集したいと考えています。 +

+
+
+ ); }; +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; +`; + export default Caption; diff --git a/src/app/_components/WidthProvider.tsx b/src/app/_components/WidthProvider.tsx deleted file mode 100644 index a1960c7..0000000 --- a/src/app/_components/WidthProvider.tsx +++ /dev/null @@ -1,26 +0,0 @@ -'use client'; - -import { ReactNode } from 'react'; -import { styled } from '@mui/material/styles'; - -/** - * 横幅を制限する - * @constructor - */ -const WidthProvider = ({ children }: { children: ReactNode }) => { - return {children}; -}; - -const paddingSide = '20px'; - -const StyledDiv = styled('div')` - max-width: 100%; - margin-left: auto; - margin-right: auto; - width: ${({ theme }) => - `calc(${theme.breakpoints.values.desktop}px + calc(2 * ${paddingSide}))`}; - padding-left: ${paddingSide}; - padding-right: ${paddingSide}; -`; - -export default WidthProvider; From 1399687e6804a94e9dcbe6e991b989689b3583b6 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 22:59:49 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Storybook=E3=83=87=E3=82=A3=E3=83=AC?= =?UTF-8?q?=E3=82=AF=E3=83=88=E3=83=AA=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Caption.stories.ts | 12 ++++++++++++ src/app/layout.tsx | 2 ++ src/components/header/Header.stories.ts | 2 +- src/components/header/Logo.stories.ts | 2 +- 4 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 src/app/_components/Caption.stories.ts diff --git a/src/app/_components/Caption.stories.ts b/src/app/_components/Caption.stories.ts new file mode 100644 index 0000000..e961ac0 --- /dev/null +++ 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; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9cfbce2..ea5f20e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,5 @@ +import '@/styles/globals.css'; + import type { Metadata } from 'next'; import EmotionRegistry from '@/components/provider/Registry'; import React from 'react'; diff --git a/src/components/header/Header.stories.ts b/src/components/header/Header.stories.ts index 72c921c..6b5b6a9 100644 --- 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; diff --git a/src/components/header/Logo.stories.ts b/src/components/header/Logo.stories.ts index d3f8006..6dda56d 100644 --- 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; From 761a6a64b9ca7dd6851a4ed7139d474d582921c5 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 23:09:52 +0900 Subject: [PATCH 6/9] =?UTF-8?q?=E4=BB=AE=E8=AA=AC=E6=98=8E=E6=96=87?= =?UTF-8?q?=E3=81=A8=E4=BB=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Caption.tsx | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx index a605a94..4fcce61 100644 --- a/src/app/_components/Caption.tsx +++ b/src/app/_components/Caption.tsx @@ -11,10 +11,10 @@ const Caption = () => {   Roadmap -

+ CuculusはTwitterに替わる場所として開発される新しいSNSです。 事前に計画を公開することで、プロジェクトの方向性を共有し、フィードバックや意見を収集したいと考えています。 -

+ ); @@ -54,4 +54,23 @@ const Title = styled('h1')` color: #00ced1; `; +const Description = styled('div')` + font-weight: 400; + text-align: center; + margin: 0 auto; + padding-right: 16px; + padding-left: 16px; + + 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; From 1ccd84d7228304f820552e786379bea1acf05d9d Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 23:31:48 +0900 Subject: [PATCH 7/9] =?UTF-8?q?prod=E6=84=8F=E5=A4=96=E3=81=AFnoindex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 1 + src/app/layout.tsx | 6 +++++- src/types/env.d.ts | 5 +++++ sst.config.ts | 3 +++ 4 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 .env create mode 100644 src/types/env.d.ts diff --git a/.env b/.env new file mode 100644 index 0000000..ad315a9 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +META_ROBOTS="" diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ea5f20e..e1c1918 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -18,7 +18,11 @@ export default function RootLayout({ }) { return ( - + + {process.env.META_ROBOTS ? ( + + ) : undefined} + diff --git a/src/types/env.d.ts b/src/types/env.d.ts new file mode 100644 index 0000000..b8c9272 --- /dev/null +++ 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 index a235476..de51f80 100644 --- 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({ From b9eb5a1554d4972c532c0cca29f4613d92d60847 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 23:31:59 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Caption=E5=BE=AE=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/Caption.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/_components/Caption.tsx b/src/app/_components/Caption.tsx index 4fcce61..74c9919 100644 --- a/src/app/_components/Caption.tsx +++ b/src/app/_components/Caption.tsx @@ -12,8 +12,10 @@ const Caption = () => { Roadmap - CuculusはTwitterに替わる場所として開発される新しいSNSです。 - 事前に計画を公開することで、プロジェクトの方向性を共有し、フィードバックや意見を収集したいと考えています。 + CuculusはTwitterに替わる場所として + 開発される新しいSNSです。 + 事前に計画を公開することでプロジェクトの方向性を共有し、 + フィードバックや意見を収集したいと考えています。 @@ -60,6 +62,7 @@ const Description = styled('div')` margin: 0 auto; padding-right: 16px; padding-left: 16px; + color: #334155; max-width: 780px; font-size: 24px; From c4e7d464b0b28503fc19296ce49a11e7f0006918 Mon Sep 17 00:00:00 2001 From: takecchi Date: Sun, 6 Aug 2023 23:33:23 +0900 Subject: [PATCH 9/9] =?UTF-8?q?robots=E3=81=93=E3=82=8C=E3=81=A7=E8=89=AF?= =?UTF-8?q?=E3=81=95=E3=81=9D=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e1c1918..dea4525 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,6 +9,7 @@ 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({ @@ -18,11 +19,7 @@ export default function RootLayout({ }) { return ( - - {process.env.META_ROBOTS ? ( - - ) : undefined} - +