Fixed layout issues, added blog post, added date sorting, changed embed file, fixed old link
This commit is contained in:
parent
019fea9d00
commit
ec61f2ff70
8 changed files with 129 additions and 17 deletions
|
@ -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"
|
||||||
|
|
|
@ -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));
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
100
src/pages/blog/astro-usage.md
Normal file
100
src/pages/blog/astro-usage.md
Normal 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*
|
BIN
static/embed.png
BIN
static/embed.png
Binary file not shown.
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 7 KiB |
Loading…
Reference in a new issue