Merge pull request #241 from maretol/change-cms-bandedessinee

index.json廃止

.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/comics/[id]/page.tsx

@@ -7,7 +7,6 @@ import { getBandeDessineeByID } from '@/lib/api/workers'
 import { getHostname } from '@/lib/env'
 import { rewriteImageURL } from '@/lib/image'
 import { ogpImageOption } from '@/lib/static'
-import { BandeDessineeConfig } from 'api-types'
 import { Metadata } from 'next'
 import { Suspense } from 'react'
 
@@ -21,12 +20,12 @@ export async function generateMetadata(props: {
   const draftKey = (await props.searchParams)['draftKey']
   const data = await getBandeDessineeByID(id, draftKey)
   const contentsUrl = data.contents_url
-  const contentsUrlResponse = await fetch(contentsUrl, { next: { revalidate: 300 } })
-  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 {
@@ -55,15 +54,14 @@ export default async function ComicPage(props: {
   const draftKey = (await props.searchParams)['draftKey']
   const asyncData = getBandeDessineeByID(id, draftKey)
   const data = await asyncData
-  const rawConfig = await fetch(data.contents_url, { next: { revalidate: 300 } })
-  const config = rawConfig.json<BandeDessineeConfig>()
 
   const title = data.title_name
+  const firstPage = data.filename + '_00' + data.first_page + data.format[0]
 
   return (
     <div className="p-0 m-0">
       <Suspense fallback={<LoadingComicBook />}>
-        <ComicBook cmsResult={asyncData} configResult={config} />
+        <ComicBook cmsResult={asyncData} />
       </Suspense>
       <div className="flex justify-center w-full">
         <div className="w-full max-w-[1500px]">
@@ -80,6 +78,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

@@ -31,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}
         />

pages/components/large/comics.tsx

@@ -1,4 +1,4 @@
-import { BandeDessineeConfig, ParsedContent, TableOfContents } from 'api-types'
+import { ParsedContent, TableOfContents } from 'api-types'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitleH1 } from '../ui/card'
 import { convertJST, convertJSTDate } from '@/lib/time'
 import ClientImage from '../small/client_image'
@@ -25,21 +25,21 @@ type ComicArticleProps = {
   seriesName: string | null
   tagId: string
   tagName: string
+  cover: string | null
+  firstPage: string // 1ページ目のファイル名。結合済みで渡す
   parsedDescription: ParsedContent[]
   tableOfContents: TableOfContents
 }
 
 export async function ComicOverview(props: ComicArticleProps) {
   const contentsUrl = props.contentsUrl
 
-  const contentsJSON = await fetch(contentsUrl, { next: { revalidate: 300 } })
-  const contentsConfig = (await contentsJSON.json()) as BandeDessineeConfig
-
   const contentsBaseURL = contentsUrl.replaceAll('/index.json', '')
 
-  // 表紙
-  const coverImageOriginURL = contentsBaseURL + '/' + contentsConfig.cover
-  const coverImageURL = rewriteImageURL(imageOption, coverImageOriginURL)
+  // 表紙、または1ページ目の画像URL
+  const imageFile = props.cover || props.firstPage
+  const imageOriginURL = contentsBaseURL + '/' + imageFile
+  const imageURL = rewriteImageURL(imageOption, imageOriginURL)
   // 説明文
   const description = props.parsedDescription
   // マンガのタイトル
@@ -59,7 +59,9 @@ export async function ComicOverview(props: ComicArticleProps) {
       <CardHeader className="py-2"></CardHeader>
       <div className="flex sm:flex-row flex-col mb-4">
         <CardContent className="sm:max-w-96 sm:min-w-48 w-auto h-auto pb-0 pt-2 pr-0">
-          <ClientImage src={coverImageURL} alt={title} width={400} height={800} className="w-auto h-auto" />
+          <div className="shadow-md">
+            <ClientImage src={imageURL} alt={title} width={400} height={800} className="w-auto h-auto" />
+          </div>
         </CardContent>
         <div className="w-full">
           <CardHeader className="pt-2">

pages/components/middle/article_dom/comiccard.tsx

@@ -4,7 +4,6 @@ import { getBandeDessineeByID } from '@/lib/api/workers'
 import { getNoImage, rewriteImageURL } from '@/lib/image'
 import { ogpImageOption } from '@/lib/static'
 import { convertJST } from '@/lib/time'
-import { BandeDessineeConfig } from 'api-types'
 import Link from 'next/link'
 
 export default async function ComicPageCard({ link }: { link: string }) {
@@ -21,11 +20,10 @@ export default async function ComicPageCard({ link }: { link: string }) {
     const series = data.series?.series_name || '-'
     const shortDescription = data.parsed_description[0].text
     const configURL = data.contents_url
-    const configResponse = await fetch(configURL, { next: { revalidate: 60 } })
-    const config = (await configResponse.json()) as BandeDessineeConfig
 
     const baseURL = configURL.replaceAll('index.json', '')
-    const coverURL = baseURL + config.cover
+    const sumnailImage = data.cover || data.filename + '_00' + data.first_page + data.format[0]
+    const coverURL = baseURL + sumnailImage
 
     return (
       <div className="flex max-w-xl">
@@ -51,8 +49,10 @@ export default async function ComicPageCard({ link }: { link: string }) {
                 <div>
                   <p className="text-wrap line-clamp-2">{shortDescription}</p>
                 </div>
-                <div className="h-full flex flex-row items-end justify-end">
-                  <Button className="w-full h-8 bg-gray-800">Read this</Button>
+                <div className="h-full flex flex-row items-end justify-end hover:opacity-70 transition-opacity">
+                  <div className="w-full h-8 bg-gray-800 text-gray-200 rounded-md flex items-center justify-center font-semibold">
+                    Read this
+                  </div>
                 </div>
               </div>
             </div>

pages/components/middle/comicbook.tsx

@@ -8,11 +8,10 @@ import ClientImage from '../small/client_image'
 import ComicImage from '../small/comic_image'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
-import { BandeDessineeConfig, bandeDessineeResult } from 'api-types'
+import { bandeDessineeResult } from 'api-types'
 
 type ComicBookProps = {
   cmsResult: Promise<bandeDessineeResult>
-  configResult: Promise<BandeDessineeConfig>
 }
 
 type pageState = {
@@ -21,27 +20,31 @@ type pageState = {
 }
 
 export default function ComicBook(props: ComicBookProps) {
-  const { cmsResult, configResult } = props
+  const { cmsResult } = props
   const data = use(cmsResult)
-  const config = use(configResult)
 
   const baseUrl = data.contents_url.replaceAll('/index.json', '')
-  const filename = config.filename
-  const startPage = config.first_page
-  const lastPage = config.last_page
-  const format = config.format
+  const filename = data.filename
+  const startPage = data.first_page
+  const lastPage = data.last_page
+  const format = data.format[0]
   const pageArray = Array.from({ length: lastPage - startPage + 1 }, (_, i) => i + startPage)
 
-  const coverPageSrc = baseUrl + '/' + config.cover
-  const backCoverPageSrc = baseUrl + '/' + config.back_cover
-  const startPageLeftRight = config.first_page_left_right
+  const coverPageSrc = data.cover ? baseUrl + '/' + data.cover : null
+  const backCoverPageSrc = data.back_cover ? baseUrl + '/' + data.back_cover : null
+  const startPageLeftRight = data.first_left_right[0]
   const originPageSrc = pageArray.map((i) => getPageImageSrc(baseUrl, filename, i, format))
 
   const headerImage = getHeaderImage()
   const [currentPage, setCurrentPage] = useState(0)
 
   const memoPageList = useMemo(() => {
-    const pageList = [{ position: 'center', src: coverPageSrc }] as pageState[] // 表紙
+    const pageList: pageState[] = []
+    // 表紙が指定済みの場合（ない場合スキップ
+    if (coverPageSrc) {
+      pageList.push({ position: 'center', src: coverPageSrc })
+    }
+
     if (startPageLeftRight === 'left') {
       // 本文1ページ目が左だった場合、最初のページは左だけで、そこから残りのページは2ページペアで処理する
       pageList.push({ position: 'left', src: originPageSrc[0] })
@@ -64,7 +67,11 @@ export default function ComicBook(props: ComicBookProps) {
         pageList.push({ position: 'pair', src: [originPageSrc[i], originPageSrc[i + 1]] })
       }
     }
-    pageList.push({ position: 'center', src: backCoverPageSrc }) // 裏表紙
+    // 裏表紙が指定済みの場合（ない場合スキップ
+    if (backCoverPageSrc) {
+      pageList.push({ position: 'center', src: backCoverPageSrc }) // 裏表紙
+    }
+
     return pageList
   }, [startPageLeftRight, coverPageSrc, backCoverPageSrc, originPageSrc])
 
@@ -104,12 +111,20 @@ export default function ComicBook(props: ComicBookProps) {
         </div>
       </div>
       <div className="absolute left-0 top-0 h-full w-1/4 flex justify-center items-center opacity-70">
-        <Button className="h-full w-full flex justify-start items-center" variant="frame" onClick={leftClick}>
+        <Button
+          className="h-full w-full flex justify-start items-center outline-none shadow-none"
+          variant="frame"
+          onClick={leftClick}
+        >
           <ChevronLeftIcon className="text-white h-20 w-20" />
         </Button>
       </div>
       <div className="absolute right-0 top-0 h-full w-1/4 flex justify-center items-center opacity-70">
-        <Button className="h-full w-full flex justify-end items-center" variant="frame" onClick={rightClick}>
+        <Button
+          className="h-full w-full flex justify-end items-center outline-none shadow-none"
+          variant="frame"
+          onClick={rightClick}
+        >
           <ChevronRightIcon className="text-white h-20 w-20" />
         </Button>
       </div>