.forgejo/workflows/build_preview.yml

@@ -40,14 +40,13 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: https://code.forgejo.org/actions/forgejo-release@v1
+        uses: 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

@@ -2,6 +2,9 @@ on:
   push:
     tags:
       - '[0-9]+\.[0-9]+\.[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+a[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+b[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+rc[0-9]+'
 
 jobs:
   checking:
@@ -40,7 +43,7 @@ jobs:
     runs-on: docker
     steps:
       - name: Release New Version
-        uses: https://code.forgejo.org/actions/forgejo-release@v1
+        uses: actions/forgejo-release@v1
         with:
           direction: upload
           url: https://forgejo.neshweb.net

.forgejo/workflows/unlighthouse.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   unlighthouse:
     runs-on: docker
-    container: forgejo.neshweb.net/ci-docker-images/unlighthouse:latest
+    container: forgejo.neshweb.net/firq/unlighthouse-docker:latest
     steps:
       - name: Checkout repository
         uses: https://code.forgejo.org/actions/checkout@v3 
@@ -23,7 +23,6 @@ jobs:
 
   deploy-unlighthouse-files:
     needs: [ unlighthouse ]
-    if: success()
     runs-on: docker
     env: 
       DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
@@ -68,7 +67,6 @@ jobs:
 
   deploy-unlighthouse-site:
     needs: [ deploy-unlighthouse-files ]
-    if: success()
     runs-on: docker
     env: 
       DEPLOY_USER: ${{ secrets.DEPLOY_USER }}
@@ -93,6 +91,5 @@ 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 }}   

.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/Thumbs.db": true,
-        "**/__pycache__": true
-    },
-    "hide-files.files": []
-}

Dockerfile

@@ -4,11 +4,11 @@ COPY . .
 RUN npm i
 RUN npm run build
 
-FROM forgejo.neshweb.net/ci-docker-images/website-serve:latest AS runtime
+FROM forgejo.neshweb.net/firq/website-serve-docker:latest AS runtime
 
 COPY --from=build /app/dist /public
 COPY --from=build /app/serve.json /public/serve.json
-RUN rm -r /public/data/
+RUN rm -r /public/assets/data/
 
 ENV PORT 8081
 EXPOSE 8081

astro.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from 'astro/config';
 
+// https://astro.build/config
 import sitemap from "@astrojs/sitemap";
-import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
@@ -10,5 +10,5 @@ export default defineConfig({
   outDir: 'dist',
   publicDir: 'static',
   site: 'https://firq.dev/',
-  integrations: [sitemap(), mdx()]
+  integrations: [sitemap()]
 });

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.1.27",
+	"version": "0.1.10",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
@@ -11,18 +11,10 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astro-community/astro-embed-youtube": "^0.4.3",
 		"@astrojs/check": "^0.3.3",
-		"@astrojs/mdx": "^2.0.3",
 		"@astrojs/sitemap": "^3.0.3",
-		"astro": "^4.2.1",
+		"astro": "^4.0.7",
-		"autoprefixer": "^10.4.16",
+		"iconoir": "^6.1.0",
-		"iconoir": "^7.2.0",
-		"postcss-preset-env": "^9.3.0",
 		"typescript": "^5.3.3"
-	},
+	}
-	"browserslist": [
-		"last 2 versions",
-		">0.5% and not dead"
-	]
 }

postcss.config.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-preset-env": {
-      autoprefixer: { flexbox: "no-2009" },
-      stage: 2,
-      features: {
-        "custom-properties": false,
-        "custom-media-queries": true,
-        "nesting-rules": true
-      }
-    }
-  }
-};

serve.json

@@ -14,14 +14,14 @@
       "source" : "**/*.css",
       "headers" : [{
         "key" : "Cache-Control",
-        "value" : "max-age=31536000"
+        "value" : "max-age=86400"
       }]
     },
     {
       "source" : "**/*.@(jpg|jpeg|gif|png|webp|svg)",
       "headers" : [{
         "key" : "Cache-Control",
-        "value" : "max-age=31536000"
+        "value" : "max-age=86400"
       }]
     }
   ]

src/components/ceCard.astro

@@ -1,29 +1,27 @@
 ---
-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
+  link: string
-  mlb: boolean
+  mlb: string
 }
 
-const { mlb, imageFile, name } = Astro.props
+const { mlb, link, name } = Astro.props
-const imagePath = `/src/assets/ce/${imageFile}`
-const images_ces = import.meta.glob<GlobImage>('/src/assets/ce/*.png')
-const loadedCEImage = plsLoadImage(images_ces, imagePath)
 
-const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
+const ce_img: string = `/assets/ce/${link}.webp`
+const mlb_ce: string = `/assets/ce/mlb.webp`
+let mlb_image: string = 'mlbalign'
+
+if (mlb === 'false') {
+  mlb_image = 'hidemlb'
+}
 ---
 
 <article>
   <div>
-    <Image src={loadedCEImage} alt={name} class="ce-crop" />
+    <img class="ce-crop" src={ce_img} alt={name} />
   </div>
   <div class={mlb_image}>
-    <Image src={mlb_ce} alt="Max-limit broken" class="mlb" />
+    <img class="mlb" src={mlb_ce} alt="Max-limit broken" />
   </div>
 </article>
 
@@ -88,7 +86,6 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
 
   .mlb {
     width: 5.5rem;
-    height: auto;
     margin-left: auto;
     margin-right: auto;
   }

src/components/contactCard.astro

@@ -1,36 +1,22 @@
 ---
-import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
-
 export interface Props {
   site: string
   link: string
-  imageFile: string
+  image: string
 }
 
-const { imageFile, link, site } = Astro.props
+const { image, link, site } = Astro.props
-const logoAltText = `${site} Logo`
+const icon: string = `background-image: url('/assets/social/${image}.webp')`
-const imagePath = `/src/assets/social/${imageFile}`
-const images_logos = import.meta.glob<GlobImage>(
-  '/src/assets/social/*.{png,webp}'
-)
-const loadedLogoImage = plsLoadImage(images_logos, imagePath)
 ---
 
-<a
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}>
-  href={link}
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label=`${site} - new window`
->
   <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt={logoAltText} />
+    <div style={icon}>
-    <div>
+      <span>
-      <h2>{site}</h2>
+        <h2>{site}</h2>
+      </span>
     </div>
   </article>
-  <span class="visually-hidden">{logoAltText}</span>
 </a>
 
 <style>
@@ -38,29 +24,18 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
     text-decoration: none;
   }
 
-  article {
+  article div {
-    --size-value: 6.25rem;
     border-radius: 1.25rem;
+    background-size: contain;
     display: flex;
-    justify-content: center;
     align-items: center;
-    background-color: var(--c-darkergray);
+    justify-content: center;
-    border-color: var(--c-darkgray);
+    --size-value: 6.25rem;
-    padding: 10px;
-    text-align: center;
-    transition: transform var(--speed) var(--ease);
-    height: auto;
-    width: auto;
-    position: relative;
-  }
-
-  article img {
-    border-radius: 1.25rem;
     width: var(--size-value);
     height: var(--size-value);
   }
 
-  article:hover div {
+  article:hover span {
     border-radius: 1.25rem;
     padding: 0 0.5rem;
     display: flex;
@@ -68,11 +43,9 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
     justify-content: center;
     text-align: center;
     background-color: var(--c-darkgray);
-    height: calc(var(--size-value));
+    height: calc(var(--size-value) + 0.1rem);
-    width: calc(var(--size-value) - 1rem);
+    width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
-    z-index: 100;
-    position: absolute;
   }
 
   article:hover h2 {
@@ -84,14 +57,25 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   }
 
   article h2 {
-    position: absolute;
     display: none;
   }
 
-  article div {
+  article span {
     display: none;
   }
-
+  article {
+    border-radius: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--c-darkergray);
+    border-color: var(--c-darkgray);
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    height: auto;
+    width: auto;
+  }
   a:hover {
     transform: scale(var(--hover-scale));
   }

src/components/favouriteCard.astro

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

src/components/fgotaHero.astro

@@ -1,27 +0,0 @@
----
----
-
-<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

@@ -1,28 +1,23 @@
 ---
-import { Image } from 'astro:assets';
-import logo from '../assets/logo.svg'
-import hamburger from 'iconoir/icons/menu.svg'
-const hamburger_src_url = `url("${hamburger.src}")`;
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
+  <a href="/" rel="noopener noreferrer" aria-label="Home">
-    <Image src={logo} alt="Firq Website Logo"/>
+    <img src="/assets/logo.svg" alt="" />
-    <span class="visually-hidden">Firq Website Logo</span>
   </a>
   <ul class="desktop">
-    <slot name="desktop"/>
+    <slot />
   </ul>
-  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()" role="navigation">
+  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
     <ul>
-      <slot name="mobile"/>
+      <slot />
     </ul>
     <div class="placeholder"></div>
-    <div class="hamburger-menu" role="navigation"></div>
+    <i class="iconoir-menu"></i>
   </button>
 </header>
 
-<style define:vars={{ hamburger_src_url }}>
+<style>
   header {
     z-index: 1000;
     position: sticky;
@@ -35,7 +30,7 @@ const hamburger_src_url = `url("${hamburger.src}")`;
     line-height: 1.5em;
   }
   header > a {
-    margin-left: 16px;
+    padding-left: 16px;
     padding-top: 8px;
     display: block;
     height: 48px;
@@ -84,6 +79,16 @@ const hamburger_src_url = `url("${hamburger.src}")`;
     height: 64px;
   }
 
+  .mobile > i {
+    position: static;
+    color: white;
+    font-weight: bold;
+    font-size: 2em;
+    align-self: flex-start;
+    padding-right: 1em;
+    padding-top: 1.15rem;
+  }
+
   .mobile > ul {
     display: none;
     padding: 0px;
@@ -106,17 +111,6 @@ const hamburger_src_url = `url("${hamburger.src}")`;
     justify-self: top;
   }
 
-  .hamburger-menu {
-    mask: var(--hamburger_src_url) no-repeat center;
-    background-color: white;
-    width: 2rem;
-    height: 2rem;
-    position: static;
-    align-self: flex-start;
-    margin-right: 1rem;
-    margin-top: 1rem;
-  }
-
   @media (min-width: 1140px) {
     .mobile {
       display: none;

src/components/navbarEntry.astro

@@ -1,13 +1,12 @@
 ---
 export interface Props {
   currentPage?: string
-  navtype: "mobile" | "desktop"
   link: string
   text: string
-  icon: ImageMetadata
+  icon: string
 }
 
-const { icon, text, link, navtype, currentPage } = Astro.props
+const { icon, text, link, currentPage } = Astro.props
 
 let currPage = ''
 const slug = link.replace(new RegExp('/', 'g'), '')
@@ -18,10 +17,7 @@ if (currentPage === slug) {
   currPage = 'current'
 }
 
-const icon_src_url = `url("${icon.src}")`;
 const fulllink = `/${slug}`
-
-let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
 ---
 
 <li>
@@ -30,15 +26,14 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
     rel="noopener noreferrer"
     aria-label={text}
     class={currPage}
-    role="navigation"
+    tabindex="0"
-    {...extraattributes}
   >
-    <div class="icon"></div>
+    <i class={icon}></i>
     {text}
   </a>
 </li>
 
-<style define:vars={{ icon_src_url }}>
+<style>
   li {
     align-items: center;
     justify-content: center;
@@ -46,7 +41,6 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
     display: flex;
     width: 200px;
   }
-
   li > a {
     display: inline-flex;
     color: white;
@@ -58,27 +52,10 @@ let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
     font-weight: bold;
     gap: 0.2em;
   }
-
   li > a:hover {
     color: var(--c-purplepink);
   }
-
-  li > a:hover > .icon {
-    background-color: var(--c-purplepink);
-  }
-
   .current {
     color: var(--c-darkpurple) !important;
   }
-
-  .current > .icon {
-    background-color: var(--c-darkpurple) !important;
-  }
-
-  .icon {
-    mask: var(--icon_src_url) no-repeat center;
-    background-color: white;
-    width: 1.4em;
-    height: 1.4em;
-  }
 </style>

src/components/servantCard.astro

@@ -1,43 +1,36 @@
 ---
-import { Image } from 'astro:assets';
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
-
 export interface Props {
   name: string
   level: string
   skills: string
   np: string
-  servantImageFile: string
+  image_servant: string
-  bondceImageFile: string
+  image_bond: string
   ml: string
-  bond10: boolean
+  bond10: string
 }
 
-const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
+const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
-const servantImagePath = `/src/assets/servant/${servantImageFile}`
+  Astro.props
-const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
-const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{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)
 
+const servant_img: string = `/assets/servant/${image_servant}.webp`
+const bondce_img: string = `/assets/ce/bond-ce/${image_bond}.webp`
 let bondce_css: string = 'bond-ce'
 
-if (bond10 === false) {
+if (bond10 === 'false') {
   bondce_css += ' unobtained'
 }
 ---
 
 <article>
-  <Image src={loadedServantImage} alt={name} />
+  <img src={servant_img} alt={name} />
   <h2 class="subtext">
     Level {level}<br />
     {skills}<br />
     NP {np}
   </h2>
   <div class="expand-on-hover">
-    <Image src={loadedBondCEImage} alt="" class={bondce_css}/>
+    <img class={bondce_css} src={bondce_img} alt="" />
     <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
   </div>
 </article>
@@ -117,7 +110,6 @@ if (bond10 === false) {
 
   .bond-ce {
     padding-top: 0.75rem;
-    width: auto;
     height: 3rem;
   }
 

src/components/taCard.astro

@@ -1,20 +1,15 @@
 ---
-import { Image } from 'astro:assets'
-import type { GlobImage } from '../types/generic'
-import { plsLoadImage } from '../utils/tools'
-
 export interface Props {
   date: string
   title: string
   link: string
-  targetImageFile: string
+  image: string
   user?: string
-  servantImageFile?: string
+  ta_servant?: string
   turns?: string
 }
 
-const { turns, targetImageFile, user, date, servantImageFile, link, title } =
+const { turns, ta_servant, user, date, image, link, title } = Astro.props
-  Astro.props
 
 const options_date: Intl.DateTimeFormatOptions = {
   year: 'numeric',
@@ -22,19 +17,9 @@ const options_date: Intl.DateTimeFormatOptions = {
   day: '2-digit',
 }
 
-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<GlobImage>(
+const icon: string = `background-image: url('/assets/ta_icons/${image}.webp')`
-  '/src/assets/ta_icons/*.{png,webp}'
+const servant: string = `/assets/ta_icons/ta_servants/${ta_servant}.webp`
-)
-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) {
@@ -44,9 +29,10 @@ if (user !== undefined) {
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={loadedTargetImage} alt={title} class="icon" />
+    <div class="icon" style={icon}>
-    <div class="title">
+      <span>
-      <h2>{title}</h2>
+        <h2>{title}</h2>
+      </span>
     </div>
     <p>
       <span class={hasuser}>
@@ -55,29 +41,22 @@ if (user !== undefined) {
       {formatted_date}
     </p>
     <div class="expand-on-hover">
-      <Image src={loadedServantImage} alt="" />
+      <img src={servant} alt="" />
       <h2>{turns}</h2>
     </div>
   </article>
 </a>
 
 <style>
-  div {
-    display: none;
-  }
-
   span {
     display: none;
   }
-
   .hasuser {
     display: flex;
   }
-
   a {
     text-decoration: none;
   }
-
   article {
     background-color: var(--c-darkergray);
     border-color: var(--c-darkgray);
@@ -86,28 +65,23 @@ if (user !== undefined) {
     transition: transform var(--speed) var(--ease);
     height: auto;
     width: auto;
-    max-width: 8rem;
     border-radius: 1.25rem;
     padding-bottom: 1.5rem;
-    --size-value: 7rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
   }
-
   article:hover {
     transform: scale(var(--hover-scale));
   }
-
   article > .icon {
     border-radius: 1.25rem;
+    --size-value: 7rem;
     width: var(--size-value);
     height: var(--size-value);
     margin: 0.5rem;
+    background-size: var(--size-value);
+    background-position: center center;
   }
 
-  article:hover .title {
+  article:hover .icon span {
     display: flex;
     position: absolute;
     align-items: center;
@@ -118,10 +92,9 @@ if (user !== undefined) {
     width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
     border-radius: 1.25rem;
-    top: 1.1em;
   }
 
-  article:hover .title h2 {
+  article:hover span h2 {
     margin: 0;
     display: inline-flex;
     font-weight: bold;
@@ -131,11 +104,11 @@ if (user !== undefined) {
     padding: 0.5rem;
   }
 
-  article .title h2 {
+  article span h2 {
     display: none;
   }
 
-  article .title {
+  article .icon span {
     display: none;
   }