Blog edits.

- Added some more frontend for the blog. This includes a general layout for the home page and a basic 404 page.

- Added a 404 page.

- Changed urls to use routes instead.

- Added RSS button, functionality is still to-do.

web/app/Http/Controllers/Blog/BlogController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers\Blog;
+
+use Illuminate\Http\Request;
+
+use App\Http\Controllers\Controller;
+
+class BlogController extends Controller
+{
+    public function home()
+	{
+		return view('blog.home');
+	}
+}

web/app/Providers/RouteServiceProvider.php

@@ -53,6 +53,7 @@ class RouteServiceProvider extends ServiceProvider
             Route::domain('blog.' . DomainHelper::TopLevelDomain())
                 ->middleware('web')
 				->namespace('App\Http\Controllers\Blog')
+				->name('blog.')
                 ->group(base_path('routes/blog.php'));
 			
 			//

web/resources/js/pages/Blog.js

@@ -0,0 +1,33 @@
+/*
+	Graphictoria 5 (https://gtoria.net)
+	Copyright © XlXi 2022
+*/
+
+import $ from 'jquery';
+import * as Bootstrap from 'bootstrap';
+import React from 'react';
+
+const navId = 'gt-blog-nav';
+const hideClass = 'graphictoria-blognav-hide';
+
+function scrollChanged() {
+	const nav = document.getElementById(navId);
+	const scr = document.documentElement.scrollTop;
+	
+	if(scr < Math.max(120, 330 - nav.offsetHeight)) {
+		if(!nav.classList.contains(hideClass))
+			nav.classList.add(hideClass);
+	}
+	else
+	{
+		if(nav.classList.contains(hideClass))
+			nav.classList.remove(hideClass);
+	}
+}
+
+$(document).ready(function() {
+	if (document.getElementById(navId)) {
+		window.addEventListener('scroll', scrollChanged);
+		scrollChanged();
+	}
+});

web/resources/sass/Graphictoria.scss

@@ -374,7 +374,7 @@ html {
 	background-size: cover!important;
 	background-repeat: no-repeat!important;
 	background-position: center!important;
-	height: 330px;
+	min-height: 330px;
 	background: #141414;
 }
 
@@ -565,6 +565,16 @@ html {
   }
 }
 
+.graphictoria-blognav {
+	transition: background 100ms, border-color 100ms;
+	transition-timing-function: ease-out;
+}
+
+.graphictoria-blognav-hide {
+	background: #ffffff00!important;
+	border-color: #ffffff00!important;
+}
+
 .graphictoria-nav-margin {
   margin-top: 63px;
 }

web/resources/views/blog/404.blade.php

@@ -0,0 +1,9 @@
+@extends('layouts.blog')
+
+@section('content')
+<div class="container text-center my-5">
+	<h1>404</h1>
+	<h3>We weren't able to find the page you were looking for.</h3>
+	<a class="text-decoration-none fw-normal" href="{{ route('blog.home') }}">Go Home</a>
+</div>
+@endsection

web/resources/views/blog/home.blade.php

@@ -0,0 +1,22 @@
+@extends('layouts.blog')
+
+@section('content')
+<div class="container my-3">
+	<div class="input-group px-lg-5">
+		<input type="text" class="form-control d-lg-flex" placeholder="Title, content, or tags">
+		<button class="btn btn-primary">Search</button>
+	</div>
+	
+	<div class="row row-cols-lg-3 row-cols-sm-2 row-cols-1 my-2">
+		@for($i = 0; $i < 30; $i++)
+		<a class="col text-decoration-none text-reset py-2" href="#">
+			<span>
+				<h4 class="mb-0">Blog Post Title</h4>
+				<p class="text-muted my-1">This is an example description for this blog post. This text is meant to give the reader a brief view of what the blog post is about. Server-sided truncation will be used to prevent this card form getting too lar...</p>
+				<p class="text-primary"><b>Author</b> | October 5, 2022</p>
+			</span>
+		</a>
+		@endfor
+	</div>
+</div>
+@endsection

