Merge fix
This commit is contained in:
parent
9584987150
commit
a2ee3564bc
GPG key ID:
3ACC61C8CEC83C20
26 changed files with 1125 additions and 1039 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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_
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue