Merge pull request 'Mergin dev - new header, updated servants' (#29) from dev into main

Reviewed-on: #29

.forgejo/workflows/build_preview.yml

@@ -40,13 +40,14 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: actions/forgejo-release@v1
+        uses: https://code.forgejo.org/actions/forgejo-release@v1
         with:
           direction: upload
           url: https://forgejo.neshweb.net
           release-dir: release
           token: ${{ secrets.FORGEJO_TOKEN }}
           tag: ${{  github.ref_name }}
+          prerelease: true
 
   # doesn't work atm
   # unlighthouse:

.forgejo/workflows/build_release.yml

@@ -40,7 +40,7 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: actions/forgejo-release@v1
+        uses: https://code.forgejo.org/actions/forgejo-release@v1
         with:
           direction: upload
           url: https://forgejo.neshweb.net

.forgejo/workflows/unlighthouse.yml

@@ -23,6 +23,7 @@ jobs:
 
   deploy-unlighthouse-files:
     needs: [ unlighthouse ]
+    if: success()
     runs-on: docker
     env: 
       DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
@@ -67,6 +68,7 @@ jobs:
 
   deploy-unlighthouse-site:
     needs: [ deploy-unlighthouse-files ]
+    if: success()
     runs-on: docker
     env: 
       DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
@@ -91,5 +93,6 @@ jobs:
           key: ${{ secrets.SSH_PRIVATE_KEY }}
           script: |
             PATH="$HOME/.local/bin:$PATH"
+            screen -ls | grep 'firq_dev-unlighthouse' | awk '{print $1}' | xargs -I % -t screen -X -S % quit
             cd firq_dev
             screen -S firq_dev-unlighthouse -dm serve unlighthouse/ -p ${{ secrets.UNLIGHTHOUSE_DEPLOY_PORT }}   

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.21",
+	"version": "0.1.27",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -15,7 +15,7 @@
 		"@astrojs/check": "^0.3.3",
 		"@astrojs/mdx": "^2.0.3",
 		"@astrojs/sitemap": "^3.0.3",
-		"astro": "^4.0.7",
+		"astro": "^4.2.1",
 		"autoprefixer": "^10.4.16",
 		"iconoir": "^7.2.0",
 		"postcss-preset-env": "^9.3.0",

src/components/ceCard.astro

@@ -1,29 +1,26 @@
 ---
-import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
 import mlb_ce from '../assets/ce/mlb.webp'
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   name: string
   imageFile: string
-  mlb: string
+  mlb: boolean
 }
 
 const { mlb, imageFile, name } = Astro.props
 const imagePath = `/src/assets/ce/${imageFile}`
-const images_ces = import.meta.glob<{ default: ImageMetadata }>(
+const images_ces = import.meta.glob<GlobImage>('/src/assets/ce/*.png')
-  '/src/assets/ce/*.png'
+const loadedCEImage = plsLoadImage(images_ces, imagePath)
-)
 
-let mlb_image: string = 'mlbalign'
+const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
-if (mlb === 'false') {
-  mlb_image = 'hidemlb'
-}
 ---
 
 <article>
   <div>
-    <Image src={images_ces[imagePath]()} alt={name} class="ce-crop" />
+    <Image src={loadedCEImage} alt={name} class="ce-crop" />
   </div>
   <div class={mlb_image}>
     <Image src={mlb_ce} alt="Max-limit broken" class="mlb" />

src/components/contactCard.astro

@@ -1,6 +1,7 @@
 ---
