Enhance User Guide and Template Services: Added max content width configuration to UserGuide page for improved layout. Updated TemplateService to always replace placeholders, ensuring custom components are handled correctly even with empty default data. Enhanced error handling for custom component rendering, providing user-friendly error messages in the preview. Introduced a new guide for website setup, detailing installation steps and features.
This commit is contained in:
Ümit Tunç
@@ -45,7 +45,7 @@
|
||||
:color="$selectedGuide === $guide['slug'] ? 'primary' : 'gray'"
|
||||
:variant="$selectedGuide === $guide['slug'] ? 'filled' : 'outline'"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full min-w-0">
|
||||
<div class="flex justify-between w-full min-w-0">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||||
<x-filament::icon
|
||||
icon="heroicon-o-document-text"
|
||||
@@ -62,19 +62,7 @@
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@if(isset($guide['modified_date']))
|
||||
<div class="w-full mt-1.5 text-xs opacity-75">
|
||||
<div class="flex items-center gap-1">
|
||||
<x-filament::icon
|
||||
icon="heroicon-o-clock"
|
||||
class="w-3 h-3"
|
||||
/>
|
||||
<span class="truncate">
|
||||
{{ \Carbon\Carbon::parse($guide['modified_date'])->locale(app()->getLocale())->diffForHumans() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</x-filament::button>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
# Trunçgil Teknoloji Web Sitesi Kurulum Kılavuzu
|
||||
|
||||
## 🎉 Web sitesi başarıyla oluşturuldu!
|
||||
|
||||
Modern, responsive ve dark mode destekli bir web sitesi hazır.
|
||||
|
||||
## 📋 Özellikler
|
||||
|
||||
✅ **Dinamik Menü Sistemi**
|
||||
- Admin panelinden yönetilebilir
|
||||
- `show_in_menu` işaretli sayfalar otomatik görünür
|
||||
- `parent_page` ile hiyerarşik menü yapısı
|
||||
- `sort_order` ile sıralama desteği
|
||||
- Dropdown menüler
|
||||
|
||||
✅ **Dark/Light Mode**
|
||||
- Otomatik tema algılama
|
||||
- Local storage ile tercih kaydetme
|
||||
- Smooth transitions
|
||||
- Her sayfada erişilebilir toggle buton
|
||||
|
||||
✅ **Modern Tasarım**
|
||||
- Tailwind CSS ile responsive design
|
||||
- Gradient backgrounds
|
||||
- Smooth animations
|
||||
- Custom scrollbar
|
||||
- Modern tipografi (Inter font)
|
||||
|
||||
✅ **SEO Friendly**
|
||||
- Meta title ve description desteği
|
||||
- Semantic HTML
|
||||
- Clean URLs
|
||||
- Open Graph hazır
|
||||
|
||||
## 🚀 Kurulum Adımları
|
||||
|
||||
### 1. NPM Paketlerini Kur ve Build Et
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 2. Veritabanını Kontrol Et
|
||||
|
||||
Eğer henüz migration'ları çalıştırmadıysanız:
|
||||
|
||||
```bash
|
||||
php artisan migrate
|
||||
```
|
||||
|
||||
### 3. Storage Link Oluştur
|
||||
|
||||
Featured image'ların görünmesi için:
|
||||
|
||||
```bash
|
||||
php artisan storage:link
|
||||
```
|
||||
|
||||
### 4. İlk Kullanıcı ve Sayfa Oluştur
|
||||
|
||||
Admin paneline giriş yapın:
|
||||
```
|
||||
https://citrus.truncgil.com/admin
|
||||
```
|
||||
|
||||
**İlk Sayfa Oluşturma:**
|
||||
1. Pages > Create New Page
|
||||
2. Başlık ve içerik girin
|
||||
3. "Homepage" checkbox'ını işaretleyin (anasayfa için)
|
||||
4. "Show in Menu" işaretleyin (menüde görünsün)
|
||||
5. Status: Published
|
||||
6. Save
|
||||
|
||||
**Menü Yapısı:**
|
||||
- Ana sayfa: `parent_page` boş, `sort_order: 0`
|
||||
- Alt sayfa: `parent_page` seçili, `sort_order: 1, 2, 3...`
|
||||
|
||||
## 📁 Oluşturulan Dosyalar
|
||||
|
||||
### Controllers
|
||||
- `app/Http/Controllers/PageController.php` - Sayfa kontrolcüsü
|
||||
|
||||
### Routes
|
||||
- `routes/web.php` - Web route'ları
|
||||
|
||||
### Views
|
||||
- `resources/views/layouts/app.blade.php` - Ana layout
|
||||
- `resources/views/components/navigation.blade.php` - Dinamik menü
|
||||
- `resources/views/components/footer.blade.php` - Footer
|
||||
- `resources/views/home.blade.php` - Anasayfa
|
||||
- `resources/views/page.blade.php` - Sayfa detay
|
||||
|
||||
### Assets
|
||||
- `resources/css/app.css` - Güncellenmiş CSS
|
||||
- `resources/js/app.js` - Dark mode JavaScript
|
||||
|
||||
## 🎨 Tasarım Özellikleri
|
||||
|
||||
### Renkler
|
||||
- **Primary:** Red (#DC2626)
|
||||
- **Secondary:** Orange (#EA580C)
|
||||
- **Dark Mode:** Gray scale
|
||||
|
||||
### Logo Kullanımı
|
||||
- Light mode: `truncgil-yatay.svg` / `truncgil-dikey.svg`
|
||||
- Dark mode: `truncgil-yatay-dark.svg` / `truncgil-dikey-dark.svg`
|
||||
|
||||
### Responsive Breakpoints
|
||||
- Mobile: < 768px
|
||||
- Tablet: 768px - 1024px
|
||||
- Desktop: > 1024px
|
||||
|
||||
## 📖 Kullanım
|
||||
|
||||
### Yeni Sayfa Ekleme
|
||||
|
||||
1. Admin Panel > Pages > Create
|
||||
2. Form alanlarını doldurun:
|
||||
- **Title:** Sayfa başlığı
|
||||
- **Slug:** URL (otomatik oluşur)
|
||||
- **Content:** Sayfa içeriği (Rich Editor)
|
||||
- **Excerpt:** Kısa açıklama
|
||||
- **Featured Image:** Öne çıkan görsel
|
||||
- **Status:** published (yayında olması için)
|
||||
- **Parent Page:** Boş = Ana menü, Dolu = Alt menü
|
||||
- **Sort Order:** Menüde sıralama (0, 1, 2...)
|
||||
- **Show in Menu:** ✅ İşaretli olmalı
|
||||
- **Is Homepage:** Sadece anasayfa için ✅
|
||||
|
||||
### Menü Yapısı Örneği
|
||||
|
||||
```
|
||||
Ana Sayfa (parent_id: null, sort_order: 0)
|
||||
Hakkımızda (parent_id: null, sort_order: 1)
|
||||
├─ Ekibimiz (parent_id: Hakkımızda, sort_order: 0)
|
||||
└─ Tarihçe (parent_id: Hakkımızda, sort_order: 1)
|
||||
Hizmetler (parent_id: null, sort_order: 2)
|
||||
├─ Web Yazılım (parent_id: Hizmetler, sort_order: 0)
|
||||
└─ Mobil Uygulama (parent_id: Hizmetler, sort_order: 1)
|
||||
İletişim (parent_id: null, sort_order: 3)
|
||||
```
|
||||
|
||||
## 🔧 Geliştirme
|
||||
|
||||
### Development Mode
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Build for Production
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Clear Cache
|
||||
```bash
|
||||
php artisan cache:clear
|
||||
php artisan view:clear
|
||||
php artisan config:clear
|
||||
```
|
||||
|
||||
## 🎯 SEO Optimizasyonu
|
||||
|
||||
Her sayfa için:
|
||||
1. **Meta Title:** 60 karakter max
|
||||
2. **Meta Description:** 160 karakter max
|
||||
3. **Slug:** URL-friendly (otomatik oluşur)
|
||||
4. **Alt Text:** Görsellere açıklayıcı text
|
||||
|
||||
## 🌐 Tarayıcı Desteği
|
||||
|
||||
- ✅ Chrome (son 2 versiyon)
|
||||
- ✅ Firefox (son 2 versiyon)
|
||||
- ✅ Safari (son 2 versiyon)
|
||||
- ✅ Edge (son 2 versiyon)
|
||||
|
||||
## 📱 Mobil Responsive
|
||||
|
||||
Tüm sayfalar mobil uyumlu:
|
||||
- Touch-friendly menü
|
||||
- Responsive images
|
||||
- Mobile-optimized typography
|
||||
- Hamburger menu
|
||||
|
||||
## 🎨 Özelleştirme
|
||||
|
||||
### Logo Değiştirme
|
||||
Logolar `public/logos/` klasöründe. Değiştirmek için:
|
||||
1. Aynı isimde yeni logo yükleyin
|
||||
2. Cache'i temizleyin
|
||||
|
||||
### Renk Değiştirme
|
||||
`resources/css/app.css` dosyasında Tailwind theme ayarları
|
||||
|
||||
### İletişim Bilgileri
|
||||
`resources/views/components/footer.blade.php` dosyasında düzenleyin
|
||||
|
||||
## 🐛 Sorun Giderme
|
||||
|
||||
### Stiller Yüklenmiyorsa
|
||||
```bash
|
||||
npm run build
|
||||
php artisan cache:clear
|
||||
```
|
||||
|
||||
### Dark Mode Çalışmıyorsa
|
||||
Browser console'da:
|
||||
```javascript
|
||||
localStorage.clear()
|
||||
```
|
||||
Sayfayı yenileyin.
|
||||
|
||||
### Menü Görünmüyorsa
|
||||
Kontrol edin:
|
||||
- ✅ Status: published
|
||||
- ✅ Show in Menu: checked
|
||||
- ✅ Parent sayfalar da published
|
||||
|
||||
## 📞 Destek
|
||||
|
||||
Sorularınız için:
|
||||
- Email: info@truncgil.com
|
||||
- Admin Panel: /admin
|
||||
|
||||
## 🎉 Başarılar!
|
||||
|
||||
Web siteniz hazır! Citrus admin panelinden içerik yönetmeye başlayabilirsiniz.
|
||||
|
||||
Reference in New Issue
Block a user