make-software · LookerClocker · Jul 31, 2025 · Feb 23, 2026 · Feb 23, 2026 · Nov 5, 2025
diff --git a/csprclick-blazor/Components/App.razor b/csprclick-blazor/Components/App.razor
@@ -12,7 +12,7 @@
 
     <script src="csprclick.js"></script>
     <script defer="defer" src="https://cdn.cspr.click/ui/v1.12.0/csprclick-client-1.12.0.js"></script>
-    <HeadOutlet />
+    <HeadOutlet />   
 </head>
 
 <body>

diff --git a/csprclick-react/.gitignore b/csprclick-react/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+/node_modules
+dist
+/dist
+dist-ssr
+.vite/
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/csprclick-react/.prettierignore b/csprclick-react/.prettierignore
@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+*.yaml
diff --git a/csprclick-react/.prettierrc b/csprclick-react/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true
+}
diff --git a/csprclick-react/README.md b/csprclick-react/README.md
@@ -0,0 +1,7 @@
+# Downloading ClickTopBar from CDN scripts
+
+Its minimal setup to get React working with `ClickTopBar`, Vite, HMR and some ESLint rules.
+
+# Node version
+
+<b>You need to use Node.js 20.19+ or 22.12+.</b>
diff --git a/csprclick-react/eslint.config.js b/csprclick-react/eslint.config.js
@@ -0,0 +1,50 @@
+import { globalIgnores } from 'eslint/config';
+import nxPlugin from '@nrwl/eslint-plugin-nx';
+import tsESLintPlugin from '@typescript-eslint/eslint-plugin';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+
+export default [
+  globalIgnores(['dist']),
+
+  {
+    plugins: {
+      nx: nxPlugin,
+      '@typescript-eslint': tsESLintPlugin,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin
+    }
+  },
+  {
+    files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+    rules: {
+      'nx/enforce-module-boundaries': 'off'
+    }
+  },
+
+  {
+    files: ['*.ts', '*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json'
+      }
+    },
+    rules: {
+      'no-useless-rename': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-inferrable-types': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      'react/jsx-no-useless-fragment': 'off',
+      'react-hooks/exhaustive-deps': 'off'
+    }
+  },
+
+  {
+    files: ['*.js', '*.jsx'],
+    rules: {
+      quotes: ['warn', 'double']
+    }
+  }
+];
diff --git a/csprclick-react/index.html b/csprclick-react/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CSPR.click</title>
+
+    <script src="/app.js"></script>
+    <link href="https://fonts.cdnfonts.com/css/mono-sans" rel="stylesheet">
+    <link rel="stylesheet" href="/prism.css" />
+
+  </head>
+  <body>
+    <div id="app">
+      <div id="csprclick-ui"></div>
+      <div id="content"></div>
+    </div>
+
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>