fix(csp): resolves Content Security Policy violations + enables Worker observability (#23)

* fix(csp): resolves Content Security Policy violations

* chore(worker): enables Cloudflare Worker observability logs

Author: wgordon17

public/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'none'; script-src 'self' 'sha256-uEFqyYCMaNy1Su5VmWLZ1hOCRBjkhm4+ieHHxQW6d3Y='; style-src 'self'; img-src 'self' https://avatars.githubusercontent.com; connect-src 'self' https://api.github.com; font-src 'self'; worker-src 'self'; manifest-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests
+  Content-Security-Policy: default-src 'none'; script-src 'self' 'sha256-uEFqyYCMaNy1Su5VmWLZ1hOCRBjkhm4+ieHHxQW6d3Y='; style-src-elem 'self'; style-src-attr 'unsafe-inline'; img-src 'self' data: https://avatars.githubusercontent.com; connect-src 'self' https://api.github.com; font-src 'self'; worker-src 'self'; manifest-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests
   X-Content-Type-Options: nosniff
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: geolocation=(), microphone=(), camera=()

src/app/components/dashboard/ItemRow.tsx

@@ -75,8 +75,8 @@ export default function ItemRow(props: ItemRowProps) {
                 const fg = isValidHex ? labelTextColor(label.color) : "#374151";
                 return (
                   <span
-                    class="inline-flex items-center rounded-full text-xs px-2 py-0.5 font-medium"
-                    style={{ "background-color": bg, color: fg }}
+                    class="inline-flex items-center rounded-full text-xs px-2 py-0.5 font-medium bg-[var(--lb)] text-[var(--lf)]"
+                    style={{ "--lb": bg, "--lf": fg }}
                   >
                     {label.name}
                   </span>

src/app/components/shared/StatusDot.tsx

@@ -41,8 +41,7 @@ export default function StatusDot(props: StatusDotProps) {
 
   const dot = () => (
     <span
-      class={`relative inline-flex items-center justify-center${props.href ? " cursor-pointer" : ""}`}
-      style={{ width: "12px", height: "12px" }}
+      class={`relative inline-flex items-center justify-center w-3 h-3${props.href ? " cursor-pointer" : ""}`}
       title={cfg().label}
       aria-label={cfg().label}
     >
@@ -52,8 +51,7 @@ export default function StatusDot(props: StatusDotProps) {
         />
       </Show>
       <span
-        class={`relative inline-flex rounded-full ${cfg().bg}`}
-        style={{ width: "8px", height: "8px" }}
+        class={`relative inline-flex rounded-full w-2 h-2 ${cfg().bg}`}
       />
     </span>
   );

src/app/index.css

@@ -2,6 +2,7 @@
 
 @plugin "daisyui" {
   themes: corporate --default, cupcake, light, nord, dim, dracula, dark, forest;
+  exclude: chat, mask, mockup;
 }
 
 

wrangler.toml

@@ -13,3 +13,13 @@ not_found_handling = "single-page-application"
 [[routes]]
 pattern = "gh.gordoncode.dev"
 custom_domain = true
+
+[observability]
+enabled = true
+head_sampling_rate = 1
+
+[observability.logs]
+enabled = true
+head_sampling_rate = 1
+persist = true
+invocation_logs = true