├── .npmrc
├── example_tracking
    ├── functions
    │   ├── utils
    │   │   ├── salt.js
    │   │   └── languagecodes.js
    │   └── counter.js
    ├── netlify.toml
    ├── plugins
    │   └── netlify-plugin-handle-mysalt
    │   │   ├── manifest.yml
    │   │   └── index.js
    ├── package.json
    ├── public
    │   └── index.html
    └── .github
    │   └── workflows
    │       └── main.yml
├── src
    ├── app.css
    ├── lib
    │   ├── images
    │   │   └── logo.png
    │   ├── index.ts
    │   ├── components
    │   │   ├── BoxTopRow.svelte
    │   │   ├── ListItemLink.svelte
    │   │   └── ListItemBarChart.svelte
    │   ├── types.ts
    │   └── helper.ts
    ├── routes
    │   ├── +layout.svelte
    │   ├── logout
    │   │   └── +page.server.ts
    │   ├── +page.svelte
    │   └── stats
    │   │   ├── +page.ts
    │   │   └── +page.svelte
    ├── app.d.ts
    ├── app.html
    └── stores
    │   └── dataStore.ts
├── static
    ├── favicon.png
    └── _redirects
├── .gitattributes
├── .prettierignore
├── postcss.config.js
├── vite.config.ts
├── netlify.toml
├── tailwind.config.ts
├── functions
    ├── fauna
    │   └── client.ts
    ├── getHitsOverall.ts
    ├── getHitsByDate.ts
    ├── getHitsByYear.ts
    ├── getHitsByDateUnique.ts
    ├── getHitsByYearByMonth.ts
    ├── getHitsByOSOverall.ts
    ├── getHitsByUrlOverall.ts
    ├── getHitsByLanguageOverall.ts
    ├── getHitsByBrowserOverall.ts
    ├── getHitsByOSByYear.ts
    ├── getHitsByUrlByYear.ts
    ├── getHitsByLanguageByYear.ts
    ├── getHitsByBrowserByYear.mts
    └── login.ts
├── .prettierrc
├── .gitignore
├── tsconfig.json
├── svelte.config.js
├── eslint.config.js
├── package.json
├── LICENSE
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/example_tracking/functions/utils/salt.js:
--------------------------------------------------------------------------------
1 | module.exports.salt = ''


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pa-nic/vidu/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 | 


--------------------------------------------------------------------------------
/src/lib/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pa-nic/vidu/HEAD/src/lib/images/logo.png


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | 	plugins: {
3 | 		tailwindcss: {},
4 | 		autoprefixer: {}
5 | 	}
6 | };
7 | 


--------------------------------------------------------------------------------
/static/_redirects:
--------------------------------------------------------------------------------
1 | / /stats/ 302! Role=stats
2 | 
3 | /stats/* /.netlify/functions/sveltekit-render 200! Role=stats
4 | 
5 | /stats/* / 302! 


--------------------------------------------------------------------------------
/example_tracking/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   publish = "public"
3 |   functions = "./functions"
4 | 
5 | [[plugins]]
6 |   package = "/plugins/netlify-plugin-handle-mysalt"


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vite';
3 | 
4 | export default defineConfig({
5 | 	plugins: [sveltekit()]
6 | });
7 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = "npm run build"
3 |   functions = "functions"
4 |   publish = "public"
5 | 
6 | [template.environment]
7 |   FAUNA_SECRET = "change me for your secret fauna key"


--------------------------------------------------------------------------------
/example_tracking/plugins/netlify-plugin-handle-mysalt/manifest.yml:
--------------------------------------------------------------------------------
1 | name: netlify-plugin-handle-mysalt
2 | inputs:
3 |   - name: filename
4 |     description: Filename of salt js file
5 |     default: "salt"


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import "../app.css";
3 | </script>
4 | 
5 | <div>
6 | 	<div class="container flex flex-col items-center min-h-screen max-w-screen-sm mx-auto px-4">
7 |         <slot />
8 | 	</div>
9 | </div>


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss';
 2 | 
 3 | export default {
 4 | 	content: ['./src/**/*.{html,js,svelte,ts}'],
 5 | 
 6 | 	theme: {
 7 | 		extend: {}
 8 | 	},
 9 | 
10 | 	plugins: []
11 | } satisfies Config;
12 | 


--------------------------------------------------------------------------------
/functions/fauna/client.ts:
--------------------------------------------------------------------------------
 1 | import { Client, fql } from "fauna";
 2 | 
 3 | const client = new Client({
 4 |     secret: process.env.FAUNA_SECRET,
 5 |     // keepAlive: false
 6 | });
 7 | 
 8 | export default {
 9 |     client,
10 |     fql
11 | }


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"useTabs": true,
 3 | 	"singleQuote": true,
 4 | 	"trailingComma": "none",
 5 | 	"printWidth": 100,
 6 | 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 7 | 	"overrides": [
 8 | 		{
 9 | 			"files": "*.svelte",
10 | 			"options": {
11 | 				"parser": "svelte"
12 | 			}
13 | 		}
14 | 	]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | declare global {
 4 | 	namespace App {
 5 | 		// interface Error {}
 6 | 		// interface Locals {}
 7 | 		// interface PageData {}
 8 | 		// interface PageState {}
 9 | 		// interface Platform {}
10 | 	}
11 | }
12 | 
13 | export {};
14 | 


--------------------------------------------------------------------------------
/example_tracking/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"author": {
 3 | 		"name": "Patrick Probst",
 4 | 		"url": "https://8028.de"
 5 | 	},
 6 | 	"repository": {
 7 | 		"type": "git",
 8 | 		"url": "git://github.com/pa-nic/vidu"
 9 | 	},
10 | 	"dependencies": {
11 | 		"bowser": "^2.11.0",
12 | 		"fauna": "^2.3.0",
13 | 		"fs": "0.0.1-security"
14 | 	}
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # Output
 4 | .output
 5 | .vercel
 6 | /.svelte-kit
 7 | /build
 8 | 
 9 | # OS
10 | .DS_Store
11 | Thumbs.db
12 | 
13 | # Env
14 | .env
15 | .env.*
16 | !.env.example
17 | !.env.test
18 | 
19 | # Vite
20 | vite.config.js.timestamp-*
21 | vite.config.ts.timestamp-*
22 | 
23 | # Local Netlify folder
24 | .netlify
25 | 


--------------------------------------------------------------------------------
/src/routes/logout/+page.server.ts:
--------------------------------------------------------------------------------
 1 | import { redirect } from '@sveltejs/kit'
 2 | 
 3 | export const actions = {
 4 |     default({ cookies }) {
 5 |         // eat the cookie
 6 |         cookies.set('nf_jwt', '', {
 7 |             path: '/',
 8 |             expires: new Date(0),
 9 |         })
10 | 
11 |         // redirect the user
12 |         redirect(302, '/')
13 |     },
14 | }


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body data-sveltekit-preload-data="hover">
10 | 		<div style="display: contents">%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/src/lib/components/BoxTopRow.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { formatNumber } from "$lib/helper"
 3 | 	export let heading: string;
 4 | 	export let data: number;
 5 | 	let classes = $$props.class;
 6 | </script>
 7 | 
 8 | <div class={classes}>
 9 |     <h2 class="text-sm mb-1">{heading}</h2>
10 |     <p>
11 |         <span class="text-2xl">{formatNumber(data)}</span>
12 |         <span class="text-xs"> hits</span>
13 |     </p>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/example_tracking/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Example page to track</title>
 6 |   </head>
 7 |   <body>
 8 |     <h1>Example</h1>
 9 |     <p>Look into the code to see the tracker snippet implementation</p>
10 |     <img src="/.netlify/functions/counter"
11 |       alt=""
12 |       width="0"
13 |       height="0"
14 |       hidden
15 |       decoding="async"
16 |       loading="eager" />
17 |   </body>
18 | </html>


--------------------------------------------------------------------------------
/functions/getHitsOverall.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsOverall` invoked");
 4 | 
 5 | export async function handler() {
 6 | 
 7 |     // Get overall hits
 8 |     const query = fauna.fql`hits.all().count()`;
 9 |     try {
10 |         const response = await fauna.client.query(query);
11 |         return {
12 |             statusCode: 200,
13 |             body: JSON.stringify(response)
14 |         };
15 |     } catch (error) {
16 |         console.error(error);
17 |         return {
18 |             statusCode: 400,
19 |             body: JSON.stringify(error)
20 |         };
21 |     }
22 | }


--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
 1 | export interface tHitsByDay {
 2 |     day: string,
 3 |     hits: number
 4 | }
 5 | 
 6 | export interface tHitsByMonth {
 7 |     month: string,
 8 |     hits: number
 9 | }
10 | 
11 | export interface tHitsByYear {
12 |     year: number,
13 |     hits: number
14 | }
15 | 
16 | export interface tHitsByUrl {
17 |     url: string,
18 |     hits: number
19 | }
20 | 
21 | export interface tHitsByBrowser {
22 |     browser: string,
23 |     hits: number
24 | }
25 | 
26 | export interface tHitsByLanguage {
27 |     language: string,
28 |     hits: number
29 | }
30 | 
31 | export interface tHitsByOS {
32 |     os: string,
33 |     hits: number
34 | }


--------------------------------------------------------------------------------
/functions/getHitsByDate.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByDate` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by date
 8 |     const query = fauna.fql`hits.byDate(Date.fromString(${event.queryStringParameters.date})).count()`;
 9 |     try {
10 |         const response = await fauna.client.query(query);
11 |         return {
12 |             statusCode: 200,
13 |             body: JSON.stringify(response)
14 |         };
15 |     } catch (error) {
16 |         console.error(error);
17 |         return {
18 |             statusCode: 400,
19 |             body: JSON.stringify(error)
20 |         };
21 |     }
22 | }


