Merge pull request #13 from opensource-observer/jabolol/mobile-misc-fixes

ccerv1 · web-flow · commit d081b0b509cf · 2026-03-18T07:00:12.000-04:00
fix: ux polish pass for 404 page, mobile responsiveness, and page titles
diff --git a/app/app/agent-guide/page.tsx b/app/app/agent-guide/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function AgentGuide() {
@@ -7,3 +8,4 @@ export default function AgentGuide() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Agent Guide' };
diff --git a/app/app/data/metric-definitions/activity/page.tsx b/app/app/data/metric-definitions/activity/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Activity() {
@@ -7,3 +8,4 @@ export default function Activity() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Activity Metrics' };
diff --git a/app/app/data/metric-definitions/alignment/page.tsx b/app/app/data/metric-definitions/alignment/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Alignment() {
@@ -7,3 +8,4 @@ export default function Alignment() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Alignment Metrics' };
diff --git a/app/app/data/metric-definitions/experience/page.tsx b/app/app/data/metric-definitions/experience/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Experience() {
@@ -7,3 +8,4 @@ export default function Experience() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Experience Metrics' };
diff --git a/app/app/data/metric-definitions/lifecycle/page.tsx b/app/app/data/metric-definitions/lifecycle/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Lifecycle() {
@@ -7,3 +8,4 @@ export default function Lifecycle() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Lifecycle Metrics' };
diff --git a/app/app/data/metric-definitions/retention/page.tsx b/app/app/data/metric-definitions/retention/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Retention() {
@@ -7,3 +8,4 @@ export default function Retention() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Retention Metrics' };
diff --git a/app/app/data/models/commits/page.tsx b/app/app/data/models/commits/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Commits() {
@@ -7,3 +8,4 @@ export default function Commits() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Commits' };
diff --git a/app/app/data/models/developers/page.tsx b/app/app/data/models/developers/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Developers() {
@@ -7,3 +8,4 @@ export default function Developers() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Developers' };
diff --git a/app/app/data/models/ecosystems/page.tsx b/app/app/data/models/ecosystems/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Ecosystems() {
@@ -7,3 +8,4 @@ export default function Ecosystems() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Ecosystems' };
diff --git a/app/app/data/models/events/page.tsx b/app/app/data/models/events/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Events() {
@@ -7,3 +8,4 @@ export default function Events() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Events' };
diff --git a/app/app/data/models/repositories/page.tsx b/app/app/data/models/repositories/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Repositories() {
@@ -7,3 +8,4 @@ export default function Repositories() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Repositories' };
diff --git a/app/app/data/models/timeseries-metrics/page.tsx b/app/app/data/models/timeseries-metrics/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function TimeseriesMetrics() {
@@ -7,3 +8,4 @@ export default function TimeseriesMetrics() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Timeseries Metrics' };
diff --git a/app/app/data/sources/github-archive/page.tsx b/app/app/data/sources/github-archive/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function GitHubArchive() {
@@ -7,3 +8,4 @@ export default function GitHubArchive() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'GitHub Archive' };
diff --git a/app/app/data/sources/open-dev-data/page.tsx b/app/app/data/sources/open-dev-data/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function OpenDevData() {
@@ -7,3 +8,4 @@ export default function OpenDevData() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Open Dev Data' };
diff --git a/app/app/data/sources/oss-directory/page.tsx b/app/app/data/sources/oss-directory/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function OSSDirectory() {
@@ -7,3 +8,4 @@ export default function OSSDirectory() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'OSS Directory' };
diff --git a/app/app/insights/defi-builder-journeys/page.tsx b/app/app/insights/defi-builder-journeys/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function DefiBuilderJourneys() {
   return <MarimoIframe notebookName="notebooks/insights/defi-builder-journeys" />;
 }
+
+export const metadata: Metadata = { title: 'DeFi Builder Journeys' };
diff --git a/app/app/insights/developer-lifecycle/page.tsx b/app/app/insights/developer-lifecycle/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function DeveloperLifecycle() {
   return <MarimoIframe notebookName="notebooks/insights/developer-lifecycle" />;
 }
+
+export const metadata: Metadata = { title: 'Lifecycle Analysis' };
diff --git a/app/app/insights/developer-report-2025/page.tsx b/app/app/insights/developer-report-2025/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function DeveloperReport2025() {
   return <MarimoIframe notebookName="notebooks/insights/developer-report-2025" />;
 }
+
+export const metadata: Metadata = { title: '2025 Developer Trends' };
diff --git a/app/app/insights/developer-retention/page.tsx b/app/app/insights/developer-retention/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function DeveloperRetention() {
   return <MarimoIframe notebookName="notebooks/insights/developer-retention" />;
 }
+
+export const metadata: Metadata = { title: 'Retention Analysis' };
diff --git a/app/app/insights/ethereum-repo-rank/page.tsx b/app/app/insights/ethereum-repo-rank/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function EthereumRepoRank() {
   return <MarimoIframe notebookName="notebooks/insights/ethereum-repo-rank" />;
 }
+
+export const metadata: Metadata = { title: 'Ethereum Repo Rank' };
diff --git a/app/app/insights/speedrun-ethereum/page.tsx b/app/app/insights/speedrun-ethereum/page.tsx
@@ -1,5 +1,7 @@
-'use client';
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 export default function SpeedrunEthereum() {
   return <MarimoIframe notebookName="notebooks/insights/speedrun-ethereum" />;
 }
+
+export const metadata: Metadata = { title: 'Speedrun Ethereum' };
diff --git a/app/app/layout.tsx b/app/app/layout.tsx
@@ -3,8 +3,11 @@ import Sidebar from '@/components/Sidebar';
 import './globals.css';
 
 export const metadata: Metadata = {
-  title: 'Developer Data Portal',
-  description: 'OSO data portal for developer analytics',
+  title: {
+    default: 'Developer Data Portal',
+    template: '%s | Developer Data Portal',
+  },
+  description: 'Open-source developer analytics across Ethereum and beyond',
 };
 
 export default function RootLayout({
diff --git a/app/app/not-found.tsx b/app/app/not-found.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="h-full w-full flex items-center justify-center">
+      <div className="flex flex-col items-center gap-4 text-center px-6">
+        <h1 className="text-6xl font-bold tracking-tight text-gray-900">404</h1>
+        <p className="text-gray-500 text-base">Page not found</p>
+        <Link
+          href="/"
+          className="mt-2 inline-flex items-center gap-1.5 text-sm font-semibold text-gray-900 border border-gray-200 rounded-xl px-5 py-2.5 hover:border-gray-900 hover:bg-gray-50 transition-all duration-150"
+        >
+          Back to home
+          <span className="text-gray-400">→</span>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/app/app/page.tsx b/app/app/page.tsx
@@ -50,17 +50,19 @@ function Carousel() {
         sizes="50vw"
         priority
       />
-      <div className="absolute bottom-3 left-0 right-0 flex justify-center gap-2">
-        {CAROUSEL_IMAGES.map((_, i) => (
-          <button
-            key={i}
-            onClick={() => { setPrev(current); setCurrent(i); }}
-            aria-label={`Go to screenshot ${i + 1}`}
-            className={`w-1.5 h-1.5 rounded-full transition-all ${
-              i === current ? 'bg-white scale-125' : 'bg-white/50 hover:bg-white/75'
-            }`}
-          />
-        ))}
+      <div className="absolute bottom-3 left-0 right-0 flex justify-center">
+        <div className="flex gap-2 bg-black/20 rounded-full px-2.5 py-1.5 backdrop-blur-sm">
+          {CAROUSEL_IMAGES.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => { setPrev(current); setCurrent(i); }}
+              aria-label={`Go to screenshot ${i + 1}`}
+              className={`w-2 h-2 rounded-full transition-all ${
+                i === current ? 'bg-white scale-125' : 'bg-white/50 hover:bg-white/75'
+              }`}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );
@@ -69,7 +71,7 @@ function Carousel() {
 export default function Home() {
   return (
     <div className="h-full w-full overflow-y-auto">
-      <div className="px-10 py-10 max-w-5xl flex flex-col gap-12">
+      <div className="px-5 py-8 md:px-10 md:py-10 max-w-5xl flex flex-col gap-12">
 
         {/* Hero */}
         <div className="flex flex-col gap-3">
@@ -87,7 +89,7 @@ export default function Home() {
         </div>
 
         {/* Two-column: features left, carousel right */}
-        <div className="grid grid-cols-2 gap-12 items-center">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
           <div className="flex flex-col gap-7">
             <div>
               <p className="text-[13px] font-semibold uppercase tracking-widest text-gray-400 mb-2">Why DDP</p>
@@ -115,7 +117,7 @@ export default function Home() {
         {/* Get started */}
         <div className="flex flex-col gap-4">
           <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400">Get started</h2>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             <Link
               href="/quick-start"
               className="group flex flex-col gap-2 p-5 border border-gray-200 rounded-xl hover:border-gray-900 hover:bg-gray-50 transition-all duration-150"
diff --git a/app/app/publications/page.tsx b/app/app/publications/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function Publications() {
@@ -7,3 +8,4 @@ export default function Publications() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Publications' };
diff --git a/app/app/quick-start/page.tsx b/app/app/quick-start/page.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import MarimoIframe from '@/components/MarimoIframe';
 
 export default function QuickStart() {
@@ -7,3 +8,4 @@ export default function QuickStart() {
     </div>
   );
 }
+export const metadata: Metadata = { title: 'Quick Start' };
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
diff --git a/app/tsconfig.tsbuildinfo b/app/tsconfig.tsbuildinfo

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import type { Metadata } from 'next';`
`1`	`2`	`import MarimoIframe from '@/components/MarimoIframe';`
`2`	`3`
`3`	`4`	`export default function AgentGuide() {`
`@@ -7,3 +8,4 @@ export default function AgentGuide() {`
`7`	`8`	`</div>`
`8`	`9`	`);`
`9`	`10`	`}`
	`11`	`+export const metadata: Metadata = { title: 'Agent Guide' };`