library with grid

app/Nova/Episode.php

@@ -54,6 +54,8 @@ class Episode extends Resource
                                      'type'          => 'podcast_episode',
                                      'language_code' => $model->podcast->language_code,
                                      'value'         => null,
+                                     'excerpt'       => $model->data['description'],
+                                     'subtitle'      => $model->data['description'],
                                  ]);
             $libraryItem->syncTagsWithType(is_array($request->tags) ? $request->tags : str($request->tags)->explode('-----'),
                 'library_item');

package.json

@@ -11,6 +11,7 @@
         "@alpinejs/focus": "^3.11.1",
         "@alpinejs/intersect": "^3.11.1",
         "@tailwindcss/forms": "^0.5.2",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@tailwindcss/typography": "^0.5.0",
         "alpinejs": "^3.0.6",
         "autoprefixer": "^10.4.7",

resources/views/livewire/library/library-table.blade.php

@@ -49,7 +49,7 @@
                         <div wire:key="library_item_{{ $libraryItem->id }}"
                              class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-sm">
                             <div class="flex-shrink-0">
-                                <a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
+                                <a href="{{ route('libraryItem.view', ['libraryItem' => $libraryItem]) }}">
                                     <img class="h-48 w-full object-contain"
                                          src="{{ $libraryItem->getFirstMediaUrl('main') }}"
                                          alt="{{ $libraryItem->name }}">
@@ -61,10 +61,10 @@
                                     <div
                                         class="text-amber-500">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
                                     </p>
-                                    <a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
+                                    <a href="{{ route('libraryItem.view', ['libraryItem' => $libraryItem]) }}"
                                        class="mt-2 block">
                                         <p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
-                                        <p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
+                                        <p class="mt-3 text-base text-gray-300 line-clamp-3">{{ $libraryItem->excerpt }}</p>
                                     </a>
                                 </div>
                                 <div class="mt-6 flex items-center">

resources/views/livewire/news/article-overview.blade.php

@@ -29,7 +29,7 @@
                                 <a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
                                    class="mt-2 block">
                                     <p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
-                                    <p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
+                                    <p class="mt-3 text-base text-gray-300 line-clamp-3">{{ $libraryItem->excerpt }}</p>
                                 </a>
                             </div>
                             <div class="mt-6 flex items-center">

resources/views/livewire/news/intern-article-view.blade.php

@@ -63,14 +63,15 @@
                     <div
                         class="prose prose-invert mx-auto mt-5 text-gray-100 lg:col-start-1 lg:row-start-1 lg:max-w-none">
                         <div class="flex flex-col space-y-1">
-                            @if(str($libraryItem->value)->contains('http'))
+                            @if($libraryItem->type !== 'markdown_article' && str($libraryItem->value)->contains('http'))
                                 <x-button lg amber :href="$libraryItem->value" target="_blank">
                                     <i class="fa fa-thin fa-book-open mr-2"></i>
                                     {{ __('Open') }}
                                 </x-button>
                             @endif
                             @if($libraryItem->type === 'downloadable_file')
-                                <x-button lg amber :href="$libraryItem->getFirstMediaUrl('single_file')" target="_blank">
+                                <x-button lg amber :href="$libraryItem->getFirstMediaUrl('single_file')"
+                                          target="_blank">
                                     <i class="fa fa-thin fa-download mr-2"></i>
                                     {{ __('Download') }}
                                 </x-button>

routes/web.php

@@ -17,6 +17,10 @@ Route::middleware([])
      ->get('/news/{libraryItem:slug}', \App\Http\Livewire\News\InternArticleView::class)
      ->name('article.view');
 
+Route::middleware([])
+     ->get('/library-item/{libraryItem:slug}', \App\Http\Livewire\News\InternArticleView::class)
+     ->name('libraryItem.view');
+
 Route::middleware([])
      ->get('/my-meetups', \App\Http\Livewire\Profile\Meetups::class)
      ->name('profile.meetups');

tailwind.config.js

@@ -104,6 +104,7 @@ module.exports = {
     },
     plugins:  [
         require('@tailwindcss/forms'),
-        require('@tailwindcss/typography')
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/line-clamp'),
     ],
 }

yarn.lock

@@ -57,6 +57,11 @@
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+  integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+
 "@tailwindcss/typography@^0.5.0":
   version "0.5.9"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"