Okul.com.tr — Eğitim Ekosistemi

Responsive Modül Yapısı (Tailwind v4 + Alpine)

2 dakika okuma süresi

Proje: Okul Platform · Hub: Okul Platform — Architecture

Frontend modernizasyon stratejisi: mevcut frontend/ (jQuery+Bootstrap desktop) ve mobile/ (Framework7) iskeletlerine dokunmadan, yeni feature’lar için izole responsive/ parent klasörü altında Tailwind v4 + Alpine.js tek layout. Parça parça geçiş yapıyoruz.

Dizin yapısı

resources/views/responsive/
├── layouts/
│   └── master.blade.php          # Tek layout (~47 satır — partial'ları dahil eder)
├── partials/                      # Layout parçaları (her sayfa aynı)
│   ├── tracking-head/body/footer.blade.php
│   ├── seo-head.blade.php         # JSON-LD + OG + Twitter Cards
│   ├── inline-overrides.blade.php # CSS overrides (focus, checkbox, reduced-motion)
│   ├── form-helpers.blade.php     # Phone mask, email validator JS (build-agnostik)
│   ├── global-js-vars.blade.php
│   ├── header/footer/login-modal.blade.php  # university branch'tan kopya
├── components/                    # Yeniden kullanılabilir UI blokları
│   ├── README.md                  # Component sözleşmeleri + örnekler
│   ├── breadcrumb / trust-strip
│   ├── wizard-progress / wizard-nav / resume-notice
│   ├── filter-bar / loading-skeleton / school-card
│   └── sticky-lead-bar / lead-form-modal
└── profiling/                     # Feature sub-modülü (test + finder)
    ├── test/index.blade.php
    ├── finder/index.blade.php
    ├── result/index.blade.php
    └── finder/result.blade.php

Build artifact’leri

  • resources/assets/styles/responsive.css → public/assets/styles/responsive.css (Tailwind v4 postcss)
  • resources/assets/scripts/profiling/* → public/assets/scripts/profiling/profiling.js (Alpine bundle)
  • resources/assets/scripts/gaEvents.js → public/assets/scripts/profiling/ga-events.js (standalone GA helper)

Stratejik kararlar

KararNeden
responsive/ parent, profiling/ subFeature izolasyonu + yeni modüller (lead, landing) aynı altyapıyı kullanabilir
Tek master.blade.phpHer sayfa aynı tracking + SEO + layout — tekrar yok
Component’ler components/ altında, feature-agnosticProfiling dışı sayfalar (ileride lead magnet, landing) aynı bloklari kullanacak
tw: prefixmain.min.css ile çakışma yok; sadece responsive sayfalarda aktif
gaEvents.js standalone bundlemain.min.js (jQuery+Bootstrap 130KB) yüklemeden GA helper erişimi

Yeni sayfa eklerken

  1. @extends('responsive.layouts.master')
  2. Alpine root: <section x-data="yeniComponent()" x-cloak>
  3. Alpine component: resources/assets/scripts/profiling/components/yeni.js + alpine-app.js’te register
  4. Gerekli component’leri @include('responsive.components.X', [...]) ile çek
  5. Route + Controller: ProfilingController pattern’ı örnek alınır

Grafik Görünümü

Backlinkler