Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Merge fix

Browse source
This commit is contained in:
Firq 2023-03-09 11:44:18 +01:00
parent 9584987150
commit a2ee3564bc
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
26 changed files with 1125 additions and 1039 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/components/blogCard.astro
View file

@ -1,71 +1,71 @@
--- ---
export interface Props { 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 = { 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"> <a href={url} rel="noopener noreferrer">
<article> <article>
<h2>{title}</h2> <h2>{title}</h2>
<h3>{date}</h3> <h3>{date}</h3>
<p>{description}</p> <p>{description}</p>
</article> </article>
</a> </a>
<style> <style>
a { a {
text-decoration: none; text-decoration: none;
height: auto; height: auto;
margin: 0.5rem; margin: 0.5rem;
} }
p { p {
color: white; color: white;
padding: 0em 0.5em; padding: 0em 0.5em;
text-align: left; text-align: left;
font-size: 1.1em; font-size: 1.1em;
margin: 0.5em; margin: 0.5em;
} }
article>h2 { article > h2 {
margin: 0.3em 0px; margin: 0.3em 0px;
color: var(--c-darkpurple); color: var(--c-darkpurple);
font-size: 1.3em; font-size: 1.3em;
line-height: normal; line-height: normal;
text-decoration: none; text-decoration: none;
} }
article>h3 { article > h3 {
margin: 0.2em; margin: 0.2em;
color: white; color: white;
font-size: 0.8em; font-size: 0.8em;
line-height: normal; line-height: normal;
text-decoration: none; text-decoration: none;
} }
article { article {
display: flex; display: flex;
flex: 1; flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
align-content: flex-start; align-content: flex-start;
justify-content: baseline; justify-content: baseline;
background-color: var(--c-darkergray); background-color: var(--c-darkergray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
min-height: 100%; min-height: 100%;
width: 11rem; width: 11rem;
} }
a:hover { a:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
</style> </style>

178
src/components/ceCard.astro
View file

@ -1,115 +1,115 @@
--- ---
export interface Props { 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` 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> <article>
<div class="heading-center">{name}</div> <div class="heading-center">{name}</div>
<div> <div>
<img class="ce-crop" src={ce_img} alt={name}> <img class="ce-crop" src={ce_img} alt={name} />
</div> </div>
<div class={mlb_image}> <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> </div>
</article> </article>
<style> <style>
.hidemlb { .hidemlb {
display: none; display: none;
height: 1em; height: 1em;
} }
article { article {
background-color: var(--c-darkergray); background-color: var(--c-darkergray);
border-color: var(--c-darkgray); border-color: var(--c-darkgray);
padding: 20px; padding: 20px;
padding-top: 5px; padding-top: 5px;
width: 35%; width: 35%;
height: auto; height: auto;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
margin: 0px; margin: 0px;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-rows: auto auto 3em; grid-template-rows: auto auto 3em;
gap: 0px 0px; gap: 0px 0px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas:
"." '.'
"." '.'
"."; '.';
} }
article:hover { article:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
article div { article div {
margin: 0.5em auto; margin: 0.5em auto;
} }
img { img {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.heading-center { .heading-center {
display: flex; display: flex;
height: 4rem; height: 4rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1.25em; font-size: 1.25em;
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
.ce-crop {
width: 6em;
height: 6em;
object-fit: cover;
object-position: 0% 0%;
}
.mlb {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.mlbalign {
display: flex;
justify-items: center;
align-items: center;
}
@media (min-width: 512px) {
.ce-crop { .ce-crop {
width: 6em; width: 7.5em;
height: 6em; height: 7.5em;
object-fit: cover;
object-position: 0% 0%;
} }
article {
.mlb { width: 10em;
width: 100%; grid-template-columns: auto;
margin-left: auto; grid-template-rows: auto auto 3em;
margin-right: auto;
} }
.mlbalign { .mlbalign {
display: flex; width: 7.5em;
justify-items: center;
align-items: center;
}
@media (min-width: 512px) {
.ce-crop {
width: 7.5em;
height: 7.5em;
}
article {
width: 10em;
grid-template-columns: auto;
grid-template-rows: auto auto 3em;
}
.mlbalign {
width: 7.5em;
}
} }
}
</style> </style>

52
src/components/contactCard.astro
View file

@ -1,37 +1,37 @@
--- ---
export interface Props { 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"> <a href={link} target="_blank" rel="noopener noreferrer">
<article class="contact do-hover"> <article class="contact do-hover">
<h2>{site}</h2> <h2>{site}</h2>
</article> </article>
</a> </a>
<style> <style>
article>h2 { article > h2 {
color: white; color: white;
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
line-height: normal; line-height: normal;
} }
article { article {
background-color: var(--c-darkergray); background-color: var(--c-darkergray);
border-color: var(--c-darkgray); border-color: var(--c-darkgray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
height: 128px; height: 128px;
width: 128px; width: 128px;
line-height: 128px; line-height: 128px;
} }
a:hover { a:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
</style> </style>

139
src/components/favouriteCard.astro
View file

@ -1,90 +1,89 @@
--- ---
export interface Props { 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> <article>
<div class="heading">{name}</div> <div class="heading">{name}</div>
<img src={img} alt={name}> <img src={img} alt={name} />
<h2 class="subtext"> <h2 class="subtext">
{origin} {origin}
</h2> </h2>
</article> </article>
<style> <style>
.heading { .heading {
display: flex; display: flex;
height: 4rem; height: 4rem;
font-size: 22px; font-size: 22px;
color: white; color: white;
max-width: 200px; max-width: 200px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
font-weight: bold; font-weight: bold;
margin: 0px; margin: 0px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.servants-container { .servants-container {
row-gap: 1em; row-gap: 1em;
column-gap: 1em; column-gap: 1em;
justify-content: center; justify-content: center;
align-self: center; align-self: center;
align-content: center; align-content: center;
} }
article:hover { article:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
}
article > img {
padding: 0.25em;
width: 120px;
height: auto;
}
@media (min-width: 512px) {
article { article {
display: flex; padding: 10px 10px;
flex-wrap: wrap; width: auto;
flex-direction: column; height: auto;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
} }
article>img { article > img {
padding: 0.25em; padding: 1.5em;
width:120px; width: 200px;
height:auto; height: auto;
} }
}
@media(min-width: 512px) { .subtext {
article { color: white;
padding: 10px 10px; font-size: 16px;
width: auto; font-weight: 600;
height: auto; margin: 5;
} line-height: 20px;
}
article>img {
padding: 1.5em;
width: 200px;
height: auto;
}
}
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style> </style>

29
src/components/hero.astro
View file

@ -1,23 +1,22 @@
--- ---
--- ---
<div> <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
<slot /> around.
<slot />
</div> </div>
<style> <style>
div { div {
display: flex; display: flex;
width: 100%; width: 100%;
height: 5em; height: 5em;
background-color: var(--c-gray); background-color: var(--c-gray);
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-size: 1.5em; font-size: 1.5em;
} }
</style> </style>

222
src/components/navbar.astro
View file

@ -2,126 +2,126 @@
--- ---
<header> <header>
<a href="/" rel="noopener noreferrer" aria-label="Home"> <a href="/" rel="noopener noreferrer" aria-label="Home">
<img src="/logo.svg" alt=""> <img src="/logo.svg" alt="" />
</a> </a>
<ul class="desktop"> <ul class="desktop">
<slot /> <slot />
</ul>
<button class="mobile" aria-label="Navigation Button">
<ul>
<slot />
</ul> </ul>
<button class="mobile" aria-label="Navigation Button"> <div class="placeholder"></div>
<ul> <i class="iconoir-menu"></i>
<slot /> </button>
</ul>
<div class="placeholder"></div>
<i class="iconoir-menu"></i>
</button>
</header> </header>
<style> <style>
header { header {
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
display: flex; display: flex;
height: auto; height: auto;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
line-height: 1.5em; line-height: 1.5em;
} }
header > a { header > a {
padding-left: 16px; padding-left: 16px;
padding-top: 8px; padding-top: 8px;
display: block; display: block;
height: 48px; height: 48px;
width: 48px; width: 48px;
} }
a > img { a > img {
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
}
.desktop {
align-items: center;
justify-content: space-around;
display: none;
flex-wrap: wrap;
flex-direction: row;
height: 64px;
width: 100%;
list-style-type: none;
row-gap: 0.5em;
column-gap: 0.5ch;
margin: 0px;
line-height: 1.5em;
}
.mobile > ul {
background-color: var(--c-darkgray);
align-items: center;
flex-wrap: wrap;
flex-direction: column;
display: flex;
width: 100%;
list-style-type: none;
line-height: 3em;
}
.placeholder {
display: flex;
width: 100%;
}
.mobile {
display: flex;
background-color: var(--c-darkgray);
border: 0px;
width: 100%;
height: 64px;
}
.mobile > i {
color: white;
font-weight: bold;
font-size: 2em;
align-self: flex-start;
padding-right: 1em;
padding-top: 16px;
}
.mobile > ul {
display: none;
padding: 0px;
}
.mobile:focus-within > ul {
display: flex;
}
.mobile:focus-within > .placeholder {
display: none;
}
.mobile:focus-within {
justify-content: top;
height: auto;
}
header:focus-within > a {
display: flex;
justify-self: top;
}
@media (min-width: 1120px) {
.mobile {
display: none;
} }
.desktop { .desktop {
align-items: center; display: flex;
justify-content: space-around;
display: none;
flex-wrap: wrap;
flex-direction: row;
height: 64px;
width: 100%;
list-style-type: none;
row-gap: 0.5em;
column-gap: 0.5ch;
margin: 0px;
line-height: 1.5em;
}
.mobile > ul {
background-color: var(--c-darkgray);
align-items: center;
flex-wrap: wrap;
flex-direction: column;
display: flex;
width: 100%;
list-style-type: none;
line-height: 3em;
} }
.placeholder { header {
display: flex; height: 64px;
width: 100%; align-items: center;
} }
.mobile { header > a {
display:flex; padding-top: 0px;
background-color: var(--c-darkgray);
border: 0px;
width: 100%;
height: 64px;
}
.mobile > i {
color: white;
font-weight: bold;
font-size: 2em;
align-self: flex-start;
padding-right: 1em;
padding-top: 16px;
}
.mobile > ul {
display: none;
padding: 0px;
}
.mobile:focus-within > ul{
display: flex;
}
.mobile:focus-within > .placeholder{
display: none;
}
.mobile:focus-within {
justify-content: top;
height: auto;
}
header:focus-within > a {
display: flex;
justify-self: top;
}
@media (min-width: 1120px) {
.mobile {
display:none;
}
.desktop {
display: flex;
}
header {
height: 64px;
align-items: center;
}
header > a {
padding-top: 0px;
}
} }
}
</style> </style>

79
src/components/navbarEntry.astro
View file

@ -1,53 +1,58 @@
--- ---
export interface Props { 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) { 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> <li>
<a href={fulllink} rel="noopener noreferrer" aria-label={text} class={currPage}> <a
<i class={icon}></i> href={fulllink}
{text} rel="noopener noreferrer"
</a> aria-label={text}
class={currPage}
>
<i class={icon}></i>
{text}
</a>
</li> </li>
<style> <style>
li { li {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: left; text-align: left;
display: flex; display: flex;
width: 200px; width: 200px;
} }
li > a { li > a {
color: white; color: white;
text-decoration: none; text-decoration: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.4em; font-size: 1.4em;
height: 100%; height: 100%;
font-weight: bold; font-weight: bold;
} }
li > a:hover{ li > a:hover {
color: var(--c-purplepink); color: var(--c-purplepink);
} }
.current { .current {
color: var(--c-darkpurple); color: var(--c-darkpurple);
} }
</style> </style>

204
src/components/servantCard.astro
View file

@ -1,128 +1,130 @@
--- ---
export interface Props { 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` 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> <article>
<div class="heading">{name}</div> <div class="heading">{name}</div>
<img src={servant_img} alt={name}> <img src={servant_img} alt={name} />
<h2 class="subtext"> <h2 class="subtext">
Level {level}<br> Level {level}<br />
{skills}<br> {skills}<br />
NP {np}</h2> NP {np}
<div class="expand-on-hover"> </h2>
<img class={bondce_css} src={bondce_img} alt=""> <div class="expand-on-hover">
<h2 class="subtext">Mana Loading: {ml === "Not Unlocked" && <br/>}{ml}</h2> <img class={bondce_css} src={bondce_img} alt="" />
</div> <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
</div>
</article> </article>
<style> <style>
.heading { .heading {
display: flex; display: flex;
height: 4rem; height: 4rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
color: white; color: white;
max-width: 200px; max-width: 200px;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
font-weight: bold; font-weight: bold;
} }
.servants-container { .servants-container {
row-gap: 1em; row-gap: 1em;
column-gap: 1em; column-gap: 1em;
justify-content: center; justify-content: center;
align-self: center; align-self: center;
} }
article:hover { article:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));
} }
article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
}
article > img {
width: 120px;
height: auto;
}
@media (min-width: 512px) {
article { article {
display: flex; padding: 10px 10px;
flex-wrap: wrap; width: auto;
flex-direction: column; height: auto;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
} }
article>img { article > img {
width:120px; width: 200px;
height:auto; height: auto;
} }
}
@media(min-width: 512px) { .subtext {
article { color: white;
padding: 10px 10px; font-size: 16px;
width: auto; font-weight: 600;
height: auto; margin: 5;
} line-height: 20px;
}
article>img { .expand-on-hover {
width: 200px; z-index: 99;
height: auto; transform: scaleY(0);
} transform-origin: top;
} position: absolute;
top: 95%;
left: 0px;
right: 0px;
}
.subtext { article:hover .expand-on-hover {
color: white; transform: scaleY(1);
font-size: 16px; transition: transform 200ms ease-in-out;
font-weight: 600; background-color: var(--c-duskgray);
margin: 5; }
line-height: 20px;
}
.expand-on-hover { .bond-ce {
z-index: 99; padding-top: 0.75rem;
transform: scaleY(0); height: 3rem;
transform-origin: top; width: auto;
position: absolute; }
top: 95%;
left: 0px;
right: 0px;
}
article:hover .expand-on-hover { .unobtained {
transform: scaleY(1); filter: grayscale(1);
transition: transform 200ms ease-in-out; }
background-color: var(--c-duskgray);
}
.bond-ce {
padding-top: 0.75rem;
height: 3rem;
width: auto;
}
.unobtained {
filter: grayscale(1)
}
</style> </style>

39
src/components/taCard.astro
View file

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

39
src/components/technologyCard.astro
View file

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

109
src/layouts/Layout.astro
View file

@ -1,69 +1,76 @@
--- ---
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' import navdata from '../../static/_navdata.json'
export interface Props { 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 { } 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
} }
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/ico" href="/favicon.ico" /> <link rel="icon" type="image/ico" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta property="og:title" content={title} /> <meta property="og:title" content={title} />
<meta property="og:url" content={currPage} /> <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:image" content="https://firq.dev/embed.png" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" /> <meta property="og:locale" content="en_US" />
<title>{title}</title> <title>{title}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"> <link
</head> rel="stylesheet"
<body> href="https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css"
<Navbar> />
{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))} </head>
</Navbar> <body>
<slot /> <Navbar>
</body> {
navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} />
))
}
</Navbar>
<slot />
</body>
</html> </html>
<style is:global> <style is:global>
:root { :root {
--hover-scale: 1.05; --hover-scale: 1.05;
--speed: 50%; --speed: 50%;
--ease: 50%; --ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e; --c-darkgray: #1e1e1e;
--c-duskgray: #242424; --c-duskgray: #242424;
--c-gray: #2e2e2e; --c-gray: #2e2e2e;
--c-lightgray: #3e3e3e; --c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff; --c-darkpurple: #b86cff;
--c-purplepink: #c105ff; --c-purplepink: #c105ff;
--c-darkergray: #1b1b1b; --c-darkergray: #1b1b1b;
} }
body { body {
background: var(--c-lightgray); background: var(--c-lightgray);
margin: 0px; margin: 0px;
} }
</style> </style>

