Wire up Volt component w/ custom layout

This also strips down most of the post indexing stuff from original version, so need to figure out a better way to add the same filters back in.
JSn1nj4 · Jul 5, 2024 · a1f8bd9 · a1f8bd9
1 parent 02071dc
commit a1f8bd9
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 5 deletions.
diff --git a/resources/views/components/layouts/blog.blade.php b/resources/views/components/layouts/blog.blade.php
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" color-theme="system">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="theme-color" content="#002e24">
+
+	<title>{{ $title ?? config('app.name', 'Laravel') }}</title>
+	<meta name="description" content="{{ $metaDescription ?? 'A simple guy who loves web development and design' }}">
+
+	@vite('resources/css/app.css')
+	<script src="https://kit.fontawesome.com/a9f488e9e4.js" crossorigin="anonymous"></script>
+
+	<link rel="shortcut icon" href="{{ asset_url('favicon.png') }}">
+</head>
+<body class="bg-white dark:bg-black text-black dark:text-white font-sans flex flex-col {{ $bodyClasses ?? '' }}">
+
+@component('partials.header')
+	<x-nav>
+		<x-nav-item route="home" icon="fas fa-home" inline>Home</x-nav-item>
+		@if(config('app.enable-blog'))
+			<x-nav-item route="blog" inline>Blog</x-nav-item>
+		@endif
+		@if(config('app.enable-projects'))
+			<x-nav-item route="portfolio" inline>Projects</x-nav-item>
+		@endif
+	</x-nav>
+@endcomponent
+
+<!-- Page Content -->
+<main class="bg-white dark:bg-black layer-shadow flex flex-col flex-grow">
+	<x-row flex-class="lg:flex">
+		<x-column id="blog" class="pr-8 last:pr-0 pb-12 lg:pb-0 only:w-full lg:w-2/3">
+			{{ $slot }}
+		</x-column>
+
+		@isset($sidebar)
+			<x-sidebar>
+				{{ $sidebar }}
+			</x-sidebar>
+		@endisset
+	</x-row>
+</main>
+
+@include('partials.footer')
+
+@vite('resources/js/app.ts')
+
+<x-google-analytics />
+
+<script>
+	// todo: organize one-off scripts within bundled JS
+	function copyOnClick(e) {
+		var elem = e.target
+
+		while (!elem.hasAttribute('href')) {
+			elem = elem.parentElement
+		}
+
+		const text = elem.href.charAt(0) === '#' ?
+			`${window.location}${elem.href}` :
+			elem.href
+
+		navigator.clipboard.writeText(text)
+
+		console.log(`Link copied to clipboard: ${text}`)
+	}
+
+	const anchors = document.querySelectorAll('.heading-anchor')
+
+	anchors.forEach(function (elem) {
+		elem.addEventListener('click', copyOnClick, {capture: true})
+	})
+</script>
+
+@include('partials.dark-mode')
+</body>
+</html>
diff --git a/resources/views/livewire/blog-feed.blade.php b/resources/views/livewire/blog-feed.blade.php
@@ -0,0 +1,45 @@
+<?php
+
+use Livewire\Attributes\{Computed, Layout, Title};
+
+new
+#[Layout('components.layouts.blog')]
+class extends \Livewire\Volt\Component {
+	use \Livewire\WithPagination;
+
+	#[Computed]
+	public function hasPosts(): bool
+	{
+		return $this->with()['posts']->count() > 0;
+	}
+
+	public function with(): array
+	{
+		return [
+			'posts' => \App\Models\Post::latest('published_at')->paginate(10),
+		];
+	}
+}; ?>
+
+
+<x-slot:title>Elliot's Tech Blog - ElliotDerhay.com</x-slot:title>
+@if($this->hasPosts())
+	<x-slot:meta-description>Latest post: {{$posts->first()->title}}</x-slot:meta-description>
+@endif
+
+<root>
+	@if($this->hasPosts())
+		@foreach($posts as $post)
+			<x-post.card :post="$post" size="none" padding="p-0" margin="mb-12 last:mb-0" />
+		@endforeach
+		{{ $posts->links() }}
+
+	@else
+		<h1 class="text-4xl text-center mb-4">Sorry, no posts to display.</h1>
+		<p class="text-2xl text-center">Check back soon!</p>
+	@endif
+</root>
+
+<x-slot:sidebar>
+	@include('partials.blog-sidebar')
+</x-slot:sidebar>
diff --git a/routes/web.php b/routes/web.php
@@ -4,6 +4,7 @@
 use App\Http\Controllers\ProjectsPortfolioController;
 use Carbon\Carbon;
 use Illuminate\Support\Facades\Route;
+use Livewire\Volt\Volt;
 use Spatie\Sitemap\Sitemap;
 use Spatie\Sitemap\Tags\Url as SitemapUrl;
 
@@ -26,7 +27,7 @@
 Route::get('/projects', [ProjectsPortfolioController::class, 'index'])->name('portfolio');
 Route::prefix('/blog')
 	->group(static function () {
-		Route::get('/', [BlogPostsController::class, 'index'])->name('blog');
+		Volt::route('/', 'blog-feed')->name('blog');
 		Route::get('/{post:slug}', [BlogPostsController::class, 'show'])->name('blog.show');
 	});
 
@@ -36,22 +37,18 @@
 		ttl()->days(7)->get(),
 
 		static fn (): Sitemap => Sitemap::create()
-
 			->add(SitemapUrl::create(route('home'))
 				->setLastModificationDate(Carbon::today())
 				->setChangeFrequency(SitemapUrl::CHANGE_FREQUENCY_WEEKLY)
 				->setPriority(0.1))
-
 			->add(SitemapUrl::create(route('privacy'))
 				->setLastModificationDate(Carbon::today())
 				->setChangeFrequency(SitemapUrl::CHANGE_FREQUENCY_MONTHLY)
 				->setPriority(0.1))
-
 			->add(SitemapUrl::create(route('blog'))
 				->setLastModificationDate(Carbon::today())
 				->setChangeFrequency(SitemapUrl::CHANGE_FREQUENCY_WEEKLY)
 				->setPriority(0.1))
-
 			->add(\App\Models\Post::all())
 	)
 		->toResponse($request));