osbm/osbm.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update blog

Browse source
This commit is contained in:
Osman Faruk Bayram 2024-10-27 15:57:09 +03:00
parent 1d9fd8e6b5
commit d3c9088086
3 changed files with 79 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/content/blog/initial-blog.mdx
View file

@ -2,6 +2,8 @@
title: 'First post'
description: 'First post of this website that tests many things'
pubDate: '2024-10-26'
updatedDate: '2024-10-27'
file-name: 'initial-blog.mdx'
---
@ -50,7 +52,9 @@ This is inline latex: $cos (2\theta) = \cos^2 \theta - \sin^2 \theta$
This is standalone latex
$$\lim\limits_{x \to \infty} \exp(-x) = 0$$
$$
\lim\limits_{x \to \infty} \exp(-x) = 0
$$
Python code example

1
src/content/config.ts
View file

@ -9,6 +9,7 @@ const blog = defineCollection({
// Transform string to Date object
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
filename: z.string().optional(),
heroImage: z.string().optional(),
}),
});

109
src/layouts/BlogPost.astro
View file

@ -1,49 +1,86 @@
---
import "../styles/global.css";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import Metadata from "../components/Metadata.astro";
import FormattedDate from '../components/FormattedDate.astro';
import type { CollectionEntry } from 'astro:content';
import FormattedDate from "../components/FormattedDate.astro";
import type { CollectionEntry } from "astro:content";
type Props = CollectionEntry<'blog'>['data'];
type Props = CollectionEntry<"blog">["data"];
const { title, description, pubDate, updatedDate, filename, heroImage } = Astro.props;
const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/content/blog/" + filename;
const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<Metadata />
<title>{title}</title>
</head>
<body>
<Header />
<main>
<article>
<head>
<Metadata />
<title>{title}</title>
</head>
<body>
<Header />
<main>
<article>
<div class="hero-image">
{
heroImage && (
<img
width={1020}
height={510}
src={heroImage}
alt=""
/>
)
}
</div>
<div class="header">
<div class="title">
<h1>{title}</h1>
</div>
<div class="date">
<FormattedDate date={pubDate} />
{
updatedDate && (
<div class="last-updated-on">
Last updated on
<FormattedDate date={updatedDate} />
<a href={commitHistoryUrl} class="commit-history">
Commit history
</a>
</div>
)
}
</div>
</div>
<hr />
<div class="blog-body">
<slot />
</div>
</article>
</main>
<Footer />
</body>
<style>
div.header {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
</div>
<div class="header">
<div class="title">
<h1>{title}</h1>
</div>
<div class="date">
<FormattedDate date={pubDate} />
{updatedDate && <div class="last-updated-on">Last updated on <FormattedDate date={updatedDate} /></div>}
</div>
</div>
<hr />
<div class="blog-body">
<slot />
</div>
</article>
</main>
<Footer />
</body>
</html>
/* change font size in the header title */
div.title h1 {
font-size: 2rem;
}
hr {
margin-top: 1rem;
margin-bottom: 2rem;
}
</style>
</html>