base setup

2022-12-02 11:21:18 +01:00 · 2022-12-02 11:21:18 +01:00 · 688d794dc7
commit 688d794dc7
30 changed files with 4362 additions and 0 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -0,0 +1,29 @@
+---
+import '../styles/style.css';
+
+import Header from '../components/Header.astro';
+
+const { pageTitle, titleColor } = Astro.props;
+---
+
+<html lang="fr" dir="ltr">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{pageTitle} - Nicolas Arduin</title>
+	</head>
+	<body>
+		<Header />
+		<main role="main">
+			<h1>{pageTitle}</h1>
+			<slot/>
+		</main>
+	</body>
+	<style define:vars={{ titleColor }}>
+		h1 {
+		 color: var(--titleColor);
+		}
+	 </style>
+</html>
--- a/src/layouts/MarkdownPostLayout.astro
+++ b/src/layouts/MarkdownPostLayout.astro
@ -0,0 +1,39 @@
+---
+import AstroImage from "../components/AstroImage.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+const { frontmatter, image, published, title } = Astro.props;
+const publishedDate = new Intl.DateTimeFormat("fr", {
+	dateStyle: "long",
+}).format(published);
+---
+
+<BaseLayout pageTitle={title}>
+	<p>Publié le&nbsp;: {frontmatter.pubDate.slice(0, 10)}</p>
+	<time datetime={published}>
+		{publishedDate}.
+	</time>
+	<div class="tags">
+		{
+			frontmatter.tags.map((tag) => (
+				<p class="tag">
+					<a href={`/tags/${tag}`}>{tag}</a>
+				</p>
+			))
+		}
+	</div>
+	<p>{frontmatter.description}</p>
+	<hr />
+	{
+		!!image && (
+			<AstroImage
+				src={image.url}
+				alt={image.alt}
+				width={image.width}
+				height={image.height}
+			/>
+		)
+	}
+	<hr />
+	<slot />
+</BaseLayout>