npm - ps99-api - Versions diffs - 2.3.0 → 2.3.2 - Mend

ps99-api 2.3.0 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/.github/workflows/release-on-main.yml +1 -0
package/README.md +0 -1
package/example-web/react2/package.json +1 -0
package/example-web/react2/public/index.html +16 -14
package/example-web/react2/src/App.tsx +3 -9
package/example-web/react2/src/components/Footer.tsx +28 -48
package/example-web/react2/src/components/GenericFetchComponent.tsx +1 -1
package/example-web/react2/src/components/Header.tsx +54 -14
package/example-web/react2/src/components/HomePage.tsx +14 -2
package/example-web/react2/webpack.config.js +19 -4
package/package.json +1 -1

package/.github/workflows/release-on-main.yml CHANGED Viewed

@@ -10,6 +10,7 @@ permissions:
   issues: write # to be able to comment on released issues
   pull-requests: write # to be able to comment on released pull requests
   id-token: write # to enable use of OIDC for npm provenance
+  pages: write
 concurrency:
   group: "pages"

package/README.md CHANGED Viewed

@@ -3,7 +3,6 @@
 [![npm version](https://badge.fury.io/js/ps99-api.svg)](https://badge.fury.io/js/ps99-api)
 ![Website](https://img.shields.io/website?url=https%3A%2F%2Fjoekiller.github.io%2Fnode-ps99-api)
 Pet Simulator Public API wrapper written in Typescript.
 ## Installation

package/example-web/react2/package.json CHANGED Viewed

@@ -1,5 +1,6 @@
 {
   "name": "example-ps99-api-webapp-2",
+  "homepage": "https://joekiller.github.io/node-ps99-api",
   "version": "1.0.0",
   "description": "A demonstration of using the Pet Simulator 99 node-ps99-api library.",
   "private": true,

package/example-web/react2/public/index.html CHANGED Viewed

@@ -4,26 +4,28 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pet Simulator 99 API</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/icons/icon-192x192.png" />
+    <link rel="manifest" href="/node-ps99-api/manifest.json" />
+    <link rel="icon" href="/node-ps99-api/icons/icon-192x192.png" />
   </head>
   <body>
     <div id="root"></div>
-    <script src="/bundle.js"></script>
+    <script src="/node-ps99-api/bundle.js"></script>
     <script>
       if ("serviceWorker" in navigator) {
         window.addEventListener("load", function () {
-          navigator.serviceWorker.register("/service-worker.js").then(
-            function (registration) {
-              console.log(
-                "ServiceWorker registration successful with scope: ",
-                registration.scope,
-              );
-            },
-            function (error) {
-              console.log("ServiceWorker registration failed: ", error);
-            },
-          );
+          navigator.serviceWorker
+            .register("/node-ps99-api/service-worker.js")
+            .then(
+              function (registration) {
+                console.log(
+                  "ServiceWorker registration successful with scope: ",
+                  registration.scope,
+                );
+              },
+              function (error) {
+                console.log("ServiceWorker registration failed: ", error);
+              },
+            );
         });
       }
     </script>

package/example-web/react2/src/App.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import HomePage from "./components/HomePage";
 import Header from "./components/Header";
 import CollectionsIndex from "./components/CollectionsIndex";
@@ -14,14 +14,8 @@ const App: React.FC = () => {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/collections" element={<CollectionsIndex />} />
-        <Route
-          path="/collections/:collectionName"
-          element={<CollectionConfigIndex />}
-        />
-        <Route
-          path="/collections/:collectionName/:configName"
-          element={<DynamicCollectionConfigData />}
-        />
+        <Route path="/collections/:collectionName" element={<CollectionConfigIndex />} />
+        <Route path="/collections/:collectionName/:configName" element={<DynamicCollectionConfigData />} />
       </Routes>
       <Footer />
     </Router>

package/example-web/react2/src/components/Footer.tsx CHANGED Viewed

@@ -1,58 +1,38 @@
-import React, { useState, useEffect } from "react";
-import { useOnlineStatus } from "../hooks/useOnlineStatus";
+import React from "react";
 const Footer: React.FC = () => {
-  const isOnline = useOnlineStatus();
-  const [lastUpdate, setLastUpdate] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const updateLastUpdate = () => {
-    setLastUpdate(new Date().toLocaleString());
-  };
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      // Simulate a fetch call to update lastUpdate time
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      updateLastUpdate();
-      setLoading(false);
-    };
-    fetchData();
-    window.addEventListener("online", updateLastUpdate);
-    window.addEventListener("offline", updateLastUpdate);
-    return () => {
-      window.removeEventListener("online", updateLastUpdate);
-      window.removeEventListener("offline", updateLastUpdate);
-    };
-  }, []);
   return (
     <footer
-      style={{
-        display: "flex",
-        justifyContent: "space-between",
-        padding: "1em",
-        borderTop: "1px solid #ccc",
-      }}
+      style={{ textAlign: "center", padding: "1em", background: "#f8f9fa" }}
     >
       <div>
-        {loading ? (
-          <span>♻️ Loading...</span>
-        ) : (
-          <span>Last update: {lastUpdate}</span>
-        )}
-      </div>
-      <div>
-        {isOnline ? (
-          <span style={{ color: "green" }}>● Online</span>
-        ) : (
-          <span style={{ color: "red" }}>● Offline</span>
-        )}
+        <a href="https://badge.fury.io/js/ps99-api">
+          <img
+            src="https://badge.fury.io/js/ps99-api.svg"
+            alt="npm version"
+            height="18"
+          />
+        </a>
+        &nbsp;
+        <a href="https://github.com/joekiller/node-ps99-api">
+          <img
+            src="https://img.shields.io/badge/source-github-blue?logo=github"
+            alt="GitHub source"
+            height="18"
+          />
+        </a>
       </div>
+      <p>
+        &copy; {new Date().getFullYear()} Joseph "
+        <a
+          href="https://joekiller.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          joekiller
+        </a>
+        " Lawson. All rights reserved.
+      </p>
     </footer>
   );
 };

package/example-web/react2/src/components/GenericFetchComponent.tsx CHANGED Viewed

@@ -49,5 +49,5 @@ export const GenericFetchComponent = <T,>({
     return <div>Loading...</div>;
   }
-  return <>{render(data)}</>;
+  return <div>{render(data)}</div>;
 };

package/example-web/react2/src/components/Header.tsx CHANGED Viewed

@@ -6,20 +6,60 @@ const Header: React.FC = () => {
   const pathnames = location.pathname.split("/").filter((x) => x);
   return (
-    <nav>
-      <ol>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        {pathnames.map((value, index) => {
-          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
-          return (
-            <li key={to}>
-              <Link to={to}>{decodeURIComponent(value)}</Link>
-            </li>
-          );
-        })}
-      </ol>
+    <nav
+      style={{
+        padding: "1em",
+        background: "#f8f9fa",
+        borderBottom: "1px solid #e7e7e7",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <Link
+          to="/"
+          style={{
+            textDecoration: "none",
+            color: "#007bff",
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <img
+            src="/node-ps99-api/icons/icon-192x192.png"
+            alt="Home"
+            style={{ width: "40px", height: "40px", marginRight: "0.5em" }}
+          />
+        </Link>
+        <ol
+          style={{ display: "flex", listStyle: "none", padding: 0, margin: 0 }}
+        >
+          <li style={{ margin: "0 0.5em" }}>
+            <Link to="/" style={{ textDecoration: "none", color: "#007bff" }}>
+              Home
+            </Link>
+          </li>
+          {pathnames.map((value, index) => {
+            const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+            return (
+              <li key={to} style={{ margin: "0 0.5em" }}>
+                <Link
+                  to={to}
+                  style={{ textDecoration: "none", color: "#007bff" }}
+                >
+                  {decodeURIComponent(value)}
+                </Link>
+              </li>
+            );
+          })}
+        </ol>
+      </div>
+      <h1 style={{ margin: 0 }}>
+        <Link to="/" style={{ textDecoration: "none", color: "#007bff" }}>
+          Pet Simulator 99 API
+        </Link>
+      </h1>
     </nav>
   );
 };

package/example-web/react2/src/components/HomePage.tsx CHANGED Viewed

@@ -3,10 +3,22 @@ import { Link } from "react-router-dom";
 const HomePage: React.FC = () => {
   return (
-    <div>
+    <div style={{ textAlign: "center", padding: "2em" }}>
       <h1>Welcome to Pet Simulator 99 API</h1>
+      <p>Your one-stop solution for accessing all Pet Simulator 99 data.</p>
       <p>Select a collection to get started:</p>
-      <Link to="/collections">View Collections</Link>
+      <Link
+        to="/collections"
+        style={{
+          padding: "0.5em 1em",
+          background: "#007bff",
+          color: "#fff",
+          textDecoration: "none",
+          borderRadius: "4px",
+        }}
+      >
+        View Collections
+      </Link>
     </div>
   );
 };

package/example-web/react2/webpack.config.js CHANGED Viewed

@@ -1,5 +1,6 @@
 const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 module.exports = {
   entry: "./src/index.tsx",
@@ -13,7 +14,7 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["css-loader"],
+        use: ["style-loader", "css-loader"], // Add style-loader here to properly handle CSS
       },
     ],
   },
@@ -26,11 +27,23 @@ module.exports = {
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "dist"),
-    publicPath: "/",
+    publicPath: "/node-ps99-api/",
   },
   plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "public", "index.html"),
+      publicPath: "/node-ps99-api/",
+    }),
     new CopyWebpackPlugin({
-      patterns: [{ from: path.resolve(__dirname, "public") }],
+      patterns: [
+        {
+          from: path.resolve(__dirname, "public"),
+          to: path.resolve(__dirname, "dist"),
+          globOptions: {
+            ignore: ["**/index.html"], // Ignore index.html to avoid conflict
+          },
+        },
+      ],
     }),
   ],
   devServer: {
@@ -39,6 +52,8 @@ module.exports = {
     },
     compress: true,
     port: 9000,
-    historyApiFallback: true,
+    historyApiFallback: {
+      index: "/node-ps99-api/index.html",
+    },
   },
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ps99-api",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Pet Simulator Public API wrapper written in Typescript.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",