mirror of
https://github.com/archtechx/laravel-tips.git
synced 2025-12-12 05:14:04 +00:00
wip
This commit is contained in:
Lars Klopstra
parent
8623a25b79
commit
28555af28f
6 changed files with 96 additions and 137 deletions
37
resources/views/components/author-card.blade.php
Normal file
37
resources/views/components/author-card.blade.php
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
@props(['tip'])
|
||||||
|
|
||||||
|
<div class="flex w-full p-6 space-x-6 bg-gray-50 rounded-2xl">
|
||||||
|
<a href="{{ $tip->author->profile_url }}" target="_blank">
|
||||||
|
<img class="bg-gray-200 rounded-full w-14 h-14" src="{{ asset($tip->author->avatar) }}"
|
||||||
|
alt="{{ $tip->author->name }}">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<aside class="flex-1 space-y-2 text-left">
|
||||||
|
<a href="{{ $tip->author->profile_url }}" target="_blank"
|
||||||
|
class="block text-xl font-bold">{{ $tip->author->name }}</a>
|
||||||
|
|
||||||
|
<dl class="grid gap-6 sm:grid-cols-2 md:grid-cols-4">
|
||||||
|
@if ($tip->thread)
|
||||||
|
<div>
|
||||||
|
<dt class="text-sm text-gray-500">Thread</dt>
|
||||||
|
|
||||||
|
<dd>
|
||||||
|
<x-link href="{{ route('thread.show', $tip->thread->slug) }}">
|
||||||
|
{{ $tip->thread->title }}
|
||||||
|
</x-link>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<dt class="text-sm text-gray-500">Tweet</dt>
|
||||||
|
|
||||||
|
<dd>
|
||||||
|
<x-link href="{{ $tip->tweet_url }}" target="_blank">
|
||||||
|
twitter.com/...
|
||||||
|
</x-link>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
1
resources/views/components/container.blade.php
Normal file
1
resources/views/components/container.blade.php
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">{{ $slot }}</div>
|
||||||
24
resources/views/components/socials.blade.php
Normal file
24
resources/views/components/socials.blade.php
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<ul class="inline-grid grid-flow-col gap-4">
|
||||||
|
<li>
|
||||||
|
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
||||||
|
href="{{ $twitter }}">Twitter</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<span>·</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
||||||
|
href="{{ $telegram }}">Telegram</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<span>·</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
||||||
|
href="{{ $newsletter }}">Newsletter</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
@ -1,53 +1,31 @@
|
||||||
<x:layout :title="$thread->title">
|
<x:layout>
|
||||||
<main class="mx-auto flex flex-col sm:flex-row justify-between items-start gap-8">
|
<header class="relative py-24">
|
||||||
<aside class="flex flex-col gap-2 sm:mt-60 sm:mx-0 mx-auto">
|
<div
|
||||||
<h2 class="text-2xl font-medium">
|
class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
|
||||||
<a class="block" href="/">
|
|
||||||
Laravel Code Tips
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<a class="block" href="{{ $twitter }}" target="_blank">
|
|
||||||
<span class="link">Twitter</span>
|
|
||||||
</a>
|
|
||||||
<span class="px-2">·</span>
|
|
||||||
<a class="block" href="{{ $newsletter }}" target="_blank">
|
|
||||||
<span class="link">Newsletter</span>
|
|
||||||
</a>
|
|
||||||
<span class="px-2">·</span>
|
|
||||||
<a class="block" href="{{ $telegram }}" target="_blank">
|
|
||||||
<span class="link">Telegram</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<a class="block" href="/">
|
|
||||||
<span class="link">All tips</span>
|
|
||||||
</a>
|
|
||||||
</aside>
|
|
||||||
<article class="max-w-5xl w-full mt-8">
|
|
||||||
<header class="flex justify-center flex-wrap gap-5">
|
|
||||||
<h1 class="text-4xl w-full">🔥 {{ $thread->title }}</h1>
|
|
||||||
<div class="prose text-xl">@markdown{!! $thread->content !!}@endmarkdown</div>
|
|
||||||
|
|
||||||
<x:feed :tips="$tips" />
|
<x:container>
|
||||||
|
<div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
|
||||||
|
<h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">
|
||||||
|
🔥 {{ $thread->title }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="prose md:prose-xl">
|
||||||
|
{!! Str::markdown($thread->content) !!}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<x:socials />
|
||||||
|
</div>
|
||||||
|
</x:container>
|
||||||
</header>
|
</header>
|
||||||
</article>
|
|
||||||
<aside class="sm:mt-60">
|
|
||||||
<dl class="grid grid-cols-2 gap-x-5 gap-y-4 items-center">
|
|
||||||
<dt class="text-right">Author</dt>
|
|
||||||
<dd class="text-left">
|
|
||||||
<a href="{{ $thread->author->profile_url }}" class="flex items-center gap-2" target="_blank">
|
|
||||||
<img src="{{ $thread->author->avatar }}" class="w-8 rounded-full border-blue-800 border-2">
|
|
||||||
<span class="text-blue-800">{{ $thread->author->name }}</span>
|
|
||||||
</a>
|
|
||||||
</dd>
|
|
||||||
|
|
||||||
<dt class="text-right">Tweet</dt>
|
<main class="flex-1 divide-y" role="feed">
|
||||||
<dd class="text-left text-blue-800">
|
<x:feed :tips="$tips" />
|
||||||
<a href="{{ $thread->tweet_url }}" target="_blank">
|
|
||||||
twitter.com/...
|
<section class="py-12 bg-white md:py-24">
|
||||||
</a>
|
<x:container>
|
||||||
</dd>
|
<x:author-card :tip="$thread" />
|
||||||
</dl>
|
</x:container>
|
||||||
</aside>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</x:layout>
|
</x:layout>
|
||||||
|
|
|
||||||
|
|
@ -4,38 +4,15 @@
|
||||||
class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
|
class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
|
<x-container>
|
||||||
<div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
|
<div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
|
||||||
<h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">Laravel Code Tips</h1>
|
<h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">Laravel Code Tips</h1>
|
||||||
|
|
||||||
<p class="text-xl font-medium">Make your Laravel code cleaner, faster, and safer.</p>
|
<p class="text-xl font-medium">Make your Laravel code cleaner, faster, and safer.</p>
|
||||||
|
|
||||||
<ul class="inline-grid grid-flow-col gap-4">
|
<x:socials />
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $twitter }}">Twitter</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<span>·</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $telegram }}">Telegram</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<span>·</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $newsletter }}">Newsletter</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</x-container>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="flex-1 divide-y" role="feed">
|
<main class="flex-1 divide-y" role="feed">
|
||||||
|
|
|
||||||
|
|
@ -25,36 +25,12 @@
|
||||||
class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
|
class="absolute w-full transform skew-y-12 pointer-events-none h-72 md:h-96 -translate-y-1/4 bg-gradient-to-br from-yellow-300 to-pink-400 mix-blend-multiply">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
|
<x:container>
|
||||||
|
|
||||||
<div class="flex flex-col items-center space-y-6 text-center md:space-y-12">
|
<div class="flex flex-col items-center space-y-6 text-center md:space-y-12">
|
||||||
<div class="space-y-6 text-yellow-900">
|
<div class="space-y-6 text-yellow-900">
|
||||||
<h1 class="text-3xl font-bold tracking-tighter md:text-5xl">{{ $tip->title }}</h1>
|
<h1 class="text-3xl font-bold tracking-tighter md:text-5xl">{{ $tip->title }}</h1>
|
||||||
|
|
||||||
<ul class="inline-grid grid-flow-col gap-4">
|
<x:socials />
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $twitter }}">Twitter</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<span>·</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $telegram }}">Telegram</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<span>·</span>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<a class="transition border-b-2 border-pink-100 hover:border-pink-900 focus:outline-none focus:border-pink-900"
|
|
||||||
href="{{ $newsletter }}">Newsletter</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($tip->images())
|
@if ($tip->images())
|
||||||
|
|
@ -66,46 +42,12 @@
|
||||||
|
|
||||||
@if ($tip->content)
|
@if ($tip->content)
|
||||||
<div class="prose break-all md:prose-xl">
|
<div class="prose break-all md:prose-xl">
|
||||||
{!! Str::of($tip->content)->markdown() !!}
|
{!! Str::markdown($tip->content) !!}
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|
||||||
<div class="flex w-full p-6 space-x-6 bg-gray-50 rounded-2xl">
|
<x:author-card :tip="$tip" />
|
||||||
<a href="{{ $tip->author->profile_url }}" target="_blank">
|
|
||||||
<img class="bg-gray-200 rounded-full w-14 h-14" src="{{ asset($tip->author->avatar) }}"
|
|
||||||
alt="{{ $tip->author->name }}">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<aside class="flex-1 space-y-2 text-left">
|
|
||||||
<a href="{{ $tip->author->profile_url }}" target="_blank"
|
|
||||||
class="block text-xl font-bold">{{ $tip->author->name }}</a>
|
|
||||||
|
|
||||||
<dl class="grid gap-6 sm:grid-cols-2 md:grid-cols-4">
|
|
||||||
@if ($tip->thread)
|
|
||||||
<div>
|
|
||||||
<dt class="text-sm text-gray-500">Thread</dt>
|
|
||||||
|
|
||||||
<dd>
|
|
||||||
<x-link href="{{ route('thread.show', $tip->thread->slug) }}">
|
|
||||||
{{ $tip->thread->title }}
|
|
||||||
</x-link>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<dt class="text-sm text-gray-500">Tweet</dt>
|
|
||||||
|
|
||||||
<dd>
|
|
||||||
<x-link href="{{ $tip->tweet_url }}" target="_blank">
|
|
||||||
twitter.com/...
|
|
||||||
</x-link>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</x:container>
|
||||||
</main>
|
</main>
|
||||||
</x:layout>
|
</x:layout>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue