website-xp-phone 1.5.0

package/src/addons.json

@@ -0,0 +1,76 @@
+{
+  "heading": "Welcome to Rueg's UI homepage",
+  "content": [
+    {
+      "heading": "On ElvUI and Malware hidden within game addons",
+      "content": "Do not use ElvUI. [ Read more... ](https://akinevz.com/blog/?post=twelfth-post-discussion-security-wow-addons)",
+      "status": "notice",
+      "link": "https://akinevz.com/blog/?post=twelfth-post-discussion-security-wow-addons"
+    },
+    {
+      "heading": "Rueg WeakAura Rogue (v3.0.2)",
+      "content": "Weak Aura tracker for GCD, energy tickrate, and range",
+      "status": "available",
+      "link": "/addons/energy-swing.txt"
+    },
+    {
+      "heading": "Rueg WeakAura Mage (v3.0.0)",
+      "content": "Weak Aura tracker for GCD, energy tickrate, and range",
+      "status": "available",
+      "link": "/addons/mana-blast.txt"
+    },
+    {
+      "heading": "Rueg WeakAura Priest (v5.0.1)",
+      "content": "Weak Aura tracker for GCD, mana tickrate, and range",
+      "status": "available",
+      "link": "/addons/rueg-wa-priest.txt"
+    },
+    {
+      "heading": "Rueg WeakAura Warrior (v2.3.1)",
+      "content": "Weak Aura tracker for GCD, rage starvation, and range",
+      "status": "available",
+      "link": "/addons/rage-volley.txt"
+    },
+    {
+      "heading": "Rueg WeakAura Druid (v5.0.0)",
+      "content": "Weak Aura tracker for swing, energy recharge, and range",
+      "status": "available",
+      "link": "/addons/rueg-wa-druid.txt"
+    },
+    {
+      "heading": "Rueg WeakAura Shaman (v4.0.0)",
+      "content": "Weak Aura tracker for swing, energy recharge, and range",
+      "status": "available",
+      "link": "/addons/spirit-smash.txt"
+    },
+    {
+      "heading": "Rueg Cell (v1.0)",
+      "content": "Cell preset with right-handed layout + stats in chat.",
+      "status": "available",
+      "link": "/addons/rueg-cell.txt"
+    },
+    {
+      "heading": "Rueg Grid2 (v1.0)",
+      "content": "Grid2 preset with buff indicators.",
+      "status": "available (unmaintained)",
+      "link": "/addons/rueg-grid2.txt"
+    },
+    {
+      "heading": "Rueg Plater Bars (v2.2)",
+      "content": "Profile for Plater with Blizzard-like nameplates. Large-format",
+      "status": "available",
+      "link": "/addons/rueg-plater.txt"
+    },
+    {
+      "heading": "Rueg Plater Small Bars (v2.1)",
+      "content": "Profile for Plater with Blizzard-like nameplates.",
+      "status": "available",
+      "link": "/addons/rueg-plater-smol.txt"
+    },
+    {
+      "heading": "Rueg Plater Compatible Repack (v0.1)",
+      "content": "Addon list for RP coming soon.",
+      "status": "soon (tm)"
+    }
+  ]
+}

package/src/components/Addon.tsx

