mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2025-12-20 13:40:15 +00:00
✨ Add Laravel guidelines, Spanish translations, and configuration updates
- Added Laravel Boost Guidelines for structured development practices. - Introduced Spanish translations for `auth`, `passwords`, and additional JSON keys. - Configured markdown highlighting with Shiki in `config/markdown.php`. - Updated sidebar layout for improved interactivity and styling. - Enhanced user feedback with a copy-to-clipboard directive and toast notifications in Flux.
This commit is contained in:
HolgerHatGarKeineNode
@@ -7,10 +7,16 @@ use Livewire\WithPagination;
|
||||
new class extends Component {
|
||||
use WithPagination;
|
||||
|
||||
public $country = 'de';
|
||||
public $sortBy = 'name';
|
||||
public $sortDirection = 'asc';
|
||||
public $search = '';
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$this->country = request()->route('country');
|
||||
}
|
||||
|
||||
public function sort($column)
|
||||
{
|
||||
if ($this->sortBy === $column) {
|
||||
@@ -25,7 +31,7 @@ new class extends Component {
|
||||
{
|
||||
return [
|
||||
'meetups' => Meetup::with(['city.country', 'createdBy'])
|
||||
->whereHas('city.country', fn($query) => $query->where('countries.code', request()->route('country')))
|
||||
->whereHas('city.country', fn($query) => $query->where('countries.code', $this->country))
|
||||
->when($this->search, fn($query)
|
||||
=> $query->where('name', 'ilike', '%'.$this->search.'%'),
|
||||
)
|
||||
@@ -63,17 +69,22 @@ new class extends Component {
|
||||
<flux:table.rows>
|
||||
@foreach ($meetups as $meetup)
|
||||
<flux:table.row :key="$meetup->id">
|
||||
<flux:table.cell variant="strong">
|
||||
{{ $meetup->name }}
|
||||
@if($meetup->city)
|
||||
<div class="text-xs text-zinc-500 flex items-center space-x-2">
|
||||
<div>{{ $meetup->city->name }}</div>
|
||||
@if($meetup->city->country)
|
||||
<flux:separator vertical/>
|
||||
<div>{{ $meetup->city->country->name }}</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<flux:table.cell variant="strong" class="flex items-center gap-3">
|
||||
<flux:avatar :href="route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country])" src="{{ $meetup->getFirstMediaUrl('logo', 'thumb') }}"/>
|
||||
<div>
|
||||
@if($meetup->city)
|
||||
<a href="{{ route('meetups.landingpage', ['meetup' => $meetup, 'country' => $country]) }}">
|
||||
<span>{{ $meetup->name }}</span>
|
||||
<div class="text-xs text-zinc-500 flex items-center space-x-2">
|
||||
<div>{{ $meetup->city->name }}</div>
|
||||
@if($meetup->city->country)
|
||||
<flux:separator vertical/>
|
||||
<div>{{ $meetup->city->country->name }}</div>
|
||||
@endif
|
||||
</div>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</flux:table.cell>
|
||||
|
||||
<flux:table.cell>
|
||||
@@ -100,7 +111,8 @@ new class extends Component {
|
||||
</flux:link>
|
||||
@endif
|
||||
@if($meetup->nostr)
|
||||
<flux:link :href="'https://njump.me/'.$meetup->nostr" external variant="subtle" title="Nostr">
|
||||
<flux:link :href="'https://njump.me/'.$meetup->nostr" external variant="subtle"
|
||||
title="Nostr">
|
||||
<flux:icon.bolt variant="mini"/>
|
||||
</flux:link>
|
||||
@endif
|
||||
|
||||
168
resources/views/livewire/meetups/landingpage.blade.php
Normal file
168
resources/views/livewire/meetups/landingpage.blade.php
Normal file
@@ -0,0 +1,168 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Meetup;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public Meetup $meetup;
|
||||
|
||||
public function with(): array
|
||||
{
|
||||
return [
|
||||
'meetup' => $this->meetup,
|
||||
];
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Left Column: Meetup Details -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center space-x-2">
|
||||
<flux:avatar class="[:where(&)]:size-32 [:where(&)]:text-base" size="xl" src="{{ $meetup->getFirstMediaUrl('logo') }}" />
|
||||
<div>
|
||||
<flux:heading size="xl" class="mb-4">{{ $meetup->name }}</flux:heading>
|
||||
<flux:subheading class="text-gray-600 dark:text-gray-400">
|
||||
{{ $meetup->city->name }}, {{ $meetup->city->country->name }}
|
||||
</flux:subheading>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($meetup->intro)
|
||||
<div>
|
||||
<flux:heading size="lg" class="mb-2">{{ __('Über uns') }}</flux:heading>
|
||||
<x-markdown class="prose whitespace-pre-wrap">{!! $meetup->intro !!}</x-markdown>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-4">
|
||||
<flux:heading size="lg">{{ __('Kontakt & Links') }}</flux:heading>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
@if($meetup->webpage)
|
||||
<flux:button href="{{ $meetup->webpage }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<flux:icon.globe-alt class="w-5 h-5 mr-2" />
|
||||
Webseite
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->telegram_link)
|
||||
<flux:button href="{{ $meetup->telegram_link }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<flux:icon.chat-bubble-left-right class="w-5 h-5 mr-2" />
|
||||
Telegram
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->twitter_username)
|
||||
<flux:button href="https://twitter.com/{{ $meetup->twitter_username }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
||||
</svg>
|
||||
Twitter/X
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->matrix_group)
|
||||
<flux:button href="{{ $meetup->matrix_group }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<flux:icon.hashtag class="w-5 h-5 mr-2" />
|
||||
Matrix
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->signal)
|
||||
<flux:button href="{{ $meetup->signal }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<flux:icon.phone class="w-5 h-5 mr-2" />
|
||||
Signal
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->simplex)
|
||||
<flux:button href="{{ $meetup->simplex }}" target="_blank" variant="ghost" class="justify-start">
|
||||
<flux:icon.chat-bubble-oval-left-ellipsis class="w-5 h-5 mr-2" />
|
||||
SimpleX
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($meetup->nostr)
|
||||
<div class="col-span-full">
|
||||
<flux:heading size="sm" class="mb-2">Nostr</flux:heading>
|
||||
<code x-copy-to-clipboard="'{{ $meetup->nostr }}'" class="cursor-pointer block p-2 bg-gray-100 dark:bg-gray-800 rounded text-xs break-all">{{ $meetup->nostr }}</code>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($meetup->community)
|
||||
<div>
|
||||
<flux:heading size="sm" class="mb-2">Community</flux:heading>
|
||||
<p class="text-gray-700 dark:text-gray-300">{{ $meetup->community }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Map -->
|
||||
<div>
|
||||
<style>
|
||||
#meetup-map {
|
||||
height: 70vh;
|
||||
min-height: 500px;
|
||||
z-index: 0!important;
|
||||
}
|
||||
|
||||
#meetup-map:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
@php
|
||||
$attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
|
||||
@endphp
|
||||
<div>
|
||||
<flux:heading size="lg" class="mb-4">{{ __('Standort') }}</flux:heading>
|
||||
</div>
|
||||
<div x-data="{
|
||||
meetup: @js($meetup),
|
||||
initializeMap() {
|
||||
const map = L.map($refs.map, {
|
||||
scrollWheelZoom: false
|
||||
}).setView([this.meetup.city.latitude, this.meetup.city.longitude], 8);
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
|
||||
minZoom: 0,
|
||||
maxZoom: 18,
|
||||
attribution: '{{ $attribution }}'
|
||||
}).addTo(map);
|
||||
|
||||
// Custom BTC icon
|
||||
const btcIcon = L.icon({
|
||||
iconUrl: '/img/btc_marker.png',
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
popupAnchor: [0, -32],
|
||||
shadowUrl: null
|
||||
});
|
||||
|
||||
L.marker([this.meetup.city.latitude, this.meetup.city.longitude], {
|
||||
icon: btcIcon
|
||||
})
|
||||
.bindPopup(this.meetup.name)
|
||||
.addTo(map);
|
||||
|
||||
// CTRL + scroll wheel zoom
|
||||
const container = map.getContainer();
|
||||
container.addEventListener('wheel', function (e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey) {
|
||||
const delta = e.deltaY > 0 ? -1 : 1;
|
||||
map.setZoom(map.getZoom() + delta, { animate: true });
|
||||
}
|
||||
}, { passive: false });
|
||||
}
|
||||
}"
|
||||
x-init="initializeMap()"
|
||||
>
|
||||
<div id="meetup-map" x-ref="map"></div>
|
||||
<p class="text-sm text-gray-500 mt-2">{{ __('Zoom = STRG+Scroll') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,7 +33,7 @@ new class extends Component {
|
||||
$attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
|
||||
@endphp
|
||||
<div>
|
||||
<flux:heading>Zoom = STRG+Scroll</flux:heading>
|
||||
<flux:heading>{{ __('Zoom = STRG+Scroll') }}</flux:heading>
|
||||
</div>
|
||||
<div x-data="{
|
||||
markers: @js($meetups),
|
||||
|
||||
Reference in New Issue
Block a user