Compare commits

...

3 commits

Author SHA1 Message Date
b7db7dd512 Merge pull request '0.1.23 - Multiple Fixes for DX' (#26) from dev into main
All checks were successful
/ release (push) Successful in 6s
/ checking (push) Successful in 10s
/ build-site (push) Successful in 1m16s
Reviewed-on: #26
2024-01-05 00:20:38 +00:00
fcd05dcb09
Fix
All checks were successful
/ checking (push) Successful in 11s
/ build-site (push) Successful in 1m19s
/ publish (push) Successful in 8s
/ unlighthouse (push) Successful in 30s
/ deploy-unlighthouse-files (push) Successful in 7s
/ deploy-unlighthouse-site (push) Successful in 5s
2024-01-05 01:14:28 +01:00
7ed78bceff
Moved nice tools from fgo-ta over
Some checks failed
/ build-site (push) Has been skipped
/ publish (push) Has been skipped
/ checking (push) Failing after 10s
2024-01-05 01:12:19 +01:00
10 changed files with 73 additions and 42 deletions

View file

@ -1,7 +1,7 @@
{ {
"name": "@firq/fgosite", "name": "@firq/fgosite",
"type": "module", "type": "module",
"version": "0.1.22", "version": "0.1.23",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",

View file

@ -1,29 +1,26 @@
--- ---
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets' import { Image } from 'astro:assets'
import mlb_ce from '../assets/ce/mlb.webp' import mlb_ce from '../assets/ce/mlb.webp'
import type { GlobImage } from '../types/generic'
import { plsLoadImage } from '../utils/tools'
export interface Props { export interface Props {
name: string name: string
imageFile: string imageFile: string
mlb: string mlb: boolean
} }
const { mlb, imageFile, name } = Astro.props const { mlb, imageFile, name } = Astro.props
const imagePath = `/src/assets/ce/${imageFile}` 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> <article>
<div> <div>
<Image src={images_ces[imagePath]()} alt={name} class="ce-crop" /> <Image src={loadedCEImage} alt={name} class="ce-crop" />
</div> </div>
<div class={mlb_image}> <div class={mlb_image}>
<Image src={mlb_ce} alt="Max-limit broken" class="mlb" /> <Image src={mlb_ce} alt="Max-limit broken" class="mlb" />

View file

@ -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 { export interface Props {
site: string site: string
@ -11,14 +12,20 @@ export interface Props {
const { imageFile, link, site } = Astro.props const { imageFile, link, site } = Astro.props
const logoAltText = `${site} Logo` const logoAltText = `${site} Logo`
const imagePath = `/src/assets/social/${imageFile}` 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}' '/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"> <article class="contact do-hover">
<Image src={images_logos[imagePath]()} alt={logoAltText} /> <Image src={loadedLogoImage} alt={logoAltText} />
<div> <div>
<h2>{site}</h2> <h2>{site}</h2>
</div> </div>

View file

@ -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 { export interface Props {
name: string name: string
@ -11,12 +12,13 @@ export interface Props {
const { link, imageFile, origin, name } = Astro.props const { link, imageFile, origin, name } = Astro.props
const imagePath = `/src/assets/favourites/${imageFile}` 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> <div class="heading">{name}</div>
<Image src={images[imagePath]()} alt={name} /> <Image src={loadedImage} alt={name} />
<h2 class="subtext"> <h2 class="subtext">
{origin} {origin}
</h2> </h2>

View file

@ -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 { export interface Props {
name: string name: string
@ -16,8 +17,10 @@ export interface Props {
const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name } = Astro.props
const servantImagePath = `/src/assets/servant/${servantImageFile}` const servantImagePath = `/src/assets/servant/${servantImageFile}`
const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}` 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' let bondce_css: string = 'bond-ce'
@ -27,14 +30,14 @@ if (bond10 === false) {
--- ---
<article> <article>
<Image src={images_servants[servantImagePath]()} alt={name} /> <Image src={loadedServantImage} alt={name} />
<h2 class="subtext"> <h2 class="subtext">
Level {level}<br /> Level {level}<br />
{skills}<br /> {skills}<br />
NP {np} NP {np}
</h2> </h2>
<div class="expand-on-hover"> <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> <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
</div> </div>
</article> </article>

View file

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

View file

@ -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 { export interface Props {
title: string title: string
@ -11,14 +12,15 @@ export interface Props {
const { imageFile, link, title } = Astro.props const { imageFile, link, title } = Astro.props
const logoAltText = `${title} Logo` const logoAltText = `${title} Logo`
const imagePath = `/src/assets/technologies/${imageFile}` 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}' '/src/assets/technologies/*.{png,webp}'
) )
const loadedImage = plsLoadImage(images_logos, imagePath)
--- ---
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}> <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article> <article>
<Image src={images_logos[imagePath]()} alt={logoAltText} /> <Image src={loadedImage} alt={logoAltText} />
<div> <div>
<h2>{title}</h2> <h2>{title}</h2>
</div> </div>

10
src/types/generic.ts Normal file
View file

@ -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>

5
src/utils/tools.ts Normal file
View file

@ -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;
}

View file

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