Added getversion step

.forgejo/workflows/build_preview.yml

@@ -1,41 +1,57 @@
 on:
   push:
     tags:
-      - '[0-9]+\.[0-9]+\.[0-9]+pre[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+-pre\.[0-9]+'
 
 jobs:
-  checking:
+  check-tag:
     runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          if test $VERSION != "${{ github.ref_name }}"; then 
+            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
+            exit 1
+          else 
+            echo "Version is: '$VERSION'"; 
+          fi 
+
+  checking:
+    needs: [ check-tag ]
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
     steps:
       - name: Checkout source code
         uses: https://code.forgejo.org/actions/checkout@v3
       - name: Install packages
-        run: npm install
+        run: npm i
       - name: Run astro check (linting +  static analysis)
         run: npm run astro check
 
   build-site:
-    needs: [checking]
+    needs: [ checking ]
     if: success()
     runs-on: dind
     steps:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      - name: Login to Docker Hub
+      - name: Log into Docker Package Registry
         uses: docker/login-action@v3
         with:
           registry: forgejo.neshweb.net
           username: ${{ secrets.FORGEJO_USERNAME }}
           password: ${{ secrets.FORGEJO_TOKEN }}
-      - name: Push to Package Registry
+      - name: Build and push to Docker Package Registry
         uses: docker/build-push-action@v5
         with:
           push: true
           tags: forgejo.neshweb.net/firq/fgo-ta-com-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/fgo-ta-com-website:preview
 
-  publish:
-    needs: [build-site]
+  create-release:
+    needs: [ build-site ]
     if: success()
     runs-on: docker
     steps:
@@ -48,3 +64,19 @@ jobs:
           token: ${{ secrets.FORGEJO_TOKEN }}
           tag: ${{  github.ref_name }}
           prerelease: true
+
+  auto-deploy-dockge:
+    needs: [ build-site ]
+    if: success()
+    runs-on: docker
+    container: forgejo.neshweb.net/firq/dockge-cli:0.1.1-c.2
+    steps:
+      - name: Configure Dockge CLI
+        run: |
+          dockge host '${{ vars.DOCKGE_HOST }}'
+          dockge login --user '${{ secrets.DOCKGE_USER }}' --password '${{ secrets.DOCKGE_CREDENTIAL }}'
+      - name: Check status and redeploy
+        run: |
+          dockge status fgo-ta-com-preview
+          dockge update fgo-ta-com-preview
+          dockge status fgo-ta-com-preview

.forgejo/workflows/build_release.yml

@@ -4,38 +4,54 @@ on:
       - '[0-9]+\.[0-9]+\.[0-9]+'
 
 jobs:
-  checking:
+  check-tag:
     runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          if test $VERSION != "${{ github.ref_name }}"; then 
+            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
+            exit 1
+          else 
+            echo "Version is: '$VERSION'"; 
+          fi 
+
+  checking:
+    needs: [ check-tag ]
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
     steps:
       - name: Checkout source code
         uses: https://code.forgejo.org/actions/checkout@v3
       - name: Install packages
-        run: npm install
+        run: npm i
       - name: Run astro check (linting +  static analysis)
         run: npm run astro check
 
   build-site:
-    needs: [checking]
+    needs: [ checking ]
     if: success()
     runs-on: dind
     steps:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      - name: Login to Docker Hub
+      - name: Log into Docker Package Registry
         uses: docker/login-action@v3
         with:
           registry: forgejo.neshweb.net
           username: ${{ secrets.FORGEJO_USERNAME }}
           password: ${{ secrets.FORGEJO_TOKEN }}
-      - name: Push to Package Registry
+      - name: Build and push to Docker Package Registry
         uses: docker/build-push-action@v5
         with:
           push: true
           tags: forgejo.neshweb.net/firq/fgo-ta-com-website:${{ github.ref_name }}, forgejo.neshweb.net/firq/fgo-ta-com-website:latest
 
-  release:
-    needs: [build-site]
+  create-release:
+    needs: [ build-site ]
     if: success()
     runs-on: docker
     steps:

.forgejo/workflows/linting.yml

@@ -4,13 +4,22 @@ on:
       - '**'
 
 jobs:
-  checking:
+  get-version:
     runs-on: docker
-    container: node:lts
+    steps:
+      - name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      - name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(npm pkg get version --workspaces=false | tr -d \")
+          echo "Version is: '$VERSION'"; 
+  astro-check:
+    runs-on: docker
+    container: forgejo.neshweb.net/ci-docker-images/node-alpine-git:latest
     steps:
       - name: Checkout source code
         uses: https://code.forgejo.org/actions/checkout@v3
       - name: Install packages
-        run: npm install
+        run: npm i
       - name: Run astro check (linting +  static analysis)
         run: npm run astro check

.forgejo/workflows/unlighthouse.yml

@@ -1,18 +1,17 @@
 on:
   push:
     tags:
-      - '[0-9]+\.[0-9]+\.[0-9]+unlighthouse[0-9]+'
-      - '[0-9]+\.[0-9]+\.[0-9]+ulh[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+-ulh\.[0-9]+'
 
 jobs:
   unlighthouse:
     runs-on: docker
-    container: forgejo.neshweb.net/ci-docker-images/unlighthouse:latest
+    container: forgejo.neshweb.net/ci-docker-images/unlighthouse:0.2.1
     steps:
       - name: Checkout repository
         uses: https://code.forgejo.org/actions/checkout@v3 
       - name: Run unlighthouse
-        run: unlighthouse-ci --site "https://preview.fgo-ta.com/"
+        run: unlighthouse-ci --site "https://preview.fgo-ta.com/" --disable-dynamic-sampling
       - name: Prepare artifacts
         run: cp serve.json unlighthouse-reports
       - name: Upload reports

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# Temporary files
+.temp/

Dockerfile

@@ -1,15 +1,16 @@
-FROM node:21.5 AS build
+FROM node:22-alpine AS build
 WORKDIR /site
 COPY . .
 RUN npm i
+RUN npm run astro telemetry disable
 RUN npm run build
 
-FROM forgejo.neshweb.net/ci-docker-images/website-serve:latest AS runtime
+FROM forgejo.neshweb.net/ci-docker-images/website-serve:2 AS runtime
 
 COPY --from=build /site/dist /public
 COPY --from=build /site/serve.json /public/serve.json
 
-ENV PORT 8081
+ENV PORT=8081
 EXPOSE 8081
 
-CMD [ "serve", "public/", "-p", "8081" ]
+CMD serve public/ -p ${PORT}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "fgo-ta-com-website",
   "type": "module",
-  "version": "0.1.16",
+  "version": "0.2.2-pre.11",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,15 +10,16 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astro-community/astro-embed-youtube": "^0.4.3",
-    "@astrojs/check": "^0.3.4",
-    "@astrojs/sitemap": "^3.0.3",
-    "astro": "^4.0.7",
-    "astro-meta-tags": "^0.1.3",
-    "autoprefixer": "^10.4.16",
-    "iconoir": "^7.3.0",
-    "postcss-preset-env": "^9.3.0",
-    "typescript": "^5.3.3"
+    "@astro-community/astro-embed-youtube": "^0.5.2",
+    "@astrojs/check": "^0.8.1",
+    "@astrojs/sitemap": "^3.1.6",
+    "@fontsource/work-sans": "^5.0.18",
+    "astro": "^4.12.2",
+    "astro-meta-tags": "^0.3.0",
+    "autoprefixer": "^10.4.19",
+    "iconoir": "^7.7.0",
+    "postcss-preset-env": "^9.6.0",
+    "typescript": "^5.5.3"
   },
   "browserslist": [
     "last 2 versions",

src/components/genericHero.astro

@@ -0,0 +1,32 @@
+---
+export interface Props {
+  text: string
+}
+const { text } = Astro.props
+---
+
+<div>
+  {text}
+</div>
+
+<style>
+  div {
+    display: flex;
+    width: 100%;
+    max-height: auto;
+    background-color: var(--c-duskgray);
+    text-align: center;
+    justify-content: center;
+    color: white;
+    font-size: 2.75rem;
+    letter-spacing: 0.075em;
+    padding: 2rem 0rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bolder;
+  }
+  @media (min-width: 900px) {
+    div {
+      font-size: 4.5rem;
+    }
+  }
+</style>

src/components/hero.astro

@@ -1,43 +1,47 @@
 ---
 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}`
 ---
 
 <div>
   <span>
-    This site is a WIP project by Firq.
-    <br />
-    In the future, it will be used to catalogue information around FGO TA and the
-    game in general.
+    This site is a project by Firq.
     <br />
     <a href="https://firq.dev" target="_blank" rel="noopener noreferrer"
-      >Feel free to check out my own site.</a
+      >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;
-    background-color: var(--c-duskgray);
+    flex-wrap: nowrap;
+    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/listings/eventListingLine.astro

@@ -0,0 +1,121 @@
+---
+export interface Props {
+  title: string
+  releaseDate: Date
+  shortdescription: string
+  link: string,
+  hlcolor: string,
+}
+
+const options_date: Intl.DateTimeFormatOptions = {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+}
+
+const { releaseDate, title, link, hlcolor } = 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 define:vars={{ hlcolor }}>
+  .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(--hlcolor);
+    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: var(--c-duskgray); /* linear-gradient(175deg, var(--c-duskgray), var(--c-duskgray), var(--c-duskgray), var(--hlcolor)); */ 
+    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: 1rem;
+      width: 1rem;
+      background-color: var(--c-darkpurple);
+      border-style: solid;
+      border-width: 0.25rem;
+      border-color: var(--c-lightgray);
+      border-radius: 40%;
+      transition: transform var(--speed) var(--ease);
+    }
+
+    a:hover > .circle {
+      height: 1.25rem;
+      width: 1.25rem;
+      translate: -0.125rem;
+      margin-right: 4px;
+    }
+
+    a:hover article {
+      border-color: var(--hlcolor);
+      transform: none;
+    }
+
+    article {
+      align-items: flex-start;
+      align-content: flex-start;
+      margin-left: 0.5rem;
+    }
+  }
+</style>

src/components/listings/questListingCard.astro

@@ -0,0 +1,149 @@
+---
+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;
+    }
+  }
+
+  @media (min-width: 1500px) {
+    .circle {
+      display: none;
+    }
+
+    article {
+      margin: unset;
+      flex-wrap: nowrap;
+      min-height: 12rem;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    a {
+      width: 30.5%;
+      align-items: unset;
+    }
+
+    p {
+      text-align: justify;
+      padding: 0rem 0.5rem;
+    }
+
+    h2 {
+      text-align: center;
+    }
+  }
+</style>

src/components/listings/questListingLine.astro

@@ -1,5 +1,6 @@
 ---
 export interface Props {
+  baseurl: string
   slug: string
   title: string
   releaseDate: Date
@@ -12,8 +13,8 @@ const options_date: Intl.DateTimeFormatOptions = {
   day: '2-digit',
 }
 
-const { shortdescription, releaseDate, slug, title } = Astro.props
-const url = `/database/${slug}`
+const { shortdescription, releaseDate, slug, title, baseurl } = Astro.props
+const url = `/${baseurl}/${slug}`
 const render_date = releaseDate.toLocaleDateString(
   'en-GB',
   options_date
@@ -39,8 +40,8 @@ const render_date = releaseDate.toLocaleDateString(
     justify-content: center;
     display: flex;
     text-decoration: none;
-    height: auto;
-    margin: 0.5rem;
+    height: fit-content;
+    margin: 0px 0.5rem;
     width: 100%;
   }
   p {
@@ -81,6 +82,7 @@ const render_date = releaseDate.toLocaleDateString(
 
   a:hover > article {
     transform: scaleY(102.5%) scaleX(101%);
+    transition: transform var(--speed) var(--ease);
   }
 
   @media (min-width: 900px) {
@@ -89,21 +91,32 @@ const render_date = releaseDate.toLocaleDateString(
       position: relative;
       display: flex;
       visibility: visible;
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 40%;
+      height: 1rem;
+      width: 1rem;
       background-color: var(--c-darkpurple);
+      border-style: solid;
+      border-width: 0.25rem;
+      border-color: var(--c-lightgray);
+      border-radius: 40%;
       transition: transform var(--speed) var(--ease);
     }
 
     a:hover > .circle {
-      height: 1.75rem;
-      width: 1.75rem;
+      height: 1.25rem;
+      width: 1.25rem;
       translate: -0.125rem;
-      margin-right: 0.825rem;
+      margin-right: 4px;
+    }
+
+    a:hover article {
+      border-color: var(--c-darkpurple);
+      transform: none;
     }
 
     article {
+      border-style: solid;
+      border-width: 2px;
+      border-color: var(--c-darkergray);
       align-items: flex-start;
       align-content: flex-start;
       margin-left: 0.5rem;

src/components/navbar.astro

@@ -7,7 +7,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
 
 <header>
   <a href="/" rel="noopener noreferrer" aria-label="Home" role="button">
-    <Image src={logo} alt="FGO TA Logo" />
+    <Image src={logo} alt="" loading="eager"/>
     <span class="visually-hidden">Logo</span>
   </a>
   <ul class="desktop">
@@ -18,7 +18,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
     aria-label="Navigation Button"
     tabindex="0"
     onclick="this.focus()"
-    role="navigation"
+    role="button"
   >
     <ul>
       <slot name="mobile" />
@@ -33,12 +33,13 @@ const hamburger_src_url = `url("${hamburger.src}")`
     z-index: 1000;
     position: sticky;
     top: 0px;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-darkergray);
     display: flex;
     height: auto;
     width: 100%;
     align-items: flex-start;
     line-height: 1.5em;
+    border-bottom: 2px solid var(--c-darkpurple) ;
   }
   header > a {
     margin-left: 16px;
@@ -67,7 +68,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
     line-height: 1.5em;
   }
   .mobile > ul {
-    background-color: var(--c-darkgray);
+    background-color: var(--c-darkergray);
     align-items: center;
     flex-wrap: wrap;
     flex-direction: column;
@@ -84,7 +85,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
 
   .mobile {
     display: flex;
-    background-color: var(--c-darkgray);
+    background-color: var(--c-darkergray);
     border: 0px;
     width: 100%;
     height: 64px;
@@ -114,13 +115,14 @@ const hamburger_src_url = `url("${hamburger.src}")`
 
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
+    mask-size: cover;
     background-color: white;
-    width: 2rem;
-    height: 2rem;
+    width: 2.25rem;
+    height: 2.25rem;
     position: static;
     align-self: flex-start;
     margin-right: 1rem;
-    margin-top: 1rem;
+    margin-top: 0.825rem;
   }
 
   @media (min-width: 1140px) {

src/components/smallTitle.astro

@@ -0,0 +1,108 @@
+---
+import '@fontsource/work-sans/800.css'
+import '@fontsource/work-sans/600.css'
+export interface Props {
+  maintext: string
+  subtext: string
+  fadeout?: boolean
+  baseurl?: string
+  returnbutton?: boolean
+}
+const { maintext, subtext, fadeout, baseurl, returnbutton } = Astro.props
+const displayFadeout = fadeout ? "": "display: none"
+const displayBackButton = returnbutton ? "": "display: none"
+---
+
+<div class="wrap">
+  <div class="head">{maintext}</div>
+  <div class="sub">{subtext}</div>
+  <a href=`/${baseurl}` style={displayBackButton}>&lt&lt Back to {baseurl}</a>
+  <div class="fade" style={displayFadeout}></div>
+</div>
+
+<style>
+  a {
+    font-weight: 600;
+    font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif;
+    color: white;
+    margin: 1rem 0px 0px;
+    padding: 0.5rem 0.75rem;
+    text-decoration: none;
+    background-color: var(--c-lightgray);
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: var(--c-lightgray);
+    text-transform: capitalize;
+  }
+
+  a:hover {
+    border-color: var(--c-darkpurple);
+  }
+
+  .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/changes/appends-120.json

@@ -0,0 +1,11 @@
+{
+  "info": {
+    "title": "Appends and Level 120",
+    "releaseDate": "2022-05-23",
+    "shortdescription": "Release of Append Skills and increased level cap of 120 with the Servant Coins Update",
+    "releaseNumber": 1,
+    "type": "event"
+  },
+  "link": "https://fategrandorder.fandom.com/wiki/FGO_Summer_2021_Event_Revival_(US)#Game_Updates",
+  "color": "#d4af37"
+}

src/content/changes/castoria.json

@@ -0,0 +1,11 @@
+{
+  "info": {
+    "title": "Castoria",
+    "releaseDate": "2022-07-04",
+    "shortdescription": "Release of Castoria during the 5rd Anniversary of the game",
+    "releaseNumber": 1,
+    "type": "event"
+  },
+  "link": "https://apps.atlasacademy.io/db/NA/servant/284/",
+  "color": "#0b67fb"
+}

src/content/changes/koyan.json

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

src/content/changes/oberon.json

@@ -0,0 +1,11 @@
+{
+  "info": {
+    "title": "Oberon",
+    "releaseDate": "2023-07-10",
+    "shortdescription": "Release of Oberon during the Lostbelt 6 Conclusion Campaign",
+    "releaseNumber": 1,
+    "type": "event"
+  },
+  "link": "https://apps.atlasacademy.io/db/NA/servant/316/",
+  "color": "#f7281f"
+}

src/content/changes/skadi.json

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

src/content/config.ts

@@ -1,6 +1,7 @@
 import { z, defineCollection } from 'astro:content'
 
-const taEntry = z.object({
+// Individual TA entries
+const entry = z.object({
   title: z.string(),
   link: z.string().url(),
   date: z.string().transform((str) => new Date(str)),
@@ -9,25 +10,48 @@ const taEntry = z.object({
   runner: z.string(),
 })
 
-const taInfo = defineCollection({
+// Individual quest info block
+const quest = z.object({
+  questTitle: z.string(),
+  description: z.string(),
+  data: z.array(entry),
+})
+
+// Basic info block for page
+const info = z.object({
+  title: z.string(),
+  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
+const taData = defineCollection({
   type: 'data',
   schema: z.object({
-    info: z.object({
-      title: z.string(),
-      releaseDate: z.string().transform((str) => new Date(str)),
-      shortdescription: z.string(),
-      releaseNumber: z.number().default(1),
-    }),
-    quests: z.array(
-      z.object({
-        questTitle: z.string(),
-        description: z.string(),
-        data: z.array(taEntry)
-      })
-    ),
+    info: info,
+    quests: z.array(quest),
+  }),
+})
+
+const groupDescription = defineCollection({
+  type: 'data',
+  schema: z.object({ info: info }),
+})
+
+const changes = defineCollection({
+  type: 'data',
+  schema: z.object({
+    info: info,
+    link: z.string().url(),
+    color: z.string(),
   }),
 })
 
 export const collections = {
-  taInfoData: taInfo,
+  taInfoData: taData,
+  teslafest: taData,
+  groups: groupDescription,
+  changes: changes,
 }

src/content/groups/lostbelt-6.json

@@ -0,0 +1,9 @@
+{
+  "info": {
+    "title": "Lostbelt 6 - Avalon le Fae",
+    "releaseDate": "2023-06-06",
+    "shortdescription": "The 6th Lostbelt, the journey into the Fairy Kingdom of Queen Morgan - do you have what it takes for some of the most difficult content of this game?",
+    "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": [
     {
@@ -13,7 +14,7 @@
           "title": "Shishou 4T (No MLB DMG CE)",
           "link": "https://www.youtube.com/watch?v=brz21NKMMsY",
           "date": "2023-12-31",
-          "servant": "shishou",
+          "servant": "shishou_bunny",
           "turns": "4T",
           "runner": "Firq"
         },
@@ -69,7 +70,7 @@
           "title": "Melusine 4T (FLO)",
           "link": "https://www.youtube.com/watch?v=XHjExMEg3vQ",
           "date": "2024-01-01",
-          "servant": "melusine",
+          "servant": "melusine_aoe",
           "turns": "4T",
           "runner": "Zectry"
         },

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": [
     {
@@ -14,7 +15,7 @@
           "title": "Shishou 3T",
           "link": "https://www.youtube.com/watch?v=j1fFbkfYtvo",
           "date": "2024-01-22",
-          "servant": "shishou",
+          "servant": "shishou_bunny",
           "turns": "3T",
           "runner": "Firq"
         },
@@ -22,7 +23,7 @@
           "title": "Shishou 3T (FLO)",
           "link": "https://www.youtube.com/watch?v=Sszw_x7IqVU",
           "date": "2024-01-23",
-          "servant": "shishou",
+          "servant": "shishou_bunny",
           "turns": "3T",
           "runner": "Firq"
         },
@@ -59,7 +60,7 @@
           "runner": "crimsonmage"
         },
         {
-          "title": "Cinder-Eli 3T",
+          "title": "Cindereli 3T",
           "link": "https://www.youtube.com/watch?v=BPc7RTY_c7M",
           "date": "2024-01-21",
           "servant": "cindereli",
@@ -123,7 +124,7 @@
           "runner": "TokuHer0"
         },
         {
-          "title": "Summer BB 3T (FLO, NoCE)",
+          "title": "Summer BB 3T (FLO NoCE)",
           "link": "https://www.youtube.com/watch?v=VAEjvL34hsc",
           "date": "2024-01-21",
           "servant": "bbsummer",
@@ -131,7 +132,7 @@
           "runner": "Felt"
         },
         {
-          "title": "Kijyo Koyo 3T (FLO, NoCE)",
+          "title": "Kijyo Koyo 3T (FLO NoCE)",
           "link": "https://www.youtube.com/watch?v=A5-VRkAx__o",
           "date": "2024-01-19",
           "servant": "koyo",
@@ -193,10 +194,10 @@
           "runner": "inv4der"
         },
         {
-          "title": "Melusine 3T (FLO, NoCE)",
+          "title": "Melusine 3T (FLO NoCE)",
           "link": "https://www.youtube.com/watch?v=OgoteFJL85A",
           "date": "2024-01-21",
-          "servant": "melusine",
+          "servant": "melusine_aoe",
           "turns": "3T",
           "runner": "TokuHer0"
         },
@@ -204,7 +205,7 @@
           "title": "Melusine 3T (FLO)",
           "link": "https://www.youtube.com/watch?v=PTtm_c7F5Ro",
           "date": "2024-01-18",
-          "servant": "melusine",
+          "servant": "melusine_aoe",
           "turns": "3T",
           "runner": "Felt"
         },
@@ -241,7 +242,7 @@
           "runner": "Ray"
         },
         {
-          "title": "Okita Alter 3T (FLO, NoCEs)",
+          "title": "Okita Alter 3T (FLO NoCEs)",
           "link": "https://www.youtube.com/watch?v=7Htl-Ld6f-Q",
           "date": "2024-01-21",
           "servant": "okitaalter",
@@ -297,7 +298,7 @@
           "runner": "xy sunder"
         },
         {
-          "title": "Taira 5T (FLO, BCE)",
+          "title": "Taira 5T (FLO BCE)",
           "link": "https://www.youtube.com/watch?v=A5F8Rb26tNY",
           "date": "2024-01-22",
           "servant": "taira",
@@ -305,7 +306,7 @@
           "runner": "Felt"
         },
         {
-          "title": "Melt 5T (FLO, NoCE)",
+          "title": "Melt 5T (FLO NoCE)",
           "link": "https://www.youtube.com/watch?v=-WRocbYbzpE",
           "date": "2024-01-23",
           "servant": "melt",
@@ -313,7 +314,7 @@
           "runner": "xy sunder"
         },
         {
-          "title": "MHXA 5T (FLO, NoCE)",
+          "title": "MHXA 5T (FLO NoCE)",
           "link": "https://www.youtube.com/watch?v=qFESCN59RFA",
           "date": "2024-01-22",
           "servant": "mhxa",

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": [
     {
@@ -18,6 +19,14 @@
           "turns": "7T",
           "runner": "Firq"
         },
+        {
+          "title": "Summer Skadi 7T",
+          "link": "https://www.youtube.com/watch?v=7HPLGs_LPzs",
+          "date": "2024-07-25",
+          "servant": "summerskadi",
+          "turns": "7T",
+          "runner": "Firq"
+        },
         {
           "title": "Shishou 7T",
           "link": "https://www.youtube.com/watch?v=nYV4jwgpuR0",

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

@@ -1,13 +1,14 @@
 {
   "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
+    "releaseNumber": 1,
+    "type": "quest"
   },
   "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": [
         {
@@ -54,7 +55,7 @@
           "title": "Shishou 3T",
           "link": "https://www.youtube.com/watch?v=E8fjEYFqrWI",
           "date": "2023-07-12",
-          "servant": "shishou",
+          "servant": "shishou_bunny",
           "turns": "3T",
           "runner": "Firq"
         },

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

@@ -1,20 +1,21 @@
 {
   "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
+    "releaseNumber": 2,
+    "type": "quest"
   },
   "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": [
         {
           "title": "Shishou 4T (No Castoria)",
           "link": "https://www.youtube.com/watch?v=WrHudtdfivA",
           "date": "2023-07-19",
-          "servant": "shishou",
+          "servant": "shishou_bunny",
           "turns": "4T",
           "runner": "Firq"
         },