merge(v12-p): preview article 3 zones + colonnes scrollables indep
This commit is contained in:
Jules Neny
@@ -1,23 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
interface JournalItem {
|
||||
id: string
|
||||
platform: 'substack' | 'gitea' | 'github' | 'instagram' | 'castopod' | 'blog' | 'linkedin'
|
||||
hashtag: string
|
||||
date: string
|
||||
titre: string
|
||||
extrait: string
|
||||
url: string
|
||||
thumbnail: string | null
|
||||
}
|
||||
|
||||
const selectedItem = ref<JournalItem | null>(null)
|
||||
const iframeRef = ref<HTMLIFrameElement | null>(null)
|
||||
const wrapperRef = ref<HTMLDivElement | null>(null)
|
||||
const skeletonHidden = ref(false)
|
||||
|
||||
// Force rendu desktop de l'iframe AEP : viewport simulée 1440px + scale dynamique
|
||||
// Force rendu desktop de l'iframe AEP : viewport simulee 1440px + scale dynamique
|
||||
const VIEWPORT_W = 1440
|
||||
const iframeScale = ref(0.42)
|
||||
let resizeObs: ResizeObserver | null = null
|
||||
@@ -35,13 +23,7 @@ const iframeStyle = computed(() => ({
|
||||
transformOrigin: '0 0',
|
||||
}))
|
||||
|
||||
const onJournalItemClick = (e: Event) => {
|
||||
const ce = e as CustomEvent
|
||||
if (ce.detail?.item) selectedItem.value = ce.detail.item
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('journal-item-click', onJournalItemClick as EventListener)
|
||||
if (wrapperRef.value && typeof ResizeObserver !== 'undefined') {
|
||||
updateScale()
|
||||
resizeObs = new ResizeObserver(updateScale)
|
||||
@@ -49,16 +31,10 @@ onMounted(() => {
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('journal-item-click', onJournalItemClick as EventListener)
|
||||
resizeObs?.disconnect()
|
||||
resizeObs = null
|
||||
})
|
||||
|
||||
const reset = () => {
|
||||
selectedItem.value = null
|
||||
skeletonHidden.value = false
|
||||
}
|
||||
|
||||
const onIframeLoad = () => {
|
||||
if (iframeRef.value) {
|
||||
iframeRef.value.classList.remove('opacity-0')
|
||||
@@ -66,55 +42,11 @@ const onIframeLoad = () => {
|
||||
}
|
||||
skeletonHidden.value = true
|
||||
}
|
||||
|
||||
const extractInstaShortcode = (url: string): string | null => {
|
||||
const m = url.match(/\/(p|reel)\/([^\/\?#]+)/)
|
||||
return m ? m[2] : null
|
||||
}
|
||||
|
||||
const embedUrl = computed(() => {
|
||||
if (!selectedItem.value) return null
|
||||
const item = selectedItem.value
|
||||
if (item.platform === 'substack') {
|
||||
return item.url.includes('?') ? item.url + '&embed=1' : item.url + '?embed=1'
|
||||
}
|
||||
if (item.platform === 'instagram') {
|
||||
const sc = extractInstaShortcode(item.url)
|
||||
return sc ? `https://www.instagram.com/p/${sc}/embed/` : null
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const platformLabel = (p: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
substack: 'Substack',
|
||||
instagram: 'Instagram',
|
||||
gitea: 'Gitea',
|
||||
github: 'GitHub',
|
||||
castopod: 'Podcast',
|
||||
blog: 'Blog',
|
||||
linkedin: 'LinkedIn',
|
||||
}
|
||||
return labels[p] || p
|
||||
}
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
return isNaN(d.getTime())
|
||||
? ''
|
||||
: `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="embed-dynamique h-full flex flex-col relative">
|
||||
|
||||
<!-- DEFAULT : iframe AEP (aucun item selectionne) -->
|
||||
<div v-if="!selectedItem" class="h-full">
|
||||
<div class="h-full">
|
||||
<div ref="wrapperRef" class="relative h-full bg-neutral-100 overflow-hidden">
|
||||
<div
|
||||
v-if="!skeletonHidden"
|
||||
@@ -134,75 +66,5 @@ const formatDate = (iso: string) => {
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EMBED MODE : teaser + embed live ou carte incitative -->
|
||||
<div v-else class="h-full flex flex-col overflow-y-auto">
|
||||
|
||||
<!-- Header : reset + hashtag -->
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-neutral-200 bg-white sticky top-0 z-10">
|
||||
<button
|
||||
class="text-xs text-neutral-500 hover:text-neutral-900 flex items-center gap-1"
|
||||
@click="reset"
|
||||
type="button"
|
||||
>
|
||||
- Retour a la carte
|
||||
</button>
|
||||
<span class="text-xs text-neutral-400" style="font-family: 'Courier New', Courier, monospace;">
|
||||
{{ selectedItem.hashtag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Teaser -->
|
||||
<div class="px-4 py-3 border-b border-neutral-100 bg-neutral-50">
|
||||
<p class="text-[11px] text-neutral-500 mb-1">{{ formatDate(selectedItem.date) }} - {{ selectedItem.platform }}</p>
|
||||
<h3 class="text-sm font-semibold text-neutral-900 leading-snug mb-1">{{ selectedItem.titre }}</h3>
|
||||
<p v-if="selectedItem.extrait" class="text-xs text-neutral-600 leading-relaxed line-clamp-3">
|
||||
{{ selectedItem.extrait }}
|
||||
</p>
|
||||
<img
|
||||
v-if="selectedItem.thumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
:alt="selectedItem.titre"
|
||||
class="mt-2 w-full max-h-28 object-cover rounded"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Embed live (Substack ou Instagram) -->
|
||||
<div v-if="embedUrl" class="flex-1 min-h-[200px] bg-white">
|
||||
<iframe
|
||||
:src="embedUrl"
|
||||
class="w-full h-full border-0 min-h-[300px]"
|
||||
:title="selectedItem.titre"
|
||||
loading="lazy"
|
||||
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Carte incitative (autres plateformes) -->
|
||||
<div v-else class="flex-1 flex flex-col items-start justify-center px-4 py-6">
|
||||
<p class="text-xs text-neutral-500 mb-3 italic">Embed non disponible pour cette plateforme.</p>
|
||||
<a
|
||||
:href="selectedItem.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block px-4 py-2 bg-neutral-900 text-white text-sm rounded-lg hover:bg-neutral-700 transition-colors"
|
||||
>
|
||||
Voir sur {{ platformLabel(selectedItem.platform) }} ->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA propagation universel -->
|
||||
<div class="px-4 py-3 border-t border-neutral-100">
|
||||
<a
|
||||
:href="selectedItem.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-neutral-500 hover:text-neutral-900 underline"
|
||||
>
|
||||
Continuer sur {{ platformLabel(selectedItem.platform) }} - commenter, partager
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
152
src/components/vue/PreviewArticle.vue
Normal file
152
src/components/vue/PreviewArticle.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
interface JournalItem {
|
||||
id: string
|
||||
platform: 'substack' | 'gitea' | 'github' | 'instagram' | 'castopod' | 'blog' | 'linkedin'
|
||||
hashtag: string
|
||||
date: string
|
||||
titre: string
|
||||
extrait: string
|
||||
url: string
|
||||
thumbnail: string | null
|
||||
}
|
||||
|
||||
const selectedItem = ref<JournalItem | null>(null)
|
||||
|
||||
const onJournalItemClick = (e: Event) => {
|
||||
const ce = e as CustomEvent
|
||||
if (ce.detail?.item) selectedItem.value = ce.detail.item
|
||||
}
|
||||
|
||||
const onPreviewCloseExternal = () => {
|
||||
selectedItem.value = null
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('journal-item-click', onJournalItemClick as EventListener)
|
||||
window.addEventListener('preview-close-request', onPreviewCloseExternal as EventListener)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('journal-item-click', onJournalItemClick as EventListener)
|
||||
window.removeEventListener('preview-close-request', onPreviewCloseExternal as EventListener)
|
||||
})
|
||||
|
||||
const close = () => {
|
||||
selectedItem.value = null
|
||||
window.dispatchEvent(new CustomEvent('preview-close'))
|
||||
}
|
||||
|
||||
const extractInstaShortcode = (url: string): string | null => {
|
||||
const m = url.match(/\/(p|reel)\/([^\/\?#]+)/)
|
||||
return m ? m[2] : null
|
||||
}
|
||||
|
||||
const embedUrl = computed(() => {
|
||||
if (!selectedItem.value) return null
|
||||
const item = selectedItem.value
|
||||
if (item.platform === 'substack') {
|
||||
return item.url.includes('?') ? item.url + '&embed=1' : item.url + '?embed=1'
|
||||
}
|
||||
if (item.platform === 'instagram') {
|
||||
const sc = extractInstaShortcode(item.url)
|
||||
return sc ? `https://www.instagram.com/p/${sc}/embed/` : null
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
const platformLabel = (p: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
substack: 'Substack',
|
||||
instagram: 'Instagram',
|
||||
gitea: 'Gitea',
|
||||
github: 'GitHub',
|
||||
castopod: 'Podcast',
|
||||
blog: 'Blog',
|
||||
linkedin: 'LinkedIn',
|
||||
}
|
||||
return labels[p] || p
|
||||
}
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
try {
|
||||
const d = new Date(iso)
|
||||
return isNaN(d.getTime())
|
||||
? ''
|
||||
: `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}`
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="selectedItem" class="preview-article border border-neutral-200 rounded overflow-hidden bg-white flex flex-col">
|
||||
|
||||
<!-- Header : reset + hashtag -->
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-neutral-200 bg-white">
|
||||
<button
|
||||
class="text-xs text-neutral-500 hover:text-neutral-900 flex items-center gap-1"
|
||||
@click="close"
|
||||
type="button"
|
||||
>
|
||||
- Retour a la carte
|
||||
</button>
|
||||
<span class="text-xs text-neutral-400" style="font-family: 'Courier New', Courier, monospace;">
|
||||
{{ selectedItem.hashtag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Teaser -->
|
||||
<div class="px-4 py-3 border-b border-neutral-100 bg-neutral-50">
|
||||
<p class="text-[11px] text-neutral-500 mb-1">{{ formatDate(selectedItem.date) }} - {{ selectedItem.platform }}</p>
|
||||
<h3 class="text-sm font-semibold text-neutral-900 leading-snug mb-1">{{ selectedItem.titre }}</h3>
|
||||
<p v-if="selectedItem.extrait" class="text-xs text-neutral-600 leading-relaxed line-clamp-3">
|
||||
{{ selectedItem.extrait }}
|
||||
</p>
|
||||
<img
|
||||
v-if="selectedItem.thumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
:alt="selectedItem.titre"
|
||||
class="mt-2 w-full max-h-28 object-cover rounded"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Embed live (Substack ou Instagram) -->
|
||||
<div v-if="embedUrl" class="bg-white" style="height: 60vh; min-height: 400px;">
|
||||
<iframe
|
||||
:src="embedUrl"
|
||||
class="w-full h-full border-0"
|
||||
:title="selectedItem.titre"
|
||||
loading="lazy"
|
||||
sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Carte incitative (autres plateformes) -->
|
||||
<div v-else class="flex flex-col items-start justify-center px-4 py-6">
|
||||
<p class="text-xs text-neutral-500 mb-3 italic">Embed non disponible pour cette plateforme.</p>
|
||||
<a
|
||||
:href="selectedItem.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block px-4 py-2 bg-neutral-900 text-white text-sm rounded-lg hover:bg-neutral-700 transition-colors"
|
||||
>
|
||||
Voir sur {{ platformLabel(selectedItem.platform) }} ->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- CTA propagation universel -->
|
||||
<div class="px-4 py-3 border-t border-neutral-100">
|
||||
<a
|
||||
:href="selectedItem.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-xs text-neutral-500 hover:text-neutral-900 underline"
|
||||
>
|
||||
Continuer sur {{ platformLabel(selectedItem.platform) }} - commenter, partager
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user