Create a Blog astro project as template for future
Change-Id: I1e8adbe1c9bdc6b2273a19407530323508adcbd5
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/674
Reviewed-by: Samuel Shuert <coded@clicks.codes>
Tested-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/blog/src/layouts/BlogPost.astro b/sites/blog/src/layouts/BlogPost.astro
new file mode 100644
index 0000000..e67b2b3
--- /dev/null
+++ b/sites/blog/src/layouts/BlogPost.astro
@@ -0,0 +1,85 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import FormattedDate from '../components/FormattedDate.astro';
+
+type Props = CollectionEntry<'blog'>['data'];
+
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+---
+
+<html lang="en">
+ <head>
+ <BaseHead title={title} description={description} />
+ <style>
+ main {
+ width: calc(100% - 2em);
+ max-width: 100%;
+ margin: 0;
+ }
+ .hero-image {
+ width: 100%;
+ }
+ .hero-image img {
+ display: block;
+ margin: 0 auto;
+ border-radius: 12px;
+ box-shadow: var(--box-shadow);
+ }
+ .prose {
+ width: 720px;
+ max-width: calc(100% - 2em);
+ margin: auto;
+ padding: 1em;
+ color: rgb(var(--gray-dark));
+ }
+ .title {
+ margin-bottom: 1em;
+ padding: 1em 0;
+ text-align: center;
+ line-height: 1;
+ }
+ .title h1 {
+ margin: 0 0 0.5em 0;
+ }
+ .date {
+ margin-bottom: 0.5em;
+ color: rgb(var(--gray));
+ }
+ .last-updated-on {
+ font-style: italic;
+ }
+ </style>
+ </head>
+
+ <body>
+ <Header />
+ <main>
+ <article>
+ <div class="hero-image">
+ {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
+ </div>
+ <div class="prose">
+ <div class="title">
+ <div class="date">
+ <FormattedDate date={pubDate} />
+ {
+ updatedDate && (
+ <div class="last-updated-on">
+ Last updated on <FormattedDate date={updatedDate} />
+ </div>
+ )
+ }
+ </div>
+ <h1>{title}</h1>
+ <hr />
+ </div>
+ <slot />
+ </div>
+ </article>
+ </main>
+ <Footer />
+ </body>
+</html>