@@ -0,0 +1,223 @@
+import { CopyToClipboardButton } from "./CopyToClipboardButton.tsx";
+import type { Heading, SectionProps } from "../windowing";
+import { useRef, useState } from "react";
+import { playLayeredAudio } from "../lib/audioOverlap";
+import Markdown, { type Options as ReactMarkdownOptions } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
+
+export type AddonProps = SectionProps & {
+  status?: string | undefined;
+  text?: string | undefined;
+  link?: string | undefined;
+  content?: string | (string | AddonProps)[] | undefined;
+};
+
+export type AddonContent = string | (string | AddonProps)[];
+
+const markdownSanitizeSchema: unknown = {
+  ...defaultSchema,
+  tagNames: [...(defaultSchema.tagNames || []), "iframe"],
+  attributes: {
+    ...defaultSchema.attributes,
+    a: [...(defaultSchema.attributes?.a || []), ["target"], ["rel"]],
+    img: [...(defaultSchema.attributes?.img || []), ["loading"], ["decoding"]],
+    iframe: [
+      ["title"],
+      ["src"],
+      ["width"],
+      ["height"],
+      ["style"],
+      ["scrolling"],
+      ["loading"],
+      ["allow"],
+      ["allowfullscreen"],
+      ["referrerpolicy"],
+      ["frameborder"],
+    ],
+  },
+};
+
+const markdownRehypePlugins = [
+  rehypeRaw,
+  [rehypeSanitize, markdownSanitizeSchema],
+] as ReactMarkdownOptions["rehypePlugins"];
+
+const markdownComponents = {
+  img: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img
+      {...props}
+      style={{ maxWidth: "100%", height: "auto", ...(props.style ?? {}) }}
+    />
+  ),
+};
+
+function renderHeading(heading: Heading, link?: string) {
+  return <RenderLink link={link} text={heading} />;
+}
+
+function renderContent(content: AddonContent, status?: string, text?: string) {
+  if (typeof content === "string")
+    return (
+      <ul>
+        <li key={0}>
+          <Markdown
+            rehypePlugins={markdownRehypePlugins}
+            components={markdownComponents}
+          >
+            {content}
+          </Markdown>
+        </li>
+        {renderAddon(status, text)}
+      </ul>
+    );
+  return (
+    <ul>
+      {content.map((text, index) =>
+        typeof text == "string" ? (
+          <li key={index}>
+            <Markdown
+              rehypePlugins={markdownRehypePlugins}
+              components={markdownComponents}
+            >
+              {text}
+            </Markdown>
+          </li>
+        ) : (
+          <Addon key={index} {...text} />
+        ),
+      )}
+    </ul>
+  );
+}
+
+function renderStatus(status: string) {
+  return (
+    <li className="addon">
+      status: <em>{status}</em>
+    </li>
+  );
+}
+
+function RenderLink(props: { link: string | undefined; text: string }) {
+  const { link, text } = props;
+  if (link) {
+    return (
+      <a href={link} target="_blank">
+        {text}
+      </a>
+    );
+  }
+  return <>{text}</>;
+}
+
+function renderAddon(status?: string, text?: string) {
+  const elements = [];
+  if (status) {
+    elements.push(<span key="status">{renderStatus(status)}</span>);
+  }
+  if (text) {
+    elements.push(
+      <span key="text">
+        <CopyToClipboardButton content={text} />
+      </span>,
+    );
+  }
+  return elements;
+}
+
+const playSound = (clickCount: number) => {
+  const probability = 1 / Math.log(clickCount + Math.E);
+  if (Math.random() < probability) {
+    playLayeredAudio("/crunchy_kick.ogg");
+    window.dispatchEvent(new CustomEvent("crunchy-kick-played"));
+  }
+};
+
+type WindowPanelProps = AddonProps & {
+  asList?: boolean;
+};
+
+const WindowPanel = ({
+  heading,
+  content,
+  link,
+  status,
+  text,
+  className,
+  children,
+}: WindowPanelProps) => {
+  const hasHeading = !!heading;
+  const hasContent = !!content;
+  const [isMaximized, setIsMaximized] = useState(false);
+  const closeClickCountRef = useRef(0);
+
+  const handleMaximize = () => {
+    setIsMaximized(!isMaximized);
+  };
+
+  const handleClose = () => {
+    if (isMaximized) {
+      setIsMaximized(false);
+    } else {
+      closeClickCountRef.current += 1;
+      playSound(closeClickCountRef.current);
+    }
+  };
+
+  const windowContent = (
+    <div className={`window ${className || ""}`}>
+      {hasHeading ? (
+        <div className="title-bar">
+          <div className="title-bar-text">
+            {renderHeading(heading, link)}
+          </div>
+          <div className="title-bar-controls">
+            <button aria-label="Minimize"></button>
+            <button aria-label="Maximize" onClick={handleMaximize}></button>
+            <button aria-label="Close" onClick={handleClose}></button>
+          </div>
+        </div>
+      ) : null}
+      <div className="window-body">
+        {hasContent
+          ? renderContent(content, status, text)
+          : null}
+        {children}
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <div
+        className="addon-wrapper"
+        style={{ visibility: isMaximized ? "hidden" : "visible" }}
+      >
+        {windowContent}
+      </div>
+      {isMaximized && (
+        <div
+          style={{
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            zIndex: 9999,
+            maxWidth: "90vw",
+            maxHeight: "90vh",
+            overflow: "auto",
+          }}
+        >
+          {windowContent}
+        </div>
+      )}
+    </>
+  );
+};
+
+export const AddonList = (props: AddonProps) => (
+  <WindowPanel {...props} asList={true} />
+);
+
+export const Addon = (props: AddonProps) => <WindowPanel {...props} />;

