Skip to content

Commit c357921

Browse files
dfcoffinclaude
dfcoffin
and
claude
authored
feat: add GBA logos to Redocly and Swagger UI documentation (#10)
- Add GBA logo (300px) to docs/ folder for inclusion in built documentation - Update favicon.png with GBA logo (250px) for browser tabs - Inject GBA logo into Redocly sidebar with fixed positioning - Add GBA logo to Swagger UI topbar using ::before pseudo-element - Update build-swagger.js to copy logo files to dist/ and dist/swagger/ - Logos are sourced from repository, not external URLs - Responsive design: logo adjusts for mobile viewports Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 463bd64 commit c357921

4 files changed

Lines changed: 60 additions & 1 deletion

File tree

‎docs/favicon.png‎

56.6 KB
Loading

‎docs/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,45 @@
1616
margin: 0;
1717
padding: 0;
1818
}
19+
/* GBA Logo injected into Redocly sidebar */
20+
#gba-logo-container {
21+
position: fixed;
22+
top: 20px;
23+
left: 20px;
24+
z-index: 10000;
25+
background: white;
26+
padding: 10px;
27+
border-radius: 8px;
28+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
29+
max-width: 200px;
30+
}
31+
#gba-logo-container img {
32+
width: 100%;
33+
height: auto;
34+
display: block;
35+
}
36+
/* Adjust menu to avoid logo overlap */
37+
div[role="navigation"] {
38+
padding-top: 80px !important;
39+
}
40+
@media screen and (max-width: 50rem) {
41+
#gba-logo-container {
42+
position: static;
43+
margin: 10px;
44+
max-width: 150px;
45+
}
46+
div[role="navigation"] {
47+
padding-top: 20px !important;
48+
}
49+
}
1950
</style>
2051
{{{redocHead}}}
2152
</head>
2253
<body>
54+
<!-- GBA Logo -->
55+
<div id="gba-logo-container">
56+
<img src="logo.png" alt="Green Button Alliance" />
57+
</div>
2358
{{{redocHTML}}}
2459
</body>
2560
</html>

‎docs/logo.png‎

50.2 KB
Loading

‎scripts/build-swagger.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,26 @@ fs.copyFileSync(
2727
path.join(swaggerDir, 'openapi.json')
2828
);
2929

30+
// Copy GBA logo to swagger directory
31+
const docsDir = path.join(__dirname, '..', 'docs');
32+
const logoPath = path.join(docsDir, 'logo.png');
33+
if (fs.existsSync(logoPath)) {
34+
fs.copyFileSync(logoPath, path.join(swaggerDir, 'logo.png'));
35+
}
36+
37+
// Copy logo to root dist for easier reference
38+
if (fs.existsSync(logoPath)) {
39+
fs.copyFileSync(logoPath, path.join(__dirname, '..', 'dist', 'logo.png'));
40+
}
41+
3042
// Create custom Swagger UI HTML with Green Button branding
3143
const html = `<!DOCTYPE html>
3244
<html lang="en">
3345
<head>
3446
<meta charset="UTF-8">
3547
<title>Green Button ESPI API - Swagger UI</title>
3648
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
37-
<link rel="icon" type="image/png" href="../../logo.png" />
49+
<link rel="icon" type="image/png" href="./logo.png" />
3850
<style>
3951
html {
4052
box-sizing: border-box;
@@ -48,9 +60,21 @@ const html = `<!DOCTYPE html>
4860
margin: 0;
4961
padding: 0;
5062
}
63+
/* GBA Logo in Swagger UI topbar */
5164
.topbar {
5265
background-color: #10a54a !important;
5366
}
67+
.topbar::before {
68+
content: '';
69+
background-image: url('./logo.png');
70+
background-size: contain;
71+
background-repeat: no-repeat;
72+
background-position: center;
73+
width: 180px;
74+
height: 50px;
75+
display: inline-block;
76+
margin: 10px 20px;
77+
}
5478
.topbar .link {
5579
display: flex;
5680
align-items: center;

0 commit comments

Comments
 (0)