Fixed content collections

src/components/Card.astro

@@ -1,65 +0,0 @@
----
-interface Props {
-  title: string
-  body: string
-  href: string
-}
-
-const { href, title, body } = Astro.props
----
-
-<li class="link-card">
-  <a href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
-    <p>
-      {body}
-    </p>
-  </a>
-</li>
-<style>
-  .link-card {
-    list-style: none;
-    display: flex;
-    padding: 0.25rem;
-    background-color: white;
-    background-image: none;
-    background-size: 400%;
-    border-radius: 0.6rem;
-    background-position: 100%;
-    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  }
-
-  .link-card > a {
-    width: 100%;
-    text-decoration: none;
-    line-height: 1.4;
-    padding: 1rem 1.3rem;
-    border-radius: 0.35rem;
-    color: #111;
-    background-color: white;
-    opacity: 0.8;
-  }
-  h2 {
-    margin: 0;
-    font-size: 1.25rem;
-    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-    color: #444;
-  }
-  .link-card:is(:hover, :focus-within) {
-    background-position: 0;
-    background-image: var(--accent-gradient);
-  }
-  .link-card:is(:hover, :focus-within) h2 {
-    color: rgb(var(--accent));
-  }
-</style>

src/components/questListing.astro

@@ -1,6 +1,6 @@
 ---
 export interface Props {
-  url: string
+  slug: string
   title: string
   questReleaseDate: string
   shortdescription: string
@@ -11,7 +11,8 @@ const options_date: Intl.DateTimeFormatOptions = {
   month: 'long',
   day: '2-digit',
 }
-const { shortdescription, questReleaseDate, url, title } = Astro.props
+const { shortdescription, questReleaseDate, slug, title } = Astro.props
+const url = `/database/${slug}`
 const render_date = new Date(questReleaseDate).toLocaleDateString(
   'en-GB',
   options_date

src/content/config.ts

@@ -0,0 +1,28 @@
+import { z, defineCollection } from 'astro:content'
+
+const taInfo = defineCollection({
+  type: 'data',
+  schema: z.object({
+    info: z.object({
+      title: z.string(),
+      questReleaseDate: z.string(),
+      shortdescription: z.string(),
+      description: z.string(),
+      fightNumber: z.number().default(1),
+    }),
+    data: z.array(
+      z.object({
+        title: z.string(),
+        link: z.string().url(),
+        date: z.string(),
+        servant: z.string(),
+        turns: z.string(),
+        runner: z.string(),
+      })
+    ),
+  }),
+})
+
+export const collections = {
+  taInfoData: taInfo,
+}

src/layouts/taShowcaseLayout.astro

@@ -2,31 +2,29 @@
 import Layout from '../layouts/Layout.astro'
 import BaseSection from '../layouts/baseSection.astro'
 import TACard from '../components/taCard.astro'
-import type { FileData } from '../types/ta'
-import type { GlobAny } from '../types/generic'
+import { plsLoadTAEntry } from '../utils/tools'
 
 export interface Props {
   datafile: string
 }
 
 const { datafile } = Astro.props
-const fulldata = import.meta.glob<GlobAny>(`/src/content/data/*.json`)
-const filecontent: FileData = (
-  await fulldata[`/src/content/data/${datafile}.json`]()
-)['default']
-
-const pagetitle = `${filecontent.info.title} - FGO TA`
-filecontent.data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
+const taEntry = await plsLoadTAEntry(datafile)
+const pagetitle = `${taEntry.info.title} - FGO TA`
+taEntry.data.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))
 ---
 
 <Layout
   title={pagetitle}
   currentpage="database-entry"
-  descriptionOverride={filecontent.info.shortdescription}
+  descriptionOverride={taEntry.info.shortdescription}
 >
   <a href="/database">&lt&lt Back to database</a>
-  <BaseSection title={filecontent.info.title} description={filecontent.info.description}>
-    {filecontent.data.map((item) => <TACard {...item} />)}
+  <BaseSection
+    title={taEntry.info.title}
+    description={taEntry.info.description}
+  >
+    {taEntry.data.map((item) => <TACard {...item} />)}
   </BaseSection>
   <div class="placeholder"></div>
 </Layout>

src/pages/database/[slug].astro

@@ -1,15 +1,10 @@
 ---
+import { getCollection } from 'astro:content';
 import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
-import type { GlobAny } from '../../types/generic'
-import { findSlug } from '../../utils/tools'
 
-export function getStaticPaths() {
-  const fulldata = import.meta.glob<GlobAny>(
-    `/src/content/data/*.json`
-  )
-  const keylist = Object.keys(fulldata).map((item) => findSlug(item)!)
-
-  return keylist.map((slug) => ({ params: { slug } }))
+export async function getStaticPaths() {
+  const fulldata = (await getCollection('taInfoData')).map((data) => data.id)
+  return fulldata.map((slug) => ({ params: { slug } }))
 }
 
 const { slug } = Astro.params

src/pages/database/index.astro

@@ -1,28 +1,20 @@
 ---
+import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro'
 import QuestListing from '../../components/questListing.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
-import { findSlug } from '../../utils/tools'
-import type { GlobFiledata } from '../../types/generic'
 
 const description = 'FGO NA TA Database'
+const fulldata = await getCollection('taInfoData')
 
-const questInfo = []
-const fulldata = import.meta.glob<GlobFiledata>(
-  `/src/content/data/*.json`
+fulldata.sort(
+  (a, b) => Date.parse(b.data.info.questReleaseDate) - Date.parse(a.data.info.questReleaseDate) ||  b.data.info.fightNumber - a.data.info.fightNumber
 )
+const infodata = fulldata.map((quest) => ({
+  ...quest.data.info, 
+  slug: quest.id
+}))
 
-for (const [key, value] of Object.entries(fulldata)) {
-  const url = `/database/${findSlug(key)}`
-  questInfo.push({
-    ...(await value())['default'].info,
-    url: url,
-  })
-}
-
-questInfo.sort(
-  (a, b) => Date.parse(b.questReleaseDate) - Date.parse(a.questReleaseDate) ||  b.fightNumber - a.fightNumber
-)
 ---
 
 <Layout
@@ -31,7 +23,7 @@ questInfo.sort(
   descriptionOverride={description}
 >
   <DatabaseSection title="FGO NA TA Database">
-    {questInfo.map((quest) => <QuestListing {...quest} />)}
+    {infodata.map((quest) => <QuestListing { ...quest } />)}
   </DatabaseSection>
 </Layout>
 

src/utils/tools.ts

@@ -1,9 +1,16 @@
-export function findSlug(filepath: string) {
-  return filepath.match(/(?:.*[\\/])(.+)(?:\.json)/)?.[1]
+import { getEntry } from 'astro:content'
+
+export function plsLoadImage(
+  record: Record<string, () => Promise<{ default: ImageMetadata }>>,
+  path: string
+) {
+  const loadedImage = record[path]?.()
+  if (!loadedImage) throw new Error('Asset was not found:' + path)
+  return loadedImage
 }
 
-export function plsLoadImage(record: Record<string, () => Promise<{default: ImageMetadata}>>, path: string) {
-  const loadedImage = record[path]?.();
-  if (!loadedImage) throw new Error("Asset was not found:" + path);
-  return loadedImage;
+export async function plsLoadTAEntry(key: string) {
+  const filecontent = (await getEntry('taInfoData', key))?.data
+  if (!filecontent) throw new Error(`Datafile ${key} is missing!`)
+  return filecontent
 }