From 550fafeee559e6d4ed60a1e42f17101b9f64fdb7 Mon Sep 17 00:00:00 2001 From: Graphictoria Date: Wed, 5 Oct 2022 23:41:05 -0400 Subject: [PATCH] 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. --- .../Http/Controllers/Blog/BlogController.php | 15 +++++++++ web/app/Providers/RouteServiceProvider.php | 1 + web/resources/js/pages/Blog.js | 33 +++++++++++++++++++ web/resources/sass/Graphictoria.scss | 12 ++++++- web/resources/views/blog/404.blade.php | 9 +++++ web/resources/views/blog/home.blade.php | 22 +++++++++++++ web/resources/views/layouts/blog.blade.php | 2 +- .../views/layouts/blog/nav.blade.php | 22 +++++++++---- web/routes/blog.php | 6 ++-- web/webpack.mix.js | 1 + 10 files changed, 112 insertions(+), 11 deletions(-) create mode 100644 web/app/Http/Controllers/Blog/BlogController.php create mode 100644 web/resources/js/pages/Blog.js create mode 100644 web/resources/views/blog/404.blade.php create mode 100644 web/resources/views/blog/home.blade.php diff --git a/web/app/Http/Controllers/Blog/BlogController.php b/web/app/Http/Controllers/Blog/BlogController.php new file mode 100644 index 0000000..05636ed --- /dev/null +++ b/web/app/Http/Controllers/Blog/BlogController.php @@ -0,0 +1,15 @@ +middleware('web') ->namespace('App\Http\Controllers\Blog') + ->name('blog.') ->group(base_path('routes/blog.php')); // diff --git a/web/resources/js/pages/Blog.js b/web/resources/js/pages/Blog.js new file mode 100644 index 0000000..39d8da1 --- /dev/null +++ b/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(); + } +}); \ No newline at end of file diff --git a/web/resources/sass/Graphictoria.scss b/web/resources/sass/Graphictoria.scss index 5188d16..bba18a6 100644 --- a/web/resources/sass/Graphictoria.scss +++ b/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; } diff --git a/web/resources/views/blog/404.blade.php b/web/resources/views/blog/404.blade.php new file mode 100644 index 0000000..194a706 --- /dev/null +++ b/web/resources/views/blog/404.blade.php @@ -0,0 +1,9 @@ +@extends('layouts.blog') + +@section('content') +
+

404

+

We weren't able to find the page you were looking for.

+ Go Home +
+@endsection \ No newline at end of file diff --git a/web/resources/views/blog/home.blade.php b/web/resources/views/blog/home.blade.php new file mode 100644 index 0000000..ce5ac46 --- /dev/null +++ b/web/resources/views/blog/home.blade.php @@ -0,0 +1,22 @@ +@extends('layouts.blog') + +@section('content') +
+
+ + +
+ +
+ @for($i = 0; $i < 30; $i++) + + +

Blog Post Title

+

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...

+

Author | October 5, 2022

+ + + @endfor +
+
+@endsection \ No newline at end of file diff --git a/web/resources/views/layouts/blog.blade.php b/web/resources/views/layouts/blog.blade.php index 3c10459..def4b42 100644 --- a/web/resources/views/layouts/blog.blade.php +++ b/web/resources/views/layouts/blog.blade.php @@ -23,7 +23,7 @@ - + @endonce @yield('extra-headers') @yield('page-specific') diff --git a/web/resources/views/layouts/blog/nav.blade.php b/web/resources/views/layouts/blog/nav.blade.php index 3fd10bd..c14b9d0 100644 --- a/web/resources/views/layouts/blog/nav.blade.php +++ b/web/resources/views/layouts/blog/nav.blade.php @@ -1,7 +1,7 @@
-
+
-
\ No newline at end of file +
\ No newline at end of file diff --git a/web/routes/blog.php b/web/routes/blog.php index dda3776..5b09802 100644 --- a/web/routes/blog.php +++ b/web/routes/blog.php @@ -1,5 +1,7 @@ name('home'); + +Route::fallback(function () { + return response(view('blog.404'), 404); }); \ No newline at end of file diff --git a/web/webpack.mix.js b/web/webpack.mix.js index bc43023..6731472 100644 --- a/web/webpack.mix.js +++ b/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')