work on photo page, mostly

app/Http/Controllers/BlogController.php

@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class BlogController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}

app/Http/Controllers/PhotoController.php

@@ -12,7 +12,6 @@ public function index()
     {
         return view('photos.index', [
             'photos' => Photo::all(),
-            'tags' => Tag::limit(5)->get()
         ]);
     }
 }

app/Models/Photo.php

@@ -7,7 +7,7 @@
 
 class Photo extends Model
 {
-//    use HasFactory;
+    use HasFactory;
 
     protected $fillable = [
         'image_src',

database/factories/PhotoFactory.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\Photo;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+class PhotoFactory extends Factory
+{
+    protected $model = Photo::class;
+
+    public function definition(): array
+    {
+        $rand = rand(0,2);
+        switch (rand(0,2)) {
+            case 0:
+                $src = '/images/vancouver.jpg';
+                break;
+            case 1:
+                $src = '/images/toronto.webp';
+                break;
+            case 2:
+                $src = '/images/quebec.webp';
+                break;
+        }
+
+        return [
+            'image_src' => $src,
+            'alt_text' => '',
+            'description' => ''
+        ];
+    }
+}

database/seeders/DatabaseSeeder.php

@@ -4,6 +4,7 @@
 
 // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
 use App\Models\BlogPost;
+use App\Models\Photo;
 use App\Models\Tag;
 use Illuminate\Database\Seeder;
 
@@ -18,5 +19,8 @@ public function run(): void
             TagSeeder::class,
             BlogPostSeeder::class,
         ]);
+
+        // todo: remove when finished testing
+        Photo::factory(50)->create();
     }
 }

resources/sass/app.scss

@@ -1,13 +1,10 @@
 // Fonts
-//@import url('https://fonts.bunny.net/css?family=Nunito');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 @import url('/node_modules/bootstrap-icons/font/bootstrap-icons.css');
 
 // Variables
 @import 'variables';
 
-//$font-size-base: 1rem;
-
 // Navbar overrides
 $navbar-light-color: var(--bs-blue);
 $navbar-light-hover-color: var(--bs-blue);
@@ -30,3 +27,31 @@ a:hover {
   font-style: italic;
   margin-top: 1em;
 }
+
+
+// photo gallery
+.image-gallery {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-gallery > li {
+  height: 300px;
+  cursor: pointer;
+  position: relative;
+}
+
+.image-gallery li img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.image-gallery::after {
+  content: "";
+  flex-grow: 999;
+}
+

resources/views/navbar.blade.php

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-light bg-white py-4 ">
     <div class="container">
         <a class="navbar-brand" href="{{ url('/') }}">
-            {{ config('app.name', 'Laravel') }}
+            {{ config('app.name', 'Niisse.net') }}
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
@@ -11,9 +11,9 @@
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <!-- Left Side Of Navbar -->
-            <ul class="navbar-nav me-auto">
+{{--            <ul class="navbar-nav me-auto">--}}
 
-            </ul>
+{{--            </ul>--}}
 
             <!-- Right Side Of Navbar -->
             <ul class="navbar-nav ms-auto">

resources/views/photos/index.blade.php

@@ -1,9 +1,15 @@
 @extends('layouts.app')
 
 @section('content')
+    <div class="">
+        <ul class="image-gallery list-unstyled justify-content-center">
 
-    <div class="col-md-9 px-4">
+            @foreach($photos as $photo)
-        :D
+                <li>
+                    <img class="" src="{{$photo->image_src}}" alt="">
+                </li>
+            @endforeach
+
+        </ul>
     </div>
-
 @endsection

routes/web.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\BlogController;
 use App\Http\Controllers\HomeController;
 use App\Http\Controllers\PhotoController;
 use Illuminate\Support\Facades\Route;
@@ -21,3 +22,4 @@
 
 Route::get('/', [HomeController::class, 'index'])->name('home');
 Route::get('/photos', [PhotoController::class, 'index'])->name('photos');
+Route::get('/blog', [BlogController::class, 'index'])->name('blog');