web/resources/views/layouts/blog.blade.php

@@ -23,7 +23,7 @@
 			<link href="{{ asset('favicon.ico') }}" rel="icon" integrity="{{ Sri::hash('favicon.ico') }}" crossorigin="anonymous" />
 			<link href="{{ asset('images/logo.png') }}" rel="apple-touch-icon" integrity="{{ Sri::hash('images/logo.png') }}" crossorigin="anonymous" />
 			<link href="{{ mix('css/Graphictoria.css') }}" rel="stylesheet" integrity="{{ Sri::hash('css/graphictoria.css') }}" crossorigin="anonymous" />
-			<script src="{{ mix('js/app.js') }}" integrity="{{ Sri::hash('js/app.js') }}" crossorigin="anonymous"></script>
+			<script src="{{ mix('js/Blog.js') }}" integrity="{{ Sri::hash('js/Blog.js') }}" crossorigin="anonymous"></script>
 		@endonce
 		@yield('extra-headers')
 		@yield('page-specific')

web/resources/views/layouts/blog/nav.blade.php

@@ -1,7 +1,7 @@
 <div class="container graphictoria-smaller-page fixed-top">
-	<div class="navbar navbar-expand-lg graphictoria-navbar rounded m-2">
+	<div class="navbar navbar-expand-lg graphictoria-navbar rounded m-2 graphictoria-blognav" id="gt-blog-nav">
 		<div class="container-fluid px-4">
-			<a class="navbar-brand" href="/">
+			<a class="navbar-brand" href="{{ route('blog.home') }}">
 				<img src="{{ asset('/images/logo.png') }}" alt="Graphictoria" width="43" height="43" draggable="false"/>
 				&nbsp;Blog
 			</a>
@@ -9,19 +9,27 @@
 				<span class="navbar-toggler-icon"></span>
 			</button>
 			<div class="collapse navbar-collapse justify-content-md-center" id="graphictoria-nav">
-				<ul class="navbar-nav">
+				<ul class="navbar-nav mx-auto">
 					<li class="nav-item">
 						<a class="nav-link active" href="{{ url('/') }}">Home</a>
 					</li>
-					<li class="nav-item">
-						<a class="nav-link" href="{{ url('/') }}">About</a>
-					</li>
 					<li class="nav-item">
 						<a class="nav-link" href="https://gtoria.net">Main Site</a>
 					</li>
 				</ul>
+				<ul class="navbar-nav">
+					<li class="nav-item">
+						{{-- TODO: XlXi: Replace this with a route. --}}
+						<a class="nav-link text-danger" target="_blank" href="{{ url('/rss') }}"><i class="fa-solid fa-square-rss"></i></a>
+					</li>
+				</ul>
 			</div>
 		</div>
 	</div>
 </div>
-<div class="graphictoria-blog shadow-sm"></div>
+<div
+	class="graphictoria-blog shadow-sm"
+	@if(View::hasSection('image-replacement'))
+	style="background-image: url('{{ View::getSection('image-replacement') }}')!important;"
+	@endif
+></div>

web/routes/blog.php

@@ -1,5 +1,7 @@
 <?php
 
-Route::get('/', function(){
-	return view('layouts.blog');
+Route::get('/', 'BlogController@home')->name('home');
+
+Route::fallback(function () {
+    return response(view('blog.404'), 404);
 });

web/webpack.mix.js

@@ -7,6 +7,7 @@ const mix = require('laravel-mix');
 require('laravel-mix-banner');
 
 mix.js('resources/js/app.js', 'public/js')
+	.js('resources/js/pages/Blog.js', 'public/js')
 	.js('resources/js/pages/Maintenance.js', 'public/js')
 	.js('resources/js/pages/Dashboard.js', 'public/js')
 	.js('resources/js/pages/Shop.js', 'public/js')