✨ Support more type of attachments
This commit is contained in:
parent
fc4c884ade
commit
44572badcc
29
src/components/AttachmentRenderer.astro
Normal file
29
src/components/AttachmentRenderer.astro
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
import { getAttachmentUrl } from '../scripts/attachment'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
data: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: attachment } = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
{
|
||||||
|
attachment.mimetype.startsWith('image') ? (
|
||||||
|
<a href={getAttachmentUrl(attachment.rid)} target="_blank">
|
||||||
|
<img
|
||||||
|
src={getAttachmentUrl(attachment.rid)}
|
||||||
|
alt={attachment.alt}
|
||||||
|
class="rounded-lg"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
) : attachment.mimetype.startsWith('video') ? (
|
||||||
|
<video src={getAttachmentUrl(attachment.rid)} controls class="rounded-lg" />
|
||||||
|
) : attachment.mimetype.startsWith('audio') ? (
|
||||||
|
<audio src={getAttachmentUrl(attachment.rid)} controls class="rounded-lg" />
|
||||||
|
) : (
|
||||||
|
<a href={getAttachmentUrl(attachment.rid)} target="_blank">
|
||||||
|
Unable to preview, but you can open it in your broswer.
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
@ -6,6 +6,7 @@ import { Icon } from 'astro-icon/components'
|
|||||||
import { marked } from 'marked'
|
import { marked } from 'marked'
|
||||||
|
|
||||||
import Layout from '../../layouts/Layout.astro'
|
import Layout from '../../layouts/Layout.astro'
|
||||||
|
import AttachmentRenderer from '../../components/AttachmentRenderer.astro'
|
||||||
import { getAttachmentUrl, fetchAttachmentMeta } from '../../scripts/attachment'
|
import { getAttachmentUrl, fetchAttachmentMeta } from '../../scripts/attachment'
|
||||||
|
|
||||||
const { slug } = Astro.params
|
const { slug } = Astro.params
|
||||||
@ -85,24 +86,25 @@ const attachments = await fetchAttachmentMeta(data.body.attachments)
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
<article class="prose max-w-none max-md:prose-lg" set:html={content} />
|
<article>
|
||||||
|
<div class="prose max-w-none max-md:prose-lg" set:html={content} />
|
||||||
|
|
||||||
{
|
{
|
||||||
attachments && (
|
attachments && (
|
||||||
<div class="attachment-list mt-5 gap-4 grid grid-cols-1 md:grid-cols-2">
|
<div
|
||||||
{attachments.map((attachment) => (
|
class="attachment-list mt-5 gap-4 grid grid-cols-1"
|
||||||
<div class="attachment">
|
class:list={
|
||||||
<a href={getAttachmentUrl(attachment.rid)} target="_blank">
|
attachments.length >= 2 ? 'md:grid-cols-2' : 'md:grid-cols-1'
|
||||||
<img
|
}
|
||||||
src={getAttachmentUrl(attachment.rid)}
|
>
|
||||||
alt={attachment.alt}
|
{attachments.map((attachment) => (
|
||||||
class="rounded-lg"
|
<div class="attachment">
|
||||||
/>
|
<AttachmentRenderer data={attachment} />
|
||||||
</a>
|
</div>
|
||||||
</div>
|
))}
|
||||||
))}
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
}
|
||||||
}
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
Loading…
Reference in New Issue
Block a user