Merge pull request #4 from nov-solutions/footer-styling-on-mobile-causes-width-overflow

fix width overflow issue by wrapping anchors in footer

Author: hunterchemelli

.gitignore

@@ -35,6 +35,7 @@ node_modules
 next-env.d.ts
 **/sw.js
 **/workbox-*.js
+*.tsbuildinfo
 
 # cdk
 cdk.out

.pre-commit-config.yaml

@@ -16,19 +16,34 @@ repos:
     rev: v3.1.0
     hooks:
       - id: prettier
-        types: [file]
-        files: '\.(js|jsx|ts|tsx|json|yaml|md|css|html)$'
+        files: '^nextjs/.*\.(js|jsx|ts|tsx|json|yaml|md|css|html)$'
+        args: [--write]
 
-  # eslint for nextjs
-  - repo: local
+  # typescript linter
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.46.0
     hooks:
       - id: eslint
-        name: eslint
-        entry: bash -c 'cd nextjs && npm run lint'
+        args: [--fix]
+
+  # typescript type checker
+  - repo: local
+    hooks:
+      - id: tsc
+        name: typescript type checker
+        entry: npx --prefix nextjs tsc --noEmit --project nextjs/tsconfig.json
         language: system
-        files: '\.(js|jsx|ts|tsx)$'
+        files: '^nextjs/.*\.(ts|tsx)$'
         pass_filenames: false
 
+  # npm security audit
+  - repo: local
+    hooks:
+      - id: npm-audit
+        name: npm security audit
+        entry: bash -c "cd nextjs && npm audit --audit-level=high"
+        language: system
+
   # python linter and formatter
   - repo: https://github.com/psf/black
     rev: 25.1.0

nextjs/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@next/next/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["node_modules/**", ".*", "**/*.config.js"]
+}

nextjs/eslint.config.mjs

@@ -19,18 +19,18 @@ export default function Footer() {
 
   return (
     <footer className="border-t">
-      <div className="max-w-5xl mx-auto px-6 py-6">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-          <div className="flex items-center gap-6">
+      <div className="max-w-5xl px-6 py-6 mx-auto">
+        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+          <div className="flex flex-wrap items-center gap-6">
             <Link href="/" className="font-bold">
               {SITE_NAME}
             </Link>
-            <nav className="flex items-center gap-4">
+            <nav className="flex flex-wrap items-center gap-4">
               {links.map((link) => (
                 <Link
                   key={link.name}
                   href={link.href}
-                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-sm transition-colors text-muted-foreground hover:text-foreground"
                 >
                   {link.name}
                 </Link>
@@ -45,9 +45,9 @@ export default function Footer() {
                 href={social.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-muted-foreground hover:text-foreground transition-colors"
+                className="transition-colors text-muted-foreground hover:text-foreground"
               >
-                <social.icon className="h-5 w-5" />
+                <social.icon className="w-5 h-5" />
               </Link>
             ))}
             <span className="text-sm text-muted-foreground">

nextjs/src/components/marketing/footer.tsx

@@ -19,7 +19,6 @@
 import shutil
 import sys
 from pathlib import Path
-from typing import Optional
 
 EXCLUDE_PATTERNS = (
     "setup_project.py",
@@ -64,7 +63,9 @@ def load_config() -> dict:
     return config
 
 
-def prompt(label: str, default: str = "", required: bool = False, secret: bool = False) -> str:
+def prompt(
+    label: str, default: str = "", required: bool = False, secret: bool = False
+) -> str:
     """Prompt user for input with optional default value."""
     if default:
         display = f"{label} [{default}]: "
@@ -74,6 +75,7 @@ def prompt(label: str, default: str = "", required: bool = False, secret: bool =
     while True:
         if secret:
             import getpass
+
             value = getpass.getpass(display)
         else:
             value = input(display).strip()
@@ -111,7 +113,9 @@ def interactive_wizard() -> dict:
     prompt_section("Project Information")
     config["project"] = {
         "name": prompt("Project name (display name)", "My App", required=True),
-        "name_slug": prompt("Project slug (lowercase, hyphens)", "my-app-web", required=True),
+        "name_slug": prompt(
+            "Project slug (lowercase, hyphens)", "my-app-web", required=True
+        ),
     }
 
     # Branding
@@ -150,16 +154,22 @@ def interactive_wizard() -> dict:
         "account_id": prompt("AWS Account ID", "", required=True),
         "region": prompt("AWS Region", "us-west-2", required=True),
         "access_key_id": prompt("AWS Access Key ID (for backups)", ""),
-        "secret_access_key": prompt("AWS Secret Access Key (for backups)", "", secret=True),
+        "secret_access_key": prompt(
+            "AWS Secret Access Key (for backups)", "", secret=True
+        ),
     }
 
     # Database
     prompt_section("Database")
     config["database"] = {
         "name": prompt("Database name", "appdb", required=True),
         "user": prompt("Database user", "appuser", required=True),
-        "password": prompt("Database password", "change_me_secure_password", required=True),
-        "redis_password": prompt("Redis password", "change_me_redis_password", required=True),
+        "password": prompt(
+            "Database password", "change_me_secure_password", required=True
+        ),
+        "redis_password": prompt(
+            "Redis password", "change_me_redis_password", required=True
+        ),
     }
 
     # Deployment
@@ -272,20 +282,26 @@ def build_replacements(config: dict) -> dict[str, str]:
         # Django
         "{{DJANGO_SECRET_KEY}}": generate_secret_key(),
         # Stripe
-        "{{STRIPE_PUBLISHABLE_KEY}}": config.get("stripe", {}).get("publishable_key", ""),
+        "{{STRIPE_PUBLISHABLE_KEY}}": config.get("stripe", {}).get(
+            "publishable_key", ""
+        ),
         "{{STRIPE_SECRET_KEY}}": config.get("stripe", {}).get("secret_key", ""),
         "{{STRIPE_WEBHOOK_SECRET}}": config.get("stripe", {}).get("webhook_secret", ""),
         "{{STRIPE_PRO_PRICE_ID}}": config.get("stripe", {}).get("pro_price_id", ""),
         # Google OAuth
         "{{GOOGLE_CLIENT_ID}}": config.get("google_oauth", {}).get("client_id", ""),
-        "{{GOOGLE_CLIENT_SECRET}}": config.get("google_oauth", {}).get("client_secret", ""),
+        "{{GOOGLE_CLIENT_SECRET}}": config.get("google_oauth", {}).get(
+            "client_secret", ""
+        ),
         # SendGrid
         "{{SENDGRID_API_KEY}}": config.get("sendgrid", {}).get("api_key", ""),
         # Sentry
         "{{SENTRY_DSN}}": config.get("sentry", {}).get("dsn", ""),
         # Backup
         "{{BACKUP_S3_BUCKET}}": config.get("backup", {}).get("s3_bucket", ""),
-        "{{BACKUP_RETENTION_DAYS}}": config.get("backup", {}).get("retention_days", "30"),
+        "{{BACKUP_RETENTION_DAYS}}": config.get("backup", {}).get(
+            "retention_days", "30"
+        ),
         "{{BACKUP_PREFIX}}": config.get("backup", {}).get("prefix", "backups/"),
     }