From a2ee3564bcdc6807e13426e1b7ef79466559f99c Mon Sep 17 00:00:00 2001 From: Firq Date: Thu, 9 Mar 2023 11:44:18 +0100 Subject: [PATCH] Merge fix --- src/components/blogCard.astro | 118 +++++++-------- src/components/ceCard.astro | 180 +++++++++++----------- src/components/contactCard.astro | 54 +++---- src/components/favouriteCard.astro | 141 +++++++++-------- src/components/hero.astro | 31 ++-- src/components/navbar.astro | 224 ++++++++++++++-------------- src/components/navbarEntry.astro | 81 +++++----- src/components/servantCard.astro | 206 ++++++++++++------------- src/components/taCard.astro | 41 ++--- src/components/technologyCard.astro | 41 ++--- src/layouts/Layout.astro | 109 +++++++------- src/layouts/baseSection.astro | 68 ++++----- src/layouts/basicSection.astro | 57 ++++--- src/layouts/blogPost.astro | 139 ++++++++--------- src/layouts/blogSection.astro | 59 ++++---- src/layouts/contactSection.astro | 29 ++-- src/layouts/customFooter.astro | 140 ++++++++++------- src/layouts/hometitle.astro | 47 +++--- src/layouts/taSection.astro | 74 ++++----- src/pages/about.astro | 81 +++++----- src/pages/blog.astro | 40 +++-- src/pages/blog/astro-usage.md | 74 ++++----- src/pages/blog/hello-world.md | 22 +-- src/pages/index.astro | 34 +++-- src/pages/servants.astro | 32 ++-- src/pages/ta-collection.astro | 42 +++--- 26 files changed, 1125 insertions(+), 1039 deletions(-) diff --git a/src/components/blogCard.astro b/src/components/blogCard.astro index 0374438..2e57d8f 100644 --- a/src/components/blogCard.astro +++ b/src/components/blogCard.astro @@ -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) --- -
-

{title}

-

{date}

-

{description}

-
+
+

{title}

+

{date}

+

{description}

+
\ No newline at end of file + 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)); + } + diff --git a/src/components/ceCard.astro b/src/components/ceCard.astro index 167ba19..9f773ae 100644 --- a/src/components/ceCard.astro +++ b/src/components/ceCard.astro @@ -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' } ---
-
{name}
-
- {name} -
-
- Max-limit broken -
+
{name}
+
+ {name} +
+
+ Max-limit broken +
\ No newline at end of file + } + diff --git a/src/components/contactCard.astro b/src/components/contactCard.astro index b221b4e..8684b5e 100644 --- a/src/components/contactCard.astro +++ b/src/components/contactCard.astro @@ -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 --- -
-

{site}

-
+
+

{site}

