@ingram-tech/nk-blog 0.1.5 → 0.1.6

package/src/unstyled/index.ts

@@ -0,0 +1,24 @@
+import { defineBlogComponents } from "../contract.js";
+import { Callout } from "./callout.js";
+import { Figure } from "./figure.js";
+import { NewsletterSubscribe } from "./newsletter-subscribe.js";
+import { Tweet } from "./tweet.js";
+import { YouTube } from "./youtube.js";
+
+export { Callout, Figure, NewsletterSubscribe, Tweet, YouTube };
+
+/**
+ * The complete default registry. A site's whole obligation is:
+ *
+ *   export const blogComponents = defineBlogComponents({
+ *       ...unstyled,
+ *       Callout: BrandCallout, // replaced wholesale where the brand cares
+ *   });
+ */
+export const unstyled = defineBlogComponents({
+	Callout,
+	Figure,
+	YouTube,
+	Tweet,
+	NewsletterSubscribe,
+});

package/src/unstyled/newsletter-subscribe.tsx

@@ -0,0 +1,23 @@
+import type { NewsletterSubscribeProps } from "../contract.js";
+
+/**
+ * Plain HTML form POSTing to the injected endpoint — works with zero client
+ * JS. The package never bakes in a newsletter backend.
+ */
+export const NewsletterSubscribe: React.FC<NewsletterSubscribeProps> = ({
+	action,
+	placeholder,
+	buttonLabel,
+	className,
+}) => (
+	<form action={action} method="post" className={className}>
+		<input
+			type="email"
+			name="email"
+			required
+			placeholder={placeholder ?? "you@example.com"}
+			aria-label="Email address"
+		/>
+		<button type="submit">{buttonLabel ?? "Subscribe"}</button>
+	</form>
+);

package/src/unstyled/tweet.tsx

@@ -0,0 +1,12 @@
+import type { TweetProps } from "../contract.js";
+
+/**
+ * Zero-JS default: the standard `twitter-tweet` blockquote, progressively
+ * enhanced if the site loads the platform widget script — otherwise it
+ * degrades to a plain link. No data fetching in the package.
+ */
+export const Tweet: React.FC<TweetProps> = ({ id, className }) => (
+	<blockquote className={["twitter-tweet", className].filter(Boolean).join(" ")}>
+		<a href={`https://twitter.com/i/status/${encodeURIComponent(id)}`}>View post</a>
+	</blockquote>
+);

package/src/unstyled/youtube.tsx

@@ -0,0 +1,24 @@
+import type { YouTubeProps } from "../contract.js";
+
+/**
+ * Privacy-enhanced (youtube-nocookie), lazy-loaded embed with a stable 16:9
+ * box (CLS). The inline aspect-ratio is behavior, not styling.
+ */
+export const YouTube: React.FC<YouTubeProps> = ({ id, title, start, className }) => {
+	const startSeconds = typeof start === "string" ? Number(start) : start;
+	const src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}${
+		startSeconds ? `?start=${startSeconds}` : ""
+	}`;
+	return (
+		<iframe
+			src={src}
+			title={title ?? "YouTube video"}
+			loading="lazy"
+			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+			allowFullScreen
+			referrerPolicy="strict-origin-when-cross-origin"
+			className={className}
+			style={{ aspectRatio: "16 / 9", width: "100%", border: 0 }}
+		/>
+	);
+};