Consolidate Skin Museum client inside the skin-database package along with the server

packages/skin-database/app/App.tsx

@@ -10,7 +10,7 @@
 // We should be able to remove this once we root cause the bundling issue.
 import "setimmediate";
 
-import LegacyApp from "../../skin-museum-client/src/App";
+import LegacyApp from "../legacy-client/src/App";
 import SearchLogo from "./SearchLogo";
 
 export default function App() {

packages/skin-database/app/SearchLogo.tsx

@@ -1,7 +1,7 @@
 "use client";
-import { useWindowSize } from "../../skin-museum-client/src/hooks";
-import AlgoliaLogo from "../../skin-museum-client/src/searchByAlgoliaDarkbBackground.svg";
-import algoliaLogoSmallUrl from "../../skin-museum-client/src/searchByAlgoliaSmall.png";
+import { useWindowSize } from "../legacy-client/src/hooks";
+import AlgoliaLogo from "../legacy-client/src/searchByAlgoliaDarkbBackground.svg";
+import algoliaLogoSmallUrl from "../legacy-client/src/searchByAlgoliaSmall.png";
 
 export default function SearchLogo() {
   const { windowWidth } = useWindowSize();

packages/skin-database/app/redux.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Provider } from "react-redux";
-import { createStore } from "../../skin-museum-client/src/redux/store";
+import { createStore } from "../legacy-client/src/redux/store";
 import { useEffect, useState } from "react";
 
 type Props = {

packages/skin-database/app/skin/[hash]/[fileName]/page.tsx

@@ -1,6 +1,6 @@
 import App from "../../../App";
 import type { Metadata } from "next";
-import { generateSkinPageMetadata } from "../skinMetadata.js";
+import { generateSkinPageMetadata } from "../skinMetadata";
 
 export async function generateMetadata({ params }): Promise<Metadata> {
   const { hash, fileName: _fileName } = await params;

packages/skin-database/app/skin/[hash]/page.tsx

@@ -1,6 +1,6 @@
 import App from "../../App";
 import type { Metadata } from "next";
-import { generateSkinPageMetadata } from "./skinMetadata.js";
+import { generateSkinPageMetadata } from "./skinMetadata";
 
 export async function generateMetadata({ params }): Promise<Metadata> {
   const { hash } = await params;

packages/skin-database/app/skin/[hash]/skinMetadata.ts

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
-import SkinModel from "../../../data/SkinModel.js";
-import UserContext from "../../../data/UserContext.js";
+import SkinModel from "../../../data/SkinModel";
+import UserContext from "../../../data/UserContext";
 
 export async function generateSkinPageMetadata(
   hash: string

packages/skin-database/package.json

@@ -32,7 +32,13 @@
     "puppeteer": "^13.3.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-dropzone": "^11.1.0",
+    "react-helmet": "^6.1.0",
+    "react-window": "^1.8.1",
+    "redux-observable": "^1.0.0",
+    "rxjs": "^6.3.3",
     "sharp": "^0.31.3",
+    "spark-md5": "^3.0.1",
     "sqlite3": "^5.1.2",
     "temp": "^0.9.0",
     "ts-node": "^10.5.0",

packages/skin-museum-client/.gitignore

@@ -1,26 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-public/screenshots
-metadata/
-public/skinData/
-build

packages/skin-museum-client/.netlify/state.json

@@ -1,3 +0,0 @@
-{
-	"siteId": "be420a16-4ef3-43b1-ac62-35869bdf8679"
-}

packages/skin-museum-client/README.md

@@ -1,33 +0,0 @@
-# Winamp Skin Museum Client
-
-This package is the client for the Winamp Skin Museum. It is a React/Redux/RXJS application that uses the GraphQL API provided by the `skin-database` package in this same repository.
-
-## Development
-
-```bash
-cd packages/skin-museum-client
-yarn
-# Run this at least once to ensure the local version of Webamp has been built.
-yarn build-webamp
-yarn start
-```
-
-By default the client will connect to the production API. This works great for client-only changes. If you need to make changes which span both the client and the server, you will need to make some changes.
-
-Start the server locally:
-
-```bash
-cd pacakges/skin-database
-yarn
-yarn start
-```
-
-This should start the server on port 3001.
-
-Now update the `API_URL` constant in `src/constants.js` to `"http://localhost:3001"`. This will tell the client to connect to the local server instead of the production API.
-
-Finally, in a separate terminal, start the client as outlined at the top of this section.
-
-## Deployment
-
-The Skin Museum client is deployed using Netlify. See the `netlify.toml` file in this same directory for details about how that works. The Netlify site is configured to use this subdirectory as it's base directory.

packages/skin-museum-client/graphql.config.json

@@ -1,3 +0,0 @@
-{
-    "schema": "https://localhost:3001"
-  }

packages/skin-museum-client/netlify.toml

@@ -1,40 +0,0 @@
-[Settings]
-# Added automatically by the Netlify CLI. It has no effect during normal 
-# Git-backed deploys.
-ID = "be420a16-4ef3-43b1-ac62-35869bdf8679"
-
-# Settings in the [build] context are global and are applied to all contexts 
-# unless otherwise overridden by more specific contexts.  
-[build]
-# Directory (relative to root of your repo) that contains the deploy-ready 
-# HTML files and assets generated by the build.
-publish = "build/"
-
-# Default build command.
-command = "yarn build"
-ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../webamp/"
-[build.environment]
-NODE_VERSION = "20"
-NETLIFY_USE_YARN = "true"
-
-
-[[redirects]]
-from = "/sitemap*"
-to = "https://api.webampskins.org/sitemap:splat"
-status = 200
-
-[[redirects]]
-from = "/"
-query = { query = ":query" }
-to = "https://winamp-skin-museum.jordan1320.workers.dev//"
-status = 200
-
-[[redirects]]
-from = "/skin/*"
-to = "https://winamp-skin-museum.jordan1320.workers.dev//skin/:splat"
-status = 200
-
-[[redirects]]
-from = "/*"
-to = "/index.html"
-status = 200

packages/skin-museum-client/package.json

@@ -1,79 +0,0 @@
-{
-  "name": "winamp-skin-museum",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@sentry/react": "^8.54.0",
-    "algoliasearch": "^3.30.0",
-    "async": "^2.6.0",
-    "classnames": "^2.2.6",
-    "dominant-color": "^0.0.1",
-    "glob": "^7.1.3",
-    "image-average-color": "^1.0.0",
-    "jszip": "^3.1.5",
-    "lodash": "^4.17.11",
-    "md5-file": "^4.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-dropzone": "^11.1.0",
-    "react-helmet": "^6.1.0",
-    "react-redux": "^7.2.1",
-    "react-scripts": "^5.0.1",
-    "react-window": "^1.8.1",
-    "redux": "^4.0.1",
-    "redux-observable": "^1.0.0",
-    "reselect": "^4.0.0",
-    "rxjs": "^6.3.3",
-    "spark-md5": "^3.0.1",
-    "webamp": "^1.5.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build-webamp": "cd ../webamp && yarn prepublishOnly",
-    "build": "yarn build-webamp && react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "find-skins": "node ./scripts/findSkins.js",
-    "index": "node ./scripts/createSearchIndex.js",
-    "extract": "node ./scripts/extractSkinText.js \"/Volumes/Mobile Backup/skins/md5Skins/\"",
-    "deploy": "netlify deploy",
-    "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build"
-  },
-  "prettier": {},
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "eslintConfig": {
-    "extends": "react-app",
-    "overrides": [
-      {
-        "files": [
-          "*.js"
-        ],
-        "processor": "@graphql-eslint/graphql"
-      },
-      {
-        "files": [
-          "*.graphql"
-        ],
-        "parser": "@graphql-eslint/eslint-plugin",
-        "plugins": [
-          "@graphql-eslint"
-        ],
-        "rules": {
-          "@graphql-eslint/known-type-names": "error"
-        }
-      }
-    ]
-  },
-  "devDependencies": {
-    "@graphql-eslint/eslint-plugin": "^3.8.0",
-    "bluebird": "^3.5.3",
-    "netlify-cli": "^2.40.0",
-    "react-styleguidist": "^11.0.5"
-  }
-}

packages/skin-museum-client/public/index.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <meta
-      name="description"
-      content="Infinite scroll through 80k Winamp skins with interactive preview"
-    />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="canonical" href="https://skins.webamp.org" />
-    <meta property="og:url" content="https://skins.webamp.org" />
-    <meta property="og:title" content="Winamp Skin Museum" />
-    <meta
-      property="og:description"
-      content="Infinite scroll through 80k Winamp skins with interactive preview"
-    />
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:image"
-      content="https://skin-museum-og-captbaritone-webamp.vercel.app/api/og"
-    />
-    <meta property="og:image:width" content="1844" />
-    <meta property="og:image:height" content="1297" />
-    <meta property="og:image:type" key="og:image:type" content="image/png" />
-    <meta property="og:site-name" content="Winamp Skin Museum" />
-    <meta
-      property="og:image:alt"
-      key="og:image:alt"
-      content="Screenshot of many Winamp skins in a grid."
-    />
-
-    <!-- start twitter -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@winampskins" />
-    <meta name="twitter:creator" content="@captbaritone" />
-    <meta name="twitter:title" content="Winamp Skin Museum" />
-    <meta
-      name="twitter:description"
-      content="Infinite scroll through 65k Winamp skins with interactive preview"
-    />
-    <meta
-      name="twitter:image"
-      content="https://skin-museum-og-captbaritone-webamp.vercel.app/api/og"
-    />
-    <meta
-      property="twitter:image:alt"
-      content="Screenshot of many Winamp skins in a grid."
-    />
-    <!-- end twitter -->
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Winamp Skin Museum</title>
-  </head>
-  <body>
-    <noscript> You need to enable JavaScript to run this app. </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-    <script>
-      (function (i, s, o, g, r, a, m) {
-        i["GoogleAnalyticsObject"] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        "script",
-        "//www.google-analytics.com/analytics.js",
-        "ga"
-      );
-
-      ga("create", "UA-96948-20", "auto");
-      ga("set", "anonymizeIp", true);
-      ga("send", "pageview");
-    </script>
-  </body>
-</html>

packages/skin-museum-client/public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

packages/skin-museum-client/styleguide.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  components: "src/components/**/*.js",
-  styleguideDir: "build/styleguide/",
-};