Fixed layout issues, added blog post, added date sorting, changed embed file, fixed old link

This commit is contained in:
Firq 2023-03-08 23:56:44 +01:00
parent 019fea9d00
commit ec61f2ff70
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
8 changed files with 129 additions and 17 deletions

View file

@ -28,4 +28,5 @@ deploy-site:
script: script:
- echo "Connecting to proxmox machine" - echo "Connecting to proxmox machine"
- ssh $DEPLOY_USER@$DEPLOY_HOST -o StrictHostKeyChecking=no IdentitiesOnly=yes "screen -X -S website-firq-npx kill; rm -r -f public/*; cd build; git reset --hard; git pull; rm -r -f node_modules; npm install; npm run build; cp -R public ~; cd ~; screen -S website-firq-npx -dm npx serve public/ -p 9000" - ssh $DEPLOY_USER@$DEPLOY_HOST -o StrictHostKeyChecking=no IdentitiesOnly=yes "screen -X -S website-firq-npx kill; rm -r -f public/*; cd build; git reset --hard; git pull; rm -r -f node_modules; npm install; npm run build; cp -R public ~; cd ~; screen -S website-firq-npx -dm npx serve public/ -p 9000"

View file

@ -16,7 +16,7 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
--- ---
<a href={url} rel="noopener noreferrer"> <a href={url} rel="noopener noreferrer">
<article class="contact do-hover"> <article>
<h2>{title}</h2> <h2>{title}</h2>
<h3>{date}</h3> <h3>{date}</h3>
<p>{description}</p> <p>{description}</p>
@ -26,6 +26,8 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
<style> <style>
a { a {
text-decoration: none; text-decoration: none;
height: auto;
margin: 0.5rem;
} }
p { p {
color: white; color: white;
@ -50,17 +52,18 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
} }
article { article {
display: flex; display: flex;
flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: column;
align-items: baseline; align-items: center;
align-content: flex-start; align-content: flex-start;
justify-content: center; justify-content: baseline;
background-color: var(--c-darkergray); background-color: var(--c-darkergray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
height: auto; min-height: 100%;
width: 172px; width: 11rem;
} }
a:hover { a:hover {
transform: scale(var(--hover-scale)); transform: scale(var(--hover-scale));

View file

@ -18,7 +18,7 @@ if(descriptionOverride === undefined) {
description = descriptionOverride; description = descriptionOverride;
} }
let currPage = "https://firq.pages.neshweb.net/" let currPage = "https://firq.dev/"
if (currentpage !== "home") { if (currentpage !== "home") {
currPage += currentpage; currPage += currentpage;
} }

View file

@ -29,15 +29,13 @@ const { title } = Astro.props;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
padding: 1em; padding: 1em;
color: white;
font-size: 1em;
} }
@media (min-width: 512px) { @media (min-width: 512px) {
div { div {
justify-content: left; justify-content: left;
} }
} }
div {
color: white;
font-size: 1em;
}
</style> </style>

View file

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

View file

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

View file

@ -0,0 +1,100 @@
---
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"]
---
## What is Astro
[Astro](https://astro.build/) is a new type of all-in-one web framework, generally designed for speed. It's fascinating because it manages to integrate popular frameworks like `react` or `vue` while staying lightweight. It's really nice to use, especially coming from plain HTML + CSS.
For a fast overview of Astro, look no further than [Astro in 100 Seconds](https://www.youtube.com/watch?v=dsTXcSeAZq8) by [Fireship](https://www.youtube.com/@Fireship)
## Why I like Astro
To be honest, the best way is to just show a bit of code:
With the following lines, I create the homepage of my website (I am omitting any imports)
```astro
<Layout title="Home - Firq FGO Site" currentpage="home" descriptionOverride={description}>
<Hero></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.
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");
---
<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.
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));
```
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'
pubDate: 2023-03-09
description: "Blog post talking about how Astro provides the basis for this website"
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.
And for styling the markdown itself, you would use the `:global()` css property that Astro introduces, since you have no structured HTML to refer to when creating the layout.
For example, the code blocks are styled like this:
```css
article :global(.astro-code) {
padding-left: 2em;
width: auto;
}
```
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.
**~ Firq**
*next blog-post will probably be FGO-related*

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 7 KiB