alinea
Version:
Headless git-based CMS
115 lines (111 loc) • 6.67 kB
JavaScript
import {
dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";
// src/field/metadata/MetadataField.view.tsx
import { FormRow } from "alinea/dashboard/atoms/FormAtoms";
import { InputForm } from "alinea/dashboard/editor/InputForm";
import { useFieldOptions } from "alinea/dashboard/editor/UseField";
import { useEntryEditor } from "alinea/dashboard/hook/UseEntryEditor";
import { usePreviewMetadata } from "alinea/dashboard/view/preview/BrowserPreview";
// src/field/metadata/MetadataField.module.scss
var MetadataField_module_default = {
"preview": "alinea-MetadataField-preview",
"preview-subtitle": "alinea-MetadataField-preview-subtitle",
"previewSubtitle": "alinea-MetadataField-preview-subtitle",
"searchengine": "alinea-MetadataField-searchengine",
"searchengine-title": "alinea-MetadataField-searchengine-title",
"searchengineTitle": "alinea-MetadataField-searchengine-title",
"searchengine-intro": "alinea-MetadataField-searchengine-intro",
"searchengineIntro": "alinea-MetadataField-searchengine-intro",
"searchengine-intro-favicon": "alinea-MetadataField-searchengine-intro-favicon",
"searchengineIntroFavicon": "alinea-MetadataField-searchengine-intro-favicon",
"searchengine-intro-favicon-icon": "alinea-MetadataField-searchengine-intro-favicon-icon",
"searchengineIntroFaviconIcon": "alinea-MetadataField-searchengine-intro-favicon-icon",
"searchengine-intro-url": "alinea-MetadataField-searchengine-intro-url",
"searchengineIntroUrl": "alinea-MetadataField-searchengine-intro-url",
"searchengine-intro-sitename": "alinea-MetadataField-searchengine-intro-sitename",
"searchengineIntroSitename": "alinea-MetadataField-searchengine-intro-sitename",
"searchengine-description": "alinea-MetadataField-searchengine-description",
"searchengineDescription": "alinea-MetadataField-searchengine-description",
"opengraph": "alinea-MetadataField-opengraph",
"opengraph-img": "alinea-MetadataField-opengraph-img",
"opengraphImg": "alinea-MetadataField-opengraph-img",
"opengraph-body": "alinea-MetadataField-opengraph-body",
"opengraphBody": "alinea-MetadataField-opengraph-body",
"opengraph-body-url": "alinea-MetadataField-opengraph-body-url",
"opengraphBodyUrl": "alinea-MetadataField-opengraph-body-url",
"opengraph-body-content": "alinea-MetadataField-opengraph-body-content",
"opengraphBodyContent": "alinea-MetadataField-opengraph-body-content",
"opengraph-body-content-title": "alinea-MetadataField-opengraph-body-content-title",
"opengraphBodyContentTitle": "alinea-MetadataField-opengraph-body-content-title",
"opengraph-body-content-description": "alinea-MetadataField-opengraph-body-content-description",
"opengraphBodyContentDescription": "alinea-MetadataField-opengraph-body-content-description"
};
// src/field/metadata/MetadataField.view.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(MetadataField_module_default);
function MetadataInput({ field }) {
const options = useFieldOptions(field);
const editor = useEntryEditor();
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(FormRow, { type: options.fields, field, children: /* @__PURE__ */ jsx(InputForm, { type: options.fields, border: false }) }),
/* @__PURE__ */ jsx("div", { children: editor?.preview && /* @__PURE__ */ jsx(MetadataPreview, {}) })
] });
}
function MetadataPreview() {
const metadata = usePreviewMetadata();
if (!metadata) return null;
return /* @__PURE__ */ jsxs("div", { className: styles.preview(), children: [
/* @__PURE__ */ jsx("h2", { children: "Preview" }),
/* @__PURE__ */ jsx(SearchEnginePreview, { metaTags: metadata }),
/* @__PURE__ */ jsx(OpenGraphPreview, { metaTags: metadata })
] });
}
var SearchEnginePreview = ({ metaTags }) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("h4", { className: styles.preview.subtitle(), children: "Search engine" }),
/* @__PURE__ */ jsxs("div", { className: styles.searchengine(), children: [
/* @__PURE__ */ jsxs("div", { className: styles.searchengine.intro(), children: [
/* @__PURE__ */ jsx("div", { className: styles.searchengine.intro.favicon(), children: /* @__PURE__ */ jsx("span", { className: styles.searchengine.intro.favicon.icon(), children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
"path",
{
fill: "currentColor",
d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"
}
) }) }) }),
/* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
metaTags["og:site_name"] && /* @__PURE__ */ jsx("p", { className: styles.searchengine.intro.sitename(), children: metaTags["og:site_name"] }),
/* @__PURE__ */ jsx("p", { className: styles.searchengine.intro.url(), children: metaTags["og:url"] })
] })
] }),
/* @__PURE__ */ jsx("h3", { className: styles.searchengine.title(), children: metaTags.title }),
metaTags.description && /* @__PURE__ */ jsx("p", { className: styles.searchengine.description(), children: metaTags.description?.substring(0, 160) })
] })
] });
};
var OpenGraphPreview = ({ metaTags }) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("h4", { className: styles.preview.subtitle(), children: "Social share" }),
/* @__PURE__ */ jsxs("div", { className: styles.opengraph(), children: [
metaTags["og:image"] && /* @__PURE__ */ jsx(
"img",
{
src: metaTags["og:image"],
alt: "Open Graph image",
className: styles.opengraph.img()
}
),
/* @__PURE__ */ jsxs("div", { className: styles.opengraph.body(), children: [
/* @__PURE__ */ jsx("p", { className: styles.opengraph.body.url(), children: metaTags["og:url"]?.replace(/^https?:\/\//, "") }),
/* @__PURE__ */ jsxs("div", { className: styles.opengraph.body.content(), children: [
/* @__PURE__ */ jsx("h3", { className: styles.opengraph.body.content.title(), children: metaTags["og:title"] || metaTags.title }),
/* @__PURE__ */ jsx("p", { className: styles.opengraph.body.content.description(), children: metaTags["og:description"] })
] })
] })
] })
] });
};
export {
MetadataInput
};