66
src/layouts/baseSection.astro
View file

@ -1,46 +1,46 @@
--- ---
export interface Props { export interface Props {
title: string; title: string
} }
const { title } = Astro.props; const { title } = Astro.props
--- ---
<div> <div>
<h1>{title}</h1> <h1>{title}</h1>
<div> <div>
<slot /> <slot />
</div> </div>
</div> </div>
<style> <style>
div {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
div > div {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
display: flex;
flex-flow: row wrap;
padding: 1em;
position: relative;
}
div > h1 {
color: white;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
}
@media (min-width: 512px) {
div { div {
display: flex; row-gap: 1.5em;
flex-direction: column; column-gap: 1.5em;
justify-content: center;
text-align: center;
}
div > div {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
display: flex;
flex-flow: row wrap;
padding: 1em;
position: relative;
}
div > h1 {
color: white;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
} }
@media(min-width: 512px) { }
div {
row-gap: 1.5em;
column-gap: 1.5em;
}
}
</style> </style>

55
src/layouts/basicSection.astro
View file

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

139
src/layouts/blogPost.astro
View file

@ -1,83 +1,86 @@
--- ---
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 = { 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}> <Layout title={title} currentpage="blog" descriptionOverride={description}>
<div> <div>
<h1> <h1>
{frontmatter.title} {frontmatter.title}
</h1> </h1>
<p>by {frontmatter.author} • Published on {date}</p> <p>by {frontmatter.author} • Published on {date}</p>
<article> <article>
<slot /> <slot />
</article> </article>
</div> </div>
</Layout> </Layout>
<style> <style>
h1 {
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
}
p {
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-gray);
}
article :global(h2) {
margin-right: 3rem;
word-wrap: normal;
color: white;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
}
article :global(a) {
color: var(--c-darkpurple);
text-decoration: none;
}
article {
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
font-size: 1.1em;
padding-bottom: 5rem;
}
article :global(.astro-code) {
width: auto;
padding: 1rem 1rem 1rem 2rem;
}
article :global(code) {
font-weight: bold;
color: orange;
}
@media (min-width: 1500px) {
article {
margin-left: 15rem;
margin-right: 15rem;
}
h1 { h1 {
color: white; margin-left: 15rem;
margin: 0.5rem 3rem 0.5rem 3rem; margin-right: 15rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
} }
p { p {
color: white; margin-left: 15rem;
margin: 0.5rem 3rem 0.5rem 3rem; margin-right: 15rem;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-gray);
}
article :global(h2) {
margin-right: 3rem;
word-wrap: normal;
color: white;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
}
article :global(a) {
color: var(--c-darkpurple);
text-decoration: none;
}
article {
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
font-size: 1.1em;
padding-bottom: 5rem;
}
article :global(.astro-code) {
padding-left: 2em;
width: auto;
}
article :global(code) {
font-weight: bold;
color: orange;
}
@media (min-width: 1500px) {
article {
margin-left: 15rem;
margin-right: 15rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
}
p {
margin-left: 15rem;
margin-right: 15rem;
}
} }
}
</style> </style>

