Redesign Part 2

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fgo-ta-com-website",
   "type": "module",
-  "version": "0.2.2-pre.2",
+  "version": "0.2.2-pre.3",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/listings/eventListingLine.astro

@@ -0,0 +1,116 @@
+---
+export interface Props {
+  title: string
+  releaseDate: Date
+  shortdescription: string
+  link: string
+}
+
+const options_date: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+}
+
+const { shortdescription, releaseDate, title, link } = Astro.props
+const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
+---
+
+<a href={link} target="_blank" rel="noopener noreferrer">
+  <div class="circle"></div>
+  <article>
+    <h2>{title}</h2>
+    <h3>{render_date}</h3>
+    <p>{shortdescription}</p>
+  </article>
+</a>
+
+<style>
+  .circle {
+    display: none;
+  }
+
+  a {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    text-decoration: none;
+    height: fit-content;
+    margin: 0px 0.5rem;
+    width: 100%;
+  }
+  p {
+    color: white;
+    text-align: left;
+    font-size: 1em;
+    margin: 0px 0.5em;
+  }
+  article > h2 {
+    margin: 0px 0.5rem;
+    color: var(--c-darkpurple);
+    font-size: 1.2rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  article > h3 {
+    margin: 0px 0.5rem;
+    color: white;
+    font-size: 1rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  article {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-color: var(--c-duskgray);
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    min-height: 100%;
+    border-radius: 1.25rem;
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--c-darkergray);
+  }
+
+  a:hover > article {
+    transform: scaleY(102.5%) scaleX(101%);
+    transition: transform var(--speed) var(--ease);
+  }
+
+  @media (min-width: 900px) {
+    .circle {
+      margin: 1rem 0.5rem 1rem 0.5rem;
+      position: relative;
+      display: flex;
+      visibility: visible;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 40%;
+      background-color: var(--c-darkpurple);
+      transition: transform var(--speed) var(--ease);
+    }
+
+    a:hover > .circle {
+      height: 1.75rem;
+      width: 1.75rem;
+      translate: -0.125rem;
+      margin-right: 0.825rem;
+    }
+
+    a:hover article {
+      border-color: var(--c-darkpurple);
+    }
+
+    article {
+      align-items: flex-start;
+      align-content: flex-start;
+      margin-left: 0.5rem;
+    }
+  }
+</style>

src/components/listings/questListingLine.astro

@@ -0,0 +1,121 @@
+---
+export interface Props {
+  baseurl: string
+  slug: string
+  title: string
+  releaseDate: Date
+  shortdescription: string
+}
+
+const options_date: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+}
+
+const { shortdescription, releaseDate, slug, title, baseurl } = Astro.props
+const url = `/${baseurl}/${slug}`
+const render_date = releaseDate.toLocaleDateString(
+  'en-GB',
+  options_date
+)
+---
+
+<a href={url} rel="noopener noreferrer">
+  <div class="circle"></div>
+  <article>
+    <h2>{title}</h2>
+    <h3>{render_date}</h3>
+    <p>{shortdescription}</p>
+  </article>
+</a>
+
+<style>
+  .circle {
+    display: none;
+  }
+
+  a {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    text-decoration: none;
+    height: auto;
+    margin: 0.5rem;
+    width: 100%;
+  }
+  p {
+    color: white;
+    text-align: left;
+    font-size: 1.1em;
+    margin: 0.5em;
+  }
+  article > h2 {
+    margin: 0.3rem 0.5rem;
+    color: var(--c-darkpurple);
+    font-size: 1.5rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  article > h3 {
+    margin: 0.2em 0.5rem;
+    color: white;
+    font-size: 1rem;
+    line-height: normal;
+    text-decoration: none;
+  }
+  article {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    background-color: var(--c-darkergray);
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    min-height: 100%;
+    border-radius: 1.25rem;
+  }
+
+  a:hover > article {
+    transform: scaleY(102.5%) scaleX(101%);
+    transition: transform var(--speed) var(--ease);
+  }
+
+  @media (min-width: 900px) {
+    .circle {
+      margin: 1rem 0.5rem 1rem 0.5rem;
+      position: relative;
+      display: flex;
+      visibility: visible;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 40%;
+      background-color: var(--c-darkpurple);
+      transition: transform var(--speed) var(--ease);
+    }
+
+    a:hover > .circle {
+      height: 1.75rem;
+      width: 1.75rem;
+      translate: -0.125rem;
+      margin-right: 0.825rem;
+    }
+
+    a:hover article {
+      border-color: var(--c-darkpurple);
+    }
+
+    article {
+      border-style: solid;
+      border-width: 2px;
+      border-color: var(--c-darkergray);
+      align-items: flex-start;
+      align-content: flex-start;
+      margin-left: 0.5rem;
+    }
+  }
+</style>

src/content/changes/koyan.json

@@ -0,0 +1,10 @@
+{
+  "info": {
+    "title": "Koyanskaya of Light",
+    "releaseDate": "2023-07-03",
+    "shortdescription": "Release of Koyanskaya of Light during 6th Anniversary of the game",
+    "releaseNumber": 1,
+    "type": "event"
+  },
+  "link": "https://apps.atlasacademy.io/db/NA/servant/314/"
+}

src/content/changes/skadi.json

@@ -0,0 +1,10 @@
+{
+  "info": {
+    "title": "Scathach-Skadi",
+    "releaseDate": "2020-07-06",
+    "shortdescription": "Release of Scathach-Skadi during 3rd Anniversary of the game",
+    "releaseNumber": 1,
+    "type": "event"
+  },
+  "link": "https://apps.atlasacademy.io/db/NA/servant/215/"
+}

src/content/config.ts

@@ -23,6 +23,7 @@ const info = z.object({
   releaseDate: z.string().transform((str) => new Date(str)),
   shortdescription: z.string(),
   releaseNumber: z.number().default(1),
+  type: z.enum(["quest", "event", "group"]).default("quest")
 })
 
 // Combined ta data collection schema
@@ -39,8 +40,17 @@ const groupDescription = defineCollection({
   schema: z.object({ info: info }),
 })
 
+const changes = defineCollection({
+  type: 'data',
+  schema: z.object({
+    info: info,
+    link: z.string().url()
+  }),
+})
+
 export const collections = {
   taInfoData: taData,
   teslafest: taData,
   groups: groupDescription,
+  changes: changes,
 }

src/content/groups/lostbelt-6.json

@@ -1,8 +1,9 @@
 {
   "info": {
     "title": "Lostbelt 6",
-    "releaseDate": "2023-07-10",
+    "releaseDate": "2023-06-06",
     "shortdescription": "Lostbelt 6",
-    "releaseNumber": 1
+    "releaseNumber": 1,
+    "type": "group"
   }
 }

src/content/taInfoData/beast4l.json

@@ -2,7 +2,8 @@
   "info": {
     "title": "Beast IV:L",
     "releaseDate": "2023-12-26",
-    "shortdescription": "An interesting conclusion to Tunguska to say the least"
+    "shortdescription": "An interesting conclusion to Tunguska to say the least",
+    "type": "quest"
   },
   "quests": [
     {

src/content/taInfoData/case-files-rerun.json

@@ -3,7 +3,8 @@
     "title": "Case Files Rerun 2024",
     "releaseDate": "2024-01-10",
     "shortdescription": "The rerun of the collaboration event with the Case Files franchise - and the return of old challenges as well as a new challenge quest.",
-    "releaseNumber": 1
+    "releaseNumber": 1,
+    "type": "quest"
   },
   "quests": [
     {

src/content/taInfoData/devilish-bodhisattva.json

@@ -1,9 +1,10 @@
 {
   "info": {
     "title": "Devilish Bodhisattva",
-    "releaseDate": "2022-06-21",
+    "releaseDate": "2019-04-23",
     "shortdescription": "One of the most infamous fights in FGO, Full Power Beast III:R",
-    "releaseNumber": 1
+    "releaseNumber": 1,
+    "type": "quest"
   },
   "quests": [
     {

src/content/taInfoData/lostbelt-6/albion.json

@@ -3,7 +3,8 @@
     "title": "Albion",
     "releaseDate": "2023-07-10",
     "shortdescription": "Albion shows up with a new mechanic, but will it be enough?",
-    "releaseNumber": 1
+    "releaseNumber": 1,
+    "type": "quest"
   },
   "quests": [
     {

src/content/taInfoData/lostbelt-6/cernunnos.json

@@ -3,7 +3,8 @@
     "title": "Cernunnos",
     "releaseDate": "2023-07-10",
     "shortdescription": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects",
-    "releaseNumber": 2
+    "releaseNumber": 2,
+    "type": "quest"
   },
   "quests": [
     {

src/content/taInfoData/lostbelt-6/morgan.json

@@ -3,7 +3,8 @@
     "title": "Queen Morgan",
     "releaseDate": "2023-06-20",
     "shortdescription": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2",
-    "releaseNumber": 1
+    "releaseNumber": 1,
+    "type": "quest"
   },
   "quests": [
     {

src/layouts/databaseSection.astro

@@ -2,10 +2,11 @@
 export interface Props {
   title: string
   titlehidden?: boolean
+  displayLine?: boolean
 }
-
+const { title, titlehidden, displayLine } = Astro.props
-const { title, titlehidden } = Astro.props
 const display = titlehidden ? "display: none" : ""
+const line = displayLine ? "flex" : "none"
 ---
 
 <section>
@@ -17,7 +18,7 @@ const display = titlehidden ? "display: none" : ""
   </div>
 </section>
 
-<style>
+<style define:vars={{ line }}>
   section {
     padding-left: 0.25em;
     padding-right: 0.25em;
@@ -106,10 +107,14 @@ const display = titlehidden ? "display: none" : ""
       padding-bottom: unset;
     }
     .drop {
-      display: none;
+      display: var(--line);
+      margin-left: 2rem;
     }
     .line {
-      display: none;
+      display: var(--line);
+      margin-left: 2.6rem;
+      height: calc(100% + 4rem);
+      translate: unset;
     }
     h1 {
       margin-left: 15rem;

src/pages/database/[...slug].astro

@@ -3,7 +3,7 @@ import { getCollection } from 'astro:content'
 import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
 import Layout from '../../layouts/Layout.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
-import QuestListing from '../../components/questListing.astro'
+import QuestListing from '../../components/listings/questListingCard.astro'
 import SmallTitle from '../../components/smallTitle.astro'
 
 interface store {

src/pages/database/index.astro

@@ -1,24 +1,27 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from 'astro:content'
 import Layout from '../../layouts/Layout.astro'
-import QuestListing from '../../components/questListing.astro'
+import QuestListing from '../../components/listings/questListingLine.astro'
+import EventListing from '../../components/listings/eventListingLine.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
-import Title from '../../components/title.astro';
+import Title from '../../components/title.astro'
 
 const description = 'FGO NA TA Database'
 const fulldata = await getCollection('taInfoData')
 const groups = await getCollection('groups')
+const changes = await getCollection('changes')
 let combined = fulldata
 
 for (const group of groups) {
-  combined = combined.filter(data => !data.id.startsWith(group.id))
+  combined = combined.filter((data) => !data.id.startsWith(group.id))
 }
-combined = combined.concat(groups as any)
+combined = combined.concat(groups as any).concat(changes as any)
 
 combined.sort(
-  (a, b) => b.data.info.releaseDate.valueOf()  - a.data.info.releaseDate.valueOf()  ||  b.data.info.releaseNumber - a.data.info.releaseNumber
+  (a, b) =>
+    b.data.info.releaseDate.valueOf() - a.data.info.releaseDate.valueOf() ||
+    b.data.info.releaseNumber - a.data.info.releaseNumber
 )
-
 ---
 
 <Layout
@@ -26,9 +29,31 @@ combined.sort(
   currentpage="database"
   descriptionOverride={description}
 >
-  <Title maintext='TA DATA&shy;BASE' subtext='A mostly up-to-date list of NA TA runs' fadeout={true}/>
+  <Title
-  <DatabaseSection title="NA Runs" titlehidden={true}>
+    maintext="TA DATA­BASE"
-    {combined.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
+    subtext="A mostly up-to-date list of NA TA runs"
+    fadeout={true}
+  />
+  <DatabaseSection title="NA Runs" titlehidden={true} displayLine={true}>
+    {
+      combined.map((quest) => {
+        if (['quest', 'group'].includes(quest.data.info.type)) {
+          return (
+            <QuestListing
+              {...{ ...quest.data.info, slug: quest.id }}
+              baseurl="database"
+            />
+          )
+        } else {
+          return (
+            <EventListing
+              {...{ ...quest.data.info, slug: quest.id }}
+              link={(quest.data as any).link}
+            />
+          )
+        }
+      })
+    }
   </DatabaseSection>
 </Layout>
 

src/pages/teslafest/index.astro

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro'
-import QuestListing from '../../components/questListing.astro'
+import QuestListing from '../../components/listings/questListingCard.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
 import GenericHero from '../../components/genericHero.astro';
 import Title from '../../components/title.astro';