Update dependencies, seo tags and icons

Switch to pnpm

Author: simonwep

.eslintrc

@@ -1,3 +1,3 @@
-github: Simonwep
+github: simonwep
 patreon: simonwep
 custom: ["paypal.me/simonreinisch", "buymeacoffee.com/aVc3krbXQ"]

.github/FUNDING.yml

@@ -0,0 +1,46 @@
+name: Main
+
+on: ["push", "pull_request"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install browsers
+        run: npx puppeteer browsers install chrome
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-22.04
+    if: github.ref == 'refs/heads/master'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4

.github/workflows/ci-cd.yml

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Simon Reinisch
+Copyright (c) 2021-Present Simon Reinisch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

.github/workflows/main.yml

@@ -0,0 +1,49 @@
+import js from '@eslint/js';
+import react from 'eslint-plugin-react';
+import ts from 'typescript-eslint';
+import tsParser from '@typescript-eslint/parser';
+import prettier from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  react.configs.flat.recommended,
+  ...ts.configs.recommended,
+  prettier,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.mjs', '**/*.js'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        ...globals.node
+      }
+    },
+    settings: {
+      react: {
+        version: '18'
+      }
+    },
+    rules: {
+      'react/no-unknown-property': 'off',
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
+      'prettier/prettier': [
+        'error',
+        {
+          jsonRecursiveSort: true,
+          printWidth: 120,
+          singleQuote: true,
+          trailingComma: 'none'
+        }
+      ]
+    }
+  }
+];

LICENSE

@@ -5,49 +5,40 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Audio Spectrum Analyzer</title>
 
-    <!-- Chrome, Firefox OS and Opera -->
+    <!-- Theme color -->
     <meta name="theme-color" content="#000000" />
-
-    <!-- Windows Phone -->
     <meta name="msapplication-navbutton-color" content="#000000" />
-
-    <!-- iOS Safari -->
     <meta name="apple-mobile-web-app-status-bar-style" content="#000000" />
 
-    <!-- Favicons -->
-    <link rel="icon" href="favicon.svg" />
-    <link rel="fluid-icon" href="favicon.svg" />
-    <link rel="apple-touch-icon" href="favicon.svg" />
-
     <!-- SEO -->
     <meta name="audience" lang="en" content="all" />
+    <meta name="topic" content="Application, Audio, Visualizer, PWA">
+    <meta name="summary" content="Portfolio from Simon Reinisch">
     <meta name="expires" content="7 days" />
-    <meta name="robots" content="follow" />
     <meta name="revisit-after" content="7 days" />
     <meta name="page-topic" content="Audio Spectrum Analyzer" />
-    <meta name="copyright" content="Simon Reinisch" />
-    <meta name="author" content="Simon Reinisch" />
-    <meta name="description" content="" />
-    <meta name="keywords" content="audio, fft, spectrum, analyzer, pwa, web-app" />
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:image" content="favicon.co" />
+    <meta name="copyright" content="Simon Reinisch">
+    <meta name="owner" content="Simon Reinisch">
+    <meta name="author" content="Simon Reinisch">
+    <meta name="robots" content="index, follow" />
+    <meta name="description" content="Simple audio spectrum analyzer, can analyze audio input from the microphone as well as audio files." />
+    <meta name="keywords" content="audio, spectrum, visualizer, analyzer, pwa, web-app, fft" />
+
+    <!-- Open Graph -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://spectrum.reinisch.io" />
     <meta property="og:site_name" content="Audio Spectrum Analyzer" />
     <meta property="og:title" content="Audio Spectrum Analyzer" />
-    <meta property="og:description" content="A small audio spectrum visualizer." />
+    <meta property="og:description" content="Simple audio spectrum analyzer, can analyze audio input from the microphone as well as audio files." />
+    <meta property="og:description" content="Portfolio of an software architect with a drive for perfection." />
 
-    <!-- Twitter -->
-    <meta property="twitter:url" content="https://spectrum.reinisch.io">
-    <meta property="twitter:title" content="Audio Spectrum Analyzer">
-    <meta property="twitter:description" content="A small audio spectrum visualizer.">
-    <meta property="twitter:image" content="favicon.png">
+    <!-- Icons -->
+    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
     <!-- Analytics -->
-    <script async src="https://ackee.reinisch.io/tracker.js" data-ackee-server="https://ackee.reinisch.io" data-ackee-domain-id="b0c5af46-63e4-46ba-afb0-95b2cea6072b" data-ackee-opts='{"detailed": true}'></script>
-  </head>
-
+    <script defer src="https://numai.reinisch.io/script.js" data-website-id="87a8f46b-ea2c-4630-a42e-05aa89a05de4"></script>  </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.tsx"></script>