@nebularstreams/statify 3.0.0

package/src/widgets/Frameset.js

@@ -0,0 +1,124 @@
+const
+	m = require("mithril"),
+
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ Empty, Icon } = require("../util/widgets/app.widgets"),
+	NaviBar = require("../util/navibar/util.navibar"),
+
+	Widgets = require("./Widgets");
+
+function getLink(url, metadata) {
+	if (!url) return "";
+	if (url.startsWith("http")) return url;
+	if (url.startsWith("/")) return metadata.site.url + url;
+	return [metadata.canonical, url].join("/");
+}
+
+const
+
+	NaviOption = defineWidget(({ attrs }) => {
+
+		const
+			{ link, metadata, id, relativeRoute } = attrs,
+			{ title, icon, linkClass = icon ? "d-none d-sm-flex" : "", iconClass = "d-sm-none", url } = link,
+			el = (link.static || !link.url) ? "div" : "a";
+
+		return m(
+			".naviholder.flexrow" + (url ? "[itemscope]" : ""),
+			{
+				class: (link.class || "") + (relativeRoute === url ? " accent" : "") + (attrs.link.separator ? " grows" : ""),
+				...url
+					? {
+						itemtype: "https://schema.org/SiteNavigationElement"
+					}
+					: {
+						role: "presentation"
+					}
+			},
+			[
+				m(
+					el + ".flexrow",
+					{
+						title: title || id,
+						...url && { itemprop: "url", href: getLink(url, metadata) }
+					},
+					[
+						// icon
+						...icon ? [m(Icon, { iconClass, icon })] : [],
+
+
+						// text
+						m(
+							link.static ? "b.ellipsis" : ".ellipsis",
+							{ class: linkClass, itemprop: "name" },
+							link.separator ? "" : (title || id)
+						)
+
+					])
+			]);
+	}),
+	Frame = defineWidget(
+		({ attrs }) => {
+
+			const
+				{ metadata, pageMetadata, dynamicData, relativeRoute } = attrs,
+				widget = Widgets[pageMetadata.widget],
+				navibar = pageMetadata.navibar || metadata.navibar,
+				links = navibar?.links || pageMetadata.links;
+
+			return m(
+				".flexcol.fullheight.docroot.ohidden.relative",
+				{
+					role: "presentation",
+					class: pageMetadata.class
+				},
+				[
+					...pageMetadata.notitlebar ? [] : [m(
+						NaviBar,
+						{ class: "titlebar", cdnModel: attrs.cdnModel, metadata, pageMetadata },
+						[
+							...Object.keys(links)
+								.map((id) => m(NaviOption, {
+									id,
+									link: links[id],
+									metadata,
+									relativeRoute
+								})),
+
+							...pageMetadata.displayTitle || navibar?.displayTitle
+								? [m(".tititem.grows", pageMetadata.title)]
+								: dynamicData?.item?.meta
+									? [m(".tititem.grows", dynamicData.item?.meta.title)]
+									: []
+						]
+					)],
+
+					m(
+						".screen.flexcol.grows.ohidden",
+						{
+							role: "presentation",
+							class: pageMetadata.class
+						},
+						widget
+							? [
+								m(widget, {
+									cdnModel: attrs.cdnModel,
+									metadata,
+									pageMetadata,
+									dynamicData,
+									relativeRoute,
+									source: attrs.source
+								})
+							]
+							: [
+								m(Empty, {
+									message: "Unknown widget " + pageMetadata.widget
+								})
+							]
+					)
+				]
+			);
+		}
+	);
+
+module.exports = Frame;

package/src/widgets/Page.js

@@ -0,0 +1,356 @@
+const
+	m = require("mithril"),
+
+	Script = require("../util/sha"),
+
+	defineWidget = require("../util/widgets/util.definewidget"),
+
+	{tokenizeStrict, tokenizeObject} = require("../util/tokenizer"),
+	{createSnippet, createHtml} = require("./Snippets"),
+
+	FrameSet = require("./Frameset"),
+	FrameSimple = require("./Frameset-simple"),
+	TailWidget = require("./Tail"),
+
+	EXTENSION_HTML = "";
+
+function getYouTubeImage(ref) {
+	return `https://i3.ytimg.com/vi/${ref}/hqdefault.jpg`;
+}
+
+const
+
+	resolveRelativeUrl = (relativeUrl, pageMetadata, metadata, base) => {
+		return relativeUrl
+			? relativeUrl.indexOf("://") === -1
+				? metadata.canonical + (base ? "/" + base : "") + "/" + relativeUrl
+				: relativeUrl
+			: undefined;
+	},
+
+	getPageImageUrl = (pageMetadata, metadata, base) => resolveRelativeUrl(
+		(pageMetadata.image || metadata.image)?.url,
+		pageMetadata,
+		metadata,
+		base
+	),
+
+	getImage = (metadata, pageMetadata, dynamicData = {}) => {
+
+		return dynamicData?.item?.image || (
+			dynamicData?.item?.meta?.ytref
+				? getYouTubeImage(dynamicData.item?.meta?.ytref)
+				: tokenizeStrict(pageMetadata.image.url, dynamicData)
+		) || metadata.image.url;
+
+	},
+
+	findLinkMetadataTitle = (name, metadata) => (metadata["links.metadata"] && metadata["links.metadata"][name]?.title),
+
+	BreadCrumb = defineWidget(
+		({attrs}) => {
+			const {metadata, pageMetadata, levels, base} = attrs;
+			return m.trust(
+				createSnippet("BreadCrumb", [
+
+					/* The main breadcrumb in METADATA.JSON - if this is a child publish */
+					...metadata.breadcrumb
+						? [
+							{
+								name: metadata.breadcrumb.name,
+								url: resolveRelativeUrl(metadata.breadcrumb.url, pageMetadata, metadata, base)
+							}
+						] : [],
+
+					/* If a child page, add parent breadcrumb */
+					...pageMetadata.mainpage
+						? [
+							{
+								name: findLinkMetadataTitle(pageMetadata.mainpage, metadata) || pageMetadata.mainpage,
+								url: [metadata.canonical, pageMetadata.mainpage].join("/")
+							}
+
+						]
+
+						/* if not, add the levels as breadcrumbs */
+						: levels.map(({name, link, submeta}) => (
+							{
+								name: submeta?.title || name,
+								url: `${metadata.canonical}/${link}/index`
+							}
+						)),
+
+					/* A breadcrumb in PAGE METADATA comes after the Main Page */
+					...pageMetadata.breadcrumb
+						? [
+							{
+								name: pageMetadata.breadcrumb.name,
+								url: resolveRelativeUrl(pageMetadata.breadcrumb.url, pageMetadata, metadata, base)
+							}
+						] : []
+				]));
+		}
+	),
+
+	OpenGraph = defineWidget(({attrs}) => [
+		m("meta", {property: "og:url", content: attrs.canonical}),
+		m("meta", {property: "og:image", content: attrs.pageImage}),
+		m("meta", {property: "og:title", content: attrs.altTitle}),
+		m("meta", {property: "og:description", content: attrs.description}),
+		m("meta", {property: "og:updated_time", content: attrs.updatedTime}),
+		m("meta", {property: "og:site_name", content: attrs.site_name}),
+		...attrs.type ? [m("meta", {property: "og:type", content: attrs.type})] : [],
+		...attrs.section ? [m("meta", {property: "og:section", content: attrs.section})] : []
+	]),
+	Page = defineWidget(({attrs, children}) => {
+
+		const
+			{metadata, pageMetadata, relativeRoute, levels, base} = attrs,
+			removeExtensions = relativeRoute.split(".md")
+				.join(""),
+			{canonical: forcedCanonical} = pageMetadata,
+			canonical = forcedCanonical && forcedCanonical.startsWith("/")
+				? metadata.site.url + forcedCanonical
+				: [metadata.canonical, removeExtensions].join("/"),
+
+			pageImage = getPageImageUrl(pageMetadata, metadata, base),
+
+			next = pageMetadata.description || metadata.description || attrs.description || "",
+
+			updatedTime = new Date().toISOString(),
+			ogtype = pageMetadata.ogtype || metadata.ogtype,
+
+			{submeta} = pageMetadata,
+
+			title = pageMetadata.titleRaw
+				? pageMetadata.title
+				: pageMetadata.title + " | " + (submeta?.title || metadata.title),
+
+			altTitle = pageMetadata.titleRaw
+				? pageMetadata.title
+				: pageMetadata.title + " (" + (submeta?.title || metadata.title) + ")";
+
+		// console.warn("RR", relativeRoute, "BP", basePath, "lv", levels);
+
+		return m(
+			"html",
+			{
+				lang: "en",
+				class: "skinroot"
+			},
+			[
+				m("head", [
+					m("title", title),
+					m("meta", {name: "description", content: next.substring(0, 160)}),
+					...metadata.meta.map((mt) => m("meta", mt)),
+
+					m("meta", {name: "organization", content: metadata.author.name}),
+
+					m(OpenGraph, {
+						canonical,
+						pageImage,
+						altTitle,
+						description: next,
+						updatedTime,
+						type: ogtype,
+						site_name: metadata.site.name,
+						section: base
+					}),
+
+					m(Script, {
+						script: [
+							"const SITE=" + JSON.stringify({...metadata.site, canonical: metadata.canonical}),
+							"const resetCookies = () => { window.localStorage.clear();window.location.href='/'; }",
+							"window.WIDGET=\"" + pageMetadata.widget + "\""
+						].join(";")
+					}),
+
+					m("link", {rel: "canonical", href: canonical}),
+					...metadata.fonts ? [m("link", {
+						rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=" + (metadata.fonts.map((family) => encodeURIComponent(family))
+							.join(","))
+					})] : [],
+					...metadata.head.map((tag) => {
+						const
+							{t} = tag,
+							alttag = {...tag};
+
+						delete alttag.t;
+
+						return m(t, alttag);
+					}),
+
+					...pageMetadata.snippet
+						? [
+							m.trust(
+								createHtml(
+									tokenizeObject(
+										pageMetadata.snippet,
+										{
+											metadata
+										},
+										true,
+										true)))]
+						: metadata.snippet
+							? [m.trust(createHtml(metadata.snippet))]
+							: [],
+
+					m(BreadCrumb, {
+						metadata,
+						pageMetadata,
+						levels,
+						base
+					}),
+
+					m("body", [
+						m("main", {
+							id: "main",
+							class: "flexcol",
+							"aria-label": title
+						}, [
+
+							...pageMetadata.generateH1 ? [m("h1.gen", pageMetadata.title)] : [],
+
+							...children,
+
+							...attrs.metadata.footer && !pageMetadata.nofooter
+								? [m(TailWidget, {class: "shadow-2", ...attrs.metadata.footer})]
+								: []
+
+						]),
+
+						// cookies
+						...attrs.footer ? [m.trust(attrs.footer)] : []
+
+					])
+				])
+			]
+		);
+	}),
+	ItemPage = defineWidget(({attrs, children}) => {
+		const
+			{metadata, pageMetadata, dynamicData, levels, base} = attrs,
+			{item, relative: relativeRoute} = dynamicData,
+			{meta: itemMeta} = item,
+			firstImage = getImage(metadata, pageMetadata, dynamicData),
+			{canonical: forcedCanonical} = pageMetadata,
+
+			canonical = forcedCanonical && forcedCanonical.startsWith("/")
+				? metadata.site.url + forcedCanonical
+				: [metadata.canonical, relativeRoute + EXTENSION_HTML].join("/"),
+
+			pageImage = firstImage.indexOf("://") === -1
+				? metadata.canonical + (base ? "/" + base : "") + "/" + firstImage
+				: firstImage,
+
+			updatedTime = new Date().toISOString(),
+			ogtype = pageMetadata.ogtype || metadata.ogtype,
+			altTitle = itemMeta.title + " (" + metadata.title + " " + pageMetadata.title + ")";
+
+		if (!itemMeta.description) {
+			throw new Error("Item " + itemMeta.title + " does not have a description");
+		}
+
+		return m(
+			"html",
+			{
+				lang: "en",
+				class: "skinroot"
+			},
+			[
+				m("head", [
+
+					m("title", itemMeta.title + " | " + pageMetadata.title + " | " + metadata.title),
+					m("meta", {name: "description", content: itemMeta.description.substring(0, 160)}),
+
+					...metadata.meta.map((mt) => m("meta", mt)),
+					m("meta", {name: "organization", content: metadata.author.name}),
+
+					m(OpenGraph, {
+						canonical,
+						pageImage,
+						altTitle,
+						description: itemMeta.description,
+						updatedTime,
+						site_name: metadata.site.name,
+						type: ogtype,
+						section: attrs.base
+					}),
+
+					m(Script, {
+						script: [
+							"const SITE=" + JSON.stringify(metadata.site),
+							"const ITEM=" + JSON.stringify(dynamicData),
+							"const resetCookies = () => { window.localStorage.clear();window.location.href='/'; }"
+						].join(";")
+					}),
+
+					m("link", {rel: "canonical", href: canonical}),
+
+					...metadata.head.map((tag) => {
+						const
+							{t} = tag,
+							alttag = {...tag};
+
+						delete alttag.t;
+
+						return m(t, alttag);
+					}),
+
+					...pageMetadata.snippet
+						? [
+							m.trust(
+								createHtml(
+									tokenizeObject(
+										pageMetadata.snippet,
+										{
+											item: dynamicData.item,
+											metadata
+										},
+										true,
+										true)))
+						]
+						: [],
+
+					m(BreadCrumb, {
+						metadata,
+						pageMetadata,
+						levels,
+						base
+					}),
+
+					m("body", [
+						m(
+							"main",
+							{
+								id: "main",
+								class: "flexcol",
+								"aria-label": pageMetadata.title + " > " + itemMeta.title
+							},
+							[
+
+								m("h1.gen", itemMeta.title),
+
+								...children,
+
+								...attrs.metadata.footer
+									? [
+										m(TailWidget, {class: "marg-1 marg-v no-marg-bottom", ...attrs.metadata.footer})]
+									: []
+							]),
+						// fixed footer: cookies
+						...attrs.footer ? [m.trust(attrs.footer)] : []
+					])
+				])
+			]
+		);
+	});
+
+const
+	Composition = defineWidget(({attrs}) => m(
+		attrs.dynamicData ? ItemPage : Page,
+		attrs,
+		m(attrs.metadata.site?.simplepages ? FrameSimple : FrameSet, attrs)
+	));
+
+module.exports = Composition;

package/src/widgets/RightSide.js

@@ -0,0 +1,93 @@
+const
+	m = require("mithril"),
+	RES_LOGIN_OVER = "frontpage-over.png",
+	RES_LOGO_BANNER = "logo-banner.png",
+	defineWidget = require("../util/widgets/util.definewidget");
+
+const
+	UnsplashCollection = defineWidget(
+		({attrs, children}) => {
+			const
+				image = attrs.images[Math.floor(Math.random() * attrs.images.length)];
+
+			return m(
+				".flexcol.fullheight.flexcenter.flex-al-center.divimage.unsplash",
+				{
+					role: "presentation",
+					class: attrs.class || "w-50",
+					style: {backgroundImage: "url(" + image.urls.regular + ")"}
+				},
+				[
+					...children,
+					...image.user
+						? [
+							m(".authorbox", {
+								"role": "presentation"
+							}, [
+								m("a", {
+									rel: "nofollow",
+									href: image.user?.links?.html,
+									target: "unsplash"
+								}, "Photo by " + image.user.name + " - unsplash.com")
+							])
+						] : []
+				]
+			);
+		}
+	);
+
+const
+	RightSide = defineWidget(
+		({attrs, state, children}) => {
+
+			const
+				{cdnModel, site} = attrs,
+				{platform} = cdnModel,
+				operatorOverlay = site?.logo, //  || platform.resources(RES_LOGIN_OVER),
+				operatorBanner = site?.banner; // platform.resources(RES_LOGO_BANNER);
+
+			return state.images ? m(
+				UnsplashCollection,
+				{
+					name: "login",
+					class: attrs.class || "grows",
+					images: state.images
+				},
+				[
+					...operatorOverlay ? [
+						m("img", {
+							src: operatorOverlay,
+							class: "overlay w-50",
+							alt: attrs.ncsdom + " logo"
+						})] : [],
+					...operatorBanner ? [
+						m("img.w-75", {src: operatorBanner, alt: attrs.ncsdom + " banner"})
+					] : [],
+					...children
+				]
+			) : [];
+		},
+
+		({attrs, state}) => {
+			try {
+				state.images = require(attrs.source + "/images.json");
+			} catch (e) {
+				//
+			}
+		}
+	),
+	Qr = defineWidget(
+		({attrs}) => m(
+			"figure.qrcode",
+			{
+				id: "qr",
+				"aria-label": "QR Code to this page",
+			}
+		)
+	),
+	DocRightSide = defineWidget(
+		({attrs}) => m(RightSide, attrs, [
+			m(Qr, attrs)
+		])
+	);
+module.exports = DocRightSide;

package/src/widgets/Snippets.js

@@ -0,0 +1,75 @@
+const
+	SNIPPETS = {
+		Article: (title, images, date = new Date().toISOString(), author = undefined) => ({
+			"@context": "https://schema.org",
+			"@type": "Article",
+			headline: title,
+			...images ? { image: images } : {},
+			datePublished: date,
+			dateModified: date,
+			...author && {
+				author: [
+					{
+						"@type": "Person",
+						...author
+					}
+				]
+			}
+		}),
+		BreadCrumb: (routes = []) => (routes.length ? {
+			"@context": "https://schema.org",
+			"@type": "BreadcrumbList",
+			itemListElement: routes.map((route, idx) => ({
+				"@type": "ListItem",
+				position: 1 + idx,
+				name: route.name,
+				item: route.url
+			}))
+		} : undefined),
+		CreativeWork: (
+			name,
+			image,
+			author,
+			contentRating = undefined,
+			applicationName = undefined,
+			applicationImage = undefined,
+			downloadUrl = undefined
+		) => ({
+			"@context": "https://schema.org",
+			"@type": "CreativeWork",
+			author,
+			...contentRating && { contentRating },
+			image,
+			name
+			/*
+			...applicationName && {
+				isPartOf: {
+					"@type": "SoftwareApplication",
+					name: applicationName,
+					image: applicationImage,
+					downloadUrl
+				}
+			}
+			*/
+		})
+	};
+
+function createHtml(snippedCode) {
+	return snippedCode ? `
+<script type="application/ld+json">
+${JSON.stringify(snippedCode)}
+</script>
+	` : "";
+}
+
+function createSnippet(type, ...parameters) {
+	if (!SNIPPETS[type]) throw new Error("No " + type + " defined");
+	return createHtml(SNIPPETS[type](...parameters));
+}
+
+function getSnippet(type, ...parameters) {
+	if (!SNIPPETS[type]) throw new Error("No " + type + " defined");
+	return SNIPPETS[type](...parameters);
+}
+
+module.exports = { createSnippet, createHtml, getSnippet };

