Merge pull request #8 from mmmmmob/fixes

fix: NowPlaying width overflow

Author: mmmmmob

.eslintrc.cjs

@@ -2,20 +2,21 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
+    "react/jsx-no-target-blank": "off",
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
+    "react/prop-types": "off",
   },
-}
+};

README.md

@@ -41,11 +41,11 @@ Ensure you have the following tools installed:
 
 ### Installation
 
-1. Clone the repository:
+1. Clone or create your own respository from template:
 
    ```sh
-   git clone https://github.com/mmmmmob/me.theppitak.git
-   cd me.theppitak
+   git clone https://github.com/mmmmmob/www.git
+   cd www
    ```
 
 2. Install dependencies using Bun:

bun.lockb

@@ -1,7 +1,7 @@
 {
   "name": "me.theppitak",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,30 +11,32 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.3.1",
-    "@vercel/speed-insights": "^1.0.11",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@vercel/speed-insights": "^1.0.12",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.13",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "daisyui": "^4.12.2",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint": "^9.5.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.38",
-    "prettier": "^3.3.1",
-    "prettier-plugin-tailwindcss": "^0.6.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.4",
     "react-icons": "^5.2.1",
     "tailwindcss": "^3.4.4",
-    "vite": "^5.2.0",
+    "vite": "^5.3.1",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "prettier": {
-    "plugins": ["prettier-plugin-tailwindcss"]
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
   }
 }

package.json

@@ -26,7 +26,7 @@ export const NowPlaying = (props) => {
   useEffect(() => {
     const intervalId = setInterval(() => {
       fetchNowPlaying();
-    }, 30000);
+    }, 45000);
 
     return () => clearInterval(intervalId);
   }, []);
@@ -38,8 +38,8 @@ export const NowPlaying = (props) => {
       )}
       {!loading && !isPlaying && (
         <div className="my-2 flex w-fit self-center truncate">
-          <div className="mx-1 self-center">
-            <BiSolidBarChartAlt2 size={20} />
+          <div className="self-center">
+            <BiSolidBarChartAlt2 size={20} className="mx-1" />
           </div>
           <p className="w-fit self-end text-xs">Currently Offline</p>
         </div>
@@ -52,17 +52,24 @@ export const NowPlaying = (props) => {
             </p>
           </div>
           <div className="flex self-center">
-            <BiSolidBarChartAlt2 size={18} />
+            <BiSolidBarChartAlt2 size={18} className="mx-1" />
             <img
               src={result.albumImageUrl}
               alt={`${result.title} album art`}
               className="mx-1 size-5 self-end rounded-md"
             />
-            <div className="flex self-center truncate text-xs font-bold">
-              <a href={result.songUrl} target="_blank" className="min-md:w-40">
+            <div className="min-md:w-40 flex self-center text-xs font-bold">
+              <a
+                href={result.songUrl}
+                target="_blank"
+                className="mx-1 overflow-x-scroll text-center max-md:max-w-44"
+              >
                 {result.title}
               </a>
-              <p className="ml-1 truncate font-medium"> • {result.artist}</p>
+              <p className="mx-1">•</p>
+              <p className="ml-1 truncate text-center font-medium max-md:max-w-36">
+                {result.artist}
+              </p>
             </div>
           </div>
         </div>