Rename Markdown util `getHeaders()` to `getHeadings()` (#4031)

* Renamed getHeaders() to getHeadings(), according to RFC #208.

* chore: update changeset

* fix: expose MarkdownHeading type from `astro`

Co-authored-by: Félix Sanz <me@felixsanz.com>
Co-authored-by: Nate Moore <nate@astro.build>

5 files changed, 24 insertions, 24 deletions

diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro
index 1d14515c1..11c130b05 100644
--- a/examples/docs/src/components/PageContent/PageContent.astro
+++ b/examples/docs/src/components/PageContent/PageContent.astro
@@ -4,14 +4,14 @@ import TableOfContents from "../RightSidebar/TableOfContents.tsx";
 
 const { content, githubEditUrl } = Astro.props;
 const title = content.title;
-const headers = content.astro.headers;
+const headings = content.astro.headings;
 ---
 
 <article id="article" class="content">
 	<section class="main-section">
 		<h1 class="content-title" id="overview">{title}</h1>
 		<nav class="block sm:hidden">
-			<TableOfContents client:media="(max-width: 50em)" {headers} />
+			<TableOfContents client:media="(max-width: 50em)" {headings} />
 		</nav>
 		<slot />
 	</section>
diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro
index a78f86d59..9b0e426cf 100644
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro
@@ -8,7 +8,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
 {showMoreSection && <h2 class="heading">More</h2>}
 <ul>
 	{editHref && (
-		<li class={`header-link depth-2`}>
+		<li class={`heading-link depth-2`}>
 			<a class="edit-on-github" href={editHref} target="_blank">
 				<svg
 					aria-hidden="true"
@@ -32,7 +32,7 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref;
 		</li>
 	)}
 	{CONFIG.COMMUNITY_INVITE_URL && (
-		<li class={`header-link depth-2`}>
+		<li class={`heading-link depth-2`}>
 			<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
 				<svg
 					aria-hidden="true"
diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro
index f61fb010f..1406b065e 100644
--- a/examples/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro
@@ -2,12 +2,12 @@
 import TableOfContents from "./TableOfContents.tsx";
 import MoreMenu from "./MoreMenu.astro";
 const { content, githubEditUrl } = Astro.props;
-const headers = content.astro.headers;
+const headings = content.astro.headings;
 ---
 
 <nav class="sidebar-nav" aria-labelledby="grid-right">
 	<div class="sidebar-nav-inner">
-		<TableOfContents client:media="(min-width: 50em)" {headers} />
+		<TableOfContents client:media="(min-width: 50em)" {headings} />
 		<MoreMenu editHref={githubEditUrl} />
 	</div>
 </nav>
diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
index 537508ab4..1d74e820f 100644
--- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx
+++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx
@@ -1,11 +1,11 @@
 import type { FunctionalComponent } from 'preact';
 import { h, Fragment } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
+import { MarkdownHeading } from 'astro';
 
-const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
+const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
 	const itemOffsets = useRef([]);
 	const [activeId, setActiveId] = useState<string>(undefined);
-
 	useEffect(() => {
 		const getItemOffsets = () => {
 			const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
@@ -27,18 +27,18 @@ const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = []
 		<>
 			<h2 class="heading">On this page</h2>
 			<ul>
-				<li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
+				<li class={`heading-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}>
 					<a href="#overview">Overview</a>
 				</li>
-				{headers
+				{headings
 					.filter(({ depth }) => depth > 1 && depth < 4)
-					.map((header) => (
+					.map((heading) => (
 						<li
-							class={`header-link depth-${header.depth} ${
-								activeId === header.slug ? 'active' : ''
+							class={`heading-link depth-${heading.depth} ${
+								activeId === heading.slug ? 'active' : ''
 							}`.trim()}
 						>
-							<a href={`#${header.slug}`}>{header.text}</a>
+							<a href={`#${heading.slug}`}>{heading.text}</a>
 						</li>
 					))}
 			</ul>
diff --git a/examples/docs/src/styles/index.css b/examples/docs/src/styles/index.css
index 971ccf9e5..2a735decf 100644
--- a/examples/docs/src/styles/index.css
+++ b/examples/docs/src/styles/index.css
@@ -311,42 +311,42 @@ h2.heading {
 	margin-bottom: 0.5rem;
 }
 
-.header-link {
+.heading-link {
 	font-size: 1rem;
 	padding: 0.1rem 0 0.1rem 1rem;
 	border-left: 4px solid var(--theme-divider);
 }
 
-.header-link:hover,
-.header-link:focus {
+.heading-link:hover,
+.heading-link:focus {
 	border-left-color: var(--theme-accent);
 	color: var(--theme-accent);
 }
-.header-link:focus-within {
+.heading-link:focus-within {
 	color: var(--theme-text-light);
 	border-left-color: hsla(var(--color-gray-40), 1);
 }
-.header-link svg {
+.heading-link svg {
 	opacity: 0.6;
 }
-.header-link:hover svg {
+.heading-link:hover svg {
 	opacity: 0.8;
 }
-.header-link a {
+.heading-link a {
 	display: inline-flex;
 	gap: 0.5em;
 	width: 100%;
 	padding: 0.15em 0 0.15em 0;
 }
 
-.header-link.depth-3 {
+.heading-link.depth-3 {
 	padding-left: 2rem;
 }
-.header-link.depth-4 {
+.heading-link.depth-4 {
 	padding-left: 3rem;
 }
 
-.header-link a {
+.heading-link a {
 	font: inherit;
 	color: inherit;
 	text-decoration: none;