SSR Switch

app/Http/Controllers/API/ArticlesAPIController.php

@@ -1,12 +1,13 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\API;
 
 use Illuminate\Http\Request;
 use App\Article;
 use App\Http\Resources\ArticleResource;
+use App\Http\Controllers\Controller;
 
-class ArticlesController extends Controller
+class ArticlesAPIController extends Controller
 {
     public function show(Article $article) : ArticleResource
     {

app/Http/Controllers/API/RecentArticles.php

@@ -1,10 +1,11 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\API;
 
 use App\Article;
 use Illuminate\Http\Request;
 use App\Http\Resources\ArticleResource;
+use App\Http\Controllers\Controller;
 
 final class RecentArticles extends Controller
 {    

app/Http/Controllers/API/SourcesController.php

@@ -1,12 +1,13 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\API;
 
 use App\Http\Resources\SourceResource;
 use Illuminate\Http\Request;
 use App\Source;
 use Illuminate\Http\JsonResponse;
 use App\Http\Resources\ArticleResource;
+use App\Http\Controllers\Controller;
 
 class SourcesController extends Controller
 {    

app/Http/Controllers/API/TodaysPick.php

@@ -1,11 +1,12 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\API;
 
 use Illuminate\Http\Request;
 use App\Article;
 use Illuminate\Support\Carbon;
 use App\Http\Resources\ArticleResource;
+use App\Http\Controllers\Controller;
 
 class TodaysPick extends Controller
 {    

app/Http/Controllers/API/TopicsController.php

@@ -1,12 +1,13 @@
 <?php
 
-namespace App\Http\Controllers;
+namespace App\Http\Controllers\API;
 
 use Illuminate\Http\Request;
 use App\Topic;
 use App\Http\Resources\TopicResource;
 use Illuminate\Http\JsonResponse;
 use App\Http\Resources\ArticleResource;
+use App\Http\Controllers\Controller;
 
 class TopicsController extends Controller
 {

app/Http/Resources/ArticleResource.php

@@ -28,7 +28,7 @@ class ArticleResource extends JsonResource
             "readtime" => (new ReadTime($this->body))->get(),
             "source" => new SourceResource($this->source),
             "topics" => TopicResource::collection($this->topics),
-            "link" => url(route('article.show',$this->id)),
+            "link" => url(route('api.article.show',$this->id)),
             "published_date" => $this->published_date
           
         ];

app/Http/Resources/SourceResource.php

@@ -19,7 +19,7 @@ class SourceResource extends JsonResource
             "slug" => $this->slug,
             "logo" => $this->logo,
             "url" => $this->url,
-            "link" => url(route('sources.show', $this->slug))
+            "link" => url(route('api.sources.show', $this->slug))
         ];
     }
 }

app/Http/Resources/TopicResource.php

@@ -18,7 +18,7 @@ class TopicResource extends JsonResource
             "id" => $this->id,
             "name" => $this->name,
             "slug" => $this->slug,
-            "link" => url(route('topics.show', $this->slug))
+            "link" => url(route('api.topics.show', $this->slug))
         ];
     }
 }

package.json

@@ -25,8 +25,6 @@
     "dependencies": {
         "tailwindcss": "^1.6.2",
         "vue": "^2.6.11",
-        "vue-meta": "^2.4.0",
+        "vue-moment": "^4.1.0"
-        "vue-moment": "^4.1.0",
-        "vue-router": "^3.4.2"
     }
 }

resources/js/app.js

@@ -1,13 +1,19 @@
 require('./bootstrap');
 
 import Vue from 'vue';
-import VueRouter from 'vue-router';
+import TodaysPick from "./components/TodaysPick";
-import routes from './routes';
+import DiscoverTopics from "./components/DiscoverTopics";
+import RecentStories from "./components/RecentStories";
+import AvailableSources from './components/AvailableSources';
 
 Vue.use(require('vue-moment'));
-Vue.use(VueRouter);
 
 const app = new Vue({
     el: '#app',
-    router: new VueRouter(routes)
+    components: {
+        TodaysPick,
+        DiscoverTopics,
+        RecentStories,
+        AvailableSources
+    }
 });

resources/js/components/DiscoverTopics.vue

@@ -7,14 +7,14 @@
         </div>
 
         <div class="flex flex-wrap justify-center">
-            <router-link
+            <a
-                :to="{ name: 'topic.show', params: { slug: topic.slug } }"
+                href=""
                 v-for="topic in topics"
                 :key="topic.id"
                 class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full mr-2 mt-2 mb-4 hover:bg-green-100 MvTyper"
                 style="color:#4A5568;"
                 v-text="topic.name"
-            ></router-link>
+            ></a>
         </div>
     </div>
 </template>

resources/js/components/RecentStories.vue

@@ -12,8 +12,8 @@
             <!-- post cards -->
             <div class="w-full lg:w-2/3">
                 <div v-for="story in recentStories" :key="story.id">
-                    <router-link
+                    <a
-                        :to="{ name: 'article.show', params: { id: story.id } }"
+                        href=""
                         class="block w-full lg:flex mb-10 shadow rounded-lg"
                     >
                         <div
@@ -59,7 +59,7 @@
                             }"
                             :title="story.meta.title"
                         ></div>
-                    </router-link>
+                    </a>
                 </div>
             </div>
         </div>

resources/js/components/TodaysPick.vue

@@ -15,11 +15,8 @@
             <!-- sub-main posts -->
             <div class="md:w-4/7">
                 <div v-for="subarticle in subarticles" :key="subarticle.id">
-                    <router-link
+                    <a
-                        :to="{
+                        href=""
-                            name: 'article.show',
-                            params: { id: subarticle.id }
-                        }"
                         class="rounded w-full flex flex-col md:flex-row mb-10"
                     >
                         <div class="bg-white rounded px-4">
@@ -85,7 +82,7 @@
                             :src="subarticle.featured_image"
                             class="block md:hidden lg:block rounded-md h-64 md:h-32 m-4 md:m-0"
                         />
-                    </router-link>
+                    </a>
                 </div>
             </div>
 
@@ -94,24 +91,24 @@
                 class="mb-4 lg:mb-0 p-4 lg:p-0 w-full md:w-4/7 relative rounded block"
                 v-if="article"
             >
-                <router-link
+                <a
-                    :to="{ name: 'article.show', params: { id: article.id } }"
+                    href="#"
                 >
                     <img
                         :src="article.featured_image"
                         class="rounded-md object-cover w-full h-3/4"
                     />
-                </router-link>
+                </a>
 
-                <router-link
+                <a
-                    :to="{ name: 'article.show', params: { id: article.id } }"
+                    href="#"
                 >
                     <h1
                         class="text-gray-800 text-3xl font-bold mt-2 mb-2 leading-tigh hover:underline text-right MvTyper"
                         style="direction:rtl;"
                         v-text="article.title"
                     ></h1>
-                </router-link>
+                </a>
 
                 <div class="flex justify-end items-center">
                     <div>

resources/js/pages/Home.vue

@@ -1,23 +0,0 @@
-<template>
-    <div>
-        <todays-pick></todays-pick>
-        <discover-topics></discover-topics>
-        <available-sources></available-sources>
-        <recent-stories></recent-stories>
-
-    </div>
-</template>
-<script>
-import TodaysPick from "../components/TodaysPick";
-import DiscoverTopics from "../components/DiscoverTopics";
-import RecentStories from "../components/RecentStories";
-import AvailableSources from '../components/AvailableSources';
-export default {
-    components: {
-        TodaysPick,
-        DiscoverTopics,
-        RecentStories,
-        AvailableSources
-    }
-};
-</script>

resources/js/routes.js

@@ -1,24 +0,0 @@
-import Home from './pages/Home';
-import Article from './pages/Article';
-import Topic from './pages/Topic';
-
-export default {
-    mode: 'history',
-
-
-    routes: [{
-            path: '/',
-            component: Home
-        },
-        {
-            path: '/article/:id',
-            component: Article,
-            name: 'article.show'
-        },
-        {
-            path: '/topic/:slug',
-            component: Topic,
-            name : 'topic.show'
-        }
-    ]
-};

resources/views/articles/show.blade.php

@@ -0,0 +1,5 @@
+@extends('layouts.app')
+
+@section('content')
+    
+@endsection

resources/views/home.blade.php

@@ -0,0 +1,11 @@
+@extends('layouts.app')
+
+@section('content')
+<todays-pick></todays-pick>
+
+<discover-topics></discover-topics>
+
+<available-sources></available-sources>
+
+<recent-stories></recent-stories>
+@endsection

resources/views/layouts/app.blade.php

@@ -44,7 +44,7 @@
             @include('partials.header')
 
             <main class="mt-12">
-                <router-view></router-view>
+                @yield('content')
             </main>
 
             @include('partials.footer')

resources/views/partials/header.blade.php

@@ -3,8 +3,8 @@
     class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
 
     <div class="p-4 flex flex-row items-center justify-between">
-      <router-link to="/"
+      <a href="/"
-        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Baraveli News</router-link>
+        class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Baraveli News</a>
     </div>
 
     <nav class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row">

routes/api.php

@@ -2,9 +2,9 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
-use App\Http\Controllers\ArticlesController;
+use App\Http\Controllers\API\ArticlesAPIController;
-use App\Http\Controllers\SourcesController;
+use App\Http\Controllers\API\SourcesAPIController;
-use App\Http\Controllers\TopicsController;
+use App\Http\Controllers\API\TopicsAPIController;
 
 /*
 |--------------------------------------------------------------------------
@@ -17,13 +17,13 @@ use App\Http\Controllers\TopicsController;
 |
 */
 
-Route::get('today', \TodaysPick::class)->name('today');
+Route::get('today', \API\TodaysPick::class)->name('api.today');
-Route::get('recent', \RecentArticles::class)->name('recent');
+Route::get('recent', \API\RecentArticles::class)->name('api.recent');
 
-Route::get('topics', [TopicsController::class, 'index'])->name('topics.index');
+Route::get('topics', [TopicsAPIController::class, 'index'])->name('api.topics.index');
-Route::get('topic/{topic:slug}', [TopicsController::class, 'show'])->name('topics.show');
+Route::get('topic/{topic:slug}', [TopicsAPIController::class, 'show'])->name('api.topics.show');
 
-Route::get('sources', [SourcesController::class, 'index'])->name('sources.index');
+Route::get('sources', [SourcesAPIController::class, 'index'])->name('api.sources.index');
-Route::get('source/{source:slug}',[SourcesController::class, 'show'])->name('sources.show');
+Route::get('source/{source:slug}',[SourcesAPIController::class, 'show'])->name('api.sources.show');
 
-Route::get('article/{article:id}', [ArticlesController::class, 'show'])->name('article.show');
+Route::get('article/{article:id}', [ArticlesAPIController::class, 'show'])->name('api.article.show');