Merge branch 'DustinBrett:main' into master

.eslintrc.json

@@ -57,6 +57,7 @@
     "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/no-invalid-void-type": "off",
     "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-misused-spread": "off",
     "@typescript-eslint/no-redeclare": "error",
     "@typescript-eslint/no-shadow": [
       "error",
@@ -139,7 +140,10 @@
     "react/hook-use-state": "error",
     "react-hooks/exhaustive-deps": "error",
     "react/display-name": "off",
-    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
+    "react/jsx-filename-extension": [
+      "error",
+      { "allow": "as-needed", "extensions": [".tsx"] }
+    ],
     "react/jsx-props-no-spreading": "off",
     "react/jsx-sort-props": [
       "error",
@@ -224,7 +228,7 @@
   },
   "overrides": [
     {
-      "files": ["__tests__/**/*.spec.tsx"],
+      "files": ["__tests__/**/*.spec.ts"],
       "rules": {
         "playwright/no-standalone-expect": "off"
       }

.stylelintrc.json

@@ -6,6 +6,7 @@
     "alpha-value-notation": "percentage",
     "color-function-notation": "legacy",
     "hue-degree-notation": "number",
+    "no-empty-source": null,
     "order/properties-alphabetical-order": true,
     "value-keyword-case": [
       "lower",

IDEAS.md

@@ -185,7 +185,7 @@
 
 - [WebODF](https://webodf.org/)
 - [docx2html](https://github.com/lalalic/docx2html)
-- [Pandoc](https://github.com/jgm/pandoc)
+- [Pandoc](https://github.com/tweag/pandoc-wasm)
 - [gdal3.js](https://github.com/bugra9/gdal3.js)
 - [Epub.js](https://github.com/futurepress/epub.js/)
 - Barcode / QR
@@ -292,6 +292,7 @@
 - [fireworks.js](https://github.com/crashmax-dev/fireworks-js)
 - [Cursor Effects](https://tholman.com/cursor-effects/)
 - [Bobby Blue-Eyes](https://www.derschmale.com/lab/doodles/blueeyes/build/)
+- [CODEF Demoscene Gallery](https://www.wab.com/)
 
 ## Games
 

components/apps/BoxedWine/useBoxedWine.ts

@@ -1,4 +1,4 @@
-import { basename } from "path";
+import { basename, extname } from "path";
 import { useCallback, useEffect, useRef } from "react";
 import { type Unzipped } from "fflate";
 import { getConfig } from "components/apps/BoxedWine/config";
@@ -106,7 +106,10 @@ const useBoxedWine = ({
       try {
         window.BoxedWineShell(() => {
           setLoading(false);
-          mountEmFs(window.FS as EmscriptenFS, "BoxedWine");
+          mountEmFs(
+            window.FS as EmscriptenFS,
+            url ? `BoxedWine_${basename(url, extname(url))}` : id
+          );
         });
       } catch {
         // Ignore BoxedWine errors
@@ -115,6 +118,7 @@ const useBoxedWine = ({
   }, [
     appendFileToTitle,
     containerRef,
+    id,
     libs,
     mountEmFs,
     readFile,

components/apps/Browser/NavigationIcons.tsx

@@ -28,3 +28,9 @@ export const Stop = memo(() => (
     <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
   </svg>
 ));
+
+export const Network = memo(() => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+    <path d="M512 0q70.5 0 136 18.25t122.5 51.5 103.75 80 80 103.75 51.5 122.5T1024 512t-18.25 136-51.5 122.5-80 103.75-103.75 80-122.5 51.5T512 1024t-136-18.25-122.5-51.5-103.75-80-80-103.75-51.5-122.25T0 512q0-70.5 18.25-136t51.5-122.5 80-103.75 103.75-80 122.25-51.5T512 0zm404.5 320q-19-40.5-46-76.25t-60-65.25T739 126t-80.5-37.5q18 25 32.5 53t25.75 57.75T736 259.5t14 60.5h166.5zM960 512q0-66.5-18.5-128H760q4 32 6 63.75t2 64.25-2 64.25-6 63.75h181.5Q960 578.5 960 512zM512 960q24.5 0 45.75-13.5T597 911t32.25-49.75T654.5 805t18.5-55 11.5-46h-345q4 19.5 11.5 46t18.5 55 25.25 56.25T427 911t39.25 35.5T512 960zm183.5-320q4-32 6.25-63.75T704 512t-2.25-64.25T695.5 384h-367q-4 32-6.25 63.75T320 512t2.25 64.25T328.5 640h367zM64 512q0 66.5 18.5 128H264q-4-32-6-63.75T256 512t2-64.25 6-63.75H82.5Q64 445.5 64 512zM512 64q-24.5 0-45.75 13.5T427 113t-32.25 49.75T369.5 219 351 274t-11.5 46h345q-4-19.5-11.5-46t-18.5-55-25.25-56.25T597 113t-39.25-35.5T512 64zM365.5 88.5Q323.5 103 285 126t-71.5 52.5-60 65.25-46 76.25H274q6-30 14-60.5t19.25-60.25T333 141.5t32.5-53zM107.5 704q19 40.5 46 76.25t60 65.25T285 898t80.5 37.5q-18-25-32.5-53t-25.75-57.75T288 764.5 274 704H107.5zm551 231.5q42-14.5 80.5-37.5t71.5-52.5 60-65.25 46-76.25H750q-6 30-14 60.5t-19.25 60.25T691 882.5t-32.5 53z" />
+  </svg>
+));

components/apps/Browser/StyledBrowser.ts

@@ -43,6 +43,16 @@ const StyledBrowser = styled.div<StyledBrowserProps>`
         width: 20px;
       }
 
+      &.proxy {
+        margin: 0 10px 0 4px;
+        width: 40px;
+
+        svg {
+          height: 15px;
+          width: 15px;
+        }
+      }
+
       &:hover {
         background-color: rgb(103, 103, 103);
       }

components/apps/Browser/config.ts

@@ -7,6 +7,10 @@ type Bookmark = {
   url: string;
 };
 
+export type WaybackUrlInfo = {
+  archived_snapshots: { closest: { url: string } };
+};
+
 export const DINO_GAME = {
   icon: "/System/Icons/Favicons/dino.webp",
   name: "T-Rex Chrome Dino Game",
@@ -41,6 +45,11 @@ export const bookmarks: Bookmark[] = [
     name: "Internet Archive",
     url: "https://archive.org/",
   },
+  {
+    icon: "/System/Icons/webamp.webp",
+    name: "Winamp Skin Museum",
+    url: "https://skins.webamp.org/",
+  },
   {
     icon: "/System/Icons/Favicons/win96.webp",
     name: "Windows 96",
@@ -59,3 +68,13 @@ export const LOCAL_HOST = new Set(["127.0.0.1", "localhost"]);
 
 export const NOT_FOUND =
   '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><html><head><title>404 Not Found</title><style>h1{display:inline;}</style></head><body><h1>Not Found</h1><p>The requested URL was not found on this server.</p></body></html>';
+
+export const OLD_NET_PROXY =
+  "https://theoldnet.com/get?scripts=true&decode=true&year=<year>&url=";
+
+export const OLD_NET_SUPPORTED_YEARS = [
+  1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008,
+  2009, 2010, 2011, 2012,
+];
+
+export const WAYBACK_URL_INFO = "https://archive.org/wayback/available?url=";

components/apps/Browser/index.tsx

@@ -1,19 +1,30 @@
 import { basename, join, resolve } from "path";
 import { useCallback, useEffect, useRef, useState } from "react";
+import useProxyMenu, {
+  type ProxyState,
+} from "components/apps/Browser/useProxyMenu";
 import { ADDRESS_INPUT_PROPS } from "components/apps/FileExplorer/AddressBar";
 import useHistoryMenu from "components/apps/Browser/useHistoryMenu";
 import useBookmarkMenu from "components/apps/Browser/useBookmarkMenu";
 import {
   createDirectoryIndex,
   type DirectoryEntries,
 } from "components/apps/Browser/directoryIndex";
-import { Arrow, Refresh, Stop } from "components/apps/Browser/NavigationIcons";
+import {
+  Arrow,
+  Network,
+  Refresh,
+  Stop,
+} from "components/apps/Browser/NavigationIcons";
 import StyledBrowser from "components/apps/Browser/StyledBrowser";
 import {
   DINO_GAME,
   HOME_PAGE,
   LOCAL_HOST,
   NOT_FOUND,
+  OLD_NET_PROXY,
+  WAYBACK_URL_INFO,
+  type WaybackUrlInfo,
   bookmarks,
 } from "components/apps/Browser/config";
 import { type ComponentProcessProps } from "components/system/Apps/RenderComponent";
@@ -102,6 +113,8 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
     position,
     moveHistory
   );
+  const [proxyState, setProxyState] = useState<ProxyState>("CORS");
+  const proxyMenu = useProxyMenu(proxyState, setProxyState);
   const bookmarkMenu = useBookmarkMenu();
   const setUrl = useCallback(
     async (addressInput: string): Promise<void> => {
@@ -302,7 +315,35 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
             setSrcDoc(newSrcDoc);
             prependFileToTitle(newTitle);
           } else {
-            const addressUrl = processedUrl.href;
+            let addressUrl = processedUrl.href;
+
+            if (proxyState === "WAYBACK_MACHINE") {
+              try {
+                const urlInfoResponse = await fetch(
+                  `${WAYBACK_URL_INFO}${addressUrl}`
+                );
+                const { archived_snapshots } =
+                  (await urlInfoResponse.json()) as WaybackUrlInfo;
+
+                if (archived_snapshots.closest.url) {
+                  addressUrl = archived_snapshots.closest.url;
+
+                  if (
+                    addressUrl.startsWith("http:") &&
+                    window.location.protocol === "https:"
+                  ) {
+                    addressUrl = addressUrl.replace("http:", "https:");
+                  }
+                }
+              } catch {
+                // Ignore failure to fetch url
+              }
+            } else if (proxyState.startsWith("OLD_NET_")) {
+              const year = proxyState.replace("OLD_NET_", "");
+              const proxyUrl = OLD_NET_PROXY.replace("<year>", year);
+
+              addressUrl = `${proxyUrl}${processedUrl.href}`;
+            }
 
             changeIframeWindowLocation(addressUrl, contentWindow);
 
@@ -357,6 +398,7 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
       initialTitle,
       open,
       prependFileToTitle,
+      proxyState,
       readFile,
       readdir,
       setIcon,
@@ -423,6 +465,14 @@ const Browser: FC<ComponentProcessProps> = ({ id }) => {
           }}
           {...ADDRESS_INPUT_PROPS}
         />
+        <Button
+          className="proxy"
+          onClick={proxyMenu.onContextMenuCapture}
+          onContextMenu={haltEvent}
+          {...label("Proxy settings")}
+        >
+          <Network />
+        </Button>
       </nav>
       <nav>
         {bookmarks.map(({ name, icon, url: bookmarkUrl }) => (

components/apps/Browser/useProxyMenu.ts

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { OLD_NET_SUPPORTED_YEARS } from "components/apps/Browser/config";
+import { useMenu } from "contexts/menu";
+import { type ContextMenuCapture } from "contexts/menu/useMenuContextState";
+
+export type ProxyState = `CORS` | `OLD_NET_${number}` | "WAYBACK_MACHINE";
+
+const useProxyMenu = (
+  proxyState: ProxyState,
+  setProxyState: React.Dispatch<React.SetStateAction<ProxyState>>
+): ContextMenuCapture => {
+  const { contextMenu } = useMenu();
+
+  return useMemo(
+    () =>
+      contextMenu?.(() => [
+        {
+          action: () => setProxyState("CORS"),
+          checked: proxyState === "CORS",
+          label: "Local w/CORS",
+        },
+        {
+          action: () => setProxyState("WAYBACK_MACHINE"),
+          checked: proxyState === "WAYBACK_MACHINE",
+          label: "Wayback Machine",
+        },
+        {
+          checked: proxyState.startsWith("OLD_NET_"),
+          label: "The Old Net",
+          menu: OLD_NET_SUPPORTED_YEARS.map((year) => ({
+            action: () => setProxyState(`OLD_NET_${year}`),
+            checked: proxyState === `OLD_NET_${year}`,
+            label: year.toString(),
+          })),
+        },
+      ]),
+    [contextMenu, proxyState, setProxyState]
+  );
+};
+
+export default useProxyMenu;

components/apps/ClassiCube/StyledClassiCube.ts

@@ -3,11 +3,6 @@ import styled from "styled-components";
 const StyledClassiCube = styled.div`
   height: ${({ theme }) => `calc(100% - ${theme.sizes.titleBar.height}px)`};
   width: 100%;
-
-  canvas {
-    height: 100%;
-    width: 100%;
-  }
 `;
 
 export default StyledClassiCube;

components/apps/ClassiCube/index.tsx

@@ -2,16 +2,13 @@ import StyledClassiCube from "components/apps/ClassiCube/StyledClassiCube";
 import useClassiCube from "components/apps/ClassiCube/useClassiCube";
 import AppContainer from "components/system/Apps/AppContainer";
 import { type ComponentProcessProps } from "components/system/Apps/RenderComponent";
-import { haltEvent } from "utils/functions";
 
 const ClassiCube: FC<ComponentProcessProps> = ({ id }) => (
   <AppContainer
     StyledComponent={StyledClassiCube}
     id={id}
     useHook={useClassiCube}
-  >
-    <canvas onContextMenu={haltEvent} />
-  </AppContainer>
+  />
 );
 
 export default ClassiCube;