first commit
This commit is contained in:
Beyhan Oğur
215
TEMPLATE-ASSETS.md
Normal file
215
TEMPLATE-ASSETS.md
Normal file
@@ -0,0 +1,215 @@
|
||||
# 📦 Template Assets Kurulum Kılavuzu
|
||||
|
||||
Softora template'i Next.js projesine başarıyla entegre edildi!
|
||||
|
||||
## ⚠️ Önemli: Assets Dosyalarını Kopyalayın
|
||||
|
||||
Template'inizin düzgün çalışması için aşağıdaki dosyaları Next.js `public` klasörüne kopyalamanız gerekiyor:
|
||||
|
||||
### 1. CSS Dosyaları
|
||||
|
||||
Original template'inizden şu CSS dosyalarını kopyalayın:
|
||||
|
||||
```bash
|
||||
# Kaynak klasör (template'iniz)
|
||||
Temp/assets/css/
|
||||
|
||||
# Hedef klasör (Next.js projesi)
|
||||
public/assets/css/
|
||||
|
||||
# Kopyalanacak dosyalar:
|
||||
- animate.css
|
||||
- tabler-icons.min.css
|
||||
- bootstrap.min.css
|
||||
- swiper-bundle.min.css
|
||||
```
|
||||
|
||||
### 2. JavaScript Dosyaları
|
||||
|
||||
```bash
|
||||
# Kaynak klasör
|
||||
Temp/assets/js/
|
||||
|
||||
# Hedef klasör
|
||||
public/assets/js/
|
||||
|
||||
# Kopyalanacak dosyalar:
|
||||
- bootstrap.bundle.min.js
|
||||
- slideToggle.min.js
|
||||
- swiper-bundle.min.js
|
||||
- jarallax.min.js
|
||||
- index.js
|
||||
- cookiealert.js
|
||||
- imagesloaded.pkgd.min.js
|
||||
- isotope.pkgd.min.js
|
||||
- wow.min.js
|
||||
- active.js
|
||||
```
|
||||
|
||||
### 3. Images & Icons
|
||||
|
||||
```bash
|
||||
# Kaynak klasör
|
||||
Temp/assets/img/
|
||||
|
||||
# Hedef klasör
|
||||
public/assets/img/
|
||||
|
||||
# Kopyalanacak klasörler:
|
||||
- core-img/ (logo, shapes, favicons vb.)
|
||||
- bg-img/ (background images)
|
||||
- partner-img/ (partner logos)
|
||||
```
|
||||
|
||||
### 4. Style CSS (Ana stil dosyası)
|
||||
|
||||
```bash
|
||||
# Kaynak dosya
|
||||
Temp/style.css
|
||||
|
||||
# Hedef
|
||||
public/style.css
|
||||
```
|
||||
|
||||
## 🚀 Hızlı Kurulum Komutu
|
||||
|
||||
Terminal'de şu komutları çalıştırın:
|
||||
|
||||
```bash
|
||||
# Public klasörünü oluştur (zaten var)
|
||||
cd /Users/beyhan/Projeler/JS/next-dj
|
||||
|
||||
# Assets klasörünü oluştur
|
||||
mkdir -p public/assets/css
|
||||
mkdir -p public/assets/js
|
||||
mkdir -p public/assets/img/core-img
|
||||
mkdir -p public/assets/img/bg-img
|
||||
mkdir -p public/assets/img/partner-img
|
||||
|
||||
# Template klasöründen dosyaları kopyala (PATH'inizi güncelleyin)
|
||||
# Örnek:
|
||||
cp -r /path/to/Temp/assets/css/* public/assets/css/
|
||||
cp -r /path/to/Temp/assets/js/* public/assets/js/
|
||||
cp -r /path/to/Temp/assets/img/* public/assets/img/
|
||||
cp /path/to/Temp/style.css public/style.css
|
||||
```
|
||||
|
||||
## ✅ Yapılan Entegrasyonlar
|
||||
|
||||
### 1. Server-Side Rendering
|
||||
- Ana sayfa server component olarak düzenlendi
|
||||
- Session bilgisi server tarafında alınıyor
|
||||
- SEO friendly ve hızlı ilk yükleme
|
||||
|
||||
### 2. Session-Aware Template
|
||||
- Header'da kullanıcı durumuna göre navigasyon
|
||||
- Login/Logout butonları dinamik
|
||||
- Dashboard ve Profile linkleri (login olduysa)
|
||||
- Register/Login linkleri (login olmadıysa)
|
||||
|
||||
### 3. Next.js Route Entegrasyonu
|
||||
Template'deki tüm linkler Next.js route'larına dönüştürüldü:
|
||||
|
||||
| Original | Next.js Route |
|
||||
|----------|---------------|
|
||||
| `index.html` | `/` |
|
||||
| `about-us.html` | `/about` |
|
||||
| `contact.html` | `/contact` |
|
||||
| N/A | `/auth/login` |
|
||||
| N/A | `/auth/register` |
|
||||
| N/A | `/dashboard` |
|
||||
| N/A | `/profile` |
|
||||
|
||||
### 4. Component Yapısı
|
||||
|
||||
```
|
||||
app/
|
||||
├── layout.tsx (Assets yükleme + AuthProvider)
|
||||
├── page.tsx (Ana sayfa - Server Component)
|
||||
│
|
||||
components/
|
||||
├── Header.tsx (Navbar + Session-aware)
|
||||
└── PreloaderAndSearch.tsx (Preloader + Search popup)
|
||||
```
|
||||
|
||||
### 5. Bootstrap & Interactive Features
|
||||
|
||||
Tüm Bootstrap component'leri ve JavaScript features korundu:
|
||||
- ✅ Dropdown menüler
|
||||
- ✅ Tabs (Services section)
|
||||
- ✅ Modal (Video popup)
|
||||
- ✅ Swiper slider
|
||||
- ✅ WOW animations
|
||||
- ✅ Jarallax parallax
|
||||
- ✅ Cookie alert
|
||||
- ✅ Scroll to top
|
||||
- ✅ Search popup
|
||||
|
||||
## 🎨 Özelleştirmeler
|
||||
|
||||
### Template'e Eklenen Auth Features
|
||||
|
||||
1. **Hero Section CTA**
|
||||
- Session varsa: "Go to Dashboard"
|
||||
- Session yoksa: "Get Started" (Register'a yönlendirir)
|
||||
|
||||
2. **About Section**
|
||||
- Authentication özelliklerine göre düzenlendi
|
||||
- Social login, Email verification vb. vurgulandı
|
||||
|
||||
3. **Services Section**
|
||||
- IT Services → Authentication Services
|
||||
- 3 tab: Secure Auth, Email Verification, Social Auth
|
||||
|
||||
4. **Bottom CTA**
|
||||
- Session varsa: Hoş geldin mesajı + Dashboard linki
|
||||
- Session yoksa: Kayıt ol mesajı + Register linki
|
||||
|
||||
5. **Footer**
|
||||
- Auth sayfalarına linkler
|
||||
- Dashboard/Profile linkleri (session varsa)
|
||||
- Documentation linkleri
|
||||
|
||||
## 🔧 Sorun Giderme
|
||||
|
||||
### Stil gözükmüyorsa:
|
||||
1. `public/` klasörüne assets kopyalandı mı kontrol edin
|
||||
2. Browser console'da 404 hatası var mı bakın
|
||||
3. Dosya path'leri doğru mu kontrol edin
|
||||
|
||||
### JavaScript çalışmıyorsa:
|
||||
1. Tüm JS dosyaları `public/assets/js/` içinde mi?
|
||||
2. Browser console'da JavaScript hataları var mı?
|
||||
3. `layout.tsx` içindeki script tag'leri yüklendi mi?
|
||||
|
||||
### Template'e yeni bir sayfa eklemek:
|
||||
```bash
|
||||
# 1. app klasöründe yeni klasör oluştur
|
||||
mkdir app/about
|
||||
|
||||
# 2. page.tsx oluştur
|
||||
# 3. Template'den ilgili HTML'i kopyala ve Next.js formatına çevir
|
||||
# 4. Header ve Footer ekle (import from components)
|
||||
```
|
||||
|
||||
## 📝 Notlar
|
||||
|
||||
- Template'in tüm orijinal tasarımı korundu
|
||||
- Sadece static HTML yerine Next.js component'leri kullanıldı
|
||||
- Authentication özellikleri template'e entegre edildi
|
||||
- Server-side rendering ile SEO ve performance iyileştirildi
|
||||
- Session management ile dynamic content
|
||||
|
||||
## 🎉 Sonuç
|
||||
|
||||
Template başarıyla Next.js'e dönüştürüldü ve authentication sistemi ile entegre edildi!
|
||||
|
||||
**Assets dosyalarını kopyaladıktan sonra:**
|
||||
```bash
|
||||
npm run dev
|
||||
# veya
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Ardından `http://localhost:3000` adresine gidin ve template'inizi görün! 🚀
|
||||
|
||||
Reference in New Issue
Block a user