website-xp-phone 1.5.0

package/src/components/MusicContent.tsx

@@ -0,0 +1,309 @@
+import { useEffect, useState } from "react";
+
+import { PageContent } from "./Page";
+import { processContent } from "../windowing/utils";
+import { type PageMetadata, type SectionProps } from "../windowing";
+
+const SOUNDCLOUD_JSON_URL =
+  "https://raw.githubusercontent.com/akinevz2/frontend/refs/heads/blogging/blog/soundcloud.json";
+const MUSIC_LINKS_URL =
+  "https://raw.githubusercontent.com/akinevz2/frontend/refs/heads/blogging/blog/music-links.json";
+
+type MusicTrack = {
+  path: string;
+  title: string;
+  url: string;
+};
+
+type MusicPayload = {
+  source: string;
+  generatedAt: string;
+  trackCount: number;
+  tracks: MusicTrack[];
+};
+
+type FavouriteLink = {
+  title: string;
+  url: string;
+};
+
+type FavouriteLinkContent = FavouriteLink | SectionProps;
+
+type MusicState = {
+  sections: SectionProps | SectionProps[] | undefined;
+  metadata: PageMetadata;
+  error?: string;
+};
+
+const LOADING_SECTION: SectionProps = {
+  className: "music-loading",
+  children: [],
+  heading: "Loading...",
+  content: [
+    "![Loading spinner](/spinner.svg)",
+    "Fetching tracks from /soundcloud.json",
+  ],
+};
+
+const buildState = (content: SectionProps | SectionProps[]): MusicState => {
+  const { processed, metadata } = processContent(content);
+  return {
+    sections: processed as SectionProps | SectionProps[],
+    metadata: { sections: metadata },
+  };
+};
+const isSectionProps = (value: unknown): value is SectionProps => {
+  const candidate = value as Partial<SectionProps>;
+  return typeof candidate.heading === "string" && Array.isArray(candidate.content);
+}
+const isFavouriteLink = (value: unknown): value is FavouriteLink => {
+  const candidate = value as Partial<FavouriteLink>;
+  return typeof candidate.title === "string" && typeof candidate.url === "string";
+}
+
+const isValidContentFavLink = (value: unknown): value is FavouriteLink | SectionProps => {
+  if (!value || typeof value !== "object") return false;
+  console.dir("Validating favourite link content:", value);
+  return isSectionProps(value) || isFavouriteLink(value);
+};
+
+const fetchFavouriteLinks = async (): Promise<FavouriteLinkContent[]> => {
+  const response = await fetch(MUSIC_LINKS_URL, {
+    method: "GET",
+    cache: "no-store",
+    headers: { Accept: "application/json" },
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const payload: unknown = await response.json();
+  if (!Array.isArray(payload)) throw new Error("Invalid music-links schema");
+  return payload.filter(isValidContentFavLink);
+};
+
+const buildSoundCloudEmbedUrl = (trackUrl: string) => {
+  const embedUrl = new URL("https://w.soundcloud.com/player/");
+  embedUrl.searchParams.set("url", trackUrl);
+  embedUrl.searchParams.set("color", "ff5500");
+  embedUrl.searchParams.set("auto_play", "false");
+  embedUrl.searchParams.set("hide_related", "false");
+  embedUrl.searchParams.set("show_comments", "true");
+  embedUrl.searchParams.set("show_user", "true");
+  embedUrl.searchParams.set("show_reposts", "false");
+  embedUrl.searchParams.set("visual", "false");
+  return embedUrl.toString();
+};
+
+const renderTrackEmbed = (track: MusicTrack) => {
+  const embedUrl = buildSoundCloudEmbedUrl(track.url);
+
+  return [
+    `<p class="music-track-title"><a href="${track.url}">${track.title}</a></p>`,
+    `<iframe
+      title="SoundCloud track: ${track.title}"
+      width="100%"
+      height="166"
+      scrolling="no"
+      frameBorder="no"
+      allow="autoplay"
+      loading="lazy"
+      referrerPolicy="strict-origin-when-cross-origin"
+      src="${embedUrl}"
+    ></iframe>`,
+    `[Open on SoundCloud](${track.url})`,
+  ].join("\n\n");
+};
+
+const getSpotifyEmbedUrl = (urlValue: string): string | null => {
+  try {
+    const parsed = new URL(urlValue);
+    if (parsed.hostname !== "open.spotify.com") {
+      return null;
+    }
+
+    const segments = parsed.pathname.split("/").filter(Boolean);
+    if (segments.length < 2) {
+      return null;
+    }
+
+    const resourceType = segments[0];
+    const resourceId = segments[1];
+    if (!resourceType || !resourceId) {
+      return null;
+    }
+
+    const allowedTypes = new Set(["track", "playlist", "album", "artist", "episode", "show"]);
+    if (!allowedTypes.has(resourceType)) {
+      return null;
+    }
+
+    return `https://open.spotify.com/embed/${resourceType}/${resourceId}`;
+  } catch {
+    return null;
+  }
+};
+
+const renderFavouriteLink = (link: FavouriteLink) => {
+  // If it's already a SectionProps, return it as-is
+  if ("content" in link) {
+    // Convert SectionProps to string representation
+    const section = link as SectionProps;
+    return section;
+  }
+
+  // Otherwise, it's a simple link
+  const favouriteLink = link as { title: string; url: string };
+
+  const embedUrl = getSpotifyEmbedUrl(favouriteLink.url);
+  if (!embedUrl) {
+    return `- [${favouriteLink.title}](${favouriteLink.url})`;
+  }
+
+  return [
+    `<p class="music-track-title"><a href="${favouriteLink.url}">${favouriteLink.title}</a></p>`,
+    `<iframe
+      title="Spotify item: ${favouriteLink.title}"
+      style="border-radius:12px"
+      src="${embedUrl}"
+      width="100%"
+      height="152"
+      frameborder="0"
+      allowfullscreen=""
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
+      referrerpolicy="strict-origin-when-cross-origin"
+    ></iframe>`,
+    `[Open on Spotify](${favouriteLink.url})`,
+  ].join("\n\n");
+};
+
+const toMusicSections = (payload: MusicPayload, favouriteLinks: FavouriteLinkContent[]): SectionProps[] => {
+  const trackEmbeds = payload.tracks.map((track) => renderTrackEmbed(track));
+
+  const favouriteLinkList = favouriteLinks.map((link) => (isFavouriteLink(link)) ? renderFavouriteLink(link) : link);
+
+  // print all non-string to log
+  for (const link of favouriteLinkList) {
+    if (typeof link !== "string") {
+      console.dir("Non-string favourite link content:", link);
+    }
+  }
+
+  return [
+    {
+      className: "music-favorite-uploads",
+      children: [],
+      heading: "Favorite Uploads",
+      content:
+        trackEmbeds.length > 0
+          ? [
+            `Generated: ${new Date(payload.generatedAt).toLocaleString()}`,
+            `Track count: ${payload.trackCount}`,
+            ...trackEmbeds,
+          ]
+          : ["No tracks found in this snapshot."],
+    },
+    {
+      className: "music-favourite-links",
+      children: [],
+      heading: "Favourite Links",
+      content:
+        favouriteLinkList.length > 0
+          ? favouriteLinkList
+          : ["No favourite links configured yet."],
+    },
+    {
+      className: "music-source",
+      children: [],
+      heading: "Source",
+      content: [
+        `Artist page: [${payload.source}](${payload.source})`,
+        `<iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/artist/2vy7FXU6dP4OEBiJVjsw7r?utm_source=generator&theme=0&si=0c8005cead7543c5" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>`,
+      ],
+    },
+  ];
+};
+
+const isMusicPayload = (value: unknown): value is MusicPayload => {
+  if (!value || typeof value !== "object") return false;
+
+  const candidate = value as Partial<MusicPayload>;
+  return (
+    typeof candidate.source === "string" &&
+    typeof candidate.generatedAt === "string" &&
+    typeof candidate.trackCount === "number" &&
+    Array.isArray(candidate.tracks)
+  );
+};
+
+export default function MusicContent() {
+  const [musicState, setMusicState] = useState<MusicState>(() =>
+    buildState(LOADING_SECTION),
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        const [scResponse, favouriteLinks] = await Promise.all([
+          fetch(SOUNDCLOUD_JSON_URL, {
+            method: "GET",
+            cache: "no-store",
+            headers: { Accept: "application/json" },
+          }).catch(() => {
+            return fetch("/soundcloud.json", {
+              method: "GET",
+              cache: "no-store",
+              headers: { Accept: "application/json" },
+            })
+          }),
+          fetchFavouriteLinks().catch(() => [] as FavouriteLink[]),
+        ]);
+
+        if (!scResponse.ok) {
+          throw new Error(`HTTP ${scResponse.status}`);
+        }
+
+        const payload: unknown = await scResponse.json();
+        if (!isMusicPayload(payload)) {
+          throw new Error("Invalid music payload schema");
+        }
+
+        if (!cancelled) {
+          setMusicState(buildState(toMusicSections(payload, favouriteLinks)));
+        }
+      } catch (error) {
+        if (!cancelled) {
+          const message =
+            error instanceof Error ? error.message : "Unknown error";
+          setMusicState({
+            sections: undefined,
+            metadata: { sections: [] },
+            error: `Failed to load music data (${message}).`,
+          });
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      {musicState.error ? (
+        <p className="status-bar">{musicState.error}</p>
+      ) : null}
+      {musicState.sections ? (
+        <PageContent
+          sections={musicState.sections}
+          pageMetadata={musicState.metadata}
+        />
+      ) : (
+        <PageContent pageMetadata={musicState.metadata} />
+      )}
+    </>
+  );
+}

package/src/components/NavBarController.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+
+// Temporary stub - navbar visibility logic
+const useIsNavBarVisible = () => true;
+
+export const NavBarController = () => {
+  const isVisible = useIsNavBarVisible();
+  const isHomePage =
+    window.location.pathname === "/" ||
+    window.location.pathname === "/index.html";
+  const shouldShow = !isHomePage || isVisible;
+
+  useEffect(() => {
+    const navbar = document.querySelector("nav");
+    const body = document.body;
+
+    if (navbar && body) {
+      // Add transition for smooth animation
+      navbar.style.transition = "bottom 0.4s ease-out, opacity 0.4s ease-out";
+
+      if (shouldShow) {
+        navbar.style.opacity = "1";
+        body.classList.add("nav-visible");
+
+        // Position at bottom on non-home pages
+        if (!isHomePage) {
+          navbar.style.position = "absolute";
+          navbar.style.top = "auto";
+          navbar.style.left = "50%";
+          navbar.style.transform = "translateX(-50%)";
+          navbar.style.bottom = "10px";
+          navbar.style.marginTop = "0";
+        } else {
+          navbar.style.transform = "translateY(0)";
+        }
+      } else {
+        navbar.style.opacity = "0";
+        // Position below viewport on non-home pages, above viewport on home page
+        if (!isHomePage) {
+          navbar.style.position = "absolute";
+          navbar.style.top = "auto";
+          navbar.style.left = "50%";
+          navbar.style.transform = "translateX(-50%)";
+          // Push completely off page
+          navbar.style.bottom = "-200px";
+        } else {
+          navbar.style.transform = "translateY(-100%)";
+        }
+        body.classList.remove("nav-visible");
+      }
+    }
+  }, [shouldShow, isHomePage]);
+
+  return null;
+};

package/src/components/NavBarControllerWrapper.tsx

@@ -0,0 +1,13 @@
+import { SectionProvider } from "../windowing";
+import { NavBarController } from "./NavBarController";
+
+export const NavBarControllerWrapper = () => {
+  // Create empty metadata for navbar context
+  const pageMetadata = { sections: [] };
+
+  return (
+    <SectionProvider pageMetadata={pageMetadata}>
+      <NavBarController />
+    </SectionProvider>
+  );
+};

package/src/components/Page.tsx

@@ -0,0 +1,56 @@
+import { Addon, AddonList, type AddonProps } from "./Addon";
+import {
+  Section,
+  SectionProvider,
+  type SectionProps,
+  type PageMetadata,
+} from "../windowing";
+import { MenuBarWithContext } from "./MenuBarWithContext";
+
+export type PageProps = {
+  sections?: SectionProps | SectionProps[];
+  addons?: AddonProps | AddonProps[];
+  pageMetadata?: PageMetadata;
+};
+
+export const PageContent = ({ sections, pageMetadata }: PageProps) => {
+  const metadata = pageMetadata || { sections: [] };
+
+  if (!sections) {
+    return null;
+  }
+
+  return (
+    <SectionProvider pageMetadata={metadata}>
+      <section className="page">
+        {Array.isArray(sections)
+          ? sections.map((item, index) => (
+            <Section key={item.uuid || index} {...item} />
+          ))
+          : <Section {...sections} />}
+      </section>
+      <MenuBarWithContext />
+    </SectionProvider>
+  );
+};
+
+export const PageWithAddons = ({ addons, pageMetadata }: PageProps) => {
+  const metadata = pageMetadata || { sections: [] };
+
+  if (!addons) {
+    return null;
+  }
+
+  return (
+    <SectionProvider pageMetadata={metadata}>
+      <section className="page">
+        {Array.isArray(addons)
+          ? addons.map((item, index) => (
+            <Addon key={item.uuid || index} {...item} />
+          ))
+          : <AddonList {...addons} />}
+      </section>
+      <MenuBarWithContext />
+    </SectionProvider>
+  );
+};

package/src/components/SitemapContent.tsx

@@ -0,0 +1,125 @@
+import { useMemo } from "react";
+
+import pages from "../pages.json";
+import { PageContent } from "./Page";
+import { processContent } from "../windowing/utils";
+import type { PageMetadata, SectionProps } from "../windowing";
+
+type RouteDefinition = {
+  path: string;
+  title: string;
+  description: string;
+  menuLabel?: string;
+};
+
+type SitemapSection = {
+  heading: string;
+  summary: string;
+  routes: RouteDefinition[];
+};
+
+const SITE_ROUTE_DEFINITIONS = pages as RouteDefinition[];
+
+const SITE_ASSETS: SectionProps[] = [
+  {
+    heading: "Crawler assets",
+    link: "/robots.txt",
+    content: [
+      "[robots.txt](/robots.txt)",
+      "[XML sitemap](/sitemap.xml)",
+      "[SoundCloud snapshot](/soundcloud.json)",
+    ],
+  },
+  {
+    heading: "Common public files",
+    content: [
+      "[Resume PDF](/resume.pdf)",
+      "[Resume HTML](/documents/resume.html)",
+      "[Avatar](/avatar.png)",
+      "[Favicon](/favicon.ico)",
+      "[Loading stylesheet](/loading.css)",
+    ],
+  },
+];
+
+const SITE_MAP_GROUPS: SitemapSection[] = [
+  {
+    heading: "Core navigation",
+    summary: "The pages people are most likely to start with.",
+    routes: SITE_ROUTE_DEFINITIONS.filter(({ path }) =>
+      ["/", "/blog", "/music"].includes(path),
+    ),
+  },
+  {
+    heading: "Interactive surfaces",
+    summary: "The utility pages that support downloads, contact, and tooling.",
+    routes: SITE_ROUTE_DEFINITIONS.filter(({ path }) =>
+      ["/addons", "/wow", "/contact", "/resume"].includes(path),
+    ),
+  },
+  {
+    heading: "Index and diagnostics",
+    summary: "Files and pages that help crawlers understand the site.",
+    routes: SITE_ROUTE_DEFINITIONS.filter(({ path }) => ["/sitemap"].includes(path)),
+  },
+];
+
+const buildRouteSections = (group: SitemapSection): SectionProps => ({
+  heading: group.heading,
+  content: [
+    group.summary,
+    ...group.routes.map((route) => ({
+      heading: route.title,
+      link: route.path,
+      content: [
+        `Path: [${route.path}](${route.path})`,
+        route.description,
+        route.menuLabel
+          ? `Menu label: ${route.menuLabel}`
+          : "Menu label: hidden from navigation",
+      ],
+    })),
+  ],
+});
+
+const buildSitemapSections = (): SectionProps[] => [
+  {
+    className: "sitemap-intro",
+    heading: "Sitemap",
+    content: [
+      "This page is a human-readable map of the website. It mirrors the crawlable route list and points at the files search engines should use first.",
+      "Start with [robots.txt](/robots.txt) and [the XML sitemap](/sitemap.xml), then use the route groups below to jump directly to the part of the site you want.",
+    ],
+  },
+  ...SITE_MAP_GROUPS.map(buildRouteSections),
+  {
+    className: "sitemap-assets",
+    heading: "Assets and references",
+    content: [
+      "These are the supporting files that help the site load, render, or surface richer snippets.",
+      ...SITE_ASSETS,
+    ],
+  },
+  {
+    className: "sitemap-notes",
+    heading: "Indexing notes",
+    content: [
+      "The XML sitemap is generated at build time from the same route registry that drives the navigation menu, so the crawl surface stays aligned with the site structure.",
+      "The homepage also publishes MusicGroup structured data so the music profile, social links, and latest SoundCloud releases stay discoverable.",
+    ],
+  },
+];
+
+export default function SitemapContent() {
+  const { processed, metadata } = useMemo(() => {
+    const sections = buildSitemapSections();
+    return processContent(sections);
+  }, []);
+
+  return (
+    <PageContent
+      sections={processed as SectionProps | SectionProps[]}
+      pageMetadata={{ sections: metadata } satisfies PageMetadata}
+    />
+  );
+}

package/src/contacts.json

@@ -0,0 +1,32 @@
+{
+  "heading": "Socials",
+  "content": [
+    "I hope that I have added enough!",
+    {
+      "heading": "Email",
+      "content": [
+        "[akinevz@gmail.com](mailto:akinevz@gmail.com)",
+        "[akinevz@outlook.com](mailto:akinevz@outlook.com)"
+      ]
+    },
+    {
+      "heading": "GitHub",
+      "content": [
+        "[akinevz(archive)](https://github.com/akinevz)",
+        "[akinevz2](https://github.com/akinevz2)"
+      ]
+    },
+    {
+      "heading": "Social",
+      "content": [
+        "[LinkedIn](https://www.linkedin.com/in/akinevz/)",
+        "[Instagram](https://www.instagram.com/akinevz2/)",
+        "[Twitter/X](https://x.com/akinevz)"
+      ]
+    },
+    {
+      "heading": "Discord",
+      "content": "[kine_](https://discord.com/channels/@me/)"
+    }
+  ]
+}

package/src/env.d.ts

@@ -0,0 +1,13 @@
+interface ImportMetaEnv {
+    readonly VITE_FIREBASE_API_KEY?: string;
+    readonly VITE_FIREBASE_AUTH_DOMAIN?: string;
+    readonly VITE_FIREBASE_PROJECT_ID?: string;
+    readonly VITE_FIREBASE_STORAGE_BUCKET?: string;
+    readonly VITE_FIREBASE_MESSAGING_SENDER_ID?: string;
+    readonly VITE_FIREBASE_APP_ID?: string;
+    readonly VITE_FIREBASE_MEASUREMENT_ID?: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

package/src/lib/assistantStateMachine.ts

@@ -0,0 +1,80 @@
+import type { AssistantConfig } from "./naggingAssistantClient";
+
+export type AssistantPromptOptions = {
+    closeModalOnSubmit?: boolean;
+    // wisdomRequest?: boolean;
+};
+
+export type ClippyShadowState = {
+    isSubmitPulseActive: boolean;
+    isConnectionFlashActive: boolean;
+    showConversationModal: boolean;
+    // isWisdomRequestPending: boolean;
+    // wisdomPulsePhase: number;
+    isAssistantRequestPending: boolean;
+    isClippyHovered: boolean;
+};
+
+// Wisdom feature is disabled in production due to unresolved CORS constraints.
+// const CLIPPY_WISDOM_PROMPTS = [
+//     "Give me one oddly practical life tip.",
+//     "Share one short piece of weird-but-useful wisdom.",
+//     "Offer one concise line of advice for focus.",
+// ];
+
+export const hasConfiguredAssistant = (config: AssistantConfig) =>
+    !!config.endpoint.trim() && !!config.model.trim();
+
+export const shouldShowInTransitPulse = (options?: AssistantPromptOptions) =>
+    !!options?.closeModalOnSubmit;
+
+// export const pickRandomWisdomPrompt = () => {
+//     const fallbackPrompt = "Share one concise piece of practical advice.";
+//     return (
+//         CLIPPY_WISDOM_PROMPTS[
+//         Math.floor(Math.random() * CLIPPY_WISDOM_PROMPTS.length)
+//         ] ?? fallbackPrompt
+//     );
+// };
+
+export const buildClippyShadowFilter = (state: ClippyShadowState) => {
+    if (state.isSubmitPulseActive) {
+        return "drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.8))";
+    }
+
+    if (state.isConnectionFlashActive) {
+        return "drop-shadow(0 0 8px rgba(220, 30, 30, 0.95)) drop-shadow(0 0 16px rgba(220, 30, 30, 0.8))";
+    }
+
+    if (state.showConversationModal) {
+        return "drop-shadow(0 0 8px rgba(0, 190, 70, 0.95)) drop-shadow(0 0 16px rgba(0, 190, 70, 0.8))";
+    }
+
+    // Wisdom pulse shadow intentionally disabled.
+    // if (state.isWisdomRequestPending) {
+    //     const intensity = 0.28 + ((Math.sin(state.wisdomPulsePhase) + 1) / 2) * 0.28;
+    //     return `drop-shadow(0 0 7px rgba(255, 255, 255, ${intensity.toFixed(3)})) drop-shadow(0 0 14px rgba(255, 255, 255, ${(intensity * 0.8).toFixed(3)}))`;
+    // }
+
+    if (state.isAssistantRequestPending && state.isClippyHovered) {
+        return "drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 14px rgba(190, 220, 255, 0.8))";
+    }
+
+    return "drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4))";
+};
+
+// export class WisdomPulseClock {
+//     private intervalId: number | null = null;
+//
+//     start(onTick: () => void, intervalMs: number) {
+//         this.stop();
+//         this.intervalId = window.setInterval(onTick, intervalMs);
+//     }
+//
+//     stop() {
+//         if (this.intervalId !== null) {
+//             window.clearInterval(this.intervalId);
+//             this.intervalId = null;
+//         }
+//     }
+// }