Create custom layout for blogs

Raccoon254 · Aug 9, 2024 · 4bbeb22 · 4bbeb22
1 parent c6e0a74
commit 4bbeb22
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 12 deletions.
diff --git a/app/Livewire/BlogRenderer.php b/app/Livewire/BlogRenderer.php
@@ -5,9 +5,11 @@
 use Illuminate\View\View;
 use Livewire\Component;
 use App\Models\Blog;
+use Livewire\WithPagination;
 
 class BlogRenderer extends Component
 {
+    use WithPagination;
     public $blogs;
 
     public function mount(): void
@@ -18,6 +20,6 @@ public function mount(): void
 
     public function render(): View
     {
-        return view('livewire.blog-renderer');
+        return view('livewire.blog-renderer')->layout('blogs.guest');
     }
 }
diff --git a/app/Livewire/BlogView.php b/app/Livewire/BlogView.php
@@ -17,6 +17,6 @@ public function mount($slug): void
 
     public function render(): View
     {
-        return view('blogs.show')->layout('layouts.guest');
+        return view('blogs.show')->layout('blogs.guest');
     }
 }
diff --git a/resources/views/blogs/guest.blade.php b/resources/views/blogs/guest.blade.php
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+
+    <title>{{ config('app.name', 'Laravel') }}</title>
+    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+    <meta name="google-site-verification" content="lpki7YHn9zLN5Is7lsjRYSzHIXMSiEErVlY6ppajh2o" />
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <!-- Scripts -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
+</head>
+<body class="font-sans text-gray-900 antialiased">
+@include('layouts.navigation.logged-out')
+<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-10 mb-6 sm:mb-10 bg-gray-100">
+
+    <div class="w-full flex flex-col mt-6 mb-6 px-6 py-4 overflow-hidden sm:rounded-lg">
+        {{ $slot }}
+    </div>
+
+</div>
+@include('layouts.footer')
+</body>
+</html>
diff --git a/resources/views/livewire/blog-renderer.blade.php b/resources/views/livewire/blog-renderer.blade.php
@@ -1,23 +1,19 @@
-<div class="container mx-auto py-8">
-    <h1 class="text-4xl font-bold text-center mb-8">Blog Posts</h1>
-
-    <div class="grid grid-cols-1 gap-8">
+<div class="container mx-auto p-3">
+    <h1 class="text-4xl font-bold text-center mb-4">Blog Posts</h1>
+    <div class="flex flex-col rounded-lg gap-8">
         @foreach($blogs as $blog)
-            <div class="bg-white w-full border-b border-blue-500 mb-8">
-                <div class="p-4 bg-red-600">
+            <div class="bg-white rounded-lg w-full border-b border-blue-500 mb-8">
+                <div class="p-4">
+                    <a href="{{ route('blog.show', $blog) }}" class="text-blue-500 mt-4 inline-block">Read More</a>
                     <h2 class="text-2xl font-bold text-gray-800">{{ $blog->title }}</h2>
                     <p class="text-gray-600 text-sm mt-2">by {{ $blog->user->name }} on {{ $blog->created_at->format('F j, Y') }}</p>
                     <div class="mt-4 text-gray-700 leading-relaxed">
                         {!! Str::limit($blog->content, 300) !!}
                     </div>
-                    <a href="{{ route('blog.show', $blog) }}" class="text-blue-500 btn mt-4 inline-block">Read More</a>
                 </div>
             </div>
         @endforeach
     </div>
-    <div>
-        {{ $blogs->links() }}
-    </div>
     <div class="text-center">
         @if($blogs->isEmpty())
             <p class="text-center text-gray-600">No blog posts available.</p>