57
src/layouts/blogSection.astro
View file

@ -1,42 +1,41 @@
--- ---
export interface Props { export interface Props {
title: string; title: string
} }
const { title } = Astro.props; const { title } = Astro.props
--- ---
<section> <section>
<h1>{title}</h1> <h1>{title}</h1>
<div> <div>
<slot /> <slot />
</div> </div>
</section> </section>
<style> <style>
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
} }
div {
display: flex;
flex-flow: row wrap;
row-gap: 1em;
column-gap: 1em;
align-self: center;
align-items: stretch;
justify-content: space-around;
padding: 1em;
color: white;
font-size: 1em;
}
@media (min-width: 512px) {
div { div {
display: flex; justify-content: left;
flex-flow: row wrap;
row-gap: 1em;
column-gap: 1em;
align-self: center;
align-items: stretch;
justify-content: space-around;
padding: 1em;
color: white;
font-size: 1em;
} }
@media (min-width: 512px) { }
div {
justify-content: left;
}
}
</style> </style>

27
src/layouts/contactSection.astro
View file

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

138
src/layouts/customFooter.astro
View file

@ -1,66 +1,92 @@
--- ---
--- ---
<footer> <footer>
<div> <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 />
<div>
Thanks to <a
href=" https://atlasacademy.io/"
target="_blank"
rel="noopener noreferrer">Atlas Academy</a
> for providing the servant and ce images.
</div>
<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
🧡 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="" />
</div> </div>
<br> </div>
<div> <br />
Thanks to <a href=" https://atlasacademy.io/" target="_blank" rel="noopener noreferrer">Atlas Academy</a> for <div>
providing the servant and ce images. Thanks to <a
</div> href="https://mastodon.neshweb.net/@neshura"
<br> target="_blank"
<div> rel="noopener noreferrer">Neshura</a
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 🧡 > for providing me with a place to develop, store and host this site. Check out
Check out <a href="https://fgo.mitsunee.com" target="_blank" rel="noopener noreferrer">FGO Timers here</a> <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
<div class="sticky-image-wrapper"> >his site here</a
<img src="/lurker.png" alt=""> >
</div> </div>
</div> <br />
<br> <div>
<div> Thanks to <a
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. href="https://twitter.com/its_Anthony_J"
Check out <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer">his site here</a> target="_blank"
</div> rel="noopener noreferrer">AnthonyJ</a
<br> > for providing me with the custom Shishou favicon.
<div> <div class="sticky-image-wrapper">
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. <img src="/padoru.png" alt="" />
<div class="sticky-image-wrapper">
<img src="/padoru.png" alt="">
</div>
</div> </div>
</div>
</footer> </footer>
<style> <style>
footer { footer {
color: white; color: white;
bottom:0; bottom: 0;
} }
footer > div > a { footer > div > a {
color: white color: white;
} }
.sticky-image-wrapper { .sticky-image-wrapper {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 50%; right: 50%;
} }
:hover>.sticky-image-wrapper>img { :hover > .sticky-image-wrapper > img {
transform: translate(-50%, -100px); transform: translate(-50%, -100px);
} }
.sticky-image-wrapper>img { .sticky-image-wrapper > img {
display: block; display: block;
position: absolute; position: absolute;
bottom: -100px; bottom: -100px;
height: 64px; height: 64px;
width: 64px; width: 64px;
transition: transform 1s ease-in-out; transition: transform 1s ease-in-out;
transform: translateX(-50%); transform: translateX(-50%);
} }
</style> </style>

