@nebularstreams/statify 3.0.0

package/src/widgets.howto/Faq.js

@@ -0,0 +1,201 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ Icon } = require("../util/widgets/app.widgets"),
+	TailWidget = require("../widgets/Tail"),
+
+	BootCol = require("../widgets.features/bootcol"),
+	{ createHtml } = require("../widgets/Snippets"),
+	{ ItemTile } = require("./Tiles"),
+
+	{ convert } = require("../util/markdown/markdown"),
+	{ absoRoute } = require("../util/htmlroute"),
+
+	RightSide = require("../widgets/RightSide");
+
+const
+	makeFaq = ({ title, description, faq }, metadata, relativeRoute) => ({
+		"@context": "https://schema.org",
+		"@type": "FAQPage",
+		name: title,
+		description,
+		lastReviewed: new Date().toISOString(),
+		mainEntity: faq.mainEntity.map((ent, i) => ({
+			"@type": "Question",
+			name: ent.name,
+			url: absoRoute("", metadata, relativeRoute) + "#question-" + (i + 1),
+			acceptedAnswer: {
+				"@type": "Answer",
+				text: convert(ent.acceptedAnswer, { metadata, relativeRoute }).html
+			}
+		})),
+		...faq.author && {
+			author: [
+				{
+					"@type": "Person",
+					...faq.author
+				}
+			]
+		},
+		...faq.publisher && {
+			publisher: {
+				"@type": "Person",
+				...faq.publisher
+			}
+		}
+	}),
+
+	FaqQuestion = defineWidget(
+		({ attrs }) => m(
+			BootCol,
+			{
+				htmlid: "question-" + attrs.index,
+				rows: true,
+				el: "li",
+				class: "pad-1 col-12 grows contractable question contracted",
+				subclass: "feature text-al-center shadow-2",
+				label: attrs.label
+			},
+			[
+				m(".flexrow.titquestion.col-12", [
+					m(".index", String(attrs.index)),
+					m("h3.marg-2.grows", { class: "qtitle", "data-index": attrs.index }, m.trust(attrs.name)),
+					m(Icon, {
+						iconClass: "fa-3x d-none d-sm-flex",
+						icon: "question-circle",
+						size: 3
+					})
+				]),
+
+				m(".body.relative.marg-1.col-12.markdown.no-marg-bottom", m.trust(convert(attrs.acceptedAnswer, {
+					metadata: attrs.metadata,
+					relativeRoute: attrs.relativeRoute
+				}).html))
+			]
+		)
+	),
+
+	FaqWidget = defineWidget(
+		({ attrs }) => {
+
+			const
+				{ pageMetadata, metadata, relativeRoute, cdnModel, source } = attrs,
+				{ faq, title, description } = pageMetadata,
+				parsedFaq = makeFaq(pageMetadata, metadata, relativeRoute);
+
+			return m(".flexrow.w-100.h-100", [
+				m.trust(createHtml(parsedFaq)),
+
+				m(
+					"ul.flexrow.h-100.w-100.wrap.scrolly.screen.fixboot.faq",
+					{
+						class: pageMetadata.class,
+						"aria-label": title
+					},
+					[
+						m(
+							BootCol,
+							{
+								el: "li",
+								label: title,
+								class: "pad-1 lighter col-12 screen",
+								subclass: "feature text-al-center shadow-2 pad-3"
+							},
+							[
+								m(ItemTile, {
+									class: "flexrow wrap ohidden",
+									items: [
+
+										{
+											class: "col-12 pad-6",
+											el: "h1",
+											text: title
+										},
+
+										...description ? [
+											{
+												class: "marg-3 col-12",
+												text: description
+											}] : []
+									]
+								})
+							]
+						),
+
+						...faq.mainEntity
+							? [
+								m("ol.pad-0.marg-0.col-12", { "aria-label": "List Of Questions" }, [
+									faq.mainEntity.map((step, idx) => m(
+										FaqQuestion,
+										{
+											...step,
+											size: 3,
+											class: "pad-2 screen",
+											index: idx + 1,
+											metadata,
+											relativeRoute,
+											label: "Question Number " + (idx + 1)
+										},
+										[]
+									))
+								])]
+							: [],
+
+						...faq.publisher || faq.author
+							? [
+								m(
+									BootCol,
+									{
+										el: "li",
+										class: "pad-1 lighter col-12 screen",
+										subclass: "feature text-al-center pad-6 shadow-2",
+										label: "publisher and author"
+									},
+									[
+										m(ItemTile, {
+											class: "flexrow wrap ohidden",
+											items: [
+												...faq.publisher.name ? [
+													{
+														el: "h5",
+														class: "col-5 grows",
+														text: "published by " + faq.publisher.name
+													}
+												] : [],
+												...faq.author.name ? [
+													{
+														el: "h5",
+														class: "col-5 grows",
+														text: "written by " + faq.author.name
+													}
+												] : []
+
+											]
+										})
+									]
+								)
+							] : [],
+
+						...pageMetadata.footer
+							? [
+								m(
+									"li",
+									{ "aria-label": pageMetadata.footer.title || "footer", class: "col-12" },
+									m(TailWidget, { li: true, class: "shadow-2", ...pageMetadata.footer })
+								)
+							]
+							: []
+					]
+				),
+				m(RightSide, {
+					cdnModel,
+					source,
+					class: "grows d-none d-xl-flex",
+					ncsdom: metadata.site.domain
+				})
+				// m("script", FaqScript("question"))
+			]);
+		}
+	);
+
+module.exports = FaqWidget;

