microsite
Version:
<br /> <br />
210 lines (209 loc) • 14.7 kB
JavaScript
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,
};