Redesign

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "fgo-ta-com-website",
-  "version": "0.2.1",
+  "version": "0.2.2-pre.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fgo-ta-com-website",
-      "version": "0.2.1",
+      "version": "0.2.2-pre.1",
       "dependencies": {
         "@astro-community/astro-embed-youtube": "^0.4.3",
         "@astrojs/check": "^0.5.10",
         "@astrojs/sitemap": "^3.1.4",
+        "@fontsource/work-sans": "^5.0.18",
         "astro": "^4.7.0",
         "astro-meta-tags": "^0.1.3",
         "autoprefixer": "^10.4.16",
@@ -1746,6 +1747,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@fontsource/work-sans": {
+      "version": "5.0.18",
+      "resolved": "https://registry.npmjs.org/@fontsource/work-sans/-/work-sans-5.0.18.tgz",
+      "integrity": "sha512-kFZEEPfWhALOweNTc+J60Jnok1bNuKC/L6wbM05f716pZFU9AAlKl0zmOYbJSkY4yhpHsYDL/X7A4zF9vPpE2g=="
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.3",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fgo-ta-com-website",
   "type": "module",
-  "version": "0.2.2-pre.1",
+  "version": "0.2.2-pre.2",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -13,6 +13,7 @@
     "@astro-community/astro-embed-youtube": "^0.4.3",
     "@astrojs/check": "^0.5.10",
     "@astrojs/sitemap": "^3.1.4",
+    "@fontsource/work-sans": "^5.0.18",
     "astro": "^4.7.0",
     "astro-meta-tags": "^0.1.3",
     "autoprefixer": "^10.4.16",

src/components/hero.astro

@@ -1,5 +1,11 @@
 ---
 import packagejson from '../../package.json'
+export interface Props {
+  fadeout?: boolean
+}
+const { fadeout } = Astro.props
+const display = fadeout ? "": "display: none"
+
 const version = packagejson.version
 const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/tag/${version}`
 ---
@@ -8,36 +14,34 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
   <span>
     This site is a project by Firq.
     <br />
-    In the future, it will be used to catalogue information around FGO TA and the
-    game in general.
-    <br />
     <a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
       >Feel free to check out my personal site.</a
     >
     <br />
     <span class="version"
-      >( Website version: <a
+      >Website version: <a
         href={release}
         target="_blank"
         rel="noopener noreferrer">{version}</a
-      > )</span
+      ></span
     >
   </span>
-  <slot />
+  <div class="fade" style={display}></div>
 </div>
 
 <style>
   div {
     display: flex;
     width: 100%;
-    max-height: auto;
+    flex-wrap: nowrap;
-    background-color: var(--c-duskgray);
+    flex-flow: column;
+    background-color: var(--c-darkergray);
     text-align: center;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5em;
-    padding: 2rem 0rem;
+    padding: 2rem 0rem 0rem 0rem;
   }
   a {
     text-align: center;
@@ -45,7 +49,14 @@ const release = `https://forgejo.neshweb.net/Firq/fgo-ta-com-website/releases/ta
     color: var(--c-darkpurple);
   }
 
+  .fade {
+    margin-top: 3rem;
+    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    height: 2.5rem;
+    width: 100%;
+  }
+
   .version {
-    font-size: 0.7em;
+    font-size: 0.65em;
   }
 </style>

src/components/smallTitle.astro

