Image bug fixed

terrerox · Feb 3, 2023 · fc1120e · fc1120e · vercel · Feb 3, 2023
1 parent 09bfd15
commit fc1120e
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 116 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,37 +1,10 @@
 <script setup>
 import Header from './components/Header.vue'
+import Navbar from './components/Navbar.vue'
 </script>
 
 <template>
   <Header />
-  <section class="section-navigation mb-4">
-    <div class="">
-      <nav class="navbar navbar-expand-lg navbar-light">
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <router-link to="/" class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></router-link>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Próximamente</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Próximamente</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Próximamente</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Próximamente</a>
-            </li>
-          </ul>
-          <form class="form-inline my-2 my-lg-0 d-none">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
-        </div>
-      </nav>
-    </div>
-  </section>
+  <Navbar />
   <router-view></router-view>
 </template>
diff --git a/src/components/CategorySection.vue b/src/components/CategorySection.vue
@@ -38,7 +38,7 @@ const sidePosts = [postOne, postTwo]
                                 :key="post.slug"
                             >
                                 <div class="post-media" @click="goToPost(post.slug)">
-                                    <img class="img-fluid" :src="post.instagramMediaUrl" />
+                                    <img class="img-fluid" :src="post.instagramThumbnailUrl" />
                                 </div>
                                 <div class="post-header">
                                     <div class="post-supertitle">CATEGORY</div>
@@ -63,7 +63,7 @@ const sidePosts = [postOne, postTwo]
                                 <div class="row">
                                     <div class="col-auto">
                                         <div class="post-media" @click="goToPost(post.slug)">
-                                            <img :src="post.instagramMediaUrl" width="100">
+                                            <img :src="post.instagramThumbnailUrl" width="100">
                                         </div>
                                     </div>
                                     <div class="col">

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,3 +1,11 @@
+<script setup>
+const currentDate = new Date().toLocaleString('es', {
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+})
+</script>
 <template>
   <header class="header py-1">
     <div class="container">
@@ -6,7 +14,7 @@
           <div class="row no-gutters">
             <div class="col-6 col-lg-12">
               <div class="font-weight-bold">
-                <i class="fa fa-calendar-o" aria-hidden="true"></i> Friday 15 Sep 2018
+                <i class="fa fa-calendar-o" aria-hidden="true"></i> {{ currentDate }}
               </div>
             </div>
             <div class="col-6 col-lg-12">

diff --git a/src/components/Layout.vue b/src/components/Layout.vue
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -0,0 +1,26 @@
+<template>
+  <section class="section-navigation mb-4">
+      <nav class="navbar navbar-expand-lg navbar-light">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+              <router-link to="/" class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></router-link>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Nacionales</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Extranjeras</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Deportes</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Curiosas</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Educación sexual</a>
+            </li>
+          </ul>
+      </nav>
+  </section>
+</template>
diff --git a/src/components/Post.vue b/src/components/Post.vue
diff --git a/src/components/Promotions/Advertisment.vue b/src/components/Promotions/Advertisment.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { usePostStore } from '../../store/posts'
+
+const advertisment = usePostStore().advertisment
+</script>
+<template>
+        <div class="mb-5 text-center bg-hard-light">
+            <div class="small" style="background-color: rgba(0,0,0,0.05)"><span
+                    class="text-muted font-alegreya">ADVERTISMENT</span></div>
+            <div class="py-2">
+                <img :src="advertisment.image.url" class="img-fluid" />
+            </div>
+        </div>
+</template>
diff --git a/src/components/PromotionBanner.vue → ...components/Promotions/PromotionBanner.vue b/src/components/PromotionBanner.vue → ...components/Promotions/PromotionBanner.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { usePostStore } from '../store/posts'
+import { usePostStore } from '../../store/posts'
 
 const banner = usePostStore().banner
 </script>
@@ -8,7 +8,8 @@ const banner = usePostStore().banner
     <div class="container">
       <div class="row py-4">
         <div class="col text-center">
-          <img :src="banner.image.url" class="img-fluid" />
+          <img :src="banner.image.url" v-if="banner.image" class="img-fluid" />
+          <h3 v-else>Promocionate aquí</h3>
         </div>
       </div>
     </div>

diff --git a/src/components/RightSection.vue b/src/components/RightSection.vue
@@ -1,27 +1,22 @@
 <script setup>
 import { usePostStore } from '../store/posts'
 import { useRouter } from 'vue-router';
+
+import Advertisment from './Promotions/Advertisment.vue';
 const router = useRouter()
 
 function goToPost(slug) { 
   router.push({ path: slug })
 }
 const postStore = usePostStore()
-const advertisment = postStore.advertisment
 
 const assignClass = (index) => {
     return (index === 0 && 'mb-3') || (index === 1 && 'mb-3 pb-3 border-bottom') || ''
 }
 </script>
 <template>
     <div class="col-12 order-2 order-lg-3 col-sm-12 col-lg-5 col-xl-4 mb-3 mb-lg-0 ">
-        <div class="mb-5 text-center bg-hard-light">
-            <div class="small" style="background-color: rgba(0,0,0,0.05)"><span
-                    class="text-muted font-alegreya">ADVERTISMENT</span></div>
-            <div class="py-2">
-                <img :src="advertisment.image.url" class="img-fluid" />
-            </div>
-        </div>
+        <Advertisment />
         <div 
             class="post"
             :class="assignClass(index)"

diff --git a/src/components/Station.vue b/src/components/Station.vue
diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -38,7 +38,8 @@ export function assignPromotionSections(promotion) {
     advertisment
   }
 }
-export function assignArraySections(posts) {
+export function assignArraySections(rawPosts) {
+  const posts = mapPosts(rawPosts)
   const heroPosts = [], 
         leftPosts = [], 
         rightPosts = [], 
@@ -84,4 +85,33 @@ export function assignArraySections(posts) {
     mainPost
   }
 }
+
+function mapPosts(posts) {
+  return posts.map(post => {
+    const {
+      datetime,
+      description,
+      id,
+      instagramMediaUrl,
+      instagramThumbnailUrl,
+      mediaType,
+      mediaUrl,
+      preview,
+      slug,
+      title,
+    } = post
+    return {
+      datetime, 
+      description, 
+      id,
+      instagramMediaUrl, 
+      instagramThumbnailUrl: instagramThumbnailUrl || instagramMediaUrl, 
+      mediaType, 
+      mediaUrl,
+      preview, 
+      slug, 
+      title,
+    }
+  })
+}
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -3,13 +3,12 @@ import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router';
 import { usePostStore } from '../store/posts'
 import Hero from '../components/Hero.vue'
-import Post from '../components/Post.vue'
 
 import CenterSection from '../components/CenterSection.vue'
 import LeftSection from '../components/LeftSection.vue'
 import RightSection from '../components/RightSection.vue'
 
-import PromotionBanner from '../components/PromotionBanner.vue'
+import PromotionBanner from '../components/Promotions/PromotionBanner.vue'
 
 import CategorySection from '../components/CategorySection.vue'