Skip to content

Commit 7c07870

Browse files
velutvelut
committed
feat: render anchor links on server
1 parent 4ef3c45 commit 7c07870

11 files changed

+45
-32
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424
"@jsdocs-io/extractor": "1.0.0-12",
2525
"@microsoft/tsdoc": "^0.15.0",
2626
"alpinejs": "^3.14.1",
27-
"anchor-js": "^5.0.0",
2827
"astro": "^4.15.3",
2928
"astro-seo": "^0.8.4",
3029
"dompurify": "^3.1.6",

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/AnchoredH2.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
type Props = {
3+
id: string;
4+
};
5+
6+
const { id } = Astro.props;
7+
---
8+
9+
<h2 {id} class="group flex items-center gap-2">
10+
<span><slot /></span>
11+
<a href={`#${id}`} class="no-underline opacity-0 group-hover:opacity-100 group-focus:opacity-100"
12+
>#</a
13+
>
14+
</h2>

‎src/components/DeclarationTitle.astro‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,17 @@ const [name, kind] =
2424
const url = unpkgUrl(declaration);
2525
---
2626

27-
<h3 {id} data-declaration={declaration.id} data-kind={declaration.kind}>
28-
{kind && <span>{kind}</span>}
29-
<a class="link-hover link font-semibold text-primary" href={url}>{name}</a>
27+
<h3
28+
{id}
29+
data-declaration={declaration.id}
30+
data-kind={declaration.kind}
31+
class="group flex items-center gap-2"
32+
>
33+
<span>
34+
{kind && <span>{kind}</span>}
35+
<a class="link-hover link font-semibold text-primary" href={url}>{name}</a>
36+
</span>
37+
<a href={`#${id}`} class="no-underline opacity-0 group-hover:opacity-100 group-focus:opacity-100"
38+
>#</a
39+
>
3040
</h3>

