archtechx/laravel-tips
1
0
Fork 0
mirror of https://github.com/archtechx/laravel-tips.git synced 2025-12-12 05:14:04 +00:00
Code Activity

Merge pull request #1 from stancl/fancy-design

Browse source 
Fancy new design
This commit is contained in:
Samuel Štancl 2021-04-07 19:24:30 +02:00 • committed by GitHub
commit 3c618a2209
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 8756 additions and 2153 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/Providers/AppServiceProvider.php
View file

@ -2,12 +2,8 @@
namespace App\Providers; namespace App\Providers;
use App\MarkdownCompiler;
use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider; use Illuminate\Support\ServiceProvider;
use League\CommonMark\GithubFlavoredMarkdownConverter;
use Illuminate\Support\Str;
class AppServiceProvider extends ServiceProvider class AppServiceProvider extends ServiceProvider
{ {
@ -30,18 +26,6 @@ class AppServiceProvider extends ServiceProvider
{ {
Model::unguard(); Model::unguard();
Blade::directive('markdown', function (string $expression = '') {
if ($expression) {
return MarkdownCompiler::compileMarkdownString($expression);
}
return '<?php $__markdownOldBuffer = ob_get_clean(); ob_start(); ?>';
});
Blade::directive('endmarkdown', function () {
return '<?php $__markdownString = ob_get_clean(); ob_start(); echo $__markdownOldBuffer; unset($__markdownOldBuffer); echo \App\MarkdownCompiler::compileMarkdownString($__markdownString); unset($__markdownString); ?>';
});
view()->share('telegram', 'https://t.me/LaravelCodeTips'); view()->share('telegram', 'https://t.me/LaravelCodeTips');
view()->share('newsletter', 'https://newsletter.laravel-code.tips'); view()->share('newsletter', 'https://newsletter.laravel-code.tips');
view()->share('twitter', 'https://twitter.com/LaravelCodeTips'); view()->share('twitter', 'https://twitter.com/LaravelCodeTips');

3690
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -11,7 +11,6 @@
}, },
"devDependencies": { "devDependencies": {
"@hotwired/turbo": "^7.0.0-beta.4", "@hotwired/turbo": "^7.0.0-beta.4",
"@tailwindcss/jit": "^0.1.17",
"@tailwindcss/typography": "^0.4.0", "@tailwindcss/typography": "^0.4.0",
"alpine-turbo-drive-adapter": "^1.0.2", "alpine-turbo-drive-adapter": "^1.0.2",
"alpinejs": "^2.8.2", "alpinejs": "^2.8.2",

1728
public/css/app.css vendored
View file

File diff suppressed because one or more lines are too long

5043
public/js/app.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View file

@ -1,4 +1,4 @@
{ {
"/js/app.js": "/js/app.js?id=1c9c0a8a53dbb967504e", "/js/app.js": "/js/app.js?id=dcd6a25505aca8a1b0cb",
"/css/app.css": "/css/app.css?id=0eeb0c58e5eb6a114a46" "/css/app.css": "/css/app.css?id=a4be474b1dff83dbf938"
} }

6
resources/css/app.css vendored
View file

@ -2,6 +2,8 @@
@import "tailwindcss/components"; @import "tailwindcss/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
.link { @layer base {
@apply border-b-2 border-gray-100 hover:border-gray-400 transition; .prose a {
@apply relative;
}
} }

37
resources/views/components/author-card.blade.php Normal file
View 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, false) }}">
{{ $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
View file

@ -0,0 +1 @@
<div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">{{ $slot }}</div>

58
resources/views/components/feed.blade.php
View file

@ -1,23 +1,45 @@
@props([ @props(['tips'])
'tips',
])
<section role="feed" class="my-8"> <section role="feed" class="divide-y">
@foreach($tips as $tip) @foreach ($tips as $tip)
<article class="border-b-2 border-gray-200 py-16" x-data @click="window.location.href = '{{ route('tip.show', $tip) }}'"> <div class="py-12 md:py-24 {{ $loop->odd ?: 'bg-gray-50' }}">
<h1 class="text-3xl font-medium"> <div class="w-full max-w-4xl px-4 mx-auto sm:px-6 md:px-8">
<a href="{{ route('tip.show', $tip) }}">🔥 {{ $tip->title }}</a> <article
</h1> 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, false) }}">
<span class="sr-only">{{ $tip->title }}</span>
</a>
<div class="mt-4 flex justify-center w-1/2 gap-1 flex-wrap mx-auto"> <div
@foreach($tip->images() as $image) class="transition duration-200 transform shadow rounded-2xl group-hover:rotate-6 group-hover:-translate-y-2 group-hover:shadow-md">
<img alt="{{ $tip->title }}" src="{{ $image->small() }}"> <div
@endforeach 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> </div>
</div>
<section role="article" class="mt-8 text-xl prose mx-auto">
@markdown{!! $tip->content !!}@endmarkdown
</section>
</article>
@endforeach @endforeach
</section> </section>

