Blog changes; Homepage changes; Set locale to en-ca

This commit is contained in:
Andrew Lee 2024-02-11 22:37:30 -05:00
parent f38935fe06
commit ae20d39d4d
Signed by: andrew
SSH key fingerprint: SHA256:bbGg1DYG5CuKl2jo1DqzvUsaTeyvhM3tjCsej5lYMg4
8 changed files with 82 additions and 69 deletions

View file

@ -5,7 +5,11 @@
"editor.wordWrap": "wordWrapColumn",
"editor.wordWrapColumn": 64,
"editor.lineNumbers": "off",
"editor.quickSuggestions": false,
"editor.quickSuggestions": {
"comments": "off",
"strings": "off",
"other": "off"
},
"editor.minimap.enabled": false
},
"frontMatter.content.publicFolder": "public",

View file

@ -11,12 +11,12 @@ const date = new Date();
---
<!doctype html>
<html lang="en">
<html lang="en-ca">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/blog/rss.xml" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
@ -29,7 +29,7 @@ const date = new Date();
<!-- Open Graph Metadata -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content="/profile.png" />
<meta property="og:image" content="https://alee14.me/profile.png" />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#1B291F"/>

View file

@ -1,6 +1,7 @@
---
import Layout from './Default.astro';
const { title, description } = Astro.props;
import '../styles/Page.css';
---
<Layout title=`${title} - Andrew Lee` description={description}>
@ -12,36 +13,3 @@ const { title, description } = Astro.props;
<slot />
</div>
</Layout>
<style>
header {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
text-align: center;
padding: 0 0 1em;
}
.header-text {
font-size: 2em;
margin: 0;
}
h2.header-text {
font-size: 1.5em;
font-weight: 300;
}
.container {
margin: 1em 10em 1em 10em;
}
@media (max-width: 992px) {
.container {
margin: 10px 20px 10px 20px;
}
}
</style>

View file

@ -1,33 +1,40 @@
---
import Page from "../../layouts/Page.astro";
import Page from "../../layouts/Default.astro";
import { getCollection } from "astro:content";
import {formatDate} from "../../util";
import '../../styles/Page.css';
import "../../styles/cards.css";
import {Icon} from "astro-icon/components";
const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---
<Page title="Blog" description="Where I post can be anything!">
<Page title="Blog - Andrew Lee" description="Where I post can be anything!">
<main>
<div class="header">
<a href="/blog/rss.xml">
<Icon name="fa6-solid:square-rss" aria-label="RSS" />
</a>
</div>
<div class="grid">
{allBlogPosts.map((post) => (
<article class="card">
<h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
<small>{formatDate(post.data.pubDate)}</small>
<p>{post.data.description}</p>
<div class="tags">
{post.data.tags.map((tag) => (
<a href={`/blog/tags/${tag}`}>{tag}</a>
))}
</div>
</article>
))
}
<header>
<h1 class="header-text">
Blog
<a href="/blog/rss.xml">
<Icon name="fa6-solid:square-rss" aria-label="RSS" />
</a>
</h1>
<h2 class="header-text">Where I post can be anything!</h2>
</header>
<div class="container">
<div class="grid">
{allBlogPosts.map((post) => (
<article class="card">
<h1><a href={`/blog/${post.slug}`}>{post.data.title}</a></h1>
<small>{formatDate(post.data.pubDate)}</small>
<p>{post.data.description}</p>
<div class="tags">
{post.data.tags.map((tag) => (
<a href={`/blog/tags/${tag}`}>{tag}</a>
))}
</div>
</article>
))
}
</div>
</div>
</main>
</Page>
@ -38,12 +45,4 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
gap: 1em;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0.5em;
font-size: 3em;
}
</style>

View file

@ -25,7 +25,7 @@ export async function GET(context) {
link: `/blog/${post.slug}/`,
content: sanitizeHtml(parser.render(post.body)),
// (optional) inject custom xml
customData: `<language>en-us</language>`,
customData: `<language>en-ca</language>`,
})),
});
}

View file

@ -42,7 +42,18 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
<div class="information">
<div class="box">
<h1>About me</h1>
<p>I have been into computers since I was a kid, and it has been my passion for a long time. <br>Currently studying “Computing Support” (more preferably IT) at a vocational school.</p>
<a href="/history" class="link">History</a>
<p>Hey, I am Andrew Lee, a 19 year old who has a passion with computers.
I am currently a student at a vocational school in Pearson Electrotechnology Centre.
For years, I have been into programming, tinkering with virtual machines, and messing with Linux.</p>
</div>
<div class="box">
<h1>Skills</h1>
<ul>
<li>Linux</li>
<li>Graphic Design</li>
<li>Web Development</li>
</ul>
</div>
<div class="box">
<h1>Computer Specs</h1>

27
src/styles/Page.css Normal file
View file

@ -0,0 +1,27 @@
header {
display: flex;
flex-direction: column;
gap: 0.5em;
margin: 0;
text-align: center;
padding: 0 0 1em;
}
.header-text {
font-size: 2em;
margin: 0;
}
h2.header-text {
font-size: 1.5em;
font-weight: 300;
}
.container {
margin: 1em 10em 1em 10em;
}
@media (max-width: 992px) {
.container {
margin: 10px 20px 10px 20px;
}
}

View file

@ -55,13 +55,17 @@
.latest-posts {
grid-column: 2;
grid-row: 1 / span 2;
grid-row: 1 / span 3;
}
.blog-title {
margin-bottom: 2px;
}
.link {
font-size: 1.2em;
}
/* Mobile view */
@media (max-width: 992px) {
.social {