Skip to content

feat(design): automatically add anchor link and copy URL button to article headings #4260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
damienwebdev merged 11 commits into from
Jan 6, 2026
Merged

feat(design): automatically add anchor link and copy URL button to article headings #4260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b27b180
feat(design): implemented heading link component in `@daffodil/design`
joannalauu Dec 13, 2025
5c7cca5
feat(design): full url path to fragment is copied to clipboard by cli…
joannalauu Dec 13, 2025
e4721a9
refactor(daffio): removed all code implemented in `#3897`
joannalauu Dec 13, 2025
44df223
test(design): add spec tests for `DaffArticleHeadingLinkComponent` an…
joannalauu Dec 13, 2025
00dafaa
feat: don't add link to heading if `nolink` attribute is present
joannalauu Dec 14, 2025
554459c
docs: update readme
joannalauu Dec 14, 2025
a489902
feat(design-examples): update article-headings examples
joannalauu Dec 14, 2025
416f085
fix: error with html tags in readme
joannalauu Dec 14, 2025
0eb7b39
implement requested changes
joannalauu Dec 17, 2025
f1b3159
add gap to heading-link styles
joannalauu Dec 31, 2025
15ae60c
skip headings in article encapsulated components
joannalauu Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/base/base.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<div class="daffio-docs-api-base-fragment__title">
@if (child()) {
<h3 daffioDocsTocHeader [id]="doc().slug" [content]="doc().name" level="3">
<daffio-docs-heading-link [fragment]="doc().slug">
{{doc().name}}
</daffio-docs-heading-link>
</h3>
} @else {
<h1 [attr.id]="doc().slug">{{doc().name}}</h1>
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/base/base.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {

import { DaffioSafeHtmlPipe } from '../../../../../core/html-sanitizer/safe.pipe';
import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
import { DaffioDocsApiItemLabelComponent } from '../../api-item-label/api-item-label.component';
Expand All @@ -32,7 +31,6 @@ import { DaffioDocsApiItemLabelComponent } from '../../api-item-label/api-item-l
DaffioDocsApiItemLabelComponent,
DaffioInterceptNavigationDirective,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiBaseFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDocBase> {
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@if (!child()) {
@if (doc().examples.length > 0) {
<h2 daffioDocsTocHeader id="examples" content="Examples" level="2">
<daffio-docs-heading-link [fragment]="'examples'">
Examples
</daffio-docs-heading-link>
</h2>
}
@for (example of doc().examples; track example.id) {
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/examples/examples.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {

import { DaffioSafeHtmlPipe } from '../../../../../core/html-sanitizer/safe.pipe';
import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';

Expand All @@ -27,7 +26,6 @@ import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fr
DaffioSafeHtmlPipe,
DaffioInterceptNavigationDirective,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiExamplesFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDocBase> {
Expand Down
4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@if (doc().inputs.length > 0) {
@if (child()) {
<h4 daffioDocsTocHeader content="Inputs" id="{{doc().slug}}-inputs" level="4" class="daffio-docs-api-inputs-fragment__heading">
<daffio-docs-heading-link [fragment]="`${doc().slug}-inputs`">
<fa-icon [icon]="faChevronRight" class="daffio-docs-api-inputs-fragment__input-icon"></fa-icon> Inputs
</daffio-docs-heading-link>
</h4>
} @else {
<h2 daffioDocsTocHeader id="inputs" content="Inputs" level="2" class="daffio-docs-api-inputs-fragment__heading">
<daffio-docs-heading-link [fragment]="'inputs'">
<fa-icon [icon]="faChevronRight" class="daffio-docs-api-inputs-fragment__input-icon"></fa-icon> Inputs
</daffio-docs-heading-link>
</h2>
}
<div class="daffio-docs-api-inputs-fragment__member-grid">
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/inputs/inputs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
DaffDocTableOfContents,
} from '@daffodil/docs-utils';

import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/property-block.component';
Expand All @@ -32,7 +31,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
FaIconComponent,
DaffioDocsApiPropertyBlockComponent,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiInputsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDirective> {
Expand Down
4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@if (doc().methods.length > 0) {
@if (child()) {
<h4 daffioDocsTocHeader id="{{doc().slug}}-methods" content="Methods" level="4" class="daffio-docs-api-methods-fragment__heading">
<daffio-docs-heading-link [fragment]="`${doc().slug}-methods`">
<span class="daffio-docs-api-methods-fragment__method-icon">()</span> Methods
</daffio-docs-heading-link>
</h4>
} @else {
<h2 daffioDocsTocHeader id="methods" content="Methods" level="2" class="daffio-docs-api-methods-fragment__heading">
<daffio-docs-heading-link [fragment]="'methods'">
<span class="daffio-docs-api-methods-fragment__method-icon">()</span> Methods
</daffio-docs-heading-link>
</h2>
}
<div class="daffio-docs-api-methods-fragment__member-grid">
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/methods/methods.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
DaffDocTableOfContents,
} from '@daffodil/docs-utils';

import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
import { DaffioDocsApiMethodBlockComponent } from '../../method-block/method-block.component';
Expand All @@ -26,7 +25,6 @@ import { DaffioDocsApiMethodBlockComponent } from '../../method-block/method-blo
imports: [
DaffioDocsApiMethodBlockComponent,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiMethodsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiType> {
Expand Down
4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@if (doc().outputs.length > 0) {
@if (child()) {
<h4 daffioDocsTocHeader id="{{doc().slug}}-outputs" content="Outputs" level="4" class="daffio-docs-api-outputs-fragment__heading">
<daffio-docs-heading-link [fragment]="`${doc().slug}-outputs`">
<fa-icon [icon]="faChevronLeft" class="daffio-docs-api-outputs-fragment__output-icon"></fa-icon> Outputs
</daffio-docs-heading-link>
</h4>
} @else {
<h2 daffioDocsTocHeader id="outputs" content="Outputs" level="2" class="daffio-docs-api-outputs-fragment__heading">
<daffio-docs-heading-link [fragment]="'outputs'">
<fa-icon [icon]="faChevronLeft" class="daffio-docs-api-outputs-fragment__output-icon"></fa-icon> Outputs
</daffio-docs-heading-link>
</h2>
}
<div class="daffio-docs-api-outputs-fragment__member-grid">
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/outputs/outputs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
DaffDocTableOfContents,
} from '@daffodil/docs-utils';

import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/property-block.component';
Expand All @@ -32,7 +31,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
FaIconComponent,
DaffioDocsApiPropertyBlockComponent,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiOutputsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiDirective> {
Expand Down
4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/api/components/fragments/params/params.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@if (doc().parameterDocs?.length > 0) {
@if (child()) {
<h6 daffioDocsTocHeader id="{{doc().slug}}-params" content="Parameters" level="6" class="daffio-docs-api-params-fragment__heading">
<daffio-docs-heading-link [fragment]="`${doc().slug}-params`">
<fa-icon [icon]="faCode" class="daffio-docs-api-params-fragment__parameters-icon"></fa-icon>Parameters
</daffio-docs-heading-link>
</h6>
} @else {
<h4 daffioDocsTocHeader id="params" content="Parameters" level="4" class="daffio-docs-api-params-fragment__heading">
<daffio-docs-heading-link [fragment]="'params'">
<fa-icon [icon]="faCode" class="daffio-docs-api-params-fragment__parameters-icon"></fa-icon>Parameters
</daffio-docs-heading-link>
</h4>
}
@for (param of doc().parameterDocs; track $index) {
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/params/params.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
} from '@daffodil/docs-utils';

import { DaffioInterceptNavigationDirective } from '../../../../../core/router/intercept-navigation.directive';
import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';

Expand All @@ -31,7 +30,6 @@ import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fr
DaffioDocsTocHeaderDirective,
DaffioInterceptNavigationDirective,
DaffioSafeHtmlPipe,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiParamsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffDocsApiFunction> {
Expand Down
4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/api/components/fragments/props/props.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
@if (hasPropsWithDocs()) {
@if (child()) {
<h4 daffioDocsTocHeader id="{{doc().slug}}-props" content="Properties" level="4">
<daffio-docs-heading-link [fragment]="`${doc().slug}-props`">
Properties
</daffio-docs-heading-link>
</h4>
} @else {
<h2 daffioDocsTocHeader id="props" content="Properties" level="2">
<daffio-docs-heading-link [fragment]="'props'">
Properties
</daffio-docs-heading-link>
</h2>
}
@if (isConcrete()) {
Expand Down
2 changes: 0 additions & 2 deletions apps/daffio/src/app/docs/api/components/fragments/props/props.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
DaffDocTableOfContents,
} from '@daffodil/docs-utils';

import { DaffioDocsHeadingLinkComponent } from '../../../../components/heading-link/heading-link.component';
import { DaffioDocsTocHeaderDirective } from '../../../../toc/header.directive';
import { DaffioDocsApiDynamicContentFragment } from '../../../dynamic-content/fragment.type';
import { DaffioDocsApiInterfaceBlockComponent } from '../../interface-block/interface-block.component';
Expand All @@ -29,7 +28,6 @@ import { DaffioDocsApiPropertyBlockComponent } from '../../property-block/proper
DaffioDocsApiPropertyBlockComponent,
DaffioDocsApiInterfaceBlockComponent,
DaffioDocsTocHeaderDirective,
DaffioDocsHeadingLinkComponent,
],
})
export class DaffioDocsApiPropsFragmentComponent implements DaffioDocsApiDynamicContentFragment<DaffApiType> {
Expand Down
23 changes: 0 additions & 23 deletions apps/daffio/src/app/docs/components/heading-link/heading-link-theme.scss
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions apps/daffio/src/app/docs/components/heading-link/heading-link.component.html
View file
Open in desktop

This file was deleted.

20 changes: 0 additions & 20 deletions apps/daffio/src/app/docs/components/heading-link/heading-link.component.scss
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions apps/daffio/src/app/docs/components/heading-link/heading-link.component.ts
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions apps/daffio/src/scss/component-themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
@use '../app/docs/api/components/fragments/outputs/outputs-theme.scss' as api-outputs-fragment;
@use '../app/docs/api/components/method-block/method-block-theme' as api-method-block;
@use '../app/docs/api/components/api-item-label/api-item-label-theme' as api-item-label;
@use '../app/docs/components/heading-link/heading-link-theme' as docs-heading-link;
@use '../app/docs/components/doc-viewer/doc-viewer-theme' as doc-viewer;
@use '../app/content/home/components/home-callout-sponsors/home-callout-sponsors-theme' as home-callout-sponsors;

Expand All @@ -45,6 +44,5 @@
@include api-inputs-fragment.daffio-api-inputs-fragment-theme($theme);
@include api-outputs-fragment.daffio-api-outputs-fragment-theme($theme);
@include api-item-label.daffio-api-item-label-theme($theme);
@include docs-heading-link.daffio-docs-heading-link-theme($theme);
@include doc-viewer.daffio-doc-viewer-theme($theme);
}
1 change: 1 addition & 0 deletions libs/design-examples/article/src/article-headings/article-headings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<daff-article>
<h1>This is a h1 heading with <code>code</code></h1>
<h2>This is a h2 heading with <code>code</code></h2>
<h2 nolink>This is a h2 heading with no heading link</h2>
<h3>This is a h3 heading with <code>code</code></h3>
<h4>This is a h4 heading with <code>code</code></h4>
<h5>This is a h5 heading with <code>code</code></h5>
Expand Down
2 changes: 2 additions & 0 deletions libs/design/article/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ Article can be used on any content page that displays large blocks of text-drive
## Supported elements

### Headings
All `<h2>`, `<h3>`, `<h4>` headings have an anchor link that directs users to that heading on click and a copy button that copies the heading URL to clipboard on click by default. Disable this by adding a `nolink` attribute to the heading element.

<design-land-example-viewer-container example="article-headings"></design-land-example-viewer-container>

### Article Meta
Expand Down
10 changes: 10 additions & 0 deletions libs/design/article/src/article-heading-link/heading-link/heading-link.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<a class="daff-article-heading-link__anchor" routerLink="." [fragment]="fragment()" queryParamsHandling="preserve">
{{ label() }}
</a>
<button daff-icon-button class="daff-article-heading-link__button" [attr.aria-label]="ariaLabel" (click)="copyLink()">
@if (copied()) {
<fa-icon [icon]="faCheck" />
} @else {
<fa-icon [icon]="faLink" />
}
</button>
23 changes: 23 additions & 0 deletions libs/design/article/src/article-heading-link/heading-link/heading-link.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
:host {
display: flex;
flex-wrap: wrap;
align-items: center;
Comment thread
xelaint marked this conversation as resolved.
gap: 0.5rem;

&:hover {
.daff-article-heading-link__button {
opacity: 1;
}
}
}

.daff-article-heading-link {
&__anchor {
text-decoration: none;
}

&__button {
opacity: 0;
transition: opacity 200ms ease;
}
}
Loading