Strengthen reusable Astro site foundation

src/components/CallToAction.astro

@@ -0,0 +1,4 @@
+---
+const { eyebrow, heading, copy, href, label } = Astro.props;
+---
+<section class="section surface"><div class="shell centered"><p class="eyebrow">{eyebrow}</p><h2>{heading}</h2><p class="lede">{copy}</p><a class="button" href={href}>{label} <span aria-hidden="true">→</span></a></div></section>

src/components/Footer.astro

@@ -3,7 +3,7 @@ import { isBlog, site } from '../lib/site-data.js';
 ---
 <footer class="site-footer">
   <div class="shell footer-grid">
-    <div><a class="brand" href="/"><span class="brand-mark" aria-hidden="true">✦</span><span>{isBlog ? 'Happy Tails Journal' : 'Happy Tails'}</span></a><p>{site.description}</p></div>
+    <div><a class="brand" href="/">{site.branding.logo ? <img class="brand-logo" src={site.branding.logo} alt="" /> : <span class="brand-mark" aria-hidden="true">{site.branding.mark}</span>}<span>{site.branding.wordmark}</span></a><p>{site.description}</p></div>
     <div><p class="eyebrow">Explore</p>{site.nav.map((item) => <a class="footer-link" href={item.href}>{item.label}</a>)}</div>
     {!isBlog && <address><p class="eyebrow">Say hello</p><a class="footer-link" href={`tel:${site.contact.phoneHref}`}>{site.contact.phone}</a><a class="footer-link" href={`mailto:${site.contact.email}`}>{site.contact.email}</a></address>}
   </div>

src/components/Header.astro

@@ -4,7 +4,7 @@ const path = Astro.url.pathname;
 ---
 <header class="site-header">
   <div class="shell nav-wrap">
-    <a class="brand" href="/" aria-label={`${site.name} home`}><span class="brand-mark" aria-hidden="true">✦</span><span>{isBlog ? 'Happy Tails Journal' : 'Happy Tails'}</span></a>
+    <a class="brand" href="/" aria-label={`${site.name} home`}>{site.branding.logo ? <img class="brand-logo" src={site.branding.logo} alt="" /> : <span class="brand-mark" aria-hidden="true">{site.branding.mark}</span>}<span>{site.branding.wordmark}</span></a>
     <button class="menu-button" aria-expanded="false" aria-controls="main-menu">Menu <span aria-hidden="true">+</span></button>
     <nav id="main-menu" aria-label="Main navigation">
       {site.nav.map((item) => <a href={item.href} aria-current={path === item.href ? 'page' : undefined}>{item.label}</a>)}

src/components/SectionHeading.astro

@@ -0,0 +1,4 @@
+---
+const { eyebrow, heading, copy, split = false } = Astro.props;
+---
+<div class:list={['section-heading', { split }]}><div><p class="eyebrow">{eyebrow}</p><h2>{heading}</h2></div>{copy && <p>{copy}</p>}</div>