package/src/widgets.howto/HowTo.js

@@ -0,0 +1,419 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ Icon } = require("../util/widgets/app.widgets"),
+	TailWidget = require("../widgets/Tail"),
+
+	BootCol = require("../widgets.features/bootcol"),
+	{ getYouTubeImage } = require("../widgets.features/Youtube"),
+	{ createHtml } = require("../widgets/Snippets"),
+	{ convert } = require("../util/markdown/markdown"),
+
+	ICONS = {
+		USD: "dollar-sign",
+		EUR: "euro-sign",
+		YEN: "yen-sign",
+		GBP: "pound-sign",
+		HowToTip: "info",
+		HowToDirection: "circle",
+		supply: "plus",
+		tool: "tools"
+	},
+	DEFAULT_ICON = "clock",
+	{ ItemTile } = require("./Tiles"),
+	{ parseImage, absoRoute } = require("../util/htmlroute"),
+
+	makeImageOrVideo = (source, metadata, relativeRoute) => ({
+		...source.image && {
+			image: parseImage(source.image, metadata, relativeRoute)
+		},
+		...source.youtube && {
+			video: {
+				"@type": "VideoObject",
+				name: source.youtube.name,
+				description: source.youtube.description,
+				thumbnailUrl: getYouTubeImage(source.youtube.ref),
+				contentUrl: "https://www.youtube.com/watch?v=" + source.youtube.ref,
+				embedUrl: "https://www.youtube.com/embed/" + source.youtube.ref,
+				uploadDate: new Date().toISOString()
+			}
+		}
+	}),
+	{ YouTube } = require("../widgets.features/Youtube"),
+
+	RightSide = require("../widgets/RightSide");
+
+const
+
+	makeHowto = ({ title, image, howto }, metadata, relativeRoute) => ({
+		"@context": "https://schema.org",
+		"@type": "HowTo",
+
+		name: title,
+
+		...makeImageOrVideo({ image }, metadata, relativeRoute),
+		...makeImageOrVideo(howto, metadata, relativeRoute),
+
+		supply: howto.supply.map((supply) => ({
+			"@type": "HowToSupply",
+			name: supply
+		})),
+
+		tool: howto.tool.map((tool) => ({
+			"@type": "HowToTool",
+			name: tool
+		})),
+		step: howto.step.map(
+			(step, i) => ({
+				"@type": "HowToStep",
+				url: absoRoute("", metadata, relativeRoute) + "#step-" + String(i + 1),
+				name: step.name,
+				itemListElement: step.itemListElement.map((idx) => (
+					{
+						text: typeof idx === "string" ? idx : idx[0],
+						"@type": typeof idx === "string" || !idx[1] ? "HowToDirection" : idx[1]
+					})),
+				image: parseImage(step.image, metadata, relativeRoute)
+			})
+		),
+		...howto.estimatedCost && {
+			estimatedCost: {
+				"@type": "MonetaryAmount",
+				...howto.estimatedCost
+			}
+		},
+		...howto.totalTime && {
+			totalTime: howto.totalTime
+		},
+		...howto.author && {
+			author: [
+				{
+					"@type": "Person",
+					...howto.author
+				}
+			]
+		},
+		...howto.publisher && {
+			publisher: {
+				"@type": "Person",
+				...howto.publisher
+			}
+		}
+	}),
+
+	HowToStep = defineWidget(
+		({ attrs }) => m(
+			BootCol,
+			{
+				htmlid: "step-" + attrs.index,
+				rows: true,
+				el: "li",
+				class: "pad-1 col-12 grows",
+				subclass: "feature contractable text-al-center shadow-2 contracted",
+				label: attrs.title
+			},
+			[
+				m(".flexrow.titquestion.col-12", [
+					m(".index", String(attrs.index)),
+					m("h3.marg-2.grows", { "data-index": String(attrs.index) }, attrs.name),
+					m(Icon, {
+						iconClass: "d-none d-sm-flex",
+						icon: attrs.icon || "angle-double-down",
+						size: 2
+					})
+				]),
+				m(".body.col-12.flexrow.wrap", [
+
+					...attrs.description
+						? [
+							m(
+								".description.col-12",
+								m.trust(convert(attrs.description, { metadata: attrs.metadata, relativeRoute: attrs.relativeRoute }).html)
+							)
+						]
+						: [],
+
+					attrs.image
+						? [
+							m(".imgstep.col-12.col-lg-6.relative", [
+								m(
+									"img.w-100",
+									{
+										src: attrs.image.url,
+										alt: attrs.image.alt,
+										title: attrs.image.alt
+									}
+								)
+							])
+						]
+						: [],
+
+					m(
+						"ul.howtolist.instructions.col-12.col-lg-6",
+						attrs.itemListElement.map(
+							(il) => {
+
+								const clase = (typeof il === "string" || !il[1])
+									? "HowToDirection"
+									: il[1];
+
+								return m(
+									"li.flexrow",
+									{
+										class: clase
+									},
+									[
+										m(Icon, {
+											iconClass: "unitsize",
+											icon: ICONS[clase] || DEFAULT_ICON
+										}),
+										m(
+											".instruction.grows",
+											typeof il === "string" ? il : il[0]
+										)
+									]
+								);
+							}
+						)
+					)
+				])
+			]
+		)
+	),
+
+	HowToWiget = defineWidget(
+		({ attrs }) => {
+			const
+				{ pageMetadata, metadata, relativeRoute, cdnModel, source } = attrs,
+				{ howto, title, image } = pageMetadata,
+				parsedHowto = makeHowto(pageMetadata, metadata, relativeRoute),
+				tools = [
+
+					...howto.youtube ? [
+						m(YouTube, {
+							class: "col-12 cornered",
+							videoItem: howto.youtube
+						})
+					] : [],
+
+					...howto.supply
+						? [
+							m(
+								BootCol,
+								{
+									el: "li",
+									iel: "ul",
+									class: "pad-1 lighter grows howtolist supplies col-12 col-sm-6 col-md-12",
+									subclass: "feature text-al-center shadow-2 bg-accent-light col-12"
+								},
+								[
+									m(
+										"li.flexcol.titrow",
+										[
+											m(Icon, {
+												iconClass: "pad-1",
+												icon: ICONS.supply
+											}),
+											m("h2.supply.grows", "Requirements")
+										]
+									),
+									...howto.supply.map((s) => m(
+										"li.flexrow",
+										{},
+										[
+											m(".supply.grows", s)
+										]
+									))
+								]
+							)
+						]
+						: [],
+
+					...howto.tool
+						? [
+							m(
+								BootCol,
+								{
+									el: "li",
+									iel: "ul",
+									class: "pad-1 lighter grows howtolist tools col-12 col-sm-6 col-md-12",
+									subclass: "feature text-al-center shadow-2 bg-accent-light col-12"
+								},
+								[
+									m(
+										"li.flexcol.titrow",
+										{},
+										[
+											m(Icon, {
+												iconClass: "pad-1",
+												icon: ICONS.tool
+											}),
+											m("h2.tool.grows", "Tools needed")
+										]
+									),
+									...howto.tool.map((tool) => m(
+										"li.flexrow",
+										{},
+										[
+											m(".tool.grows", tool)
+										]
+									))
+								]
+							)
+						]
+						: []
+				];
+
+			return m(".flexrow.w-100.h-100", [
+				m.trust(createHtml(parsedHowto)),
+				m(
+					"ul.flexrow.h-100.grows.wrap.scrolly.screen.fixboot.howto",
+					{
+						class: pageMetadata.class,
+						"aria-label": title
+					},
+					[
+
+						m(
+							BootCol,
+							{
+								el: "li",
+								label: title,
+								class: "pad-1 lighter col-12 col-md-8 grows screen",
+								subclass: "feature ohidden text-al-center shadow-2"
+							},
+							[
+								m(ItemTile, {
+									class: "flexrow wrap ohidden",
+									items: [
+
+										{
+											class: "col-12 pad-6",
+											el: "h1",
+											text: title
+										},
+
+										{
+											el: "h5",
+											class: "fabf fa-clock col-3 grows",
+											text: howto.totalTime
+										},
+
+										...howto.step
+											? [
+												{
+													el: "h5",
+													class: "fabf fa-list col-3 grows",
+													text: howto.step.length
+												}
+											]
+											: [],
+
+										...howto.estimatedCost
+											? [
+												{
+													el: "h5.fabf.col-3.grows",
+													class: "fa-" + (ICONS[howto.estimatedCost.currency] || "money-bill"),
+													text: String(howto.estimatedCost.value)
+												}
+											] : [],
+
+										...image ? [
+											{
+												class: "always-grows col-12 obsimage marg-v no-marg-bottom",
+												image: image.url,
+												alt: image.alt
+
+											}] : [],
+
+										...howto.text ? [
+											{
+												class: "pad-6 pad-h col-12 al-left scaff-bottom markdown",
+												text: convert(howto.text, { metadata: attrs.metadata, relativeRoute: attrs.relativeRoute }).html
+											}] : []
+
+									]
+								})
+							]
+						),
+
+						m("li.col-12.col-md-4.grows.flexrow", {}, [
+							m("ul.col-12.flexrow.wrap", tools)
+						]),
+
+						...howto.step
+							? [
+								m("ol.pad-0.marg-0.col-12", [
+									howto.step.map((step, idx) => m(
+										HowToStep,
+										{
+											...step,
+											size: 3,
+											class: "pad-2 screen",
+											index: idx + 1,
+											metadata,
+											relativeRoute
+										},
+										[]
+									))
+								])]
+							: [],
+
+						...howto.publisher || howto.author
+							? [
+								m(
+									BootCol,
+									{
+										el: "li",
+										class: "pad-1 lighter col-12 screen",
+										subclass: "feature text-al-center pad-6 shadow-2",
+										label: "publisher and author"
+									},
+									[
+										m(ItemTile, {
+											class: "flexrow wrap ohidden",
+											items: [
+												...howto.publisher.name ? [
+													{
+														el: "h5",
+														class: "col-5 grows",
+														text: "published by " + howto.publisher.name
+													}
+												] : [],
+												...howto.author.name ? [
+													{
+														el: "h5",
+														class: "col-5 grows",
+														text: "written by " + howto.author.name
+													}
+												] : []
+
+											]
+										})
+									]
+								)
+							] : [],
+
+						...pageMetadata.footer
+							? [
+								m(
+									"li",
+									{ "aria-label": pageMetadata.footer.title || "footer", class: "col-12" },
+									m(TailWidget, { li: true, class: "shadow-2", ...pageMetadata.footer })
+								)
+							]
+							: []
+					]
+				),
+				m(RightSide, {
+					cdnModel,
+					source,
+					class: "grows d-none d-xl-flex",
+					ncsdom: metadata.site.domain
+				})
+				// m("script", FaqScript("step"))
+			]);
+		}
+	);
+
+module.exports = HowToWiget;

