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
5a65a83563
commit
8623a25b79
15 changed files with 8748 additions and 2104 deletions
|
|
@ -1,23 +1,45 @@
|
|||
@props([
|
||||
'tips',
|
||||
])
|
||||
@props(['tips'])
|
||||
|
||||
<section role="feed" class="my-8">
|
||||
@foreach($tips as $tip)
|
||||
<article class="border-b-2 border-gray-200 py-16" x-data @click="window.location.href = '{{ route('tip.show', $tip) }}'">
|
||||
<h1 class="text-3xl font-medium">
|
||||
<a href="{{ route('tip.show', $tip) }}">🔥 {{ $tip->title }}</a>
|
||||
</h1>
|
||||
<section role="feed" class="divide-y">
|
||||
@foreach ($tips as $tip)
|
||||
<div class="py-12 md:py-24 {{ $loop->odd ?: 'bg-gray-50' }}">
|
||||
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
|
||||
<article
|
||||
class="flex flex-col items-center space-y-6 md:space-y-12 text-center group transition transform active:scale-[0.99] duration-75 relative"
|
||||
role="article">
|
||||
<a class="absolute inset-0 w-full h-full" title="{{ $tip->title }}"
|
||||
href="{{ route('tip.show', $tip) }}">
|
||||
<span class="sr-only">{{ $tip->title }}</span>
|
||||
</a>
|
||||
|
||||
<div class="mt-4 flex justify-center w-1/2 gap-1 flex-wrap mx-auto">
|
||||
@foreach($tip->images() as $image)
|
||||
<img alt="{{ $tip->title }}" src="{{ $image->small() }}">
|
||||
@endforeach
|
||||
<div
|
||||
class="transition duration-200 transform shadow rounded-2xl group-hover:rotate-6 group-hover:-translate-y-2 group-hover:shadow-md">
|
||||
<div
|
||||
class="flex items-center justify-center w-16 h-16 text-2xl font-bold shadow-xl bg-gradient-to-b from-white to-pink-50 rounded-2xl tabular-nums">
|
||||
<p
|
||||
class="text-transparent transition duration-300 transform bg-gradient-to-br from-yellow-400 to-pink-400 bg-clip-text group-hover:scale-105 group-hover:rotate-6">
|
||||
{{ count($tips) - $loop->index }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-bold tracking-tight md:text-4xl">
|
||||
🔥 {{ $tip->title }}
|
||||
</h2>
|
||||
|
||||
@if ($tip->images())
|
||||
@foreach ($tip->images() as $image)
|
||||
<img class="shadow-xl rounded-xl" src="{{ $image->small() }}" alt="{{ $tip->title }}">
|
||||
@endforeach
|
||||
@endif
|
||||
|
||||
@if ($tip->content)
|
||||
<div class="prose break-all md:prose-xl">
|
||||
{!! Str::of($tip->content)->markdown() !!}
|
||||
</div>
|
||||
@endif
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<section role="article" class="mt-8 text-xl prose mx-auto">
|
||||
@markdown{!! $tip->content !!}@endmarkdown
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
@endforeach
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@
|
|||
])
|
||||
|
||||
@php
|
||||
$title = $title
|
||||
? $title . ' | Laravel Code Tips'
|
||||
: 'Laravel Code Tips';
|
||||
$title = $title ? $title . ' | Laravel Code Tips' : 'Laravel Code Tips';
|
||||
@endphp
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -26,9 +25,11 @@
|
|||
<meta property="og:title" content="{{ $title }}" />
|
||||
<meta property="og:description" content="Make your Laravel code cleaner, faster, and safer." />
|
||||
|
||||
@if($preview)
|
||||
<meta property="og:image" content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" />
|
||||
<meta property="twitter:image" content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" />
|
||||
@if ($preview)
|
||||
<meta property="og:image"
|
||||
content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" />
|
||||
<meta property="twitter:image"
|
||||
content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" />
|
||||
@else
|
||||
<meta property="og:image" content="{{ asset('og.png') }}" />
|
||||
<meta property="twitter:image" content="{{ asset('og.png') }}" />
|
||||
|
|
@ -45,14 +46,28 @@
|
|||
|
||||
<meta name="theme-color" content="#fa7c4c">
|
||||
</head>
|
||||
<body class="antialiased bg-white">
|
||||
<div class="w-full p-3 text-center min-h-screen flex justify-between flex-col">
|
||||
{{ $slot }}
|
||||
|
||||
<footer class="space-y-2 text-gray-700 text-sm pt-8">
|
||||
<p>Found an error? Contact us at <a href="mailto:hello@laravel-code.tips" class="link">support@laravel-code.tips</a>.</p>
|
||||
<p>Want to share a tip? Submit it <a href="https://github.com/stancl/laravel-tips" target="_blank" class="link">here</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
<body class="flex flex-col min-h-screen font-sans antialiased text-gray-800">
|
||||
{{ $slot }}
|
||||
|
||||
<footer class="py-12 border-t">
|
||||
<ul class="px-4 space-y-4 text-center text-gray-500">
|
||||
<li>
|
||||
Found an error? Contact us at
|
||||
<x-link href="mailto:hello@laravel-code.tips">support@laravel-code.tips</x-link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Want to share a tip? Submit it
|
||||
<x-link target="_blank" href="https://github.com/stancl/laravel-tips">here</x-link>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
Designed with <span class="text-red-500">❤️</span> by
|
||||
<x-link target="_blank" href="http://twitter.com/larsKlopstra/">@larsklopstra</x-link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
1
resources/views/components/link.blade.php
Normal file
1
resources/views/components/link.blade.php
Normal file
|
|
@ -0,0 +1 @@
|
|||
<a {{ $attributes->class('inline transition border-b-2 border-gray-200 hover:border-orange-500 focus:outline-none focus:border-orange-600') }}>{{ $slot }}</a>
|
||||
Loading…
Add table
Add a link
Reference in a new issue