-import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   site: string
@@ -11,14 +12,20 @@ export interface Props {
 const { imageFile, link, site } = Astro.props
 const logoAltText = `${site} Logo`
 const imagePath = `/src/assets/social/${imageFile}`
-const images_logos = import.meta.glob<{ default: ImageMetadata }>(
+const images_logos = import.meta.glob<GlobImage>(
   '/src/assets/social/*.{png,webp}'
 )
+const loadedLogoImage = plsLoadImage(images_logos, imagePath)
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${site} - new window`>
+<a
+  href={link}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label=`${site} - new window`
+>
   <article class="contact do-hover">
-    <Image src={images_logos[imagePath]()} alt={logoAltText} />
+    <Image src={loadedLogoImage} alt={logoAltText} />
     <div>
       <h2>{site}</h2>
     </div>

src/components/favouriteCard.astro

@@ -1,6 +1,7 @@
 ---
-import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets'
-import { Image } from 'astro:assets';
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   name: string
@@ -11,12 +12,20 @@ export interface Props {
 
 const { link, imageFile, origin, name } = Astro.props
 const imagePath = `/src/assets/favourites/${imageFile}`
-const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favourites/*.{png,webp}')
+const images = import.meta.glob<GlobImage>(
+  '/src/assets/favourites/*.{png,webp}'
+)
+const loadedImage = plsLoadImage(images, imagePath)
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window`>
+<a
+  href={link}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label=`${name} - new window`
+>
   <div class="heading">{name}</div>
-  <Image src={images[imagePath]()} alt={name} />
+  <Image src={loadedImage} alt={name} />
   <h2 class="subtext">
     {origin}
   </h2>
@@ -36,10 +45,6 @@ const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favouri
     align-items: center;
   }
 
-  a:hover {
-    transform: scale(var(--hover-scale));
-  }
-
   a {
     border-radius: 1rem;
     display: flex;
@@ -55,25 +60,27 @@ const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favouri
     text-align: center;
     transition: transform var(--speed) var(--ease);
     text-decoration: none;
+
+    &:hover {
+      transform: scale(var(--hover-scale));
     }
 
-  a > img {
+    img {
       padding: 0px 0.25em;
       width: 90%;
       height: auto;
     }
+  }
 
   @media (min-width: 512px) {
     a {
       padding: 10px 10px;
       width: auto;
       height: auto;
-    }
+      img {
-
-    a > img {
         padding: 0px 1.5em;
         width: 200px;
-      height: auto;
+      }
     }
   }
 

src/components/fgotaHero.astro

@@ -0,0 +1,27 @@
+---
+---
+
+<div>
+  <span>
+    I am currently working on a site to catalogue past and future TAs.<br/>
+    Check it out at <a href="https://fgo-ta.com">fgo-ta.com</a>
+  </span>
+</div>
+
+<style>
+  div {
+    display: flex;
+    width: 100%;
+    height: 5em;
+    background-color: var(--c-gray);
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.5em;
+  }
+  a {
+    color: var(--c-darkpurple);
+    text-decoration: none;
+  }
+</style>

src/components/navbar.astro

@@ -13,12 +13,12 @@ const hamburger_src_url = `url("${hamburger.src}")`;
   <ul class="desktop">
     <slot name="desktop"/>
   </ul>
-  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
+  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()" role="navigation">
     <ul>
       <slot name="mobile"/>
     </ul>
     <div class="placeholder"></div>
-    <div class="hamburger-menu" role="menu"></div>
+    <div class="hamburger-menu" role="navigation"></div>
   </button>
 </header>
 

src/components/navbarEntry.astro

@@ -30,7 +30,7 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
     rel="noopener noreferrer"
     aria-label={text}
     class={currPage}
-    role="menuitem"
+    role="navigation"
     {...extraattributes}
   >
     <div class="icon"></div>

src/components/servantCard.astro

@@ -1,6 +1,7 @@
 ---
-import type { ImageMetadata } from 'astro';
 import { Image } from 'astro:assets';
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   name: string
@@ -16,8 +17,10 @@ export interface Props {
 const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
 const servantImagePath = `/src/assets/servant/${servantImageFile}`
 const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
-const images_servants = import.meta.glob<{ default: ImageMetadata }>('/src/assets/servant/*.{png,webp}')
+const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{png,webp}')
-const images_bond_ces = import.meta.glob<{ default: ImageMetadata }>('/src/assets/ce/bond-ce/*.{png,webp}')
+const images_bond_ces = import.meta.glob<GlobImage>('/src/assets/ce/bond-ce/*.{png,webp}')
+const loadedServantImage = plsLoadImage(images_servants, servantImagePath)
+const loadedBondCEImage = plsLoadImage(images_bond_ces, bondceImagePath)
 
 let bondce_css: string = 'bond-ce'
 
@@ -27,14 +30,14 @@ if (bond10 === false) {
 ---
 
 <article>
-  <Image src={images_servants[servantImagePath]()} alt={name} />
+  <Image src={loadedServantImage} alt={name} />
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />
     NP {np}
   </h2>
   <div class="expand-on-hover">
-    <Image src={images_bond_ces[bondceImagePath]()} alt="" class={bondce_css}/>
+    <Image src={loadedBondCEImage} alt="" class={bondce_css}/>
     <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
   </div>
 </article>

src/components/taCard.astro

@@ -1,6 +1,8 @@
 ---
-import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
+
 export interface Props {
   date: string
   title: string
@@ -24,13 +26,16 @@ const targetImagePath = `/src/assets/ta_icons/${targetImageFile}`
 const servantImagePath = `/src/assets/ta_icons/ta_servants/${servantImageFile}`
 
 const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
-const target_images = import.meta.glob<{ default: ImageMetadata }>(
+const target_images = import.meta.glob<GlobImage>(
   '/src/assets/ta_icons/*.{png,webp}'
 )
-const servant_images = import.meta.glob<{ default: ImageMetadata }>(
+const servant_images = import.meta.glob<GlobImage>(
   '/src/assets/ta_icons/ta_servants/*.{png,webp}'
 )
 
+const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
+const loadedTargetImage = plsLoadImage(target_images, targetImagePath)
+
 let hasuser = ''
 if (user !== undefined) {
   hasuser = 'hasuser'
@@ -39,7 +44,7 @@ if (user !== undefined) {
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={target_images[targetImagePath]()} alt={title} class="icon" />
+    <Image src={loadedTargetImage} alt={title} class="icon" />
     <div class="title">
       <h2>{title}</h2>
     </div>
@@ -50,7 +55,7 @@ if (user !== undefined) {
       {formatted_date}
     </p>
     <div class="expand-on-hover">
-      <Image src={servant_images[servantImagePath ?? 'undefined']()} alt="" />
+      <Image src={loadedServantImage} alt="" />
       <h2>{turns}</h2>
     </div>
   </article>

src/components/technologyCard.astro

@@ -1,6 +1,7 @@
 ---
-import type { ImageMetadata } from 'astro'
 import { Image } from 'astro:assets'
+import type { GlobImage } from '../types/generic'
+import { plsLoadImage } from '../utils/tools'
 
 export interface Props {
   title: string
@@ -11,14 +12,15 @@ export interface Props {
 const { imageFile, link, title } = Astro.props
 const logoAltText = `${title} Logo`
 const imagePath = `/src/assets/technologies/${imageFile}`
-const images_logos = import.meta.glob<{ default: ImageMetadata }>(
+const images_logos = import.meta.glob<GlobImage>(
   '/src/assets/technologies/*.{png,webp}'
 )
+const loadedImage = plsLoadImage(images_logos, imagePath)
 ---
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={images_logos[imagePath]()} alt={logoAltText} />
+    <Image src={loadedImage} alt={logoAltText} />
     <div>
       <h2>{title}</h2>
     </div>

src/pages/404.astro

@@ -17,7 +17,7 @@ const description = "Error. This shouldn't happen :/"
       <Image src={sadshishou} alt="Sad Shishou" />
       <h2>Well ... you were not supposed to end up here.</h2>
       <a href="/" aria-label="Home" rel="noopener noreferrer">
-        <i class="iconoir-fast-arrow-left"></i>Go back home
+        &lt;&lt; Go back home
       </a>
     </div>
   </BaseSection>
@@ -50,11 +50,11 @@ const description = "Error. This shouldn't happen :/"
     text-decoration: none;
     font-size: 1.5rem;
     font-weight: bold;
-  }
 
-  a:hover {
+    &:hover {
       color: var(--c-darkpurple);
     }
+  }
 
   img {
     width: 256px;

src/pages/ta-collection.astro

@@ -11,6 +11,7 @@ import TaSection from '../layouts/taSection.astro'
 import TaCard from '../components/taCard.astro'
 import tadata from '../../static/data/_tadata.json'
 import featured_data from '../../static/data/_featureddata.json'
+import FgotaHero from '../components/fgotaHero.astro'
 
 const important_data = tadata.filter(function (el) {
   return [
@@ -36,6 +37,7 @@ const description = 'A collection of TAs previously completed be Firq.'
   currentpage="ta-collection"
   descriptionOverride={description}
 >
+  <FgotaHero />
   <TaSection title="Notable TAs" abovetext="My most notable TAs">
     {important_data.map((item) => <TaCard {...item} />)}
   </TaSection>

src/types/generic.ts

@@ -0,0 +1,10 @@
+export interface IconsLookup {
+  [key: string]: ImageMetadata
+}
+
+interface GlobGeneric<T> { 
+  default: T
+}
+
+export type GlobAny = GlobGeneric<any>
+export type GlobImage = GlobGeneric<ImageMetadata>

src/utils/tools.ts

@@ -0,0 +1,5 @@
+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;
+}

static/data/_cedata.json

@@ -2,56 +2,56 @@
 	{
 		"name": "The Merciless One",
 		"imageFile": "merciless_one.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "Ox-Demon King",
 		"imageFile": "ox-demon.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "Holy Maiden's Teachings",
 		"imageFile": "maidens_teachings.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "Kaleidoscope",
 		"imageFile": "kaleidoscope.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "The Black Grail",
 		"imageFile": "black_grail.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "A Fragment Of 2030",
 		"imageFile": "2030.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "Outrage",
 		"imageFile": "outrage.png",
-		"mlb": "false"
+		"mlb": false
 	},
 	{
 		"name": "Vessel of the Saint",
 		"imageFile": "vessel.png",
-		"mlb": "false"
+		"mlb": false
 	},
 	{
 		"name": "Devilish Bodhisattva",
 		"imageFile": "devilish_bodhisattva.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "500-Year Obsession",
 		"imageFile": "500.png",
-		"mlb": "true"
+		"mlb": true
 	},
 	{
 		"name": "Prisma Cosmos",
 		"imageFile": "prisma_cosmos.png",
-		"mlb": "true"
+		"mlb": true
 	}
 ]

static/data/_servantdata.json

@@ -1,4 +1,14 @@
 [
+	{
+		"name": "Scathach",
+		"level": "120",
+		"np": "5",
+		"skills": "10 / 10 / 10",
+		"ml": "10",
+		"servantImageFile": "scathach_03.png",
+		"bondceImageFile": "scathach.png",
+		"bond10": true
+	},
 	{
 		"name": "Skadi",
 		"level": "120",
@@ -37,14 +47,14 @@
 		"ml": "Not Unlocked",
 		"servantImageFile": "koyanlight_01.png",
 		"bondceImageFile": "koyanlight.png",
-		"bond10": false
+		"bond10": true
 	},
 	{
 		"name": "Castoria",
 		"level": "90",
 		"np": "1",
 		"skills": "10 / 10 / 10",
-		"ml": "7",
+		"ml": "10",
 		"servantImageFile": "castoria_02.png",
 		"bondceImageFile": "castoria.png",
 		"bond10": true
@@ -64,10 +74,10 @@
 		"level": "90",
 		"np": "1",
 		"skills": "10 / 10 / 10",
-		"ml": "Not Unlocked",
+		"ml": "1",
 		"servantImageFile": "oberon_02.png",
 		"bondceImageFile": "oberon.png",
-		"bond10": false
+		"bond10": true
 	},
 	{
 		"name": "Merlin",
@@ -144,7 +154,7 @@
 		"level": "90",
 		"np": "1",
 		"skills": "9 / 9 / 10",
-		"ml": "Not Unlocked",
+		"ml": "10",
 		"servantImageFile": "douman_01.png",
 		"bondceImageFile": "douman.png",
 		"bond10": false
@@ -159,21 +169,41 @@
 		"bondceImageFile": "himiko.png",
 		"bond10": false
 	},
+	{
+		"name": "Sherlock Holmes",
+		"level": "90",
+		"np": "1",
+		"skills": "9 / 10 / 9",
+		"ml": "Not Unlocked",
+		"servantImageFile": "sherlock_03.png",
+		"bondceImageFile": "sherlock.png",
+		"bond10": false
+	},
 	{
 		"name": "Nero (Bride)",
 		"level": "90",
 		"np": "1",
-		"skills": "10 / 10 / 9 ",
+		"skills": "10 / 10 / 10",
 		"ml": "Not Unlocked",
 		"servantImageFile": "bride_03.png",
 		"bondceImageFile": "bride.png",
 		"bond10": false
 	},
+	{
+		"name": "Taigon Wang",
+		"level": "70",
+		"np": "1",
+		"skills": "10 / 9 / 10",
+		"ml": "Not Unlocked",
+		"servantImageFile": "taigong_03.png",
+		"bondceImageFile": "taigong.png",
+		"bond10": false
+	},
 	{
 		"name": "Nightingale (Santa)",
 		"level": "80",
 		"np": "5",
-		"skills": "9 / 10 / 10 ",
+		"skills": "9 / 10 / 9",
 		"ml": "Not Unlocked",
 		"servantImageFile": "santagale_01.png",
 		"bondceImageFile": "santagale.png",
@@ -203,7 +233,7 @@
 		"name": "Wu Zetian",
 		"level": "60",
 		"np": "1",
-		"skills": "9 / 1 / 9 ",
+		"skills": "10 / 9 / 10",
 		"ml": "Not Unlocked",
 		"servantImageFile": "wu_01.png",
 		"bondceImageFile": "wu.png",
@@ -213,7 +243,7 @@
 		"name": "Ibaraki-Douji",
 		"level": "40",
 		"np": "1",
-		"skills": "8 / 8 / X ",
+		"skills": "9 / 10 / X ",
 		"ml": "Not Unlocked",
 		"servantImageFile": "ibaraki_02.png",
 		"bondceImageFile": "ibaraki.png",
@@ -233,7 +263,7 @@
 		"name": "Chiron",
 		"level": "60",
 		"np": "1",
-		"skills": "1 / 9 / 9 ",
+		"skills": "1 / 10 / 10",
 		"ml": "Not Unlocked",
 		"servantImageFile": "chiron_01.png",
 		"bondceImageFile": "chiron.png",