fix: some assets fail

Author: ubugeeei

app/components/SpeakerPageSection.vue

@@ -4,6 +4,7 @@ import SpeakerPageHeading from '~/components/speakers/SpeakerPageHeading.vue'
 import SectionTitle from '~/components/SectionTitle.vue'
 import { speakers } from '~/utils/speakers.constants'
 import { urlBasePath } from '~/utils/constants'
+import { sponsors as fallbackSponsors } from '~/utils/newt.constants'
 // import { ISpeaker } from '~/types/interface'
 
 const shuffleArray = ([...array]) => {
@@ -24,7 +25,11 @@ const LTSpeakers = speakers.filter(speaker => speaker.session.type === 'LT')
 const { fetchContent } = useSponsorsCMS()
 const { data: sponsors } = useLazyAsyncData('sponsors', () => fetchContent())
 
-const sessionSponsors = (computed(() => [...sponsors.value.platinum, ...sponsors.value.gold]))
+const sessionSponsors = computed(() => {
+  const resolvedSponsors = sponsors.value ?? fallbackSponsors
+
+  return [...resolvedSponsors.platinum, ...resolvedSponsors.gold]
+})
 </script>
 
 <template>

app/composables/useCMS.ts

@@ -1,50 +1,102 @@
 import { createClient } from 'newt-client-js'
 import { Query } from 'newt-client-js/dist/types/types'
-import { ISponsor } from '~/types/sponsors'
+import { sponsors as fallbackSponsors } from '~/utils/newt.constants'
+import { ISponsor, Rank } from '~/types/sponsors'
+
+type SponsorGroups = Record<Rank, ISponsor[]>
+
+const sponsorRanks: Rank[] = [
+  'platinum',
+  'gold',
+  'silver',
+  'bronze',
+  'specialMedia',
+  'media',
+  'streaming',
+  'dinner',
+]
+
+function createEmptySponsorGroups(): SponsorGroups {
+  return sponsorRanks.reduce((groups, rank) => {
+    groups[rank] = []
+    return groups
+  }, {} as SponsorGroups)
+}
+
+function normalizeSponsorGroups(groups?: Partial<Record<Rank, ISponsor[]>>): SponsorGroups {
+  const normalized = createEmptySponsorGroups()
+
+  for (const rank of sponsorRanks) {
+    normalized[rank] = groups?.[rank] ?? []
+  }
+
+  return normalized
+}
+
+function fallbackSponsorGroups(): SponsorGroups {
+  return normalizeSponsorGroups(fallbackSponsors)
+}
 
 export function useCMS<T>(options: { modelUid: string }) {
   const runtimeConfig = useRuntimeConfig()
-  const client = createClient({
-    spaceUid: runtimeConfig.newtSpaceUid,
-    token: runtimeConfig.newtCdnToken,
-    apiType: 'cdn',
-  })
+  const hasCredentials = Boolean(runtimeConfig.newtSpaceUid && runtimeConfig.newtCdnToken)
+  const client = hasCredentials
+    ? createClient({
+        spaceUid: runtimeConfig.newtSpaceUid,
+        token: runtimeConfig.newtCdnToken,
+        apiType: 'cdn',
+      })
+    : null
   const appUid = 'vuefes-2022'
 
-  const fetchContent = (query?: Query) =>
-    client.getContents<T>({ appUid, ...options, query }).then((contents) => {
-      return contents.items
-    })
+  const fetchContent = async (query?: Query) => {
+    if (!client) {
+      return []
+    }
+
+    const contents = await client.getContents<T>({ appUid, ...options, query })
+
+    return contents.items
+  }
 
   return {
     fetchContent,
   }
 }
 
 export function useSponsorsCMS() {
-  const runtimeConfig = useRuntimeConfig()
-  const client = createClient({
-    spaceUid: runtimeConfig.newtSpaceUid,
-    token: runtimeConfig.newtCdnToken,
-    apiType: 'cdn',
-  })
-  const appUid = 'vuefes-2022'
-
   const options = { modelUid: 'sponsor' }
   const { fetchContent: getContents } = useCMS<ISponsor>(options)
-  const fetchContent = () =>
-    getContents({ appUid, ...options }).then((sponsors) => {
-      return sponsors
-        .sort((first, second) => {
-          return first.order > second.order ? 1 : -1
-        })
-        .reduce(groupBy('rank'), {})
-    })
-
-  const fetchContentByName = (name: string) =>
-    getContents({ name_en: name }).then((sponsor) => {
-      return sponsor[0]
-    })
+
+  const fetchContent = async () => {
+    try {
+      const sponsors = await getContents()
+
+      if (sponsors.length === 0) {
+        return fallbackSponsorGroups()
+      }
+
+      return normalizeSponsorGroups(
+        sponsors
+          .sort((first, second) => {
+            return first.order > second.order ? 1 : -1
+          })
+          .reduce(groupBy('rank'), {} as Partial<Record<Rank, ISponsor[]>>),
+      )
+    } catch {
+      return fallbackSponsorGroups()
+    }
+  }
+
+  const fetchContentByName = async (name: string) => {
+    try {
+      const sponsor = await getContents({ name_en: name })
+
+      return sponsor[0] ?? findSponsorByName(name)
+    } catch {
+      return findSponsorByName(name)
+    }
+  }
 
   return {
     fetchContent,
@@ -63,3 +115,13 @@ function groupBy<T extends Record<string, any>, P extends keyof T & string>(grou
     return acc
   }
 }
+
+function findSponsorByName(name: string): ISponsor | undefined {
+  for (const rank of sponsorRanks) {
+    const sponsor = fallbackSponsors[rank]?.find((entry) => entry.name_en === name)
+
+    if (sponsor) {
+      return sponsor
+    }
+  }
+}

app/pages/sponsor-sessions/_sponsor/index.vue

@@ -7,14 +7,27 @@ import FooterPageSection from '~/components/FooterPageSection.vue'
 import IchimatsuDividedBar from '~/components/IchimatsuDividedBar.vue'
 import { generalOg, twitterOg } from '~/utils/og.constants'
 import { conferenceTitle, linkUrl } from '~/utils/constants'
+import { sponsors as fallbackSponsors } from '~/utils/newt.constants'
 import { sponsorSessions } from '~/utils/sponsorSessions.constant'
+
+function findFallbackSponsor(name: string) {
+  for (const sponsors of Object.values(fallbackSponsors)) {
+    const sponsor = sponsors.find((entry) => entry.name_en === name)
+
+    if (sponsor) {
+      return sponsor
+    }
+  }
+}
     
 const route = useRoute()
     
 const sessionInfo = computed(() => sponsorSessions.find(session => session.id === route.params.sponsor))
 
 const { fetchContentByName } = useSponsorsCMS()
-const { pending, data: sponsor } = useLazyAsyncData('sponsor-session', () => fetchContentByName(route.params.sponsor))
+const sponsorSlug = String(route.params.sponsor)
+const { data: sponsor } = useLazyAsyncData(`sponsor-session:${sponsorSlug}`, () => fetchContentByName(sponsorSlug))
+const resolvedSponsor = computed(() => sponsor.value ?? findFallbackSponsor(sponsorSlug))
     
 const url = `https://vuefes.jp/2022/sponsor-sessions/${sessionInfo.value.id}`
 const title = `${sessionInfo.value.session.title}（${sessionInfo.value.sponsor}） | ${conferenceTitle}`
@@ -31,7 +44,7 @@ useNuxt2Meta({
 </script>
 
 <template>
-  <div v-if="!pending">
+  <div v-if="resolvedSponsor && sessionInfo">
     <nav-page-section class="mb-12" />
     <PageTitle
       class="mb-10 md:mb-24"
@@ -40,11 +53,11 @@ useNuxt2Meta({
     />
     <div class="aspect-[250/140] mx-auto mb-3 w-40 md:mb-6 md:w-62.5">
       <img
-        :src="sponsor.image.src"
-        :alt="sponsor.name_jp"
+        :src="resolvedSponsor.image.src"
+        :alt="resolvedSponsor.name_jp"
       >
     </div>
-    <p class="mb-8 text-base font-bold text-center text-vue-blue md:mb-15 md:text-22">{{ sponsor.name_jp }}</p>
+    <p class="mb-8 text-base font-bold text-center text-vue-blue md:mb-15 md:text-22">{{ resolvedSponsor.name_jp }}</p>
     <SessionPageSection :session-info="sessionInfo">
       <SpeakerProfiles :speaker-profiles="sessionInfo.speakers" />
     </SessionPageSection>

app/utils/speakers.constants.ts

@@ -458,8 +458,8 @@ export const speakers: ISpeaker[] = [
         <p>なお、本発表は以下の3記事の内容を合わせて再構成したものになる予定です。</p>
         <ul>
         <li><a class="inner-link" target="_blank" rel="noopener" href="https://devblog.thebase.in/entry/2021/12/08/203039">「Storybook と Chromatic でビジュアルリグレッションテストを実施する」</a></li>
-        <li><a class="inner-link" target="_blank" rel="noopener" href-"https://devblog.thebase.in/entry/process-of-introduction-of-chromatic">「ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス」</a></li>
-        <li><a class="inner-link" target="_blank" rel="noopener" href-"https://devblog.thebase.in/entry/typescript-compiler-api-storybook">「TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した」</a></li>
+        <li><a class="inner-link" target="_blank" rel="noopener" href="https://devblog.thebase.in/entry/process-of-introduction-of-chromatic">「ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス」</a></li>
+        <li><a class="inner-link" target="_blank" rel="noopener" href="https://devblog.thebase.in/entry/typescript-compiler-api-storybook">「TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF（Component Story Format）に置換した」</a></li>
         </ul>
       `,
       time: 20,

netlify.toml

@@ -1,3 +1,7 @@
+[build]
+  command = "npm run generate"
+  publish = "dist"
+
 [[redirects]]
   from = "/2022/*"
   to = "/2022/index.html"

nuxt.config.ts

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/2022/favicon.ico' },
-      { rel: 'icon', sizes: '180x180', href: '/icon/apple-touch-icon.png' },
+      { rel: 'icon', sizes: '180x180', href: isProd ? '/2022/icon/apple-touch-icon.png' : '/icon/apple-touch-icon.png' },
       ...preloadImages(),
     ],
     htmlAttrs: {

scripts/renameDir.js

@@ -1,12 +1,89 @@
 const fs = require('fs-extra')
+const vm = require('vm')
+const devalue = require('devalue')
 const { resolve } = require('path')
 
-fs.moveSync(resolve(__dirname, '../dist/'), resolve(__dirname, '../tmp/'))
+const generatedDir = resolve(__dirname, '../.output/public')
+const publishDir = resolve(__dirname, '../dist')
+const yearDir = resolve(publishDir, '2022')
+const nestedYearDir = resolve(generatedDir, '2022')
 
-fs.moveSync(resolve(__dirname, '../tmp/'), resolve(__dirname, '../dist/2022/'))
+if (!fs.existsSync(generatedDir)) {
+  throw new Error(`Missing generated output at ${generatedDir}`)
+}
 
-fs.remove('tmp', (err) => {
-  if (err) {
-    throw err
+fs.removeSync(publishDir)
+fs.ensureDirSync(publishDir)
+
+for (const entry of fs.readdirSync(generatedDir)) {
+  if (entry === '2022') {
+    continue
+  }
+
+  fs.copySync(resolve(generatedDir, entry), resolve(yearDir, entry))
+}
+
+if (fs.existsSync(nestedYearDir)) {
+  fs.copySync(nestedYearDir, yearDir)
+}
+
+const htmlFiles = []
+
+const walkHtmlFiles = dir => {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const entryPath = resolve(dir, entry.name)
+
+    if (entry.isDirectory()) {
+      walkHtmlFiles(entryPath)
+      continue
+    }
+
+    if (entry.isFile() && entry.name.endsWith('.html')) {
+      htmlFiles.push(entryPath)
+    }
+  }
+}
+
+const extractNuxtPayload = filePath => {
+  const html = fs.readFileSync(filePath, 'utf8')
+  const match = html.match(/<script>window\.__NUXT__=(.*?)<\/script>/s)
+
+  if (!match) {
+    return null
+  }
+
+  const sandbox = { window: {} }
+
+  vm.runInNewContext(`window.__NUXT__=${match[1]}`, sandbox, { filename: filePath })
+
+  return sandbox.window.__NUXT__
+}
+
+const toRelativePath = value => value.replace(/^\/+/, '')
+
+const writePayloadFile = ({ routePath, staticAssetsBase, data, fetch, mutations }) => {
+  if (!routePath || !staticAssetsBase) {
+    return
+  }
+
+  const routeDir = routePath === '/' ? '' : toRelativePath(routePath)
+  const staticAssetsDir = resolve(publishDir, toRelativePath(staticAssetsBase))
+  const payloadDir = routeDir ? resolve(staticAssetsDir, routeDir) : staticAssetsDir
+  const payload = devalue({ data, fetch, mutations })
+  const payloadScript = `__NUXT_JSONP__(${JSON.stringify(routePath)}, ${payload});\n`
+
+  fs.ensureDirSync(payloadDir)
+  fs.writeFileSync(resolve(payloadDir, 'payload.js'), payloadScript)
+}
+
+walkHtmlFiles(yearDir)
+
+for (const htmlFile of htmlFiles) {
+  const nuxtPayload = extractNuxtPayload(htmlFile)
+
+  if (!nuxtPayload) {
+    continue
   }
-})
+
+  writePayloadFile(nuxtPayload)
+}