Merge fix

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

View file

@ -1,71 +1,71 @@
---
export interface Props {
url: string | undefined;
title: string;
pubdate: string;
description: string;
url: string | undefined
title: string
pubdate: string
description: string
}
const options_date: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "2-digit",
year: 'numeric',
month: 'long',
day: '2-digit',
}
const { description, pubdate, url, title } = Astro.props;
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
const { description, pubdate, url, title } = Astro.props
const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
---
<a href={url} rel="noopener noreferrer">
<article>
<h2>{title}</h2>
<h3>{date}</h3>
<p>{description}</p>
</article>
<article>
<h2>{title}</h2>
<h3>{date}</h3>
<p>{description}</p>
</article>
</a>
<style>
a {
text-decoration: none;
height: auto;
margin: 0.5rem;
}
p {
color: white;
padding: 0em 0.5em;
text-align: left;
font-size: 1.1em;
margin: 0.5em;
}
article>h2 {
margin: 0.3em 0px;
color: var(--c-darkpurple);
font-size: 1.3em;
line-height: normal;
text-decoration: none;
}
article>h3 {
margin: 0.2em;
color: white;
font-size: 0.8em;
line-height: normal;
text-decoration: none;
}
article {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: flex-start;
justify-content: baseline;
background-color: var(--c-darkergray);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
width: 11rem;
}
a:hover {
transform: scale(var(--hover-scale));
}
</style>
a {
text-decoration: none;
height: auto;
margin: 0.5rem;
}
p {
color: white;
padding: 0em 0.5em;
text-align: left;
font-size: 1.1em;
margin: 0.5em;
}
article > h2 {
margin: 0.3em 0px;
color: var(--c-darkpurple);
font-size: 1.3em;
line-height: normal;
text-decoration: none;
}
article > h3 {
margin: 0.2em;
color: white;
font-size: 0.8em;
line-height: normal;
text-decoration: none;
}
article {
display: flex;
flex: 1;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: flex-start;
justify-content: baseline;
background-color: var(--c-darkergray);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
width: 11rem;
}
a:hover {
transform: scale(var(--hover-scale));
}
</style>

View file

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

View file

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

View file

@ -1,90 +1,89 @@
---
export interface Props {
name: string;
origin: string;
image: string;
name: string
origin: string
image: string
}
const {image, origin, name } = Astro.props;
const img: string = `/favourites/${image}.webp`;
const { image, origin, name } = Astro.props
const img: string = `/favourites/${image}.webp`
---
<article>
<div class="heading">{name}</div>
<img src={img} alt={name}>
<h2 class="subtext">
{origin}
</h2>
<div class="heading">{name}</div>
<img src={img} alt={name} />
<h2 class="subtext">
{origin}
</h2>
</article>
<style>
.heading {
display: flex;
height: 4rem;
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
margin: 0px;
justify-content: center;
align-items: center;
}
.heading {
display: flex;
height: 4rem;
font-size: 22px;
color: white;
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
margin: 0px;
justify-content: center;
align-items: center;
}
.servants-container {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
align-content: center;
}
.servants-container {
row-gap: 1em;
column-gap: 1em;
justify-content: center;
align-self: center;
align-content: center;
}
article:hover {
transform: scale(var(--hover-scale));
}
article:hover {
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 {
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);
padding: 10px 10px;
width: auto;
height: auto;
}
article>img {
padding: 0.25em;
width:120px;
height:auto;
article > img {
padding: 1.5em;
width: 200px;
height: auto;
}
}
@media(min-width: 512px) {
article {
padding: 10px 10px;
width: auto;
height: auto;
}
article>img {
padding: 1.5em;
width: 200px;
height: auto;
}
}
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style>
.subtext {
color: white;
font-size: 16px;
font-weight: 600;
margin: 5;
line-height: 20px;
}
</style>

View file

@ -1,23 +1,22 @@
---
---
<div>
This is still a work in progress and continuously expanded. Feel free to look around.
<slot />
This is still a work in progress and continuously expanded. Feel free to look
around.
<slot />
</div>
<style>
div {
display: flex;
width: 100%;
height: 5em;
background-color: var(--c-gray);
text-align: center;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
}
</style>
div {
display: flex;
width: 100%;
height: 5em;
background-color: var(--c-gray);
text-align: center;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5em;
}
</style>

