Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-docs. quick setup, simple, minimalistic docs for your github project flo-bit.dev/tiny-docs
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102---import { parseOpenGraph } from "./lib";import type { HTMLAttributes } from "astro/types";
export type Props = HTMLAttributes<"a"> & { showMedia?: boolean; showDescription?: boolean; showTitle?: boolean; showDomain?: boolean;
showGradient?: boolean;
blurMedia?: boolean;
id?: string;
title?: string; description?: string;};
const { href, id, class: className, showDescription = false, showTitle = true, showDomain = true, showMedia = true, showGradient = true, target = "_blank", title, description, ...props} = Astro.props;
const meta = await parseOpenGraph((href ?? id)?.toString() ?? "");
if (title && meta) meta.title = title;if (description && meta) meta.description = description;
const domain = meta?.url ? new URL(meta.url).hostname.replace("www.", "") : "";---
<article class:list={[ "group max-w-lg my-6 relative isolate flex flex-col justify-end overflow-hidden not-prose aspect-[1200/630] rounded-2xl border border-base-400 dark:border-base-800 bg-base-200/50 dark:bg-base-950/50 p-4", className, ]} {...Astro.props}> { !showMedia ? null : meta?.video && meta.videoType ? ( <video autoplay loop muted preload="metadata" width="1200" height="630" class="absolute inset-0 w-full h-full object-cover -z-10 rounded-2xl" > <source src={meta.video} type={meta.videoType} /> </video> ) : meta?.image ? ( <img src={meta.image} alt={meta.imageAlt || ""} width="1200" height="630" class="absolute inset-0 w-full h-full object-cover -z-10 rounded-2xl" /> ) : null }
{ showGradient ? ( <div class="absolute inset-0 -z-10 bg-gradient-to-t from-base-200/90 rounded-2xl to-base-200/40 dark:from-base-950 dark:to-base-950/60" /> ) : null }
{ showDomain ? ( <div class="text-xs dark:text-accent-500 text-accent-600 font-bold"> {domain ?? ""} </div> ) : null } <div class="text-lg font-semibold text-base-950 dark:text-base-50"> <a href={href ?? id} {...props} {target}> <span class="absolute inset-0"></span> <div class={showTitle ? "" : "sr-only"}>{meta?.title ?? href}</div> </a> </div> { showDescription ? ( <div class="text-xs dark:text-base-300 text-base-700 line-clamp-2"> {meta?.description ?? ""} </div> ) : null }</article>