Moved to blade components

This commit is contained in:
2020-10-12 16:52:48 +05:00
parent d180f2a885
commit 118567491a
11 changed files with 316 additions and 309 deletions

View File

@@ -1,6 +1,6 @@
@extends('layouts.app')
<x-layout>
@section('meta')
<x-slot name="meta">
<title>{{$article->meta['title']}} | Karudhaas</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
@@ -15,9 +15,9 @@
<meta property="og:url" content="https://karudhaas.net/" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="{{$article->featured_image}}">
@endsection
</x-slot>
@section('content')
<div>
<div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
<div class="absolute left-0 bottom-0 w-full h-full z-10"
@@ -94,4 +94,4 @@
</div>
</div>
</div>
@endsection
</x-layout>

View File

@@ -0,0 +1,31 @@
<footer class="border-t mt-10">
<div class="container mx-auto flex flex-col items-center justify-center pt-10">
<div class="flex justify-center pb-8">
<img class="w-12 h-12" src="/images/icon.png" />
</div>
<ul class="flex flex-wrap font-medium text-gray-700 pb-8 justify-center max-w-xl">
<li class="pb-4 md:pb-2 px-4 md:px-2">
<a href="/preview" class="hover:underline">Preview</a>
</li>
<li>
<a href="/about" class="hover:underline">About</a>
</li>
<li class="pb-4 md:pb-2 px-4 md:px-2">
<a href="/privacy" class="hover:underline">Privacy</a>
</li>
</ul>
<news-letter></news-letter>
<div class="py-8 flex">
<p class="text-gray-600">Made with ❤️ in Maldives. By <span><a href="https://github.com/jinas123"
class="text-blue-600 hover:underline">@jinas123</a>, <a href="https://github.com/Dharisd"
class="text-blue-600 hover:underline">@dharisd</a>, <a href="https://github.com/shihaamabr"
class="text-blue-600 hover:underline">@shihaamabr</a>
</span></p>
</div>
</div>
</footer>

View File

@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/images/icon.png" />
@yield('meta')
{{$meta ?? ''}}
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
@@ -24,10 +24,16 @@
<main class="mt-12">
@yield('content')
{{ $slot }}
</main>
@include('partials.footer')
<x-footer>
<x-slot name="credits">
<a href="https://github.com/jinas123" class="text-blue-600 hover:underline">@jinas123</a>,
<a href="https://github.com/Dharisd" class="text-blue-600 hover:underline">@dharisd</a>,
<a href="https://github.com/shihaamabr" class="text-blue-600 hover:underline">@shihaamabr</a>
</x-slot>
</x-footer>
</div>

View File

@@ -1,28 +1,28 @@
@extends('layouts.app')
<x-layout>
@section('meta')
<title>Karudhaas</title>
<x-slot name="meta">
<title>Karudhaas</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/ogi.jpg">
@endsection
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/ogi.jpg">
</x-slot>
@section('content')
<todays-pick></todays-pick>
<todays-pick></todays-pick>
<discover-topics></discover-topics>
<discover-topics></discover-topics>
<available-sources></available-sources>
<available-sources></available-sources>
<recent-stories></recent-stories>
@endsection
<recent-stories></recent-stories>
</x-layout>

View File

