website-xp-phone 1.5.0

package/src/windowing/types.ts

@@ -0,0 +1,33 @@
+import type React from "react";
+
+export type Heading = string;
+export type HttpUrl = `http://${string}` | `https://${string}`;
+export type LinkUrl = HttpUrl | `/${string}`;
+
+export type Content = string | (string | SectionProps)[];
+
+export type SectionProps = {
+  className?: string | undefined;
+  heading?: Heading | undefined;
+  content?: Content | undefined;
+  link?: LinkUrl | undefined;
+  printout?: string | string[] | undefined;
+  children?: React.ReactNode;
+  depth?: number | undefined;
+  uuid?: string | undefined;
+};
+
+export type SectionMetadata = {
+  uuid: string;
+  heading: string;
+  depth: number;
+};
+
+export type ContentWithUUID<T> = Omit<T, "content"> & {
+  uuid: string;
+  content?: string | (string | ContentWithUUID<T>)[];
+};
+
+export type PageMetadata = {
+  sections: SectionMetadata[];
+};

package/src/windowing/utils.ts

@@ -0,0 +1,135 @@
+import type { SectionProps, SectionMetadata, ContentWithUUID } from "./types";
+
+const createUUID = () => {
+  if (
+    typeof globalThis.crypto !== "undefined" &&
+    typeof globalThis.crypto.randomUUID === "function"
+  ) {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `uuid-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+};
+
+function ensureValidLinkUrl(link: string, heading?: string): void {
+  if (link.startsWith("/")) {
+    return;
+  }
+
+  let parsed: URL;
+
+  try {
+    parsed = new URL(link);
+  } catch {
+    throw new Error(
+      `Invalid section link URL${heading ? ` for '${heading}'` : ""}: '${link}'.`,
+    );
+  }
+
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error(
+      `Section link must use http/https or absolute local path${heading ? ` for '${heading}'` : ""}: '${link}'.`,
+    );
+  }
+}
+
+function validateSectionLinks(item: SectionProps): void {
+  if (typeof item.link === "string") {
+    ensureValidLinkUrl(item.link, item.heading);
+  }
+
+  if (!Array.isArray(item.content)) {
+    return;
+  }
+
+  for (const subItem of item.content) {
+    if (typeof subItem === "string") {
+      continue;
+    }
+
+    validateSectionLinks(subItem);
+  }
+}
+
+function validateContentLinks<T extends SectionProps>(content: T | T[]): void {
+  if (Array.isArray(content)) {
+    for (const item of content) {
+      validateSectionLinks(item);
+    }
+    return;
+  }
+
+  validateSectionLinks(content);
+}
+
+/**
+ * Generic function to recursively assign UUIDs to content items
+ */
+function assignUUIDs<T extends SectionProps>(
+  item: T,
+  depth: number = 0,
+  metadata: Map<string, SectionMetadata> = new Map(),
+): { result: ContentWithUUID<T>; metadata: Map<string, SectionMetadata> } {
+  const uuid = createUUID();
+  const heading = item.heading || "";
+
+  // Store metadata
+  if (heading) {
+    metadata.set(uuid, { uuid, heading, depth });
+  }
+
+  // Handle content recursively
+  let newContent: string | (string | ContentWithUUID<T>)[] | undefined;
+  if (item.content) {
+    if (typeof item.content === "string") {
+      newContent = item.content;
+    } else if (Array.isArray(item.content)) {
+      const mapped = item.content.map((subItem: unknown) => {
+        if (typeof subItem === "string") {
+          return subItem;
+        } else {
+          const result = assignUUIDs(subItem as T, depth + 1, metadata);
+          return result.result;
+        }
+      });
+      newContent = mapped as (string | ContentWithUUID<T>)[];
+    }
+  }
+
+  const resultWithUUID: ContentWithUUID<T> = {
+    ...item,
+    uuid,
+    content: newContent,
+    depth,
+  } as ContentWithUUID<T>;
+
+  return { result: resultWithUUID, metadata };
+}
+
+/**
+ * Process an array or single content item
+ */
+export function processContent<T extends SectionProps>(
+  content: T | T[],
+): {
+  processed: ContentWithUUID<T> | ContentWithUUID<T>[];
+  metadata: SectionMetadata[];
+} {
+  validateContentLinks(content);
+
+  const metadata = new Map<string, SectionMetadata>();
+
+  if (Array.isArray(content)) {
+    const processed = content.map((item) => {
+      const result = assignUUIDs(item, 0, metadata);
+      return result.result;
+    });
+    return { processed, metadata: Array.from(metadata.values()) };
+  } else {
+    const result = assignUUIDs(content, 0, metadata);
+    return {
+      processed: result.result,
+      metadata: Array.from(result.metadata.values()),
+    };
+  }
+}

package/tests/generate-soundcloud-json.test.mjs

@@ -0,0 +1,63 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  buildTracks,
+  isTrackPath,
+  parseOutput,
+  titleFromPath,
+} from "../scripts/generate-soundcloud-json.mjs";
+
+test("parseOutput extracts the first JSON payload from pagerts output", () => {
+  const payload = parseOutput(
+    `noise
+[{
+  "resources": [{ "link": { "value": "/akinevz/track-one" } }]
+}]
+trailing logs`,
+  );
+
+  assert.equal(Array.isArray(payload), true);
+  assert.equal(payload.length, 1);
+  assert.deepEqual(payload[0].resources[0].link.value, "/akinevz/track-one");
+});
+
+test("parseOutput rejects output without JSON", () => {
+  assert.throws(() => parseOutput("no json payload here"), /does not contain JSON payload/);
+});
+
+test("isTrackPath only accepts direct track paths", () => {
+  assert.equal(isTrackPath("/akinevz/track-one"), true);
+  assert.equal(isTrackPath("/akinevz"), false);
+  assert.equal(isTrackPath("/akinevz/sets/mixtape"), false);
+  assert.equal(isTrackPath("/akinevz/likes"), false);
+  assert.equal(isTrackPath("/akinevz/tracks"), false);
+  assert.equal(isTrackPath("/akinevz/comments"), false);
+  assert.equal(isTrackPath("/someone-else/track"), false);
+});
+
+test("titleFromPath derives the last path segment", () => {
+  assert.equal(titleFromPath("/akinevz/microtonal-vudoo"), "microtonal-vudoo");
+});
+
+test("buildTracks deduplicates resources and maps them into soundcloud URLs", () => {
+  const tracks = buildTracks([
+    { link: { value: "/akinevz/track-one" } },
+    { link: { value: "/akinevz/track-one" } },
+    { link: { value: "/akinevz/track-two" } },
+    { link: { value: "/akinevz/sets/mixtape" } },
+  ]);
+
+  assert.deepEqual(tracks, [
+    {
+      path: "/akinevz/track-one",
+      title: "track-one",
+      url: "https://soundcloud.com/akinevz/track-one",
+    },
+    {
+      path: "/akinevz/track-two",
+      title: "track-two",
+      url: "https://soundcloud.com/akinevz/track-two",
+    },
+  ]);
+});

package/tests/music-schema.test.mjs

@@ -0,0 +1,53 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+
+import { buildMusicGroupSchema, serializeJsonLd } from "../scripts/music-schema.mjs";
+
+test("buildMusicGroupSchema includes the requested profile fields", () => {
+    const schema = buildMusicGroupSchema([
+        { title: "latest-track", url: "https://soundcloud.com/akinevz/latest-track" },
+    ]);
+
+    assert.deepEqual(schema, {
+        "@context": "https://schema.org",
+        "@type": "MusicGroup",
+        name: "akinevz",
+        alternateName: [
+            "KINE",
+            "KALE",
+            "I lied my name isn't actually KINE",
+            "I lied my name isn't actually KALE",
+        ],
+        url: "https://akinevz.com",
+        genre: ["Electronic", "Experimental", "Industrial", "Drone", "Glitch"],
+        description:
+            "Independent sound designer, music creator, and electronic music artist.",
+        sameAs: [
+            "https://soundcloud.com/akinevz",
+            "https://youtube.com/@akinevz",
+            "https://x.com/akinevz",
+            "https://github.com/akinevz2",
+        ],
+        track: [
+            {
+                "@type": "MusicRecording",
+                name: "latest-track",
+                url: "https://soundcloud.com/akinevz/latest-track",
+                byArtist: {
+                    "@type": "MusicGroup",
+                    name: "KINE",
+                },
+            },
+        ],
+    });
+});
+
+test("buildMusicGroupSchema falls back to an empty track set", () => {
+    const schema = buildMusicGroupSchema();
+
+    assert.deepEqual(schema.track, []);
+});
+
+test("serializeJsonLd escapes closing angle brackets", () => {
+    assert.equal(serializeJsonLd({ value: "<script>" }), '{"value":"\\u003cscript>"}');
+});

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "types": ["vite/client", "node"],
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitReturns": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true
+  },
+  // "include": ["src", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,304 @@
+/// <reference types="node" />
+
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+import { buildMusicGroupSchema, serializeJsonLd } from "./src/lib/musicSchema";
+
+const pagesJsonPath = new URL("./src/pages.json", import.meta.url);
+
+type PageDefinition = {
+  path: string;
+  title: string;
+  description: string;
+};
+
+type SoundCloudTrack = {
+  title: string;
+  url: string;
+};
+
+type SoundCloudPayload = {
+  tracks?: SoundCloudTrack[];
+};
+
+const pages = JSON.parse(fs.readFileSync(pagesJsonPath, "utf-8")) as PageDefinition[];
+const SITE_ORIGIN = process.env.SITE_ORIGIN || "https://akinevz.com";
+const DEV_HOST = process.env.VITE_DEV_HOST || "127.0.0.1";
+const DEV_PORT = Number(process.env.VITE_DEV_PORT || "8086");
+
+const SECURITY_HEADERS = {
+  "X-Content-Type-Options": "nosniff",
+  "X-Frame-Options": "SAMEORIGIN",
+  "Content-Security-Policy": "frame-ancestors 'self'",
+  "Referrer-Policy": "no-referrer",
+};
+
+function normalizeRoute(routePath: string): string {
+  if (!routePath || routePath === "/") {
+    return "/";
+  }
+
+  return `/${routePath.replace(/^\/+|\/+$/g, "")}`;
+}
+
+function getRouteUrl(routePath: string): string {
+  return new URL(normalizeRoute(routePath), SITE_ORIGIN).toString();
+}
+
+function getSitemapLastMod(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function getSitemapPriority(routePath: string): string {
+  switch (normalizeRoute(routePath)) {
+    case "/":
+      return "1.0";
+    case "/sitemap":
+      return "0.9";
+    case "/music":
+    case "/blog":
+      return "0.8";
+    default:
+      return "0.7";
+  }
+}
+
+function getSitemapChangeFreq(routePath: string): string {
+  switch (normalizeRoute(routePath)) {
+    case "/":
+    case "/music":
+      return "weekly";
+    case "/blog":
+      return "monthly";
+    case "/sitemap":
+      return "monthly";
+    default:
+      return "yearly";
+  }
+}
+
+function getSoundCloudTracks(): SoundCloudTrack[] {
+  const soundcloudJsonPath = path.resolve(process.cwd(), "public/soundcloud.json");
+
+  if (!fs.existsSync(soundcloudJsonPath)) {
+    return [];
+  }
+
+  try {
+    const payload = JSON.parse(fs.readFileSync(soundcloudJsonPath, "utf-8")) as SoundCloudPayload;
+    return Array.isArray(payload.tracks) ? payload.tracks : [];
+  } catch {
+    return [];
+  }
+}
+
+function withStructuredData(indexHtml: string, tracks: SoundCloudTrack[]): string {
+  const structuredData = `<script type="application/ld+json" id="homepage-music-structured-data">${serializeJsonLd(
+    buildMusicGroupSchema(tracks),
+  )}</script>`;
+
+  return indexHtml.replace("</head>", `${structuredData}\n  </head>`);
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function replaceTitleByDataMeta(html: string, title: string): string {
+  const pattern = /<title[^>]*data-route-meta=["']title["'][^>]*>[\s\S]*?<\/title>/i;
+  return html.replace(pattern, `<title data-route-meta="title">${title}</title>`);
+}
+
+function replaceSelfClosingTagByDataMeta(
+  html: string,
+  key: string,
+  replacement: string,
+): string {
+  const escapedKey = key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const pattern = new RegExp(`<[^>]*data-route-meta=["']${escapedKey}["'][^>]*\\/?\\s*>`, "i");
+  return html.replace(pattern, replacement);
+}
+
+function withRouteMeta(indexHtml: string, page: PageDefinition): string {
+  const title = escapeHtml(page.title);
+  const description = escapeHtml(page.description);
+  const url = escapeHtml(getRouteUrl(page.path));
+  const socialImageUrl = escapeHtml(new URL("/avatar.png", SITE_ORIGIN).toString());
+
+  let nextHtml = indexHtml;
+  nextHtml = replaceTitleByDataMeta(nextHtml, title);
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "description",
+    `<meta name="description" content="${description}" data-route-meta="description" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "canonical",
+    `<link rel="canonical" href="${url}" data-route-meta="canonical" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "og:title",
+    `<meta property="og:title" content="${title}" data-route-meta="og:title" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "og:description",
+    `<meta property="og:description" content="${description}" data-route-meta="og:description" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "og:url",
+    `<meta property="og:url" content="${url}" data-route-meta="og:url" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "og:image",
+    `<meta property="og:image" content="${socialImageUrl}" data-route-meta="og:image" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "twitter:card",
+    '<meta name="twitter:card" content="summary" data-route-meta="twitter:card" />',
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "twitter:image",
+    `<meta name="twitter:image" content="${socialImageUrl}" data-route-meta="twitter:image" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "twitter:title",
+    `<meta name="twitter:title" content="${title}" data-route-meta="twitter:title" />`,
+  );
+  nextHtml = replaceSelfClosingTagByDataMeta(
+    nextHtml,
+    "twitter:description",
+    `<meta name="twitter:description" content="${description}" data-route-meta="twitter:description" />`,
+  );
+
+  return nextHtml;
+}
+
+function generateSitemapXml(): string {
+  const urls = pages
+    .map(
+      (page) =>
+        [
+          "  <url>",
+          `    <loc>${escapeHtml(getRouteUrl(page.path))}</loc>`,
+          `    <lastmod>${getSitemapLastMod()}</lastmod>`,
+          `    <changefreq>${getSitemapChangeFreq(page.path)}</changefreq>`,
+          `    <priority>${getSitemapPriority(page.path)}</priority>`,
+          "  </url>",
+        ].join("\n"),
+    )
+    .join("\n");
+
+  return [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
+    urls,
+    "</urlset>",
+  ].join("\n");
+}
+
+function routeSkeletonPlugin() {
+  return {
+    name: "vite-plugin-route-skeletons",
+    apply: "build" as const,
+    closeBundle() {
+      const outDir = path.resolve(process.cwd(), "dist");
+      const indexPath = path.join(outDir, "index.html");
+      if (!fs.existsSync(indexPath)) {
+        return;
+      }
+
+      const indexHtml = fs.readFileSync(indexPath, "utf-8");
+      const soundCloudTracks = getSoundCloudTracks();
+      fs.writeFileSync(path.join(outDir, "sitemap.xml"), generateSitemapXml(), "utf-8");
+
+      for (const page of pages) {
+        const routeHtml =
+          normalizeRoute(page.path || "/") === "/"
+            ? withStructuredData(withRouteMeta(indexHtml, page), soundCloudTracks)
+            : withRouteMeta(indexHtml, page);
+        const normalizedRoutePath = normalizeRoute(page.path || "/");
+
+        if (normalizedRoutePath === "/") {
+          fs.writeFileSync(indexPath, routeHtml, "utf-8");
+          continue;
+        }
+
+        const normalizedRoute = normalizedRoutePath.replace(/^\/+|\/+$/g, "");
+        const routeDir = path.join(outDir, normalizedRoute);
+        fs.mkdirSync(routeDir, { recursive: true });
+        fs.writeFileSync(path.join(routeDir, "index.html"), routeHtml, "utf-8");
+        fs.writeFileSync(path.join(outDir, `${normalizedRoute}.html`), routeHtml, "utf-8");
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  publicDir: "public",
+  plugins: [react(), routeSkeletonPlugin()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) {
+            return;
+          }
+
+          if (id.includes("firebase")) {
+            return "firebase";
+          }
+
+          if (id.includes("react") || id.includes("scheduler")) {
+            return "react-core";
+          }
+
+          if (id.includes("react-markdown") || id.includes("rehype-raw")) {
+            return "markdown";
+          }
+
+          if (id.includes("react-toastify")) {
+            return "toastify";
+          }
+
+          if (id.includes("xp.css")) {
+            return "xpcss";
+          }
+
+          return "vendor";
+        },
+      },
+    },
+  },
+  server: {
+    host: DEV_HOST,
+    port: DEV_PORT,
+    strictPort: true,
+    cors: false,
+    headers: SECURITY_HEADERS,
+    watch: {
+      usePolling: true,
+    },
+  },
+  preview: {
+    host: DEV_HOST,
+    port: DEV_PORT,
+    strictPort: true,
+    headers: SECURITY_HEADERS,
+  },
+});