45
src/layouts/hometitle.astro
View file

@ -1,31 +1,30 @@
--- ---
--- ---
<div class="wrap"> <div class="wrap">
<div> <div>
<span>FIRQ FGO SITE</span> <span>FIRQ FGO SITE</span>
<slot /> <slot />
</div> </div>
</div> </div>
<style> <style>
.wrap { .wrap {
display: block; display: block;
} }
.wrap > div { .wrap > div {
display: flex; display: flex;
padding: 15% 20%; padding: 15% 20%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
span { span {
display: inline-block; display: inline-block;
padding: 0.1em; padding: 0.1em;
font-weight: bold; font-weight: bold;
color: white; color: white;
font-size: 5em; font-size: 5em;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
} }
</style> </style>

72
src/layouts/taSection.astro
View file

@ -1,48 +1,50 @@
--- ---
export interface Props { 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) { 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 { } else {
h2text = "" h2text = ''
} }
--- ---
<div> <div>
<h1>{title}</h1> <h1>{title}</h1>
<h2>{h2text}</h2> <h2>{h2text}</h2>
<div class="container ta-container"> <div class="container ta-container">
<slot /> <slot />
</div> </div>
</div> </div>
<style> <style>
div > div { div > div {
row-gap: 1.5em; row-gap: 1.5em;
column-gap: 1.5em; column-gap: 1.5em;
justify-content: center; justify-content: center;
align-self: center; align-self: center;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
padding: 1em; padding: 1em;
} }
h1 { h1 {
color: white; color: white;
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: var(--c-darkgray); background-color: var(--c-darkgray);
} }
h2 { h2 {
color: white; color: white;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin: 5; margin: 5;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
} }
</style> </style>

81
src/pages/about.astro
View file

@ -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 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", {
"link": "https://gitlab.io", title: 'GitLab',
"image": "gitlab" link: 'https://gitlab.io',
}, image: 'gitlab',
{ },
"title": "Typescript", {
"link": "https://www.typescriptlang.org/", title: 'Typescript',
"image": "typescript" link: 'https://www.typescriptlang.org/',
},] 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
<BasicSection title="About"> title="About - Firq FGO Site"
This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript. currentpage="about"
</BasicSection> descriptionOverride={description}
<BasicSection title="Technologies used"> >
{techologydata.map((item) => (<TechnologyCard {...item}/>))} <BasicSection title="About">
</BasicSection> This is a small sideproject that I'm creating. First time doing webdev in
<ContactSection title="Contact me"> general, and first project using Typescript.
{contactdata.map((item) => (<ContactCard {...item}/>))} </BasicSection>
</ContactSection> <BasicSection title="Technologies used">
<BasicSection title="Disclaimers"> {techologydata.map((item) => <TechnologyCard {...item} />)}
<CustomFooter /> </BasicSection>
</BasicSection> <ContactSection title="Contact me">
{contactdata.map((item) => <ContactCard {...item} />)}
</ContactSection>
<BasicSection title="Disclaimers">
<CustomFooter />
</BasicSection>
</Layout> </Layout>
<style> <style></style>
</style>