@@ -1,74 +1,73 @@
@extends('layouts.app')
@section('content')
@if(!isset($articles))
<x-layout>
@if(!isset($articles))
<div class="mb-10">
<div>
<h3
class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 mr-3 MvAamu"
style="direction: rtl;"
>
ރައްކާކުރެވިފައި އެއްވެސް ލިޔުމެއް ނެއް
</h3>
</div>
</div>
@else
<div class="mb-10">
<div>
<h3
class="text-gray-800 font-bold text-3xl text-center mt-3 mb-2 mr-3 MvAamu"
style="direction: rtl;"
class="text-gray-800 font-bold text-3xl text-right mt-3 mb-2 mr-3 MvAamu"
>
ރައްކާކުރެވިފައި އެއްވެސް ލިޔުމެއް ނެއް
ރައްކާ ކުރެވިފައިާ ލިޔުންތައް
</h3>
</div>
</div>
@else
<div class="mb-10">
<div>
<h3
class="text-gray-800 font-bold text-3xl text-right mt-3 mb-2 mr-3 MvAamu"
>
ރައްކާ ކުރެވިފައިާ ލިޔުންތައް
</h3>
</div>
<div class="flex justify-end mt-5">
<!-- post cards -->
<div class="w-full lg:w-2/3">
@foreach($articles as $article)
<div>
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}"
class="w-full flex mb-10 shadow rounded-lg"
>
<div
class="bg-white rounded px-4 flex flex-col flex-grow justify-between leading-normal"
<div class="flex justify-end mt-5">
<!-- post cards -->
<div class="w-full lg:w-2/3">
@foreach($articles as $article)
<div>
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}"
class="w-full flex mb-10 shadow rounded-lg"
>
<div>
<div
class="mt-5 text-gray-700 font-semibold text-1xl mb-2 text-right MvTyper hover:underline"
style="direction:rtl;"
>
{{$article->title}}
</div>
<div
class="flex items-center justify-end mt-3 mb-3"
>
<p
class="font-semibold text-gray-700 text-sm capitalize MvTyper py-4"
<div
class="bg-white rounded px-4 flex flex-col flex-grow justify-between leading-normal"
>
<div>
<div
class="mt-5 text-gray-700 font-semibold text-1xl mb-2 text-right MvTyper hover:underline"
style="direction:rtl;"
>
{{$article->source->name}}
</p>
<p class="text-gray-600 text-xs ml-1 MvTyper" style="direction: rtl;">
{{$article->title}}
</div>
{{$article->published_date->locale('dv')->isoFormat('Do MMMM YYYY')}}
&mdash;
</p>
<div
class="flex items-center justify-end mt-3 mb-3"
>
<p
class="font-semibold text-gray-700 text-sm capitalize MvTyper py-4"
>
{{$article->source->name}}
</p>
<p class="text-gray-600 text-xs ml-1 MvTyper" style="direction: rtl;">
{{$article->published_date->locale('dv')->isoFormat('Do MMMM YYYY')}}
&mdash;
</p>
</div>
</div>
</div>
</div>
</a>
</div>
@endforeach
</a>
</div>
@endforeach
</div>
</div>
</div>
</div>
@endif
@endif
</x-layout>
@endsection

View File

@@ -1,6 +1,6 @@
@extends('layouts.app')
<x-layout>
@section('meta')
<x-slot name="meta">
<title>Karudhaas | Namespaces</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
@@ -15,9 +15,8 @@
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
@endsection
</x-slot>
@section('content')
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10">
@foreach (config('karudhaas.topic_filters') as $key => $namespace)
@@ -31,4 +30,5 @@
</div>
@endsection
</x-layout>

View File

@@ -1,7 +1,5 @@
@extends('layouts.app')
@section('content')
<topic-filter topics="{{implode(',',$namespace['keys']) }}"
label="{{$namespace['dv_name']}}" :per_page="12" color="border-{{$namespace['color']}}-500">
</topic-filter>
@endsection
<x-layout>
<topic-filter topics="{{implode(',',$namespace['keys']) }}" label="{{$namespace['dv_name']}}" :per_page="12"
color="border-{{$namespace['color']}}-500">
</topic-filter>
</x-layout>

View File

@@ -1,111 +1,112 @@
@extends('layouts.app')
<x-layout>
<x-slot name="meta">
<title>Karudhaas</title>
@section('meta')
<title>Karudhaas</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
<link rel="icon" type="image/png" href="/images/icon.png" />
@endsection
@section('content')
<div class="flex-1 overflow-hidden px-6 md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20 leading-relaxed text-lg" id="top">
<h1 class="mb-10 text-4xl font-bold text-gray-700 leading-2">What is Karudhaas App?</h1>
<div class="border-b bor"></div>
<p class="my-6 text-gray-800">
Karudhaas is a Web and a mobile app that helps you Discover Stories, Daily news, and inspirations. All with one app.
The app filters out articles from various news sites and aggregates them according to the respective article topics
and its source. We are planning to bring some major feature upgrades later on.
</p>
<div class="mb-2 flex flex-col">
<p class="text-gray-700">Press the icon below to download the android app</p>
<a href="/download/android"><img class="h-16 w-16" src="/images/icon.png"></a>
</div>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-2">Late to go somewhere? We got you covered!</h1>
<p class="my-6 text-gray-800">
Karudhaas Also lets you save articles for later reading.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Got a favorite news site you check every morning?
</h1>
<p class="my-6 text-gray-800">
Karudhaas Also lets you filter out articles by your desired news source.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Contents</h1>
<p class="my-6 text-gray-800">
All the contents, logos, and images listed on the site are own by the respectful news site.
We respect the news outlets and their way of earning so we will only be showing a summary partial content of the
article. users still have to visit the original link to view the full article.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Collection</h1>
<div class="mb-5">
<div class="flex flex-wrap justify-center">
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player
src="https://assets8.lottiefiles.com/datafiles/98a3d0add75fc3c86f6d6f9b148c111e/Newspaper animation.json"
background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Articles</h1>
<h1 class="font-bold text-xl text-gray-700">{{$total_articles}}</h1>
</div>
</div>
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_TkGfat.json" background="transparent"
speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Topics</h1>
<h1 class="font-bold text-xl text-gray-700">{{$total_topics}}</h1>
</div>
</div>
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_94KptK.json" background="transparent"
speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Sources</h1>
<h1 class="font-bold text-xl text-gray-700">{{$sources->count()}}</h1>
</div>
</div>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
</x-slot>
<div class="flex-1 overflow-hidden px-6 md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20 leading-relaxed text-lg" id="top">
<h1 class="mb-10 text-4xl font-bold text-gray-700 leading-2">What is Karudhaas App?</h1>
<div class="border-b bor"></div>
<p class="my-6 text-gray-800">
Karudhaas is a Web and a mobile app that helps you Discover Stories, Daily news, and inspirations. All with one
app.
The app filters out articles from various news sites and aggregates them according to the respective article
topics
and its source. We are planning to bring some major feature upgrades later on.
</p>
<div class="mb-2 flex flex-col">
<p class="text-gray-700">Press the icon below to download the android app</p>
<a href="/download/android"><img class="h-16 w-16" src="/images/icon.png"></a>
</div>
</div>
<div class="mb-5">
<div class="flex flex-wrap justify-center">
@foreach ($sources as $source)
<a class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded p-10 mt-3"
href="{{route('sources.show', $source->slug)}}">
<img class="h-16 w-16" src="{{$source->logo}}" alt="{{$source->slug}}" />
</a>
@endforeach
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-2">Late to go somewhere? We got you covered!</h1>
<p class="my-6 text-gray-800">
Karudhaas Also lets you save articles for later reading.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Got a favorite news site you check every morning?
</h1>
<p class="my-6 text-gray-800">
Karudhaas Also lets you filter out articles by your desired news source.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Contents</h1>
<p class="my-6 text-gray-800">
All the contents, logos, and images listed on the site are own by the respectful news site.
We respect the news outlets and their way of earning so we will only be showing a summary partial content of the
article. users still have to visit the original link to view the full article.
</p>
<div class="border-b mb-5"></div>
<h1 class="mb-10 text-2xl font-bold text-gray-700 leading-none">Collection</h1>
<div class="mb-5">
<div class="flex flex-wrap justify-center">
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player
src="https://assets8.lottiefiles.com/datafiles/98a3d0add75fc3c86f6d6f9b148c111e/Newspaper animation.json"
background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Articles</h1>
<h1 class="font-bold text-xl text-gray-700">{{$total_articles}}</h1>
</div>
</div>
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_TkGfat.json" background="transparent"
speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Topics</h1>
<h1 class="font-bold text-xl text-gray-700">{{$total_topics}}</h1>
</div>
</div>
<div class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded px-10 mt-3">
<div class="flex flex-col items-center">
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_94KptK.json" background="transparent"
speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
<h1 class="font-bold text-xl text-gray-700">Sources</h1>
<h1 class="font-bold text-xl text-gray-700">{{$sources->count()}}</h1>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="flex flex-wrap justify-center">
@foreach ($sources as $source)
<a class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded p-10 mt-3"
href="{{route('sources.show', $source->slug)}}">
<img class="h-16 w-16" src="{{$source->logo}}" alt="{{$source->slug}}" />
</a>
@endforeach
</div>
@endsection
</div>
<div class="mb-5">
@section('js')
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
@endsection
</div>
@section('js')
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
@endsection
</x-layout>

View File

