truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement blog homepage widgets including hero carousel, category highlights, and sidebar components

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-24 10:37:32 +03:00
parent 2d6af94c88
commit b36ccf298b
4 changed files with 375 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/BlogController.php
+74
View File
@@ -110,6 +110,75 @@ class BlogController extends Controller
// Kategorileri al (filtreleme için)
$categories = class_exists(\App\Models\BlogCategory::class) ? \App\Models\BlogCategory::where('is_active', true)->orderBy('sort_order')->get() : collect();
// Elemis Widget'ları için veri hazırlığı
$carouselPosts = collect();
$highlightCategories = collect();
$popularPosts = collect();
$sidebarCategories = collect();
$tags = collect();
if (!$request->ajax()) {
if (class_exists(Blog::class)) {
// Karusel: Öne çıkarılan ya da en güncel 5 yazı
$carouselPosts = Blog::with(['category', 'author'])
->published()
->featured()
->latest('published_at')
->take(5)
->get();
if ($carouselPosts->isEmpty()) {
$carouselPosts = Blog::with(['category', 'author'])
->published()
->latest('published_at')
->take(5)
->get();
}
// Popüler Yazılar: En çok okunan 3 yazı
$popularPosts = Blog::with(['category', 'author'])
->published()
->orderBy('view_count', 'desc')
->take(3)
->get();
// Etiket Bulutu: Tüm yayınlanan yazılardaki benzersiz etiketler
$allTags = Blog::published()
->whereNotNull('tags')
->pluck('tags');
$tagsCollected = collect();
foreach ($allTags as $postTags) {
if (is_array($postTags)) {
foreach ($postTags as $tag) {
$tagsCollected->push($tag);
}
}
}
$tags = $tagsCollected->unique()->take(15);
}
if (class_exists(\App\Models\BlogCategory::class)) {
// Hoş Geldiniz bölümü altındaki 3'lü kategori vurgusu
$highlightCategories = \App\Models\BlogCategory::where('is_active', true)
->withCount('blogs')
->has('blogs')
->orderBy('sort_order')
->take(3)
->get();
if ($highlightCategories->count() < 3) {
$highlightCategories = \App\Models\BlogCategory::where('is_active', true)
->orderBy('sort_order')
->take(3)
->get();
}
// Sidebar Kategorileri: Yazı sayısıyla birlikte
$sidebarCategories = \App\Models\BlogCategory::where('is_active', true)
->withCount('blogs')
->orderBy('sort_order')
->get();
}
}
if ($request->ajax()) {
return view('blog.partials.posts', [
'posts' => $posts
@@ -122,6 +191,11 @@ class BlogController extends Controller
'settings' => $settings,
'posts' => $posts,
'categories' => $categories,
'carouselPosts' => $carouselPosts,
'highlightCategories' => $highlightCategories,
'popularPosts' => $popularPosts,
'sidebarCategories' => $sidebarCategories,
'tags' => $tags,
'renderedHeader' => $renderedHeader,
'renderedFooter' => $renderedFooter,
'meta' => [
resources/views/blog/index.blade.php
+185 -42
View File
@@ -2,33 +2,112 @@
@extends('layouts.site')
@section('content')
<section class="wrapper !bg-[#edf2fc]">
<div class="container !pt-10 !pb-36 xl:!pt-[4.5rem] lg:!pt-[4.5rem] md:!pt-[4.5rem] xl:!pb-40 lg:!pb-40 md:!pb-40 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ __('blog.meta-index-title') }}</h1>
<p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium">{{ __('blog.meta-index-description') }}</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-[rgba(246,247,249,1)] ">
<div class="container pt-10 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
<div class="wrapper !bg-[#ffffff]">
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
<!-- Carousel Section -->
@if(isset($carouselPosts) && $carouselPosts->count() > 0)
<div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-lg="2" data-items-md="1" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
@foreach($carouselPosts as $cPost)
@php
$cTitle = method_exists($cPost, 'translate') ? $cPost->translate('title') : $cPost->title;
$cExcerpt = method_exists($cPost, 'translate') ? $cPost->translate('excerpt') : ($cPost->excerpt ?? '');
$cCategoryName = $cPost->category ? $cPost->category->name : '';
$cCategorySlug = $cPost->category ? $cPost->category->slug : '';
$cDate = $cPost->published_at ? $cPost->published_at->format('d M Y') : $cPost->created_at->format('d M Y');
$cImage = $cPost->featured_image ? asset('storage/' . $cPost->featured_image) : asset('assets/img/photos/tb1.jpg');
$cUrl = route('blog.show', $cPost->slug);
@endphp
<div class="swiper-slide">
<figure class="overlay caption caption-overlay rounded !mb-0">
<a href="{{ $cUrl }}">
<img src="{{ $cImage }}" alt="{{ $cTitle }}" style="height: 380px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
@if($cCategoryName)
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">{{ $cCategoryName }}</span>
@endif
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-white" href="{{ $cUrl }}">{{ \Illuminate\Support\Str::limit($cTitle, 60) }}</a>
</h2>
<ul class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none !text-white !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $cDate }}</span>
</li>
@if($cPost->author)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<span class="!text-[#aab0bc]">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ $cPost->author->name }}</span>
</span>
</li>
@endif
</ul>
</figcaption>
</figure>
</div>
@endforeach
</div>
</div>
</div>
@endif
<!-- Welcome Banner Section -->
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="lg:w-full xl:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] font-semibold !text-center !mt-4 !mb-10">
Merhaba! Biz Trunçgil. Blogumuza hoş geldiniz. Burada web tasarım, yazılım geliştirme ve teknolojik yeniliklere dair ipuçlarını ve deneyimlerimizi paylaşıyoruz.
</h2>
</div>
</div>
<!-- 3-Column Highlights Section -->
@if(isset($highlightCategories) && $highlightCategories->count() > 0)
<div class="flex flex-wrap mx-[-15px] grid-view md:mx-[-20px] lg:mx-[-20px] xl:mx-[-25px] !mt-[-40px] xl:!mt-0 lg:!mt-0 !text-center !mb-16">
@foreach($highlightCategories as $index => $hCat)
@php
$images = ['assets/img/photos/f1.jpg', 'assets/img/photos/f2.jpg', 'assets/img/photos/f3.jpg'];
$hImg = asset($images[$index % 3]);
$hUrl = route('blog.index', ['category' => $hCat->slug]);
@endphp
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[25px] !mt-[40px] xl:!mt-0 lg:!mt-0">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $hUrl }}">
<img class="max-w-full h-auto" src="{{ $hImg }}" alt="{{ $hCat->name }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 !absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 !text-white">Keşfet</h5>
</figcaption>
</figure>
<div class="card-body p-5">
<h4 class="!mb-0">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $hUrl }}">{{ $hCat->name }}</a>
</h4>
</div>
</div>
</div>
@endforeach
</div>
@endif
<!-- Main Content & Sidebar Layout -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[4rem]">
<!-- Left Column: Posts Feed (8/12) -->
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!px-[20px] xl:!px-[35px] xl:!mt-0 lg:!mt-0">
<!-- Category Filter -->
@if(isset($categories) && $categories->count() > 0)
<div class="flex flex-wrap justify-center !mb-10 gap-2 blog-filter-menu">
<a href="#" class="category-filter-btn active !text-[0.8rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#e31e24] !bg-[#e31e24] !text-white hover:!bg-[#c8191f] hover:!border-[#c8191f] transition-colors" data-category="">
{{ __('blog.all_categories', ['default' => 'Tümü']) }}
<div class="flex flex-wrap justify-start !mb-10 gap-2 blog-filter-menu">
<a href="#" class="category-filter-btn active !text-[0.75rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#e31e24] !bg-[#e31e24] !text-white hover:!bg-[#c8191f] hover:!border-[#c8191f] transition-colors" data-category="">
Tümü
</a>
@foreach($categories as $category)
<a href="#" class="category-filter-btn !text-[0.8rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#eef2f6] !bg-[#eef2f6] !text-[#343f52] hover:!bg-[#e31e24] hover:!text-white hover:!border-[#e31e24] transition-colors" data-category="{{ $category->slug }}">
<a href="#" class="category-filter-btn !text-[0.75rem] !font-bold !uppercase !tracking-[0.02rem] !px-4 !py-2 !rounded-full !border !border-[#eef2f6] !bg-[#eef2f6] !text-[#343f52] hover:!bg-[#e31e24] hover:!text-white hover:!border-[#e31e24] transition-colors" data-category="{{ $category->slug }}">
{{ $category->name }}
</a>
@endforeach
@@ -39,12 +118,94 @@
@include('blog.partials.posts')
</div>
</div>
<!-- /column -->
<!-- Right Column: Sidebar (4/12) -->
<aside class="xl:w-4/12 lg:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full sidebar !mt-8 lg:!px-[20px] xl:!px-[35px] xl:!mt-0 lg:!mt-0">
<!-- Widget: About Me -->
<div class="widget">
<h4 class="widget-title !mb-3">Hakkımızda</h4>
<figure class="!rounded-[.4rem] !mb-4">
<img class="max-w-full h-auto !rounded-[.4rem]" src="{{ asset('assets/img/photos/f1.jpg') }}" alt="Trunçgil Teknoloji" style="height: 220px; object-fit: cover; width: 100%;">
</figure>
<p>Trunçgil Teknoloji, Gaziantep Teknopark bünyesinde web tasarım, özel yazılım geliştirme, yapay zeka çözümleri ve dijital dönüşüm süreçlerinde kurumlara premium ve yenilikçi çözümler sunan bir teknoloji ajansıdır.</p>
<nav class="nav social !mt-4">
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="https://twitter.com/truncgil" target="_blank"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="https://facebook.com/truncgil" target="_blank"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="https://instagram.com/truncgil" target="_blank"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="https://youtube.com/truncgil" target="_blank"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
</nav>
</div>
<!-- /.row -->
<!-- Widget: Popular Posts -->
@if(isset($popularPosts) && $popularPosts->count() > 0)
<div class="widget !mt-[40px]">
<h4 class="widget-title !mb-3">Popüler Yazılar</h4>
<ul class="m-0 p-0 after:content-[''] after:block after:h-0 after:clear-both after:invisible">
@foreach($popularPosts as $pPost)
@php
$pTitle = method_exists($pPost, 'translate') ? $pPost->translate('title') : $pPost->title;
$pDate = $pPost->published_at ? $pPost->published_at->format('d M Y') : $pPost->created_at->format('d M Y');
$pImage = $pPost->featured_image ? asset('storage/' . $pPost->featured_image) : asset('assets/img/photos/a4.jpg');
$pUrl = route('blog.show', $pPost->slug);
@endphp
<li class="clear-both block overflow-hidden !mt-4 first:!mt-0">
<figure class="!rounded-[.4rem] float-left w-14 !h-[4.5rem]">
<a href="{{ $pUrl }}">
<img class="!rounded-[.4rem]" src="{{ $pImage }}" alt="{{ $pTitle }}" style="height: 100%; object-fit: cover; width: 100%;" loading="lazy">
</a>
</figure>
<div class="!relative !ml-[4.25rem] !mb-0">
<h6 class="!mb-1">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $pUrl }}">{{ \Illuminate\Support\Str::limit($pTitle, 45) }}</a>
</h6>
<ul class="!text-[.75rem] !text-[#aab0bc] m-0 p-0 list-none">
<li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{{ $pDate }}</span></li>
</ul>
</div>
<!-- /.container -->
</li>
@endforeach
</ul>
</div>
@endif
<!-- Widget: Categories -->
@if(isset($sidebarCategories) && $sidebarCategories->count() > 0)
<div class="widget !mt-[40px]">
<h4 class="widget-title !mb-3">Kategoriler</h4>
<ul class="pl-0 list-none bullet-primary !text-inherit">
@foreach($sidebarCategories as $sCat)
<li class="relative !pl-[1rem] before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:left-0 before:!text-[#e31e24] before:font-SansSerif !mt-[.35rem] first:!mt-0">
<a class="!text-[#60697b] hover:!text-[#e31e24]" href="{{ route('blog.index', ['category' => $sCat->slug]) }}">
{{ $sCat->name }} ({{ $sCat->blogs_count }})
</a>
</li>
@endforeach
</ul>
</div>
@endif
<!-- Widget: Tags -->
@if(isset($tags) && $tags->count() > 0)
<div class="widget !mt-[40px]">
<h4 class="widget-title !mb-3">Etiketler</h4>
<ul class="pl-0 list-none tag-list">
@foreach($tags as $tag)
<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
<a href="{{ route('blog.index', ['tag' => $tag]) }}" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">
{{ $tag }}
</a>
</li>
@endforeach
</ul>
</div>
@endif
</aside>
</div>
</div>
</section>
@push('styles')
<style>
@@ -100,7 +261,6 @@ document.addEventListener('DOMContentLoaded', function() {
overlay.classList.add('active');
container.style.minHeight = container.offsetHeight + 'px'; // Maintain height during load
// Add AJAX header
fetch(url, {
headers: {
'X-Requested-With': 'XMLHttpRequest',
@@ -109,20 +269,12 @@ document.addEventListener('DOMContentLoaded', function() {
})
.then(response => response.text())
.then(html => {
// Update the posts container with new HTML
container.innerHTML = html;
// Re-append the overlay so it's ready for the next request
container.appendChild(overlay);
// Re-bind pagination links
bindPaginationLinks();
// Reinitialize any necessary plugins here (e.g. tooltips or image loaders if any)
// Update URL and History
window.history.pushState({html: html}, '', url);
// Smooth scroll to top of blog section
document.querySelector('.blog-filter-menu').scrollIntoView({ behavior: 'smooth', block: 'start' });
setTimeout(() => {
@@ -151,7 +303,6 @@ document.addEventListener('DOMContentLoaded', function() {
btn.addEventListener('click', function(e) {
e.preventDefault();
// Update active state
filterBtns.forEach(b => {
b.classList.remove('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
b.classList.add('!text-[#343f52]', '!bg-[#eef2f6]', '!border-[#eef2f6]');
@@ -160,29 +311,24 @@ document.addEventListener('DOMContentLoaded', function() {
this.classList.add('!text-white', '!bg-[#e31e24]', '!border-[#e31e24]');
const category = this.getAttribute('data-category');
// Construct URL
const url = new URL(window.location.href);
if (category) {
url.searchParams.set('category', category);
} else {
url.searchParams.delete('category');
}
// Reset to page 1 on category change
url.searchParams.delete('page');
fetchPosts(url.toString());
});
});
// Handle browser back/forward buttons
window.addEventListener('popstate', function(e) {
if (e.state && e.state.html) {
container.innerHTML = e.state.html;
container.appendChild(overlay);
bindPaginationLinks();
// Update active filter button based on URL
const urlParams = new URLSearchParams(window.location.search);
const currentCategory = urlParams.get('category') || '';
@@ -195,15 +341,12 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
} else {
// Fallback for full page reload for history items without state
window.location.reload();
}
});
// Initial binding of pagination links that are on page load
bindPaginationLinks();
// Set initial active state based on URL
const urlParams = new URLSearchParams(window.location.search);
const initialCategory = urlParams.get('category') || '';
if (initialCategory) {
resources/views/blog/partials/posts.blade.php
+40 -68
View File
@@ -1,4 +1,4 @@
<div class="blog classic-view !mt-[-7rem]">
<div class="blog classic-view !mt-0">
@forelse($posts as $index => $post)
@php
$title = method_exists($post, 'translate') ? $post->translate('title') : $post->title;
@@ -6,87 +6,69 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.webp');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/tb8.jpg');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : '';
$authorName = $post->author ? $post->author->name : 'Trunçgil';
@endphp
@if($index < 3)
{{-- İlk 3 blog yazısı classic-view formatında --}}
<article class="post !mb-8">
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
{{-- First 3 posts in Classic View --}}
<article class="post !mb-10">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 420px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link !text-[#e31e24]" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title !mt-1 !leading-[1.35] !mb-0">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ $excerpt }}</p>
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 220) }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none flex !mb-0">
<ul class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($authorName)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $authorName }}</span>
<span>{{ $authorName }}</span>
</a>
</li>
@endif
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $commentCount }} {{ __('blog.comments') }}</span>
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
@endif
@empty
<div class="text-center py-12">
<p class="text-[#74788d]">{{ __('blog.empty') }}</p>
<p class="text-[#aab0bc]">{{ __('blog.empty') }}</p>
</div>
@endforelse
</div>
<!-- /.blog -->
{{-- Subsequent posts in Grid View --}}
@if($posts->count() > 3)
<div class="blog itemgrid grid-view">
<div class="flex flex-wrap mx-[-15px] isotope xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
<div class="blog itemgrid grid-view !mt-10">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-8">
@foreach($posts as $index => $post)
@if($index >= 3)
@php
@@ -95,72 +77,62 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.webp');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/tb10.jpg');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : 'Trunçgil';
@endphp
<article class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale group">
<div class="item post xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] !px-[15px] max-w-full">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top overlay overlay-1 group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" style="height: 240px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">{{ __('blog.read_more') }}</h5>
</figcaption>
</figure>
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] max-md:pb-4">
@endif
<div class="card-body flex-[1_1_auto] !p-[1.75rem_1.75rem_1rem_1.75rem] max-md:!p-[40px_40px_20px]">
<div class="post-header !mb-[.9rem]">
@if($categoryName)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
<div class="post-category !mb-[.4rem] uppercase !tracking-[0.02rem] !text-[#aab0bc]">
<a href="{{ route('blog.index', ['category' => $categorySlug]) }}" class="hover !text-[#e31e24] category-link" data-category="{{ $categorySlug }}" rel="category">{{ $categoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">{{ $title }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="!relative">
<p>{{ \Illuminate\Support\Str::limit($excerpt, 120) }}</p>
<p>{{ \Illuminate\Support\Str::limit(strip_tags($excerpt), 120) }}</p>
</div>
<!-- /.post-content -->
</div>
<!--/.card-body -->
<div class="card-footer xl:!p-[1.25rem_1.75rem_1.25rem] lg:!p-[1.25rem_1.75rem_1.25rem] md:!p-[1.25rem_1.75rem_1.25rem] p-[18px_40px]">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none flex !mb-0">
<ul class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $publishedDate }}</span>
</li>
@if($post->allow_comments)
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $blogUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $commentCount }}
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#aab0bc] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ route('blog.index', ['author' => $post->author_id]) }}">
<span>{{ $authorName }}</span>
</a>
</li>
@endif
</ul>
<!-- /.post-meta -->
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</article>
<!-- /.post -->
</div>
@endif
@endforeach
</div>
<!-- /.isotope -->
</div>
<!-- /.blog itemgrid -->
@endif
{{-- Pagination --}}
@if(method_exists($posts, 'links') && $posts->hasPages())
<div class="mt-8 pagination-container">
<div class="mt-8 pagination-container flex justify-start">
{{ $posts->links() }}
</div>
@endif
resources/views/blog/show.blade.php
+54 -296
View File
@@ -7,43 +7,29 @@
<div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="post-header !mb-[.9rem]">
@if($post->category)
<div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] !mb-[0.4rem] text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="hover" rel="category">{{ $post->category->name }}</a>
<div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-[0.4rem] text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="hover !text-[#e31e24]" rel="category">{{ $post->category->name }}</a>
</div>
@endif
<!-- /.post-category -->
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">
{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}
</h1>
<ul class="!text-[0.8rem] !text-[#74788d] m-0 p-0 list-none !mb-5">
<ul class="!text-[0.8rem] !text-[#aab0bc] m-0 p-0 list-none !mb-5">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y') }}</span>
</li>
@if($post->author)
<li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[0.8rem] !text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#">
<span class="!text-[0.8rem] !text-[#aab0bc]">
<i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
<span>{{ __('blog.by') }} {{ $post->author->name }}</span>
</a>
</li>
@endif
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[0.8rem] !text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>
<span>{{ $post->comments_count ?? 0 }} {{ __('blog.comments') }}</span>
</a>
<span>{{ $post->author ? $post->author->name : 'Trunçgil' }}</span>
</span>
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-header -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section class="wrapper !bg-[#ffffff]">
@@ -51,358 +37,130 @@
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="blog single !mt-[-7rem]">
<div class="card">
@if($post->featured_image_url)
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@if($post->featured_image || $post->featured_image_url)
<figure class="card-img-top">
<img loading="lazy" src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
<img src="{{ $post->featured_image ? asset('storage/' . $post->featured_image) : $post->featured_image_url }}" alt="{{ $post->title }}" style="width: 100%; max-height: 520px; object-fit: cover;" loading="lazy">
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
<div class="classic-view">
<article class="post !mb-8">
<div class="relative !mb-5">
<div class="post-content">
<div class="relative !mb-5 post-content">
{!! method_exists($post, 'translate') ? $post->translate('content') : ($post->content ?? '') !!}
</div>
</div>
<!-- /.post-content -->
<div class="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
@if($post->tags && count($post->tags) > 0)
<div>
<ul class="pl-0 list-none tag-list !mb-0">
@foreach($post->tags as $tag)
<li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
<a href="{{ route('blog.index', ['tag' => $tag]) }}" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">
{{ $tag }}
</a>
<a href="{{ route('blog.index', ['tag' => $tag]) }}" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">{{ $tag }}</a>
</li>
@endforeach
</ul>
</div>
@endif
<div class="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
<div class="dropdown share-dropdown btn-group">
<button class="btn btn-sm btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b] active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> {{ __('blog.share') }}
</button>
<button class="btn btn-sm btn-red !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> Paylaş </button>
<div class="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode(method_exists($post, 'translate') ? $post->translate('title') : $post->title) }}" target="_blank">
<i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter
</a>
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" target="_blank">
<i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook
</a>
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->fullUrl()) }}" target="_blank">
<i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin
</a>
</div>
<!--/.dropdown-menu -->
</div>
<!--/.share-dropdown -->
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($post->title) }}" target="_blank"><i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter</a>
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" target="_blank"><i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook</a>
<a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->fullUrl()) }}" target="_blank"><i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin</a>
</div>
</div>
</div>
</div>
<!-- /.post-footer -->
</article>
<!-- /.post -->
</div>
<!-- /.classic-view -->
<hr>
@if($post->author)
<!-- Author Bio Widget -->
<div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
@if($post->author->avatar)
<img loading="lazy" class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
@else
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.webp') }}" loading="lazy">
@endif
<img class="rounded-[50%]" alt="image" src="{{ $post->author && $post->author->avatar ? asset('storage/' . $post->author->avatar) : asset('assets/img/avatars/u5.webp') }}" onerror="this.src='{{ asset('assets/img/avatars/u5.webp') }}'" loading="lazy">
</figure>
<div>
<h6>
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $post->author->name }}</a>
</h6>
<span class="!text-[0.75rem] !text-[#74788d] m-0 p-0 list-none">{{ $post->author->role ?? __('blog.author') }}</span>
<h6><a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $post->author ? $post->author->name : 'Trunçgil' }}</a></h6>
<span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">{{ $post->author && $post->author->role ? $post->author->role : 'Trunçgil Teknoloji Editörü' }}</span>
</div>
</div>
<div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
<a href="{{ route('blog.index', ['author' => $post->author->id]) }}" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> {{ __('blog.all_posts') }}
</a>
<a href="{{ route('blog.index', ['author' => $post->author_id]) }}" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> Tüm Yazıları</a>
</div>
</div>
<!-- /.author-info -->
<p>{{ method_exists($post, 'translate') ? $post->translate('excerpt') : ($post->excerpt ?? '') }}</p>
<p>Trunçgil Teknoloji editörleri tarafından kaleme alınmış bu makalede teknoloji, yazılım geliştirme ve dijital dönüşüm konularına dair güncel gelişmeleri incelediniz. Destek ve sorularınız için bizimle iletişime geçebilirsiniz.</p>
@if($post->author->social_links ?? false)
<nav class="nav social">
@if(isset($post->author->social_links['twitter']))
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $post->author->social_links['twitter'] }}" target="_blank">
<i class="text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i>
</a>
@endif
@if(isset($post->author->social_links['facebook']))
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $post->author->social_links['facebook'] }}" target="_blank">
<i class="text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i>
</a>
@endif
@if(isset($post->author->social_links['dribbble']))
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $post->author->social_links['dribbble'] }}" target="_blank">
<i class="text-[1rem] !text-[#e94d88] before:content-['\eaa2'] uil uil-dribbble"></i>
</a>
@endif
@if(isset($post->author->social_links['instagram']))
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $post->author->social_links['instagram'] }}" target="_blank">
<i class="text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i>
</a>
@endif
@if(isset($post->author->social_links['youtube']))
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="{{ $post->author->social_links['youtube'] }}" target="_blank">
<i class="text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i>
</a>
@endif
<!-- Social Links -->
<nav class="nav social !mt-4">
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://twitter.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://facebook.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://instagram.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
<a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://youtube.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
@endif
@endif
<hr>
<!-- Related Posts Section (You Might Also Like) -->
@if($relatedPosts && $relatedPosts->count() > 0)
<h3 class="!mb-6">{{ __('blog.you_might_also_like') }}</h3>
<hr>
<h3 class="!mb-6">Bunları da Beğenebilirsiniz</h3>
<div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
@foreach($relatedPosts as $relatedPost)
@foreach($relatedPosts as $rPost)
@php
$relatedTitle = method_exists($relatedPost, 'translate') ? $relatedPost->translate('title') : $relatedPost->title;
$relatedCategoryName = $relatedPost->category ? $relatedPost->category->name : '';
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.webp');
$relatedUrl = route('blog.show', $relatedPost->slug);
$relatedDate = $relatedPost->published_at ? $relatedPost->published_at->format('d M Y') : $relatedPost->created_at->format('d M Y');
$relatedCommentCount = $relatedPost->comments_count ?? 0;
$rTitle = method_exists($rPost, 'translate') ? $rPost->translate('title') : $rPost->title;
$rCategoryName = $rPost->category ? $rPost->category->name : '';
$rImageUrl = $rPost->featured_image ? asset('storage/' . $rPost->featured_image) : asset('assets/img/photos/tb4.jpg');
$rUrl = route('blog.show', $rPost->slug);
$rDate = $rPost->published_at ? $rPost->published_at->format('d M Y') : $rPost->created_at->format('d M Y');
@endphp
<div class="swiper-slide">
<article>
<figure class="overlay overlay-1 hover-scale group rounded !mb-5">
<a href="{{ $relatedUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}" loading="lazy">
<span class="bg"></span>
<a href="{{ $rUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $rImageUrl }}" alt="{{ $rTitle }}" style="height: 220px; object-fit: cover; width: 100%;" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">Devamını Oku</h5>
</figcaption>
</figure>
<div class="post-header !mb-[.9rem]">
@if($relatedPost->category)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $relatedPost->category->slug]) }}" class="hover" rel="category">{{ $relatedCategoryName }}</a>
@if($rPost->category)
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
<a href="{{ route('blog.index', ['category' => $rPost->category->slug]) }}" class="hover !text-[#e31e24]" rel="category">{{ $rCategoryName }}</a>
</div>
@endif
<!-- /.post-category -->
<h2 class="post-title h3 !mt-1 !mb-3">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $relatedUrl }}">{{ $relatedTitle }}</a>
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $rUrl }}">{{ \Illuminate\Support\Str::limit($rTitle, 50) }}</a>
</h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none !mb-0">
<li class="post-date inline-block">
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
<span>{{ $relatedDate }}</span>
</li>
<li class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
<a class="!text-[#74788d] hover:!text-[#e31e24] hover:!border-[#e31e24]" href="{{ $relatedUrl }}#comments">
<i class="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\ea54']"></i>{{ $relatedCommentCount }}
</a>
</li>
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none !mb-0">
<li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{{ $rDate }}</span></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
@endforeach
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
<div class="swiper-controls">
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"></div>
</div>
</div>
<!-- /.swiper-container -->
@endif
<hr>
@if($post->allow_comments)
<div id="comments" class="relative !m-0">
<h3 class="!mb-6">{{ $comments->count() }} {{ __('blog.comments') }}</h3>
@if($comments->count() > 0)
<ol id="singlecomments" class="commentlist m-0 p-0 list-none">
@foreach($comments as $comment)
<li class="comment !mt-8">
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $comment->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $comment->created_at->format('d M Y') }}
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /div -->
</div>
<!-- /div -->
<div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
<a href="#comment-form" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" onclick="document.getElementById('parent_id').value = {{ $comment->id }}">
<i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> {{ __('blog.reply') }}
</a>
</div>
<!-- /div -->
</div>
<!-- /.comment-header -->
<p>{{ $comment->content }}</p>
@if($comment->replies && $comment->replies->count() > 0)
<ul class="children">
@foreach($comment->replies as $reply)
<li class="comment !mt-8">
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $reply->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $reply->created_at->format('d M Y') }}
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /div -->
</div>
<!-- /div -->
<div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
<a href="#comment-form" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" onclick="document.getElementById('parent_id').value = {{ $comment->id }}">
<i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> {{ __('blog.reply') }}
</a>
</div>
<!-- /div -->
</div>
<!-- /.comment-header -->
<p>{{ $reply->content }}</p>
@if($reply->replies && $reply->replies->count() > 0)
<ul class="children">
@foreach($reply->replies as $nestedReply)
<li class="comment !mt-8">
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
<a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $nestedReply->name }}</a>
</h6>
<ul class="!text-[0.7rem] !text-[#74788d] m-0 p-0 list-none">
<li>
<i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
{{ $nestedReply->created_at->format('d M Y') }}
</li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /div -->
</div>
<!-- /div -->
<div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
<a href="#comment-form" class="btn btn-soft-ash btn-sm !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" onclick="document.getElementById('parent_id').value = {{ $comment->id }}">
<i class="uil uil-comments !mr-[0.3rem] before:content-['\ea56'] text-[.8rem]"></i> {{ __('blog.reply') }}
</a>
</div>
<!-- /div -->
</div>
<!-- /.comment-header -->
<p>{{ $nestedReply->content }}</p>
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ol>
@endif
</div>
<!-- /#comments -->
<hr>
<h3 class="!mb-3">{{ __('blog.share_thoughts') }}</h3>
<p class="!mb-7">{{ __('blog.comment_form_description') }}</p>
@if(session('success'))
<div class="alert alert-success !mb-4">
{{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="alert alert-danger !mb-4">
{{ session('error') }}
</div>
@endif
<form class="comment-form" id="comment-form" method="POST" action="{{ route('blog.comment.store', $post->slug) }}">
@csrf
<input type="hidden" name="parent_id" id="parent_id" value="">
<div class="form-floating relative !mb-4">
<input type="text" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-name" name="name" value="{{ old('name') }}" required>
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-name">{{ __('blog.name') }} *</label>
</div>
<div class="form-floating relative !mb-4">
<input type="email" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="c-email" name="email" value="{{ old('email') }}" required>
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="c-email">{{ __('blog.email') }} *</label>
</div>
<div class="form-floating relative !mb-4">
<textarea name="content" class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px" required>{{ old('content') }}</textarea>
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">{{ __('blog.comment') }} *</label>
</div>
@if($errors->any())
<div class="alert alert-danger !mb-4">
<ul class="!mb-0">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<button type="submit" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
{{ __('blog.submit') }}
</button>
</form>
<!-- /.comment-form -->
@endif
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.blog -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
@endsection