126 lines
3.9 KiB
Vue
126 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { useOgImageRuntimeConfig } from "#og-image/app/utils"
|
|
import { useSiteConfig } from "#site-config/app/composables"
|
|
import { computed, defineComponent, h, resolveComponent } from "vue"
|
|
|
|
const props = defineProps({
|
|
colorMode: { type: String, required: false, default: "light" },
|
|
title: { type: String, required: false, default: "title" },
|
|
description: { type: String, required: false, default: null },
|
|
icon: { type: [String, Boolean], required: false, default: null },
|
|
siteName: { type: String, required: false, default: null },
|
|
siteLogo: { type: String, required: false, default: null },
|
|
theme: { type: String, required: false, default: "#3f51b5" },
|
|
backgroundImage: { type: String, required: false, default: null },
|
|
avatarUrl: { type: String, required: false, default: null }
|
|
})
|
|
const runtimeConfig = useOgImageRuntimeConfig()
|
|
const colorMode = computed(() => {
|
|
return props.colorMode || runtimeConfig.colorPreference || "light"
|
|
})
|
|
|
|
|
|
|
|
const textShadow = computed(() => {
|
|
return '2px 2px 8px rgba(0,0,0,0.8)'
|
|
})
|
|
const siteConfig = useSiteConfig()
|
|
const siteName = computed(() => {
|
|
return props.siteName || siteConfig.name
|
|
})
|
|
|
|
const IconComponent = runtimeConfig.hasNuxtIcon
|
|
? resolveComponent("Icon")
|
|
: defineComponent({
|
|
render() {
|
|
return h("div", "missing @nuxt/icon")
|
|
}
|
|
})
|
|
if (
|
|
typeof props.icon === "string" &&
|
|
!runtimeConfig.hasNuxtIcon &&
|
|
import.meta.dev
|
|
) {
|
|
console.warn(
|
|
"Please install `@nuxt/icon` to use icons with the fallback OG Image component."
|
|
)
|
|
console.log("\nnpx nuxi module add icon\n")
|
|
}
|
|
|
|
const apiBaseServer = useSolarNetworkUrl()
|
|
|
|
function toAbsoluteUrl(url: string | undefined) {
|
|
if (!url) return undefined
|
|
if (url.startsWith("http"))
|
|
return `${siteConfig.url}/__og/convert-image?url=${encodeURIComponent(url)}`
|
|
if (url.startsWith("/api"))
|
|
return `${siteConfig.url}/__og/convert-image?url=${encodeURIComponent(
|
|
`${apiBaseServer}${url.replace("/api", "")}`
|
|
)}`
|
|
return `${siteConfig.url}${url}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="w-full h-full flex justify-between relative text-white"
|
|
:class="[
|
|
...(colorMode === 'light'
|
|
? ['bg-white']
|
|
: ['bg-gray-900'])
|
|
]"
|
|
>
|
|
<div
|
|
v-if="backgroundImage"
|
|
class="absolute inset-0 w-full h-full"
|
|
:class="colorMode === 'light' ? 'bg-white/80' : 'bg-gray-900/80'"
|
|
/>
|
|
<img
|
|
v-if="backgroundImage"
|
|
:src="toAbsoluteUrl(backgroundImage)"
|
|
class="absolute top-0 left-0 w-full h-full object-cover"
|
|
style="min-width: 1200px; min-height: 600px; filter: blur(8px)"
|
|
/>
|
|
<div class="h-full w-full justify-between relative p-[60px]">
|
|
<div class="flex flex-row justify-between items-start">
|
|
<div class="flex flex-col w-full max-w-[65%]">
|
|
<h1
|
|
class="m-0 font-bold mb-[30px] text-[75px]"
|
|
style="display: block; text-overflow: ellipsis"
|
|
:style="{ lineClamp: description ? 2 : 3, textShadow }"
|
|
>
|
|
{{ title }}
|
|
</h1>
|
|
<p
|
|
v-if="description"
|
|
class="text-[35px] leading-12 text-white"
|
|
style="display: block; line-clamp: 3; text-overflow: ellipsis"
|
|
:style="{ textShadow }"
|
|
>
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
<div v-if="Boolean(icon)" style="width: 30%" class="flex justify-end">
|
|
<IconComponent
|
|
:name="icon"
|
|
size="250px"
|
|
style="margin: 0 auto; opacity: 0.7"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row justify-end items-center text-right gap-3 w-full">
|
|
<p v-if="siteName" style="font-size: 25px" class="font-bold" :style="{ textShadow }">
|
|
{{ siteName }}
|
|
</p>
|
|
<img
|
|
v-if="avatarUrl"
|
|
:src="toAbsoluteUrl(avatarUrl)"
|
|
height="60"
|
|
width="60"
|
|
class="rounded-full mr-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|