Merge pull request 'Fixes for Apple and Accessibility' (#23) from dev into main

Reviewed-on: #23

package.json

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

src/components/contactCard.astro

@@ -9,19 +9,21 @@ 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 }>(
   '/src/assets/social/*.{png,webp}'
 )
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}>
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${site} - new window`>
   <article class="contact do-hover">
-    <Image src={images_logos[imagePath]()} alt="" />
+    <Image src={images_logos[imagePath]()} alt={logoAltText} />
     <div>
       <h2>{site}</h2>
     </div>
   </article>
+  <span class="visually-hidden">{logoAltText}</span>
 </a>
 
 <style>

src/components/favouriteCard.astro

@@ -14,7 +14,7 @@ const imagePath = `/src/assets/favourites/${imageFile}`
 const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/favourites/*.{png,webp}')
 ---
 
-<a href={link} target="_blank" rel="noopener noreferrer">
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window`>
   <div class="heading">{name}</div>
   <Image src={images[imagePath]()} alt={name} />
   <h2 class="subtext">

src/components/navbar.astro

@@ -6,18 +6,19 @@ const hamburger_src_url = `url("${hamburger.src}")`;
 ---
 
 <header>
-  <a href="/" rel="noopener noreferrer" aria-label="Home">
+  <a href="/" rel="noopener noreferrer" aria-label="Home" role="navigation">
-    <Image src={logo} alt="Website Logo"/>
+    <Image src={logo} alt="Firq Website Logo"/>
+    <span class="visually-hidden">Firq Website Logo</span>
   </a>
   <ul class="desktop">
-    <slot />
+    <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 />
+      <slot name="mobile"/>
     </ul>
     <div class="placeholder"></div>
-    <div class="hamburger-menu"></div>
+    <div class="hamburger-menu" role="navigation"></div>
   </button>
 </header>
 
@@ -108,12 +109,12 @@ const hamburger_src_url = `url("${hamburger.src}")`;
   .hamburger-menu {
     mask: var(--hamburger_src_url) no-repeat center;
     background-color: white;
-    width: 2em;
+    width: 2rem;
-    height: 2em;
+    height: 2rem;
     position: static;
     align-self: flex-start;
-    padding-right: 1em;
+    margin-right: 1rem;
-    padding-top: 2.5em;
+    margin-top: 1rem;
   }
 
   @media (min-width: 1140px) {

src/components/navbarEntry.astro

@@ -1,12 +1,13 @@
 ---
 export interface Props {
   currentPage?: string
+  navtype: "mobile" | "desktop"
   link: string
   text: string
   icon: ImageMetadata
 }
 
-const { icon, text, link, currentPage } = Astro.props
+const { icon, text, link, navtype, currentPage } = Astro.props
 
 let currPage = ''
 const slug = link.replace(new RegExp('/', 'g'), '')
@@ -19,6 +20,8 @@ if (currentPage === slug) {
 
 const icon_src_url = `url("${icon.src}")`;
 const fulllink = `/${slug}`
+
+let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
 ---
 
 <li>
@@ -27,7 +30,8 @@ const fulllink = `/${slug}`
     rel="noopener noreferrer"
     aria-label={text}
     class={currPage}
-    tabindex="0"
+    role="navigation"
+    {...extraattributes}
   >
     <div class="icon"></div>
     {text}

src/components/technologyCard.astro

@@ -9,6 +9,7 @@ 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 }>(
   '/src/assets/technologies/*.{png,webp}'
@@ -17,11 +18,12 @@ const images_logos = import.meta.glob<{ default: ImageMetadata }>(
 
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
-    <Image src={images_logos[imagePath]()} alt="" />
+    <Image src={images_logos[imagePath]()} alt={logoAltText} />
     <div>
       <h2>{title}</h2>
     </div>
   </article>
+  <span class="visually-hidden">{logoAltText}</span>
 </a>
 
 <style>

src/layouts/Layout.astro

@@ -77,7 +77,12 @@ const mapped_navdata = navdata.map((item) => ({
     <Navbar>
       {
         mapped_navdata.map((item) => (
-          <NavbarEntry currentPage={currentpage} {...item} />
+          <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
+        ))
+      }
+      {
+        mapped_navdata.map((item) => (
+          <NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
         ))
       }
     </Navbar>
@@ -102,4 +107,15 @@ const mapped_navdata = navdata.map((item) => ({
     background: var(--c-lightgray);
     margin: 0px;
   }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
 </style>

src/pages/blog/cernunnos-with-requiem.mdx

@@ -6,6 +6,9 @@ description: 'A handful of observations from the cernunnos fight'
 author: 'Requiem & Firq'
 tags: ['fgo', 'lostbelt 6', 'cernunnos']
 ---
+import thumbnail_firq from "../../assets/thumbnails/WrHudtdfivA.jpg"
+import thumbnail_requiem from "../../assets/thumbnails/O1f-go7uJQM.jpg"
+import YoutubeEmbed from "../../components/youtubeEmbed.astro"
 
 ## Foreword
 
@@ -45,3 +48,19 @@ On the first break Cernunnos skill seals your servants. This means on turn 2 you
 As an example:
 Let's say I used Alteras third skill turn 1. She has to wait 5 turns to reuse it and on turn 3 Vitch gives her 2 times cooldown reduction.
 Ideally you would be able to reuse her third skill on turn 4 but because she gets skill sealed she can't do it.
+
+## Resulting runs
+
+Both Requiem and I managed to get unique TAs done with Scathach (Requiem even with more servants). Those runs are embedded here:
+
+### Firq
+
+This run doesn't use the support Castoria provided by the game and instead makes use of Sherlock instead.
+
+<YoutubeEmbed id="WrHudtdfivA" thumbnail={thumbnail_firq.src}/>
+
+### Requiem
+
+A frontline only run with double Castoria
+
+<YoutubeEmbed id="O1f-go7uJQM" thumbnail={thumbnail_requiem.src}/>

static/data/_tadata.json

@@ -310,5 +310,21 @@
 		"date": "2023-12-16",
 		"servantImageFile": "shishou.png",
 		"turns": "3T"
+	},
+	{
+		"title": "Tunguska - Beast of Taming 4T (FLO)",
+		"link": "https://www.youtube.com/watch?v=g6aASJeL-ao",
+		"targetImageFile": "koyanskayaofdark.png",
+		"date": "2023-12-26",
+		"servantImageFile": "shishou.png",
+		"turns": "4T"
+	},
+	{
+		"title": "Tunguska - Beast IV:L 4T",
+		"link": "https://www.youtube.com/watch?v=brz21NKMMsY",
+		"targetImageFile": "beast_4_l.png",
+		"date": "2023-12-31",
+		"servantImageFile": "shishou.png",
+		"turns": "4T"
 	}
 ]