‎src/components/Declarations.astro‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type {
1212
import type { DeclarationUrlFn } from "../../lib/declaration-url";
1313
import { shortId } from "../../lib/short-id";
1414
import { type UnpkgUrlFn } from "../../lib/unpkg-url";
15+
import AnchoredH2 from "./AnchoredH2.astro";
1516
import Declaration from "./Declaration.astro";
1617
1718
type Props = {
@@ -34,7 +35,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
3435
{
3536
variables.length > 0 && (
3637
<>
37-
<h2 id={`${containerName}-variables`}>Variables</h2>
38+
<AnchoredH2 id={`${containerName}-variables`}>Variables</AnchoredH2>
3839
{variables.map((declaration) => (
3940
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
4041
))}
@@ -45,7 +46,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
4546
{
4647
functions.length > 0 && (
4748
<>
48-
<h2 id={`${containerName}-functions`}>Functions</h2>
49+
<AnchoredH2 id={`${containerName}-functions`}>Functions</AnchoredH2>
4950
{functions.map((declaration) => (
5051
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
5152
))}
@@ -56,7 +57,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
5657
{
5758
classes.length > 0 && (
5859
<>
59-
<h2 id={`${containerName}-classes`}>Classes</h2>
60+
<AnchoredH2 id={`${containerName}-classes`}>Classes</AnchoredH2>
6061
{classes.map((declaration) => (
6162
<>
6263
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
@@ -84,7 +85,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
8485
{
8586
interfaces.length > 0 && (
8687
<>
87-
<h2 id={`${containerName}-interfaces`}>Interfaces</h2>
88+
<AnchoredH2 id={`${containerName}-interfaces`}>Interfaces</AnchoredH2>
8889
{interfaces.map((declaration) => (
8990
<>
9091
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
@@ -128,7 +129,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
128129
{
129130
enums.length > 0 && (
130131
<>
131-
<h2 id={`${containerName}-enums`}>Enums</h2>
132+
<AnchoredH2 id={`${containerName}-enums`}>Enums</AnchoredH2>
132133
{enums.map((declaration) => (
133134
<>
134135
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
@@ -148,7 +149,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
148149
{
149150
types.length > 0 && (
150151
<>
151-
<h2 id={`${containerName}-types`}>Types</h2>
152+
<AnchoredH2 id={`${containerName}-types`}>Types</AnchoredH2>
152153
{types.map((declaration) => (
153154
<Declaration {declaration} {unpkgUrl} {declarationUrl} />
154155
))}
@@ -159,7 +160,7 @@ const namespaces = declarations.filter((d): d is ExtractedNamespace => d.kind ==
159160
{
160161
namespaces.length > 0 && (
161162
<>
162-
<h2 id={`${containerName}-namespaces`}>Namespaces</h2>
163+
<AnchoredH2 id={`${containerName}-namespaces`}>Namespaces</AnchoredH2>
163164
{namespaces.map((declaration) => (
164165
<>
165166
<Declaration {declaration} {unpkgUrl} {declarationUrl} />

‎src/components/PackageAbout.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import newGitHubIssueURL from "new-github-issue-url";
33
import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
4+
import AnchoredH2 from "./AnchoredH2.astro";
45
56
type Props = PackagePageHandlerProps;
67
@@ -12,7 +13,7 @@ const issueUrl = newGitHubIssueURL({
1213
});
1314
---
1415

15-
<h2 id="package-about">About</h2>
16+
<AnchoredH2 id="package-about">About</AnchoredH2>
1617

1718
<p>
1819
Page generated <time

‎src/components/PackageBadge.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
---
2+
import AnchoredH2 from "./AnchoredH2.astro";
23
import JsDocsIoBadge from "./JsDocsIoBadge.astro";
34
45
type Props = {
@@ -13,7 +14,7 @@ const markdownBadge = `[![${altText}](${badgeUrl})](${pkgUrl})`;
1314
const htmlBadge = `<a href="${pkgUrl}"><img src="${badgeUrl}" alt="${altText}"></a>`;
1415
---
1516

16-
<h2 id="package-badge">Badge</h2>
17+
<AnchoredH2 id="package-badge">Badge</AnchoredH2>
1718

1819
<JsDocsIoBadge />
1920

‎src/components/PackageDependencies.astro‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import type { NormalizedPackageJson } from "read-pkg";
3+
import AnchoredH2 from "./AnchoredH2.astro";
34
45
type Props = {
56
pkgJson: NormalizedPackageJson;
@@ -12,7 +13,7 @@ const peerDeps = Object.keys(pkgJson.peerDependencies ?? {}).sort((a, b) => a.lo
1213
---
1314

1415
{/* Always show information about production and dev dependencies even if there are none. */}
15-
<h2 id="package-dependencies">Dependencies ({deps.length})</h2>
16+
<AnchoredH2 id="package-dependencies">Dependencies ({deps.length})</AnchoredH2>
1617
{
1718
deps.length > 0 ?
1819
<ul>
@@ -25,7 +26,7 @@ const peerDeps = Object.keys(pkgJson.peerDependencies ?? {}).sort((a, b) => a.lo
2526
: <p>No dependencies.</p>
2627
}
2728

28-
<h2 id="package-dev-dependencies">Dev dependencies ({devDeps.length})</h2>
29+
<AnchoredH2 id="package-dev-dependencies">Dev dependencies ({devDeps.length})</AnchoredH2>
2930
{
3031
devDeps.length > 0 ?
3132
<ul>
@@ -42,7 +43,7 @@ const peerDeps = Object.keys(pkgJson.peerDependencies ?? {}).sort((a, b) => a.lo
4243
{
4344
peerDeps.length > 0 && (
4445
<>
45-
<h2 id="package-peer-dependencies">Peer dependencies ({peerDeps.length})</h2>
46+
<AnchoredH2 id="package-peer-dependencies">Peer dependencies ({peerDeps.length})</AnchoredH2>
4647
<ul>
4748
{peerDeps.map((dep) => (
4849
<li>

‎src/components/PackageOverview.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import type { PackagePageHandlerProps } from "../../lib/package-page-handler";
3+
import AnchoredH2 from "./AnchoredH2.astro";
34
import DocComment from "./DocComment.astro";
45
56
type Props = PackagePageHandlerProps;
@@ -11,5 +12,5 @@ const overview =
1112
: `/** Overview not available. */`;
1213
---
1314

14-
<h2 id="package-overview">Overview</h2>
15+
<AnchoredH2 id="package-overview">Overview</AnchoredH2>
1516
<DocComment doc={overview} />

‎src/layouts/BaseLayout.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ const titleTemplate = title !== "jsDocs.io" ? "%s - jsDocs.io" : undefined;
6161
<slot name="modals" />
6262
<PackageSearch />
6363

64-
<script src="../scripts/add-anchor-links.ts"></script>
6564
<script src="../scripts/add-copy-buttons.ts"></script>
6665
</body>
6766
</html>

0 commit comments

Comments
 (0)