View file

@ -2,126 +2,126 @@
---
<header>
<a href="/" rel="noopener noreferrer" aria-label="Home">
<img src="/logo.svg" alt="">
</a>
<ul class="desktop">
<slot />
<a href="/" rel="noopener noreferrer" aria-label="Home">
<img src="/logo.svg" alt="" />
</a>
<ul class="desktop">
<slot />
</ul>
<button class="mobile" aria-label="Navigation Button">
<ul>
<slot />
</ul>
<button class="mobile" aria-label="Navigation Button">
<ul>
<slot />
</ul>
<div class="placeholder"></div>
<i class="iconoir-menu"></i>
</button>
<div class="placeholder"></div>
<i class="iconoir-menu"></i>
</button>
</header>
<style>
header {
background-color: var(--c-darkgray);
display: flex;
height: auto;
width: 100%;
align-items: flex-start;
line-height: 1.5em;
}
header > a {
padding-left: 16px;
padding-top: 8px;
display: block;
height: 48px;
width: 48px;
}
a > img {
height: 100%;
width: 100%;
object-fit: contain;
header {
background-color: var(--c-darkgray);
display: flex;
height: auto;
width: 100%;
align-items: flex-start;
line-height: 1.5em;
}
header > a {
padding-left: 16px;
padding-top: 8px;
display: block;
height: 48px;
width: 48px;
}
a > img {
height: 100%;
width: 100%;
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 {
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;
display: flex;
}
.placeholder {
display: flex;
width: 100%;
header {
height: 64px;
align-items: center;
}
.mobile {
display:flex;
background-color: var(--c-darkgray);
border: 0px;
width: 100%;
height: 64px;
header > a {
padding-top: 0px;
}
.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>

View file

@ -1,53 +1,58 @@
---
export interface Props {
currentPage?: string;
link: string;
text: string;
icon: string;
currentPage?: string
link: string
text: string
icon: string
}
const {icon, text, link, currentPage } = Astro.props;
const { icon, text, link, currentPage } = Astro.props
let currPage = "";
const slug = link.replace(new RegExp('/', 'g'), "")
let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '')
if (currentPage === slug) {
currPage = "current"
} else if (currentPage === "home" && link === "/") {
currPage = "current"
currPage = 'current'
} else if (currentPage === 'home' && link === '/') {
currPage = 'current'
}
const fulllink = `/${slug}`;
const fulllink = `/${slug}`
---
<li>
<a href={fulllink} rel="noopener noreferrer" aria-label={text} class={currPage}>
<i class={icon}></i>
{text}
</a>
<a
href={fulllink}
rel="noopener noreferrer"
aria-label={text}
class={currPage}
>
<i class={icon}></i>
{text}
</a>
</li>
<style>
li {
align-items: center;
justify-content: center;
text-align: left;
display: flex;
width: 200px;
}
li > a {
color: white;
text-decoration: none;
justify-content: center;
align-items: center;
font-size: 1.4em;
height: 100%;
font-weight: bold;
}
li > a:hover{
color: var(--c-purplepink);
}
.current {
color: var(--c-darkpurple);
}
</style>
li {
align-items: center;
justify-content: center;
text-align: left;
display: flex;
width: 200px;
}
li > a {
color: white;
text-decoration: none;
justify-content: center;
align-items: center;
font-size: 1.4em;
height: 100%;
font-weight: bold;
}
li > a:hover {
color: var(--c-purplepink);
}
.current {
color: var(--c-darkpurple);
}
</style>

View file

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

View file

@ -1,24 +1,25 @@
---
export interface Props {
title: string;
link: string;
image: string;
title: string
link: 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}>
<h2>{title}</h2>
</div>
</article>
<article>
<div style={icon}>
<h2>{title}</h2>
</div>
</article>
</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>
}
</style>

View file

@ -1,24 +1,25 @@
---
export interface Props {
title: string;
link: string;
image: string;
title: string
link: 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}>
<h2>{title}</h2>
</div>
</article>
<article>
<div style={icon}>
<h2>{title}</h2>
</div>
</article>
</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>
}
</style>

View file

@ -1,69 +1,76 @@
---
import Navbar from '../components/navbar.astro';
import NavbarEntry from '../components/navbarEntry.astro';
import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro'
import navdata from '../../static/_navdata.json'
export interface Props {
title: string;
currentpage: string;
descriptionOverride?: string;
title: string
currentpage: string
descriptionOverride?: string
}
const { descriptionOverride, currentpage, title } = Astro.props;
let description;
const { descriptionOverride, currentpage, title } = Astro.props
let description
if(descriptionOverride === undefined) {
description = "Firqs own site!";
if (descriptionOverride === undefined) {
description = 'Firqs own site!'
} else {
description = descriptionOverride;
description = descriptionOverride
}
let currPage = "https://firq.dev/"
if (currentpage !== "home") {
currPage += currentpage;
let currPage = 'https://firq.dev/'
if (currentpage !== 'home') {
currPage += currentpage
}
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<meta property="og:title" content={title} />
<meta property="og:url" content={currPage} />
<meta name="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">
</head>
<body>
<Navbar>
{navdata.map((item) => (<NavbarEntry currentPage={currentpage} {...item}/>))}
</Navbar>
<slot />
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<meta property="og:title" content={title} />
<meta property="og:url" content={currPage} />
<meta name="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"
/>
</head>
<body>
<Navbar>
{
navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} />
))
}
</Navbar>
<slot />
</body>
</html>
<style is:global>
:root {
--hover-scale: 1.05;
--speed: 50%;
--ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
}
body {
background: var(--c-lightgray);
margin: 0px;
}
:root {
--hover-scale: 1.05;
--speed: 50%;
--ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
}
body {
background: var(--c-lightgray);
margin: 0px;
}
</style>

