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:
|
||||
- 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">
|
||||
<article class="contact do-hover">
|
||||
<article>
|
||||
<h2>{title}</h2>
|
||||
<h3>{date}</h3>
|
||||
<p>{description}</p>
|
||||
|
@ -26,6 +26,8 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
|
|||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
height: auto;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
|
@ -50,17 +52,18 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date);
|
|||
}
|
||||
article {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
justify-content: baseline;
|
||||
background-color: var(--c-darkergray);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
transition: transform var(--speed) var(--ease);
|
||||
height: auto;
|
||||
width: 172px;
|
||||
min-height: 100%;
|
||||
width: 11rem;
|
||||
}
|
||||
a:hover {
|
||||
transform: scale(var(--hover-scale));
|
||||
|
|
|
@ -18,7 +18,7 @@ if(descriptionOverride === undefined) {
|
|||
description = descriptionOverride;
|
||||
}
|
||||
|
||||
let currPage = "https://firq.pages.neshweb.net/"
|
||||
let currPage = "https://firq.dev/"
|
||||
if (currentpage !== "home") {
|
||||
currPage += currentpage;
|
||||
}
|
||||
|
|
|
@ -29,15 +29,13 @@ const { title } = Astro.props;
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
@media (min-width: 512px) {
|
||||
div {
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
div {
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
</style>
|
|
@ -14,7 +14,7 @@ const { title } = Astro.props;
|
|||
</section>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
h1 {
|
||||
color: white;
|
||||
margin: 0.5rem 0px 0.5rem 0.5em;
|
||||
padding: 0.25rem 0.75rem;
|
||||
|
@ -22,12 +22,21 @@ const { title } = Astro.props;
|
|||
background-color: var(--c-darkgray);
|
||||
}
|
||||
div {
|
||||
display: block;
|
||||
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 {
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
|
@ -1,16 +1,17 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.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 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}>
|
||||
<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}/>)}
|
||||
</BasicSection>
|
||||
</BlogSection>
|
||||
</Layout>
|
||||
|
||||
<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