0.1.23 - Multiple Fixes for DX #26
10 changed files with 73 additions and 42 deletions
|
@ -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",
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
10
src/types/generic.ts
Normal 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
5
src/utils/tools.ts
Normal 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;
|
||||||
|
}
|
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in a new issue