@@ -1,27 +0,0 @@
<footer class="border-t mt-10">
<div class="container mx-auto flex flex-col items-center justify-center pt-10">
<div class="flex justify-center pb-8">
<img class="w-12 h-12" src="/images/icon.png" />
</div>
<ul class="flex flex-wrap font-medium text-gray-700 pb-8 justify-center max-w-xl">
<li class="pb-4 md:pb-2 px-4 md:px-2">
<a href="/preview" class="hover:underline">Preview</a>
</li>
<li>
<a href="/about" class="hover:underline">About</a>
</li>
<li class="pb-4 md:pb-2 px-4 md:px-2">
<a href="/privacy" class="hover:underline">Privacy</a>
</li>
</ul>
<news-letter></news-letter>
<div class="py-8 flex">
<p class="text-gray-600">Made with ❤️ in Maldives. By <span><a href="https://github.com/jinas123" class="text-blue-600 hover:underline">@jinas123</a>, <a href="https://github.com/Dharisd" class="text-blue-600 hover:underline">@dharisd</a>, <a href="https://github.com/shihaamabr" class="text-blue-600 hover:underline">@shihaamabr</a>
</span></p>
</div>
</div>
</footer>

View File

@@ -1,26 +1,24 @@
@extends('layouts.app')
<x-layout>
<x-slot name="meta">
<title>Karudhaas | {{$source->slug}}</title>
@section('meta')
<title>Karudhaas | {{$source->slug}}</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
</x-slot>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
@endsection
<source-view :source="{{$source}}"></source-view>
@section('content')
<source-view :source="{{$source}}" ></source-view>
@endsection
@section('js')
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
@endsection
@section('js')
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
@endsection
</x-layout>

View File

@@ -1,71 +1,72 @@
@extends('layouts.app')
<x-layout>
@section('meta')
<title>Karudhaas | {{$topic->slug}}</title>
<x-slot name="meta">
<title>Karudhaas | {{$topic->slug}}</title>
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
@endsection
<meta name="description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name=" twitter:title" content="Karudhaas" />
<meta name="twitter:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta name="twitter:site" content="https://karudhaas.net" />
<meta name="twitter:image" content="/images/ogi.jpg">
<meta property="og:locale" content="mv" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Karudhaas">
<meta property="og:description" content="Discover Stories,Daily news and inspiration for maldivian readers." />
<meta property="og:url" content="https://karudhaas.net" />
<meta property="og:site_name" content="karudhaas.net" />
<meta property="og:image" content="/images/og.jpg">
</x-slot>
@section('content')
<div>
<section class="mx-auto max-w-6xl py-5">
<div class="flex flex-col">
<div class="flex flex-col md:flex-row justify-center items-center">
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
<div slot="middle-right" class="max-w-xs">
<div class="flex flex-col justify-center h-48 p-3">
<div class="text-5xl text-gray-800 mb-2 text-center MvAamu" style="font-weight: 100;">
{{$topic->name}}</div>
<div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
{{$topic->name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
<div>
<section class="mx-auto max-w-6xl py-5">
<div class="flex flex-col">
<div class="flex flex-col md:flex-row justify-center items-center">
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center">
<div slot="middle-right" class="max-w-xs">
<div class="flex flex-col justify-center h-48 p-3">
<div class="text-5xl text-gray-800 mb-2 text-center MvAamu" style="font-weight: 100;">
{{$topic->name}}</div>
<div class="text-sm my-3 MvTyper text-center leading-6" style="direction:rtl;">
{{$topic->name}} އާއިބެހޭ މަޢުލޫމާތުތަށް އެއްތަންކުރެވިފައި</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10 mt-8">
@foreach ($articles as $article)
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">
@foreach ($articles as $article)
<div class="transition-all ease-in-out duration-1000 flex flex-col justify-center mr-0 md:mr-2">
<div slot="bottom-left" class="max-w-xs">
<div class="p-5 shadow-md m-2 mt-4">
<div slot="bottom-left" class="max-w-xs">
<div class="p-5 shadow-md m-2 mt-4">
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}">
<img class="object-scale-down h-30" src="{{$article->featured_image}}"
alt="{{$article->meta['title']}}">
</a>
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}">
<img class="object-scale-down h-30" src="{{$article->featured_image}}"
alt="{{$article->meta['title']}}">
</a>
<div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
{{$article->source->name}}</div>
<div class="text-xs font-bold uppercase text-gray-500 text-right mt-1 mb-2 MvTyper">
{{$article->source->name}}</div>
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}">
<div class="text-md font-bold leading-7 mb-2 MvTyper text-right hover:underline">
{{$article->title}}</div>
</a>
<a
href="{{route('articles.show',['source' => $article->source->slug, 'guid' => $article->guid])}}">
<div class="text-md font-bold leading-7 mb-2 MvTyper text-right hover:underline">
{{$article->title}}</div>
</a>
</div>
</div>
</div>
@endforeach
</div>
@endforeach
</div>
</div>
</section>
</div>
@endsection
</section>
</div>
</x-layout>