feat: add intro to page layout

src/components/Pullquote.astro

@@ -3,6 +3,7 @@
 import TextLink from './TextLink.astro';
 
 interface Props {
+	alignment: 'center' | 'left';
 	author?: string;
 	class?: string;
 	lang?: string;
@@ -11,10 +12,27 @@ interface Props {
 	text: string;
 }
 
-const { author, class: className, lang = 'en', source, sourceUrl, text, ...props } = Astro.props;
+const {
+	alignment = 'center',
+	author,
+	class: className,
+	lang = 'en',
+	source,
+	sourceUrl,
+	text,
+	...props
+} = Astro.props;
 ---
 
-<blockquote lang={lang} class:list={['pullquote p-9 text-center mbe-10', className]} {...props}>
+<blockquote
+	lang={lang}
+	class:list={[
+		'pullquote p-9 mbe-10',
+		{ 'text-center': alignment === 'center', 'text-left': alignment === 'left' },
+		className,
+	]}
+	{...props}
+>
 	<p set:html={text} />
 	{
 		(author || source) && (

src/layouts/PageLayout.astro

@@ -1,7 +1,8 @@
 ---
 // Cspell:words astro frontmatter
-import PageTitle from '../components/PageTitle.astro';
+import Pullquote from '../components/Pullquote.astro';
 import Image from '../components/Image.astro';
+import PageTitle from '../components/PageTitle.astro';
 
 import GridLayout from './GridLayout.astro';
 
@@ -30,6 +31,13 @@ const gridVariant = frontmatter.grid || grid;
 		)
 	}
 	<slot name="before-content" />
+	{
+		frontmatter.intro && (
+			<div class="mbe-10" {...animation}>
+				<Pullquote alignment="left" text={frontmatter.intro} />
+			</div>
+		)
+	}
 	<slot />
 	<slot name="after-content" />
 </GridLayout>

src/pages/now.mdx

@@ -2,6 +2,7 @@
 layout: ../layouts/PageLayout.astro
 title: Now
 description: This is my Now page, listing the things I currently do.
+intro: This is my Now page, a website with the content of what I am focused on at this point in my life.
 backLink: /
 ---