+
+
+
+
+ + YouTube +
+{item.title}
++ {item.description} +
+
+
+
+ Media
+
+
Our Story
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
new file mode 100644
index 0000000..1977e04
--- /dev/null
+++ b/src/components/media/MediaCard.tsx
@@ -0,0 +1,111 @@
+import { InstagramIcon } from "@/components/icons";
+import type { MediaItem } from "@/lib/media";
+import { getYouTubeEmbedUrl } from "@/lib/media";
+
+interface MediaCardProps {
+ item: MediaItem;
+}
+
+export function MediaCard({ item }: MediaCardProps) {
+ if (item.platform === "youtube") {
+ if (!item.videoId) {
+ throw new Error(`YouTube item ${item.id} is missing its videoId.`);
+ }
+
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export function MediaGrid({
+ items,
+ emptyTitle = "New videos are on the way",
+ emptyDescription = "We're collecting the lessons, workshops, and small moments that make CodeWithPurpose what it is. Check back soon for the first set.",
+}: {
+ items: readonly MediaItem[];
+ emptyTitle?: string;
+ emptyDescription?: string;
+}) {
+ if (items.length === 0) {
+ return (
+ ("all");
+ const [search, setSearch] = useState("");
+
+ const filteredItems = useMemo(
+ () =>
+ items.filter(
+ (item) =>
+ (filter === "all" || item.platform === filter) &&
+ matchesSearch(item, search),
+ ),
+ [filter, items, search],
+ );
+
+ const hasActiveFilters = filter !== "all" || search.trim().length > 0;
+ const resultLabel = filteredItems.length === 1 ? "video" : "videos";
+
+ return (
+
+
+ );
+}
diff --git a/src/lib/links.ts b/src/lib/links.ts
index 27cbecd..d438dfd 100644
--- a/src/lib/links.ts
+++ b/src/lib/links.ts
@@ -22,6 +22,7 @@ export const DASHBOARD_HREF = "/dashboard";
export const LOGIN_HREF = "/login";
export const SIGN_UP_HREF = "/sign-up";
export const LEADERBOARD_HREF = "/leaderboard";
+export const MEDIA_HREF = "/media";
export const ABOUT_HREF = "/about";
export const JOIN_HREF = "/join";
/**
@@ -116,6 +117,7 @@ export const SUBSTACK_EMBED_SRC = "https://codewithpurpose.substack.com/embed";
export const NAV_LINKS = [
{ label: "Courses", href: COURSES_HREF },
+ { label: "Media", href: MEDIA_HREF },
{ label: "About Us", href: ABOUT_HREF },
{ label: "Join Us", href: JOIN_HREF },
{ label: "Stories", href: IMPACT_HREF },
diff --git a/src/lib/media.ts b/src/lib/media.ts
new file mode 100644
index 0000000..e9f2a94
--- /dev/null
+++ b/src/lib/media.ts
@@ -0,0 +1,128 @@
+/**
+ * Repository-owned media entries for the public video library.
+ *
+ * YouTube is embedded directly with its privacy-enhanced host. Instagram is
+ * represented as a lightweight card that links to the original Reel or post;
+ * Instagram's embed script is intentionally not loaded on every page.
+ */
+
+export type MediaPlatform = "youtube" | "instagram";
+
+export interface MediaItem {
+ id: string;
+ platform: MediaPlatform;
+ title: string;
+ description: string;
+ url: string;
+ /** Required for YouTube entries; omitted for Instagram entries. */
+ videoId?: string;
+ /** A local path under /public, used for Instagram preview cards. */
+ thumbnail?: string;
+ featured: boolean;
+}
+
+/** Add published video entries here. Keep this list empty until real URLs exist. */
+export const MEDIA_ITEMS: readonly MediaItem[] = [];
+
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+
+function isYouTubeUrl(value: string, videoId: string): boolean {
+ try {
+ const url = new URL(value);
+ if (
+ url.protocol === "https:" &&
+ (url.hostname === "youtube.com" ||
+ url.hostname === "www.youtube.com" ||
+ url.hostname === "m.youtube.com" ||
+ url.hostname === "youtu.be")
+ ) {
+ const candidate =
+ url.hostname === "youtu.be"
+ ? url.pathname.slice(1)
+ : url.searchParams.get("v") ?? url.pathname.split("/").filter(Boolean).at(-1);
+ return candidate === videoId;
+ }
+ return false;
+ } catch {
+ return false;
+ }
+}
+
+function isInstagramUrl(value: string): boolean {
+ try {
+ const url = new URL(value);
+ return (
+ url.protocol === "https:" &&
+ (url.hostname === "instagram.com" || url.hostname === "www.instagram.com") &&
+ /^\/(reel|p|tv)\/[A-Za-z0-9_-]+\/?$/.test(url.pathname)
+ );
+ } catch {
+ return false;
+ }
+}
+
+/**
+ * Fails loudly during development/build instead of rendering a broken card.
+ * An empty list is valid while the team is collecting the first URLs; once
+ * entries exist, the homepage must have exactly three featured items.
+ */
+export function validateMediaItems(items: readonly MediaItem[]): void {
+ const ids = new Set();
+ const featured = items.filter((item) => item.featured);
+
+ if (featured.length !== 0 && featured.length !== 3) {
+ throw new Error(
+ `Media library must have either zero or three featured items; found ${featured.length}.`,
+ );
+ }
+
+ for (const item of items) {
+ if (ids.has(item.id)) {
+ throw new Error(`Media item ids must be unique; duplicate id: ${item.id}.`);
+ }
+ ids.add(item.id);
+
+ if (!item.title.trim()) {
+ throw new Error(`Media item ${item.id} needs a title.`);
+ }
+ if (!item.description.trim()) {
+ throw new Error(`Media item ${item.id} needs a description.`);
+ }
+ if (item.thumbnail && !item.thumbnail.startsWith("/")) {
+ throw new Error(`Media item ${item.id} must use a local thumbnail path.`);
+ }
+
+ if (item.platform === "youtube") {
+ if (!item.videoId || !YOUTUBE_ID.test(item.videoId)) {
+ throw new Error(`YouTube item ${item.id} needs an 11-character videoId.`);
+ }
+ if (!isYouTubeUrl(item.url, item.videoId)) {
+ throw new Error(`YouTube item ${item.id} needs a valid HTTPS YouTube URL.`);
+ }
+ } else {
+ if (item.videoId) {
+ throw new Error(`Instagram item ${item.id} must not define a videoId.`);
+ }
+ if (!isInstagramUrl(item.url)) {
+ throw new Error(`Instagram item ${item.id} needs a valid Reel, post, or TV URL.`);
+ }
+ }
+ }
+}
+
+validateMediaItems(MEDIA_ITEMS);
+
+export function getMediaItems(): readonly MediaItem[] {
+ return MEDIA_ITEMS;
+}
+
+export function getFeaturedMedia(): readonly MediaItem[] {
+ return MEDIA_ITEMS.filter((item) => item.featured);
+}
+
+export function getYouTubeEmbedUrl(videoId: string): string {
+ if (!YOUTUBE_ID.test(videoId)) {
+ throw new Error(`Invalid YouTube videoId: ${videoId}.`);
+ }
+ return `https://www.youtube-nocookie.com/embed/${videoId}`;
+}
diff --git a/supabase/chapters.sql b/supabase/chapters.sql
index 09896fa..1997dca 100644
--- a/supabase/chapters.sql
+++ b/supabase/chapters.sql
@@ -10,7 +10,7 @@
-- `progress` rows for it in place (they are already written) but stops new
-- ones being accepted.
--
--- 189 published chapters across 8 tracks.
+-- 211 published chapters across 9 tracks.
begin;
@@ -215,6 +215,28 @@ insert into public.chapters (course_id, chapter_slug) values
('html-css', 'styling-the-page'),
('html-css', 'accessibility-basics'),
('html-css', 'devtools'),
- ('html-css', 'publishing-your-site');
+ ('html-css', 'publishing-your-site'),
+ ('computer-vision', 'what-is-computer-vision'),
+ ('computer-vision', 'images-as-numbers'),
+ ('computer-vision', 'colour-and-channels'),
+ ('computer-vision', 'convolution'),
+ ('computer-vision', 'edge-detection'),
+ ('computer-vision', 'feature-detectors'),
+ ('computer-vision', 'image-preprocessing'),
+ ('computer-vision', 'image-classification'),
+ ('computer-vision', 'pixels-to-predictions'),
+ ('computer-vision', 'convolutional-neural-networks'),
+ ('computer-vision', 'transfer-learning'),
+ ('computer-vision', 'object-detection'),
+ ('computer-vision', 'bounding-boxes-and-iou'),
+ ('computer-vision', 'non-max-suppression'),
+ ('computer-vision', 'image-segmentation'),
+ ('computer-vision', 'confusion-matrix-for-vision'),
+ ('computer-vision', 'mean-average-precision'),
+ ('computer-vision', 'dataset-bias'),
+ ('computer-vision', 'overfitting-in-vision'),
+ ('computer-vision', 'face-detection-and-privacy'),
+ ('computer-vision', 'vision-in-self-driving-cars'),
+ ('computer-vision', 'from-prototype-to-production');
commit;
{title} diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx index 531594e..27eb8bd 100644 --- a/src/components/SiteFooter.tsx +++ b/src/components/SiteFooter.tsx @@ -17,6 +17,7 @@ import { LEARN_ML_HREF, LEARN_PYTHON_HREF, LEARN_VIBECODING_HREF, + MEDIA_HREF, TOOLKIT_HREF, X_HREF, } from "@/lib/links"; @@ -106,6 +107,11 @@ export function SiteFooter() { Learning Toolkit +
+ {item.thumbnail ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {item.title}
++ {item.description} +
+ + Watch on Instagram → + +
+
+ );
+ }
+
+ return (
+ {emptyTitle}
++ {emptyDescription} +
+
+ {items.map((item) => (
+
+ );
+}
diff --git a/src/components/media/MediaLibrary.tsx b/src/components/media/MediaLibrary.tsx
new file mode 100644
index 0000000..1c385ac
--- /dev/null
+++ b/src/components/media/MediaLibrary.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { MediaGrid } from "@/components/media/MediaCard";
+import type { MediaItem, MediaPlatform } from "@/lib/media";
+
+type MediaFilter = "all" | MediaPlatform;
+
+const FILTERS: readonly { label: string; value: MediaFilter }[] = [
+ { label: "All videos", value: "all" },
+ { label: "YouTube", value: "youtube" },
+ { label: "Instagram", value: "instagram" },
+];
+
+function matchesSearch(item: MediaItem, search: string): boolean {
+ if (!search.trim()) return true;
+
+ const query = search.trim().toLowerCase();
+ return `${item.title} ${item.description}`.toLowerCase().includes(query);
+}
+
+export function MediaLibrary({ items }: { items: readonly MediaItem[] }) {
+ const [filter, setFilter] = useState
+
+ );
+}
diff --git a/src/components/media/MediaSection.tsx b/src/components/media/MediaSection.tsx
new file mode 100644
index 0000000..2274b2c
--- /dev/null
+++ b/src/components/media/MediaSection.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { InstagramIcon } from "@/components/icons";
+import { MediaGrid } from "@/components/media/MediaCard";
+import { getFeaturedMedia } from "@/lib/media";
+import { INSTAGRAM_HREF, MEDIA_HREF } from "@/lib/links";
+
+export function MediaSection() {
+ const featured = getFeaturedMedia();
+
+ return (
+
+
+
+
+
+
+
+
+
+ + Browse the library by platform or search the collection. +
+
+ {FILTERS.map((option) => {
+ const isActive = filter === option.value;
+
+ return (
+
+ );
+ })}
+
+
+
+ setSearch(event.target.value)}
+ placeholder="Try “students”"
+ className="mt-2 min-h-11 w-full rounded-lg border border-[var(--home-hairline-strong)] bg-[var(--home-page)] px-3.5 text-[15px] text-[var(--home-ink)] outline-none transition-shadow placeholder:text-[var(--home-ink-quiet)] focus-visible:ring-2 focus-visible:ring-[var(--home-fern)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--home-white)]"
+ />
+
+
+
+ + Showing {filteredItems.length} {resultLabel} +
+ {hasActiveFilters && ( + + )} +
+
+
+
+
+
+
+
+
+
+ View all videos →
+
+ See what we're making
++ Short lessons, student stories, and the work happening behind free + education. +
+
+ {featured.length > 0 ? (
+
+
+
+ )}
+
+
+
+
+
+ New videos are on the way
++ Follow along while we bring our lessons and workshops to the + screen. +
+