fix(website): drop 'In this article' TOC from resource detail pages

Resource detail pages (agent, instruction, skill, plugin, extension) are
not articles, and their markdown headings do not form a meaningful
outline. Playbook and cookbook articles keep their TOC.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 80686fef-efe3-4cdd-8cd6-bfa61a5d0af6
This commit is contained in:
Aaron Powell
2026-08-17 10:38:06 +10:00
parent 8fc4806400
commit 8807070dd0
10 changed files with 10 additions and 59 deletions
+1 -8
View File
@@ -3,11 +3,7 @@ import React from "react";
import { ActionMenu, Button } from "@primer/react-brand"; import { ActionMenu, Button } from "@primer/react-brand";
import { import { DetailChassis, type DetailSibling } from "./DetailChassis";
DetailChassis,
type DetailSibling,
type DetailTocItem,
} from "./DetailChassis";
import { ResourceMeta } from "./ResourceMeta"; import { ResourceMeta } from "./ResourceMeta";
import { pageHref } from "./pageHref"; import { pageHref } from "./pageHref";
import type { SearchItem } from "./searchIndex"; import type { SearchItem } from "./searchIndex";
@@ -29,7 +25,6 @@ export type AgentDetailProps = {
item: AgentDetailItem; item: AgentDetailItem;
/** Rendered, sanitized markdown body with heading ids already stamped. */ /** Rendered, sanitized markdown body with heading ids already stamped. */
markdownHtml: string; markdownHtml: string;
toc: DetailTocItem[];
vscodeUrl: string; vscodeUrl: string;
insidersUrl: string; insidersUrl: string;
githubUrl: string; githubUrl: string;
@@ -45,7 +40,6 @@ export type AgentDetailProps = {
export function AgentDetail({ export function AgentDetail({
item, item,
markdownHtml, markdownHtml,
toc,
vscodeUrl, vscodeUrl,
insidersUrl, insidersUrl,
githubUrl, githubUrl,
@@ -138,7 +132,6 @@ export function AgentDetail({
{ label: item.title }, { label: item.title },
]} ]}
install={install} install={install}
toc={toc}
sidebar={ sidebar={
<ResourceMeta <ResourceMeta
kicker="Agent details" kicker="Agent details"
@@ -9,11 +9,7 @@ import React from "react";
import { Button, Token } from "@primer/react-brand"; import { Button, Token } from "@primer/react-brand";
import { import { DetailChassis, type DetailSibling } from "./DetailChassis";
DetailChassis,
type DetailSibling,
type DetailTocItem,
} from "./DetailChassis";
import { ResourceMeta } from "./ResourceMeta"; import { ResourceMeta } from "./ResourceMeta";
import { pageHref } from "./pageHref"; import { pageHref } from "./pageHref";
import type { SearchItem } from "./searchIndex"; import type { SearchItem } from "./searchIndex";
@@ -42,7 +38,6 @@ export type ExtensionDetailProps = {
images: ExtensionDetailImage[]; images: ExtensionDetailImage[];
/** Rendered, sanitized README with heading ids already stamped. */ /** Rendered, sanitized README with heading ids already stamped. */
markdownHtml: string; markdownHtml: string;
toc: DetailTocItem[];
/** `ghapp://` deep link — absent for external extensions. */ /** `ghapp://` deep link — absent for external extensions. */
installUrl?: string | null; installUrl?: string | null;
/** Copilot CLI command — absent for external extensions. */ /** Copilot CLI command — absent for external extensions. */
@@ -103,7 +98,6 @@ export function ExtensionDetail({
item, item,
images, images,
markdownHtml, markdownHtml,
toc,
installUrl, installUrl,
installCommand, installCommand,
sourceUrl, sourceUrl,
@@ -154,10 +148,6 @@ export function ExtensionDetail({
</div> </div>
) : null; ) : null;
const fullToc = hasPreview
? [{ id: PREVIEW_SECTION_ID, label: "Preview" }, ...toc]
: toc;
return ( return (
<DetailChassis <DetailChassis
title={item.name} title={item.name}
@@ -168,7 +158,6 @@ export function ExtensionDetail({
]} ]}
install={install} install={install}
heroExtras={heroExtras} heroExtras={heroExtras}
toc={fullToc}
sidebar={ sidebar={
<ResourceMeta <ResourceMeta
kicker="Extension details" kicker="Extension details"
@@ -3,11 +3,7 @@ import React from "react";
import { ActionMenu, Button, Token } from "@primer/react-brand"; import { ActionMenu, Button, Token } from "@primer/react-brand";
import { import { DetailChassis, type DetailSibling } from "./DetailChassis";
DetailChassis,
type DetailSibling,
type DetailTocItem,
} from "./DetailChassis";
import { ResourceMeta } from "./ResourceMeta"; import { ResourceMeta } from "./ResourceMeta";
import { pageHref } from "./pageHref"; import { pageHref } from "./pageHref";
import type { SearchItem } from "./searchIndex"; import type { SearchItem } from "./searchIndex";
@@ -28,7 +24,6 @@ export type InstructionDetailProps = {
item: InstructionDetailItem; item: InstructionDetailItem;
/** Rendered, sanitized markdown body with heading ids already stamped. */ /** Rendered, sanitized markdown body with heading ids already stamped. */
markdownHtml: string; markdownHtml: string;
toc: DetailTocItem[];
/** `chat-instructions` VS Code install URL (see src/lib/detail-page.ts). */ /** `chat-instructions` VS Code install URL (see src/lib/detail-page.ts). */
vscodeUrl: string; vscodeUrl: string;
insidersUrl: string; insidersUrl: string;
@@ -45,7 +40,6 @@ export type InstructionDetailProps = {
export function InstructionDetail({ export function InstructionDetail({
item, item,
markdownHtml, markdownHtml,
toc,
vscodeUrl, vscodeUrl,
insidersUrl, insidersUrl,
githubUrl, githubUrl,
@@ -144,7 +138,6 @@ export function InstructionDetail({
]} ]}
install={install} install={install}
heroExtras={heroExtras} heroExtras={heroExtras}
toc={toc}
sidebar={ sidebar={
<ResourceMeta <ResourceMeta
kicker="Instruction details" kicker="Instruction details"
+1 -12
View File
@@ -15,11 +15,7 @@ import {
import { clsx } from "clsx"; import { clsx } from "clsx";
import type { ExternalSource } from "../../lib/external-source"; import type { ExternalSource } from "../../lib/external-source";
import { import { DetailChassis, type DetailSibling } from "./DetailChassis";
DetailChassis,
type DetailSibling,
type DetailTocItem,
} from "./DetailChassis";
import { ResourceMeta } from "./ResourceMeta"; import { ResourceMeta } from "./ResourceMeta";
import { pageHref } from "./pageHref"; import { pageHref } from "./pageHref";
import type { SearchItem } from "./searchIndex"; import type { SearchItem } from "./searchIndex";
@@ -57,7 +53,6 @@ export type PluginDetailProps = {
item: PluginDetailItem; item: PluginDetailItem;
/** Rendered, sanitized README with heading ids already stamped. */ /** Rendered, sanitized README with heading ids already stamped. */
markdownHtml: string; markdownHtml: string;
toc: DetailTocItem[];
/** GitHub URL for the plugin source (repo tree, or the external repo). */ /** GitHub URL for the plugin source (repo tree, or the external repo). */
githubUrl: string; githubUrl: string;
/** Copilot CLI command that installs this plugin. */ /** Copilot CLI command that installs this plugin. */
@@ -104,7 +99,6 @@ function itemTitle(item: PluginIncludedItem): string {
export function PluginDetail({ export function PluginDetail({
item, item,
markdownHtml, markdownHtml,
toc,
githubUrl, githubUrl,
installCommand, installCommand,
lastUpdated, lastUpdated,
@@ -182,10 +176,6 @@ export function PluginDetail({
</div> </div>
); );
const chassisToc: DetailTocItem[] = hasContents
? [{ id: "plugin-contents", label: "What's included" }, ...toc]
: toc;
return ( return (
<DetailChassis <DetailChassis
title={item.name} title={item.name}
@@ -196,7 +186,6 @@ export function PluginDetail({
]} ]}
install={install} install={install}
heroExtras={heroExtras} heroExtras={heroExtras}
toc={chassisToc}
sidebar={ sidebar={
<ResourceMeta <ResourceMeta
kicker="Plugin details" kicker="Plugin details"
+1 -9
View File
@@ -10,11 +10,7 @@ import React from "react";
import { Button, Text } from "@primer/react-brand"; import { Button, Text } from "@primer/react-brand";
import { import { DetailChassis, type DetailSibling } from "./DetailChassis";
DetailChassis,
type DetailSibling,
type DetailTocItem,
} from "./DetailChassis";
import { ResourceMeta } from "./ResourceMeta"; import { ResourceMeta } from "./ResourceMeta";
import { import {
SyntaxHighlightedCode, SyntaxHighlightedCode,
@@ -51,7 +47,6 @@ export type SkillDetailProps = {
item: SkillDetailItem; item: SkillDetailItem;
/** Rendered, sanitized SKILL.md body with heading ids already stamped. */ /** Rendered, sanitized SKILL.md body with heading ids already stamped. */
markdownHtml: string; markdownHtml: string;
toc: DetailTocItem[];
/** GitHub tree URL for the skill folder. */ /** GitHub tree URL for the skill folder. */
githubUrl: string; githubUrl: string;
/** `https://github.com/.../blob/main` — per-file links are built from this. */ /** `https://github.com/.../blob/main` — per-file links are built from this. */
@@ -143,7 +138,6 @@ function encodeRepoPath(filePath: string): string {
export function SkillDetail({ export function SkillDetail({
item, item,
markdownHtml, markdownHtml,
toc,
githubUrl, githubUrl,
githubBlobBase, githubBlobBase,
rawBase, rawBase,
@@ -299,8 +293,6 @@ export function SkillDetail({
/> />
</div> </div>
} }
/* Anchors only exist while SKILL.md is on screen. */
toc={isPrimary ? toc : []}
sidebar={ sidebar={
<ResourceMeta <ResourceMeta
kicker="Skill details" kicker="Skill details"
+1 -2
View File
@@ -40,7 +40,7 @@ const { item, previous, next } = Astro.props as {
}; };
const detail = loadDetailPage(item, "agent"); const detail = loadDetailPage(item, "agent");
const { html, toc } = buildDetailToc(detail.markdownHtml); const { html } = buildDetailToc(detail.markdownHtml);
const base = import.meta.env.BASE_URL ?? "/"; const base = import.meta.env.BASE_URL ?? "/";
const prefix = base.endsWith("/") ? base : base + "/"; const prefix = base.endsWith("/") ? base : base + "/";
@@ -61,7 +61,6 @@ const downloadUrl = RAW_BASE + "/" + item.path;
client:load client:load
item={item as any} item={item as any}
markdownHtml={html} markdownHtml={html}
toc={toc}
vscodeUrl={detail.vscodeUrl} vscodeUrl={detail.vscodeUrl}
insidersUrl={detail.insidersUrl} insidersUrl={detail.insidersUrl}
githubUrl={detail.githubUrl} githubUrl={detail.githubUrl}
+1 -2
View File
@@ -104,7 +104,7 @@ const images = Array.from(
const { markdownHtml } = item.readmeFile const { markdownHtml } = item.readmeFile
? readResourceMarkdown(item.readmeFile) ? readResourceMarkdown(item.readmeFile)
: { markdownHtml: "" }; : { markdownHtml: "" };
const { html, toc } = buildDetailToc(markdownHtml); const { html } = buildDetailToc(markdownHtml);
const lastUpdated = formatLastUpdated(item.lastUpdated ?? null); const lastUpdated = formatLastUpdated(item.lastUpdated ?? null);
@@ -139,7 +139,6 @@ const siblingOf = (sibling?: ExtensionItem) =>
item={item} item={item}
images={images} images={images}
markdownHtml={html} markdownHtml={html}
toc={toc}
installUrl={appInstallUrl} installUrl={appInstallUrl}
installCommand={item.external ? null : item.installCommand} installCommand={item.external ? null : item.installCommand}
sourceUrl={sourceUrl} sourceUrl={sourceUrl}
+1 -2
View File
@@ -40,7 +40,7 @@ const { item, previous, next } = Astro.props as {
}; };
const detail = loadDetailPage(item, "instruction"); const detail = loadDetailPage(item, "instruction");
const { html, toc } = buildDetailToc(detail.markdownHtml); const { html } = buildDetailToc(detail.markdownHtml);
const base = import.meta.env.BASE_URL ?? "/"; const base = import.meta.env.BASE_URL ?? "/";
const prefix = base.endsWith("/") ? base : base + "/"; const prefix = base.endsWith("/") ? base : base + "/";
@@ -61,7 +61,6 @@ const downloadUrl = RAW_BASE + "/" + item.path;
client:load client:load
item={item as any} item={item as any}
markdownHtml={html} markdownHtml={html}
toc={toc}
vscodeUrl={detail.vscodeUrl} vscodeUrl={detail.vscodeUrl}
insidersUrl={detail.insidersUrl} insidersUrl={detail.insidersUrl}
githubUrl={detail.githubUrl} githubUrl={detail.githubUrl}
+1 -2
View File
@@ -61,7 +61,7 @@ const { markdownHtml } = item.readmeFile
? readResourceMarkdown(item.readmeFile) ? readResourceMarkdown(item.readmeFile)
: { markdownHtml: "" }; : { markdownHtml: "" };
const { html, toc } = buildDetailToc(markdownHtml); const { html } = buildDetailToc(markdownHtml);
const githubUrl = item.external const githubUrl = item.external
? externalRepoUrl(item.source, [item.repository, item.homepage, GITHUB_TREE]) ? externalRepoUrl(item.source, [item.repository, item.homepage, GITHUB_TREE])
@@ -90,7 +90,6 @@ const siblingOf = (sibling?: PluginItem) =>
client:load client:load
item={item} item={item}
markdownHtml={html} markdownHtml={html}
toc={toc}
githubUrl={githubUrl} githubUrl={githubUrl}
installCommand={installCommand} installCommand={installCommand}
lastUpdated={lastUpdated} lastUpdated={lastUpdated}
+1 -2
View File
@@ -54,7 +54,7 @@ const { item, previous, next } = Astro.props as {
const { markdownHtml, rawMarkdown } = readResourceMarkdown(item.skillFile); const { markdownHtml, rawMarkdown } = readResourceMarkdown(item.skillFile);
const lastUpdated = formatLastUpdated(item.lastUpdated); const lastUpdated = formatLastUpdated(item.lastUpdated);
const { html, toc } = buildDetailToc(markdownHtml); const { html } = buildDetailToc(markdownHtml);
const githubUrl = `${GITHUB_TREE_BASE}/${item.path}`; const githubUrl = `${GITHUB_TREE_BASE}/${item.path}`;
const installCommand = `gh skills install ${REPO_IDENTIFIER} ${item.id}`; const installCommand = `gh skills install ${REPO_IDENTIFIER} ${item.id}`;
@@ -72,7 +72,6 @@ const siblingOf = (sibling?: SkillItem) =>
client:load client:load
item={item} item={item}
markdownHtml={html} markdownHtml={html}
toc={toc}
githubUrl={githubUrl} githubUrl={githubUrl}
githubBlobBase={GITHUB_BLOB_BASE} githubBlobBase={GITHUB_BLOB_BASE}
rawBase={RAW_BASE} rawBase={RAW_BASE}