+
\ No newline at end of file + 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)); + } + diff --git a/src/components/favouriteCard.astro b/src/components/favouriteCard.astro index d383f06..65854d5 100644 --- a/src/components/favouriteCard.astro +++ b/src/components/favouriteCard.astro @@ -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` ---
-
{name}
- {name} -

- {origin} -

+
{name}
+ {name} +

+ {origin} +

\ No newline at end of file + .subtext { + color: white; + font-size: 16px; + font-weight: 600; + margin: 5; + line-height: 20px; + } + diff --git a/src/components/hero.astro b/src/components/hero.astro index 77f7a13..08ad1d7 100644 --- a/src/components/hero.astro +++ b/src/components/hero.astro @@ -1,23 +1,22 @@ --- - ---
- This is still a work in progress and continuously expanded. Feel free to look around. - + This is still a work in progress and continuously expanded. Feel free to look + around. +
- \ No newline at end of file + 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; + } + diff --git a/src/components/navbar.astro b/src/components/navbar.astro index c1a923b..9e0790e 100644 --- a/src/components/navbar.astro +++ b/src/components/navbar.astro @@ -2,126 +2,126 @@ ---
- - - -
\ No newline at end of file + } + diff --git a/src/components/navbarEntry.astro b/src/components/navbarEntry.astro index 62ec790..32512f0 100644 --- a/src/components/navbarEntry.astro +++ b/src/components/navbarEntry.astro @@ -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}` ---
  • - - - {text} - + + + {text} +
    • \ No newline at end of file + 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); + } + diff --git a/src/components/servantCard.astro b/src/components/servantCard.astro index d0e5a3d..5256343 100644 --- a/src/components/servantCard.astro +++ b/src/components/servantCard.astro @@ -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' } ---
    -
    {name}
    - {name} -

    - Level {level}
    - {skills}
    - NP {np}

    -
    - -

    Mana Loading: {ml === "Not Unlocked" &&
    }{ml}

    -
    +
    {name}
    + {name} +

    + Level {level}
    + {skills}
    + NP {np} +

    +
    + +

    Mana Loading: {ml === 'Not Unlocked' &&
    }{ml}

    +
    \ No newline at end of file + .unobtained { + filter: grayscale(1); + } + diff --git a/src/components/taCard.astro b/src/components/taCard.astro index a3a1723..f332e31 100644 --- a/src/components/taCard.astro +++ b/src/components/taCard.astro @@ -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')` --- + -
    -
    -

    {title}

    -
    -
    +
    +
    +

    {title}

    +
    +
    \ No newline at end of file + } + diff --git a/src/components/technologyCard.astro b/src/components/technologyCard.astro index 0a9d148..8fdc290 100644 --- a/src/components/technologyCard.astro +++ b/src/components/technologyCard.astro @@ -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')` --- + -
    -
    -

    {title}

    -
    -
    +
    +
    +

    {title}

    +
    +
    \ No newline at end of file + } + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7c8c6b0..7492921 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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 } --- - - - - - - - - - - - - - {title} - - - - - {navdata.map((item) => ())} - - - + + + + + + + + + + + + + {title} + + + + + { + navdata.map((item) => ( + + )) + } + + + diff --git a/src/layouts/baseSection.astro b/src/layouts/baseSection.astro index 315e838..b7edd12 100644 --- a/src/layouts/baseSection.astro +++ b/src/layouts/baseSection.astro @@ -1,46 +1,46 @@ --- export interface Props { - title: string; + title: string } -const { title } = Astro.props; +const { title } = Astro.props ---
    -

    {title}

    -
    - -
    +

    {title}

    +
    + +
    \ No newline at end of file + } + diff --git a/src/layouts/basicSection.astro b/src/layouts/basicSection.astro index 3971d14..0ed8b5c 100644 --- a/src/layouts/basicSection.astro +++ b/src/layouts/basicSection.astro @@ -1,41 +1,40 @@ --- export interface Props { - title: string; + title: string } -const { title } = Astro.props; +const { title } = Astro.props ---
    -

    {title}

    -
    - -
    +

    {title}

    +
    + +
    \ No newline at end of file + } + diff --git a/src/layouts/blogPost.astro b/src/layouts/blogPost.astro index 1cba8d4..8973c34 100644 --- a/src/layouts/blogPost.astro +++ b/src/layouts/blogPost.astro @@ -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 +) --- -
    -

    - {frontmatter.title} -

    -

    by {frontmatter.author} • Published on {date}

    -
    - -
    -
    +
    +

    + {frontmatter.title} +

    +

    by {frontmatter.author} • Published on {date}

    +
    + +
    +
    diff --git a/src/layouts/blogSection.astro b/src/layouts/blogSection.astro index 70101ea..c4cd2ed 100644 --- a/src/layouts/blogSection.astro +++ b/src/layouts/blogSection.astro @@ -1,42 +1,41 @@ --- export interface Props { - title: string; + title: string } -const { title } = Astro.props; +const { title } = Astro.props ---
    -

    {title}

    -
    - -
    +

    {title}

    +
    + +
    \ No newline at end of file + } + diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro index 59517f4..365e4a5 100644 --- a/src/layouts/contactSection.astro +++ b/src/layouts/contactSection.astro @@ -1,26 +1,27 @@ --- export interface Props { - title: string; + title: string } -const { title } = Astro.props; +const { title } = Astro.props --- +
    -

    {title}

    -
    - -
    +

    {title}

    +
    + +
    \ No newline at end of file + } + diff --git a/src/layouts/customFooter.astro b/src/layouts/customFooter.astro index c514e19..a9b59f9 100644 --- a/src/layouts/customFooter.astro +++ b/src/layouts/customFooter.astro @@ -1,66 +1,92 @@ --- - ---
    -
    - “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair - use. | View the - official website for more information.
    - 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.
    - All of the opinions expressed are my own and may not reflect those of the asset providers. +
    + “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex + Inc. used under fair use. | View the official website for more information.
    + 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.
    + All of the opinions expressed are my own and may not reflect those of the asset + providers. +
    +
    +
    + Thanks to Atlas Academy for providing the servant and ce images. +
    +
    +
    + Thanks to Mitsunee for the support when building this site. I could not have done it without you + 🧡 Check out FGO Timers here +
    +
    -
    -
    - Thanks to Atlas Academy for - providing the servant and ce images. -
    -
    -
    - Thanks to Mitsunee for the support when building this site. I could not have done it without you 🧡 - Check out FGO Timers here -
    - -
    -
    -
    -
    - Thanks to Neshura for providing me with a place to develop, store and host this site. - Check out his site here -
    -
    -
    - Thanks to AnthonyJ for providing me with the custom Shishou favicon. -
    - -
    +
    +
    +
    + Thanks to Neshura for providing me with a place to develop, store and host this site. Check out + his site here +
    +
    +
    + Thanks to AnthonyJ for providing me with the custom Shishou favicon. +
    +
    +
    \ No newline at end of file + 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%); + } + diff --git a/src/layouts/hometitle.astro b/src/layouts/hometitle.astro index e8403d6..3a07033 100644 --- a/src/layouts/hometitle.astro +++ b/src/layouts/hometitle.astro @@ -1,31 +1,30 @@ --- - ---
    -
    - FIRQ FGO SITE - -
    +
    + FIRQ FGO SITE + +
    \ No newline at end of file + .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); + } + diff --git a/src/layouts/taSection.astro b/src/layouts/taSection.astro index bb619ab..82489d2 100644 --- a/src/layouts/taSection.astro +++ b/src/layouts/taSection.astro @@ -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 = '' } --- +
    -

    {title}

    -

    {h2text}

    -
    - -
    +

    {title}

    +

    {h2text}

    +
    + +
    \ No newline at end of file + 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; + } + diff --git a/src/pages/about.astro b/src/pages/about.astro index 2bed31a..ba099f1 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -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." --- - - - This is a small sideproject that I'm creating. First time doing webdev in general, and first project using Typescript. - - - {techologydata.map((item) => ())} - - - {contactdata.map((item) => ())} - - - - + + + This is a small sideproject that I'm creating. First time doing webdev in + general, and first project using Typescript. + + + {techologydata.map((item) => )} + + + {contactdata.map((item) => )} + + + + - \ No newline at end of file + diff --git a/src/pages/blog.astro b/src/pages/blog.astro index 64294e5..5ac01ef 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -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) +) --- - - - {allPosts.map((post) => )} - + + + { + allPosts.map((post) => ( + + )) + } + - \ No newline at end of file + diff --git a/src/pages/blog/astro-usage.md b/src/pages/blog/astro-usage.md index c63c7f2..e1409e2 100644 --- a/src/pages/blog/astro-usage.md +++ b/src/pages/blog/astro-usage.md @@ -2,9 +2,9 @@ layout: ../../layouts/blogPost.astro title: 'How Astro powers this site' pubDate: 2023-03-09 -description: "Blog post talking about how Astro provides the basis for this website" -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 - - - - - {favouritesdata.map((item) => ())} - + + + + {favouritesdata.map((item) => )} + - - ``` -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') --- - - - {allPosts.map((post) => )} - + + + { + allPosts.map((post) => ( + + )) + } + - - ``` 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* \ No newline at end of file +_next blog-post will probably be FGO-related_ diff --git a/src/pages/blog/hello-world.md b/src/pages/blog/hello-world.md index d21cbd3..88ff9f0 100644 --- a/src/pages/blog/hello-world.md +++ b/src/pages/blog/hello-world.md @@ -2,9 +2,9 @@ layout: ../../layouts/blogPost.astro title: 'Hello World!' pubDate: 2023-03-08 -description: "First blog post, talking a bit about the site, the technologies behind it and the future ideas" -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 - - {servantdata.map((item) => ())} + {servantdata.map((item) => ( + + ))} - - ``` 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? diff --git a/src/pages/index.astro b/src/pages/index.astro index abd4246..df8f479 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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' --- - - - - - - {favouritesdata.map((item) => ())} - + + + + + + {favouritesdata.map((item) => )} + - + diff --git a/src/pages/servants.astro b/src/pages/servants.astro index 06e35df..4c73647 100644 --- a/src/pages/servants.astro +++ b/src/pages/servants.astro @@ -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.' --- - - - {servantdata.map((item) => ())} - - - {cedata.map((item) => ())} - + + + {servantdata.map((item) => )} + + + {cedata.map((item) => )} + - + diff --git a/src/pages/ta-collection.astro b/src/pages/ta-collection.astro index 6a2d840..891f58d 100644 --- a/src/pages/ta-collection.astro +++ b/src/pages/ta-collection.astro @@ -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.' --- - - - {important_data.map((item) => ())} - - - {tadata.map((item) => ())} - + + + {important_data.map((item) => )} + + + {tadata.map((item) => )} + - \ No newline at end of file +