--------------------------------------------------------------------------------
/src/lib/components/ListItemLink.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { formatNumber } from "$lib/helper"
 3 |   
 4 |     export let url: string;
 5 |     export let value: number;
 6 |   
 7 |     const oUrl = new URL(url);
 8 |     const { pathname } = oUrl;
 9 |   
10 | </script>
11 |   
12 |   <div class="flex pb-2 text-sm progress">
13 |     <div class="h-6 flex-1 relative overflow-x-auto">
14 |         <a 
15 |             class="block text-emerald-500 hover:text-white"
16 |             href="{url}" 
17 |             target="blank">
18 |             {pathname}
19 |         </a>
20 |     </div>
21 |     <div class="w-12 text-right">
22 |         {formatNumber(value)}
23 |     </div>
24 | </div>


--------------------------------------------------------------------------------
/functions/getHitsByYear.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByYear` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by year
 8 |     const year = Number(event.queryStringParameters.year);
 9 |     const query = fauna.fql`hits.byYear(${year}).count()`;
10 |     try {
11 |         const response = await fauna.client.query(query);
12 |         return {
13 |             statusCode: 200,
14 |             body: JSON.stringify(response)
15 |         };
16 |     } catch (error) {
17 |         console.error(error);
18 |         return {
19 |             statusCode: 400,
20 |             body: JSON.stringify(error)
21 |         };
22 |     }
23 | }


--------------------------------------------------------------------------------
/functions/getHitsByDateUnique.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByDateUnique` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by date
 8 |     const query = fauna.fql`(hits.byDate(Date.fromString(${event.queryStringParameters.date})) {usr_hash}).distinct().count()`;
 9 |     try {
10 |         const response = await fauna.client.query(query);
11 |         return {
12 |             statusCode: 200,
13 |             body: JSON.stringify(response)
14 |         };
15 |     } catch (error) {
16 |         console.error(error);
17 |         return {
18 |             statusCode: 400,
19 |             body: JSON.stringify(error)
20 |         };
21 |     }
22 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true,
12 | 		"moduleResolution": "bundler"
13 | 	}
14 | 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
15 | 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
16 | 	//
17 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
18 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
19 | }
20 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://svelte.dev/docs/kit/integrations
 7 | 	// for more information about preprocessors
 8 | 	preprocess: vitePreprocess(),
 9 | 
10 | 	kit: {
11 | 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 | 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 | 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 | 		adapter: adapter()
15 | 	}
16 | };
17 | 
18 | export default config;
19 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import prettier from 'eslint-config-prettier';
 2 | import js from '@eslint/js';
 3 | import svelte from 'eslint-plugin-svelte';
 4 | import globals from 'globals';
 5 | import ts from 'typescript-eslint';
 6 | 
 7 | export default ts.config(
 8 | 	js.configs.recommended,
 9 | 	...ts.configs.recommended,
10 | 	...svelte.configs['flat/recommended'],
11 | 	prettier,
12 | 	...svelte.configs['flat/prettier'],
13 | 	{
14 | 		languageOptions: {
15 | 			globals: {
16 | 				...globals.browser,
17 | 				...globals.node
18 | 			}
19 | 		}
20 | 	},
21 | 	{
22 | 		files: ['**/*.svelte'],
23 | 
24 | 		languageOptions: {
25 | 			parserOptions: {
26 | 				parser: ts.parser
27 | 			}
28 | 		}
29 | 	},
30 | 	{
31 | 		ignores: ['build/', '.svelte-kit/', 'dist/']
32 | 	}
33 | );
34 | 