package/src/widgets/Tail.js

@@ -0,0 +1,11 @@
+const m = require("mithril");
+
+module.exports = {
+	view: ({attrs}) => m(".flexcol.w-100.pad-2.tail.al-center.flex-al-center", {class: attrs.class}, [
+		m(".cosa", m.trust(attrs.copyright)),
+		m(
+			".flexrow.wrap.flexcenter",
+			...attrs.links.map(({title, href, target}) => m("a.linker", {href, ...target && {target}}, title))
+		)
+	])
+};

package/src/widgets/Widgets.js

@@ -0,0 +1,10 @@
+const Widgets = {
+	FeatureList: require("../widgets.features/FeatureList"),
+	Client: require("../widgets.client/Client"),
+	Markdown: require("../widgets.markdown/Document"),
+	MarketItem: require("../widgets.market/MarketItem"),
+	HowTo: require("../widgets.howto/HowTo"),
+	Faq: require("../widgets.howto/Faq")
+};
+
+module.exports = Widgets;

package/src/widgets.client/Client.js

@@ -0,0 +1,22 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget");
+
+module.exports = defineWidget(
+	({ attrs }) => {
+		const
+			{pageMetadata } = attrs,
+			{ client, title } = pageMetadata,
+			data = Buffer.from(JSON.stringify(client))
+				.toString("base64");
+
+		return m(
+			"widget.flexcol.h-100.w-100.screen.client",
+			{
+				"data-info": data,
+				"data-title": title,
+				class: pageMetadata.class
+			}
+		);
+	}
+);