diff --git a/src/helpers/index.js b/src/helpers/index.js index 4b4e43d..906576c 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -31,7 +31,7 @@ const createSlug = (str) => { export const convertTimestampToDate = (timestamp) => { const date = new Date(timestamp); - return date.toLocaleString('en-US') + return date.toLocaleString('pt-br', { hour12: true }) } export const extractDataOfCaption = (caption) => { diff --git a/src/store/posts.js b/src/store/posts.js index 54dedac..a7dbf36 100644 --- a/src/store/posts.js +++ b/src/store/posts.js @@ -12,17 +12,25 @@ export const usePostStore = defineStore('posts', { actions: { getAll() { this.isLoading = true - return fetch(`https://graph.facebook.com/v14.0/17841413817530260?fields=media%7Btimestamp%2C%20caption%2C%20id%2C%20%20thumbnail_url%7D&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`) + return fetch(`https://graph.facebook.com/v14.0/17841413817530260?fields=media%7Bcaption%2Cmedia_type%2Cmedia_url%2Ctimestamp%2C%20thumbnail_url%7D&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`) .then(res => { return res.json(); }) .then(json => { const posts = json.media.data.map(post => { - const { id, caption, thumbnail_url, timestamp } = post + const { + id, + caption, + thumbnail_url, + timestamp, + media_type, + media_url + } = post const data = extractDataOfCaption(caption) return { id, - image_url: thumbnail_url, + media_url: thumbnail_url || media_url, + media_type, ...data, date: convertTimestampToDate(timestamp) } @@ -37,17 +45,27 @@ export const usePostStore = defineStore('posts', { }, getOne(id) { this.isLoading = true - return fetch(`https://graph.facebook.com/v14.0/${id}?fields=caption%2Cthumbnail_url%2Ctimestamp&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`) + return fetch(`https://graph.facebook.com/v14.0/${id}?fields=caption%2Cthumbnail_url%2Ctimestamp%2Cmedia_type%2Cmedia_url&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`) .then(res => { return res.json(); }) .then(json => { - const data = extractDataOfCaption(json.caption) + const { + id, + caption, + thumbnail_url, + timestamp, + media_type, + media_url + } = json + const data = extractDataOfCaption(caption) const res = { - date: convertTimestampToDate(json.timestamp), - image_url: json.thumbnail_url, + date: convertTimestampToDate(timestamp), + media_url, + media_type, ...data }; + console.log(res) this.calculateNextAndPreviousPost(id) this.post = res; this.isLoading = false diff --git a/src/style.css b/src/style.css index f3f2c23..6d3910e 100644 --- a/src/style.css +++ b/src/style.css @@ -264,11 +264,11 @@ a:focus { margin-top: var(--spacing-8); } -.image-section { +.media-section { display: flex; } -.image-section > img { +.media-section > img, .media-section > video { width: 630px; height: 474px; } diff --git a/src/views/BlogPost.vue b/src/views/BlogPost.vue index cba6efd..b4def9f 100644 --- a/src/views/BlogPost.vue +++ b/src/views/BlogPost.vue @@ -3,12 +3,11 @@ import { ref, watchEffect } from 'vue' import { useRoute } from 'vue-router'; import { usePostStore } from '../store/posts' -import Bio from "../components/Bio.vue" import Layout from '../components/Layout.vue' const route = useRoute() const location = route.fullPath -const siteTitle = ref('Alerta Los Frailes') +const siteTitle = ref('Alerta RD') const postStore = usePostStore() @@ -35,8 +34,12 @@ watchEffect(
{{postStore.post.title}}
{{postStore.post.date}}
--