From 1f1940fe2a65e59f55f94e1a6dbf085226f0caff Mon Sep 17 00:00:00 2001 From: Manasvi Date: Fri, 27 Jun 2025 09:47:02 +0530 Subject: [PATCH] Enhance Swagger UI branding and add dark mode toggle to documentation --- docs/navigation.js | 22 +++++++++++++++- docs/page.md | 8 ++++++ docs/public/docs-theme.css | 19 ++++++++++++++ pkg/gofr/static/index.css | 52 +++++++++++++++++++++++++++++++++++++- pkg/gofr/static/index.html | 7 ++++- 5 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 docs/public/docs-theme.css diff --git a/docs/navigation.js b/docs/navigation.js index 150f3f1ad8..4e1637345b 100644 --- a/docs/navigation.js +++ b/docs/navigation.js @@ -234,4 +234,24 @@ export const navigation = [ } ], }, -] \ No newline at end of file +] + +(function() { + const btn = document.getElementById('theme-toggle-btn'); + if (!btn) return; + const root = document.documentElement; + const saved = localStorage.getItem('docs-theme'); + if (saved) root.setAttribute('data-theme', saved); + + function updateBtn(theme) { + btn.textContent = theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode'; + } + updateBtn(root.getAttribute('data-theme') || 'light'); + + btn.onclick = function() { + const current = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; + root.setAttribute('data-theme', current); + localStorage.setItem('docs-theme', current); + updateBtn(current); + }; +})(); \ No newline at end of file diff --git a/docs/page.md b/docs/page.md index 1740aa4a7f..704c9d3351 100644 --- a/docs/page.md +++ b/docs/page.md @@ -1,5 +1,11 @@ # Getting started +
+ +
+ GoFr is Opinionated Web Framework written in Go (Golang). It helps in building robust and scalable applications. This framework is designed to offer a user-friendly and familiar abstraction for all the developers. We prioritize simplicity over complexity. In this section we will walk through what GoFr is, what problems it solves, and how it can help in building your project. @@ -29,3 +35,5 @@ In this section we will walk through what GoFr is, what problems it solves, and - Encourage a more functional way of programming. - Avoid code duplication. - Log and store data for analysis purposes. + + diff --git a/docs/public/docs-theme.css b/docs/public/docs-theme.css new file mode 100644 index 0000000000..f170652250 --- /dev/null +++ b/docs/public/docs-theme.css @@ -0,0 +1,19 @@ +:root { + --docs-bg: #f8fafc; + --docs-text: #23272f; + --docs-link: #388e3c; + --docs-header: #23272f; +} +[data-theme="dark"] { + --docs-bg: #181a20; + --docs-text: #e5e7eb; + --docs-link: #4caf50; + --docs-header: #e5e7eb; +} +body { + background: var(--docs-bg); + color: var(--docs-text); + transition: background 0.2s, color 0.2s; +} +a { color: var(--docs-link); } +h1, h2, h3, h4, h5, h6 { color: var(--docs-header); } \ No newline at end of file diff --git a/pkg/gofr/static/index.css b/pkg/gofr/static/index.css index f2376fdaa8..59df3d2b01 100644 --- a/pkg/gofr/static/index.css +++ b/pkg/gofr/static/index.css @@ -12,5 +12,55 @@ html { body { margin: 0; - background: #fafafa; + background: #f8fafc; + font-family: 'Segoe UI', 'Roboto', Arial, sans-serif; + color: #23272f; } + +.gofr-swagger-header { + display: flex; + align-items: center; + justify-content: space-between; + background: linear-gradient(90deg, #23272f 0%, #4caf50 100%); + padding: 1rem 2rem; + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.07); +} + +.gofr-logo { + height: 48px; + margin-right: 1rem; + border-radius: 8px; + background: #fff; + padding: 2px; +} + +.gofr-title { + font-size: 1.7rem; + font-weight: 600; + color: #fff; + flex: 1; +} + +.gofr-docs-link { + color: #fff; + background: #388e3c; + padding: 0.5rem 1.2rem; + border-radius: 6px; + text-decoration: none; + font-weight: 500; + transition: background 0.2s; +} +.gofr-docs-link:hover { + background: #256029; +} + +/* Improve contrast and accessibility for Swagger UI */ +.swagger-ui .topbar { display: none; } +.swagger-ui .info { background: #e8f5e9; border-radius: 8px; } +.swagger-ui .scheme-container { background: #f1f8e9; } +.swagger-ui .opblock { border-radius: 8px; } +.swagger-ui .opblock-summary { font-size: 1.1rem; } +.swagger-ui .opblock.opblock-get { border-left: 5px solid #4caf50; } +.swagger-ui .opblock.opblock-post { border-left: 5px solid #388e3c; } +.swagger-ui .opblock.opblock-delete { border-left: 5px solid #e53935; } +.swagger-ui .opblock.opblock-put { border-left: 5px solid #fbc02d; } diff --git a/pkg/gofr/static/index.html b/pkg/gofr/static/index.html index c799e467ff..13c7a67f75 100644 --- a/pkg/gofr/static/index.html +++ b/pkg/gofr/static/index.html @@ -3,7 +3,7 @@ - Swagger UI + GoFr API Docs @@ -11,6 +11,11 @@ +
+ + GoFr API Documentation + ← Back to Docs +