Skip to content

Amp skimlinks exclude selector#18

Open
slocka wants to merge 7 commits into
masterfrom
amp-skimlinks-exclude-selector
Open

Amp skimlinks exclude selector#18
slocka wants to merge 7 commits into
masterfrom
amp-skimlinks-exclude-selector

Conversation

@slocka
Copy link
Copy Markdown

@slocka slocka commented Dec 2, 2019

  • Add "exclude-selector" extension option to prevent the affiliation of links in some HTML blocks.
  • Add class "noskimlinks" for a "ready to use" solution to prevent the affiliation of links in some HTML blocks.
  • Add "include-selector" extension option to replace existing "link-selector" option. The two options are the same, we are just renaming for consistency with "exclude-selector".

const excludedAnchors = nodeListToArray(
this.rootNode_.querySelectorAll(this.excludeSelector_)
);
anchors = anchors.filter(a => excludedAnchors.indexOf(a) === -1);
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure how big of a deal it is, but you are not forcing the exludeSelector / linkSelector to match an actual anchor.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is a bit of a concern, I put a WARNING in the documentation https://amp.dev/documentation/components/amp-skimlinks/ to tell the publisher to use this option carefully. I can't think of a reliable way to validate that a CSS selector is matching an a element. Maybe some regex but not sure if we want to go down that road.

For now we need to rely on the publisher being careful.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when you are filtering anchors you can check for .tagname but it will add some processing time (+ you will have to do the filter even if there are no excludeSelectors

it('Should have both the noskimlinks exclude selector and the custom exclude selector when defined', () => {
const element = helpers.createAmpSkimlinksElement({
'publisher-code': '123X123',
'exclude-selector': '.taboola a',
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably not the best idea to reference other companies here

Copy link
Copy Markdown

@mayankamencherla mayankamencherla left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants