Added Sentry

.gitignore

@@ -9,3 +9,5 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vercel
+# Sentry Config File
+.sentryclirc

package.json

@@ -13,11 +13,13 @@
 	},
 	"devDependencies": {
 		"@skeletonlabs/skeleton": "^1.9.0",
+		"@skeletonlabs/tw-plugin": "^0.3.0",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/adapter-vercel": "^3.0.0",
 		"@sveltejs/kit": "^1.20.0",
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.10.4",
 		"@typescript-eslint/eslint-plugin": "^5.59.8",
 		"@typescript-eslint/parser": "^5.59.8",
 		"@vercel/analytics": "^1.0.1",
@@ -27,6 +29,7 @@
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.24",
+		"posthog-js": "^1.95.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^3.59.1",
@@ -37,7 +40,9 @@
 		"tslib": "^2.5.2",
 		"tsparticles": "^2.9.3",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.9"
+		"vite": "^4.3.9",
+		"@sentry/profiling-node": "^1.3.2",
+		"@sentry/sveltekit": "^7.88.0"
 	},
 	"type": "module"
 }

src/app.postcss

@@ -1,2 +1,30 @@
+/**
+ * This injects Tailwind's base styles and any base styles registered by
+ * plugins.
+ */
+ @tailwind base;
+
+ /**
+  * This injects Tailwind's component classes and any component classes
+  * registered by plugins.
+  */
+ @tailwind components;
+ 
+ /**
+  * This injects Tailwind's utility classes and any utility classes registered
+  * by plugins.
+  */
+ @tailwind utilities;
+ 
+ /**
+  * Use this directive to control where Tailwind injects the hover, focus,
+  * responsive, dark mode, and other variants of each class.
+  *
+  * If omitted, Tailwind will append these classes to the very end of
+  * your stylesheet by default.
+  */
+ @tailwind variants;
+
+
 /*place global styles here */
 html, body { @apply h-full overflow-hidden; }

src/hooks.client.ts

@@ -0,0 +1,25 @@
+
+// This file is used to initialize Sentry on the client side.
+import { dev } from '$app/environment';
+import * as Sentry from '@sentry/sveltekit';
+
+
+Sentry.init({
+  dsn: 'https://6b2d8c5156a83705bc7ffb4f0d16ba5f@sentry.plygrnd.org/2',
+
+  tracesSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: dev ? 1.0 : 0.1,
+
+  // If the entire session is not sampled, use the below sample rate to sample
+  // sessions when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+  
+  // If you don't want to use Session Replay, just remove the line below:
+  integrations: [new Sentry.Replay()],
+});
+
+// If you have a custom error handler, pass it to `handleErrorWithSentry`
+export const handleError = Sentry.handleErrorWithSentry();

src/hooks.server.ts

@@ -0,0 +1,20 @@
+import { sequence } from "@sveltejs/kit/hooks";
+import { handleErrorWithSentry, sentryHandle } from "@sentry/sveltekit";
+import * as Sentry from '@sentry/sveltekit';
+import { ProfilingIntegration } from "@sentry/profiling-node";
+
+Sentry.init({
+  dsn: 'https://6b2d8c5156a83705bc7ffb4f0d16ba5f@sentry.plygrnd.org/2',
+  tracesSampleRate: 1.0,
+  profilesSampleRate: 1.0, // Profiling sample rate is relative to tracesSampleRate
+  integrations: [
+    // Add profiling integration to list of integrations
+    new ProfilingIntegration(),
+  ],
+});
+
+// If you have custom handlers, make sure to place them after `sentryHandle()` in the `sequence` function.
+export const handle = sequence(sentryHandle());
+
+// If you have a custom error handler, pass it to `handleErrorWithSentry`
+export const handleError = handleErrorWithSentry();

src/routes/+layout.svelte

@@ -1,31 +1,10 @@
 <script lang="ts">
 	import '$lib/theme-luke.css';
-	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
-	// Import the Analytics package, and the SvelteKit dev variable.
+
-	import { dev } from '$app/environment';
-	import { inject } from '@vercel/analytics';
 	import Particles from 'svelte-particles';
 	import { loadFull } from 'tsparticles';
 
-	import Atropos from 'atropos';
-	import 'atropos/css';
-	import { onMount } from 'svelte';
-
-	let div: HTMLDivElement;
-
-	onMount(() => {
-		// Initialize
-		Atropos({
-			el: div,
-			activeOffset: 5,
-			shadowScale: 0
-		});
-	});
-
-	// Inject the Analytics functionality
-	inject({ mode: dev ? 'development' : 'production' });
-
 	const particlesConfig = {
 		particles: {
 			color: {
@@ -49,18 +28,6 @@
 	};
 </script>
 
-<!-- main Atropos container (required), add your custom class here -->
-<div class="atropos h-full" bind:this={div}>
-	<!-- scale container (required) -->
-	<div class="atropos-scale">
-		<!-- rotate container (required) -->
-		<div class="atropos-rotate">
-			<!-- inner container (required) -->
-			<div class="atropos-inner">
 <Particles id="tsparticles" options={particlesConfig} {particlesInit} />
 <!-- Page Route Content -->
 <slot />
-			</div>
-		</div>
-	</div>
-</div>

tailwind.config.cjs

@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	darkMode: 'class',
-	content: [
-		'./src/**/*.{html,js,svelte,ts}',
-		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
-	],
-	theme: {
-		extend: {}
-	},
-	plugins: [
-		require('@tailwindcss/forms'),
-		require('@tailwindcss/typography'),
-		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
-	]
-};

tailwind.config.ts

@@ -0,0 +1,29 @@
+
+import { join } from 'path';
+import type { Config } from 'tailwindcss';
+
+// 1. Import the Skeleton plugin
+import { skeleton } from '@skeletonlabs/tw-plugin';
+
+const config = {
+	// 2. Opt for dark mode to be handled via the class method
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		// 3. Append the path to the Skeleton package
+		join(require.resolve(
+			'@skeletonlabs/skeleton'),
+			'../**/*.{html,js,svelte,ts}'
+		)
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		// 4. Append the Skeleton plugin (after other plugins)
+		skeleton
+	]
+} satisfies Config;
+
+export default config;
+						

vite.config.js

@@ -1,10 +1,22 @@
+import { sentrySvelteKit } from "@sentry/sveltekit";
 import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()],
+    plugins: [sentrySvelteKit({
+        sourceMapsUploadOptions: {
+            org: "sentry",
+            project: "lukehagar",
+            url: "https://sentry.plygrnd.org"
+        }
+    }), sveltekit()],
+
     test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+
+    ssr: {
+        noExternal: ["tsparticles", "tsparticles-slim", "tsparticles-engine", "svelte-particles"], // add all tsparticles libraries here, they're not made for SSR, they're client only
     }
 };