Merge fix

src/components/blogCard.astro

@@ -1,18 +1,18 @@
 ---
 export interface Props {
-	url: string | undefined;
+  url: string | undefined
-	title: string;
+  title: string
-    pubdate: string;
+  pubdate: string
-    description: string;
+  description: string
 }
 
 const options_date: Intl.DateTimeFormatOptions = {
-    year: "numeric",
+  year: 'numeric',
-    month: "long",
+  month: 'long',
-    day: "2-digit",
+  day: '2-digit',
 }
-const { description, pubdate, url, title } = Astro.props;
+const { description, pubdate, url, title } = Astro.props
-const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
+const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 ---
 
 <a href={url} rel="noopener noreferrer">
@@ -36,14 +36,14 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
     font-size: 1.1em;
     margin: 0.5em;
   }
-    article>h2 {
+  article > h2 {
     margin: 0.3em 0px;
     color: var(--c-darkpurple);
     font-size: 1.3em;
     line-height: normal;
     text-decoration: none;
   }
-    article>h3 {
+  article > h3 {
     margin: 0.2em;
     color: white;
     font-size: 0.8em;

src/components/ceCard.astro

@@ -1,28 +1,28 @@
 ---
 export interface Props {
-	name: string;
+  name: string
-    link: string;
+  link: string
-	mlb: string;
+  mlb: string
 }
 
-const {mlb, link, name } = Astro.props;
+const { mlb, link, name } = Astro.props
 
-const ce_img: string = `/ce/${link}.webp`;
+const ce_img: string = `/ce/${link}.webp`
 const mlb_ce: string = `/ce/mlb.webp`
-let mlb_image: string = "mlbalign";
+let mlb_image: string = 'mlbalign'
 
-if(mlb === "false") {
+if (mlb === 'false') {
-    mlb_image = "hidemlb";
+  mlb_image = 'hidemlb'
 }
 ---
 
 <article>
   <div class="heading-center">{name}</div>
   <div>
-        <img class="ce-crop" src={ce_img} alt={name}>
+    <img class="ce-crop" src={ce_img} alt={name} />
   </div>
   <div class={mlb_image}>
-        <img class="mlb" src={mlb_ce} alt="Max-limit broken"/>
+    <img class="mlb" src={mlb_ce} alt="Max-limit broken" />
   </div>
 </article>
 
@@ -49,9 +49,9 @@ if(mlb === "false") {
     gap: 0px 0px;
     grid-auto-flow: row;
     grid-template-areas:
-            "."
+      '.'
-            "."
+      '.'
-            ".";
+      '.';
   }
 
   article:hover {

src/components/contactCard.astro

@@ -1,10 +1,10 @@
 ---
 export interface Props {
-	site: string;
+  site: string
-	link: string;
+  link: string
 }
 
-const { link, site } = Astro.props;
+const { link, site } = Astro.props
 ---
 
 <a href={link} target="_blank" rel="noopener noreferrer">
@@ -14,7 +14,7 @@ const { link, site } = Astro.props;
 </a>
 
 <style>
-    article>h2 {
+  article > h2 {
     color: white;
     font-size: 18px;
     display: inline-block;

src/components/favouriteCard.astro

@@ -1,19 +1,18 @@
 ---
 export interface Props {
-	name: string;
+  name: string
-	origin: string;
+  origin: string
-    image: string;
+  image: string
 }
 
-const {image, origin, name } = Astro.props;
+const { image, origin, name } = Astro.props
-
-const img: string = `/favourites/${image}.webp`;
 
+const img: string = `/favourites/${image}.webp`
 ---
 
 <article>
   <div class="heading">{name}</div>
-    <img src={img} alt={name}>
+  <img src={img} alt={name} />
   <h2 class="subtext">
     {origin}
   </h2>
@@ -60,20 +59,20 @@ const img: string = `/favourites/${image}.webp`;
     transition: transform var(--speed) var(--ease);
   }
 
-    article>img {
+  article > img {
     padding: 0.25em;
-        width:120px;
+    width: 120px;
-        height:auto;
+    height: auto;
   }
 
-    @media(min-width: 512px) {
+  @media (min-width: 512px) {
     article {
       padding: 10px 10px;
       width: auto;
       height: auto;
     }
 
-        article>img {
+    article > img {
       padding: 1.5em;
       width: 200px;
       height: auto;

src/components/hero.astro

@@ -1,13 +1,12 @@
 ---
-
 ---
 
 <div>
-    This is still a work in progress and continuously expanded. Feel free to look around.
+  This is still a work in progress and continuously expanded. Feel free to look
+  around.
   <slot />
 </div>
 
-
 <style>
   div {
     display: flex;

src/components/navbar.astro

@@ -3,7 +3,7 @@
 
 <header>
   <a href="/" rel="noopener noreferrer" aria-label="Home">
-        <img src="/logo.svg" alt="">
+    <img src="/logo.svg" alt="" />
   </a>
   <ul class="desktop">
     <slot />
@@ -69,7 +69,7 @@
   }
 
   .mobile {
-        display:flex;
+    display: flex;
     background-color: var(--c-darkgray);
     border: 0px;
     width: 100%;
@@ -90,11 +90,11 @@
     padding: 0px;
   }
 
-    .mobile:focus-within > ul{
+  .mobile:focus-within > ul {
     display: flex;
   }
 
-    .mobile:focus-within > .placeholder{
+  .mobile:focus-within > .placeholder {
     display: none;
   }
 
@@ -109,7 +109,7 @@
 
   @media (min-width: 1120px) {
     .mobile {
-            display:none;
+      display: none;
     }
     .desktop {
       display: flex;

src/components/navbarEntry.astro

@@ -1,27 +1,32 @@
 ---
 export interface Props {
-	currentPage?: string;
+  currentPage?: string
-    link: string;
+  link: string
-    text: string;
+  text: string
-    icon: string;
+  icon: string
 }
 
-const {icon, text, link, currentPage } = Astro.props;
+const { icon, text, link, currentPage } = Astro.props
 
-let currPage = "";
+let currPage = ''
-const slug = link.replace(new RegExp('/', 'g'), "")
+const slug = link.replace(new RegExp('/', 'g'), '')
 
 if (currentPage === slug) {
-    currPage = "current"
+  currPage = 'current'
-} else if (currentPage === "home" && link === "/") {
+} else if (currentPage === 'home' && link === '/') {
-    currPage = "current"
+  currPage = 'current'
 }
 
-const fulllink = `/${slug}`;
+const fulllink = `/${slug}`
 ---
 
 <li>
-    <a href={fulllink} rel="noopener noreferrer" aria-label={text} class={currPage}>
+  <a
+    href={fulllink}
+    rel="noopener noreferrer"
+    aria-label={text}
+    class={currPage}
+  >
     <i class={icon}></i>
     {text}
   </a>
@@ -44,7 +49,7 @@ const fulllink = `/${slug}`;
     height: 100%;
     font-weight: bold;
   }
-    li > a:hover{
+  li > a:hover {
     color: var(--c-purplepink);
   }
   .current {

src/components/servantCard.astro

@@ -1,36 +1,38 @@
 ---
 export interface Props {
-	name: string;
+  name: string
-	level: string;
+  level: string
-    skills: string;
+  skills: string
-    np: string;
+  np: string
-    image_servant: string;
+  image_servant: string
-    image_bond: string;
+  image_bond: string
-    ml: string;
+  ml: string
-    bond10: string;
+  bond10: string
 }
 
-const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
+const { bond10, ml, image_bond, image_servant, np, skills, level, name } =
+  Astro.props
 
-const servant_img: string = `/servant/${image_servant}.webp`;
+const servant_img: string = `/servant/${image_servant}.webp`
 const bondce_img: string = `/ce/bond-ce/${image_bond}.webp`
-let bondce_css: string = "bond-ce";
+let bondce_css: string = 'bond-ce'
 
-if(bond10 === "false") {
+if (bond10 === 'false') {
-    bondce_css += " unobtained" 
+  bondce_css += ' unobtained'
 }
 ---
 
 <article>
   <div class="heading">{name}</div>
-    <img src={servant_img} alt={name}>
+  <img src={servant_img} alt={name} />
   <h2 class="subtext">
-        Level {level}<br>
+    Level {level}<br />
-        {skills}<br>
+    {skills}<br />
-        NP {np}</h2>
+    NP {np}
+  </h2>
   <div class="expand-on-hover">
-        <img class={bondce_css} src={bondce_img} alt="">
+    <img class={bondce_css} src={bondce_img} alt="" />
-        <h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2>
+    <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
   </div>
 </article>
 
@@ -74,19 +76,19 @@ if(bond10 === "false") {
     transition: transform var(--speed) var(--ease);
   }
 
-    article>img {
+  article > img {
-        width:120px;
+    width: 120px;
-        height:auto;
+    height: auto;
   }
 
-    @media(min-width: 512px) {
+  @media (min-width: 512px) {
     article {
       padding: 10px 10px;
       width: auto;
       height: auto;
     }
 
-        article>img {
+    article > img {
       width: 200px;
       height: auto;
     }
@@ -123,6 +125,6 @@ if(bond10 === "false") {
   }
 
   .unobtained {
-        filter: grayscale(1)
+    filter: grayscale(1);
   }
 </style>

src/components/taCard.astro

@@ -1,14 +1,15 @@
 ---
 export interface Props {
-	title: string;
+  title: string
-	link: string;
+  link: string
-	image: string;
+  image: string
 }
 
-const { image, link, title } = Astro.props;
+const { image, link, title } = Astro.props
 
 const icon: string = `background: url('/ta_icons/${image}.webp')`
 ---
+
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
     <div style={icon}>
@@ -18,7 +19,7 @@ const icon: string = `background: url('/ta_icons/${image}.webp')`
 </a>
 
 <style>
-article {
+  article {
     background-color: var(--c-darkergray);
     border-color: var(--c-darkgray);
     padding: 10px;
@@ -27,18 +28,18 @@ article {
     height: auto;
     width: auto;
     line-height: 128px;
-}
+  }
-article:hover {
+  article:hover {
     transform: scale(var(--hover-scale));
-}
+  }
-article > div {
+  article > div {
     width: 128px;
     height: 128px;
     object-fit: cover;
     object-position: 0% 0%;
-}
+  }
 
-article:hover h2 {
+  article:hover h2 {
     color: white;
     background-color: var(--c-darkgray);
     font-size: 18px;
@@ -48,9 +49,9 @@ article:hover h2 {
     width: 90%;
     border-radius: 5px;
     opacity: 90%;
-}
+  }
 
-article h2 {
+  article h2 {
     display: none;
-}
+  }
 </style>

src/components/technologyCard.astro

@@ -1,14 +1,15 @@
 ---
 export interface Props {
-	title: string;
+  title: string
-	link: string;
+  link: string
-	image: string;
+  image: string
 }
 
-const { image, link, title } = Astro.props;
+const { image, link, title } = Astro.props
 
 const icon: string = `background-image: url('/technologies/${image}.webp')`
 ---
+
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
     <div style={icon}>
@@ -18,7 +19,7 @@ const icon: string = `background-image: url('/technologies/${image}.webp')`
 </a>
 
 <style>
-article {
+  article {
     background-color: var(--c-darkergray);
     border-color: var(--c-darkgray);
     padding: 10px;
@@ -27,17 +28,17 @@ article {
     height: auto;
     width: auto;
     line-height: 100px;
-}
+  }
-article:hover {
+  article:hover {
     transform: scale(var(--hover-scale));
-}
+  }
-article > div {
+  article > div {
     background-size: contain;
     width: 100px;
     height: 100px;
-}
+  }
 
-article:hover h2 {
+  article:hover h2 {
     color: white;
     background-color: var(--c-darkgray);
     font-size: 18px;
@@ -47,9 +48,9 @@ article:hover h2 {
     width: 95%;
     border-radius: 5px;
     opacity: 90%;
-}
+  }
 
-article h2 {
+  article h2 {
     display: none;
-}
+  }
 </style>

src/layouts/Layout.astro

@@ -1,26 +1,26 @@
 ---
-import Navbar from '../components/navbar.astro';
+import Navbar from '../components/navbar.astro'
-import NavbarEntry from '../components/navbarEntry.astro';
+import NavbarEntry from '../components/navbarEntry.astro'
 import navdata from '../../static/_navdata.json'
 
 export interface Props {
-	title: string;
+  title: string
-	currentpage: string;
+  currentpage: string
-	descriptionOverride?: string;
+  descriptionOverride?: string
 }
 
-const { descriptionOverride, currentpage, title } = Astro.props;
+const { descriptionOverride, currentpage, title } = Astro.props
-let description;
+let description
 
-if(descriptionOverride === undefined) {
+if (descriptionOverride === undefined) {
-	description = "Firqs own site!";
+  description = 'Firqs own site!'
 } else {
-	description = descriptionOverride;
+  description = descriptionOverride
 }
 
-let currPage = "https://firq.dev/"
+let currPage = 'https://firq.dev/'
-if (currentpage !== "home") {
+if (currentpage !== 'home') {
-	currPage += currentpage;
+  currPage += currentpage
 }
 ---
 
@@ -33,17 +33,24 @@ if (currentpage !== "home") {
     <meta name="generator" content={Astro.generator} />
     <meta property="og:title" content={title} />
     <meta property="og:url" content={currPage} />
-    	<meta name="description" content={description}/>
+    <meta name="description" content={description} />
-    	<meta property="og:description" content={description}/>
+    <meta property="og:description" content={description} />
     <meta property="og:image" content="https://firq.dev/embed.png" />
     <meta property="og:type" content="website" />
     <meta property="og:locale" content="en_US" />
     <title>{title}</title>
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
+    />
   </head>
   <body>
     <Navbar>
-			{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))}
+      {
+        navdata.map((item) => (
+          <NavbarEntry currentPage={currentpage} {...item} />
+        ))
+      }
     </Navbar>
     <slot />
   </body>

src/layouts/baseSection.astro

@@ -1,9 +1,9 @@
 ---
 export interface Props {
-	title: string;
+  title: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
 
 <div>
@@ -37,7 +37,7 @@ const { title } = Astro.props;
     width: max-content;
     background-color: var(--c-darkgray);
   }
-	@media(min-width: 512px) {	
+  @media (min-width: 512px) {
     div {
       row-gap: 1.5em;
       column-gap: 1.5em;

src/layouts/basicSection.astro

@@ -1,9 +1,9 @@
 ---
 export interface Props {
-	title: string;
+  title: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
 
 <section>
@@ -37,5 +37,4 @@ const { title } = Astro.props;
       justify-content: left;
     }
   }
-    
 </style>

src/layouts/blogPost.astro

@@ -1,15 +1,18 @@
 ---
-import Layout from "./Layout.astro";
+import Layout from './Layout.astro'
-const { frontmatter } = Astro.props;
+const { frontmatter } = Astro.props
 
-const title = `${frontmatter.title} - Firq FGO Site`;
+const title = `${frontmatter.title} - Firq FGO Site`
-const description = frontmatter.description;
+const description = frontmatter.description
 const options_date: Intl.DateTimeFormatOptions = {
-    year: "numeric",
+  year: 'numeric',
-    month: "long",
+  month: 'long',
-    day: "2-digit",
+  day: '2-digit',
 }
-const date = new Date(frontmatter.pubDate).toLocaleDateString('en-GB', options_date);
+const date = new Date(frontmatter.pubDate).toLocaleDateString(
+  'en-GB',
+  options_date
+)
 ---
 
 <Layout title={title} currentpage="blog" descriptionOverride={description}>
@@ -58,8 +61,8 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString('en-GB', options_d
     padding-bottom: 5rem;
   }
   article :global(.astro-code) {
-        padding-left: 2em;
     width: auto;
+    padding: 1rem 1rem 1rem 2rem;
   }
   article :global(code) {
     font-weight: bold;

src/layouts/blogSection.astro

@@ -1,9 +1,9 @@
 ---
 export interface Props {
-	title: string;
+  title: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
 
 <section>
@@ -38,5 +38,4 @@ const { title } = Astro.props;
       justify-content: left;
     }
   }
-    
 </style>

src/layouts/contactSection.astro

@@ -1,10 +1,11 @@
 ---
 export interface Props {
-	title: string;
+  title: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
+
 <section>
   <h1>{title}</h1>
   <div>
@@ -13,14 +14,14 @@ const { title } = Astro.props;
 </section>
 
 <style>
-h1 {
+  h1 {
     color: white;
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
     background-color: var(--c-darkgray);
-}
+  }
-div {
+  div {
     row-gap: 1em;
     column-gap: 1em;
     justify-content: center;
@@ -28,10 +29,10 @@ div {
     display: flex;
     flex-flow: row wrap;
     padding: 1em;
-}
+  }
-@media (min-width: 512px) {
+  @media (min-width: 512px) {
     div {
       justify-content: left;
     }
-}
+  }
 </style>

src/layouts/customFooter.astro

@@ -1,39 +1,65 @@
 ---
-
 ---
 
 <footer>
   <div>
-        “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
+    “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex
-        use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
+    Inc. used under fair use. | View <a
-        official website</a> for more information.<br>
+      class="linker"
-        I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or Lasengle. I claim no ownership of any of the assets used that are 
+      href="https://fate-go.us"
-        created by any of the mentioned companies.<br>
+      target="_blank"
-        All of the opinions expressed are my own and may not reflect those of the asset providers.
+      rel="noopener noreferrer">the official website</a
+    > for more information.<br />
+    I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or Lasengle.
+    I claim no ownership of any of the assets used that are created by any of the
+    mentioned companies.<br />
+    All of the opinions expressed are my own and may not reflect those of the asset
+    providers.
   </div>
-    <br>
+  <br />
   <div>
-        Thanks to <a href=" https://atlasacademy.io/" target="_blank" rel="noopener noreferrer">Atlas Academy</a> for
+    Thanks to <a
-        providing the servant and ce images.
+      href=" https://atlasacademy.io/"
+      target="_blank"
+      rel="noopener noreferrer">Atlas Academy</a
+    > for providing the servant and ce images.
   </div>
-    <br>
+  <br />
   <div>
-        Thanks to <a href="https://mitsunee.com" target="_blank" rel="noopener noreferrer">Mitsunee</a> for the support when building this site. I could not have done it without you 🧡
+    Thanks to <a
-        Check out <a href="https://fgo.mitsunee.com" target="_blank" rel="noopener noreferrer">FGO Timers here</a>
+      href="https://mitsunee.com"
+      target="_blank"
+      rel="noopener noreferrer">Mitsunee</a
+    > for the support when building this site. I could not have done it without you
+    🧡 Check out <a
+      href="https://fgo.mitsunee.com"
+      target="_blank"
+      rel="noopener noreferrer">FGO Timers here</a
+    >
     <div class="sticky-image-wrapper">
-            <img src="/lurker.png" alt="">
+      <img src="/lurker.png" alt="" />
     </div>
   </div>
-    <br>
+  <br />
   <div>
-        Thanks to <a href="https://mastodon.neshweb.net/@neshura" target="_blank" rel="noopener noreferrer">Neshura</a> for providing me with a place to develop, store and host this site.
+    Thanks to <a
-        Check out <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer">his site here</a>
+      href="https://mastodon.neshweb.net/@neshura"
+      target="_blank"
+      rel="noopener noreferrer">Neshura</a
+    > for providing me with a place to develop, store and host this site. Check out
+    <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
+      >his site here</a
+    >
   </div>
-    <br>
+  <br />
   <div>
-        Thanks to <a href="https://twitter.com/its_Anthony_J" target="_blank" rel="noopener noreferrer">AnthonyJ</a> for providing me with the custom Shishou favicon.
+    Thanks to <a
+      href="https://twitter.com/its_Anthony_J"
+      target="_blank"
+      rel="noopener noreferrer">AnthonyJ</a
+    > for providing me with the custom Shishou favicon.
     <div class="sticky-image-wrapper">
-            <img src="/padoru.png" alt="">
+      <img src="/padoru.png" alt="" />
     </div>
   </div>
 </footer>
@@ -41,20 +67,20 @@
 <style>
   footer {
     color: white;
-        bottom:0;
+    bottom: 0;
   }
   footer > div > a {
-        color: white
+    color: white;
   }
   .sticky-image-wrapper {
     position: fixed;
     bottom: 0;
     right: 50%;
   }
-    :hover>.sticky-image-wrapper>img {
+  :hover > .sticky-image-wrapper > img {
     transform: translate(-50%, -100px);
   }
-    .sticky-image-wrapper>img {
+  .sticky-image-wrapper > img {
     display: block;
     position: absolute;
     bottom: -100px;

src/layouts/hometitle.astro

@@ -1,5 +1,4 @@
 ---
-
 ---
 
 <div class="wrap">

src/layouts/taSection.astro

@@ -1,17 +1,19 @@
 ---
 export interface Props {
-	title: string;
+  title: string
-    abovetext?: string;
+  abovetext?: string
 }
 
-const { abovetext, title } = Astro.props;
+const { abovetext, title } = Astro.props
-let h2text;
+let h2text
 if (abovetext === undefined) {
-    h2text = "The full list of my completed TAs can be found on my Youtube channel."
+  h2text =
+    'The full list of my completed TAs can be found on my Youtube channel.'
 } else {
-    h2text = ""
+  h2text = ''
 }
 ---
+
 <div>
   <h1>{title}</h1>
   <h2>{h2text}</h2>

src/pages/about.astro

@@ -1,47 +1,54 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
-import BasicSection from '../layouts/basicSection.astro';
+import BasicSection from '../layouts/basicSection.astro'
 
-import ContactSection from '../layouts/contactSection.astro';
+import ContactSection from '../layouts/contactSection.astro'
-import ContactCard from '../components/contactCard.astro';
+import ContactCard from '../components/contactCard.astro'
 import contactdata from '../../static/_contactdata.json'
 
-import CustomFooter from '../layouts/customFooter.astro';
+import CustomFooter from '../layouts/customFooter.astro'
-import TechnologyCard from '../components/technologyCard.astro';
+import TechnologyCard from '../components/technologyCard.astro'
 
-const techologydata = [{
+const techologydata = [
-		"title": "Astro",
+  {
-		"link": "https://astro.build",
+    title: 'Astro',
-		"image": "astro"
+    link: 'https://astro.build',
+    image: 'astro',
   },
   {
-		"title": "GitLab",
+    title: 'GitLab',
-		"link": "https://gitlab.io",
+    link: 'https://gitlab.io',
-		"image": "gitlab"
+    image: 'gitlab',
   },
   {
-		"title": "Typescript",
+    title: 'Typescript',
-		"link": "https://www.typescriptlang.org/",
+    link: 'https://www.typescriptlang.org/',
-		"image": "typescript"
+    image: 'typescript',
-	},]
+  },
+]
 
-const description = "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me.";
+const description =
+  "A summary of the technologies used as well as my contact information. You'll also find disclaimers and thank you notes for the people that helped me."
 ---
 
-<Layout title="About - Firq FGO Site" currentpage="about" descriptionOverride={description}>
+<Layout
+  title="About - Firq FGO Site"
+  currentpage="about"
+  descriptionOverride={description}
+>
   <BasicSection title="About">
-        This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript.
+    This is a small sideproject that I'm creating. First time doing webdev in
+    general, and first project using Typescript.
   </BasicSection>
   <BasicSection title="Technologies used">
-        {techologydata.map((item) => (<TechnologyCard {...item}/>))}
+    {techologydata.map((item) => <TechnologyCard {...item} />)}
   </BasicSection>
   <ContactSection title="Contact me">
-		{contactdata.map((item) => (<ContactCard {...item}/>))}
+    {contactdata.map((item) => <ContactCard {...item} />)}
   </ContactSection>
   <BasicSection title="Disclaimers">
     <CustomFooter />
   </BasicSection>
 </Layout>
 
-<style>
+<style></style>
-</style>

src/pages/blog.astro

@@ -1,18 +1,34 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
-import BlogCard from '../components/blogCard.astro';
+import BlogCard from '../components/blogCard.astro'
-import BlogSection from '../layouts/blogSection.astro';
+import BlogSection from '../layouts/blogSection.astro'
 
-const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
+const description =
-const allPosts = await Astro.glob("../pages/blog/*.md");
+  'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
-allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
+const allPosts = await Astro.glob('../pages/blog/*.md')
+allPosts.sort(
+  (a, b) =>
+    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
+)
 ---
 
-<Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
+<Layout
+  title="Blog - Firq FGO Site"
+  currentpage="blog"
+  descriptionOverride={description}
+>
   <BlogSection title="Blog Articles">
-        {allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
+    {
+      allPosts.map((post) => (
+        <BlogCard
+          url={post.url}
+          title={post.frontmatter.title}
+          pubdate={post.frontmatter.pubDate}
+          description={post.frontmatter.description}
+        />
+      ))
+    }
   </BlogSection>
 </Layout>
 
-<style>
+<style></style>
-</style>

src/pages/blog/astro-usage.md

@@ -2,9 +2,9 @@
 layout: ../../layouts/blogPost.astro
 title: 'How Astro powers this site'
 pubDate: 2023-03-09
-description: "Blog post talking about how Astro provides the basis for this website"
+description: 'Blog post talking about how Astro provides the basis for this website'
-author: "Firq"
+author: 'Firq'
-tags: ["astro", "coding"]
+tags: ['astro', 'coding']
 ---
 
 ## What is Astro
@@ -20,33 +20,45 @@ To be honest, the best way is to just show a bit of code:
 With the following lines, I create the homepage of my website (I am omitting any imports)
 
 ```astro
-
+<Layout
-<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
+  title="Home - Firq FGO Site"
-    <Hero></Hero>
+  currentpage="home"
+  descriptionOverride={description}
+>
+  <Hero />
   <BaseSection title="Favourites">
-        {favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
+    {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
 </Layout>
-
-
 ```
 
-Instead of having a huge amount of HTML, I instead have only a layout and some components to put the page together. What's also amazing is the fact that instead of declaring each of the favourites cards seperately, I can just use a JSON file with all needed parameters and map it to the component.
+Instead of having a huge amount of HTML, I instead have only a layout and some components to put the page together. What's also amazing is the fact that instead of declaring each of the favourites cards separately, I can just use a JSON file with all needed parameters and map it to the component.
 
 In addition, managing blogposts is really convenient: instead of creating a page for each component, I can just use the following:
 
 ```astro
 ---
-const allPosts = await Astro.glob("../pages/blog/*.md");
+const allPosts = await Astro.glob('../pages/blog/*.md')
 ---
 
-<Layout title="Blog - Firq FGO Site" currentpage="blog" descriptionOverride={description}>
+<Layout
+  title="Blog - Firq FGO Site"
+  currentpage="blog"
+  descriptionOverride={description}
+>
   <BlogSection title="Blog Articles">
-        {allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)}
+    {
+      allPosts.map((post) => (
+        <BlogCard
+          url={post.url}
+          title={post.frontmatter.title}
+          pubdate={post.frontmatter.pubDate}
+          description={post.frontmatter.description}
+        />
+      ))
+    }
   </BlogSection>
 </Layout>
-
-
 ```
 
 This imports all the markdown files from the `pages/blog` directory and then maps them to individual link cards. In the background, astro is formatting the markdown and creating a route under the `/blog` endpoint.
@@ -54,17 +66,16 @@ This imports all the markdown files from the `pages/blog` directory and then map
 Also, since I want to have my blogposts sorted by date, the following line rearranged the post order before continuing:
 
 ```typescript
-
+allPosts.sort(
-allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
+  (a, b) =>
-
+    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
-
+)
 ```
 
 The `frontmatter` interface is a kind of header for the markdown files which provides astro with metadata like title, author and such.
 It is structured like this:
 
 ```
-
 ---
 layout: ../../layouts/blogPost.astro
 title: 'How Astro powers this site'
@@ -73,8 +84,6 @@ description: "Blog post talking about how Astro provides the basis for this webs
 author: "Firq"
 tags: ["astro", "coding"]
 ---
-
-
 ```
 
 This would for example be the `frontmatter` of this very post. The layout defines how the post will be rendered, which is also just an Astro layout.
@@ -84,17 +93,14 @@ And for styling the markdown itself, you would use the `:global()` css property
 For example, the code blocks are styled like this:
 
 ```css
-
 article :global(.astro-code) {
-    padding-left: 2em;
   width: auto;
+  padding: 1rem 1rem 1rem 2rem;
 }
-
-
 ```
 
-But that's enough of me talking about how awesome I find Astro. I'm really looking forward what kind of developements I can achieve with this in the future.
+But that's enough of me talking about how awesome I find Astro. I'm really looking forward what kind of developments I can achieve with this in the future.
 
 **~ Firq**
 
-*next blog-post will probably be FGO-related*
+_next blog-post will probably be FGO-related_

src/pages/blog/hello-world.md

@@ -2,9 +2,9 @@
 layout: ../../layouts/blogPost.astro
 title: 'Hello World!'
 pubDate: 2023-03-08
-description: "First blog post, talking a bit about the site, the technologies behind it and the future ideas"
+description: 'First blog post, talking a bit about the site, the technologies behind it and the future ideas'
-author: "Firq"
+author: 'Firq'
-tags: ["astro", "hello"]
+tags: ['astro', 'hello']
 ---
 
 Well ... that took some time to get up and running. But nonetheless, here we are, and my site is starting to work!
@@ -22,13 +22,13 @@ But I got tired of always writing the same lines of code (because that happens i
 
 But then came [Astro](https://astro.build). When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those.
 Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
+
 ```typescript
-
 <BaseSection title="Servants">
-	{servantdata.map((item) => (<ServantCard {...item}/>))}
+  {servantdata.map((item) => (
+    <ServantCard {...item} />
+  ))}
 </BaseSection>
-
-
 ```
 
 But still, the whole site felt odd. It was a single page, with everything just cramped in there. So around 2 weeks ago, I started to rewrite the whole thing as a multi-page website. GitLab made it sometimes pretty hard (because having a baseurl of `/fgosite` was forced), but it worked and felt a lot cooler.

src/pages/index.astro

@@ -1,21 +1,25 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
-import Hero from '../components/hero.astro';
+import Hero from '../components/hero.astro'
-import BaseSection from '../layouts/baseSection.astro';
+import BaseSection from '../layouts/baseSection.astro'
-import FavouriteCard from '../components/favouriteCard.astro';
+import FavouriteCard from '../components/favouriteCard.astro'
-import favouritesdata from '../../static/_favouritesdata.json';
+import favouritesdata from '../../static/_favouritesdata.json'
 
-const description = "The very own page of Firq for providing informating about TA servants, listing past TA achievements and (in the future) hosting a blog for talking about FGO, Programming and other stuff"
+const description =
+  'The very own page of Firq for providing informating about TA servants, listing past TA achievements and (in the future) hosting a blog for talking about FGO, Programming and other stuff'
 ---
 
-<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
+<Layout
+  title="Home - Firq FGO Site"
+  currentpage="home"
+  descriptionOverride={description}
+>
   <Hero>
     <!--<a rel="me" href="https://mastodon.neshweb.net/@Firq">a</a> TODO Future me-->
   </Hero>
   <BaseSection title="Favourites">
-        {favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
+    {favouritesdata.map((item) => <FavouriteCard {...item} />)}
   </BaseSection>
 </Layout>
 
-<style>
+<style></style>
-</style>

src/pages/servants.astro

@@ -1,24 +1,28 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
-import BaseSection from '../layouts/baseSection.astro';
+import BaseSection from '../layouts/baseSection.astro'
 
-import ServantCard from '../components/servantCard.astro';
+import ServantCard from '../components/servantCard.astro'
 import servantdata from '../../static/_servantdata.json'
 
-import CeCard from '../components/ceCard.astro';
+import CeCard from '../components/ceCard.astro'
 import cedata from '../../static/_cedata.json'
 
-const description = "A list of all the servants and ces that Firq can offer up on support for TA."
+const description =
+  'A list of all the servants and ces that Firq can offer up on support for TA.'
 ---
 
-<Layout title="Servants - Firq FGO Site" currentpage="servants" descriptionOverride={description}>
+<Layout
+  title="Servants - Firq FGO Site"
+  currentpage="servants"
+  descriptionOverride={description}
+>
   <BaseSection title="Servants">
-		{servantdata.map((item) => (<ServantCard {...item}/>))}
+    {servantdata.map((item) => <ServantCard {...item} />)}
   </BaseSection>
   <BaseSection title="CEs">
-		{cedata.map((item) => (<CeCard {...item}/>))}
+    {cedata.map((item) => <CeCard {...item} />)}
   </BaseSection>
 </Layout>
 
-<style>
+<style></style>
-</style>

src/pages/ta-collection.astro

@@ -5,28 +5,34 @@
 // > You could have the notable ones like you do now, but at the bottom, there could be a drop-down or "expand" or "more" or
 // > some other section like that which you could click and show the rest
 
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout.astro'
 
-import TaSection from '../layouts/taSection.astro';
+import TaSection from '../layouts/taSection.astro'
-import TaCard from '../components/taCard.astro';
+import TaCard from '../components/taCard.astro'
 import tadata from '../../static/_tadata.json'
 
 const important_data = tadata.filter(function (el) {
-  return ["Ibuki 3T (Lostbelt 5.5)", "DB 7T (No Duplicates)", "Kingprotea 1T"].includes(el.title);
+  return [
-});
+    'Ibuki 3T (Lostbelt 5.5)',
+    'DB 7T (No Duplicates)',
+    'Kingprotea 1T',
+  ].includes(el.title)
+})
 
-
+const description = 'A collection of TAs previously completed be Firq.'
-const description = "A collection of TAs previously completed be Firq."
 ---
 
-<Layout title="TA Collection - Firq FGO Site" currentpage="ta-collection" descriptionOverride={description}>
+<Layout
+  title="TA Collection - Firq FGO Site"
+  currentpage="ta-collection"
+  descriptionOverride={description}
+>
   <TaSection title="Notable TAs" abovetext="">
-		{important_data.map((item) => (<TaCard {...item}/>))}
+    {important_data.map((item) => <TaCard {...item} />)}
   </TaSection>
   <TaSection title="Completed TAs">
-		{tadata.map((item) => (<TaCard {...item}/>))}
+    {tadata.map((item) => <TaCard {...item} />)}
   </TaSection>
 </Layout>
 
-<style>
+<style></style>
-</style>