Skip to content

Commit c7bb306

Browse files
jrfnljrfnl
committed
Generators/HTML: improve anchor links
As things were, the TOC would link to the section headers, but there was no straight-forward way to copy the link to a particular section once a user was viewing the section. This small change adds an invisible `§` character after each section title, which becomes visible when the user hovers over the title and allows for copying the permalink to that section. Includes updated test expectations.
1 parent 3e9be79 commit c7bb306

29 files changed

+416
-70
lines changed

‎src/Generators/HTML.php

+18-2
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,19 @@ class HTML extends Generator
5353
margin-top: 50px;
5454
}
5555
56+
h2 a.sniffanchor,
57+
h2 a.sniffanchor {
58+
color: #006C95;
59+
opacity: 0;
60+
padding: 0 3px;
61+
text-decoration: none;
62+
font-weight: bold;
63+
}
64+
h2:hover > a.sniffanchor,
65+
h2:focus > a.sniffanchor {
66+
opacity: 1;
67+
}
68+
5669
.code-comparison {
5770
width: 100%;
5871
}
@@ -290,8 +303,11 @@ public function processSniff(DOMNode $doc)
290303

291304
if (trim($content) !== '') {
292305
$title = $this->getTitle($doc);
293-
echo ' <a name="'.$this->titleToAnchor($title).'" />'.PHP_EOL;
294-
echo ' <h2>'.$title.'</h2>'.PHP_EOL;
306+
printf(
307+
' <h2 id="%1$s">%2$s<a class="sniffanchor" href="#%1$s"> &sect; </a></h2>'.PHP_EOL,
308+
$this->titleToAnchor($title),
309+
$title
310+
);
295311
echo $content;
296312
}
297313

‎tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-blank-lines" />
79-
<h2>Code Comparison, blank lines</h2>
91+
<h2 id="Code-Comparison,-blank-lines">Code Comparison, blank lines<a class="sniffanchor" href="#Code-Comparison,-blank-lines"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-block-length" />
79-
<h2>Code Comparison, block length</h2>
91+
<h2 id="Code-Comparison,-block-length">Code Comparison, block length<a class="sniffanchor" href="#Code-Comparison,-block-length"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-char-encoding" />
79-
<h2>Code Comparison, char encoding</h2>
91+
<h2 id="Code-Comparison,-char-encoding">Code Comparison, char encoding<a class="sniffanchor" href="#Code-Comparison,-char-encoding"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-line-length" />
79-
<h2>Code Comparison, line length</h2>
91+
<h2 id="Code-Comparison,-line-length">Code Comparison, line length<a class="sniffanchor" href="#Code-Comparison,-line-length"> &sect; </a></h2>
8092
<p class="text">Ensure there is no PHP &quot;Warning: str_repeat(): Second argument has to be greater than or equal to 0&quot;.<br/>
8193
Ref: squizlabs/PHP_CodeSniffer#2522</p>
8294
<table class="code-comparison">

‎tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Title,-line-wrapping" />
79-
<h2>Code Title, line wrapping</h2>
91+
<h2 id="Code-Title,-line-wrapping">Code Title, line wrapping<a class="sniffanchor" href="#Code-Title,-line-wrapping"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Title,-whitespace-handling" />
79-
<h2>Code Title, whitespace handling</h2>
91+
<h2 id="Code-Title,-whitespace-handling">Code Title, whitespace handling<a class="sniffanchor" href="#Code-Title,-whitespace-handling"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="lowercase-title" />
79-
<h2>lowercase title</h2>
91+
<h2 id="lowercase-title">lowercase title<a class="sniffanchor" href="#lowercase-title"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
8294
</body>

‎tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="This-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title" />
79-
<h2>This is a very very very very very very very very very very very long title</h2>
91+
<h2 id="This-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title">This is a very very very very very very very very very very very long title<a class="sniffanchor" href="#This-is-a-very-very-very-very-very-very-very-very-very-very-very-long-title"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
8294
</body>

‎tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Documentation-Title-PCRE-Fallback" />
79-
<h2>Documentation Title PCRE Fallback</h2>
91+
<h2 id="Documentation-Title-PCRE-Fallback">Documentation Title PCRE Fallback<a class="sniffanchor" href="#Documentation-Title-PCRE-Fallback"> &sect; </a></h2>
8092
<p class="text">Testing the document title can get determined from the sniff name if missing.</p>
8193
<p class="text">This file name contains an acronym on purpose to test the word splitting.</p>
8294
<div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>

‎tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-mismatched-code-blocks" />
79-
<h2>Code Comparison, mismatched code blocks</h2>
91+
<h2 id="Code-Comparison,-mismatched-code-blocks">Code Comparison, mismatched code blocks<a class="sniffanchor" href="#Code-Comparison,-mismatched-code-blocks"> &sect; </a></h2>
8092
<p class="text">This doc has two code elements, one only has a title, one has actual code. Unbalanced</p>
8193
<table class="code-comparison">
8294
<tr>

‎tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-missing-code-element" />
79-
<h2>Code Comparison, missing code element</h2>
91+
<h2 id="Code-Comparison,-missing-code-element">Code Comparison, missing code element<a class="sniffanchor" href="#Code-Comparison,-missing-code-element"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>
8294
</body>

‎tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html

+14-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626
margin-top: 50px;
2727
}
2828

29+
h2 a.sniffanchor,
30+
h2 a.sniffanchor {
31+
color: #006C95;
32+
opacity: 0;
33+
padding: 0 3px;
34+
text-decoration: none;
35+
font-weight: bold;
36+
}
37+
h2:hover > a.sniffanchor,
38+
h2:focus > a.sniffanchor {
39+
opacity: 1;
40+
}
41+
2942
.code-comparison {
3043
width: 100%;
3144
}
@@ -75,8 +88,7 @@
7588
</head>
7689
<body>
7790
<h1>GeneratorTest Coding Standards</h1>
78-
<a name="Code-Comparison,-no-code" />
79-
<h2>Code Comparison, no code</h2>
91+
<h2 id="Code-Comparison,-no-code">Code Comparison, no code<a class="sniffanchor" href="#Code-Comparison,-no-code"> &sect; </a></h2>
8092
<p class="text">This is a standard block.</p>
8193
<table class="code-comparison">
8294
<tr>

0 commit comments

Comments
 (0)