Skip to content

feat(templates): integrate brand logo and favicons #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
appleboy merged 1 commit into from
Jun 3, 2026
Merged

feat(templates): integrate brand logo and favicons #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="images/authgate-logo-dark.svg">
<img src="images/authgate-logo.svg" alt="AuthGate" width="420">
</picture>
</p>

# AuthGate

> A lightweight OAuth 2.0 Authorization Server supporting Device Authorization Grant ([RFC 8628][rfc8628]), Authorization Code Flow with PKCE ([RFC 6749][rfc6749] + [RFC 7636][rfc7636]), Client Credentials Grant for machine-to-machine authentication, and Resource Indicators ([RFC 8707][rfc8707]) for MCP / multi-audience deployments
Expand Down
17 changes: 17 additions & 0 deletions images/authgate-logo-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions images/authgate-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions internal/templates/layout_component.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@ templ Layout(title string, layoutType LayoutType, navbar *NavbarProps) {
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ title } - AuthGate</title>
<!-- Favicons & app icons -->
<link rel="icon" href="/favicon.ico" sizes="any"/>
<link rel="icon" type="image/svg+xml" href="/static/images/authgate-icon.svg"/>
<link rel="apple-touch-icon" href="/static/images/favicon-512x512.png"/>
Comment on lines +25 to +27
<meta name="theme-color" content="#0095C4"/>
<!-- Prevent FOUC: apply saved theme before paint -->
<script>
(function(){var t=localStorage.getItem('authgate-theme');if(t==='dark'||t==='light'){document.documentElement.setAttribute('data-theme',t)}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches){document.documentElement.setAttribute('data-theme','dark')}else{document.documentElement.setAttribute('data-theme','light')}})();
Expand Down
17 changes: 11 additions & 6 deletions internal/templates/login_page.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@ templ LoginPage(props LoginPageProps) {
<!-- Login Header -->
<div class="login-header">
<div class="login-brand-icon" aria-hidden="true">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" focusable="false">
<path d="M24 4L6 12V22C6 33.1 13.68 43.38 24 46C34.32 43.38 42 33.1 42 22V12L24 4Z" stroke="currentColor" stroke-width="2.5" fill="none"></path>
<rect x="20" y="19" width="8" height="10" rx="1.5" stroke="currentColor" stroke-width="2"></rect>
<path d="M18 19V16C18 12.69 20.69 10 24 10C27.31 10 30 12.69 30 16V19" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
<circle cx="24" cy="24" r="1.5" fill="currentColor"></circle>
<line x1="24" y1="25.5" x2="24" y2="27.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>
<svg width="56" height="56" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false">
<defs>
<linearGradient id="login-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#00C8E8"></stop>
<stop offset="1" stop-color="#0077A8"></stop>
</linearGradient>
Comment on lines +16 to +20
</defs>
<rect x="4" y="4" width="112" height="112" rx="28" fill="url(#login-ag-bg)"></rect>
<path d="M 34 90 L 34 56 A 26 26 0 0 1 86 56 L 86 90" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="60" cy="55" r="8.5" fill="#ffffff"></circle>
<path d="M 56 60 L 64 60 L 62 80 L 58 80 Z" fill="#ffffff"></path>
</svg>
</div>
<h1 class="login-title">AuthGate</h1>
Expand Down
20 changes: 18 additions & 2 deletions internal/templates/navbar_component.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,24 @@ templ Navbar(props *NavbarProps) {
<div class="navbar-container">
<div class="navbar-brand">
<a href="/">
AuthGate
<span class="navbar-brand-tagline">OAuth 2.0 Server</span>
<span class="navbar-brand-mark" aria-hidden="true">
<svg width="32" height="32" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" focusable="false">
<defs>
<linearGradient id="navbar-ag-bg" x1="0" y1="0" x2="120" y2="120" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#00C8E8"></stop>
<stop offset="1" stop-color="#0077A8"></stop>
Comment on lines +11 to +15
</linearGradient>
</defs>
<rect x="4" y="4" width="112" height="112" rx="28" fill="url(#navbar-ag-bg)"></rect>
<path d="M 34 90 L 34 56 A 26 26 0 0 1 86 56 L 86 90" fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"></path>
<circle cx="60" cy="55" r="8.5" fill="#ffffff"></circle>
<path d="M 56 60 L 64 60 L 62 80 L 58 80 Z" fill="#ffffff"></path>
</svg>
</span>
<span class="navbar-brand-text">
AuthGate
<span class="navbar-brand-tagline">OAuth 2.0 Server</span>
</span>
</a>
</div>
<button class="navbar-toggle" onclick="toggleMenu()" aria-label="Toggle navigation menu">
Expand Down
13 changes: 0 additions & 13 deletions internal/templates/static/css/components/dark-mode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,19 +400,6 @@
}

/* Login brand icon — use theme primary color token instead of hardcoded rgba() */
[data-theme="dark"] .login-brand-icon {
/* Fallbacks for browsers without color-mix() support */
background: linear-gradient(135deg, var(--color-primary-pale), rgba(88, 166, 255, 0.12));
border-color: rgba(88, 166, 255, 0.2);
/* Enhanced versions using theme token; override fallback when supported */
background: linear-gradient(
135deg,
var(--color-primary-pale),
color-mix(in srgb, var(--color-primary) 12%, transparent)
);
border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Login security label — derive border/bg from theme primary color token */
Comment on lines 402 to 403
[data-theme="dark"] .login-security-label {
/* Fallbacks for browsers without color-mix() support */
Expand Down
18 changes: 18 additions & 0 deletions internal/templates/static/css/components/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,24 @@
color: var(--color-primary);
letter-spacing: -0.01em;
transition: color var(--transition-fast);
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-2);
}

.navbar-brand-mark {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}

.navbar-brand-mark svg {
display: block;
filter: drop-shadow(0 1px 2px rgba(0, 102, 150, 0.25));
}

.navbar-brand-text {
display: flex;
flex-direction: column;
align-items: flex-start;
Expand Down
14 changes: 6 additions & 8 deletions internal/templates/static/css/pages/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,6 @@
width: 72px;
height: 72px;
margin: 0 auto var(--space-5);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--color-primary-pale), #dbeafe);
border: 1px solid rgba(0, 114, 255, 0.15);
color: var(--color-primary);
animation: loginScaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

Expand All @@ -118,8 +114,10 @@
}

.login-brand-icon svg {
width: 36px;
height: 36px;
width: 64px;
height: 64px;
/* drop-shadow follows the icon's rounded silhouette (box-shadow would be square) */
filter: drop-shadow(0 8px 18px rgba(0, 119, 168, 0.32));
}

/* Security label below subtitle */
Expand Down Expand Up @@ -626,8 +624,8 @@
}

.login-brand-icon svg {
width: 30px;
height: 30px;
width: 54px;
height: 54px;
}

.login-submit-btn {
Expand Down
12 changes: 12 additions & 0 deletions internal/templates/static/images/authgate-icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions internal/templates/static/images/authgate-logo-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions internal/templates/static/images/authgate-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added internal/templates/static/images/favicon-512x512.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified internal/templates/static/images/favicon.ico
View file
Open in desktop
Binary file not shown.
Loading