View file

@ -1,46 +1,46 @@
---
export interface Props {
title: string;
title: string
}
const { title } = Astro.props;
const { title } = Astro.props
---
<div>
<h1>{title}</h1>
<div>
<slot />
</div>
<h1>{title}</h1>
<div>
<slot />
</div>
</div>
<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 {
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);
row-gap: 1.5em;
column-gap: 1.5em;
}
@media(min-width: 512px) {
div {
row-gap: 1.5em;
column-gap: 1.5em;
}
}
</style>
}
</style>

View file

@ -1,41 +1,40 @@
---
export interface Props {
title: string;
title: string
}
const { title } = Astro.props;
const { title } = Astro.props
---
<section>
<h1>{title}</h1>
<div>
<slot />
</div>
<h1>{title}</h1>
<div>
<slot />
</div>
</section>
<style>
h1 {
color: white;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
}
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 {
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 {
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;
justify-content: left;
}
@media (min-width: 512px) {
div {
justify-content: left;
}
}
</style>
}
</style>

View file

@ -1,83 +1,86 @@
---
import Layout from "./Layout.astro";
const { frontmatter } = Astro.props;
import Layout from './Layout.astro'
const { frontmatter } = Astro.props
const title = `${frontmatter.title} - Firq FGO Site`;
const description = frontmatter.description;
const title = `${frontmatter.title} - Firq FGO Site`
const description = frontmatter.description
const options_date: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "2-digit",
year: 'numeric',
month: 'long',
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}>
<div>
<h1>
{frontmatter.title}
</h1>
<p>by {frontmatter.author} • Published on {date}</p>
<article>
<slot />
</article>
</div>
<div>
<h1>
{frontmatter.title}
</h1>
<p>by {frontmatter.author} • Published on {date}</p>
<article>
<slot />
</article>
</div>
</Layout>
<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 {
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
margin-left: 15rem;
margin-right: 15rem;
}
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) {
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;
}
margin-left: 15rem;
margin-right: 15rem;
}
}
</style>

View file

@ -1,42 +1,41 @@
---
export interface Props {
title: string;
title: string
}
const { title } = Astro.props;
const { title } = Astro.props
---
<section>
<h1>{title}</h1>
<div>
<slot />
</div>
<h1>{title}</h1>
<div>
<slot />
</div>
</section>
<style>
h1 {
color: white;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
}
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 {
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 {
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;
justify-content: left;
}
@media (min-width: 512px) {
div {
justify-content: left;
}
}
</style>
}
</style>

View file

@ -1,26 +1,27 @@
---
export interface Props {
title: string;
title: string
}
const { title } = Astro.props;
const { title } = Astro.props
---
<section>
<h1>{title}</h1>
<div>
<slot />
</div>
<h1>{title}</h1>
<div>
<slot />
</div>
</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;
justify-content: left;
}
}
</style>
}
</style>

