Merge pull request #38 from DanielRTRD/blog-update

Blog update

Author: dsbilling

config/app.php

@@ -67,7 +67,7 @@
     |
     */
 
-    'timezone' => 'UTC',
+    'timezone' => 'Europe/Oslo',
 
     /*
     |--------------------------------------------------------------------------

public/css/app.css

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=a9ed37c629f1a4ac6473",
-    "/css/app.css": "/css/app.css?id=14eed065634adcad8dc1"
+    "/js/app.js": "/js/app.js?id=7d3342683fd10d0407026f7fb32d3920",
+    "/css/app.css": "/css/app.css?id=d2df13f4a851ac8669232e0083d3bfe4"
 }

public/js/app.js

@@ -6,19 +6,19 @@
 		</div>
 	@endif
 	<div class="flex flex-col items-center">
-		<div class="grid w-full grid-cols-1 gap-8">
+		<div class="grid gap-4 pt-8 sm:gap-6 md:grid-cols-2 w-full">
 			@forelse($posts as $post)
-				<div class="w-full m-auto overflow-hidden border border-gray-200 rounded-lg shadow-lg cursor-pointer bg-gray-50 hover:bg-gray-100 group dark:bg-gray-800/50 hover:dark:bg-gray-800 dark:border-gray-700 dark:shadow-gray-100/10">
+				<div class="w-full h-full m-auto overflow-hidden border border-gray-200 rounded-lg shadow-lg cursor-pointer bg-gray-50/50 hover:bg-gray-50 dark:border-gray-700 group dark:bg-gray-800/50 hover:dark:bg-gray-800 dark:shadow-gray-100/10">
 					<a href="{{ route('blog.show', $post->slug) }}" class="block w-full h-full">
 						{{--<img alt="blog photo" src="{{ asset('img/daniel.jpg') }}" class="object-cover w-full max-h-28"/>--}}
 						<div class="w-full p-4 ">
 							<p class="text-sm font-medium text-orange-500 dark:text-orange-400">
-								{{ now()->subMonth(1) > $post->published_at ? $post->published_at->isoFormat('D MMMM YYYY') : $post->published_at->diffForHumans() }} &middot; {{ read_time($post->body)}} &middot;  {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }} {{ Str::plural('view', views($post)->count()) }} &middot; {{ $post->likes_count }} {{ Str::plural('like', $post->likes_count) }}
+								{{ now()->subMonth(1) > $post->published_at ? $post->published_at->isoFormat('D. MMMM YYYY') : $post->published_at->diffForHumans() }} &middot; {{ read_time($post->body)}} &middot;  {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }} {{ Str::plural('view', views($post)->count()) }} &middot; {{ $post->likes_count }} {{ Str::plural('like', $post->likes_count) }}
 							</p>
 							<p class="my-2 text-2xl font-semibold text-gray-800 sm:text-3xl dark:text-white">
 								{{ $post->title }}
 							</p>
-							<p class="text-sm font-light text-gray-400 dark:text-gray-300">
+							<p class="text-sm font-light text-gray-500 dark:text-gray-300">
 								{!! strip_tags(Str::of(Str::limit($post->body, 500))->markdown()) !!}
 							</p>
 						</div>
@@ -32,4 +32,4 @@
 			@endforelse
 		</div>
 	</div>
-</x-guest-layout>
+</x-guest-layout>

public/mix-manifest.json

@@ -1,10 +1,17 @@
 <x-guest-layout>
-    <div class="flex flex-col max-w-2xl mx-auto mt-6 sm:mt-0">
+    <div class="flex flex-col max-w-2xl mx-auto">
+
+        <a href="{{ route('blog.index') }}" class="text-base md:text-sm text-orange-400 hover:text-orange-300 font-bold no-underline mb-8">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            Back to the blog
+        </a>
 
         <h1 class="text-3xl font-semibold sm:text-4xl lg:text-5xl break-word"><x-gradient-text>{{ $post->title }}</x-gradient-text></h1>
 
-        <p class="text-sm font-medium text-orange-800/90 dark:text-orange-100/50">
-            {{ now()->subMonth(1) > $post->published_at ? $post->published_at->isoFormat('D MMMM YYYY') : $post->published_at->diffForHumans() }} &middot; {{ read_time($post->body)}} &middot;  {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }} {{ Str::plural('view', views($post)->count()) }}
+        <p class="text-sm font-medium text-gray-500">
+            {{ now()->subMonth(1) > $post->published_at ? $post->published_at->isoFormat('D. MMMM YYYY') : $post->published_at->diffForHumans() }} &middot; {{ read_time($post->body)}} &middot;  {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }} {{ Str::plural('view', views($post)->count()) }}
             {{--@foreach ($post->tags as $tag)
                 <span class="inline-flex items-center justify-center mr-1 font-semibold leading-none uppercase">{{ $tag->name }}</span>
             @endforeach--}}
@@ -26,12 +33,12 @@
                 <span class="inline-flex items-center justify-center px-2 py-1 mr-1 font-bold leading-none uppercase bg-gray-900 rounded text-orange-50 dark:text-gray-300 dark:bg-gray-700">{{ $tag->name }}</span>
             @endforeach
         </div>--}}
-        
+
         <article class="w-full mt-6 prose lg:mt-10 dark:prose-invert prose-a:text-orange-500 prose-h1:text-4xl">
             <x-markdown>{!! $post->body !!}</x-markdown>
         </article>
 
         <livewire:like :post="$post" />
-        
+
     </div>
 </x-guest-layout>

resources/views/blog/index.blade.php

@@ -23,7 +23,7 @@
                 <h4 class="mt-2 text-gray-500 dark:text-gray-400 text-md">My thoughts on what I'm building and learning.</h4>
                 <div class="grid gap-4 pt-8 sm:gap-6 md:grid-cols-2 lg:gap-8">
                     @foreach ($posts as $post)
-                        <div class="w-full h-full m-auto overflow-hidden border border-gray-200 rounded-lg shadow-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:border-gray-700 group dark:bg-gray-800/50 hover:dark:bg-gray-800 dark:shadow-gray-100/10">
+                        <div class="w-full h-full m-auto overflow-hidden border border-gray-100 rounded-lg shadow-lg cursor-pointer bg-gray-50/50 hover:bg-gray-50 dark:border-gray-700 group dark:bg-gray-800/50 hover:dark:bg-gray-800 dark:shadow-gray-100/10">
                             <a href="{{ route('blog.show', $post->slug) }}" class="block w-full h-full">
                                 {{--<img alt="blog photo" src="{{ asset('img/daniel.jpg') }}" class="object-cover w-full max-h-28"/>--}}
                                 <div class="w-full p-4">