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' title: 'First post'
description: 'First post of this website that tests many things' description: 'First post of this website that tests many things'
pubDate: '2024-10-26' 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 This is standalone latex
$$\lim\limits_{x \to \infty} \exp(-x) = 0$$ $$
\lim\limits_{x \to \infty} \exp(-x) = 0
$$
Python code example Python code example

1
src/content/config.ts
View file

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

57
src/layouts/BlogPost.astro
View file

@ -1,21 +1,22 @@
--- ---
import "../styles/global.css"; import "../styles/global.css";
import Header from "../components/Header.astro"; import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro"; import Footer from "../components/Footer.astro";
import Metadata from "../components/Metadata.astro"; import Metadata from "../components/Metadata.astro";
import FormattedDate from '../components/FormattedDate.astro'; import FormattedDate from "../components/FormattedDate.astro";
import type { CollectionEntry } from 'astro:content'; 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"> <html lang="en">
<head> <head>
<Metadata /> <Metadata />
@ -25,9 +26,17 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
<Header /> <Header />
<main> <main>
<article> <article>
<div class="hero-image"> <div class="hero-image">
{heroImage && <img width={1020} height={510} src={heroImage} alt="" />} {
heroImage && (
<img
width={1020}
height={510}
src={heroImage}
alt=""
/>
)
}
</div> </div>
<div class="header"> <div class="header">
<div class="title"> <div class="title">
@ -35,7 +44,17 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</div> </div>
<div class="date"> <div class="date">
<FormattedDate date={pubDate} /> <FormattedDate date={pubDate} />
{updatedDate && <div class="last-updated-on">Last updated on <FormattedDate date={updatedDate} /></div>} {
updatedDate && (
<div class="last-updated-on">
Last updated on
<FormattedDate date={updatedDate} />
<a href={commitHistoryUrl} class="commit-history">
Commit history
</a>
</div>
)
}
</div> </div>
</div> </div>
<hr /> <hr />
@ -46,4 +65,22 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
</main> </main>
<Footer /> <Footer />
</body> </body>
<style>
div.header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* change font size in the header title */
div.title h1 {
font-size: 2rem;
}
hr {
margin-top: 1rem;
margin-bottom: 2rem;
}
</style>
</html> </html>