40
src/pages/blog.astro
View file

@ -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
<BlogSection title="Blog Articles"> title="Blog - Firq FGO Site"
{allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)} currentpage="blog"
</BlogSection> 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}
/>
))
}
</BlogSection>
</Layout> </Layout>
<style> <style></style>
</style>

74
src/pages/blog/astro-usage.md
View file

@ -2,9 +2,9 @@
layout: ../../layouts/blogPost.astro layout: ../../layouts/blogPost.astro
title: 'How Astro powers this site' title: 'How Astro powers this site'
pubDate: 2023-03-09 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 ## What is Astro
@ -17,36 +17,48 @@ For a fast overview of Astro, look no further than [Astro in 100 Seconds](https:
To be honest, the best way is to just show a bit of code: 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) With the following lines, I create the homepage of my website (I am omitting any imports)
```astro ```astro
<Layout
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}> title="Home - Firq FGO Site"
<Hero></Hero> currentpage="home"
<BaseSection title="Favourites"> descriptionOverride={description}
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))} >
</BaseSection> <Hero />
<BaseSection title="Favourites">
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
</BaseSection>
</Layout> </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: In addition, managing blogposts is really convenient: instead of creating a page for each component, I can just use the following:
```astro ```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
<BlogSection title="Blog Articles"> title="Blog - Firq FGO Site"
{allPosts.map((post) => <BlogCard url={post.url} title={post.frontmatter.title} pubdate={post.frontmatter.pubDate} description={post.frontmatter.description}/>)} currentpage="blog"
</BlogSection> 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}
/>
))
}
</BlogSection>
</Layout> </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. 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: Also, since I want to have my blogposts sorted by date, the following line rearranged the post order before continuing:
```typescript ```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. 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: It is structured like this:
``` ```
--- ---
layout: ../../layouts/blogPost.astro layout: ../../layouts/blogPost.astro
title: 'How Astro powers this site' 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" author: "Firq"
tags: ["astro", "coding"] 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. 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: For example, the code blocks are styled like this:
```css ```css
article :global(.astro-code) { article :global(.astro-code) {
padding-left: 2em; width: auto;
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** **~ Firq**
*next blog-post will probably be FGO-related* _next blog-post will probably be FGO-related_

14
src/pages/blog/hello-world.md
View file

@ -2,9 +2,9 @@
layout: ../../layouts/blogPost.astro layout: ../../layouts/blogPost.astro
title: 'Hello World!' title: 'Hello World!'
pubDate: 2023-03-08 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! 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. 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: Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
```typescript ```typescript
<BaseSection title="Servants"> <BaseSection title="Servants">
{servantdata.map((item) => (<ServantCard {...item}/>))} {servantdata.map((item) => (
<ServantCard {...item} />
))}
</BaseSection> </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. 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.

34
src/pages/index.astro
View file

@ -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
<Hero> title="Home - Firq FGO Site"
<!--<a rel="me" href="https://mastodon.neshweb.net/@Firq">a</a> TODO Future me--> currentpage="home"
</Hero> descriptionOverride={description}
<BaseSection title="Favourites"> >
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))} <Hero>
</BaseSection> <!--<a rel="me" href="https://mastodon.neshweb.net/@Firq">a</a> TODO Future me-->
</Hero>
<BaseSection title="Favourites">
{favouritesdata.map((item) => <FavouriteCard {...item} />)}
</BaseSection>
</Layout> </Layout>
<style> <style></style>
</style>

