Skip to content

Instantly share code, notes, and snippets.

@neverything

neverything/share-image.blade.php

Last active October 28, 2023 05:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neverything/eb57ea22055de1e8468473d8be41b290 to your computer and use it in GitHub Desktop.
Save neverything/eb57ea22055de1e8468473d8be41b290 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
share-image.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>{{ $project->name }} | Share Image</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=ibm-plex-sans:400,500,600?display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased">
<div class="relative">
<div>
<div class="grid grid-cols-3 h-screen items-center">
<div class="col-span-2">
<figure class="col-span-1 rounded-tr-2xl rounded-br-2xl block ring-1 bg-white shadow-md ring-gray-900/5">
<div class="relative overflow-clip">
<div class="absolute top-2 right-2">
@foreach($project->tags as $projectTag)
<span class="inline-flex items-center px-2 py-1 rounded-full text-sm bg-pink-100 text-pink-600">
{{ $projectTag->name }}
</span>
@endforeach
</div>
<img src="{{ asset('storage/'.$project->image) }}" alt="" class="rounded-tr-2xl object-cover object-top w-full overflow-clip aspect-video"/>
<div class="flex py-4 px-6 items-center justify-between">
<h3 class="text-xl font-semibold leading-8 tracking-tight text-gray-900">{{ $project->name }}</h3>
</div>
</div>
<figcaption class="flex flex-row items-center justify-between gap-x-4 gap-y-2 border-t border-gray-900/10 px-6 py-4">
<div class="items-center gap-x-4 flex">
<img class="h-10 w-10 flex-none rounded-full bg-gray-50" src="{{ $project->user->gravatar }}" alt="{{ $project->user->name }}">
<div class="flex-auto">
<p class="text-xs font-medium text-gray-400 tracking-wide">Added by</p>
<div class="text-base">{{ $project->user->name }}</div>
</div>
</div>
<div class="flex items-center justify-start gap-x-4">
<span class="inline-flex items-center px-2 py-1 rounded-full text-sm bg-pink-100 text-pink-600">
{{ $project->public ? 'Public' : 'Internal' }}
</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-span-1 place-self-center">
<img class="h-48 mx-auto w-auto mb-6" src="{{ asset('assets/wire-in-the-wild-logo-transparent.png') }}" alt="Wire in the Wild Logo">
<h1 class="mt-6 text-4xl text-center leading-8 text-pink-600 font-semibold"><strong class="font-bold">Wire in the Wild</strong></h1>
<p class="mt-2 text-center text-xl font-medium text-gray-900">Real World Laravel Livewire Projects</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment