Development

.github/workflows/deploy_dryrun.yaml

@@ -28,10 +28,13 @@ jobs:
           filters: |
             pages:
               - "pages/**"
+              - "packages/api-types/**"
             ogp-data-fetcher:
               - "ogp-data-fetcher/**"
+              - "packages/api-types/src/ogp_types.ts"
             cms-data-fetcher:
               - "cms-data-fetcher/**"
+              - "packages/api-types/src/cms_types.ts"
             workflow:
               - ".github/workflows/**"
 

.github/workflows/deploy_prd.yaml

@@ -32,10 +32,13 @@ jobs:
           filters: |
             pages:
               - "pages/**"
+              - "packages/api-types/**"
             ogp-data-fetcher:
               - "ogp-data-fetcher/**"
+              - "packages/api-types/src/ogp_types.ts"
             cms-data-fetcher:
               - "cms-data-fetcher/**"
+              - "packages/api-types/src/cms_types.ts"
             workflow:
               - ".github/workflows/**"
 

.github/workflows/deploy_stg.yaml

@@ -34,10 +34,13 @@ jobs:
           filters: |
             pages:
               - "pages/**"
+              - "packages/api-types/**"
             ogp-data-fetcher:
               - "ogp-data-fetcher/**"
+              - "packages/api-types/src/ogp_types.ts"
             cms-data-fetcher:
               - "cms-data-fetcher/**"
+              - "packages/api-types/src/cms_types.ts"
             workflow:
               - ".github/workflows/**"
 

packages/api-types/index.ts

@@ -1,3 +1,2 @@
 export * from './src/ogp_types'
 export * from './src/cms_types'
-export * from './src/bande_dessinee_types'

packages/api-types/src/cms_types.ts

@@ -70,6 +70,13 @@ type bandeDessineeResult = {
   previous_id: string | null
   series: bandeDessineeSerires | null
   tag: bandeDessineeTag
+  cover: string | null
+  back_cover: string | null
+  format: string[]
+  filename: string
+  first_page: number
+  last_page: number
+  first_left_right: ('right' | 'left')[]
   parsed_description: ParsedContent[]
   table_of_contents: TableOfContents
 }

pages/app/blog/[article_id]/page.tsx

@@ -11,14 +11,12 @@ import LoadingBlogPage from './loading_article'
 
 export const runtime = 'edge'
 
-export async function generateMetadata(
-  props: {
-    params: Promise<{ article_id: string }>
-    searchParams: Promise<{ [key: string]: string | undefined }>
-  }
-) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
+export async function generateMetadata(props: {
+  params: Promise<{ article_id: string }>
+  searchParams: Promise<{ [key: string]: string | undefined }>
+}) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   const articleID = params.article_id
   const draftKey = searchParams['draftKey']
 
@@ -50,14 +48,12 @@ export async function generateMetadata(
   } as Metadata
 }
 
