microsite/dist/head.js

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { h, createContext, Fragment } from "preact";
import { useRef, useContext } from "preact/hooks";
import { __DocContext } from "./document.js";
import render, { renderToString } from "preact-render-to-string";
export let warned = false;
export const __SeoContext = createContext({
    seo: { current: {} },
});
const isComment = (node) => node.nodeType === node.COMMENT_NODE;
const isElement = (node) => node.nodeType === node.ELEMENT_NODE;
export const Head = ({ children }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31;
    const seo = useRef({});
    const { head } = useContext(__DocContext);
    const prevHead = useRef(null);
    render(h(__SeoContext.Provider, { value: { seo } }, children), {}, { pretty: true });
    head.current = [
        h(Fragment, null,
            h("meta", { name: "robots", content: `${((_a = seo.current.robots) === null || _a === void 0 ? void 0 : _a.noindex) ? "noindex" : "index"},${((_b = seo.current.robots) === null || _b === void 0 ? void 0 : _b.nofollow) ? "nofollow" : "follow"}` }),
            h("meta", { name: "googlebot", content: `${((_c = seo.current.robots) === null || _c === void 0 ? void 0 : _c.noindex) ? "noindex" : "index"},${((_d = seo.current.robots) === null || _d === void 0 ? void 0 : _d.nofollow) ? "nofollow" : "follow"}` }),
            seo.current.title && h("title", null, seo.current.title),
            seo.current.description && (h("meta", { name: "description", content: seo.current.description })),
            seo.current.canonical && (h("link", { rel: "canonical", href: seo.current.canonical })),
            ((_f = (_e = seo.current.openGraph) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : seo.current.title) && (h("meta", { property: "og:title", content: (_h = (_g = seo.current.openGraph) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : seo.current.title })),
            ((_k = (_j = seo.current.openGraph) === null || _j === void 0 ? void 0 : _j.description) !== null && _k !== void 0 ? _k : seo.current.description) && (h("meta", { property: "og:description", content: (_m = (_l = seo.current.openGraph) === null || _l === void 0 ? void 0 : _l.description) !== null && _m !== void 0 ? _m : seo.current.description })),
            ((_p = (_o = seo.current.openGraph) === null || _o === void 0 ? void 0 : _o.url) !== null && _p !== void 0 ? _p : seo.current.canonical) && (h("meta", { property: "og:url", content: (_r = (_q = seo.current.openGraph) === null || _q === void 0 ? void 0 : _q.url) !== null && _r !== void 0 ? _r : seo.current.canonical })),
            ((_s = seo.current.openGraph) === null || _s === void 0 ? void 0 : _s.type) && (h("meta", { property: "og:type", content: seo.current.openGraph.type })),
            ((_t = seo.current.images) === null || _t === void 0 ? void 0 : _t.length) &&
                seo.current.images.map((image) => (h(Fragment, null,
                    image.src && h("meta", { property: "og:image", content: image.src }),
                    image.alt && h("meta", { property: "og:image:alt", content: image.alt }),
                    image.width && (h("meta", { property: "og:image:width", content: image.width.toString() })),
                    image.height && (h("meta", { property: "og:image:height", content: image.height.toString() }))))),
            ((_u = seo.current.videos) === null || _u === void 0 ? void 0 : _u.length) &&
                seo.current.videos.map((video) => (h(Fragment, null,
                    video.src && h("meta", { property: "og:video", content: video.src }),
                    video.width && (h("meta", { property: "og:video:width", content: video.width.toString() })),
                    video.height && (h("meta", { property: "og:video:height", content: video.height.toString() }))))),
            ((_v = seo.current.audio) === null || _v === void 0 ? void 0 : _v.length) &&
                seo.current.audio.map((audio) => (h("meta", { property: "og:video", content: audio.src }))),
            ((_w = seo.current.openGraph) === null || _w === void 0 ? void 0 : _w.locale) && (h("meta", { property: "og:locale", content: (_x = seo.current.openGraph) === null || _x === void 0 ? void 0 : _x.locale })),
            ((_z = (_y = seo.current.openGraph) === null || _y === void 0 ? void 0 : _y.altLocales) === null || _z === void 0 ? void 0 : _z.length) && ((_0 = seo.current.openGraph) === null || _0 === void 0 ? void 0 : _0.altLocales.map((locale) => (h("meta", { property: "og:locale:alternate", content: locale })))),
            ((_1 = seo.current.openGraph) === null || _1 === void 0 ? void 0 : _1.siteName) && (h("meta", { property: "og:site_name", content: (_2 = seo.current.openGraph) === null || _2 === void 0 ? void 0 : _2.siteName })),
            ((_3 = seo.current.openGraph) === null || _3 === void 0 ? void 0 : _3.type) === "profile" && (h(Fragment, null,
                ((_4 = seo.current.openGraph) === null || _4 === void 0 ? void 0 : _4.firstName) && (h("meta", { property: "profile:first_name", content: (_5 = seo.current.openGraph) === null || _5 === void 0 ? void 0 : _5.firstName })),
                ((_6 = seo.current.openGraph) === null || _6 === void 0 ? void 0 : _6.lastName) && (h("meta", { property: "profile:last_name", content: (_7 = seo.current.openGraph) === null || _7 === void 0 ? void 0 : _7.lastName })),
                ((_8 = seo.current.openGraph) === null || _8 === void 0 ? void 0 : _8.username) && (h("meta", { property: "profile:username", content: (_9 = seo.current.openGraph) === null || _9 === void 0 ? void 0 : _9.username })),
                ((_10 = seo.current.openGraph) === null || _10 === void 0 ? void 0 : _10.gender) && (h("meta", { property: "profile:gender", content: (_11 = seo.current.openGraph) === null || _11 === void 0 ? void 0 : _11.gender })))),
            ((_12 = seo.current.openGraph) === null || _12 === void 0 ? void 0 : _12.type) === "book" && (h(Fragment, null,
                ((_14 = (_13 = seo.current.openGraph) === null || _13 === void 0 ? void 0 : _13.authors) === null || _14 === void 0 ? void 0 : _14.length) && ((_15 = seo.current.openGraph) === null || _15 === void 0 ? void 0 : _15.authors.map((author) => (h("meta", { property: "book:author", content: author })))),
                ((_16 = seo.current.openGraph) === null || _16 === void 0 ? void 0 : _16.isbn) && (h("meta", { property: "book:isbn", content: (_17 = seo.current.openGraph) === null || _17 === void 0 ? void 0 : _17.isbn })),
                ((_19 = (_18 = seo.current.openGraph) === null || _18 === void 0 ? void 0 : _18.tags) === null || _19 === void 0 ? void 0 : _19.length) && ((_20 = seo.current.openGraph) === null || _20 === void 0 ? void 0 : _20.tags.map((tag) => (h("meta", { property: "book:tag", content: tag })))),
                ((_21 = seo.current.openGraph) === null || _21 === void 0 ? void 0 : _21.releaseDate) && (h("meta", { property: "profile:username", content: (_22 = seo.current.openGraph) === null || _22 === void 0 ? void 0 : _22.releaseDate.toISOString() })))),
            ((_23 = seo.current.openGraph) === null || _23 === void 0 ? void 0 : _23.type) === "article" && (h(Fragment, null,
                ((_24 = seo.current.openGraph) === null || _24 === void 0 ? void 0 : _24.publishedTime) && (h("meta", { property: "article:published_time", content: seo.current.openGraph.publishedTime.toISOString() })),
                ((_25 = seo.current.openGraph) === null || _25 === void 0 ? void 0 : _25.modifiedTime) && (h("meta", { property: "article:modified_time", content: seo.current.openGraph.modifiedTime.toISOString() })),
                ((_26 = seo.current.openGraph) === null || _26 === void 0 ? void 0 : _26.expirationTime) && (h("meta", { property: "article:expiration_time", content: seo.current.openGraph.expirationTime.toISOString() })),
                ((_28 = (_27 = seo.current.openGraph) === null || _27 === void 0 ? void 0 : _27.authors) === null || _28 === void 0 ? void 0 : _28.length) && ((_29 = seo.current.openGraph) === null || _29 === void 0 ? void 0 : _29.authors.map((author) => (h("meta", { property: "article:author", content: author })))),
                seo.current.openGraph.section && (h("meta", { property: "article:section", content: seo.current.openGraph.section })),
                ((_30 = seo.current.openGraph.tags) === null || _30 === void 0 ? void 0 : _30.length) &&
                    seo.current.openGraph.tags.map((tag) => (h("meta", { property: "article:tag", content: tag }))))),
            ((_31 = seo.current.facebook) === null || _31 === void 0 ? void 0 : _31.appId) && (h("meta", { property: "fb:app_id", content: seo.current.facebook.appId })),
            seo.current.twitter && (h(Fragment, null,
                seo.current.twitter.card && (h("meta", { name: "twitter:card", content: seo.current.twitter.card })),
                seo.current.twitter.handle && (h("meta", { name: "twitter:creator", content: `@${seo.current.twitter.handle}`.replace(/^@@/, "@") })),
                seo.current.twitter.site && (h("meta", { name: "twitter:site", content: `@${seo.current.twitter.site}`.replace(/^@@/, "@") }))))),
    ];
    const _children = Array.isArray(children) ? children : [children];
    head.current.push(_children.map((child) => {
        if (child.type === "title" && !child.props["data-microsite-ignore"]) {
            console.warn(`Prefer microsite's built-in <seo.title> component over <title>${child.props.children}</title>`);
            if (!warned) {
                console.warn(`\nimport { seo } from 'microsite/head';\nTo suppress this wanring, pass <title data-microsite-ignore />`);
                warned = true;
            }
        }
        return child;
    }));
    if (typeof window !== "undefined") {
        if (!prevHead.current)
            document.head.prepend(document.createComment("microsite:end"));
        let html = renderToString(h(Fragment, null, head.current), {}, { pretty: true });
        if (prevHead.current !== html) {
            // TODO: this side-effect doesn't run with Snowpack HMR with cached response
            if (prevHead.current) {
                let managed = false;
                for (const node of Array.from(document.head.childNodes)) {
                    if (isComment(node)) {
                        if (node.nodeValue === "microsite:start") {
                            managed = true;
                            continue;
                        }
                        if (node.nodeValue === "microsite:end")
                            return;
                    }
                    if (managed) {
                        if (isElement(node) &&
                            node.nextSibling &&
                            isComment(node.nextSibling) &&
                            node.nextSibling.nodeValue === "microsite:end") {
                            node.insertAdjacentHTML("afterend", html);
                        }
                        node.remove();
                    }
                }
            }
        }
        if (!prevHead.current) {
            const template = document.createElement("template");
            template.innerHTML = html;
            document.head.prepend(template.content.cloneNode(true));
            document.head.prepend(document.createComment("microsite:start"));
        }
        prevHead.current = html;
    }
    return null;
};
const normalizeChildren = (children) => {
    if (Array.isArray(children))
        return children.map(normalizeChildren).join("");
    if (["string", "number"].includes(typeof children))
        return children.toString();
    if (typeof children === "boolean")
        return children ? "" : null;
    return render(children, {});
};
const robots = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.robots = props;
    return null;
};
const title = ({ children }) => {
    const { seo } = useContext(__SeoContext);
    seo.current.title = normalizeChildren(children);
    return null;
};
const description = ({ children }) => {
    const { seo } = useContext(__SeoContext);
    seo.current.description = normalizeChildren(children);
    return null;
};
const image = (_a) => {
    var _b;
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.images = [...((_b = seo.current.images) !== null && _b !== void 0 ? _b : []), props];
    return null;
};
const video = (_a) => {
    var _b;
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.videos = [...((_b = seo.current.videos) !== null && _b !== void 0 ? _b : []), props];
    return null;
};
const audio = (_a) => {
    var _b;
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.audio = [...((_b = seo.current.audio) !== null && _b !== void 0 ? _b : []), props];
    return null;
};
const canonical = ({ children }) => {
    const { seo } = useContext(__SeoContext);
    seo.current.canonical = normalizeChildren(children);
    return null;
};
const twitter = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.twitter = props;
    return null;
};
const facebook = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.facebook = props;
    return null;
};
const openGraph = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    const { seo } = useContext(__SeoContext);
    seo.current.openGraph = props;
    return null;
};
export const seo = {
    robots,
    title,
    description,
    image,
    video,
    audio,
    canonical,
    twitter,
    facebook,
    openGraph,
};