WIP: Add basic Neumorphic design and organize blades

config/blog.php

@@ -13,4 +13,15 @@ return [
 
     'publishing_name' => 'Jon\'s Words',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Subheading
+    |--------------------------------------------------------------------------
+    |
+    | The one sentence abbreviation of the blog that will display below the name
+    |
+    */
+
+    'subheading' => 'A blog with an as yet unclear direction.',
+
 ];

database/factories/ArticleFactory.php

@@ -76,7 +76,7 @@ class ArticleFactory extends Factory
             $dice_roll = rand(0,100);
 
             if($dice_roll <= 50) { // Make a SubTitle
-                $markdown_result .= '# ' . fake()->words(rand(1,5), true) . "\n";
+                $markdown_result .= '## ' . fake()->words(rand(1,5), true) . "\n";
             } elseif ($dice_roll <= 100) { // Make a paragraph
                 $markdown_result .= fake()->sentences(rand(2,5), true) . "\n";
             }

database/seeders/DatabaseSeeder.php

@@ -22,5 +22,12 @@ class DatabaseSeeder extends Seeder
         $test_author = Author::factory()->user($test_user)->create();
 
         Article::factory()->author($test_author)->count(30)->create();
+
+        $random_article = Article::where('id', '<', 10)->inRandomOrder()->first();
+
+        $random_article->body = "<script>
+                                    alert('oh shit. XSS might be possible here!')
+                                </script>";
+        $random_article->save();
     }
 }

public/word-salad.css

@@ -1,3 +1,31 @@
 @view-transition {
   navigation: auto;
 }
+
+body {
+  background-color: #813d9c; /* Primary Purple */
+  color: white;
+  text-shadow: 1px 1px 2px blueviolet;
+}
+
+a {
+  text-decoration-color: aqua;
+  color: aqua;
+}
+
+#top-bar {
+  padding: 0.5em;
+  background-color: rgba(red, green, blue, 0.2);
+  border-bottom: 1px solid white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bubble-panel {
+  border-radius: 50px;
+  background: #813d9c;
+  box-shadow:  -33px 33px 65px #66307b,
+              33px -33px 65px #9c4abd;
+  padding: 2em;
+}

resources/views/article-preview.blade.php

@@ -1,6 +0,0 @@
-<article>
-    <h2>{{ $article['title'] }}</h2>
-    <p>hey</p>
-    <img src="{{ $article['header_image_url']}}" />
-    <p>{{ Illuminate\Support\Str::limit($article['body'], 200) }}</p>
-</article>

resources/views/guest/all-articles.blade.php

@@ -1,8 +1,14 @@
+@extends('layouts.guest')
+
+@section('title', 'Recent Articles')
+
+@section('content')
 <div>
     Count: {{ count($all_articles) }}
     @forelse($all_articles as $index => $article)
-        @include('article-preview')
+        @include('guest.article-preview')
     @empty
         <h4>No articles found, unlucky.</h4>
     @endforelse
 </div>
+@endsection

resources/views/guest/article-preview.blade.php

@@ -0,0 +1,6 @@
+<article>
+    <h2><a href="{{ route('article', $article['slug']) }}">{{ $article['title'] }}</a></h2>
+    <p>hey</p>
+    <img src="{{ $article['header_image_url']}}" />
+    <p>{!! Illuminate\Support\Str::limit($article['body'], 100) !!}</p>
+</article>

resources/views/guest/article.blade.php

@@ -0,0 +1,22 @@
+@extends('layouts.guest')
+
+@section('title', $article['title'])
+
+@section('content')
+<article>
+    <a href="{{ url()->previous() }}">&nbsp;&nbsp;&larr;&nbsp;Go Back</a>
+    <img src="{{ $article['header_image_url'] }}" />
+    <h1>{{ $article['title'] }}</h1>
+    <h2>{{ $article['subtitle'] }}</h2>
+    <p>{{ $article['author']['display_name'] }}</p>
+    <p>Published At: {{ $article['published_at'] }}</p>
+    <ul>
+        <li><a href="{{ $article['primary_link'] }}">Link 1</a></li>
+        <li><a href="{{ $article['secondary_link'] }}">Link 2</a></li>
+        <li><a href="{{ $article['mastodon_handle'] }}">Mastodon</a></li>
+    </ul>
+    <main>
+        {!! $article['body'] !!}
+    </main>
+</article>
+@endsection

resources/views/guest/home.blade.php

@@ -0,0 +1,10 @@
+@extends('layouts.guest')
+
+@section('title', 'Home')
+
+@section('content')
+<section id="blog-head" class="bubble-panel">
+    <h1>{{ config('blog.publishing_name') }}<h1>
+    <p><i>{{ config('blog.subheading') }}</i></p>
+</section>
+@endsection

resources/views/guest/top-bar.blade.php

@@ -0,0 +1,3 @@
+<section id="top-bar">
+    UNRWA is working tirelessly to alleviate the horrors of genocide in Gaza.&nbsp;<a href="https://www.unrwausa.org/donate">Support them here</a>&nbsp;🇵🇸
+</section>

resources/views/layouts/guest.blade.php

@@ -6,12 +6,14 @@
 
         <link href="/word-salad.css" rel="stylesheet" />
 
-        <title>{{ config('blog.publishing_name') }} | Home</title>
+        <title>{{ config('blog.publishing_name') }} | @yield('title')</title>
     </head>
     <body>
+
+        @include('guest.top-bar')
+
         <main>
-            <h2>Hey guys, check back soon for some word-based #content</h2>
-            <a href="{{ route('recent-articles') }}">Recent Articles</a>
+            @yield('content', 'Nothing to see here.')
         </main>
     </body>
 </html>

routes/web.php

@@ -15,7 +15,7 @@ use Illuminate\Support\Facades\Route;
 */
 
 Route::get('/', function () {
-    return view('home');
+    return view('guest.home');
 });
 
 Route::get('/test-insert', function () {
@@ -24,5 +24,17 @@ Route::get('/test-insert', function () {
 
 Route::get('/recent-articles', function () {
     $all_articles = Article::where('published_at', '<', now())->limit(10)->get();
-    return view('all-articles', ['all_articles' => $all_articles]);
+    return view('guest.all-articles', ['all_articles' => $all_articles]);
 })->name('recent-articles');
+
+Route::get('/post/{article_slug}', function ($article_slug) {
+    $active_article = Article::with('author')
+        ->where('published_at', '<', now())
+        ->where('slug', $article_slug)
+        ->first();
+
+    if(empty($active_article)) {
+        return abort(404);
+    }
+    return view('guest.article', ['article' => $active_article]);
+})->name('article');