Vue SPA components

resources/js/pages/Article.vue

@@ -0,0 +1,51 @@
+<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 left-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>