package/src/widgets.howto/Tiles.js

@@ -0,0 +1,51 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ YouTube } = require("../widgets.features/Youtube");
+
+const
+	ItemBody = defineWidget(
+		({ attrs }) => (
+			attrs.image
+				? m(
+					".obsimage",
+					{ class: attrs.class },
+					m("img.w-100", { alt: attrs.alt, src: attrs.image, class: attrs.imageClass || "" })
+				)
+				: attrs.youtube
+					? m(YouTube, {
+						class: attrs.class,
+						videoItem: attrs.youtube
+					})
+					: attrs.link
+						? m(
+							"a.paralink",
+							{
+								href: attrs.link.href,
+								class: attrs.link.class
+							},
+							attrs.link.text
+						)
+
+						: attrs.text
+							? m(
+								attrs.el || ".paragraph.col-12",
+								{ class: attrs.class || "" },
+								m.trust(attrs.text)
+							)
+							: m(".d-none")
+		)
+	),
+
+	ItemTile = defineWidget(
+		({ attrs }) => m(
+			".titler",
+			{
+				class: attrs.class || "flexcol grows",
+				role: "presentation"
+			},
+			attrs.items.map((item) => m(ItemBody, item))
+		)
+	);
+
+module.exports = { ItemBody, ItemTile };

package/src/widgets.howto/script-contractable.js

@@ -0,0 +1,31 @@
+module.exports = (name) => `
+(function() {
+	function FaqSelect(target) {
+		target = target || 0;
+		const questions = document.getElementsByClassName("contractable");
+		let current = 0;
+		let currell = null;
+		for (const question of questions) {
+			question.classList.toggle("contracted", target !== current);
+			question.classList.toggle("expanded", target === current);
+			if (target===current) question.scrollIntoView({behavior:"smooth"});
+			current++;
+		}
+	}
+
+	const initial = window.location.hash.split("#${name}-")[1];
+	const questions = document.getElementsByClassName("contractable");
+
+	for (const question of questions) {
+		question.addEventListener("click", function (e) {
+			const idx = e.target.getAttribute("data-index");
+			if (idx) {
+				FaqSelect(parseInt(idx) - 1);
+				window.history.replaceState({}, "", "#${name}-"+idx);
+			}
+		});
+	}
+
+	if (initial) FaqSelect(parseInt(initial) - 1);
+}());
+`;