LukeParke/pypistats.dev
1
0
Fork 0
mirror of https://github.com/LukeHagar/pypistats.dev.git synced 2025-12-06 04:21:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement dark theme styles in app.css and update layout components for dark mode compatibility. Add API endpoint links with copy functionality in package page.

Browse Source
This commit is contained in:
Luke Hagar
2025-08-14 15:34:05 -05:00
parent de7cc4090d
commit 6b7e7b4fc5
3 changed files with 59 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app.css
View File

@@ -1,3 +1,18 @@
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';
/* Global dark theme defaults */
:root {
color-scheme: dark;
}
html, body {
background-color: #0b0f19;
color: #e5e7eb;
}
/* Tailwind utility overrides for dark appearance */
.prose {
@apply prose-invert;
}

19
src/routes/+layout.svelte
View File

@@ -2,28 +2,29 @@
import '../app.css';
</script>
<div class="min-h-screen bg-gray-50">
<div class="min-h-screen bg-gray-950 text-gray-100">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b">
<nav class="bg-gray-900 shadow-sm border-b border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="/" class="text-xl font-bold text-gray-900">
<a href="/" class="text-xl font-bold text-gray-100">
PyPI Stats
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="/" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="/" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
Home
</a>
<a href="/about" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="/about" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
About
</a>
<a href="/faqs" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="/faqs" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
FAQs
</a>
<a href="/api" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
<a href="/api" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
API
</a>
@@ -39,9 +40,9 @@
</main>
<!-- Footer -->
<footer class="bg-white border-t mt-16">
<footer class="bg-gray-900 border-t border-gray-800 mt-16">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div class="text-center text-gray-500 text-sm">
<div class="text-center text-gray-400 text-sm">
<p>PyPI Stats - Download statistics for Python packages</p>
</div>
</div>

58
src/routes/packages/[package]/+page.svelte
View File

@@ -30,6 +30,21 @@
}
}
// API endpoints for quick links
const apiEndpoints = [
{ label: 'Recent downloads', path: 'recent' },
{ label: 'Overall downloads', path: 'overall' },
{ label: 'Python major versions', path: 'python_major' },
{ label: 'Python minor versions', path: 'python_minor' },
{ label: 'System downloads', path: 'system' },
{ label: 'Installer breakdown', path: 'installer' },
{ label: 'Summary totals', path: 'summary' }
];
function endpointUrl(path: string): string {
return `/api/packages/${encodeURIComponent(data.packageName)}/${path}`;
}
// Streaming handled with {#await} blocks below
// Build combined Python versions rows reactively
@@ -513,37 +528,22 @@
{/if}
<!-- API Links -->
<div class="rounded-lg bg-blue-50 p-6">
<h3 class="mb-4 text-lg font-semibold text-gray-900">API Access</h3>
<div class="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
<div>
<strong>Recent downloads:</strong>
<a
href="/api/packages/{data.packageName}/recent"
class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
>
<div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
<h3 class="mb-4 text-lg font-semibold text-gray-100">API Access</h3>
<div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2 lg:grid-cols-3">
{#each apiEndpoints as ep}
<div class="flex items-center justify-between rounded-md border border-gray-800 bg-gray-950 px-3 py-2">
<div class="min-w-0">
<div class="text-gray-300">{ep.label}</div>
<a class="truncate text-xs text-blue-400 hover:text-blue-300" href={endpointUrl(ep.path)} rel="noopener" target="_blank">{endpointUrl(ep.path)}</a>
</div>
<div>
<strong>Overall downloads:</strong>
<a
href="/api/packages/{data.packageName}/overall"
class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
>
</div>
<div>
<strong>Python major versions:</strong>
<a
href="/api/packages/{data.packageName}/python_major"
class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
>
</div>
<div>
<strong>System downloads:</strong>
<a
href="/api/packages/{data.packageName}/system"
class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
>
<button
class="ml-3 shrink-0 rounded-md border border-blue-700 bg-blue-800 px-2 py-1 text-xs text-white hover:bg-blue-700"
onclick={() => navigator.clipboard?.writeText(endpointUrl(ep.path))}
aria-label={`Copy ${ep.label} URL`}
>Copy</button>
</div>
{/each}
</div>
</div>
</div>