Skip to content

Commit 05b61fc

Browse files
benno5020benno5020
committed
gh-pages: make pages fancier
The download icon is taken from https://github.com/feathericons/feather/blob/main/icons/download.svg (MIT license). The GitHub logo is taken from https://github.com/logos
1 parent f542522 commit 05b61fc

File tree

5 files changed

+348
-10
lines changed

5 files changed

+348
-10
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
vendor
22
.phpunit.result.cache
3+
src/phars/index.html

‎build/generate_phars_list.php‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
2+
<?php
3+
4+
// A directory containing files that are named {phpcs,phpcbf}-*.{phar,phar.asc}.
5+
$pharDir = __DIR__ . '/../src/phars';
6+
7+
$allFiles = array_filter(scandir($pharDir), function ($file) {
8+
return preg_match('/\.phar(\.asc)?$/', $file);
9+
});
10+
11+
$filesGroupedByVersion = [];
12+
13+
foreach ($allFiles as $file) {
14+
$matches = [];
15+
16+
if (preg_match('/^(?:phpcs|phpcbf)-(.*?)(\.phar(?:\.asc)?)$/', $file, $matches)) {
17+
$version = $matches[1];
18+
19+
if (!isset($filesGroupedByVersion[$version])) {
20+
$filesGroupedByVersion[$version] = [];
21+
}
22+
23+
$filesGroupedByVersion[$version][] = $file;
24+
}
25+
}
26+
27+
uksort($filesGroupedByVersion, function ($a, $b) {
28+
return version_compare($b, $a);
29+
});
30+
31+
function indent (int $level): string
32+
{
33+
$indentSpaces = ' ';
34+
35+
$output = "";
36+
37+
for ($i = 0; $i < $level; $i++) {
38+
$output .= $indentSpaces;
39+
}
40+
41+
return $output;
42+
}
43+
44+
$html = "<ul class=\"phar-list\">\n";
45+
46+
foreach ($filesGroupedByVersion as $version => $files) {
47+
sort($files);
48+
49+
$html .= indent(3) . "<li class=\"phar-list__version\">\n" .
50+
indent(4) . "<h2 class=\"phar-list__version-label\">" . $version . "</h2>\n" .
51+
indent(4) . "<ul class=\"phar-list__files\">\n";
52+
53+
foreach ($files as $file) {
54+
$html .= indent(5) . "<li><a download href=\"phars/" . htmlspecialchars($file) . '">' . htmlspecialchars($file) . "</a></li>\n";
55+
}
56+
57+
$html .= indent(4) . "</ul>\n" .
58+
indent(3) . "</li>\n";
59+
}
60+
61+
$html .= indent(2) . "</li>\n" .
62+
"</ul>\n";
63+
64+
$template = file_get_contents(__DIR__ . '/phars.html.template');
65+
66+
$output = str_replace('<!-- {{ PHARS }} -->', $html, $template);
67+
68+
file_put_contents($pharDir . '/index.html', $output);
69+
70+
echo $pharDir . "/index.html generated successfully.\n";

‎build/phars.html.template‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="/styles.css" />
8+
<title>PHP_CodeSniffer PHAR - All PHAR files</title>
9+
</head>
10+
11+
<body>
12+
<main class="container">
13+
<h1 class="heading">All PHAR files</h1>
14+
<a href="/index.html" class="link">See latest PHAR files</a>
15+
<!-- {{ PHARS }} -->
16+
</main>
17+
</body>
18+
19+
</html>

‎src/index.html‎

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,67 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>PHP_CodeSniffer PHAR archive</title>
5-
</head>
6-
<body>
7-
<h1>Download the latest PHAR files</h1>
8-
<ul>
9-
<li><a href="phpcs.phar">PHPCS</a> - <a href="phpcs.phar.asc">Signature file</a></li>
10-
<li><a href="phpcbf.phar">PHPCBF</a> - <a href="phpcbf.phar.asc">Signature file</a></li>
11-
</ul>
12-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="/styles.css" />
8+
<title>PHP_CodeSniffer PHAR - Latest PHAR files</title>
9+
</head>
10+
11+
<body>
12+
<main class="container">
13+
<h1 class="heading">Download the latest PHAR files</h1>
14+
<div class="download-section">
15+
<article class="download-box">
16+
<h2 class="download-box__title">PHPCS</h2>
17+
<div class="download-box__description">
18+
Tokenizes PHP, JavaScript and CSS files to detect violations of a
19+
defined coding standard.
20+
</div>
21+
<a href="phpcs.phar" download class="button button--download"><svg xmlns="http://www.w3.org/2000/svg"
22+
class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
23+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
24+
class="feather feather-download">
25+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
26+
<polyline points="7 10 12 15 17 10"></polyline>
27+
<line x1="12" y1="15" x2="12" y2="3"></line>
28+
</svg><span>Download PHPCS</span></a>
29+
<a href="phpcs.phar.asc" class="download-box__secondary-link">Signature (.asc)</a>
30+
</article>
31+
<article class="download-box">
32+
<h2 class="download-box__title">PHPCBF</h2>
33+
<div class="download-box__description">
34+
Automatically corrects coding standard violations.
35+
</div>
36+
<a href="phpcbf.phar" download class="button button--download"><svg xmlns="http://www.w3.org/2000/svg"
37+
class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
38+
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
39+
class="feather feather-download">
40+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
41+
<polyline points="7 10 12 15 17 10"></polyline>
42+
<line x1="12" y1="15" x2="12" y2="3"></line>
43+
</svg><span>Download PHPCBF</span></a>
44+
<a href="phpcbf.phar.asc" class="download-box__secondary-link">Signature (.asc)</a>
45+
</article>
46+
</div>
47+
<aside class="additional-info">
48+
<a href="/phars/index.html">
49+
See all PHAR files
50+
</a>
51+
52+
</aside>
53+
<aside class="external-links">
54+
<a href="https://github.com/PHPCSStandards/PHP_CodeSniffer"><svg width="98" height="96" viewBox="0 0 98 96"
55+
xmlns="http://www.w3.org/2000/svg" class="icon icon--github">
56+
<path fill-rule="evenodd" clip-rule="evenodd"
57+
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
58+
</svg>
59+
GitHub
60+
</a> | <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer/wiki">
61+
Wiki
62+
</a>
63+
</aside>
64+
</main>
65+
</body>
66+
1367
</html>

‎src/styles.css‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
@import url(https://fonts.bunny.net/css?family=open-sans:400,800);
2+
3+
:root {
4+
5+
--background-color: #f3f4f6;
6+
--foreground-color: #111827;
7+
--primary-color: #10b981;
8+
9+
@media (prefers-color-scheme: dark) {
10+
--background-color: #111827;
11+
--foreground-color: #f3f4f6;
12+
}
13+
}
14+
15+
a {
16+
color: var(--foreground-color);
17+
}
18+
19+
a:hover, a:focus-visible {
20+
color: color-mix(in srgb, var(--foreground-color), var(--primary-color));
21+
text-decoration: underline;
22+
}
23+
24+
html, body {
25+
height: 100%;
26+
}
27+
28+
body {
29+
font-family: 'Open Sans', sans-serif;
30+
31+
background: var(--background-color);
32+
background: radial-gradient(circle, rgba(243, 244, 246, 1) 0%, rgba(209, 213, 219, 1) 100%);
33+
34+
@media (prefers-color-scheme: dark) {
35+
background: radial-gradient(circle, rgba(22, 34, 54, 1) 0%, rgba(17, 24, 39, 1) 100%);
36+
}
37+
38+
background-attachment: fixed;
39+
40+
color: var(--foreground-color);
41+
margin: 0;
42+
43+
display: flex;
44+
justify-content: center;
45+
}
46+
47+
.container {
48+
width: 100%;
49+
max-width: 1200px;
50+
51+
display: flex;
52+
flex-direction: column;
53+
align-items: center;
54+
}
55+
56+
.heading {
57+
font-size: 2.5rem;
58+
font-weight: 800;
59+
margin-bottom: 2rem;
60+
text-align: center;
61+
}
62+
63+
.download-section {
64+
display: flex;
65+
gap: 2rem;
66+
67+
@media (max-width: 768px) {
68+
flex-direction: column;
69+
align-items: center;
70+
}
71+
}
72+
73+
.download-box {
74+
background-color: var(--background-color);
75+
border: 1px solid var(--foreground-color);
76+
border-radius: .75rem;
77+
padding: 1.5rem;
78+
width: 300px;
79+
text-align: center;
80+
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
gap: 1rem;
85+
}
86+
87+
.download-box__title {
88+
margin: 0;
89+
font-size: 1.5em;
90+
font-weight: 800;
91+
}
92+
93+
.download-box__description {
94+
color: color-mix(in srgb, var(--foreground-color), #6b7280);
95+
flex: 1;
96+
}
97+
98+
.download-box__secondary-link {
99+
color: color-mix(in srgb, var(--foreground-color), #6b7280);
100+
font-size: 0.9em;
101+
}
102+
103+
.icon {
104+
width: 1rem;
105+
height: 1rem;
106+
}
107+
108+
.icon--foreground {
109+
fill: var(--foreground-color);
110+
}
111+
112+
.icon--github {
113+
fill: #24292f; // see https://github.com/logos
114+
}
115+
116+
@media (prefers-color-scheme: dark) {
117+
.icon--github {
118+
fill: #fff;
119+
}
120+
}
121+
122+
.button {
123+
background-color: var(--foreground-color);
124+
color: var(--background-color);
125+
border: none;
126+
padding: 0.75rem 1.5rem;
127+
font-size: 1em;
128+
cursor: pointer;
129+
transition: background-color 0.3s ease;
130+
131+
display: flex;
132+
align-items: center;
133+
}
134+
135+
.button:hover, .button:focus-visible {
136+
color: var(--background-color);
137+
background-color: color-mix(in srgb, var(--foreground-color), var(--primary-color));
138+
}
139+
140+
.button--download {
141+
display: flex;
142+
align-items: center;
143+
gap: 0.5rem;
144+
}
145+
146+
.additional-info {
147+
padding-top: 3rem;
148+
display: flex;
149+
}
150+
151+
.external-links {
152+
padding-top: 2rem;
153+
}
154+
155+
/* phars.html */
156+
157+
.link {
158+
color: var(--foreground-color);
159+
text-decoration: underline;
160+
}
161+
162+
.phar-list {
163+
list-style: none;
164+
padding: 0;
165+
margin: 0;
166+
padding-top: 1.5rem;
167+
168+
font-size: .8rem;
169+
min-width: 300px;
170+
}
171+
172+
/* a faint separator between the list items */
173+
.phar-list__version::after {
174+
content: '';
175+
display: block;
176+
height: 1px;
177+
background-color: var(--foreground-color);
178+
opacity: 0.1;
179+
margin: 1rem 0;
180+
}
181+
182+
.phar-list__version-label {
183+
border-left: 4px solid var(--primary-color);
184+
padding-left: 0.5rem;
185+
}
186+
187+
.phar-list__files {
188+
list-style: none;
189+
padding: 0;
190+
191+
* + * {
192+
margin-top: 0.25rem;
193+
}
194+
}

0 commit comments

Comments
 (0)