update CSP styles

quisido · Jul 6, 2024 · 398206d · 398206d
1 parent be9557e
commit 398206d
Show file tree

Hide file tree

Showing 30 changed files with 448 additions and 195 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -140,7 +140,7 @@ jobs:
           GITHUB_REPOSITORY: ${{ github.repository }}
           GITHUB_SHA: ${{ github.sha }}
           GOOGLE_ANALYTICS_TRACKING_ID: G-ZTQ6K5CVQS
-          HONEYCOMB_API_KEY: hcaik_01hwsd84kyjjrwjgg4kqbzzvp2p4qrxxq71ejv1c04g0x29v20fnmvw8dg
+          HONEYCOMB_API_KEY: hcaik_01hwsd84kyjjrwjgg4kqbzzvp2
           IMAGEKIT_KEY: ${{ secrets.IMAGEKIT_KEY }}
           PATREON_OAUTH_CLIENT_ID: J_6jrNJZNibHylSF83UVl9I4OHZYf67RAsU0s7_LnH1N5BKF-vgOyweF3KQLOKm1
           PATREON_OAUTH_REDIRECT_URI: https://a.quisi.do/patreon/

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -120,7 +120,7 @@ jobs:
           GITHUB_REPOSITORY: ${{ github.repository }}
           GITHUB_SHA: ${{ github.sha }}
           GOOGLE_ANALYTICS_TRACKING_ID: G-GMKFW5ZZ9G
-          HONEYCOMB_API_KEY: hcaik_01hwsdk67m93b349m3hp3gtzneg8rr32rn1037h5zpzrnfnyhsb7jdpwqm
+          HONEYCOMB_API_KEY: hcaik_01hwsd84kyjjrwjgg4kqbzzvp2
           IMAGEKIT_KEY: ${{ secrets.IMAGEKIT_KEY }}
           PATREON_OAUTH_CLIENT_ID: 4kCae2AHZdKyyuonaPzhGillxJ2HyyLQEDu8StvMtixBHmWmN4KVG0QVP6R45tjG
           PATREON_OAUTH_REDIRECT_URI: https://localhost:5882/patreon/

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -16,6 +16,9 @@ packageExtensions:
   "@sentry/fullstory@*":
     peerDependencies:
       "@sentry/types": ">=7.0.0"
+  "@sentry/nextjs@*":
+    peerDependencies:
+      "@opentelemetry/api": ^1.0.0
   aws-rum-web@*:
     peerDependencies:
       "@aws-sdk/types": ">=3.0.0"

diff --git a/packages/authn/.dev.vars b/packages/authn/.dev.vars
@@ -1,5 +1,3 @@
-AUTHN_DB_TURSO_AUTH_TOKEN=
-AUTHN_DB_TURSO_URL=
 COOKIE_DOMAIN=localhost
 ENVIRONMENT_NAME=development
 HOST=localhost:3000

diff --git a/packages/authn/src/constants/responses.ts b/packages/authn/src/constants/responses.ts
@@ -24,7 +24,9 @@ export const FAVICON_RESPONSE_INIT: ResponseInit = {
   }),
 };
 
-export const ROBOTS_RESPONSE_BODY: BodyInit = 'Disallow: *';
+export const ROBOTS_RESPONSE_BODY: BodyInit = `User-agent: *
+Disallow: *`;
+
 export const ROBOTS_RESPONSE_INIT: ResponseInit = {
   status: StatusCode.OK,
 

diff --git a/packages/csp/src/constants/responses.ts b/packages/csp/src/constants/responses.ts
@@ -24,7 +24,9 @@ export const FAVICON_RESPONSE_INIT: ResponseInit = {
   }),
 };
 