@@ -0,0 +1,95 @@
+---
+import '@fontsource/work-sans/800.css'
+import '@fontsource/work-sans/600.css'
+export interface Props {
+  maintext: string
+  subtext: string
+  fadeout?: boolean
+  baseurl?: string
+}
+const { maintext, subtext, fadeout, baseurl } = Astro.props
+const display = fadeout ? "": "display: none"
+---
+
+<div class="wrap">
+  <div class="head">{maintext}</div>
+  <div class="sub">{subtext}</div>
+  <a href=`/${baseurl}`>&lt&lt Back to database</a>
+  <div class="fade" style={display}></div>
+</div>
+
+<style>
+  a {
+    font-weight: 600;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
+    color: white;
+    padding: 0.5rem 0px;
+    text-decoration: none;
+  }
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+    color: var(--c-lighter);
+    background-color: var(--c-darkergray);
+  }
+
+  .fade {
+    margin-top: 2rem;
+    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  .head {
+    hyphens: auto;
+    padding-top: 2rem;
+    font-size: 2rem;
+    font-weight: 800;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
+      sans-serif;
+  }
+
+  .sub {
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
+      sans-serif;
+  }
+
+  .head {
+    color: var(--c-darkpurple);
+  }
+
+  @supports (background-clip: text) {
+    .head {
+      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .head {
+      hyphens: none;
+      font-size: 3rem;
+    }
+    .sub {
+      font-size: 0.75rem;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .head {
+      font-size: 4rem;
+    }
+    .sub {
+      font-size: 1rem;
+    }
+  }
+</style>

src/components/title.astro

@@ -0,0 +1,84 @@
+---
+import '@fontsource/work-sans/800.css'
+export interface Props {
+  maintext: string
+  subtext: string
+  fadeout?: boolean
+}
+const { maintext, subtext, fadeout } = Astro.props
+const display = fadeout ? "": "display: none"
+---
+
+<div class="wrap">
+  <div class="head">{maintext}</div>
+  <div class="sub">{subtext}</div>
+  <div class="fade" style={display}></div>
+</div>
+
+<style>
+  .wrap {
+    position: relative;
+    width: 100%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+    color: var(--c-lighter);
+    background-color: var(--c-darkergray);
+  }
+
+  .fade {
+    margin-top: 2rem;
+    background: linear-gradient(to bottom, transparent, var(--c-lightgray));
+    height: 2.5rem;
+    width: 100%;
+  }
+
+  .head {
+    hyphens: auto;
+    padding-top: 2rem;
+    font-size: 4rem;
+    font-weight: 800;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
+      sans-serif;
+  }
+
+  .sub {
+    font-size: 1.5rem;
+    font-weight: 800;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
+      sans-serif;
+  }
+
+  .head {
+    color: var(--c-darkpurple);
+  }
+
+  @supports (background-clip: text) {
+    .head {
+      background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
+      background-clip: text;
+      color: transparent;
+    }
+  }
+
+  @media (min-width: 620px) {
+    .head {
+      hyphens: none;
+      font-size: 6rem;
+    }
+    .sub {
+      font-size: 1.5rem;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    .head {
+      font-size: 8rem;
+    }
+    .sub {
+      font-size: 2rem;
+    }
+  }
+</style>

src/content/config.ts

@@ -14,7 +14,7 @@ const entry = z.object({
 const quest = z.object({
   questTitle: z.string(),
   description: z.string(),
-  data: z.array(entry)
+  data: z.array(entry),
 })
 
 // Basic info block for page
@@ -34,7 +34,13 @@ const taData = defineCollection({
   }),
 })
 
+const groupDescription = defineCollection({
+  type: 'data',
+  schema: z.object({ info: info }),
+})
+
 export const collections = {
   taInfoData: taData,
   teslafest: taData,
+  groups: groupDescription,
 }

src/content/groups/lostbelt-6.json

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

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

@@ -1,13 +1,13 @@
 {
   "info": {
-    "title": "[Lostbelt 6] Albion",
+    "title": "Albion",
     "releaseDate": "2023-07-10",
     "shortdescription": "Albion shows up with a new mechanic, but will it be enough?",
     "releaseNumber": 1
   },
   "quests": [
     {
-      "questTitle": "[Lostbelt 6] Albion",
+      "questTitle": "Albion",
       "description": "Albion shows up with a new mechanic, but will it be enough? No, because the mechanics are only seen as a small challenge and were quickly rendered a sideeffect during this quest - to the dismay of Melusine",
       "data": [
         {

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

@@ -1,13 +1,13 @@
 {
   "info": {
-    "title": "[Lostbelt 6] Cernunnos",
+    "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
   },
   "quests": [
     {
-      "questTitle": "[Lostbelt 6] Cernunnos",
+      "questTitle": "Cernunnos",
       "description": "One of FGOs most notorious boss fights due to up to 100% special defense, strong DoT damage and powerful field effects - and still, the TA community prevailed and created some of the most amazing runs of all time",
       "data": [
         {

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

@@ -1,13 +1,13 @@
 {
   "info": {
-    "title": "[Lostbelt 6] Queen Morgan",
+    "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
   },
   "quests": [
     {
-      "questTitle": "[Lostbelt 6] Queen Morgan",
+      "questTitle": "Queen Morgan",
       "description": "The fight against the Lostbelt 6 Queen as the conclusion of LB 6 Part 2 - Interesting field effects and a berserker enemy were making this fight interesting, as Morgan is hitting like an actual truck, meaning support cycling was a lot easier than usual.",
       "data": [
         {

src/content/teslafest/eq-2021-green-comet.json

@@ -2,13 +2,13 @@
   "info": {
     "title": "The Green Comet",
     "releaseDate": "2024-03-21",
-    "shortdescription": "When Achillis decends, he brings swith him destruction ...",
+    "shortdescription": "When Achillis decends, he brings with him destruction ...",
     "releaseNumber": 6
   },
   "quests": [
     {
       "questTitle": "The Green Comet",
-      "description": "When Achillis decends, he brings swith him destruction - time to teach him that this is a bad thing!",
+      "description": "When Achillis decends, he brings with him destruction - time to teach him that this is a bad thing!",
       "data": [
         {
           "title": "Kama 2T",

src/layouts/Layout.astro

@@ -103,6 +103,8 @@ const mapped_navdata = navdata.map((item) => ({
     --c-lighterpurple: #c98fff;
     --c-purplepink: #c105ff;
     --c-darkergray: #1b1b1b;
+    --c-reddish: #ff0077;
+    --c-lighter: #eee;
   }
   body {
     background: var(--c-lightgray);

src/layouts/databaseSection.astro

@@ -1,13 +1,15 @@
 ---
 export interface Props {
   title: string
+  titlehidden?: boolean
 }
 
-const { title } = Astro.props
+const { title, titlehidden } = Astro.props
+const display = titlehidden ? "display: none" : ""
 ---
 
 <section>
-  <h1>{title}</h1>
+  <h1 style={display}>{title}</h1>
   <div class="wrapper">
     <div class="line"></div>
     <slot />

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

@@ -0,0 +1,115 @@
+---
+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 SmallTitle from '../../components/smallTitle.astro'
+
+interface store {
+  slug: string
+  group: boolean
+  questinfo:
+    | undefined
+    | {
+        slug: string
+        info: {
+          title: string
+          releaseDate: Date
+          shortdescription: string
+          releaseNumber: number
+        }
+      }[]
+  pageinfo:
+    | undefined
+    | {
+        title: string
+        shortdescription: string
+      }
+}
+
+export async function getStaticPaths() {
+  const fulldata = await getCollection('taInfoData')
+  const slugdata: store[] = fulldata.map((data) => {
+    return {
+      slug: data.id,
+      group: false,
+      questinfo: undefined,
+      pageinfo: undefined,
+    }
+  })
+
+  const groupdata = await getCollection('groups')
+  const groups: store[] = groupdata.map((data) => {
+    return {
+      slug: data.id,
+      group: true,
+      questinfo: undefined,
+      pageinfo: undefined,
+    }
+  })
+
+  const full = slugdata.concat(groups as any)
+  full.map((data) => {
+    if (data.group) {
+      const coll = fulldata.filter((d) => d.id.startsWith(data.slug))
+      data.questinfo = coll.map((d) => {
+        return { slug: d.id, info: d.data.info }
+      })
+      data.questinfo.sort(
+        (a, b) =>
+          b.info.releaseDate.valueOf() - a.info.releaseDate.valueOf() ||
+          b.info.releaseNumber - a.info.releaseNumber
+      )
+      const page = groupdata.find((d) => d.id === data.slug)
+      data.pageinfo = page?.data.info
+    }
+  })
+
+  return full.map((data) => ({
+    params: { slug: data.slug },
+    props: {
+      key: data.slug,
+      group: data.group,
+      questinfo: data.questinfo,
+      pageinfo: data.pageinfo,
+    },
+  }))
+}
+
+const { key, group, questinfo, pageinfo } = Astro.props
+---
+
+{
+  !group && (
+    <TaShowcaseLayout
+      collection="taInfoData"
+      collectionKey={key}
+      baseurl="database"
+    />
+  )
+}
+{
+  group && (
+    <Layout
+      title={`${pageinfo!.title} - TA Database - FGO TA`}
+      currentpage="database"
+      descriptionOverride={pageinfo!.shortdescription}
+    >
+      <SmallTitle
+        maintext={pageinfo!.title}
+        subtext={pageinfo!.shortdescription}
+        fadeout={true}
+        baseurl="database"
+      />
+      <DatabaseSection title="" titlehidden={true}>
+        {questinfo!.map((quest) => (
+          <QuestListing
+            {...{ ...quest.info, slug: quest.slug }}
+            baseurl="database"
+          />
+        ))}
+      </DatabaseSection>
+    </Layout>
+  )
+}

src/pages/database/[slug].astro

@@ -1,13 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import TaShowcaseLayout from '../../layouts/taShowcaseLayout.astro'
-
-export async function getStaticPaths() {
-  const fulldata = (await getCollection('taInfoData')).map((data) => data.id)
-  return fulldata.map((slug) => ({ params: { slug } }))
-}
-
-const { slug } = Astro.params
----
-
-<TaShowcaseLayout collection="taInfoData" collectionKey={slug} baseurl="database"/>

src/pages/database/index.astro

@@ -3,11 +3,19 @@ import { getCollection } from 'astro:content';
 import Layout from '../../layouts/Layout.astro'
 import QuestListing from '../../components/questListing.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
+import Title from '../../components/title.astro';
 
 const description = 'FGO NA TA Database'
 const fulldata = await getCollection('taInfoData') 
+const groups = await getCollection('groups')
+let combined = fulldata
 
-fulldata.sort(
+for (const group of groups) {
+  combined = combined.filter(data => !data.id.startsWith(group.id))
+}
+combined = combined.concat(groups as any)
+
+combined.sort(
   (a, b) => b.data.info.releaseDate.valueOf()  - a.data.info.releaseDate.valueOf()  ||  b.data.info.releaseNumber - a.data.info.releaseNumber
 )
 
@@ -18,8 +26,9 @@ fulldata.sort(
   currentpage="database"
   descriptionOverride={description}
 >
-  <DatabaseSection title="NA Runs">
+  <Title maintext='TA DATA&shy;BASE' subtext='A mostly up-to-date list of NA TA runs' fadeout={true}/>
-    {fulldata.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
+  <DatabaseSection title="NA Runs" titlehidden={true}>
+    {combined.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="database" />)}
   </DatabaseSection>
 </Layout>
 

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Hero from '../components/hero.astro'
+import Title from '../components/title.astro'
 
 const description =
   'This site is a WIP project by Firq. In the future, it will be used to catalogue information around FGO TA and the game in general.'
@@ -11,7 +12,8 @@ const description =
   currentpage="home"
   descriptionOverride={description}
 >
-  <Hero />
+  <Title maintext='FGO NA TA DATA&shy;BASE' subtext='The all-in-one lookup for your all TA needs'/>
+  <Hero fadeout={true}/>
 </Layout>
 
 <style></style>

src/pages/teslafest/index.astro

@@ -4,6 +4,7 @@ import Layout from '../../layouts/Layout.astro'
 import QuestListing from '../../components/questListing.astro'
 import DatabaseSection from '../../layouts/databaseSection.astro'
 import GenericHero from '../../components/genericHero.astro';
+import Title from '../../components/title.astro';
 
 const description = 'One of the most anticipated events of 2024 - Teslafest. Were the two weeks of time enough for all those quests, even with a parallel lottery?'
 const fulldata = await getCollection('teslafest')
@@ -25,7 +26,7 @@ const eq_2020 = fulldata.filter((value) => value.id.startsWith("eq-2020"))
   currentpage="teslafest"
   descriptionOverride={description}
 >
-  <GenericHero text="TESLAFEST"></GenericHero>
+  <Title maintext='TESLA&shy;FEST' subtext='' fadeout={true}/>
   <DatabaseSection title="Challenge Quest">
     {cq.map((quest) => <QuestListing { ...{...quest.data.info, slug: quest.id} } baseurl="teslafest" />)}
   </DatabaseSection>