📚🐛 add docs and migrate nvmrc in functions to 20

README.md

@@ -1 +1,63 @@
-# unidentified-analytics
+# Unidentified Analytics
+
+The most basic tracking you have ever seen:
+
+- tracks amount of times a namespace was called and displays hits per ip address
+- no cookies, no sessions, no user tracking
+- no account creation, no login, no password
+
+> `[GET]` the endpoint `/touch/?namespace=ANYTHING`, and then see how many times and from how many ips that namespace was `[GET]` called.
+
+Useful for low-stakes analytics in hobby projects, from README.md files to command lines to webapps.
+
+## Example usage:
+
+**Shell script:**
+
+```bash
+# Choose a random namespace for your app
+app_namespace="mental-finger-difference-within"
+
+# Call the endpoint
+curl "https://unidentifiedanalytics.web.app/touch/?namespace=$app_namespace"
+
+# OR call the endpoint silently and in the background
+nohup curl "https://unidentifiedanalytics.web.app/touch/?namespace=$app_namespace" > /dev/null 2>&1
+
+# Stats at: https://unidentifiedanalytics.web.app/#/stats/mental-finger-difference-within
+```
+
+**Markdown:**
+
+```markdown
+// Load the tracking url as an image on any markdown document
+![Privacy friendly user statistics pixel](https://unidentifiedanalytics.web.app/touch/?namespace=anything-you-choose)
+
+// Load the tracking url as an image on any page
+<img style="display: none;" src="https://unidentifiedanalytics.web.app/touch/?namespace=anything-you-choose" />
+
+// Stats at: https://unidentifiedanalytics.web.app/#/stats/anything-you-choose
+```
+
+**Javascript:**
+
+```javascript
+// Choose a random namespace for your app
+const app_namespace="mental-finger-difference-within"
+
+// Call the endpoint
+await fetch( `https://unidentifiedanalytics.web.app/touch/?namespace=${ app_namespace }` )
+
+// Stats at: https://unidentifiedanalytics.web.app/#/stats/mental-finger-difference-within
+```
+
+**React:**
+
+```js
+import { useEffect } from 'react'
+
+useEffect( () => {
+    const namespace = 'make-something-up'
+    fetch( `https://unidentifiedanalytics.web.app/touch/?namespace=${namespace}`, { mode: 'no-cors' } )
+}, [] )
+``

functions/.nvmrc

@@ -1 +1 @@
-16
+20

functions/package.json

@@ -7,8 +7,7 @@
     "serve": "firebase emulators:start --only functions",
     "shell": "firebase functions:shell",
     "start": "npm run shell",
-    "deploy": "firebase deploy --only functions",
-    "logs": "firebase functions:log"
+    "deploy": "firebase deploy --only functions"
   },
   "engines": {
     "node": "20"

src/App.jsx

@@ -1,4 +1,4 @@
-import { HashRouter as Router, Routes, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { Suspense, lazy } from 'react'
 import Theme from './components/atoms/Theme'
 import Homepage from './components/pages/Homepage'

src/components/molecules/Loading.jsx

@@ -57,11 +57,11 @@ export default ( { delay=200, message, children, ...props } ) => {
         set_should_render( Date.now() - mount_time > delay )
     }, should_render ? null : 100 )
 
-    return <Container $align='center' $justify="center" { ...props }>
+    return <Container align='center' justify="center" { ...props }>
 
         { should_render && <>
             <Spinner />
-            { message && <Text id='loading_text' $align="center">{ message }</Text> }
+            { message && <Text id='loading_text' align="center">{ message }</Text> }
             { children }
         </> }
 

src/components/pages/Homepage.jsx

@@ -4,7 +4,7 @@ import { A, H1, H2, H3, Text } from "../atoms/Text"
 
 import { generate } from 'random-words'
 import Code from "../molecules/Code"
-import { js_example, md_example, shell_example, unan_namespace, unan_website_example } from "../../modules/code_examples"
+import { js_example, md_example, react_example, shell_example, unan_namespace } from "../../modules/code_examples"
 import { useEffect } from "react"
 import Recents from "../molecules/Recents"
 import { useNavigate } from "react-router-dom"
@@ -68,9 +68,9 @@ export default function Homepage() {
 
             <H3>React.js tracking used on this page:</H3>
             <Code language="javascript">
-                { unan_website_example }
+                { react_example( unan_namespace ) }
             </Code>
-            <Text justify='flex-start' direction="row">View stats at <A href={ `https://unidentifiedanalytics.web.app/#/stats/${ unan_namespace }` }>https://unidentifiedanalytics.web.app/#/stats/{ unan_namespace }</A></Text>
+            <Text justify='flex-start' direction="row">View stats at <A href={ `https://unidentifiedanalytics.web.app/stats/${ unan_namespace }` }>https://unidentifiedanalytics.web.app/stats/{ unan_namespace }</A></Text>
 
         </Section>
 

src/hooks/namespace.js

@@ -35,7 +35,7 @@ export const useHistoricalStatsOfNamespace = ( namespace ) => {
     const [ stats, set_stats ] = useState(  )
 
     useEffect( () => listen_to_document( `historical_stats`, namespace, cached_historical_data => {
-        cached_historical_data.history.sort( sort_by_updated_asc )
+        cached_historical_data?.history.sort( sort_by_updated_asc )
         if( !stats ) {
             log( `Setting ${ namespace } historical stat cache: `, cached_historical_data )
             set_cached_stats( cached_historical_data )

src/modules/code_examples.js

@@ -8,7 +8,7 @@ curl "https://unidentifiedanalytics.web.app/touch/?namespace=$app_namespace"
 # OR call the endpoint silently and in the background
 nohup curl "https://unidentifiedanalytics.web.app/touch/?namespace=$app_namespace" > /dev/null 2>&1
 
-# Stats at: https://unidentifiedanalytics.web.app/#/stats/${ namespace }
+# Stats at: https://unidentifiedanalytics.web.app/stats/${ namespace }
 `.trim()
 
 export const js_example = namespace => `
@@ -18,7 +18,7 @@ const app_namespace="${ namespace }"
 // Call the endpoint
 await fetch( \`https://unidentifiedanalytics.web.app/touch/?namespace=$\{ app_namespace }\` )
 
-// Stats at: https://unidentifiedanalytics.web.app/#/stats/${ namespace }
+// Stats at: https://unidentifiedanalytics.web.app/stats/${ namespace }
 `.trim()
 
 export const md_example = namespace => `
@@ -28,14 +28,16 @@ export const md_example = namespace => `
 // Load the tracking url as an image on any page
 <img style="display: none;" src="https://unidentifiedanalytics.web.app/touch/?namespace=${ namespace }" />
 
-// Stats at: https://unidentifiedanalytics.web.app/#/stats/${ namespace }
+// Stats at: https://unidentifiedanalytics.web.app/stats/${ namespace }
 `.trim()
 
-export const unan_namespace = `unidentified-analytics-website-data`
-export const unan_website_example = `
-import { useEffect } from 'react
+export const react_example = namespace => `
+import { useEffect } from 'react'
 
 useEffect( () => {
-    fetch( \`https://unidentifiedanalytics.web.app/touch/?namespace=${ unan_namespace }\`, { mode: 'no-cors' } )
+    const namespace = "${ namespace }"
+    fetch( \`https://unidentifiedanalytics.web.app/touch/?namespace=${ namespace }\`, { mode: 'no-cors' } )
 }, [] )
-`.trim()
+`.trim()
+
+export const unan_namespace = 'unidentified-analytics'