package/src/components/BlogContent.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+
+import { PageContent } from "./Page";
+import { processContent } from "../windowing/utils";
+import {
+  getRuntimeBlogPostsHost,
+  resolveTrustedBlogAssetUrl,
+} from "../utils/blogSecurity";
+import type { PageMetadata, SectionProps } from "../windowing";
+
+type BlogState = {
+  sections?: SectionProps | SectionProps[];
+  metadata: PageMetadata;
+  error?: string;
+};
+
+const LOADING_SECTION: SectionProps = {
+  heading: "Loading...",
+  content: ["![Loading spinner](/spinner.svg)", "Fetching posts from raw.githubusercontent.com"],
+};
+
+function isSectionPayload(
+  value: unknown,
+): value is SectionProps | SectionProps[] {
+  if (!value || typeof value !== "object") return false;
+  if (Array.isArray(value)) return true;
+  return "heading" in value || "content" in value;
+}
+
+const BLOG_POSTS_HOST = getRuntimeBlogPostsHost(
+  Boolean(import.meta.env.DEV),
+  typeof window !== "undefined" ? window.location.origin : undefined,
+);
+
+const BLOG_POSTS_URL = resolveTrustedBlogAssetUrl("posts.json", BLOG_POSTS_HOST);
+
+function buildBlogState(content: SectionProps | SectionProps[]): BlogState {
+  const { processed, metadata } = processContent(content);
+  return {
+    sections: processed,
+    metadata: { sections: metadata },
+  };
+}
+
+export default function BlogContent() {
+  const [blogState, setBlogState] = useState<BlogState>(() =>
+    buildBlogState(LOADING_SECTION),
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        const response = await fetch(BLOG_POSTS_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 (!isSectionPayload(payload)) {
+          throw new Error("Invalid posts schema");
+        }
+
+        if (!cancelled) {
+          setBlogState(buildBlogState(payload));
+        }
+      } catch (error) {
+        if (!cancelled) {
+          const message =
+            error instanceof Error ? error.message : "Unknown error";
+          setBlogState({
+            metadata: { sections: [] },
+            error: `Failed to fetch remote posts (${message}).`,
+          });
+        }
+      }
+    };
+
+    load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <>
+      {blogState.error ? <p className="status-bar">{blogState.error}</p> : null}
+      <PageContent
+        {...(blogState.sections ? { sections: blogState.sections } : {})}
+        pageMetadata={blogState.metadata}
+      />
+    </>
+  );
+}

package/src/components/CopyToClipboardButton.tsx

