Migrate to ssr

app/Http/Controllers/API/SourcesAPIController.php

@@ -9,7 +9,7 @@ use Illuminate\Http\JsonResponse;
 use App\Http\Resources\ArticleResource;
 use App\Http\Controllers\Controller;
 
-class SourcesController extends Controller
+class SourcesAPIController extends Controller
 {    
     /**
      * Return all the avaialble Sources.

app/Http/Controllers/API/TopicsAPIController.php

@@ -9,7 +9,7 @@ use Illuminate\Http\JsonResponse;
 use App\Http\Resources\ArticleResource;
 use App\Http\Controllers\Controller;
 
-class TopicsController extends Controller
+class TopicsAPIController extends Controller
 {
     /**
      * Discover Topics

app/Http/Controllers/ArticlesController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Article;
+
+class ArticlesController extends Controller
+{    
+    /**
+     *  Show a single article
+     *
+     * @param  mixed $article
+     */
+    public function show(Article $article)
+    {
+        return view('articles.show', [
+            'article' => $article->load('topics','source')
+        ]);
+    }
+}

public/js/app.js

@@ -20213,7 +20213,7 @@ var render = function() {
                 "a",
                 {
                   staticClass: "rounded w-full flex flex-col md:flex-row mb-10",
-                  attrs: { href: "" }
+                  attrs: { href: "/article/" + subarticle.id }
                 },
                 [
                   _c("div", { staticClass: "bg-white rounded px-4" }, [
@@ -20334,14 +20334,14 @@ var render = function() {
                   "mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
               },
               [
-                _c("a", { attrs: { href: "#" } }, [
+                _c("a", { attrs: { href: "/article/" + _vm.article.id } }, [
                   _c("img", {
                     staticClass: "rounded-md object-cover w-full h-3/4",
                     attrs: { src: _vm.article.featured_image }
                   })
                 ]),
                 _vm._v(" "),
-                _c("a", { attrs: { href: "#" } }, [
+                _c("a", { attrs: { href: "/article/" + _vm.article.id } }, [
                   _c("h1", {
                     staticClass:
                       "text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper",

resources/js/components/TodaysPick.vue

@@ -16,7 +16,7 @@
             <div class="md:w-4/7">
                 <div v-for="subarticle in subarticles" :key="subarticle.id">
                     <a
-                        href=""
+                        :href="'/article/' + subarticle.id"
                         class="rounded w-full flex flex-col md:flex-row mb-10"
                     >
                         <div class="bg-white rounded px-4">
@@ -92,7 +92,7 @@
                 v-if="article"
             >
                 <a
-                    href="#"
+                    :href="'/article/' + article.id"
                 >
                     <img
                         :src="article.featured_image"
@@ -101,7 +101,7 @@
                 </a>
 
                 <a
-                    href="#"
+                    :href="'/article/' + article.id"
                 >
                     <h1
                         class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper"

resources/js/pages/Article.vue

@@ -1,51 +0,0 @@
-<template>
-    <div>
-        <div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
-        <div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
-          :style="{'background-image':'url(' + article.featured_image + ')'}"
-          ></div>
-        <div class="p-4 absolute bottom-0 right-0 z-20">
-          <h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;" v-text="article.title"></h2>
-          <div class="flex justify-end mt-3">
-            <img v-if="article.source" :src="article.source.logo"
-              class="h-10 w-10 rounded-full mr-2 object-cover" />
-            <div>
-              <p v-if="article.source" class="font-semibold text-gray-200 text-md MvTyper" v-text="article.source.name"></p>
-              <p class="font-semibold text-gray-400 text-xs">{{article.published_date | moment('calendar')}}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="px-4 lg:px-0 mt-12 text-gray-700 max-w-screen-md mx-auto text-lg leading-relaxed">
-        <p v-for="paragraph in article.body" :key="paragraph" class="MvTyper text-right" style="direction:rtl;">
-            {{paragraph}}
-            <br>
-            <br>
-        </p>
-
-      </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            article: []
-        };
-    },
-
-    mounted() {
-        axios.get(`/api/article/${this.$route.params.id}`).then(response => {
-            this.article = response.data.data;
-        });
-    }
-};
-</script>
-
-<style>
-    .image-dark {
-        filter: brightness(50%);
-    }
-</style>

resources/views/articles/show.blade.php

@@ -1,5 +1,34 @@
 @extends('layouts.app')
 
 @section('content')
-    
+<div>
+    <div class="mb-4 md:mb-0 w-full max-w-screen-md mx-auto relative" style="height: 24em;">
+    <div class="absolute left-0 bottom-0 w-full h-full z-10 image-dark"
+      style="background-image: url({{$article->featured_image}});"
+      ></div>
+    <div class="p-4 absolute bottom-0 right-0 z-20">
+    <h2 class="text-3xl font-semibold text-gray-100 leading-relaxed text-right MvAamu" style="direction:rtl;">{{$article->title}}</h2>
+      <div class="flex justify-end mt-3">
+      <img  src="{{$article->source->logo}}"
+          class="h-10 w-10 rounded-full mr-2 object-cover" />
+        <div>
+        <p class="font-semibold text-gray-200 text-md MvTyper">{{$article->source->name}}</p>
+          <p class="font-semibold text-gray-400 text-xs">{{$article->published_date}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="px-4 lg:px-0 mt-12 text-gray-700 max-w-screen-md mx-auto text-lg leading-relaxed">
+      @foreach ($article->body as $block)
+      <p class="MvTyper text-right" style="direction:rtl;">
+        {{$block}}
+        <br>
+        <br>
+    </p>
+      @endforeach
+   
+
+  </div>
+</div>
 @endsection

routes/web.php

@@ -3,6 +3,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Article;
+use App\Http\Controllers\ArticlesController;
 /*
 |--------------------------------------------------------------------------
 | Web Routes
@@ -14,6 +15,12 @@ use App\Article;
 |
 */
 
+Route::get('/', function(){
+    return view('home');
+});
+
+Route::get('/article/{article:id}', [ArticlesController::class,'show'])->name('articles.show');
+
 Route::get('/ogimage', function(Request $request) {
 
     $article = Article::findOrFail($request->query('id'));
@@ -21,6 +28,3 @@ Route::get('/ogimage', function(Request $request) {
     return view('ogimage', ['article' => $article]);
 });
 
-Route::get('{path}', function () {
-    return view('app');
-})->where('path', '(.*)');