--------------------------------------------------------------------------------
/functions/getHitsByYearByMonth.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByYearByMonth` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by year and month
 8 |     const year = Number(event.queryStringParameters.year);
 9 |     const month = Number(event.queryStringParameters.month);
10 |     const query = fauna.fql`hits.byYearByMonth(${year},${month}).count()`;
11 |     try {
12 |         const response = await fauna.client.query(query);
13 |         return {
14 |             statusCode: 200,
15 |             body: JSON.stringify(response)
16 |         };
17 |     } catch (error) {
18 |         console.error(error);
19 |         return {
20 |             statusCode: 400,
21 |             body: JSON.stringify(error)
22 |         };
23 |     }
24 | }


--------------------------------------------------------------------------------
/src/lib/components/ListItemBarChart.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { getMaxOfArray, formatNumber } from "$lib/helper";
 3 |     
 4 |     export let description: any;
 5 |     export let values: any;
 6 |     export let value: number;
 7 |   
 8 |     // Calculate bar width in % based on max value (100%) for item value
 9 |     let bar = 0;
10 |     $: if(values && values.length > 0) {
11 |         const max = getMaxOfArray(values.map((obj: { hits: number; }) => obj.hits));
12 |         bar = max > 0 ? Math.min(Math.round(100 / max * value), 100) : 0;
13 |     }
14 | </script>
15 |   
16 | <div class="flex pb-2 text-sm leading-6">
17 |     <div class="h-6 flex-1 relative">
18 |         <div class="rounded bg-gray-500 h-full" style={`width: ${bar}%`}></div>
19 |         <div class="absolute top-0 left-1 overflow-hidden">{description}</div>
20 |     </div>
21 |     <div class="w-12 text-right">
22 |         {formatNumber(value)}
23 |     </div>
24 | </div>


--------------------------------------------------------------------------------
/example_tracking/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the action will run. 
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the main branch
 8 |   schedule:
 9 |     # Run at 0:00 daily
10 |     - cron: '0 0 * * *'
11 | 
12 |   # Allows you to run this workflow manually from the Actions tab
13 |   workflow_dispatch:
14 | 
15 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
16 | jobs:
17 |   # This workflow contains a single job called "build"
18 |   build:
19 |     # The type of runner that the job will run on
20 |     runs-on: ubuntu-latest
21 | 
22 |     # Steps represent a sequence of tasks that will be executed as part of the job
23 |     steps:
24 |       # Runs a single command using the runners shell
25 |       - name: Curl request
26 |         run: curl -X POST -d 'refreshsalt' <YOUR_BUILD_HOOK_URL>&trigger_title=Refreshing+salt+by+github+webhook
27 | 


--------------------------------------------------------------------------------
/functions/getHitsByOSOverall.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByOSOverall` invoked");
 4 | 
 5 | export async function handler() {
 6 | 
 7 |     // Get hits by OS overall sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.all().fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.os] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.os, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['os', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 |     
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByUrlOverall.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByUrlOverall` invoked");
 4 | 
 5 | export async function handler() {
 6 | 
 7 |     // Get hits by URL overall sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.all().fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.url] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.url, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['url', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByLanguageOverall.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByLanguageOverall` invoked");
 4 | 
 5 | export async function handler() {
 6 | 
 7 |     // Get hits by language overall sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.all().fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.language] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.language, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['language', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByBrowserOverall.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByBrowserOverall` invoked");
 4 | 
 5 | export async function handler() {
 6 | 
 7 |     // Get hits by browser overall sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.all().fold({}, (accumulator, value) => {
10 |             let count = (accumulator[value.browser_name] ?? 0) + 1
11 |             let override = Object.fromEntries([[value.browser_name, count]])
12 |             Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |                 let obj = Object.fromEntries([['browser', elm.first()], ["hits", elm.last()]])
14 |                 acc.append(obj)
15 |         }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByOSByYear.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByOSByYear` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by OS by year sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.byYear(Date.fromString(${event.queryStringParameters.date}).year).fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.os] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.os, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['os', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 |     
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByUrlByYear.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByUrlByYear` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by URL by year sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.byYear(Date.fromString(${event.queryStringParameters.date}).year).fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.url] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.url, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['url', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByLanguageByYear.ts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByLanguageByYear` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by language by year sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.byYear(Date.fromString(${event.queryStringParameters.date}).year).fold({}, (accumulator, value) => {
10 |         let count = (accumulator[value.language] ?? 0) + 1
11 |         let override = Object.fromEntries([[value.language, count]])
12 |         Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |             let obj = Object.fromEntries([['language', elm.first()], ["hits", elm.last()]])
14 |             acc.append(obj)
15 |     }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);       
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/functions/getHitsByBrowserByYear.mts:
--------------------------------------------------------------------------------
 1 | import fauna from "./fauna/client";
 2 | 
 3 | console.log("Function `getHitsByBrowserByYear` invoked");
 4 | 
 5 | export async function handler(event) {
 6 | 
 7 |     // Get hits by browser by year sorted by hits and limited to top 10
 8 |     // TODO: Do it in one "fold()"
 9 |     const query = fauna.fql`Object.entries(hits.byYear(Date.fromString(${event.queryStringParameters.date}).year).fold({}, (accumulator, value) => {
10 |             let count = (accumulator[value.browser_name] ?? 0) + 1
11 |             let override = Object.fromEntries([[value.browser_name, count]])
12 |             Object.assign(accumulator, override)})).fold([], (acc, elm) => {
13 |                 let obj = Object.fromEntries([['browser', elm.first()], ["hits", elm.last()]])
14 |                 acc.append(obj)
15 |         }).order(desc(.hits)).take(10)`;
16 | 
17 |     try {
18 |         const response = await fauna.client.query(query);
19 |         return {
20 |             statusCode: 200,
21 |             body: JSON.stringify(response)
22 |         };
23 |     } catch (error) {
24 |         console.error(error);
25 |         return {
26 |             statusCode: 400,
27 |             body: JSON.stringify(error)
28 |         };
29 |     }
30 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "stats",
 3 | 	"version": "1.0.2",
 4 | 	"type": "module",
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11 | 		"format": "prettier --write .",
12 | 		"lint": "prettier --check . && eslint ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-auto": "^3.0.0",
16 | 		"@sveltejs/kit": "^2.8.1",
17 | 		"@sveltejs/vite-plugin-svelte": "^4.0.1",
18 | 		"@types/eslint": "^9.6.1",
19 | 		"autoprefixer": "^10.4.20",
20 | 		"eslint": "^9.15.0",
21 | 		"eslint-config-prettier": "^9.1.0",
22 | 		"eslint-plugin-svelte": "^2.36.0",
23 | 		"globals": "^15.0.0",
24 | 		"prettier": "^3.3.2",
25 | 		"prettier-plugin-svelte": "^3.2.8",
26 | 		"prettier-plugin-tailwindcss": "^0.6.5",
27 | 		"svelte": "^5.2.2",
28 | 		"svelte-check": "^4.0.9",
29 | 		"tailwindcss": "^3.4.15",
30 | 		"typescript": "^5.0.0",
31 | 		"typescript-eslint": "^8.14.0",
32 | 		"vite": "^5.4.11"
33 | 	},
34 | 	"dependencies": {
35 | 		"@netlify/functions": "^2.8.2",
36 | 		"fauna": "^2.3.0",
37 | 		"svelte-loading-spinners": "^0.3.6"
38 | 	}
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/src/stores/dataStore.ts:
--------------------------------------------------------------------------------
 1 | import type { tHitsByBrowser, tHitsByDay, tHitsByLanguage, tHitsByMonth, tHitsByYear, tHitsByOS, tHitsByUrl } from "$lib/types";
 2 | import { writable } from 'svelte/store';
 3 | 
 4 | export const hitsTodayUnique = writable<number>(0);
 5 | export const hitsOverall = writable<number>(0);
 6 | export const hitsByDay = writable<Array<tHitsByDay>>();
 7 | export const hitsByMonth = writable<Array<tHitsByMonth>>();
 8 | export const hitsByYear = writable<Array<tHitsByYear>>();
 9 | export const hitsByUrlOverall = writable<Array<tHitsByUrl>>();
10 | export const hitsByUrlCurrYear = writable<Array<tHitsByUrl>>();
11 | export const hitsByBrowserOverall = writable<Array<tHitsByBrowser>>();
12 | export const hitsByBrowserCurrYear = writable<Array<tHitsByBrowser>>();
13 | export const hitsByLanguageOverall = writable<Array<tHitsByLanguage>>();
14 | export const hitsByLanguageCurrYear = writable<Array<tHitsByLanguage>>();
15 | export const hitsByOSOverall = writable<Array<tHitsByOS>>();
16 | export const hitsByOSCurrYear = writable<Array<tHitsByOS>>();
17 | 
18 | 
19 | // Enable/disable loading spinners
20 | export const fetchingHitsByDate = writable<boolean>(false);
21 | export const fetchingHitsByUrl = writable<boolean>(false);
22 | export const fetchingHitsByBrowser = writable<boolean>(false);
23 | export const fetchingHitsByLanguage = writable<boolean>(false);
24 | export const fetchingHitsByOS = writable<boolean>(false);


--------------------------------------------------------------------------------
/src/lib/helper.ts:
--------------------------------------------------------------------------------
 1 | export function validateEmail(email: string) {
 2 |     const rx = RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i);
 3 |     return rx.test(email);
 4 | }
 5 | 
 6 | export function formatNumber(number: number) {
 7 |     const SI_POSTFIXES = ["", "k", "M", "G", "T", "P", "E"];
 8 |     // what tier? (determines SI prefix)
 9 |     const tier = (Math.log10(Math.abs(number)) / 3) | 0;
10 |     // if zero, we don't need a prefix
11 |     if (tier == 0) return number;
12 |     // get postfix and determine scale
13 |     const postfix = SI_POSTFIXES[tier];
14 |     const scale = Math.pow(10, tier * 3);
15 |     // scale the number
16 |     const scaled = number / scale;
17 |     // format number
18 |     let formatted = scaled.toPrecision(3);
19 |     // remove '.0' case
20 |     if (/\.0$/.test(formatted))
21 |         formatted = formatted.substr(0, formatted.length - 2);
22 |     // return with added postfix
23 |     return formatted + postfix;
24 | }
25 | 
26 | export function getNameOfDay(dayOfWeek: number) {
27 |     const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
28 |     return days[dayOfWeek];
29 | }
30 | 
31 | export function getNameOfMonth(monthOfYear: number) {
32 |     const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
33 |     return months[monthOfYear];
34 | }
35 | 
36 | export function getMaxOfArray(arr: []) {
37 |     return Math.max(...arr);
38 | }


--------------------------------------------------------------------------------
/functions/login.ts:
--------------------------------------------------------------------------------
 1 | export async function handler(event) {
 2 |     const formData = new URLSearchParams (event.body);
 3 |     const email = formData.get("email")?.toString() ?? '';
 4 |     const password = formData.get("password")?.toString() ?? '';
 5 | 
 6 |     const endpoint = `${process.env.URL}/.netlify/identity/token`;
 7 | 
 8 |     const data = new URLSearchParams();
 9 |             data.append('grant_type', 'password');
10 |             data.append('username', email);
11 |             data.append('password', password);
12 |     const options = {
13 |         headers: {
14 |             'Content-Type': 'application/x-www-form-urlencoded',
15 |         },
16 |     };
17 | 
18 |     try {
19 |         const response = await fetch(`${process.env.URL}/.netlify/identity/token`, {
20 |             method: 'POST',
21 |             headers: {
22 |                 'Content-Type': 'application/x-www-form-urlencoded'
23 |             },
24 |             body: data
25 |         })
26 |         const access_token  = (await response.json()).access_token;
27 | 
28 |         return {
29 |             statusCode: 302,
30 |             headers: {
31 |                 'Set-Cookie': `nf_jwt=${access_token}; Path=/; HttpOnly; Secure`,
32 |                 'Cache-Control': 'no-cache',
33 |                 Location: '/stats/',
34 |             },
35 |         };
36 |     } catch (error) {
37 |         console.log(error);
38 |         return {
39 |             statusCode: 302,
40 |             headers: {
41 |                 'Cache-Control': 'no-cache',
42 |                 Location: '/',
43 |             },
44 |         };
45 |     }
46 | };


--------------------------------------------------------------------------------
/example_tracking/plugins/netlify-plugin-handle-mysalt/index.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const crypto = require('crypto');
 3 | 
 4 | // Salt file name defined in netlify.toml
 5 | const getResourcesFile = ({ inputs }) => {
 6 |   return `./functions/utils/${inputs.filename}.js`;
 7 | }
 8 | 
 9 | // Create new salt
10 | const createNewSalt = () => {
11 |   let salt =  crypto.randomBytes(16).toString('hex');
12 |   let content = `module.exports.salt = '${salt}'`;
13 |   return content;
14 | }
15 | 
16 | module.exports = {
17 |   async onPreBuild({ utils, inputs }) {
18 |     const file = getResourcesFile({ inputs });
19 |     if (process.env.INCOMING_HOOK_BODY == 'refreshsalt') {
20 |       // Create file with new salt on scheduled build hook
21 |       fs.writeFileSync(file,createNewSalt());
22 |       console.log(`Created file "${file}" with updated salt`);
23 |     } else {
24 |       // Restore cached salt file on defaul build
25 |       const success = await utils.cache.restore(file);
26 |       console.log(`Checking if file ${file} exists`);
27 | 
28 |       if (success) {
29 |         console.log(`Restored ${file} from cached`);
30 |       } else {
31 |         // If restoring cached file fails, create new
32 |         console.log(`No cache found for requested file. Create new salt file`);
33 |         fs.writeFileSync(file,createNewSalt());
34 |         console.log(`Created new file "${file}" with salt`);
35 |       }
36 |     }
37 |   },
38 | 
39 |   async onPostBuild({ utils, inputs }) {
40 |     const file = getResourcesFile({ inputs });
41 |     // Cache salt file
42 |     const success = await utils.cache.save(file);
43 |     if (success) {
44 |       console.log(`Saved ${file} file to cache`);
45 |     } else {
46 |       console.log(`No file cached`);
47 |     }
48 |   }
49 | };


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import logo from "$lib/images/logo.png";
 3 | </script>
 4 | 
 5 | <nav class="flex justify-center w-full mb-4">
 6 |     <a href="/" data-sveltekit-reload>
 7 |         <img src={logo} alt="logo" width="75" height="75" />
 8 |     </a>
 9 | </nav>
10 | 
11 | <form action="/.netlify/functions/login" method="POST">
12 |     <div class="mb-4 relative">
13 |         <input required type="email" name="email" id="email" class="block px-2.5 pb-2.5 pt-4 w-full rounded-lg border border-gray-400 appearance-none focus:border-emerald-500 focus:outline-none focus:ring-0 peer" placeholder=" " />
14 |         <label for="email" class="absolute text-sm text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-emerald-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Email</label>
15 |     </div>
16 | 
17 |     <div class="mb-4 relative">
18 |         <input required type="password" name="password" id="password" class="block px-2.5 pb-2.5 pt-4 w-full rounded-lg border border-gray-400 appearance-none focus:border-emerald-500 focus:outline-none focus:ring-0 peer" placeholder=" " />
19 |         <label for="password" class="absolute text-sm text-gray-400 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-emerald-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1">Password</label>
20 |     </div>
21 | 
22 |     <div class="flex items-center">
23 |         <button
24 |             type="submit"
25 |             class="bg-emerald-500 hover:bg-gray-700 border border-emerald-500 hover:border-gray-700 inline-block text-white py-2 px-4 rounded-lg">
26 |             Login
27 |         </button>
28 |     </div>
29 | </form>


--------------------------------------------------------------------------------
/example_tracking/functions/counter.js:
--------------------------------------------------------------------------------
 1 | const { Client, fql } = require('fauna');
 2 | const bowser = require('bowser');
 3 | const crypto = require('crypto');
 4 | const language = require("./utils/languagecodes");
 5 | const { salt } = require('./utils/salt');
 6 | 
 7 | exports.handler = async (event) => {
 8 |   const { headers } = event;
 9 |   // We will use the referer to know which page we want to track.
10 |   const referer = headers['referer'];
11 |   const url = new URL(referer);
12 |   const { hostname } = url;
13 |   const { pathname } = url;
14 |   // User agend header parsing
15 |   const useragent = headers['user-agent'];
16 |   // Client IP
17 |   let clientIP = headers['x-nf-client-connection-ip'];
18 | 
19 |   /* BEGIN # Track only if NOT bot/crawler, localhost and netlify deploy server */
20 | 
21 |   if ( !(/bot|crawler|HeadlessChrome|spider|crawling/i).test(useragent) && clientIP !== '127.0.0.1' && clientIP !== '::1') {
22 |     const browser = bowser.getParser(useragent);
23 |     // Create browser details object
24 |     const clientBrowser = browser.getBrowser();
25 |     // // Create OS details object
26 |     const clientOS = browser.getOS();
27 |     // // Decode client language
28 |     const clientLanguage = language[headers['accept-language'].substring(0,2)];
29 |     // Anonymize IPv4 by removing the last byte
30 |     if (clientIP.includes('.')) {
31 |       clientIP = clientIP.substring(0, clientIP.lastIndexOf('.'));
32 |     }
33 |     // Anonymize IPv6 by removing the last 64 bits
34 |     if (clientIP.includes(':')) {
35 |       clientIP = clientIP.substring(0, clientIP.lastIndexOf(':'));
36 |     }
37 |     // Create hash with daily salt to create anon ID
38 |     const id = crypto.createHash('sha256').update(`${ salt }${ clientIP }${ hostname }${ pathname }${ useragent }`).digest('hex');
39 |     // Connect to our database.
40 |     const client = new Client({
41 |       secret: process.env.FAUNA_SECRET
42 |     });
43 |     
44 |     try {
45 |       const query = fql`hits.createData({
46 |         usr_hash: ${id}, 
47 |         url: ${referer}, 
48 |         browser_name: ${clientBrowser.name}, 
49 |         browser_version: ${clientBrowser.version},
50 |         os_name: ${clientOS.name}, 
51 |         os_version: ${clientOS.version}, 
52 |         os_versionName: ${clientOS.versionName}, 
53 |         language: ${clientLanguage}, 
54 |         time: Time.now()
55 |       })`;
56 |       await client.query(query);
57 |     } catch (error) {
58 |       console.error(error);
59 |     }
60 | 
61 |   }
62 | 
63 |   /* END */
64 | 
65 |   // We respond with a transparent image
66 |   return {
67 |     statusCode: 200,
68 |     body: 'R0lGODlhAQABAJAAAP8AAAAAACH5BAUQAAAALAAAAAABAAEAAAICBAEAOw==',
69 |     headers: { 'content-type': 'image/gif' },
70 |     isBase64Encoded: true
71 |   };
72 | };


--------------------------------------------------------------------------------
/src/routes/stats/+page.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import { hitsByBrowserCurrYear, hitsByLanguageCurrYear, hitsByDay, hitsByOSCurrYear, hitsByUrlCurrYear, hitsOverall, hitsTodayUnique } from "../../stores/dataStore";
 3 | import { getNameOfDay } from "$lib/helper";
 4 | import type { PageLoad } from './$types';
 5 | 
 6 | export const load: PageLoad = async ({ fetch }) => {
 7 | 
 8 | 	const today = new Date();
 9 | 	// Current Date as string "2024-04-26"
10 | 	const currDate = today.toISOString().slice(0, 10);
11 | 
12 | 	try {
13 | 		/*
14 | 		* Get overall hits
15 | 		*/
16 | 		const r_overall = await fetch(`/.netlify/functions/getHitsOverall`);
17 | 		const overall_json = await r_overall.json();	
18 | 		// Save response in store
19 | 		hitsOverall.set(overall_json.data);
20 | 	
21 | 		/*
22 | 		* Get hits of today (unique)
23 | 		*/
24 | 		const r_unique = await fetch(`/.netlify/functions/getHitsByDateUnique?date=${currDate}`);
25 | 		const unique_data = (await r_unique.json()).data;	
26 | 		// Save response in store
27 | 		hitsTodayUnique.set(unique_data);
28 | 
29 | 		/*
30 | 		* Get hits by day for the last 7 days
31 | 		*/ 	
32 | 		// Create array with content [0, 1, 2, 3, 4, 5, 6]
33 | 		const daysToGet = [...Array(7).keys()];
34 | 		const namesOfLastXDays: string[] = [];
35 | 		// Fetching hits for each day
36 | 		const hitsByDate = async (days: number) => {
37 | 			const date = new Date();
38 | 			date.setDate(today.getDate() - days);
39 | 			namesOfLastXDays.push(getNameOfDay(date.getDay()));
40 | 			// Extract only the date part from the ISO string
41 | 			const dateString = date.toISOString().slice(0, 10);
42 | 			const response = await fetch(`/.netlify/functions/getHitsByDate?date=${dateString}`);
43 | 			return await response.json();
44 | 		}
45 | 	
46 | 		// Await promises fetching hits for each day
47 | 		const promises = daysToGet.map(hitsByDate);
48 | 		const r_hitsByDay = await Promise.all(promises);
49 | 		const object = namesOfLastXDays.map((day: string, i: number) => {
50 | 			return {
51 | 				day: day,
52 | 				hits: r_hitsByDay[i].data
53 | 			}
54 | 		});
55 | 		// Save hits in store
56 | 		hitsByDay.set(object);
57 | 
58 | 		/*
59 | 		* Get hits by browser for current year
60 | 		*/ 
61 | 		const r_browserByYear = await fetch(`/.netlify/functions/getHitsByBrowserByYear?date=${currDate}`);
62 | 		const browserByYear_data = (await r_browserByYear.json()).data;  
63 | 		// Save array of objects in store
64 | 		hitsByBrowserCurrYear.set(browserByYear_data);
65 | 	
66 | 		/*
67 | 		* Get hits by language for current year
68 | 		*/ 
69 | 		const r_languageByYear = await fetch(`/.netlify/functions/getHitsByLanguageByYear?date=${currDate}`);
70 | 		const languageByYear_data = (await r_languageByYear.json()).data;   
71 | 		// Save array of objects in store
72 | 		hitsByLanguageCurrYear.set(languageByYear_data);
73 | 
74 | 		/*
75 | 		* Get hits by os for current year
76 | 		*/ 
77 | 		const r_osByYear = await fetch(`/.netlify/functions/getHitsByOSByYear?date=${currDate}`);
78 | 		const osByYear_data = (await r_osByYear.json()).data;  
79 | 		// Save array of objects in store
80 | 		hitsByOSCurrYear.set(osByYear_data);
81 | 
82 | 		/*
83 | 		* Get hits by URL for current year
84 | 		*/ 
85 | 		const r_urlByYear = await fetch(`/.netlify/functions/getHitsByUrlByYear?date=${currDate}`);
86 | 		const urlByYear_data = (await r_urlByYear.json()).data;
87 | 		// Save array of objects in store
88 | 		hitsByUrlCurrYear.set(urlByYear_data);
89 | 
90 | 	} catch (err) {
91 | 		console.error(err);
92 | 	}
93 | };


--------------------------------------------------------------------------------
/example_tracking/functions/utils/languagecodes.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 | 	aa: 'Afar',
  3 | 	ab: 'Abkhazian',
  4 | 	ae: 'Avestan',
  5 | 	af: 'Afrikaans',
  6 | 	ak: 'Akan',
  7 | 	am: 'Amharic',
  8 | 	an: 'Aragonese',
  9 | 	ar: 'Arabic',
 10 | 	as: 'Assamese',
 11 | 	av: 'Avaric',
 12 | 	ay: 'Aymara',
 13 | 	az: 'Azerbaijani',
 14 | 	ba: 'Bashkir',
 15 | 	be: 'Belarusian',
 16 | 	bg: 'Bulgarian',
 17 | 	bh: 'Bihari languages',
 18 | 	bi: 'Bislama',
 19 | 	bm: 'Bambara',
 20 | 	bn: 'Bengali',
 21 | 	bo: 'Tibetan',
 22 | 	br: 'Breton',
 23 | 	bs: 'Bosnian',
 24 | 	ca: 'Catalan / Valencian',
 25 | 	ce: 'Chechen',
 26 | 	ch: 'Chamorro',
 27 | 	co: 'Corsican',
 28 | 	cr: 'Cree',
 29 | 	cs: 'Czech',
 30 | 	cu: 'Church Slavic / Old Slavonic / Church Slavonic / Old Bulgarian / Old Church Slavonic',
 31 | 	cv: 'Chuvash',
 32 | 	cy: 'Welsh',
 33 | 	da: 'Danish',
 34 | 	de: 'German',
 35 | 	dv: 'Divehi / Dhivehi / Maldivian',
 36 | 	dz: 'Dzongkha',
 37 | 	ee: 'Ewe',
 38 | 	el: 'Greek',
 39 | 	en: 'English',
 40 | 	eo: 'Esperanto',
 41 | 	es: 'Spanish / Castilian',
 42 | 	et: 'Estonian',
 43 | 	eu: 'Basque',
 44 | 	fa: 'Persian',
 45 | 	ff: 'Fulah',
 46 | 	fi: 'Finnish',
 47 | 	fj: 'Fijian',
 48 | 	fo: 'Faroese',
 49 | 	fr: 'French',
 50 | 	fy: 'Western Frisian',
 51 | 	ga: 'Irish',
 52 | 	gd: 'Gaelic / Scottish Gaelic',
 53 | 	gl: 'Galician',
 54 | 	gn: 'Guarani',
 55 | 	gu: 'Gujarati',
 56 | 	gv: 'Manx',
 57 | 	ha: 'Hausa',
 58 | 	he: 'Hebrew',
 59 | 	hi: 'Hindi',
 60 | 	ho: 'Hiri Motu',
 61 | 	hr: 'Croatian',
 62 | 	ht: 'Haitian / Haitian Creole',
 63 | 	hu: 'Hungarian',
 64 | 	hy: 'Armenian',
 65 | 	hz: 'Herero',
 66 | 	ia: 'Interlingua',
 67 | 	id: 'Indonesian',
 68 | 	ie: 'Interlingue / Occidental',
 69 | 	ig: 'Igbo',
 70 | 	ii: 'Sichuan Yi / Nuosu',
 71 | 	ik: 'Inupiaq',
 72 | 	io: 'Ido',
 73 | 	is: 'Icelandic',
 74 | 	it: 'Italian',
 75 | 	iu: 'Inuktitut',
 76 | 	ja: 'Japanese',
 77 | 	jv: 'Javanese',
 78 | 	ka: 'Georgian',
 79 | 	kg: 'Kongo',
 80 | 	ki: 'Kikuyu / Gikuyu',
 81 | 	kj: 'Kuanyama / Kwanyama',
 82 | 	kk: 'Kazakh',
 83 | 	kl: 'Kalaallisut / Greenlandic',
 84 | 	km: 'Central Khmer',
 85 | 	kn: 'Kannada',
 86 | 	ko: 'Korean',
 87 | 	kr: 'Kanuri',
 88 | 	ks: 'Kashmiri',
 89 | 	ku: 'Kurdish',
 90 | 	kv: 'Komi',
 91 | 	kw: 'Cornish',
 92 | 	ky: 'Kirghiz / Kyrgyz',
 93 | 	la: 'Latin',
 94 | 	lb: 'Luxembourgish / Letzeburgesch',
 95 | 	lg: 'Ganda',
 96 | 	li: 'Limburgan / Limburger / Limburgish',
 97 | 	ln: 'Lingala',
 98 | 	lo: 'Lao',
 99 | 	lt: 'Lithuanian',
100 | 	lu: 'Luba-Katanga',
101 | 	lv: 'Latvian',
102 | 	mg: 'Malagasy',
103 | 	mh: 'Marshallese',
104 | 	mi: 'Maori',
105 | 	mk: 'Macedonian',
106 | 	ml: 'Malayalam',
107 | 	mn: 'Mongolian',
108 | 	mr: 'Marathi',
109 | 	ms: 'Malay',
110 | 	mt: 'Maltese',
111 | 	my: 'Burmese',
112 | 	na: 'Nauru',
113 | 	nb: 'Bokmål, Norwegian / Norwegian Bokmål',
114 | 	nd: 'Ndebele, North / North Ndebele',
115 | 	ne: 'Nepali',
116 | 	ng: 'Ndonga',
117 | 	nl: 'Dutch / Flemish',
118 | 	nn: 'Norwegian Nynorsk / Nynorsk, Norwegian',
119 | 	no: 'Norwegian',
120 | 	nr: 'Ndebele, South / South Ndebele',
121 | 	nv: 'Navajo / Navaho',
122 | 	ny: 'Chichewa / Chewa / Nyanja',
123 | 	oc: 'Occitan (post 1500) / Provençal',
124 | 	oj: 'Ojibwa',
125 | 	om: 'Oromo',
126 | 	or: 'Oriya',
127 | 	os: 'Ossetian / Ossetic',
128 | 	pa: 'Panjabi / Punjabi',
129 | 	pi: 'Pali',
130 | 	pl: 'Polish',
131 | 	ps: 'Pushto / Pashto',
132 | 	pt: 'Portuguese',
133 | 	qu: 'Quechua',
134 | 	rm: 'Romansh',
135 | 	rn: 'Rundi',
136 | 	ro: 'Romanian / Moldavian / Moldovan',
137 | 	ru: 'Russian',
138 | 	rw: 'Kinyarwanda',
139 | 	sa: 'Sanskrit',
140 | 	sc: 'Sardinian',
141 | 	sd: 'Sindhi',
142 | 	se: 'Northern Sami',
143 | 	sg: 'Sango',
144 | 	si: 'Sinhala / Sinhalese',
145 | 	sk: 'Slovak',
146 | 	sl: 'Slovenian',
147 | 	sm: 'Samoan',
148 | 	sn: 'Shona',
149 | 	so: 'Somali',
150 | 	sq: 'Albanian',
151 | 	sr: 'Serbian',
152 | 	ss: 'Swati',
153 | 	st: 'Sotho, Southern',
154 | 	su: 'Sundanese',
155 | 	sv: 'Swedish',
156 | 	sw: 'Swahili',
157 | 	ta: 'Tamil',
158 | 	te: 'Telugu',
159 | 	tg: 'Tajik',
160 | 	th: 'Thai',
161 | 	ti: 'Tigrinya',
162 | 	tk: 'Turkmen',
163 | 	tl: 'Tagalog',
164 | 	tn: 'Tswana',
165 | 	to: 'Tonga',
166 | 	tr: 'Turkish',
167 | 	ts: 'Tsonga',
168 | 	tt: 'Tatar',
169 | 	tw: 'Twi',
170 | 	ty: 'Tahitian',
171 | 	ug: 'Uighur / Uyghur',
172 | 	uk: 'Ukrainian',
173 | 	ur: 'Urdu',
174 | 	uz: 'Uzbek',
175 | 	ve: 'Venda',
176 | 	vi: 'Vietnamese',
177 | 	vo: 'Volapük',
178 | 	wa: 'Walloon',
179 | 	wo: 'Wolof',
180 | 	xh: 'Xhosa',
181 | 	yi: 'Yiddish',
182 | 	yo: 'Yoruba',
183 | 	za: 'Zhuang / Chuang',
184 | 	zh: 'Chinese',
185 | 	zu: 'Zulu'
186 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > [!WARNING]
  2 | > DEPRECATTION WARNING: Fauna is shutting down (May 30, 2025) and NETLIFY has declared its identity service as deprecated. Therefor, this project is abandoned and I encourage you to switch to one of the (freely) available analytics solutions out there.
  3 | 
  4 | > [!TIP]
  5 | > Check out [Vidu-Mini](https://github.com/pa-nic/vidu-mini). A minimal version of Vidu, making use of Netlify Blobs as data store.
  6 | 
  7 | 
  8 | <p align="center"><img src="./src/lib/images/logo.png" width="100"></p>
  9 | 
 10 | <p align="center">Vidu - Minimal (jamstack) web analytics</p>
 11 | 
 12 | <p align="center"><img src="https://user-images.githubusercontent.com/52470102/114470919-fd0e6480-9bef-11eb-82c2-177ec3c0e8f9.png"></p>
 13 | 
 14 | ## About
 15 | 
 16 | This project was started for trying/learning the following tools and still end up with something useful (at least to me):
 17 | 
 18 | - [Svelte](https://svelte.dev) javascript-framework (SvelteKit)
 19 | - [Netlify](https://netlify.com) static hosting
 20 | - [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) for user authentication with [GoTrueJS](https://github.com/netlify/gotrue)
 21 | - [Netlify Functions](https://docs.netlify.com/functions/overview/) AWS lambda functions for API calls
 22 | - [Fauna](https://fauna.com) as transactional database
 23 | - [GitHub Actions](https://docs.github.com/en/actions) to execute build hook of monitored web page to refresh encryption salt every day at midnight
 24 | - [Netlify Build Plugins](https://docs.netlify.com/configure-builds/build-plugins/) to retain encryption *salt* on normal builds and refresh it if build web hook is executed by GitHub action
 25 | - [Tailwind CSS](https://tailwindcss.com) Next generation Tailwind CSS compiler
 26 | 
 27 | ### Functionality
 28 | 
 29 | *Vidu* [see - /Esperanto/] consists of
 30 | 
 31 | - A [Netlify Function](https://docs.netlify.com/functions/overview/) that is included as "tracker" in your web pages to collect (anonymized) user data and sending these to a [Fauna](https://fauna.com) database.
 32 | - A [SvelteKit](https://svelte.dev) web app which displays all the data in a simple yet beautiful dashboard.
 33 | 
 34 | ### Disclaimer
 35 | 
 36 | This project was created for fun and educational purposes.
 37 | 
 38 | *Vidu*, in general, has no limitation on processing page hits. But keep in mind that by using it for highly frequented web pages you will most likely exceed the free plans of Netlify and Fauna.
 39 | 
 40 | Fork it. Extend it. It's "[unlicensed](./LICENSE)".
 41 | 
 42 | ## Setup
 43 | 
 44 | I assume you already have a [Netlify](https://netlify.com) account.
 45 | 
 46 | ### Setup Fauna DB and Vidu
 47 | 
 48 | 1. **Create database**
 49 | 
 50 | If you don't have a Fauna account yet, sign up [here](https://dashboard.fauna.com/accounts/login). 
 51 | Create a new database.
 52 | 
 53 | 2. **Create a database key**
 54 | 
 55 | The *FAUNA_SECRET* for your database can be created in the Fauna dashboard by selecting your just created databse and browsing to *Keys*. 
 56 | 
 57 | Select *Create Key*. Fill in a name, select role *server*, press Save, and you will receive a new key. Make sure to copy it since you will only receive this key once.
 58 | 
 59 | 3. **Create a collection**
 60 | 
 61 | Create a new collection under your database name with the name *hits* (you can keep the default settings).
 62 | Select the collection and to the *Schema* section and over-write its content with the following schema. Save.
 63 | 
 64 | ```
 65 | collection hits {
 66 |   history_days 0
 67 |   ttl_days 2555
 68 |   compute date:Date = (
 69 |     doc => Date(doc.time.toString().slice(0, 10))
 70 |   )
 71 |   compute os = (
 72 |     doc => {
 73 |       if(doc.os_name != null) {
 74 |         if(doc.os_versionName != null) {
 75 |           doc.os_name + " " + doc.os_versionName
 76 |         } else (doc.os_name)
 77 |       } else("unknown")
 78 |     } 
 79 |   )
 80 |   compute year:Number = (
 81 |     doc => doc.time.year
 82 |   )
 83 |   compute month:Number = (
 84 |     doc => doc.time.month
 85 |   )
 86 |   index byDate {
 87 |     terms [.date]
 88 |     values [ .date ]
 89 |   }
 90 |   index byYear {
 91 |     terms [.year]
 92 |     values [ .date ]
 93 |   }
 94 |   index byYearByMonth {
 95 |     terms [.year, .month]
 96 |     values [ .date ]
 97 |   }
 98 | }
 99 | ```
100 | 
101 | 4. **Deploy repository to Netlify**
102 | 
103 | With your server key ready, you can easily clone this repo and deploy this app in a few seconds by clicking the deploy button. Fill out the form and enter your *FAUNA_SECRET*.
104 | 
105 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/pa-nic/vidu)
106 | 
107 | 5. **Enable Identity**
108 | 
109 | Enable Netlify Identity feature on your newly deployed Netlify site. Otherwise adding users and logins wont work.
110 | 
111 | 
112 | 6. **Configure emails sent during user registration and other actions**
113 | 
114 | Under *Site Settings* go to *Identity* - *Emails* and configure the templates as follows:
115 | 
116 | *Invitation template* **Path:** /email_templates/invitation.html<br/>
117 | *Recovery template* **Path:** /email_templates/recover.html
118 | 
119 | 7. **Set registration to invite only**
120 | 
121 | Under *Site Settings* go to *Identity* - *Overview* set *Registration preferences* to *Invite only*. You can then go to the *Identity* tab and invite/add your first user which should receive a confirmation email.
122 | 
123 | ### Setup Tracking
124 | 
125 | For how to implement the tracking in your web page take a look at the [example](./example_tracking). Further details below.
126 | 
127 | **Check** your *FAUNA_SECRET* is configured correctly as an environment variable for this Netlify web page!
128 | 
129 | #### Tracking Code
130 | 
131 | The tracking code calls a Netlify function which pushes the tracking data to your fauna database and returns a bas64 encoded transparent image.
132 | 
133 | ```
134 | <img src="/.netlify/functions/counter"
135 |       alt=""
136 |       width="0"
137 |       height="0"
138 |       hidden
139 |       decoding="async"
140 |       loading="eager" />
141 | ```
142 | 
143 | #### Netlify Function Node Dependencies
144 | 
145 | See [example: package.json](./example_tracking/package.json).
146 | 
147 | ### Gathered Data
148 | 
149 | - URL of visited page
150 | - Browser
151 | - Browser version
152 | - OS
153 | - OS version number
154 | - OS version name
155 | - Client language
156 | - Timestamp
157 | - id
158 | 
159 | The *id* is an anonymized user string composed as follows:
160 | 
161 | ### Anonymized ID
162 | 
163 | To compose the *id* the last byte of the tracked IP address is removed (the last 64bits if IPv6) and hashed (sha256) together with the above listed and *salted* data. As the URL is also included in the hash, you wont be able to track the browsing behavior of individuals across your page. See [example: counter.js](./example_tracking/functions/counter.js) for details.
164 | 
165 | The 16 bytes random *salt* is created **once** during page build by making use of a Netlify plugin([Example: netlify-plugin-handle-mysalt](./example_tracking/plugins/netlify-plugin-handle-mysalt)). If a *salt* was already present it will be restored from cache during a new page build.
166 | 
167 | Nevertheless, the *salt* is always kept separated and never stored in the database.
168 | 
169 | ### Further Improve Anonymization
170 | 
171 | To further improve the anonymization of the gathered data you can setup a github workflow([Example: workflow](./example_tracking/.github/workflows/main.yml)) running a build hook to rebuild your web page every day at midnight (UTC). The above mentioned Netlify plugin will recognize that the page build was triggered by your build hook and in **this** case a **new** *salt* will be created during page build.
172 | 
173 | - Add a build hook under *Site Settings* - *Build & deploy* - *Build hooks*.
174 | - Name it *refreshsalt* 
175 | - Edit the [Example: workflow](./example_tracking/.github/workflows/main.yml) by adding the created url to it:
176 | 
177 | ```
178 | run: curl -X POST -d 'refreshsalt' <YOUR_BUILD_HOOK_URL>&trigger_title=Refreshing+salt+by+github+webhook
179 | ```
180 | 
181 | <p align="center" style="margin-top:80px">And that's just about it!</p>
182 | 


--------------------------------------------------------------------------------
/src/routes/stats/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { fade } from "svelte/transition";
  3 |     import BoxTopRow from "$lib/components/BoxTopRow.svelte";
  4 |     import ListItemBarChart from "$lib/components/ListItemBarChart.svelte";
  5 |     import ListItemLink from "$lib/components/ListItemLink.svelte";
  6 |     import { getNameOfMonth } from "$lib/helper";
  7 |     import { Pulse } from 'svelte-loading-spinners';
  8 | 	import logo from "$lib/images/logo.png";
  9 |     import { hitsByBrowserCurrYear, hitsByBrowserOverall, hitsByLanguageCurrYear, hitsByLanguageOverall, hitsByDay, hitsByMonth, hitsByOSCurrYear, hitsByOSOverall, hitsByUrlCurrYear, hitsByUrlOverall, hitsByYear, hitsOverall, hitsTodayUnique, fetchingHitsByDate, fetchingHitsByUrl, fetchingHitsByBrowser, fetchingHitsByOS, fetchingHitsByLanguage } from "../../stores/dataStore";
 10 | 
 11 |     const today = new Date();
 12 |     const currYear = today.getFullYear();
 13 | 
 14 |     let viewHitsHistoryByDay = true;
 15 |     let viewHitsHistoryByMonth = false;
 16 |     let viewHitsHistoryByYear = false;
 17 | 
 18 |     let viewPageHitsThisYear = true;
 19 |     let viewPageHitsOverall = false;
 20 | 
 21 |     let viewBrowserHitsThisYear = true;
 22 |     let viewBrowserHitsOverall = false;
 23 | 
 24 |     let viewOSHitsThisYear = true;
 25 |     let viewOSHitsOverall = false;
 26 | 
 27 |     let viewLanguageHitsThisYear = true;
 28 |     let viewLanguageHitsOverall = false;
 29 | 
 30 |     /**
 31 |      * Get sum of hits for each of the last 7 months
 32 |      */
 33 |      async function getHitsByMonth() {
 34 |         const monthsToGet = [...Array(7).keys()];
 35 | 		const namesOfLast7Month: string[] = [];
 36 | 		// Fetching hits for each Month
 37 | 		const fetchHitsByMonth = async (months: number) => {
 38 | 			const date = new Date();
 39 | 			date.setMonth(today.getMonth() - months);
 40 | 			namesOfLast7Month.push(getNameOfMonth(date.getMonth()));
 41 | 			const response = await fetch(`/.netlify/functions/getHitsByYearByMonth?year=${date.getFullYear()}&month=${date.getMonth()}`);
 42 | 			return await response.json();
 43 | 		}
 44 | 	
 45 |         try {
 46 |         // Enable loading spinners
 47 |         fetchingHitsByDate.set(true);
 48 |             // Await promises fetching hits for each day
 49 |             const promises = monthsToGet.map(fetchHitsByMonth);
 50 |             const r_hitsByMonth = await Promise.all(promises);
 51 |             const objHitsByMonth = namesOfLast7Month.map((month: string, i: number) => {
 52 |                 return {
 53 |                     month: month,
 54 |                     hits: r_hitsByMonth[i].data
 55 |                 }
 56 |             });
 57 |             // Save hits in store
 58 |             hitsByMonth.set(objHitsByMonth);
 59 |             // Disable loading spinners
 60 |             fetchingHitsByDate.set(false);
 61 |         } catch (err) {
 62 |             console.error(err);
 63 |         }
 64 |     }
 65 | 
 66 |     /**
 67 |      * Get sum of hits for each of the last 7 years
 68 |      */
 69 |     async function getHitsByYear() {
 70 |         // Create array of "years" length sarting with current year:
 71 |         // i.e. [2021, 2020, 2019, ...]
 72 |         const last7Years = Array.from({length: 7}, (_, i) => (currYear - i ));
 73 | 
 74 |         // Fetching sum of hits for each year
 75 |         const getHitsByYear = async (year: number) => {
 76 |             const response = await fetch(`/.netlify/functions/getHitsByYear?year=${year}`);
 77 |             return await response.json();
 78 |         }
 79 | 
 80 |         try {
 81 |             // Enable loading spinners
 82 |             fetchingHitsByDate.set(true);
 83 |             // Awayit promises fetching sum for each year
 84 |             const promises = last7Years.map(getHitsByYear);
 85 |             const r_hitsByYear = await Promise.all(promises);
 86 |             const objHitsByYear = last7Years.map((year: number, i:number) => {
 87 |                 return {
 88 |                     year: year,
 89 |                     hits: r_hitsByYear[i].data
 90 |                 }
 91 |             });
 92 |             // Save hits in store
 93 |             hitsByYear.set(objHitsByYear);
 94 |             // Disable loading spinners
 95 |             fetchingHitsByDate.set(false);
 96 |         } catch (err) {
 97 |             console.error(err);
 98 |         }
 99 |     }
100 | 
101 |     /**
102 |      * Get sum of hits for each URL of the top 10 URLs
103 |      */
104 |      async function getHitsByUrlOverall() {
105 |         try {
106 |             // Enable loading spinners
107 |             fetchingHitsByUrl.set(true);
108 |             // Awayit promises fetching data
109 |             const r_hitsByUrlOverall = await fetch(`/.netlify/functions/getHitsByUrlOverall`);
110 |             const objHitsByUrlOverall = (await r_hitsByUrlOverall.json()).data;
111 |             // Save hits in store
112 |             hitsByUrlOverall.set(objHitsByUrlOverall);
113 |             // Disable loading spinners
114 |             fetchingHitsByUrl.set(false);
115 |         } catch (err) {
116 |             console.error(err);
117 |         }
118 |     }
119 | 
120 |     /**
121 |      * Get sum of hits for each browser of the top 10 browsers
122 |      */
123 |      async function getHitsByBrowserOverall() {
124 |         try {
125 |             // Enable loading spinners
126 |             fetchingHitsByBrowser.set(true);
127 |             // Awayit promises fetching data
128 |             const r_hitsByBrowserOverall = await fetch(`/.netlify/functions/getHitsByBrowserOverall`);
129 |             const objHitsByBrowserOverall = (await r_hitsByBrowserOverall.json()).data;
130 |             // Save hits in store
131 |             hitsByBrowserOverall.set(objHitsByBrowserOverall);
132 |             // Disable loading spinners
133 |             fetchingHitsByBrowser.set(false);
134 |         } catch (err) {
135 |             console.error(err);
136 |         }
137 |     }
138 | 
139 |     /**
140 |      * Get sum of hits for each OS of the top 10 OS
141 |      */
142 |      async function getHitsByOSOverall() {
143 |         try {
144 |             // Enable loading spinners
145 |             fetchingHitsByOS.set(true);
146 |             // Awayit promises fetching data
147 |             const r_hitsByOSOverall = await fetch(`/.netlify/functions/getHitsByOSOverall`);
148 |             const objHitsByOSOverall = (await r_hitsByOSOverall.json()).data;
149 |             // Save hits in store
150 |             hitsByOSOverall.set(objHitsByOSOverall);
151 |             // Disable loading spinners
152 |             fetchingHitsByOS.set(false);
153 |         } catch (err) {
154 |             console.error(err);
155 |         }
156 |     }
157 | 
158 |     /**
159 |      * Get sum of hits for each Language of the top 10 OS
160 |      */
161 |      async function getHitsByLanguageOverall() {
162 |         try {
163 |             // Enable loading spinners
164 |             fetchingHitsByLanguage.set(true);
165 |             // Awayit promises fetching data
166 |             const r_hitsByLanguageOverall = await fetch(`/.netlify/functions/getHitsByLanguageOverall`);
167 |             const objHitsByLanguageOverall = (await r_hitsByLanguageOverall.json()).data;
168 |             // Save hits in store
169 |             hitsByLanguageOverall.set(objHitsByLanguageOverall);
170 |             // Disable loading spinners
171 |             fetchingHitsByLanguage.set(false);
172 |         } catch (err) {
173 |             console.error(err);
174 |         }
175 |     }
176 | 
177 |     /**
178 |      * Display hits history by years
179 |      */
180 |     function handleHitsHistoryByYear() {
181 |         // Set tabs
182 |         viewHitsHistoryByDay = false;
183 |         viewHitsHistoryByMonth = false;
184 |         viewHitsHistoryByYear = true;
185 |         // Only fetch if store is empty
186 |         if (!$hitsByYear) {
187 |             getHitsByYear();
188 |         }
189 |     }
190 | 
191 |     /**
192 |      * Display hits history by months
193 |      */
194 |     function handleHitsHistoryByMonth() {
195 |         // Set tabs
196 |         viewHitsHistoryByDay = false;
197 |         viewHitsHistoryByMonth = true;
198 |         viewHitsHistoryByYear = false;
199 |         // Only fetch if store is empty
200 |         if (!$hitsByUrlOverall) {
201 |             getHitsByMonth();
202 |         }
203 |     }
204 | 
205 |     /**
206 |      * Display hits history by days
207 |      */
208 |     function handleHitsHistoryByDay() {
209 |         // Set tabs
210 |         viewHitsHistoryByDay = true;
211 |         viewHitsHistoryByMonth = false;
212 |         viewHitsHistoryByYear = false;
213 |     }
214 | 
215 |     /**
216 |      * Display page hits overall
217 |      */
218 |      function handlePageHitsOverall() {
219 |         // Set tabs
220 |         viewPageHitsThisYear = false;
221 |         viewPageHitsOverall = true;
222 |         // Only fetch if store is empty
223 |         if (!$hitsByUrlOverall) {
224 |             getHitsByUrlOverall();
225 |         }
226 |     }
227 | 
228 |     /**
229 |      * Display page hits this year
230 |      */
231 |      function handlePageHitsThisYear() {
232 |         // Set tabs
233 |         viewPageHitsThisYear = true;
234 |         viewPageHitsOverall = false;
235 |     }
236 | 
237 |     /**
238 |      * Display browser hits overall
239 |      */
240 |      function handleBrowserHitsOverall() {
241 |         // Set tabs
242 |         viewBrowserHitsThisYear = false;
243 |         viewBrowserHitsOverall = true;
244 |         // Only fetch if store is empty
245 |         if (!$hitsByBrowserOverall) {
246 |             getHitsByBrowserOverall();
247 |         }
248 |     }
249 | 
250 |     /**
251 |      * Display browser hits this year
252 |      */
253 |      function handleBrowserHitsThisYear() {
254 |         // Set tabs
255 |         viewBrowserHitsThisYear = true;
256 |         viewBrowserHitsOverall = false;
257 |     }
258 | 
259 |     /**
260 |      * Display OS hits overall
261 |      */
262 |      function handleOSHitsOverall() {
263 |         // Set tabs
264 |         viewOSHitsThisYear = false;
265 |         viewOSHitsOverall = true;
266 |         // Only fetch if store is empty
267 |         if (!$hitsByOSOverall) {
268 |             getHitsByOSOverall();
269 |         }
270 |     }
271 | 
272 |     /**
273 |      * Display OS hits this year
274 |      */
275 |      function handleOSHitsThisYear() {
276 |         // Set tabs
277 |         viewOSHitsThisYear = true;
278 |         viewOSHitsOverall = false;
279 |     }
280 | 
281 |     /**
282 |      * Display Language hits overall
283 |      */
284 |      function handleLanguageHitsOverall() {
285 |         // Set tabs
286 |         viewLanguageHitsThisYear = false;
287 |         viewLanguageHitsOverall = true;
288 |         // Only fetch if store is empty
289 |         if (!$hitsByLanguageOverall) {
290 |             getHitsByLanguageOverall();
291 |         }
292 |     }
293 | 
294 |     /**
295 |      * Display Language hits this year
296 |      */
297 |      function handleLanguageHitsThisYear() {
298 |         // Set tabs
299 |         viewLanguageHitsThisYear = true;
300 |         viewLanguageHitsOverall = false;
301 |     }
302 | </script>
303 | 
304 | <nav class="flex items-center w-full mb-4 justify-between">
305 |     <a href="/" data-sveltekit-reload>
306 |         <img src={logo} alt="logo" width="75" height="75" />
307 |     </a>
308 |     <form action="/logout" method="POST">
309 |         <button	class="border border-gray-400 hover:border-gray-700 inline-block text-gray-400 hover:text-gray-700 py-2 px-4 rounded-lg">
310 |             Logout
311 |         </button>
312 |     </form>
313 | </nav>
314 | 
315 | <div class="w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-2" in:fade>
316 | 
317 |     <BoxTopRow 
318 |         heading="Today"
319 |         data={$hitsByDay[0].hits}
320 |         class="p-4 rounded-lg bg-emerald-500 text-white"
321 |     />
322 |     <BoxTopRow 
323 |         heading="Today (unique)"
324 |         data={$hitsTodayUnique}
325 |         class="p-4 rounded-lg bg-gray-700 text-white"
326 |     />
327 | 
328 |     <BoxTopRow 
329 |         heading="Last 7 days"
330 |         data={$hitsByDay.map(o => o.hits).reduce((sum, n) => sum + n, 0)}
331 |         class="p-4 rounded-lg bg-gray-700 text-white"
332 |     />
333 | 
334 |     <BoxTopRow 
335 |         heading="Overall"
336 |         data={$hitsOverall}
337 |         class="p-4 rounded-lg bg-gray-700 text-white"
338 |     />
339 | 
340 | </div>
341 | <div class="w-full grid gap-2 grid-cols-1 sm:grid-cols-2" in:fade>
342 |     <div>
343 |         <div class="mt-4 text-white">
344 |             <div class="w-full flex justify-between">
345 |                 <h2 class="p-2 text-gray-700">Hits history</h2>
346 |                 <div class="flex flex-wrap">
347 |                     <button 
348 |                         on:click="{handleHitsHistoryByYear}"
349 |                         class="{viewHitsHistoryByYear ? 
350 |                         "px-4 py-2 rounded-t-lg bg-gray-700" : 
351 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
352 |                         Y
353 |                     </button>
354 |                     <button 
355 |                         on:click="{handleHitsHistoryByMonth}"
356 |                         class="{viewHitsHistoryByMonth ? 
357 |                         "px-4 py-2 rounded-t-lg bg-gray-700" : 
358 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
359 |                         M
360 |                     </button>
361 |                     <button
362 |                         on:click="{handleHitsHistoryByDay}"
363 |                         class="{viewHitsHistoryByDay ?
364 |                         "px-4 py-2 rounded-t-lg bg-gray-700" : 
365 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
366 |                         D
367 |                     </button>
368 |                 </div>      
369 |             </div>
370 |         
371 |             <div class="flex flex-col px-4 pt-4 pb-2 rounded-l-lg rounded-b-lg bg-gray-700">
372 |                 <div class="flex pb-2 text-xs">
373 |                     <div class="flex-1">
374 |                         {#if viewHitsHistoryByDay}
375 |                             Day
376 |                         {:else if viewHitsHistoryByMonth}
377 |                             Month
378 |                         {:else if viewHitsHistoryByYear}
379 |                             Year
380 |                         {/if} 
381 |                     </div>
382 |                     <div class="w-12 text-right">
383 |                         Hits
384 |                     </div>
385 |                 </div>
386 |                 {#if $fetchingHitsByDate}
387 |                     <div class="flex self-center items-center box-min-height">
388 |                         <Pulse size="24" color="#10B981" unit="px" duration="1s" />
389 |                     </div>
390 |                 {:else}
391 |                     {#if viewHitsHistoryByDay}
392 |                         {#each $hitsByDay as {day, hits}}
393 |                             <ListItemBarChart
394 |                                 description = {day}
395 |                                 values = {$hitsByDay}
396 |                                 value = {hits}
397 |                             />
398 |                         {/each}
399 |                     {:else if viewHitsHistoryByMonth}
400 |                         {#each $hitsByMonth as {month, hits}}
401 |                             <ListItemBarChart
402 |                                 description = {month}
403 |                                 values = {$hitsByMonth}
404 |                                 value = {hits}
405 |                             />
406 |                         {/each}
407 |                     {:else if viewHitsHistoryByYear}
408 |                         {#each $hitsByYear as {year, hits}}
409 |                             <ListItemBarChart
410 |                                 description = {year}
411 |                                 values = {$hitsByYear}
412 |                                 value = {hits}
413 |                             />
414 |                         {/each}
415 |                     {/if}
416 |                 {/if}
417 |             </div>       
418 |         </div>
419 | 
420 |         <div class="mt-4 text-white">
421 |             <div class="w-full flex justify-between">
422 |                 <h2 class="p-2 text-gray-700">Top 10 pages</h2>
423 |                 <div class="flex flex-wrap">
424 |                     <button 
425 |                         on:click="{handlePageHitsOverall}"
426 |                         class="{viewPageHitsOverall ? 
427 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
428 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
429 |                         Overall
430 |                     </button>
431 |                     <button
432 |                         on:click="{handlePageHitsThisYear}"
433 |                         class="{viewPageHitsThisYear ? 
434 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
435 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
436 |                         {currYear}
437 |                     </button>
438 |                 </div>      
439 |             </div>
440 |         
441 |             <div class="flex flex-col px-4 pt-4 pb-2 rounded-l-lg rounded-b-lg bg-gray-700">
442 |                 <div class="flex pb-2 text-xs">
443 |                     <div class="flex-1">
444 |                         Page
445 |                     </div>
446 |                     <div class="w-12 text-right">
447 |                         Hits
448 |                     </div>
449 |                 </div>
450 |                 {#if $fetchingHitsByUrl}
451 |                     <div class="flex self-center items-center box-min-height">
452 |                         <Pulse size="24" color="#10B981" unit="px" duration="1s" />
453 |                     </div>
454 |                 {:else}
455 |                     {#if viewPageHitsThisYear}
456 |                         {#each $hitsByUrlCurrYear as { url, hits }}
457 |                             <ListItemLink
458 |                                 url = {url}
459 |                                 value = {hits}
460 |                             />
461 |                         {/each}
462 |                     {:else if viewPageHitsOverall}
463 |                         {#each $hitsByUrlOverall as { url, hits }}
464 |                             <ListItemLink
465 |                                 url = {url}
466 |                                 value = {hits}
467 |                             />
468 |                         {/each}
469 |                     {/if}
470 |                 {/if}
471 |             </div>
472 |         
473 |         </div>
474 | 
475 |         <div class="mt-4 text-white">
476 |             <div class="w-full flex justify-between">
477 |                 <h2 class="p-2 text-gray-700">Top 10 browsers</h2>
478 |                 <div class="flex flex-wrap">
479 |                     <button 
480 |                         on:click="{handleBrowserHitsOverall}"
481 |                         class="{viewBrowserHitsOverall ? 
482 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
483 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
484 |                         Overall
485 |                     </button>
486 |                     <button
487 |                         on:click="{handleBrowserHitsThisYear}"
488 |                         class="{viewBrowserHitsThisYear ? 
489 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
490 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
491 |                         {currYear}
492 |                     </button>
493 |                 </div>      
494 |             </div>
495 |             
496 |             <div class="flex flex-col px-4 pt-4 pb-2 rounded-l-lg rounded-b-lg bg-gray-700">
497 |                 <div class="flex pb-2 text-xs">
498 |                     <div class="flex-1">
499 |                         Browser
500 |                     </div>
501 |                     <div class="w-12 text-right">
502 |                         Hits
503 |                     </div>
504 |                 </div>
505 |                 {#if $fetchingHitsByBrowser}
506 |                     <div class="flex self-center items-center box-min-height">
507 |                         <Pulse size="24" color="#10B981" unit="px" duration="1s" />
508 |                     </div>
509 |                 {:else}
510 |                     {#if viewBrowserHitsThisYear}
511 |                         {#each $hitsByBrowserCurrYear as {browser, hits}}
512 |                             <ListItemBarChart
513 |                                 description = {browser}
514 |                                 values = {$hitsByBrowserCurrYear}
515 |                                 value = {hits}
516 |                             />
517 |                         {/each}
518 |                     {:else if viewBrowserHitsOverall}
519 |                         {#each $hitsByBrowserOverall as {browser, hits}}
520 |                             <ListItemBarChart
521 |                                 description = {browser}
522 |                                 values = {$hitsByBrowserOverall}
523 |                                 value = {hits}
524 |                             />
525 |                         {/each}
526 |                     {/if}
527 |                 {/if}
528 |             </div>
529 | 
530 |         </div>
531 | 
532 |     </div>
533 | 
534 |     <div>
535 |         <div class="mt-4 text-white">
536 |             <div class="w-full flex justify-between">
537 |                 <h2 class="p-2 text-gray-700">Top 10 OS</h2>
538 |                 <div class="flex flex-wrap">
539 |                     <button 
540 |                         on:click="{handleOSHitsOverall}"
541 |                         class="{viewOSHitsOverall ? 
542 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
543 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
544 |                         Overall
545 |                     </button>
546 |                     <button
547 |                         on:click="{handleOSHitsThisYear}"
548 |                         class="{viewOSHitsThisYear ? 
549 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
550 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
551 |                         {currYear}
552 |                     </button>
553 |                 </div>      
554 |             </div>
555 |             
556 |             <div class="flex flex-col px-4 pt-4 pb-2 rounded-l-lg rounded-b-lg bg-gray-700">
557 |                 <div class="flex pb-2 text-xs">
558 |                     <div class="flex-1">
559 |                         OS
560 |                     </div>
561 |                     <div class="w-12 text-right">
562 |                         Hits
563 |                     </div>
564 |                 </div>
565 |                 {#if $fetchingHitsByOS}
566 |                     <div class="flex self-center items-center box-min-height">
567 |                         <Pulse size="24" color="#10B981" unit="px" duration="1s" />
568 |                     </div>
569 |                 {:else}
570 |                     {#if viewOSHitsThisYear}
571 |                         {#each $hitsByOSCurrYear as {os, hits}}
572 |                             <ListItemBarChart
573 |                                 description = {os}
574 |                                 values = {$hitsByOSCurrYear}
575 |                                 value = {hits}
576 |                             />
577 |                         {/each}
578 |                     {:else if viewOSHitsOverall}
579 |                         {#each $hitsByOSOverall as {os, hits}}
580 |                             <ListItemBarChart
581 |                                 description = {os}
582 |                                 values = {$hitsByOSOverall}
583 |                                 value = {hits}
584 |                             />
585 |                         {/each}
586 |                     {/if}
587 |                 {/if}
588 |             </div>
589 | 
590 |         </div>
591 | 
592 |         <div class="mt-4 text-white">
593 |             <div class="w-full flex justify-between">
594 |                 <h2 class="p-2 text-gray-700">Top 10 languages</h2>
595 |                 <div class="flex flex-wrap">
596 |                     <button 
597 |                         on:click="{handleLanguageHitsOverall}"
598 |                         class="{viewLanguageHitsOverall ? 
599 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
600 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
601 |                         Overall
602 |                     </button>
603 |                     <button
604 |                         on:click="{handleLanguageHitsThisYear}"
605 |                         class="{viewLanguageHitsThisYear ? 
606 |                         "px-4 py-2 rounded-t-lg bg-gray-700 text-white" : 
607 |                         "px-4 py-2 rounded-t-lg bg-gray-100 text-emerald-500 hover:text-gray-700 hover:cursor-pointer hover:bg-gray-200"}">
608 |                         {currYear}
609 |                     </button>
610 |                 </div>      
611 |             </div>
612 |             
613 |             <div class="flex flex-col px-4 pt-4 pb-2 rounded-l-lg rounded-b-lg bg-gray-700">
614 |                 <div class="flex pb-2 text-xs">
615 |                     <div class="flex-1">
616 |                         Language
617 |                     </div>
618 |                     <div class="w-12 text-right">
619 |                         Hits
620 |                     </div>
621 |                 </div>
622 |                 {#if $fetchingHitsByLanguage}
623 |                     <div class="flex self-center items-center box-min-height">
624 |                         <Pulse size="24" color="#10B981" unit="px" duration="1s" />
625 |                     </div>
626 |                 {:else}
627 |                     {#if viewLanguageHitsThisYear}
628 |                         {#each $hitsByLanguageCurrYear as {language, hits}}
629 |                             <ListItemBarChart
630 |                                 description = {language}
631 |                                 values = {$hitsByLanguageCurrYear}
632 |                                 value = {hits}
633 |                             />
634 |                         {/each}
635 |                     {:else if viewLanguageHitsOverall}
636 |                         {#each $hitsByLanguageOverall as {language, hits}}
637 |                             <ListItemBarChart
638 |                                 description = {language}
639 |                                 values = {$hitsByLanguageOverall}
640 |                                 value = {hits}
641 |                             />
642 |                         {/each}
643 |                     {/if}
644 |                 {/if}
645 |             </div>
646 | 
647 |         </div>
648 |     </div>
649 | </div>
650 | 


--------------------------------------------------------------------------------