@@ -0,0 +1,21 @@
+import { toast } from 'react-toastify';
+
+interface CopyToClipboardButtonProps {
+    content: string;
+    onClick?: () => void;
+}
+
+export const CopyToClipboardButton = (props: CopyToClipboardButtonProps) => {
+    const handleClick = async () => {
+        await navigator.clipboard.writeText(props.content).then(() => {
+            toast('Content copied to clipboard!');
+        }).catch((error) => {
+            toast('Failed to copy content: ', error);
+        });
+        if (props.onClick) {
+            props.onClick();
+        }
+    };
+
+    return <button onClick={handleClick}>Copy to Clipboard</button>;
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useMemo } from "react";
+import { generateMenuItems, type MenuItem } from "../utils/menuItems";
+import pages from "../pages.json";
+
+type Link = {
+  label: string;
+  href: string;
+};
+
+type Props = {
+  links?: Link[];
+  additionalLinks?: MenuItem[];
+  onNavigate?: (href: string) => void;
+  onMenuAction?: (href: string) => boolean;
+};
+
+const PAGE_LINKS = (pages as Array<{ path: string; menuLabel?: string }>).map(
+  (page) => ({
+    url: page.path,
+    ...(page.menuLabel ? { label: page.menuLabel } : {}),
+  }),
+);
+
+const isTypingTarget = (target: EventTarget | null) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return (
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT" ||
+    target.isContentEditable
+  );
+};
+
+const isInternalPath = (href: string) => href.startsWith("/");
+
+const SITEMAP_HREF = "/sitemap";
+
+const hasAdminCookie = () =>
+  typeof document !== "undefined" &&
+  document.cookie
+    .split("; ")
+    .some((cookie) => cookie === "admin=akinevz");
+
+const filterHiddenMenuItems = (menuItems: MenuItem[]) => {
+  if (hasAdminCookie()) {
+    return menuItems;
+  }
+
+  return menuItems.filter((item) => item.href !== SITEMAP_HREF);
+};
+
+export default function MenuBar({
+  links,
+  additionalLinks = [],
+  onNavigate,
+  onMenuAction,
+}: Props) {
+  const menuItems = useMemo(() => {
+    if (links) {
+      return filterHiddenMenuItems(
+        links.map((link) => ({ label: link.label, href: link.href })),
+      );
+    }
+
+    return filterHiddenMenuItems(generateMenuItems(PAGE_LINKS, additionalLinks));
+  }, [links, additionalLinks]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isTypingTarget(event.target)) {
+        return;
+      }
+
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        return;
+      }
+
+      if (event.key.length !== 1) {
+        return;
+      }
+
+      const key = event.key.toLowerCase();
+      const item = menuItems.find(
+        (menuItem) => menuItem.label.charAt(0).toLowerCase() === key,
+      );
+
+      if (!item) {
+        return;
+      }
+
+      if (onMenuAction?.(item.href)) {
+        event.preventDefault();
+        return;
+      }
+
+      if (onNavigate && isInternalPath(item.href)) {
+        event.preventDefault();
+        onNavigate(item.href);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [menuItems, onMenuAction, onNavigate]);
+
+  return (
+    <div className="menu-bar">
+      <menu role="menubar">
+        {menuItems.map((item) => (
+          <li key={item.href} role="none">
+            <a
+              href={item.href}
+              role="menuitem"
+              data-key={item.label.charAt(0).toLowerCase()}
+              onClick={(event) => {
+                if (
+                  event.defaultPrevented ||
+                  event.button !== 0 ||
+                  event.metaKey ||
+                  event.ctrlKey ||
+                  event.shiftKey ||
+                  event.altKey
+                ) {
+                  return;
+                }
+
+                if (onMenuAction?.(item.href)) {
+                  event.preventDefault();
+                  return;
+                }
+
+                if (onNavigate && isInternalPath(item.href)) {
+                  event.preventDefault();
+                  onNavigate(item.href);
+                }
+              }}
+            >
+              <span className="menu-underline">{item.label.charAt(0)}</span>
+              {item.label.slice(1)}
+            </a>
+          </li>
+        ))}
+      </menu>
+    </div>
+  );
+}

package/src/components/MenuBarWithContext.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MinimizedSections } from '../windowing';
+
+export const MenuBarWithContext: React.FC = () => {
+  return <MinimizedSections />;
+};

package/src/components/Modal.tsx

@@ -0,0 +1,17 @@
+
+interface ModalProps {
+    message: string;
+}
+
+const Modal = ({ message }: ModalProps) => {
+    return (
+        <div id="myModal" className="modal">
+            <div className="modal-content">
+                <span className="close">&times;</span>
+                <p>{message}</p>
+            </div>
+        </div>
+    );
+};
+
+export default Modal;