blog ui

Author: nguyentranchung

app/Http/Controllers/Blog/BlogController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Blog;
+
+use App\Http\Controllers\Controller;
+use App\Models\Blog\Post;
+
+class BlogController extends Controller
+{
+    public function index()
+    {
+        $posts = Post::query()
+            ->where('published_at', '<=', now())
+            ->orderBy('published_at', 'desc')
+            ->paginate(10);
+
+        return view('blog.blog', [
+            'posts' => $posts,
+        ]);
+    }
+}

app/Http/Controllers/Blog/CategoryController.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Http\Controllers\Blog;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class CategoryController extends Controller
+{
+    //
+}

app/Http/Controllers/Blog/PostController.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Http\Controllers\Blog;
+
+use App\Http\Controllers\Controller;
+use App\Models\Blog\Post;
+
+class PostController extends Controller
+{
+    public function show(Post $post)
+    {
+        return view('blog.blog-detail', [
+            'post' => $post,
+        ]);
+    }
+}

app/Http/Controllers/Blog/TagController.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Http\Controllers\Blog;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class TagController extends Controller
+{
+    //
+}

package.json

@@ -12,5 +12,8 @@
         "laravel-vite-plugin": "^1.2.0",
         "tailwindcss": "^4.0.0",
         "vite": "^6.2.4"
+    },
+    "dependencies": {
+        "iconify-icon": "2.3.0"
     }
 }

pnpm-lock.yaml

@@ -1,11 +1,18 @@
-@import 'tailwindcss';
+@import "./tailwind.css";
 
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
 @source '../../storage/framework/views/*.php';
 @source '../**/*.blade.php';
 @source '../**/*.js';
 
-@theme {
+/* @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
+} */
+
+/* To avoid layout shift, add this to your CSS: */
+iconify-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
 }

public/logo.svg

@@ -0,0 +1,17 @@
+/*********************************/
+/*             General            */
+/*===============================*/
+.container {
+    @apply w-full mx-auto px-3;
+}
+p {
+    @apply leading-relaxed;
+}
+
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    @apply leading-normal;
+}
+
+::selection {
+    @apply bg-indigo-600/90 text-white;
+}

resources/css/app.css

@@ -0,0 +1,29 @@
+/*********************************/
+/*             Contact           */
+/*===============================*/
+
+/* Validation */
+.error {
+    @apply my-2 mx-0 hidden text-red-600;
+}
+  
+#ajaxsuccess {
+    @apply text-base w-full hidden clear-both my-2 mx-0;
+}
+
+.error_message,
+#success_page {
+    @apply p-2.5 mb-5 text-center rounded-md;
+}
+
+.error_message {
+    @apply bg-red-600/5 text-red-600;
+}
+
+.contact-loader {
+    @apply hidden;
+}
+  
+#success_page {
+    @apply bg-emerald-600/5 text-emerald-600;
+}