@r4ai/remark-embed/dist/transformers/link-card/presets/html.js

[](https://jsr.io/@r4ai/remark-embed) [](https://codecov.io/gh/r4ai/remark-embed) [![CI](https://github.com/r4ai/remark-emb

import { defu } from "defu";
import { h } from "../../utils.js";
/**
 * The default options for the HTML preset of the {@link transformerLinkCard}.
 */
export const defaultHtmlPresetOptions = {
    classNamePrefix: "link-card",
    openInNewTab: true,
    faviconAlt: (info) => `Favicon for ${new URL(info.url).hostname}`,
    imageLoading: "lazy",
    imageDecoding: "async",
};
/**
 * The options preset to generate an HTML link card.
 *
 * @example
 * ```ts
 *  const html = (
 *   await unified()
 *     .use(remarkParse)
 *     .use(remarkRehype)
 *     .use(remarkEmbed, {
 *       transformers: [transformerOEmbed(htmlPreset())],
 *     })
 *     .use(rehypeStringify)
 *     .process("<https://r4ai.dev/posts/docker_tutorial/>")
 * ).toString()
 * ```
 * Yields:
 * ```html
 * <p>
 *   <a href="https://r4ai.dev/posts/docker_tutorial/" class="link-card" target="_blank" rel="noopener noreferrer">
 *       <div class="link-card__container">
 *           <div class="link-card__info">
 *               <div class="link-card__title">Docker 入門 | r4ai.dev</div>
 *               <div class="link-card__description">Tech blog by Rai</div>
 *               <div class="link-card__link">
 *                   <img class="link-card__favicon" src="https://r4ai.dev/favicon.svg" alt="Favicon for r4ai.dev" loading="lazy" decoding="async">
 *                   <span class="link-card__hostname">r4ai.dev</span>
 *               </div>
 *           </div>
 *           <div class="link-card__image">
 *             <img src="https://r4ai.dev/posts/docker_tutorial/ogimage.png" loading="lazy" decoding="async">
 *           </div>
 *       </div>
 *   </a>
 * </p>
 * ```
 */
export const htmlPreset = (_options) => {
    const options = defu(_options, defaultHtmlPresetOptions);
    return {
        tagName: () => "a",
        properties: (info) => ({
            className: options.classNamePrefix,
            href: info.url,
            ...(options.openInNewTab && {
                target: "_blank",
                rel: "noopener noreferrer",
            }),
        }),
        children: (info) => [
            h("div", { className: `${options.classNamePrefix}__container` }, h("div", { className: `${options.classNamePrefix}__info` }, h("div", { className: `${options.classNamePrefix}__title` }, info.title), info.description &&
                h("div", { className: `${options.classNamePrefix}__description` }, info.description), h("div", { className: `${options.classNamePrefix}__link` }, h("img", {
                className: `${options.classNamePrefix}__favicon`,
                src: info.favicon,
                alt: options.faviconAlt(info),
                loading: options.imageLoading,
                decoding: options.imageDecoding,
            }), h("span", { className: `${options.classNamePrefix}__hostname` }, new URL(info.url).hostname))), info.image.src &&
                h("div", { className: `${options.classNamePrefix}__image` }, h("img", {
                    src: info.image.src,
                    alt: info.image.alt,
                    loading: options.imageLoading,
                    decoding: options.imageDecoding,
                }))),
        ],
    };
};