-export default async function BlogArticlePage(
-  props: {
-    params: Promise<{ article_id: string }>
-    searchParams: Promise<{ [key: string]: string | undefined }>
-  }
-) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
+export default async function BlogArticlePage(props: {
+  params: Promise<{ article_id: string }>
+  searchParams: Promise<{ [key: string]: string | undefined }>
+}) {
+  const searchParams = await props.searchParams
+  const params = await props.params
   const articleID = params.article_id
   const draftKey = searchParams['draftKey']
 

pages/app/comics/[id]/error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { ErrorPageComic } from '@/components/large/error'
+
+export const runtime = 'edge'
+
+export default function ComicErrorPage() {
+  return (
+    <div>
+      <ErrorPageComic title="Not Found" />
+    </div>
+  )
+}

pages/app/comics/[id]/page.tsx

@@ -1,29 +1,34 @@
 import { metadata } from '@/app/layout'
-import { ComicBookPage, ComicDetailPage } from '@/components/large/comics'
+import { ComicDetailPage } from '@/components/large/comics'
+import { LoadingComicBook } from '@/components/large/loading_comics'
+import ComicBook from '@/components/middle/comicbook'
 import FooterButtons from '@/components/small/footer'
 import { getBandeDessineeByID } from '@/lib/api/workers'
 import { getHostname } from '@/lib/env'
 import { rewriteImageURL } from '@/lib/image'
-import { ogpImageOption, originImageOption } from '@/lib/static'
-import { BandeDessineeConfig } from 'api-types'
+import { ogpImageOption } from '@/lib/static'
 import { Metadata } from 'next'
+import { Suspense } from 'react'
 
 export const runtime = 'edge'
 
 export async function generateMetadata(props: {
   params: Promise<{ id: string }>
   searchParams: Promise<{ [key: string]: string | undefined }>
 }) {
-  const id = (await props.params).id
-  const draftKey = (await props.searchParams)['draftKey']
+  const searchParams = await props.searchParams
+  const params = await props.params
+  const id = params.id
+  const draftKey = searchParams['draftKey']
+
   const data = await getBandeDessineeByID(id, draftKey)
   const contentsUrl = data.contents_url
-  const contentsUrlResponse = await fetch(contentsUrl, { next: { revalidate: 60 } })
-  const config = (await contentsUrlResponse.json()) as BandeDessineeConfig
   const contentsBaseUrl = contentsUrl.replaceAll('/index.json', '')
 
   const title = data.title_name
-  const coverImageURL = contentsBaseUrl + '/' + config.cover
+  // TODO: 1ページ目のファイル指定はもっときれいにする
+  const ogpImageFile = data.cover || data.filename + '_00' + data.first_page + data.format[0]
+  const coverImageURL = contentsBaseUrl + '/' + ogpImageFile
   const ogpImage = rewriteImageURL(ogpImageOption, coverImageURL)
 
   return {
@@ -48,38 +53,21 @@ export default async function ComicPage(props: {
   params: Promise<{ id: string }>
   searchParams: Promise<{ [key: string]: string | undefined }>
 }) {
-  const id = (await props.params).id
-  const draftKey = (await props.searchParams)['draftKey']
-  const data = await getBandeDessineeByID(id, draftKey)
-  const contentsUrl = data.contents_url
-  const contentsUrlResponse = await fetch(contentsUrl, { next: { revalidate: 60 } })
-  const config = (await contentsUrlResponse.json()) as BandeDessineeConfig
-  const contentsBaseUrl = contentsUrl.replaceAll('/index.json', '')
+  const params = await props.params
+  const searchParams = await props.searchParams
+  const id = params.id
+  const draftKey = searchParams['draftKey']
+  const asyncData = getBandeDessineeByID(id, draftKey)
+  const data = await asyncData
 
   const title = data.title_name
-  const firstPage = config.first_page
-  const lastPage = config.last_page
+  const firstPage = data.filename + '_00' + data.first_page + data.format[0]
 
   return (
     <div className="p-0 m-0">
-      <ComicBookPage
-        id={id}
-        baseUrl={contentsBaseUrl}
-        coverImage={config.cover}
-        backCoverImage={config.back_cover}
-        firstPageNumber={firstPage}
-        lastPageNumber={lastPage}
-        firstPageLeftRight={config.first_page_left_right}
-        format={config.format}
-        filename={config.filename}
-        parsedDescription={data.parsed_description}
-        next={data.next_id}
-        previous={data.previous_id}
-        seriesId={data.series?.id ?? null}
-        seriesName={data.series?.series_name ?? null}
-        tagId={data.tag.id}
-        tagName={data.tag.tag_name}
-      />
+      <Suspense fallback={<LoadingComicBook />}>
+        <ComicBook cmsResult={asyncData} />
+      </Suspense>
       <div className="flex justify-center w-full">
         <div className="w-full max-w-[1500px]">
           <ComicDetailPage
@@ -95,6 +83,8 @@ export default async function ComicPage(props: {
             seriesName={data.series?.series_name ?? null}
             tagId={data.tag.id}
             tagName={data.tag.tag_name}
+            cover={data.cover}
+            firstPage={firstPage}
             previousId={data.previous_id}
             parsedDescription={data.parsed_description}
             tableOfContents={data.table_of_contents}

pages/app/comics/article.tsx

@@ -1,5 +1,4 @@
 import { ComicOverview } from '@/components/large/comics'
-import { LoadingComics } from '@/components/large/loading_comics'
 import Pagenation from '@/components/middle/pagenation'
 import { getBandeDessinee } from '@/lib/api/workers'
 
@@ -32,6 +31,8 @@ export default async function ComicsPageArticles({
           tagName={bandeDessinee.tag.tag_name}
           nextId={bandeDessinee.next_id}
           previousId={bandeDessinee.previous_id}
+          cover={bandeDessinee.cover}
+          firstPage={bandeDessinee.filename + '_00' + bandeDessinee.first_page + bandeDessinee.format[0]}
           parsedDescription={bandeDessinee.parsed_description}
           tableOfContents={bandeDessinee.table_of_contents}
         />