updating ui and assets

austintoddj · Aug 15, 2022 · 2b6613c · 2b6613c
1 parent ea9a108
commit 2b6613c
Show file tree

Hide file tree

Showing 9 changed files with 483 additions and 442 deletions.
diff --git a/composer.lock b/composer.lock
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js?id=cb9febf5e790fefc3290e5ad1d527bd7",
+    "/css/app.css": "/css/app.css?id=70b2b1fa07cb5229a01c3a946cc214e7"
+}
diff --git a/stubs/ui/Http/Controllers/CanvasUiController.stub b/stubs/ui/Http/Controllers/CanvasUiController.stub
@@ -35,7 +35,8 @@ class CanvasUiController extends Controller
     {
         $post = Post::query()
                     ->with('user', 'tags', 'topic')
-                    ->firstOrFail('slug', $slug);
+                    ->where('slug', $slug)
+                    ->firstOrFail();
 
         event(new PostViewed($post));
 
@@ -60,7 +61,9 @@ class CanvasUiController extends Controller
      */
     public function showTag(Request $request, string $slug)
     {
-        $tag = Tag::query()->firstOrFail('slug', $slug);
+        $tag = Tag::query()
+                  ->where('slug', $slug)
+                  ->firstOrFail();
 
         return view('canvas-ui.show-tag')->with([
             'tag' => $tag,
@@ -86,7 +89,9 @@ class CanvasUiController extends Controller
      */
     public function showTopic(Request $request, string $slug)
     {
-        $topic = Topic::query()->firstOrFail('slug', $slug);
+        $topic = Topic::query()
+                      ->where('slug', $slug)
+                      ->firstOrFail();
 
         return view('canvas-ui.show-topic')->with([
             'topic' => $topic,
@@ -101,7 +106,9 @@ class CanvasUiController extends Controller
      */
     public function showUser(Request $request, string $id)
     {
-        $user = User::query()->firstOrFail('slug', $id);
+        $user = User::query()
+                    ->where('id', $id)
+                    ->firstOrFail();
 
         return view('canvas-ui.show-user')->with([
             'user' => $user,

diff --git a/stubs/ui/routes/web.stub b/stubs/ui/routes/web.stub
@@ -1,23 +1,9 @@
 
 Route::prefix('canvas-ui')->group(function () {
-    Route::prefix('api')->group(function () {
-        Route::get('posts', [\App\Http\Controllers\CanvasUiController::class, 'getPosts']);
-        Route::get('posts/{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showPost'])
-             ->middleware('Canvas\Http\Middleware\ExpireTrafficInSession');
-
-        Route::get('tags', [\App\Http\Controllers\CanvasUiController::class, 'getTags']);
-        Route::get('tags/{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showTag']);
-        Route::get('tags/{slug}/posts', [\App\Http\Controllers\CanvasUiController::class, 'getPostsForTag']);
-
-        Route::get('topics', [\App\Http\Controllers\CanvasUiController::class, 'getTopics']);
-        Route::get('topics/{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showTopic']);
-        Route::get('topics/{slug}/posts', [\App\Http\Controllers\CanvasUiController::class, 'getPostsForTopic']);
-
-        Route::get('users/{id}', [\App\Http\Controllers\CanvasUiController::class, 'showUser']);
-        Route::get('users/{id}/posts', [\App\Http\Controllers\CanvasUiController::class, 'getPostsForUser']);
-    });
-
-    Route::get('/{view?}', [\App\Http\Controllers\CanvasUiController::class, 'index'])
-         ->where('view', '(.*)')
-         ->name('canvas-ui');
+    Route::get('/', [\App\Http\Controllers\CanvasUiController::class, 'index']);
+    Route::get('{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showPost'])
+         ->middleware('Canvas\Http\Middleware\ExpireTrafficInSession');
+    Route::get('tag/{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showTag']);
+    Route::get('topic/{slug}', [\App\Http\Controllers\CanvasUiController::class, 'showTopic']);
+    Route::get('user/{id}', [\App\Http\Controllers\CanvasUiController::class, 'showUser']);
 });
diff --git a/stubs/ui/views/index.blade.php b/stubs/ui/views/index.blade.php
@@ -1,64 +1,39 @@
 @extends('canvas-ui.layout')
 
+@section('title', 'Canvas UI')
+
 @section('content')
-    <div class="relative py-16 bg-white overflow-hidden">
-        <div class="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
-            <div class="relative h-full text-lg max-w-prose mx-auto" aria-hidden="true">
-                <svg class="absolute top-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
-                    <defs>
-                        <pattern id="74b3fd99-0a6f-4271-bef2-e80eeafdf357" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-                            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-                        </pattern>
-                    </defs>
-                    <rect width="404" height="384" fill="url(#74b3fd99-0a6f-4271-bef2-e80eeafdf357)" />
-                </svg>
-                <svg class="absolute top-1/2 right-full transform -translate-y-1/2 -translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
-                    <defs>
-                        <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-                            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-                        </pattern>
-                    </defs>
-                    <rect width="404" height="384" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)" />
-                </svg>
-                <svg class="absolute bottom-12 left-full transform translate-x-32" width="404" height="384" fill="none" viewBox="0 0 404 384">
-                    <defs>
-                        <pattern id="d3eb07ae-5182-43e6-857d-35c643af9034" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-                            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-                        </pattern>
-                    </defs>
-                    <rect width="404" height="384" fill="url(#d3eb07ae-5182-43e6-857d-35c643af9034)" />
-                </svg>
-            </div>
-        </div>
-        <div class="relative px-4 sm:px-6 lg:px-8">
-            <div class="text-lg max-w-prose mx-auto">
-                <h1>
-                    <span class="block text-base text-center text-indigo-600 font-semibold tracking-wide uppercase">Introducing</span>
-                    <span class="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">JavaScript for Beginners</span>
-                </h1>
-                <p class="mt-8 text-xl text-gray-500 leading-8">Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.</p>
+    <div class="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+        <div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
+            <div>
+                <h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">Canvas UI</h2>
+                <div class="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:gap-5 lg:items-center">
+                    <p class="text-xl text-gray-500">Sometimes creating a blog is easier said than done. With Canvas, it's just easier.</p>
+                    <div class="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
+                        <div class="mt-2 mr-3 flex-shrink-0 w-full flex sm:mt-0 sm:w-auto sm:inline-flex">
+                            <a href="#" class="mt-2 text-base font-medium text-gray-500 hover:text-gray-900"> Sign in </a>
+                        </div>
+                        <div class="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex">
+                            <button type="button" class="w-full bg-indigo-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto sm:inline-flex">Get Started</button>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">
-                <p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
-                <ul role="list">
-                    <li>Quis elit egestas venenatis mattis dignissim.</li>
-                    <li>Cras cras lobortis vitae vivamus ultricies facilisis tempus.</li>
-                    <li>Orci in sit morbi dignissim metus diam arcu pretium.</li>
-                </ul>
-                <p>Quis semper vulputate aliquam venenatis egestas sagittis quisque orci. Donec commodo sit viverra aliquam porttitor ultrices gravida eu. Tincidunt leo, elementum mattis elementum ut nisl, justo, amet, mattis. Nunc purus, diam commodo tincidunt turpis. Amet, duis sed elit interdum dignissim.</p>
-                <h2>From beginner to expert in 30 days</h2>
-                <p>Id orci tellus laoreet id ac. Dolor, aenean leo, ac etiam consequat in. Convallis arcu ipsum urna nibh. Pharetra, euismod vitae interdum mauris enim, consequat vulputate nibh. Maecenas pellentesque id sed tellus mauris, ultrices mauris. Tincidunt enim cursus ridiculus mi. Pellentesque nam sed nullam sed diam turpis ipsum eu a sed convallis diam.</p>
-                <blockquote>
-                    <p>Sagittis scelerisque nulla cursus in enim consectetur quam. Dictum urna sed consectetur neque tristique pellentesque. Blandit amet, sed aenean erat arcu morbi.</p>
-                </blockquote>
-                <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
-                <figure>
-                    <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=facearea&w=1310&h=873&q=80&facepad=3" alt="" width="1310" height="873">
-                    <figcaption>Sagittis scelerisque nulla cursus in enim consectetur quam.</figcaption>
-                </figure>
-                <h2>Everything you need to get up and running</h2>
-                <p>Purus morbi dignissim senectus mattis <a href="#">adipiscing</a>. Amet, massa quam varius orci dapibus volutpat cras. In amet eu ridiculus leo sodales cursus tristique. Tincidunt sed tempus ut viverra ridiculus non molestie. Gravida quis fringilla amet eget dui tempor dignissim. Facilisis auctor venenatis varius nunc, congue erat ac. Cras fermentum convallis quam.</p>
-                <p>Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit.</p>
+            <div class="mt-6 pt-10 grid gap-16 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
+                @foreach($posts as $post)
+                    <div>
+                        <p class="text-sm text-gray-500">
+                            <time datetime="2020-03-16">{{ $post['published_at']->format('M j, Y') }}</time>
+                        </p>
+                        <a href="{{ url($post['slug']) }}" class="mt-2 block">
+                            <p class="text-xl font-semibold text-gray-900">{{ $post['title'] }}</p>
+                            <p class="mt-3 text-base text-gray-500">{!! \Illuminate\Support\Str::words(strip_tags($post['body']), 30, '...') !!}</p>
+                        </a>
+                        <div class="mt-3">
+                            <a href="{{ url($post['slug']) }}" class="text-base font-semibold text-indigo-600 hover:text-indigo-500"> Read full post </a>
+                        </div>
+                    </div>
+                @endforeach
             </div>
         </div>
     </div>

diff --git a/stubs/ui/views/layout.blade.php b/stubs/ui/views/layout.blade.php
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
-    <title>Canvas UI</title>
+    <title>@yield('title')</title>
 </head>
 <body>
     @yield('content')