43
resources/views/components/layout.blade.php
View file

@ -4,13 +4,12 @@
]) ])
@php @php
$title = $title $title = $title ? $title . ' | Laravel Code Tips' : 'Laravel Code Tips';
? $title . ' | Laravel Code Tips'
: 'Laravel Code Tips';
@endphp @endphp
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -26,9 +25,11 @@
<meta property="og:title" content="{{ $title }}" /> <meta property="og:title" content="{{ $title }}" />
<meta property="og:description" content="Make your Laravel code cleaner, faster, and safer." /> <meta property="og:description" content="Make your Laravel code cleaner, faster, and safer." />
@if($preview) @if ($preview)
<meta property="og:image" content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" /> <meta property="og:image"
<meta property="twitter:image" content="https://i.useflipp.com/g6demrp3y3rz.png?content={{ urlencode(html_entity_decode($preview)) }}" /> 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 @else
<meta property="og:image" content="{{ asset('og.png') }}" /> <meta property="og:image" content="{{ asset('og.png') }}" />
<meta property="twitter:image" content="{{ asset('og.png') }}" /> <meta property="twitter:image" content="{{ asset('og.png') }}" />
@ -45,14 +46,28 @@
<meta name="theme-color" content="#fa7c4c"> <meta name="theme-color" content="#fa7c4c">
</head> </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"> <body class="flex flex-col min-h-screen font-sans antialiased text-gray-800">
<p>Found an error? Contact us at <a href="mailto:hello@laravel-code.tips" class="link">support@laravel-code.tips</a>.</p> {{ $slot }}
<p>Want to share a tip? Submit it <a href="https://github.com/stancl/laravel-tips" target="_blank" class="link">here</a>.</p>
</footer> <footer class="py-12 border-t">
</div> <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> </body>
</html> </html>

1
resources/views/components/link.blade.php Normal file
View 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>

24
resources/views/components/socials.blade.php Normal file
View 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>&centerdot;</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>&centerdot;</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>

74
resources/views/threads/show.blade.php
View file

@ -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="/"> </div>
Laravel Code Tips
</a> <x:container>
</h2> <div class="flex flex-col items-center space-y-6 text-center text-yellow-900">
<div class="flex justify-between"> <h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-8xl">
<a class="block" href="{{ $twitter }}" target="_blank"> 🔥 {{ $thread->title }}
<span class="link">Twitter</span> </h1>
</a>
<span class="px-2">·</span> <div class="prose md:prose-xl">
<a class="block" href="{{ $newsletter }}" target="_blank"> {!! Str::markdown($thread->content) !!}
<span class="link">Newsletter</span> </div>
</a>
<span class="px-2">·</span> <x:socials />
<a class="block" href="{{ $telegram }}" target="_blank">
<span class="link">Telegram</span>
</a>
</div> </div>
<a class="block" href="/"> </x:container>
<span class="link">All tips</span> </header>
</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" /> <main class="flex-1 divide-y" role="feed">
</header> <x:feed :tips="$tips" />
</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> <section class="py-12 bg-white md:py-24">
<dd class="text-left text-blue-800"> <x:container>
<a href="{{ $thread->tweet_url }}" target="_blank"> <x:author-card :tip="$thread" />
twitter.com/... </x:container>
</a> </section>
</dd>
</dl>
</aside>
</main> </main>
</x:layout> </x:layout>

31
resources/views/tips/index.blade.php
View file

@ -1,22 +1,21 @@
<x:layout> <x:layout>
<header class="mt-8"> <header class="relative py-24">
<h1 class="text-5xl w-full">Laravel Code Tips</h1> <div
<h2 class="mt-6 text-2xl text-gray-700">Make your Laravel code cleaner, faster, and safer.</h2> 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 class="mt-6 text-gray-800 text-lg">
<a class="inline" href="{{ $twitter }}" target="_blank">
<span class="link">Twitter</span>
</a>
<span class="px-1">·</span>
<a class="inline" href="{{ $newsletter }}" target="_blank">
<span class="link">Newsletter</span>
</a>
<span class="px-1">·</span>
<a class="inline" href="{{ $telegram }}" target="_blank">
<span class="link">Telegram</span>
</a>
</div> </div>
<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">Laravel Code Tips</h1>
<p class="text-xl font-medium">Make your Laravel code cleaner, faster, and safer.</p>
<x:socials />
</div>
</x-container>
</header> </header>
<main class="mx-auto flex justify-between items-center gap-8 sm:w-1/2">
<main class="flex-1 divide-y" role="feed">
<x:feed :tips="$tips" /> <x:feed :tips="$tips" />
</main> </main>
</x:layout> </x:layout>

108
resources/views/tips/show.blade.php
View file

