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
This commit is contained in:
Firq 2024-01-05 00:20:38 +00:00
commit b7db7dd512
10 changed files with 73 additions and 42 deletions

View file

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

View file

@ -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 }>(
'/src/assets/ce/*.png'
)
const images_ces = import.meta.glob<GlobImage>('/src/assets/ce/*.png')
const loadedCEImage = plsLoadImage(images_ces, imagePath)
let mlb_image: string = 'mlbalign'
if (mlb === 'false') {
mlb_image = 'hidemlb'
}
const mlb_image = mlb ? 'mlbalign' : '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" />

View file

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

View file

@ -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
@ -11,12 +12,13 @@ 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`>
<div class="heading">{name}</div>
<Image src={images[imagePath]()} alt={name} />
<Image src={loadedImage} alt={name} />
<h2 class="subtext">
{origin}
</h2>

View file

@ -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_bond_ces = import.meta.glob<{ default: ImageMetadata }>('/src/assets/ce/bond-ce/*.{png,webp}')
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)
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>

View file

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

View file

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

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",
"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
}
]