zenn
5f2b2b8c4f
Ordered list, 멀티라인/대체 인용구 문법을 추가하고 Prose 컴포넌트(리스트/인용/이미지/카드/임베드) 기본 스타일을 Thred 톤으로 통일했다. Co-authored-by: Cursor <cursoragent@cursor.com>
58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
url: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
/**
|
|
* YouTube 영상 ID를 추출
|
|
* @param {string} value - 임베드 URL
|
|
* @returns {string} YouTube 영상 ID
|
|
*/
|
|
const getYouTubeId = (value) => {
|
|
try {
|
|
const parsedUrl = new URL(value)
|
|
|
|
if (parsedUrl.hostname.includes('youtu.be')) {
|
|
return parsedUrl.pathname.replace('/', '')
|
|
}
|
|
|
|
if (parsedUrl.hostname.includes('youtube.com')) {
|
|
return parsedUrl.searchParams.get('v') || parsedUrl.pathname.split('/').pop() || ''
|
|
}
|
|
} catch {
|
|
return ''
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
const youtubeId = computed(() => getYouTubeId(props.url))
|
|
const youtubeEmbedUrl = computed(() => youtubeId.value ? `https://www.youtube.com/embed/${youtubeId.value}` : '')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="prose-embed my-8 overflow-hidden rounded-[10px] border border-[var(--site-line)] bg-[var(--site-panel)]">
|
|
<iframe
|
|
v-if="youtubeEmbedUrl"
|
|
class="prose-embed__frame aspect-video w-full"
|
|
:src="youtubeEmbedUrl"
|
|
title="Embedded video"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen
|
|
/>
|
|
<a
|
|
v-else
|
|
class="prose-embed__link block p-5 text-sm font-semibold text-[var(--site-text)] hover:opacity-70"
|
|
:href="url"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{{ url }}
|
|
</a>
|
|
</div>
|
|
</template>
|