[Closes #17] Fix undefined title on markdown pages

Use the frontmatter when a markdown page is rendered with BaseLayout.astro.
Don't render an og:image tag when the URL isn't available.
Add a description to the About page.

README.md

@@ -5,18 +5,18 @@ A quick migration of the existing site content into a lightly-styled Astro build
 
 ## ✅ To do
 
+- [ ] Compress HTML in build
 - [ ] Set `base` tag by looking at the current domain name?  Different configs?
+- [ ] Restore dark mode when some text colors are fixed
+- [ ] Add more interesting header fonts
 - [X] Add SEO metadata to all pages
 - [X] Fix favicon
 - [X] Clean up jekyll code from old posts
 - [X] Always show the first image in a blog post as the thumbnail
 - [X] Don't show the image key in the frontmatter at the top of the post if it's used within the post
 - [X] Make nav bar responsive on narrow screens
-- [ ] Compress HTML in build
 - [X] Set or improve blog descriptions
 - [X] Replace img with Image in post markdown
-- [ ] Restore dark mode when some text colors are fixed
-- [ ] Add more interesting header fonts
 
 
 ## 🧞 Commands

src/components/Metadata.astro

@@ -20,8 +20,10 @@ const tags = Object.entries(meta)
 const ogTags = Object.entries({
 	title,
 	url,
-	// make sure the image metadata is an absolute URL, not just a relative path
-	image: new URL(image, import.meta.env.SITE),
+	// make sure the image metadata is an absolute URL, not just a relative path,
+	// and only include the key if it's truthy, so we don't include an `undefined`
+	// og:image tag
+	image: image && new URL(image as string, import.meta.env.SITE),
 	...meta
 })
 	.map(([key, value]) => value ? ogMetaTag(key, value) : null)

src/layouts/BaseLayout.astro

@@ -3,19 +3,30 @@ import Page from "@/layouts/Page.astro";
 import HeaderNav from "@/components/HeaderNav.astro";
 import FooterNav from "@/components/FooterNav.astro";
 import type { MetadataProp } from "@/components/Metadata.astro";
+import type { MarkdownContent } from "astro";
 
 interface Props {
 	title: string;
 	header?: string;
 	meta?: MetadataProp;
+	frontmatter?: MarkdownContent;
 }
 
-const { title, header = title, meta } = Astro.props;
+const { frontmatter, title = frontmatter?.title, header = title, meta } = Astro.props;
+let pageMeta = meta;
+
+if (frontmatter && !meta?.description) {
+	// there's frontmatter, which means we're laying out a markdown file, so make
+	// sure there's metadata for the page, and copy any description from the
+	// markdown file
+	pageMeta ??= {};
+	pageMeta.description = frontmatter.description;
+}
 ---
 
 <Page
 	title={title}
-	meta={meta}
+	meta={pageMeta}
 >
 	<HeaderNav />
 	<main class="container">

src/pages/about/code-of-conduct.md

@@ -1,7 +1,7 @@
 ---
 layout: "@/layouts/BaseLayout.astro"
 title: Code of Conduct
-description: Code of Conduct
+description: This Code of Conduct contains not just statements of belief, but principles that we collectively enact. We are dedicated to upholding them, and to ensuring that all members of our community respect them.
 ---
 
 # SF Civic Tech is a space for everyone.

src/pages/about/index.astro

@@ -1,9 +1,16 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import TeamList from "@/components/TeamList.astro";
+
+const meta = {
+	description: "SF Civic Tech is a group of people, first and foremost. We also call ourselves technologists, planners, designers, doers, thinkers, and activists. Each week, we actively work together to improve the City and County of San Francisco, often using technology to support our efforts. By connecting people, organizations, resources, tools, and networks to build for San Francisco, we will all thrive."
+};
 ---
 
-<BaseLayout title="About" header="About SF Civic Tech">
+<BaseLayout title="About"
+	header="About SF Civic Tech"
+	meta={meta}
+>
 	<p>
 		SF Civic Tech was originally founded in 2013 as Code for San Francisco, part
 		of the Code for America Brigade Network. After the