@nebularstreams/statify 3.0.0

package/src/widgets.features/FeatureList.js

@@ -0,0 +1,364 @@
+const
+	m = require("mithril"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{Icon} = require("../util/widgets/app.widgets"),
+	TailWidget = require("../widgets/Tail"),
+
+	BootCol = require("./bootcol"),
+	{YouTube} = require("./Youtube"),
+	{convert} = require("../util/markdown/markdown"),
+
+	Feature = defineWidget(
+		({attrs, children}) => {
+			const {feature, metadata, relativeRoute} = attrs;
+			return m(
+				BootCol,
+				{
+					el: "li",
+					class: "col-12 always-grows " + (feature.bootstrapClass || "col-lg-6 col-xxl-4") + " " + (feature.class || " pad-1"),
+					subclass: feature.subclass || "feature text-al-center pad-4 shadow-2",
+					label: feature.title,
+					after: feature.items
+						? feature.items.map((item) => m(ItemBody, {item, metadata, relativeRoute}))
+						: []
+				},
+				[
+					...feature.subhead
+						? [
+							m(".subhead.marg-1", feature.subhead)
+						]
+						: [],
+					...feature.icon
+						? [m(Icon, feature)]
+						: feature.image
+							? [
+								m(".imgicon.al-center", m("img.unitsize", {src: feature.image, alt: feature.title, class: feature.imageClass}))
+							]
+							: [],
+					...feature.title ? [
+						m("h3.marg-2", feature.title),
+					] : [],
+					...feature.text ? [
+						m(
+							".body.marg-1",
+							{role: "presentation"},
+							m.trust(convert(
+								feature.text,
+								{
+									metadata,
+									relativeRoute
+								}
+							).html)
+						),
+					] : [],
+					...children,
+
+					...feature.links
+						? [
+							m("nav.linkbox", feature.links.map((link) => m("a.paralink.tag", {
+								href: link.href,
+								class: link.class,
+								...link.target && {target: link.target}
+							}, link.text))),
+							" "
+						]
+						: []
+
+				]
+			);
+		}
+	),
+
+	FeatureLeft = defineWidget(
+		({attrs, children}) => {
+			const {feature, metadata, relativeRoute} = attrs;
+			return m(
+				BootCol,
+				{
+					el: "li",
+					class: "col-12 always-grows " + (feature.bootstrapClass || "col-lg-6 col-xxl-4") + " " + (feature.class || "pad-1"),
+					subclass: feature.subclass || "feature pad-4 shadow-2",
+					label: feature.title,
+					after: feature.items
+						? feature.items.map((item) => m(ItemBody, {item, metadata, relativeRoute}))
+						: []
+				},
+				[
+					m(".flexrow.titleblock", [
+
+						...feature.icon
+							? [m(Icon, feature)]
+							: feature.image
+								? [
+									m(".imgicon.al-center", m("img.unitsize", {src: feature.image, alt: feature.title, class: feature.imageClass}))
+								]
+								: [],
+
+						m(".flexcol.grows.titleholder", [
+							...feature.subhead
+								? [
+									m(".subhead.marg-1", feature.subhead)
+								]
+								: [],
+							...feature.title ? [
+								m("h3.marg-2", feature.title)
+							] : [],
+						])]),
+
+					...feature.text ? [
+						m(
+							".body.marg-1",
+							{role: "presentation"},
+							m.trust(convert(
+								feature.text,
+								{
+									metadata,
+									relativeRoute
+								}
+							).html)
+						),
+					] : [],
+
+					...children,
+
+					...feature.links
+						? [
+							m("nav.linkbox", feature.links.map((link) => m("a.paralink.tag", {
+								href: link.href,
+								class: link.class,
+								...link.target && {target: link.target}
+							}, link.text))),
+							" "
+						]
+						: []
+
+				]
+			);
+		}
+	),
+	Video = defineWidget(
+		({attrs}) => m("video", {
+			src: attrs.video.url + ".mp4",
+			poster: attrs.video.url + ".png",
+			loop: !!attrs.video.loop,
+			autoplay: !!attrs.video.autoplay,
+			controls: true,
+			muted: !!attrs.video.autoplay
+		})
+	),
+	ItemBody = defineWidget(
+		({attrs}) => {
+			const {item, metadata, relativeRoute} = attrs;
+			return (
+				item.image
+					? m(
+						".item-image.obsimage",
+						{class: item.class || "pad-4", role: "presentation", "aria-label": item.alt, "data-title": item.title},
+						item.el === "div"
+							? m(".img", {title: item.alt, style: {backgroundImage: `url(${item.image})`}, class: item.imageClass || "w-100"})
+							: m("img", {alt: item.alt, src: item.image, class: item.imageClass || "w-100"})
+					)
+					: Array.isArray(item.imageCarousel)
+						? m(
+							".item-image-carousel",
+							{class: item.class || "pad-4", role: "presentation", "aria-label": item.alt, "data-title": item.title, "data-total": item.imageCarousel.length, "data-time": item.time || 5},
+							item.imageCarousel.map(({url, alt}, index) => item.el === "div"
+								? m(".img" + (index ? "" : ".active"), {title: item.alt, style: {backgroundImage: `url(${url})`}, class: item.imageClass || "w-100"})
+								: m("img", {alt: alt || item.alt, src: url, class: (index ? "" : "active ") + (item.imageClass || "w-100")})
+							)
+						)
+						: item.cards
+							? m("ul.item-cards.flexrow.wrap", {class: item.itemClass}, item.cards.map(
+								(feature) => (
+									m(
+										feature.left ? FeatureLeft : Feature,
+										{
+											feature: {
+												size: item.iconSize || 3,
+												class: item.cardsClass || "pad-2 screen",
+												bootstrapClass: item.bootstrapClass || undefined,
+												...feature
+											},
+											metadata,
+											relativeRoute
+										},
+										[]
+									)
+								)
+							))
+							: item.video
+								? m(
+									".item-video.obsvideo",
+									{class: item.class, "aria-label": item.video.title},
+									m(Video, {
+										video: item.video
+									})
+								)
+								: item.youtube
+									? m(YouTube, {
+										class: item.youtube.class,
+										videoItem: item.youtube
+									})
+									: item.link
+										? m("a.paralink", {
+											href: item.link.href,
+											class: item.link.class,
+											...item.link.target && {target: item.link.target}
+										}, item.link.text)
+
+										: m(
+											item.el || ".paragraph",
+											{
+												class: item.class || "",
+												"aria-label": item.label,
+												...item.el ? {} : {role: "presentation"}
+											},
+											m.trust(
+												item.el
+													? item.text
+													: convert(
+														item.text,
+														{
+															metadata,
+															relativeRoute
+														}
+													).html
+											)
+										)
+			);
+		}
+	),
+
+	ItemTile = defineWidget(
+		({attrs}) => {
+			const {tile, metadata, relativeRoute} = attrs;
+			return m(
+				".titler",
+				{
+					class: tile.class || "flexcol grows",
+					role: "presentation"
+				},
+				tile.items.map((item) => m(ItemBody, {item, metadata, relativeRoute}))
+			);
+		}
+	),
+
+	FeatureList = defineWidget(
+		({attrs, state}) => {
+			const
+				{pageMetadata, metadata, relativeRoute} = attrs,
+				{features, title} = pageMetadata,
+				navibar = metadata.navibar || pageMetadata.navibar;
+
+			return m(
+				"ul.feature-list.flexrow.h-100.w-100.wrap.scrolly",
+				{
+					...navibar?.autoHide && {id: "scrolltracker"},
+					"aria-label": title,
+					class: features.containerClass
+				},
+				[
+
+					m(
+						BootCol,
+						{
+							el: "li",
+							label: pageMetadata.title,
+							class: "col-12 screen feature-title" + " " + (features.title.containerClass || features.containerClass || "pad-1"),
+							subclass: (features.mainClass || "text-al-center") + " " + (features.class ? features.class : "pad-6")
+						},
+						[
+							m(ItemTile, {tile: features.title, metadata, relativeRoute})
+						]
+					),
+
+					...features.youtube
+						? [
+							m(YouTube, {
+								el: "li",
+								class: "feature-video obsvideo fully" + (features.youtube?.class || ""),
+								role: "presentation",
+								videoItem: features.youtube
+							})
+						] : [],
+
+					...features.video
+						? [
+							m(
+								"li.feature-video.obsvideo.fully",
+								{class: pageMetadata.class + (features.video.class ? " " + features.video.class : ""), "aria-label": features.video.title},
+								m(Video, {
+									video: features.video
+								})
+							)
+						]
+						: [],
+
+					...features.cards
+						? features.cards.map((card) => m(
+							BootCol,
+							{
+								el: "li",
+								label: card.title,
+								class: "lighter col-12 screen feature-card " + (card.containerClass || "pad-1"),
+								subclass: (features.mainClass || "text-al-center") + " " + (card.subclass ? card.subclass : "pad-6")
+							},
+							[
+								m(ItemTile, {tile: card, metadata, relativeRoute})
+							]
+						))
+						: [],
+
+					...features.items
+						? features.items.map(
+							(feature) => (
+								feature.card
+									? m(ItemTile, {tile: feature, metadata, relativeRoute})
+									: m(
+										feature.left ? FeatureLeft : Feature,
+										{
+											feature: {
+												size: features.iconSize || 3,
+												...feature,
+												class: features.itemsClass || "pad-2 screen"
+											},
+											metadata,
+											relativeRoute
+										},
+										[]
+									)
+							)
+						)
+						: [],
+
+					...features.footer
+						? [
+							m(
+								BootCol,
+								{
+									el: "li",
+									class: "feature-footer lighter col-12 screen " + (features.footer.outerClass || "pad-1"),
+									subclass: "text-al-center pad-6 " + (features.footer.containerClass || ""),
+									label: features.footer.title || "Footer"
+								},
+								[
+									m(ItemTile, {tile: features.footer, metadata, relativeRoute})
+								]
+							)
+						] : [],
+
+					...pageMetadata.footer
+						? [
+							m(
+								"li",
+								{"aria-label": pageMetadata.footer.title || "footer", class: "page-footer col-12"},
+								m(TailWidget, {el: "li", class: pageMetadata.footerClass || "shadow-2", ...pageMetadata.footer})
+							)
+						]
+						: []
+				]
+			);
+		}
+	);
+
+module.exports = FeatureList;

package/src/widgets.features/Youtube.js

@@ -0,0 +1,23 @@
+const m = require("mithril");
+
+function getYouTubeImage(ref) {
+	return `https://i3.ytimg.com/vi/${ref}/hqdefault.jpg`;
+}
+
+const YouTube = {
+	view: ({ attrs }) => m((attrs.el || "") + ".youtube.relative", {
+		class: attrs.class,
+		title: attrs.videoItem.title
+	}, [
+		m(".previewHolder.absolute.w-100.h-100", { role: "presentation" }, [
+			m("iframe", {
+				allowFullscreen: true,
+				class: "absolute w-100 h-100",
+				"data-img": attrs.image || getYouTubeImage(attrs.videoItem.ref),
+				"data-src": "https://www.youtube.com/embed/" + attrs.videoItem.ref + "?rel=0&modestbranding=1"
+			})
+		])
+	])
+};
+
+module.exports = { YouTube, getYouTubeImage };

package/src/widgets.features/bootcol.js

@@ -0,0 +1,29 @@
+const m = require("mithril");
+
+module.exports = {
+	view: ({ attrs, children }) => {
+
+		const
+
+			xild = m((attrs.iel || "") + ".grows", {
+				id: attrs.htmlid,
+				role: "presentation",
+				class: (attrs.rows ? "flexrow wrap" : "flexcol") + " " + (attrs.subclass || "")
+			}, children);
+
+		return attrs.simple
+			? xild
+			: m(
+				(attrs.el || "") + ".flexcol",
+				{
+					class: attrs.class || "col-12.container",
+					...attrs.label && { "aria-label": attrs.label }
+
+				},
+				[
+					xild,
+					...(attrs.after||[])
+				]
+			);
+	}
+};

package/src/widgets.features/css/feature.css

@@ -0,0 +1,112 @@
+.screen .feature {
+    background: var(--window-background-hi);
+    border-radius: 0.25rem;
+}
+
+.screen.fullrow {
+    height: 100%;
+}
+
+.screen.fullrow > div {
+    flex-grow: 1;
+    justify-content: center;
+}
+
+.screen .motto {
+    color: white;
+}
+
+.screen .features h1 {
+    width: 100%;
+    font-size: 1.5rem;
+    padding: 0.5rem;
+    background: rgba(0, 0, 0, 0.1);
+    border-bottom: solid 1px;
+    border-top: solid 1px;
+}
+
+.screen .features .body {
+    font-weight: normal;
+}
+
+.screen .imgicon {
+    margin: -0.15rem;
+}
+
+.screen .shot > img {
+    box-shadow: 0 0 2px var(--shadow-color);
+    border-radius: 0.25rem;
+}
+
+.paragraph.attrib-1 {
+    font-weight: bold;
+}
+
+.screen .attrib-1, .screen .attrib-2 {
+    font-size: 75%;
+    width: 100%;
+}
+
+.obsvideo video {
+    width: 100%;
+}
+
+a.paralink.accentbutton {
+    background: var(--accent);
+    color: var(--text-over-accent);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.obsvideo.fully {
+    order: -1;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.story {
+    order: 100;
+}
+
+.youtube.obsvideo.fully {
+    order: -1;
+    height: calc(100vw * 9 / 16);
+    margin-bottom: 0.25rem;
+}
+
+.youtube .previewWindow,
+.youtube .previewHolder {
+    pointer-events: all !important;
+}
+
+.youtube .emptywidget {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    pointer-events: none;
+}
+
+.youtube.video_ready .previewWindow {
+    opacity: 1;
+}
+
+.paragraph.nodownload {
+    border: solid 1px var(--border-color);
+    padding: 1rem;
+    margin-top: 1rem;
+    background: var(--accent-light);
+    border-radius: 0.25rem;
+}
+
+.obsvideo.inner {
+    margin: 1rem;
+    border-radius: 0.5rem !important;
+    overflow: hidden;
+    background: black;
+    color: white;
+    text-align: center;
+}

package/src/widgets.features/css/tail.css

@@ -0,0 +1,4 @@
+.tail a {
+    color: white;
+    text-decoration: none;
+}