32
src/pages/servants.astro
View file

@ -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 servantdata from '../../static/_servantdata.json'
import CeCard from '../components/ceCard.astro'; import CeCard from '../components/ceCard.astro'
import cedata from '../../static/_cedata.json' 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
<BaseSection title="Servants"> title="Servants - Firq FGO Site"
{servantdata.map((item) => (<ServantCard {...item}/>))} currentpage="servants"
</BaseSection> descriptionOverride={description}
<BaseSection title="CEs"> >
{cedata.map((item) => (<CeCard {...item}/>))} <BaseSection title="Servants">
</BaseSection> {servantdata.map((item) => <ServantCard {...item} />)}
</BaseSection>
<BaseSection title="CEs">
{cedata.map((item) => <CeCard {...item} />)}
</BaseSection>
</Layout> </Layout>
<style> <style></style>
</style>

38
src/pages/ta-collection.astro
View file

@ -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 // > 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 // > 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' import tadata from '../../static/_tadata.json'
const important_data = tadata.filter(function (el) { 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
<TaSection title="Notable TAs" abovetext=""> title="TA Collection - Firq FGO Site"
{important_data.map((item) => (<TaCard {...item}/>))} currentpage="ta-collection"
</TaSection> descriptionOverride={description}
<TaSection title="Completed TAs"> >
{tadata.map((item) => (<TaCard {...item}/>))} <TaSection title="Notable TAs" abovetext="">
</TaSection> {important_data.map((item) => <TaCard {...item} />)}
</TaSection>
<TaSection title="Completed TAs">
{tadata.map((item) => <TaCard {...item} />)}
</TaSection>
</Layout> </Layout>
<style> <style></style>
</style>