refactor: convert docs templates to use TailwindCSS
Phase 4+5: Replace custom CSS with Tailwind utility classes - Remove ~250 lines of custom CSS from docs.templ - Remove ~120 lines of custom CSS from api_explorer.templ - Use Tailwind CDN for styling - Keep only essential CSS: * CSS variables for theming (--bg-primary, --accent, etc.) * Custom scrollbar styling * Mobile sidebar transform transitions * Smooth scroll behavior - All layout, spacing, colors, typography now use Tailwind classes - Mobile-first responsive design with Tailwind breakpoints - Proper accessibility with aria-labels and semantic HTML Benefits: - Consistent design system - Smaller custom CSS footprint - Better maintainability - Follows PROJECT_GUIDELINES.md requirement: TailwindCSS primary
This commit is contained in:
john-okeefe committed
1 parent
542fbaf116
commit
2726455578
4 files changed
+467
-746
No files matched your search
@@ -30,7 +30,7 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
if !explorer.IsLoggedIn {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div class=\"api-explorer\"><div class=\"api-mode-toggle\"><button class=\"mode-btn active\">Mock Data</button> <button class=\"mode-btn\" disabled>Login to Try Real</button></div><div class=\"api-request-editor\"><div class=\"method-selector\"><select disabled><option value=\"GET\"")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <div class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\"><div class=\"flex gap-2 mb-4\"><button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white\">Mock Data</button> <button class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed\" disabled>Login to Try Real</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select disabled class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -70,38 +70,38 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4>Request Body (Example)</h4><pre><code>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body (Example)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var2 string
|
||||
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 46}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 21, Col: 141}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"api-response\"><h4>Response (Mock)</h4><pre><code>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</code></pre></div><div class=\"mt-4\"><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Response (Mock)</h4><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code class=\"text-text-primary text-sm\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var3 string
|
||||
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.Response)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 43}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 25, Col: 138}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\">Copy Request</button> <button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\">Copy Response</button></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</code></pre></div><div class=\"flex gap-2 mt-4\"><button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button onclick=\"copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
} else {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"api-explorer\"><div class=\"api-mode-toggle\"><button class=\"mode-btn\" id=\"mock-btn\">Mock Data</button> <button class=\"mode-btn active\" id=\"real-btn\">Try It Out</button></div><div class=\"api-request-editor\"><div class=\"method-selector\"><select id=\"http-method\"><option value=\"GET\"")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " <div class=\"border border-border rounded-lg p-6 mt-8 bg-background-secondary\"><div class=\"flex gap-2 mb-4\"><button class=\"mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm\" id=\"mock-btn\">Mock Data</button> <button class=\"mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm\" id=\"real-btn\">Try It Out</button></div><div class=\"mb-4\"><div class=\"mb-4\"><select id=\"http-method\" class=\"w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent\"><option value=\"GET\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -141,25 +141,25 @@ func APIExplorer(explorer APIExplorerData) templ.Component {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4>Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, ">DELETE</option></select></div><h4 class=\"text-text-secondary mb-2 text-sm font-medium\">Request Body</h4><textarea id=\"request-body\" placeholder=\"Edit request body...\" class=\"w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
var templ_7745c5c3_Var4 string
|
||||
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(explorer.Endpoint.RequestBody)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 47, Col: 98}
|
||||
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/api_explorer.templ`, Line: 49, Col: 274}
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\">Try It Out</button><div class=\"api-response\" style=\"display:none\"><div class=\"response-header\"><span id=\"response-status\"></span> <span id=\"response-time\"></span></div><pre><code id=\"response-body\"></code></pre></div><button onclick=\"copyRequest()\">Copy Request</button> <button onclick=\"copyResponse()\">Copy Response</button> <button onclick=\"generateCURL()\">Generate cURL</button></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</textarea></div><button id=\"try-it-out\" class=\"bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90\">Try It Out</button><div class=\"api-response mt-4 hidden\"><div class=\"flex justify-between mb-2 text-sm\"><span id=\"response-status\" class=\"font-semibold\"></span> <span id=\"response-time\" class=\"text-text-secondary\"></span></div><pre class=\"bg-background-primary p-4 rounded-lg overflow-x-auto\"><code id=\"response-body\" class=\"text-text-primary text-sm\"></code></pre></div><div class=\"flex gap-2 mt-4 flex-wrap\"><button onclick=\"copyRequest()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Request</button> <button onclick=\"copyResponse()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Copy Response</button> <button onclick=\"generateCURL()\" class=\"px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm\">Generate cURL</button></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<script>\n\t\tconst endpointPath = '{ explorer.Endpoint.Path }';\n\t\tconst exampleRequest = { explorer.Endpoint.RequestBody };\n\t\tconst exampleResponse = { explorer.Endpoint.Response };\n\n\t\t// Mode toggle logic\n\t\tdocument.getElementById('mock-btn')?.addEventListener('click', () => showMode('mock'));\n\t\tdocument.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));\n\n\t\tfunction showMode(mode) {\n\t\t\tif (mode === 'mock') {\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t\tdocument.getElementById('request-body').readOnly = true;\n\t\t\t\tdocument.getElementById('try-it-out').style.display = 'none';\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(exampleResponse, null, 2);\n\t\t\t\tdocument.getElementById('response-status').textContent = '200 OK';\n\t\t\t\tdocument.getElementById('response-time').textContent = 'Mock';\n\t\t\t} else {\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'none';\n\t\t\t\tdocument.getElementById('request-body').readOnly = false;\n\t\t\t\tdocument.getElementById('try-it-out').style.display = 'block';\n\t\t\t}\n\t\t}\n\n\t\t// Try it out logic\n\t\tdocument.getElementById('try-it-out')?.addEventListener('click', async () => {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\n\t\t\tconst startTime = Date.now();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(endpointPath, {\n\t\t\t\t\tmethod: method,\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t'Authorization': 'Bearer ' + localStorage.getItem('token')\n\t\t\t\t\t},\n\t\t\t\t\tbody: ['GET', 'DELETE'].includes(method) ? undefined : body\n\t\t\t\t});\n\n\t\t\t\tconst duration = Date.now() - startTime;\n\t\t\t\tconst data = await response.json();\n\n\t\t\t\tdocument.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;\n\t\t\t\tdocument.getElementById('response-time').textContent = `${duration}ms`;\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(data, null, 2);\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('response-status').textContent = 'Error';\n\t\t\t\tdocument.getElementById('response-body').textContent = error.message;\n\t\t\t\tdocument.querySelector('.api-response').style.display = 'block';\n\t\t\t}\n\t\t});\n\n\t\tfunction copyToClipboard(text) {\n\t\t\tnavigator.clipboard.writeText(text);\n\t\t}\n\n\t\tfunction copyRequest() {\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction copyResponse() {\n\t\t\tconst body = document.getElementById('response-body').textContent;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction generateCURL() {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tconst token = localStorage.getItem('token');\n\n\t\t\tlet curl = `curl -X ${method} \\\\n -H \"Content-Type: application/json\" \\\\n -H \"Authorization: Bearer ${token}\"`;\n\t\t\t\n\t\t\tif (!['GET', 'DELETE'].includes(method) && body.trim()) {\n\t\t\t\tcurl += ` \\\\n -d '${body}'`;\n\t\t\t}\n\t\t\t\n\t\t\tcurl += ` \\\\n ${endpointPath}`;\n\t\t\t\n\t\t\tnavigator.clipboard.writeText(curl);\n\t\t}\n\t</script><style>\n\t\t.api-explorer {\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 1.5rem;\n\t\t\tmargin-top: 2rem;\n\t\t\tbackground: var(--bg-secondary);\n\t\t}\n\n\t\t.api-mode-toggle {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5rem;\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.mode-btn {\n\t\t\tpadding: 0.5rem 1rem;\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radius: 4px;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t.mode-btn.active {\n\t\t\tbackground: var(--accent);\n\t\t\tcolor: white;\n\t\t}\n\n\t\t.mode-btn:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t.api-request-editor {\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.method-selector select {\n\t\t\tpadding: 0.5rem;\n\t\t\tborder-radius: 4px;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tborder: 1px solid var(--border);\n\t\t\tmargin-bottom: 1rem;\n\t\t}\n\n\t\t.api-request-editor h4 {\n\t\t\tmargin-bottom: 0.5rem;\n\t\t\tcolor: var(--text-secondary);\n\t\t}\n\n\t\ttextarea#request-body {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 150px;\n\t\t\tpadding: 0.75rem;\n\t\t\tfont-family: 'Monaco', 'Consolas', monospace;\n\t\t\tfont-size: 0.875rem;\n\t\t\tbackground: var(--bg-primary);\n\t\t\tcolor: var(--text-primary);\n\t\t\tborder: 1px solid var(--border);\n\t\t\tborder-radLine truncated
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<script>\n\t\tconst endpointPath = '{ explorer.Endpoint.Path }';\n\t\tconst exampleRequest = { explorer.Endpoint.RequestBody };\n\t\tconst exampleResponse = { explorer.Endpoint.Response };\n\n\t\t// Mode toggle logic\n\t\tdocument.getElementById('mock-btn')?.addEventListener('click', () => showMode('mock'));\n\t\tdocument.getElementById('real-btn')?.addEventListener('click', () => showMode('real'));\n\n\t\tfunction showMode(mode) {\n\t\t\tconst mockBtn = document.getElementById('mock-btn');\n\t\t\tconst realBtn = document.getElementById('real-btn');\n\t\t\tconst responseBody = document.getElementById('response-body');\n\t\t\tconst responseStatus = document.getElementById('response-status');\n\t\t\tconst responseTime = document.getElementById('response-time');\n\t\t\tconst apiResponse = document.querySelector('.api-response');\n\t\t\tconst requestBody = document.getElementById('request-body');\n\t\t\tconst tryItOut = document.getElementById('try-it-out');\n\n\t\t\tif (mode === 'mock') {\n\t\t\t\tmockBtn.classList.add('bg-accent', 'text-white');\n\t\t\t\tmockBtn.classList.remove('bg-background-primary', 'text-text-primary');\n\t\t\t\trealBtn.classList.remove('bg-accent', 'text-white');\n\t\t\t\trealBtn.classList.add('bg-background-primary', 'text-text-primary');\n\t\t\t\t\n\t\t\t\tapiResponse.classList.remove('hidden');\n\t\t\t\trequestBody.readOnly = true;\n\t\t\t\ttryItOut.classList.add('hidden');\n\t\t\t\tresponseBody.textContent = JSON.stringify(exampleResponse, null, 2);\n\t\t\t\tresponseStatus.textContent = '200 OK';\n\t\t\t\tresponseTime.textContent = 'Mock';\n\t\t\t} else {\n\t\t\t\trealBtn.classList.add('bg-accent', 'text-white');\n\t\t\t\trealBtn.classList.remove('bg-background-primary', 'text-text-primary');\n\t\t\t\tmockBtn.classList.remove('bg-accent', 'text-white');\n\t\t\t\tmockBtn.classList.add('bg-background-primary', 'text-text-primary');\n\t\t\t\t\n\t\t\t\tapiResponse.classList.add('hidden');\n\t\t\t\trequestBody.readOnly = false;\n\t\t\t\ttryItOut.classList.remove('hidden');\n\t\t\t}\n\t\t}\n\n\t\t// Try it out logic\n\t\tdocument.getElementById('try-it-out')?.addEventListener('click', async () => {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\n\t\t\tconst startTime = Date.now();\n\t\t\ttry {\n\t\t\t\tconst response = await fetch(endpointPath, {\n\t\t\t\t\tmethod: method,\n\t\t\t\t\theaders: {\n\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t\t'Authorization': 'Bearer ' + localStorage.getItem('token')\n\t\t\t\t\t},\n\t\t\t\t\tbody: ['GET', 'DELETE'].includes(method) ? undefined : body\n\t\t\t\t});\n\n\t\t\t\tconst duration = Date.now() - startTime;\n\t\t\t\tconst data = await response.json();\n\n\t\t\t\tdocument.getElementById('response-status').textContent = `${response.status} (${response.statusText})`;\n\t\t\t\tdocument.getElementById('response-time').textContent = `${duration}ms`;\n\t\t\t\tdocument.getElementById('response-body').textContent = JSON.stringify(data, null, 2);\n\t\t\t\tdocument.querySelector('.api-response').classList.remove('hidden');\n\t\t\t} catch (error) {\n\t\t\t\tdocument.getElementById('response-status').textContent = 'Error';\n\t\t\t\tdocument.getElementById('response-body').textContent = error.message;\n\t\t\t\tdocument.querySelector('.api-response').classList.remove('hidden');\n\t\t\t}\n\t\t});\n\n\t\tfunction copyToClipboard(text) {\n\t\t\tnavigator.clipboard.writeText(text);\n\t\t}\n\n\t\tfunction copyRequest() {\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction copyResponse() {\n\t\t\tconst body = document.getElementById('response-body').textContent;\n\t\t\tnavigator.clipboard.writeText(body);\n\t\t}\n\n\t\tfunction generateCURL() {\n\t\t\tconst method = document.getElementById('http-method').value;\n\t\t\tconst body = document.getElementById('request-body').value;\n\t\t\tconst token = localStorage.getItem('token');\n\n\t\t\tlet curl = `curl -X ${method} \\\\n -H \"Content-Type: application/json\" \\\\n -H \"Authorization: Bearer ${token}\"`;\n\t\t\t\n\t\t\tif (!['GET', 'DELETE'].includes(method) && body.trim()) {\n\t\t\t\tcurl += ` \\\\n -d '${body}'`;\n\t\t\t}\n\t\t\t\n\t\t\tcurl += ` \\\\n ${endpointPath}`;\n\t\t\t\n\t\t\tnavigator.clipboard.writeText(curl);\n\t\t}\n\t</script>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user