Merge pull request #43 from ReoHakase/42/replace-opengraph-image

Opengraphの画像を差し替えた他、スタイル修正
ReoHakase · May 27, 2024 · 3359a27 · 3359a27
2 parents b000ed7 + bd399a6
commit 3359a27
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 25 deletions.
diff --git a/apps/web/src/app/[statLabel]/opengraph-image.png b/apps/web/src/app/[statLabel]/opengraph-image.png
diff --git a/apps/web/src/app/[statLabel]/page.tsx b/apps/web/src/app/[statLabel]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import type { ReactElement } from 'react';
 import { Suspense } from 'react';
+import { metadata as layoutMetadata, defaultTitle } from '../layout';
 import { PopulationChart } from '@/features/population/components/PopulationChart/PopulationChart';
 import { PopulationChartSkeleton } from '@/features/population/components/PopulationChart/PopulationChart.skeleton';
 import { fetchPrefectures } from '@/infra/resas/fetchPrefectures';
@@ -55,8 +56,8 @@ const GraphPage = async ({ params, searchParams }: GraphPageProps): Promise<Reac
       >
         {title}
       </h1>
-      <Suspense key={title} fallback={<PopulationChartSkeleton />}>
-        <PopulationChart statLabel={statLabel} prefCodes={prefCodes} />
+      <Suspense key={title} fallback={<PopulationChartSkeleton className={css({ flexGrow: '1' })} />}>
+        <PopulationChart className={css({ flexGrow: '1' })} statLabel={statLabel} prefCodes={prefCodes} />
       </Suspense>
     </main>
   );
@@ -79,8 +80,10 @@ export const generateMetadata = async ({ params, searchParams }: GraphPageProps)
   return {
     title,
     openGraph: {
-      title,
+      ...layoutMetadata.openGraph,
+      title: `${title} | ${defaultTitle}`,
     },
+    twitter: layoutMetadata.twitter,
   };
 };
 

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -54,6 +54,7 @@ const RootLayout: FC<RootLayoutProps> = ({ children }) => (
               flexDir: 'column',
               p: '6',
               flexGrow: '3',
+              h: 'calc(100svh - token(sizes.20))',
               lgDown: {
                 h: '550px', // CLS対策
               },
@@ -82,8 +83,8 @@ const RootLayout: FC<RootLayoutProps> = ({ children }) => (
 
 export default RootLayout;
 
-const defaultTitle = 'RESAS 都道府県別 人口比較アプリケーション' as const;
-const defaultDescription =
+export const defaultTitle = 'RESAS 都道府県別 人口比較アプリケーション' as const;
+export const defaultDescription =
   'RESAS(地域経済分析システム)に掲載されている各種人口データを、都道府県別にグラフで比較できます。' as const;
 
 export const metadata: Metadata = {

diff --git a/apps/web/src/app/opengraph-image.png b/apps/web/src/app/opengraph-image.png
diff --git a/apps/web/src/components/Select/Select.recipe.ts b/apps/web/src/components/Select/Select.recipe.ts
@@ -62,7 +62,7 @@ export const selectSlotRecipe = sva({
     },
     content: {
       pos: 'relative',
-      zIndex: 50,
+      zIndex: '100',
       minW: 'var(--radix-select-trigger-width)',
       overflow: 'hidden',
       rounded: 'md',

diff --git a/apps/web/src/features/navigation/components/Header/Header.tsx b/apps/web/src/features/navigation/components/Header/Header.tsx
@@ -162,7 +162,7 @@ export const Header = ({ ...props }: HeaderProps): ReactNode => {
       >
         <ThemeSelect />
         <Link
-          href="https://github.com/ReoHakase"
+          href="https://github.com/ReoHakase/simple-resas-app"
           external
           referrerPolicy="no-referrer"
           className={flex({

diff --git a/apps/web/src/features/population/components/PopulationChart/PopulationChart.skeleton.tsx b/apps/web/src/features/population/components/PopulationChart/PopulationChart.skeleton.tsx
@@ -7,21 +7,21 @@ export type PopulationChartSkeletonProps = Omit<ComponentPropsWithoutRef<'div'>,
 export const PopulationChartSkeleton = ({ className, ...props }: PopulationChartSkeletonProps): ReactElement => {
   return (
     <div
-      className={css({
-        w: 'full',
-        h: '600px',
-        mdDown: {
+      className={cx(
+        css({
+          w: 'full',
           h: '400px',
-        },
-        animation: 'pulse',
-        bg: 'keyplate.a.2',
-        rounded: '2xl',
-        ring: 'none',
-        userSelect: 'none',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      })}
+          animation: 'pulse',
+          bg: 'keyplate.a.2',
+          rounded: '2xl',
+          ring: 'none',
+          userSelect: 'none',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }),
+        className,
+      )}
       {...props}
     >
       <Loader

diff --git a/apps/web/src/features/population/components/PopulationChart/PopulationChart.tsx b/apps/web/src/features/population/components/PopulationChart/PopulationChart.tsx
@@ -43,10 +43,7 @@ export const PopulationChart = async ({
       className={cx(
         css({
           w: 'full',
-          h: '600px',
-          mdDown: {
-            h: '400px',
-          },
+          h: '400px',
         }),
         className,
       )}