@ -1,71 +1,53 @@
<x:layout :title="$tip->title" :preview="$tip->title"> <x:layout>
<main class="mx-auto flex flex-col sm:flex-row justify-between items-center gap-8"> <div
<aside class="flex flex-col gap-2"> class="fixed inset-0 z-40 items-center justify-between hidden w-full h-screen p-16 pointer-events-none lg:flex">
<h2 class="text-2xl font-medium"> <a class="rounded-full shadow-md pointer-events-auto" href="#">
<a class="block" href="/"> <div class="flex items-center justify-center w-16 h-16 bg-white rounded-full shadow-2xl">
Laravel Code Tips <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-orange-500" fill="none" viewBox="0 0 24 24"
</a> stroke="currentColor">
</h2> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
<div class="flex justify-between"> </svg>
<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="/"> </a>
<span class="link">All tips</span>
</a>
</aside>
<article class="max-w-5xl w-full mt-8 text-xl">
<header class="flex justify-center flex-wrap gap-5">
<h1 class="text-4xl w-full">🔥 {{ $tip->title }}</h1>
<div class="flex justify-center w-1/2 gap-1 flex-wrap"> <a class="rounded-full shadow-md pointer-events-auto" href="#">
@foreach($tip->images() as $image) <div class="flex items-center justify-center w-16 h-16 bg-white rounded-full shadow-2xl">
<a href="{{ $image->large() }}" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-orange-500" fill="none" viewBox="0 0 24 24"
<img alt="{{ $tip->title }}" src="{{ $image->small() }}"> stroke="currentColor">
</a> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@endforeach </svg>
</div>
</a>
</div>
<main class="relative flex-1 py-24">
<div
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>
<x:container>
<div class="flex flex-col items-center space-y-6 text-center md:space-y-12">
<div class="space-y-6 text-yellow-900">
<h1 class="text-3xl font-bold tracking-tighter md:text-5xl">{{ $tip->title }}</h1>
<x:socials />
</div> </div>
</header>
<section role="article" class="mt-8 text-xl prose mx-auto"> @if ($tip->images())
@markdown{!! $tip->content !!}@endmarkdown @foreach ($tip->images() as $image)
</section> <img class="shadow-xl rounded-xl backdrop-filter backdrop-blur-lg backdrop-saturate-125"
</article> src="{{ $image->small() }}" alt="{{ $tip->title }}">
<aside> @endforeach
<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="{{ $tip->author->profile_url }}" class="flex items-center gap-2" target="_blank">
<img src="{{ $tip->author->avatar }}" class="w-8 rounded-full border-blue-800 border-2">
<span class="text-blue-800">{{ $tip->author->name }}</span>
</a>
</dd>
@if($tip->thread)
<dt class="text-right">Thread</dt>
<dd class="text-left text-blue-800">
<a href="{{ route('thread.show', $tip->thread->slug) }}">
{{ $tip->thread->title }}
</a>
</dd>
@endif @endif
<dt class="text-right">Tweet</dt> @if ($tip->content)
<dd class="text-left text-blue-800"> <div class="prose break-all md:prose-xl">
<a href="{{ $tip->tweet_url }}" target="_blank"> {!! Str::markdown($tip->content) !!}
twitter.com/... </div>
</a> @endif
</dd>
</dl> <x:author-card :tip="$tip" />
</aside> </div>
</x:container>
</main> </main>
</x:layout> </x:layout>

1
routes/web.php
View file

@ -15,7 +15,6 @@ use Illuminate\Support\Facades\Route;
| |
*/ */
Route::middleware('static')->group(function () { Route::middleware('static')->group(function () {
Route::get('/', function () { Route::get('/', function () {
return view('tips.index', ['tips' => Tip::all()]); return view('tips.index', ['tips' => Tip::all()]);

41
tailwind.config.js vendored
View file

@ -1,23 +1,24 @@
const colors = require('tailwindcss/colors') const colors = require("tailwindcss/colors");
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = { module.exports = {
purge: [ purge: ["./resources/views/**/*.blade.php"],
'./resources/views/**/*.blade.php',
], mode: "jit",
darkMode: 'class',
theme: { darkMode: "class",
extend: {
fontFamily: { theme: {
sans: ['iA Writer Quattro S', ...defaultTheme.fontFamily.sans], extend: {
} fontFamily: {
sans: ["iA Writer Quattro S", ...defaultTheme.fontFamily.sans],
},
colors: {
...colors,
},
},
}, },
colors,
}, plugins: [require("@tailwindcss/typography")],
variants: { };
extend: {},
},
plugins: [
require('@tailwindcss/typography'),
],
}

2
webpack.mix.js vendored
View file

@ -14,7 +14,7 @@ const mix = require('laravel-mix');
mix mix
.js('resources/js/app.js', 'public/js') .js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [ .postCss('resources/css/app.css', 'public/css', [
require('@tailwindcss/jit'), require('tailwindcss'),
require('autoprefixer'), require('autoprefixer'),
]) ])
.version() .version()