cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): fix window title on Home page (#20440)

Browse Source 
Using `display: none` on the `<h1>` causes `innerText` to not work as expected
and include the icon ligature (`link`) in the title. This caused the window
title on the angular.io Home page to appear as "Angular - link".
This commit fixes it by not generating anchors at all for headings with the
`no-anchor` class.

Fixes #20427

PR Close #20440
This commit is contained in:
George Kalpakas
2017-11-15 03:01:00 +02:00
committed by Miško Hevery
parent c28b52187a
commit 7e38f4fd1f
9 changed files with 98 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
aio/tools/transforms/angular-base-package/post-processors/autolink-headings.js vendored
View File

@ -1,9 +1,34 @@
const has = require('hast-util-has-property');
const is = require('hast-util-is-element');
const slug = require('rehype-slug');
const link = require('rehype-autolink-headings');
const visit = require('unist-util-visit');
/**
* Get remark to inject anchors into headings
* Get remark to add IDs to headings and inject anchors into them.
* This is a stripped-down equivalent of [rehype-autolink-headings](https://github.com/wooorm/rehype-autolink-headings)
* that supports ignoring headings with the `no-anchor` class.
*/
const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const NO_ANCHOR_CLASS = 'no-anchor';
const clone = obj => JSON.parse(JSON.stringify(obj));
const hasClass = (node, cls) => {
const className = node.properties.className;
return className && className.includes(cls);
};
const link = options =>
tree => visit(tree, node => {
if (is(node, HEADINGS) && has(node, 'id') && !hasClass(node, NO_ANCHOR_CLASS)) {
node.children.unshift({
type: 'element',
tagName: 'a',
properties: Object.assign(clone(options.properties), {href: `#${node.properties.id}`}),
children: clone(options.content)
});
}
});
module.exports = [
slug,
[link, {
@ -12,11 +37,13 @@ module.exports = [
className: ['header-link'],
'aria-hidden': 'true'
},
content: {
type: 'element',
tagName: 'i',
properties: {className: ['material-icons']},
children: [{ type: 'text', value: 'link' }]
}
content: [
{
type: 'element',
tagName: 'i',
properties: {className: ['material-icons']},
children: [{ type: 'text', value: 'link' }]
}
]
}]
];

43
aio/tools/transforms/angular-base-package/post-processors/autolink-headings.spec.js
View File

@ -14,20 +14,37 @@ describe('autolink-headings postprocessor', () => {
});
it('should add anchors to headings', () => {
const docs = [ {
docType: 'a',
renderedContent: `
<h1>Heading 1</h2>
<h2>Heading with <strong>bold</strong></h2>
<h3>Heading with encoded chars &#x26;</h3>
`
}];
const originalContent = `
<h1>Heading 1</h2>
<h2>Heading with <strong>bold</strong></h2>
<h3>Heading with encoded chars &#x26;</h3>
`;
const processedContent = `
<h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
<h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
<h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
`;
const docs = [{docType: 'a', renderedContent: originalContent}];
processor.$process(docs);
expect(docs[0].renderedContent).toEqual(`
<h1 id="heading-1"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-1"><i class="material-icons">link</i></a>Heading 1</h1>
<h2 id="heading-with-bold"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-bold"><i class="material-icons">link</i></a>Heading with <strong>bold</strong></h2>
<h3 id="heading-with-encoded-chars-"><a title="Link to this heading" class="header-link" aria-hidden="true" href="#heading-with-encoded-chars-"><i class="material-icons">link</i></a>Heading with encoded chars &#x26;</h3>
`);
expect(docs[0].renderedContent).toBe(processedContent);
});
it('should ignore headings with the `no-anchor` class', () => {
const originalContent = `
<h1 class="no-anchor">Heading 1</h2>
<h2 class="no-anchor">Heading with <strong>bold</strong></h2>
<h3 class="no-anchor">Heading with encoded chars &#x26;</h3>
`;
const processedContent = `
<h1 class="no-anchor" id="heading-1">Heading 1</h1>
<h2 class="no-anchor" id="heading-with-bold">Heading with <strong>bold</strong></h2>
<h3 class="no-anchor" id="heading-with-encoded-chars-">Heading with encoded chars &#x26;</h3>
`;
const docs = [{docType: 'a', renderedContent: originalContent}];
processor.$process(docs);
expect(docs[0].renderedContent).toBe(processedContent);
});
});