feat: harden admin security, add AI trip planner, map view, and SEO/notification improvements

Security: - requireAdmin() session check added to every admin-only server action (previously relied only on middleware path matching, which Next.js Server Actions don't reliably respect) - Real Prisma + bcrypt admin auth, replacing hardcoded credentials; split into an Edge-safe auth.config.ts (used by proxy.ts) and the full Prisma-backed auth.ts (route handler, server actions, server components) - Removed hardcoded fallback secret on the Instagram sync cron endpoint - Honeypot field + per-IP rate limiting on contact/business-submission forms and the analytics events endpoint Features: - AI trip planner (/plan-olustur, /plan/[id]) backed by DeepSeek, grounded to only recommend isLocalApproved listings, with a deterministic link-injection fallback for anything the model doesn't format as markdown - Interactive Leaflet/OpenStreetMap view on category listing pages - Telegram notifications for new contact messages and business submissions SEO: - Brand-consistent favicon/apple-icon/PWA icons and default Open Graph/ Twitter share images, generated via next/og (replacing default Next.js placeholders) - BreadcrumbList structured data on category and listing detail pages - Fixed two remaining raw <img> tags to use next/image Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-24 00:01:06 +03:00
parent 390bd699a6
commit 1b8cfeda95
62 changed files with 2216 additions and 411 deletions
@@ -14,7 +14,7 @@ export default async function Footer() {
  const nav = await getTranslations('nav')

  return (
-    <footer className="bg-pine text-stone/70 border-t border-white/10 pt-16 pb-8 font-sans">
+    <footer className="bg-pine text-stone/85 border-t border-white/10 pt-16 pb-8 font-sans">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-10 mb-12">
          
@@ -29,7 +29,7 @@ export default async function Footer() {
                marmaris <span className="text-turquoise">local</span>
              </h2>
            </Link>
-            <p className="text-xs text-stone/50 max-w-sm font-medium leading-relaxed">
+            <p className="text-xs text-stone/80 max-w-sm font-medium leading-relaxed">
              {t('about')}
            </p>
          </div>
@@ -91,35 +91,19 @@ export default async function Footer() {

        </div>

-        {/* Bottom Copyright & Branding */}
-        <div className="border-t border-white/5 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-stone/40 gap-4">
+        {/* Bottom Copyright & Mandatory Branding */}
+        <div className="border-t border-white/10 pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-stone/75 gap-4">
          <p>{t('rights')}</p>
          <div className="flex items-center gap-1.5 font-medium">
-            <span className="opacity-75">Created by</span>
+            <span className="opacity-90">Created by</span>
            <a 
              href="https://ayris.tech" 
              target="_blank" 
              rel="noopener noreferrer" 
-              className="text-stone hover:text-turquoise transition-colors duration-200 hover:underline underline-offset-4"
+              className="text-stone hover:text-turquoise transition-colors duration-200 hover:underline underline-offset-4 font-semibold"
            >
-              Ayris Tech
+              ayris.tech
            </a>
-
-            {/* Google Bot & Arama Motoru İndeksleme Katmanı (Görünmez / Screen-Reader Safe) */}
-            <span className="sr-only">
-              Legal AI & Solutions:{' '}
-              <a href="https://ayris.legal" rel="noopener">
-                AyrisLegal
-              </a>
-              ,{' '}
-              <a href="https://ayrislegal.com" rel="noopener">
-                Ayris Legal AI
-              </a>
-              . The best local spots, hidden from plain sight. Marmaris Local{' '}
-              <a href="https://marmarislocal.com" rel="noopener">
-                Marmaris Local
-              </a>
-            </span>
          </div>
        </div>

@@ -0,0 +1,16 @@
+// Invisible spam trap: real visitors never see or fill this field, so any
+// submission with it filled in is almost certainly a bot. Server actions
+// check `formData.get(HONEYPOT_FIELD_NAME)` and silently no-op if it's set.
+export const HONEYPOT_FIELD_NAME = 'website_url'
+
+export default function HoneypotField() {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ position: 'absolute', left: '-9999px', top: 0, width: 0, height: 0, overflow: 'hidden' }}
+    >
+      <label htmlFor={HONEYPOT_FIELD_NAME}>Website</label>
+      <input type="text" id={HONEYPOT_FIELD_NAME} name={HONEYPOT_FIELD_NAME} tabIndex={-1} autoComplete="off" />
+    </div>
+  )
+}
@@ -112,23 +112,33 @@ export default function ListingCard({ listing }: { listing: Listing }) {
      ? listing.images[0].url
      : 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&auto=format&fit=crop&q=80'

+  const saveAriaLabel = isSaved
+    ? locale === 'ru'
+      ? 'Удалить из избранного'
+      : locale === 'en'
+      ? 'Remove from saved'
+      : 'Favorilerden çıkar'
+    : locale === 'ru'
+    ? 'Добавить в избранное'
+    : locale === 'en'
+    ? 'Save listing'
+    : 'Favorilere ekle'
+
  return (
-    <Link
-      href={`/${categorySlug}/${listing.slug}`}
-      className="group bg-paper rounded-2xl border border-pine/8 overflow-hidden flex flex-col relative shadow-sm hover:shadow-md hover:border-turquoise/35 transition-all duration-300 transform hover:-translate-y-0.5"
-    >
-      {/* Heart Save Button */}
+    <div className="group bg-paper rounded-2xl border border-pine/8 overflow-hidden flex flex-col relative shadow-sm hover:shadow-md hover:border-turquoise/35 transition-all duration-300 transform hover:-translate-y-0.5">
+      {/* Heart Save Button - Decoupled from card link for HTML valid semantics & 44px min touch area */}
      <button
+        type="button"
        onClick={toggleSave}
-        className="absolute top-4 left-4 z-20 w-9 h-9 rounded-full bg-paper/95 border border-pine/8 flex items-center justify-center shadow-sm hover:bg-stone transition duration-150 text-pine"
-        aria-label="Kaydet"
+        className="absolute top-3 left-3 z-20 min-w-[44px] min-h-[44px] rounded-full bg-paper/95 border border-pine/10 flex items-center justify-center shadow-sm hover:bg-stone transition duration-150 text-pine cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-turquoise"
+        aria-label={saveAriaLabel}
      >
-        <Heart className={`w-4.5 h-4.5 transition duration-150 ${isSaved ? 'fill-bougainvillea text-bougainvillea' : 'text-pine/70 hover:text-pine'}`} />
+        <Heart className={`w-5 h-5 transition duration-150 ${isSaved ? 'fill-bougainvillea text-bougainvillea' : 'text-pine/70 hover:text-pine'}`} />
      </button>

      {/* Local Approved Seal */}
      {listing.isLocalApproved && (
-        <div className="absolute top-4 right-4 z-10 w-[52px] h-[52px] rounded-full border-[1.5px] border-turquoise bg-paper flex items-center justify-center -rotate-12 shadow-sm shrink-0">
+        <div className="absolute top-3 right-3 z-10 w-[52px] h-[52px] rounded-full border-[1.5px] border-turquoise bg-paper flex items-center justify-center -rotate-12 shadow-sm shrink-0 pointer-events-none">
          <div className="absolute inset-[2.5px] rounded-full border border-dashed border-turquoise/60" />
          <span className="font-mono text-[7px] text-center font-bold text-turquoise tracking-tight leading-[1.1] uppercase">
            YEREL<br />ONAYLI
@@ -136,49 +146,55 @@ export default function ListingCard({ listing }: { listing: Listing }) {
        </div>
      )}

-      {/* Image Preview */}
-      <div className="aspect-[4/3] w-full relative bg-stone-deep overflow-hidden">
-        <Image
-          src={mainImageUrl}
-          alt={name}
-          fill
-          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-          className="object-cover transition-transform duration-500 group-hover:scale-105"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-pine/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-      </div>
-
-      {/* Content Details */}
-      <div className="p-5 flex-1 flex flex-col justify-between">
-        <div>
-          {/* Category */}
-          <div className="text-[10px] font-mono text-bougainvillea font-bold uppercase tracking-wider mb-2">
-            {categoryName}
-          </div>
-
-          {/* Title */}
-          <h3 className="font-heading font-bold text-lg text-pine leading-tight mb-2 group-hover:text-turquoise transition-colors line-clamp-1">
-            {name}
-          </h3>
-
-          {/* Neighborhood */}
-          <div className="text-xs text-ink/60 font-medium mb-4">
-            {neighborhoodName}
-          </div>
+      {/* Main Card Content Link */}
+      <Link
+        href={`/${categorySlug}/${listing.slug}`}
+        className="flex-1 flex flex-col focus:outline-none focus-visible:ring-2 focus-visible:ring-turquoise"
+      >
+        {/* Image Preview */}
+        <div className="aspect-[4/3] w-full relative bg-stone-deep overflow-hidden">
+          <Image
+            src={mainImageUrl}
+            alt={name}
+            fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-pine/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
        </div>

-        {/* Footer info (price range, rating) */}
-        <div className="border-t border-dashed border-pine/12 pt-3.5 mt-auto flex items-center justify-between text-xs font-mono">
-          <span className="text-pine font-semibold">{priceSymbols}</span>
-          
-          {listing.rating && (
-            <div className="flex items-center gap-1 text-gold font-bold">
-              <Star className="w-3.5 h-3.5 fill-gold stroke-gold" />
-              <span>★ {listing.rating.toFixed(1)}</span>
+        {/* Content Details */}
+        <div className="p-5 flex-1 flex flex-col justify-between">
+          <div>
+            {/* Category */}
+            <div className="text-[10px] font-mono text-bougainvillea font-bold uppercase tracking-wider mb-2">
+              {categoryName}
            </div>
-          )}
+
+            {/* Title */}
+            <h3 className="font-heading font-bold text-lg text-pine leading-tight mb-2 group-hover:text-turquoise transition-colors line-clamp-1">
+              {name}
+            </h3>
+
+            {/* Neighborhood */}
+            <div className="text-xs text-ink/70 font-medium mb-4">
+              {neighborhoodName}
+            </div>
+          </div>
+
+          {/* Footer info (price range, rating) */}
+          <div className="border-t border-dashed border-pine/12 pt-3.5 mt-auto flex items-center justify-between text-xs font-mono">
+            <span className="text-pine font-semibold">{priceSymbols}</span>
+            
+            {listing.rating && (
+              <div className="flex items-center gap-1 text-gold font-bold">
+                <Star className="w-3.5 h-3.5 fill-gold stroke-gold" />
+                <span>{listing.rating.toFixed(1)}</span>
+              </div>
+            )}
+          </div>
        </div>
-      </div>
-    </Link>
+      </Link>
+    </div>
  )
 }
@@ -0,0 +1,91 @@
+'use client'
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+import L from 'leaflet'
+import 'leaflet/dist/leaflet.css'
+import { Link } from '@/i18n/routing'
+
+export interface MapListing {
+  id: string
+  slug: string
+  name: string
+  categorySlug: string
+  categoryName: string
+  latitude: number
+  longitude: number
+  isLocalApproved: boolean
+  image?: string
+}
+
+function buildPinIcon(color: string) {
+  return L.divIcon({
+    className: '',
+    html: `
+      <svg width="28" height="36" viewBox="0 0 28 36" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 0C6.3 0 0 6.3 0 14c0 10.5 14 22 14 22s14-11.5 14-22C28 6.3 21.7 0 14 0z" fill="${color}" stroke="#FBFAF6" stroke-width="1.5"/>
+        <circle cx="14" cy="14" r="5" fill="#FBFAF6"/>
+      </svg>
+    `,
+    iconSize: [28, 36],
+    iconAnchor: [14, 34],
+    popupAnchor: [0, -32],
+  })
+}
+
+const approvedIcon = buildPinIcon('#E8A23D')
+const defaultIcon = buildPinIcon('#2E9C9A')
+
+interface ListingsMapProps {
+  listings: MapListing[]
+  approvedLabel: string
+  viewLabel: string
+}
+
+export default function ListingsMap({ listings, approvedLabel, viewLabel }: ListingsMapProps) {
+  if (listings.length === 0) return null
+
+  const center: [number, number] = [
+    listings.reduce((sum, l) => sum + l.latitude, 0) / listings.length,
+    listings.reduce((sum, l) => sum + l.longitude, 0) / listings.length,
+  ]
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={13}
+      scrollWheelZoom={false}
+      className="w-full h-full"
+      style={{ background: '#EDEEE3' }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {listings.map((listing) => (
+        <Marker
+          key={listing.id}
+          position={[listing.latitude, listing.longitude]}
+          icon={listing.isLocalApproved ? approvedIcon : defaultIcon}
+        >
+          <Popup>
+            <div className="space-y-1.5 min-w-[160px]">
+              {listing.isLocalApproved && (
+                <span className="inline-block text-[10px] font-bold uppercase tracking-wider text-[#E8A23D]">
+                  {approvedLabel}
+                </span>
+              )}
+              <div className="font-semibold text-sm text-[#123238]">{listing.name}</div>
+              <div className="text-xs text-[#4F7C93]">{listing.categoryName}</div>
+              <Link
+                href={`/${listing.categorySlug}/${listing.slug}`}
+                className="inline-block text-xs font-semibold text-[#2E9C9A] hover:underline"
+              >
+                {viewLabel} →
+              </Link>
+            </div>
+          </Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  )
+}
@@ -0,0 +1,22 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import type { MapListing } from './ListingsMap'
+
+// Leaflet touches `window` at import time, so it can only load client-side.
+// next/dynamic with ssr:false is only valid from a Client Component in the
+// App Router, which is why this thin loader exists separately from the page.
+const ListingsMap = dynamic(() => import('./ListingsMap'), {
+  ssr: false,
+  loading: () => <div className="w-full h-full animate-pulse bg-pine/5" />,
+})
+
+interface ListingsMapLoaderProps {
+  listings: MapListing[]
+  approvedLabel: string
+  viewLabel: string
+}
+
+export default function ListingsMapLoader(props: ListingsMapLoaderProps) {
+  return <ListingsMap {...props} />
+}
@@ -61,6 +61,7 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
    ...categoryItems,
    { name: t('events'), href: '/events' },
    { name: t('blog'), href: '/blog' },
+    { name: t('aiPlanner'), href: '/plan-olustur' },
  ]

  const handleLanguageChange = (localeCode: string) => {
@@ -83,7 +84,7 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
              <p className="font-heading font-extrabold text-lg text-stone tracking-tight leading-none lowercase">
                marmaris <span className="text-turquoise">local</span>
              </p>
-              <p className="text-[9px] font-mono text-shutter tracking-wider mt-0.5 uppercase">
+              <p className="text-[10px] font-mono text-stone/75 font-medium tracking-wider mt-0.5 uppercase">
                local knowledge
              </p>
            </div>
@@ -108,15 +109,16 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })

          {/* Action Items */}
          <div className="hidden lg:flex items-center gap-4">
-            {/* Saved items trigger */}
+            {/* Saved items trigger - 44px touch target */}
            <Link
              href="/saved"
-              className="relative w-8 h-8 rounded-full border border-stone/20 hover:border-turquoise transition text-stone hover:text-turquoise flex items-center justify-center"
+              className="relative w-11 h-11 rounded-full border border-stone/20 hover:border-turquoise transition text-stone hover:text-turquoise flex items-center justify-center shrink-0"
              title={t('saved')}
+              aria-label={t('saved')}
            >
-              <Heart className="w-4 h-4" />
+              <Heart className="w-4.5 h-4.5" />
              {favoritesCount > 0 && (
-                <span className="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
+                <span className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
                  {favoritesCount}
                </span>
              )}
@@ -125,10 +127,14 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
            {/* Language Selector */}
            <div className="relative">
              <button
+                type="button"
                onClick={() => setLangMenuOpen(!langMenuOpen)}
-                className="flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-stone/20 hover:border-turquoise transition text-xs font-mono"
+                className="flex items-center gap-1.5 px-3.5 py-2.5 rounded-full border border-stone/20 hover:border-turquoise transition text-xs font-mono min-h-[44px] cursor-pointer"
+                aria-label="Select language"
+                aria-expanded={langMenuOpen}
+                aria-haspopup="true"
              >
-                <Globe className="w-3.5 h-3.5 text-turquoise" />
+                <Globe className="w-4 h-4 text-turquoise" />
                {activeLocale.toUpperCase()}
              </button>

@@ -139,12 +145,13 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
                    {languages.map((lang) => (
                      <button
                        key={lang.code}
+                        type="button"
                        onClick={() => handleLanguageChange(lang.code)}
-                        className={`w-full text-left px-4 py-2 text-xs hover:bg-stone transition flex items-center justify-between ${activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
+                        className={`w-full text-left px-4 py-2.5 text-xs hover:bg-stone transition flex items-center justify-between min-h-[40px] cursor-pointer ${activeLocale === lang.code ? 'font-bold text-turquoise bg-stone/40' : 'text-ink/80'
                          }`}
                      >
                        {lang.label}
-                        <span className="font-mono text-[10px] text-shutter">{lang.code.toUpperCase()}</span>
+                        <span className="font-mono text-[10px] text-pine/70">{lang.code.toUpperCase()}</span>
                      </button>
                    ))}
                  </div>
@@ -155,47 +162,53 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
            {/* Add Business Button */}
            <Link
              href="/add-business"
-              className="flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper font-medium text-xs py-2 px-4 rounded-full transition-transform active:scale-95 shadow-sm"
+              className="flex items-center gap-1.5 bg-turquoise hover:bg-turquoise/90 text-paper font-medium text-xs py-2.5 px-4 rounded-full transition-transform active:scale-95 shadow-sm min-h-[44px]"
            >
-              <PlusCircle className="w-3.5 h-3.5" />
+              <PlusCircle className="w-4 h-4" />
              {t('addBusiness')}
            </Link>
          </div>

          {/* Mobile menu button */}
-          <div className="flex items-center gap-3 lg:hidden">
-            {/* Mobile Saved trigger */}
+          <div className="flex items-center gap-2 lg:hidden">
+            {/* Mobile Saved trigger - 44px touch target */}
            <Link
              href="/saved"
-              className="relative w-8 h-8 rounded-full border border-stone/20 text-stone flex items-center justify-center"
+              className="relative w-11 h-11 rounded-full border border-stone/20 text-stone flex items-center justify-center shrink-0"
              title={t('saved')}
+              aria-label={t('saved')}
            >
-              <Heart className="w-4 h-4" />
+              <Heart className="w-4.5 h-4.5" />
              {favoritesCount > 0 && (
-                <span className="absolute -top-1.5 -right-1.5 w-3.5 h-3.5 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
+                <span className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-bougainvillea text-stone text-[8px] font-mono font-bold flex items-center justify-center shadow-sm shrink-0">
                  {favoritesCount}
                </span>
              )}
            </Link>

-            {/* Lang menu for mobile */}
+            {/* Lang menu for mobile - 44px touch target */}
            <div className="relative">
              <button
+                type="button"
                onClick={() => setLangMenuOpen(!langMenuOpen)}
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border border-stone/20 text-xs font-mono"
+                className="flex items-center gap-1.5 px-3 py-2.5 rounded-full border border-stone/20 text-xs font-mono min-h-[44px] cursor-pointer"
+                aria-label="Select language"
+                aria-expanded={langMenuOpen}
+                aria-haspopup="true"
              >
-                <Globe className="w-3.5 h-3.5 text-turquoise" />
+                <Globe className="w-4 h-4 text-turquoise" />
                {activeLocale.toUpperCase()}
              </button>
              {langMenuOpen && (
                <>
                  <div className="fixed inset-0 z-10" onClick={() => setLangMenuOpen(false)} />
-                  <div className="absolute right-0 mt-2 w-32 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1">
+                  <div className="absolute right-0 mt-2 w-36 rounded-xl bg-paper text-ink shadow-lg ring-1 ring-black/5 z-20 py-1">
                    {languages.map((lang) => (
                      <button
                        key={lang.code}
+                        type="button"
                        onClick={() => handleLanguageChange(lang.code)}
-                        className="w-full text-left px-3 py-1.5 text-xs hover:bg-stone"
+                        className="w-full text-left px-4 py-2.5 text-xs hover:bg-stone min-h-[40px] cursor-pointer"
                      >
                        {lang.label}
                      </button>
@@ -205,9 +218,13 @@ export default function Navbar({ categories = [] }: { categories?: Category[] })
              )}
            </div>

+            {/* Mobile Menu Toggle Button - 44px touch target */}
            <button
+              type="button"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              className="text-stone hover:text-turquoise focus:outline-none"
+              className="w-11 h-11 flex items-center justify-center rounded-xl text-stone hover:text-turquoise hover:bg-white/10 transition cursor-pointer"
+              aria-label="Toggle navigation menu"
+              aria-expanded={mobileMenuOpen}
            >
              {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>