View file

@ -1,66 +1,92 @@
---
---
<footer>
<div>
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
use. | View <a class="linker" href="https://fate-go.us" target="_blank" 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>
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex
Inc. used under fair use. | View <a
class="linker"
href="https://fate-go.us"
target="_blank"
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>
<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>
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.
Check out <a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer">his site here</a>
</div>
<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.
<div class="sticky-image-wrapper">
<img src="/padoru.png" alt="">
</div>
</div>
<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. Check out
<a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
>his site here</a
>
</div>
<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.
<div class="sticky-image-wrapper">
<img src="/padoru.png" alt="" />
</div>
</div>
</footer>
<style>
footer {
color: white;
bottom:0;
}
footer > div > a {
color: white
}
.sticky-image-wrapper {
position: fixed;
bottom: 0;
right: 50%;
}
:hover>.sticky-image-wrapper>img {
transform: translate(-50%, -100px);
}
.sticky-image-wrapper>img {
display: block;
position: absolute;
bottom: -100px;
height: 64px;
width: 64px;
transition: transform 1s ease-in-out;
transform: translateX(-50%);
}
</style>
footer {
color: white;
bottom: 0;
}
footer > div > a {
color: white;
}
.sticky-image-wrapper {
position: fixed;
bottom: 0;
right: 50%;
}
:hover > .sticky-image-wrapper > img {
transform: translate(-50%, -100px);
}
.sticky-image-wrapper > img {
display: block;
position: absolute;
bottom: -100px;
height: 64px;
width: 64px;
transition: transform 1s ease-in-out;
transform: translateX(-50%);
}
</style>

View file

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

View file

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

View file

@ -1,47 +1,54 @@
---
import Layout from '../layouts/Layout.astro';
import BasicSection from '../layouts/basicSection.astro';
import Layout from '../layouts/Layout.astro'
import BasicSection from '../layouts/basicSection.astro'
import ContactSection from '../layouts/contactSection.astro';
import ContactCard from '../components/contactCard.astro';
import ContactSection from '../layouts/contactSection.astro'
import ContactCard from '../components/contactCard.astro'
import contactdata from '../../static/_contactdata.json'
import CustomFooter from '../layouts/customFooter.astro';
import TechnologyCard from '../components/technologyCard.astro';
import CustomFooter from '../layouts/customFooter.astro'
import TechnologyCard from '../components/technologyCard.astro'
const techologydata = [{
"title": "Astro",
"link": "https://astro.build",
"image": "astro"
},
{
"title": "GitLab",
"link": "https://gitlab.io",
"image": "gitlab"
},
{
"title": "Typescript",
"link": "https://www.typescriptlang.org/",
"image": "typescript"
},]
const techologydata = [
{
title: 'Astro',
link: 'https://astro.build',
image: 'astro',
},
{
title: 'GitLab',
link: 'https://gitlab.io',
image: 'gitlab',
},
{
title: '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}>
<BasicSection title="About">
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}/>))}
</BasicSection>
<ContactSection title="Contact me">
{contactdata.map((item) => (<ContactCard {...item}/>))}
</ContactSection>
<BasicSection title="Disclaimers">
<CustomFooter />
</BasicSection>
<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.
</BasicSection>
<BasicSection title="Technologies used">
{techologydata.map((item) => <TechnologyCard {...item} />)}
</BasicSection>
<ContactSection title="Contact me">
{contactdata.map((item) => <ContactCard {...item} />)}
</ContactSection>
<BasicSection title="Disclaimers">
<CustomFooter />
</BasicSection>
</Layout>
<style>
</style>
<style></style>

View file

@ -1,18 +1,34 @@
---
import Layout from '../layouts/Layout.astro';
import BlogCard from '../components/blogCard.astro';
import BlogSection from '../layouts/blogSection.astro';
import Layout from '../layouts/Layout.astro'
import BlogCard from '../components/blogCard.astro'
import BlogSection from '../layouts/blogSection.astro'
const description = "My own small blog. Topics include FGO, TA, Programming, web technologies and more!"
const allPosts = await Astro.glob("../pages/blog/*.md");
allPosts.sort((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
const description =
'My own small blog. Topics include FGO, TA, Programming, web technologies and more!'
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}>
<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
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}
/>
))
}
</BlogSection>
</Layout>
<style>
</style>
<style></style>

