fix: responsive design

rishikanthc · rishikanthc · commit 3bbcbcfd63de · 2025-12-15T13:36:12.000-08:00
diff --git a/api-docs/docs.go b/api-docs/docs.go
@@ -1044,6 +1044,26 @@ const docTemplate = `{
                 }
             }
         },
+        "/api/v1/events": {
+            "get": {
+                "description": "Subscribe to server-sent events",
+                "produces": [
+                    "text/event-stream"
+                ],
+                "tags": [
+                    "events"
+                ],
+                "summary": "SSE Events",
+                "responses": {
+                    "200": {
+                        "description": "stream",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/api/v1/llm/config": {
             "get": {
                 "security": [
diff --git a/api-docs/swagger.json b/api-docs/swagger.json
@@ -1038,6 +1038,26 @@
                 }
             }
         },
+        "/api/v1/events": {
+            "get": {
+                "description": "Subscribe to server-sent events",
+                "produces": [
+                    "text/event-stream"
+                ],
+                "tags": [
+                    "events"
+                ],
+                "summary": "SSE Events",
+                "responses": {
+                    "200": {
+                        "description": "stream",
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                }
+            }
+        },
         "/api/v1/llm/config": {
             "get": {
                 "security": [
diff --git a/api-docs/swagger.yaml b/api-docs/swagger.yaml
@@ -1427,6 +1427,19 @@ paths:
       summary: Validate OpenAI API Key
       tags:
       - config
+  /api/v1/events:
+    get:
+      description: Subscribe to server-sent events
+      produces:
+      - text/event-stream
+      responses:
+        "200":
+          description: stream
+          schema:
+            type: string
+      summary: SSE Events
+      tags:
+      - events
   /api/v1/llm/config:
     get:
       description: Get the current active LLM configuration
diff --git a/cmd/server/main.go b/cmd/server/main.go
@@ -23,8 +23,6 @@ import (
 	"scriberr/internal/transcription/adapters"
 	"scriberr/internal/transcription/registry"
 	"scriberr/pkg/logger"
-
-	_ "scriberr/api-docs" // Import generated Swagger docs
 )
 
 // Version information (set by GoReleaser)
diff --git a/internal/api/router.go b/internal/api/router.go
@@ -7,8 +7,6 @@ import (
 	"scriberr/pkg/middleware"
 
 	"github.com/gin-gonic/gin"
-	swaggerFiles "github.com/swaggo/files"
-	ginSwagger "github.com/swaggo/gin-swagger"
 )
 
 // SetupRoutes sets up all API routes
@@ -46,9 +44,6 @@ func SetupRoutes(handler *Handler, authService *auth.AuthService) *gin.Engine {
 	// Health check endpoint (no auth required)
 	router.GET("/health", handler.HealthCheck)
 
-	// Swagger documentation
-	router.GET("/swagger/*any", ginSwagger.WrapHandler(swaggerFiles.Handler))
-
 	// CLI install script alias (root level for easier access)
 	router.GET("/install.sh", handler.GetInstallScript)
 	router.GET("/install-cli.sh", handler.GetInstallScript)
diff --git a/web/project-site/Makefile b/web/project-site/Makefile
@@ -4,7 +4,7 @@ install:
 	npm install
 
 generate-api:
-	cd ../.. && swag init -g server/main.go -o api-docs --dir cmd,internal
+	cd ../.. && swag init -g server/main.go -o web/project-site/public/api --outputTypes json --dir cmd,internal
 
 build: generate-api
 	npm run build
diff --git a/web/project-site/package.json b/web/project-site/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "sync:spec": "mkdir -p public/api && cp -f ../../api-docs/swagger.json public/api/swagger.json || echo 'No swagger.json found, skipping copy'",
+    "sync:spec": "echo 'Swagger spec is generated by make generate-api'",
     "sync:undoc": "node ./scripts/gen-endpoints.mjs",
     "dev": "npm run sync:spec && npm run sync:undoc && vite",
     "build": "npm run sync:spec && npm run sync:undoc && tsc -b && vite build",
diff --git a/web/project-site/src/Layout.tsx b/web/project-site/src/Layout.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { ScriberrLogo } from './components/ScriberrLogo';
-import { Github, Book, Code } from 'lucide-react';
-import { Button } from './components/ui/Button';
+import { Github, Book, Menu, X } from 'lucide-react';
+import { useState } from 'react';
+
+
+import { GithubBadge } from './components/GithubBadge';
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -11,6 +14,7 @@ interface LayoutProps {
 export function Layout({ children }: LayoutProps) {
     const location = useLocation();
     const isDocs = location.pathname.startsWith('/docs');
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     return (
         <div className="min-h-screen flex flex-col font-sans selection:bg-[#FF6D20] selection:text-white">
@@ -22,33 +26,55 @@ export function Layout({ children }: LayoutProps) {
                             <ScriberrLogo />
                         </Link>
                         {isDocs && (
-                            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-orange-100 text-[#FF6D20] border border-orange-200">
+                            <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-orange-100 text-[#FF6D20] border border-orange-200 font-heading">
                                 Docs
                             </span>
                         )}
                     </div>
 
                     <nav className="hidden md:flex items-center gap-8">
-                        <Link to="/#features" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</Link>
-                        <Link to="/docs/intro" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Documentation</Link>
-                        <Link to="/api" className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">API</Link>
+                        <Link to="/docs/intro" className="text-sm text-gray-600 hover:text-gray-900 transition-colors font-heading">Documentation</Link>
+                        <Link to="/api" className="text-sm text-gray-600 hover:text-gray-900 transition-colors font-heading">API</Link>
                     </nav>
 
                     <div className="flex items-center gap-4">
-                        <a
-                            href="https://github.com/rishikanthc/Scriberr"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="p-2 text-gray-500 hover:text-gray-900 transition-colors"
-                            aria-label="GitHub"
-                        >
-                            <Github className="w-5 h-5" />
-                        </a>
-                        <div className="hidden sm:block">
-                            <Button variant="primary" size="sm">Get Started</Button>
+                        <div className="hidden md:block">
+                            <GithubBadge />
                         </div>
+                        <button
+                            onClick={() => setIsMenuOpen(!isMenuOpen)}
+                            className="md:hidden flex items-center justify-center w-10 h-10 rounded-xl bg-white/80 border border-gray-200 shadow-sm text-gray-600 hover:text-[#FF6D20] hover:border-orange-200 hover:bg-orange-50 transition-all duration-200"
+                            aria-label="Toggle menu"
+                        >
+                            {isMenuOpen ? <X className="w-5 h-5" strokeWidth={2.5} /> : <Menu className="w-5 h-5" strokeWidth={2.5} />}
+                        </button>
                     </div>
                 </div>
+
+                {/* Mobile Menu Overlay */}
+                {isMenuOpen && (
+                    <div className="md:hidden absolute top-16 left-0 right-0 bg-white border-b border-gray-100 shadow-lg animate-fade-in z-40">
+                        <nav className="flex flex-col p-4 space-y-4">
+                            <Link
+                                to="/docs/intro"
+                                className="text-sm font-medium text-gray-600 hover:text-gray-900 py-2 border-b border-gray-50 font-heading"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                Documentation
+                            </Link>
+                            <Link
+                                to="/api"
+                                className="text-sm font-medium text-gray-600 hover:text-gray-900 py-2 border-b border-gray-50 font-heading"
+                                onClick={() => setIsMenuOpen(false)}
+                            >
+                                API
+                            </Link>
+                            <div className="pt-2">
+                                <GithubBadge />
+                            </div>
+                        </nav>
+                    </div>
+                )}
             </header>
 
             {/* Main Content */}
@@ -57,21 +83,23 @@ export function Layout({ children }: LayoutProps) {
             </main>
 
             {/* Footer */}
-            <footer className="border-t border-gray-100 bg-gray-50 py-12">
+            <footer className="border-t border-gray-100 bg-gray-50 py-6">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
                     <div className="flex items-center gap-2">
                         <span className="text-sm text-gray-500">© 2025 Scriberr. All rights reserved.</span>
                     </div>
                     <div className="flex items-center gap-6">
-                        <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
+                        <a
+                            href="https://github.com/rishikanthc/scriberr"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-gray-400 hover:text-gray-600 transition-colors"
+                        >
                             <Github className="w-5 h-5" />
                         </a>
-                        <Link to="/docs" className="text-gray-400 hover:text-gray-600 transition-colors">
+                        <Link to="/docs/intro" className="text-gray-400 hover:text-gray-600 transition-colors">
                             <Book className="w-5 h-5" />
                         </Link>
-                        <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
-                            <Code className="w-5 h-5" />
-                        </a>
                     </div>
                 </div>
             </footer>
diff --git a/web/project-site/src/components/GithubBadge.tsx b/web/project-site/src/components/GithubBadge.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { Github, Star, GitFork } from 'lucide-react';
+
+interface RepoStats {
+    stargazers_count: number;
+    forks_count: number;
+}
+
+export function GithubBadge() {
+    const [stats, setStats] = useState<RepoStats | null>(null);
+
+    useEffect(() => {
+        fetch('https://api.github.com/repos/rishikanthc/scriberr')
+            .then(res => res.json())
+            .then(data => {
+                setStats({
+                    stargazers_count: data.stargazers_count,
+                    forks_count: data.forks_count
+                });
+            })
+            .catch(err => console.error('Failed to fetch repo stats:', err));
+    }, []);
+
+    const formatCount = (count: number) => {
+        if (count >= 1000) {
+            return (count / 1000).toFixed(1) + 'k';
+        }
+        return count;
+    };
+
+    return (
+        <a
+            href="https://github.com/rishikanthc/scriberr"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group flex items-center gap-0 rounded-md overflow-hidden border border-gray-200 shadow-sm hover:shadow transition-all duration-200"
+        >
+            <div className="flex items-center gap-2 px-3 py-1.5 bg-gray-50 group-hover:bg-gray-100 transition-colors border-r border-gray-200">
+                <Github className="w-4 h-4 text-gray-700" />
+                <span className="text-xs font-semibold text-gray-700 font-heading">Star</span>
+            </div>
+            {stats && (
+                <div className="flex items-center bg-white">
+                    <div className="flex items-center gap-1 px-2 py-1.5 border-r border-gray-100 last:border-0 hover:bg-gray-50 transition-colors">
+                        <Star className="w-3.5 h-3.5 text-amber-400 fill-amber-400" />
+                        <span className="text-xs font-medium text-gray-600 font-mono">{formatCount(stats.stargazers_count)}</span>
+                    </div>
+                    <div className="flex items-center gap-1 px-2 py-1.5 hover:bg-gray-50 transition-colors">
+                        <GitFork className="w-3.5 h-3.5 text-gray-400" />
+                        <span className="text-xs font-medium text-gray-600 font-mono">{formatCount(stats.forks_count)}</span>
+                    </div>
+                </div>
+            )}
+        </a>
+    );
+}
diff --git a/web/project-site/src/components/ui/Button.tsx b/web/project-site/src/components/ui/Button.tsx
@@ -16,7 +16,7 @@ export function Button({
     ...props
 }: ButtonProps) {
 
-    const baseStyles = "inline-flex items-center justify-center font-medium transition-all duration-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    const baseStyles = "cursor-pointer inline-flex items-center justify-center font-medium transition-all duration-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
 
     const variants = {
         primary: "bg-gray-900 text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 focus:ring-gray-900",
diff --git a/web/project-site/src/index.css b/web/project-site/src/index.css
@@ -1,10 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap');
 @import "tailwindcss";
 
 @theme {
   --color-brand-solid: var(--brand-solid);
   --image-brand-gradient: var(--brand-gradient);
 
   --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-heading: "Plus Jakarta Sans", sans-serif;
+  --font-body: 'Work Sans', sans-serif;
 
   --animate-fade-in: fadeIn 0.5s ease-out;
   --animate-slide-up: slideUp 0.5s ease-out;
@@ -41,8 +44,6 @@
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #f9fafb;
   --color-text-primary: #111827;
-  --font-heading: 'Plus Jakarta Sans', sans-serif;
-  --font-body: 'Work Sans', sans-serif;
 }
 
 body {
diff --git a/web/project-site/src/layouts/DocsLayout.tsx b/web/project-site/src/layouts/DocsLayout.tsx
diff --git a/web/project-site/src/pages/Home.tsx b/web/project-site/src/pages/Home.tsx

Original file line number	Diff line number	Diff line change
`@@ -23,8 +23,6 @@ import (`
`23`	`23`	`"scriberr/internal/transcription/adapters"`
`24`	`24`	`"scriberr/internal/transcription/registry"`
`25`	`25`	`"scriberr/pkg/logger"`
`26`		`-`
`27`		`- _ "scriberr/api-docs" // Import generated Swagger docs`
`28`	`26`	`)`
`29`	`27`
`30`	`28`	`// Version information (set by GoReleaser)`