-export const ROBOTS_RESPONSE_BODY: BodyInit = 'Disallow: *';
+export const ROBOTS_RESPONSE_BODY: BodyInit = `User-agent: *
+Disallow: *`;
+
 export const ROBOTS_RESPONSE_INIT: ResponseInit = {
   status: StatusCode.OK,
 

diff --git a/packages/next/.env b/packages/next/.env
@@ -11,7 +11,7 @@ DD_ENV=dev
 DD_SERVICE=quisi.do-(dev)
 DEPLOYMENT_ENVIRONMENT=local
 GOOGLE_ANALYTICS_TRACKING_ID=G-T3EQFLWKEG
-HONEYCOMB_API_KEY=hcaik_01hwsdefz53ky8j2kpxzpbpxwfsp9z4x2nd7mxy4aha3kgdenjsf27gzgw
+HONEYCOMB_API_KEY=hcaik_01hwsd84kyjjrwjgg4kqbzzvp2
 IMAGEKIT_KEY=private_xvrnszuazhYS4Gdmg9nO3nH3rig=
 PATREON_OAUTH_CLIENT_ID=4kCae2AHZdKyyuonaPzhGillxJ2HyyLQEDu8StvMtixBHmWmN4KVG0QVP6R45tjG
 PATREON_OAUTH_REDIRECT_URI=https://localhost:5882/patreon/

diff --git a/packages/next/next.config.ts b/packages/next/next.config.ts
@@ -25,6 +25,7 @@ export default withNextJsBundleAnalyzer({
   productionBrowserSourceMaps: true,
   reactStrictMode: true,
   skipTrailingSlashRedirect: false,
+  staticPageGenerationTimeout: 300,
   trailingSlash: true,
   webpack: nextConfigWebpack,
 

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -73,6 +73,7 @@
     "@sentry/core": "^8.13.0",
     "@sentry/fullstory": "^3.0.0",
     "@sentry/nextjs": "^8.13.0",
+    "@sentry/profiling-node": "^8.14.0",
     "@sentry/react": "patch:@sentry/react@npm%3A8.13.0#~/.yarn/patches/@sentry-react-npm-8.13.0-bd23d3c2da.patch",
     "@sentry/tracing": "7.114.0",
     "aws-rum-react": "workspace:^",

diff --git a/packages/next/src/components/sentry.tsx b/packages/next/src/components/sentry.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type ReactElement, type ReactNode } from 'react';
+import { memo, type ReactElement, type ReactNode } from 'react';
 import SentryReact from 'sentry-react';
 import useSentryIntegrations from '../hooks/use-sentry-integrations.js';
 
@@ -13,7 +13,7 @@ interface Props {
   readonly tracePropagationTargets: string[];
 }
 
-export default function Sentry({
+function Sentry({
   children,
   dsn,
   environment,
@@ -33,6 +33,7 @@ export default function Sentry({
       environment={environment}
       integrations={integrations}
       normalizeDepth={Number.POSITIVE_INFINITY}
+      profilesSampleRate={1}
       release={release}
       replaysOnErrorSampleRate={1}
       replaysSessionSampleRate={1}
@@ -46,3 +47,5 @@ export default function Sentry({
     </SentryReact>
   );
 }
+
+export default memo(Sentry);
diff --git a/...es/next/src/features/content-security-policy/content-security-policy-disposition-icon.tsx b/...es/next/src/features/content-security-policy/content-security-policy-disposition-icon.tsx
@@ -3,7 +3,6 @@ import Emoji from "../../components/emoji.jsx";
 
 interface Props {
   readonly children: string;
-  readonly className: string;
 }
 
 const mapDispositionToEmoji = (disposition: string): string => {
@@ -19,9 +18,8 @@ const mapDispositionToEmoji = (disposition: string): string => {
 
 export default function ContentSecurityPolicyDispositionIcon({
   children,
-  className,
 }: Props): ReactElement {
   const emoji: string = mapDispositionToEmoji(children);
 
-  return <Emoji className={className}>{emoji}</Emoji>;
+  return <Emoji>{emoji}</Emoji>;
 }
diff --git a/...s/next/src/features/content-security-policy/content-security-policy-list-item.module.scss b/...s/next/src/features/content-security-policy/content-security-policy-list-item.module.scss
@@ -1,81 +1,36 @@
-.dispositionIcon {
-  font-size: 0.75em;
-}
-
-.expando {
-  background-color: transparent;
-  border-width: 0;
-  color: inherit;
-  column-gap: 8px;
-  cursor: pointer;
-  display: contents;
-  flex-direction: row;
-  font-size: 1em;
-  line-height: 1rem;
-  overflow: hidden;
-  padding-bottom: 0;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  padding-top: 0;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-
-  &:hover {
-    background-color: #00000020;
-  }
-
-  > span:last-child {
-    column-gap: 0.333em;
-    display: inline-flex;
-    flex-direction: row;
-  }
-}
-
 .listItem {
-  border-bottom-width: 0;
-  border-color: transparent;
-  border-left-width: 0;
-  border-right-width: 0;
-  border-style: solid;
-  border-top-width: 0;
   display: contents;
-  font-size: 1em;
-  line-height: 1rem;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
 
   &.collapsed {
-    &:hover {
+    // Grid row
+    &:hover > button > span,
+    > button:focus-within > span {
       border-bottom-width: 1px;
       border-color: #00000020;
       border-top-width: 1px;
       margin-bottom: -1px;
       margin-top: -1px;
     }
 
+    // URLs
     > ul {
       display: none;
     }
   }
 
   &.expanded {
-    border-bottom-width: 1px;
-    border-color: #00000040;
-    border-top-width: 1px;
-    margin-bottom: -1px;
-    margin-top: -1px;
-
-    > span {
+    // Grid row
+    > button > span {
       font-weight: bold;
+      border-top-width: 1px;
+      margin-top: -1px;
     }
 
+    // URLs
     > ul {
+      border-bottom-width: 1px;
       display: block;
-      margin-top: 1rem;
+      margin-bottom: -1px;
     }
   }
 
@@ -87,29 +42,108 @@
     }
   }
 
+  > button:focus-within,
+  &:has(> button > span:hover) > button {
+    // Grid row
+    > span {
+      background-color: #00000020;
+    }
+  }
+
+  > button {
+    background-color: transparent;
+    border-width: 0;
+    color: inherit;
+    display: contents;
+    font-size: 1em;
+    line-height: 1rem;
+    width: 100%;
+
+    > span {
+      border-bottom-width: 0;
+      border-color: #00000040;
+      border-left-width: 0;
+      border-right-width: 0;
+      border-style: solid;
+      border-top-width: 0;
+      cursor: pointer;
+      display: inline-block;
+      font-size: 1em;
+      line-height: 1rem;
+      margin-bottom: 0;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: 0;
+      padding-bottom: 0;
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+      padding-top: 0;
+      text-align: left;
+      white-space: nowrap;
+
+      // Disposition icon's cell
+      &:first-child {
+        font-size: 0.75em;
+        padding-bottom: 0;
+        padding-right: 0;
+        padding-top: 0;
+      }
+
+      // Path's cell
+      &:last-child {
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        padding-bottom: 0;
+        padding-top: 0;
+
+        > span:first-child {
+          overflow: hidden;
+          padding-right: 0.5em;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+
   + .expanded {
     margin-bottom: 0;
     margin-top: 0;
   }
 
   > ul {
-    grid-column-end: span 2;
-    grid-column-start: 2;
+    border-bottom-width: 0;
+    border-color: #00000040;
+    border-left-width: 0;
+    border-right-width: 0;
+    border-style: solid;
+    border-top-width: 0;
+    grid-column-end: span 3;
+    grid-column-start: 1;
     list-style-type: none;
-    margin: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 1rem;
     padding-bottom: 1rem;
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
     padding-top: 0;
 
     > li {
+      font-size: 1em;
+      line-height: 1rem;
+      text-align: left;
+      white-space: nowrap;
       word-break: break-all;
     }
   }
 }
 
 .notFirst {
-  visibility: hidden;
+  color: transparent;
 }
 
 .reportsCount {