View file

@ -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"
author: "Firq"
tags: ["astro", "coding"]
description: 'Blog post talking about how Astro provides the basis for this website'
author: 'Firq'
tags: ['astro', 'coding']
---
## 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:
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
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
<Hero></Hero>
<BaseSection title="Favourites">
{favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
</BaseSection>
<Layout
title="Home - Firq FGO Site"
currentpage="home"
descriptionOverride={description}
>
<Hero />
<BaseSection title="Favourites">
{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}>
<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
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}
/>
))
}
</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((a, b) => Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate));
allPosts.sort(
(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;
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_

View file

@ -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"
author: "Firq"
tags: ["astro", "hello"]
description: 'First blog post, talking a bit about the site, the technologies behind it and the future ideas'
author: 'Firq'
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!
@ -18,24 +18,24 @@ the servants as markdown files (kinda ironic, this is a markdown file as well).
said to me: "Why don't you just create a small site with GitLab Pages? You can host that on my instance". And so, I started writing HTML and CSS by hand, getting the
first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to [Mitsunee](https://www.mitsunee.com/) for helping me so much with the CSS).
But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
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:
```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.
Still, I was a bit annoyed that I had this long-ish URL for the site (`firq.pages.neshweb.net/fgosite`), but the GitLab instance didn't offer to set a custom domain (because of how the server where it runs is set up).
Still, I was a bit annoyed that I had this long-ish URL for the site (`firq.pages.neshweb.net/fgosite`), but the GitLab instance didn't offer to set a custom domain (because of how the server where it runs is set up).
So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution.
So in the end, Neshura and I started a journey on how to best do this, and, in the end, found a solution.
## But ... how does it work?

View file

@ -1,21 +1,25 @@
---
import Layout from '../layouts/Layout.astro';
import Hero from '../components/hero.astro';
import BaseSection from '../layouts/baseSection.astro';
import FavouriteCard from '../components/favouriteCard.astro';
import favouritesdata from '../../static/_favouritesdata.json';
import Layout from '../layouts/Layout.astro'
import Hero from '../components/hero.astro'
import BaseSection from '../layouts/baseSection.astro'
import FavouriteCard from '../components/favouriteCard.astro'
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}>
<Hero>
<!--<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
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} />)}
</BaseSection>
</Layout>
<style>
</style>
<style></style>

View file

@ -1,24 +1,28 @@
---
import Layout from '../layouts/Layout.astro';
import BaseSection from '../layouts/baseSection.astro';
import Layout from '../layouts/Layout.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}>
<BaseSection title="Servants">
{servantdata.map((item) => (<ServantCard {...item}/>))}
</BaseSection>
<BaseSection title="CEs">
{cedata.map((item) => (<CeCard {...item}/>))}
</BaseSection>
<Layout
title="Servants - Firq FGO Site"
currentpage="servants"
descriptionOverride={description}
>
<BaseSection title="Servants">
{servantdata.map((item) => <ServantCard {...item} />)}
</BaseSection>
<BaseSection title="CEs">
{cedata.map((item) => <CeCard {...item} />)}
</BaseSection>
</Layout>
<style>
</style>
<style></style>

View file

@ -1,32 +1,38 @@
---
//TODO:
//TODO:
// - Add highlighted TAs above the rest
// > I think you should have all of them on the site.
// > 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
import Layout from '../layouts/Layout.astro';
import Layout from '../layouts/Layout.astro'
import TaSection from '../layouts/taSection.astro';
import TaCard from '../components/taCard.astro';
import TaSection from '../layouts/taSection.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}>
<TaSection title="Notable TAs" abovetext="">
{important_data.map((item) => (<TaCard {...item}/>))}
</TaSection>
<TaSection title="Completed TAs">
{tadata.map((item) => (<TaCard {...item}/>))}
</TaSection>
<Layout
title="TA Collection - Firq FGO Site"
currentpage="ta-collection"
descriptionOverride={description}
>
<TaSection title="Notable TAs" abovetext="">
{important_data.map((item) => <TaCard {...item} />)}
</TaSection>
<TaSection title="Completed TAs">
{tadata.map((item) => <TaCard {...item} />)}
</TaSection>
</Layout>
<style>
</style>
<style></style>