Copilot/setup sentry nextjs (#58)
* Revise portfolio: warm brown theme, elegant typography, optimized analytics tracking (#55) * Initial plan * Update color theme to warm brown and off-white, add elegant fonts, fix analytics tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix 404 page integration with warm theme, update admin console colors, fix font loading Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Address code review feedback: fix navigation, add utils, improve tracking Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Fix accessibility and memory leak issues from code review Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * chore: Code cleanup, add Sentry.io monitoring, and documentation (#56) * Initial plan * Remove unused code and clean up console statements Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Remove unused components and fix type issues Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Wrap console.warn in development check Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Integrate Sentry.io monitoring and add text editing documentation Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * Initial plan * feat: Add Sentry configuration files and example pages - Add sentry.server.config.ts and sentry.edge.config.ts - Update instrumentation.ts with onRequestError export - Update instrumentation-client.ts with onRouterTransitionStart export - Update global-error.tsx to capture exceptions with Sentry - Create Sentry example page at app/sentry-example-page/page.tsx - Create Sentry example API route at app/api/sentry-example-api/route.ts Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * feat: Update middleware to allow Sentry example page and fix deprecated API - Update middleware to exclude /sentry-example-page from locale routing - Remove deprecated startTransaction API from Sentry example page - Use consistent DSN configuration with fallback values Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> * refactor: Improve Sentry configuration with environment-based sampling - Add comments explaining DSN fallback values - Use environment-based tracesSampleRate (10% in production, 100% in dev) - Address code review feedback for production-safe configuration Co-authored-by: denshooter <44590296+denshooter@users.noreply.github.com> --------- Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
denshooter
139
app/globals.css
139
app/globals.css
@@ -2,29 +2,27 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
|
||||
|
||||
:root {
|
||||
/* Organic Modern Palette */
|
||||
--background: #fdfcf8; /* Cream */
|
||||
--foreground: #292524; /* Warm Grey */
|
||||
--card: rgba(255, 255, 255, 0.6);
|
||||
--card-foreground: #292524;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #292524;
|
||||
--primary: #292524;
|
||||
--primary-foreground: #fdfcf8;
|
||||
--secondary: #e7e5e4;
|
||||
--secondary-foreground: #292524;
|
||||
--muted: #f5f5f4;
|
||||
--muted-foreground: #78716c;
|
||||
--accent: #f3f1e7; /* Sand */
|
||||
--accent-foreground: #292524;
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #fdfcf8;
|
||||
--border: #e7e5e4;
|
||||
--input: #e7e5e4;
|
||||
--ring: #a7f3d0; /* Mint ring */
|
||||
/* Warm Brown & Off-White Palette */
|
||||
--background: #faf8f3; /* Warm off-white */
|
||||
--foreground: #3e2723; /* Rich brown */
|
||||
--card: rgba(255, 252, 245, 0.7);
|
||||
--card-foreground: #3e2723;
|
||||
--popover: #fffcf5;
|
||||
--popover-foreground: #3e2723;
|
||||
--primary: #5d4037; /* Medium brown */
|
||||
--primary-foreground: #faf8f3;
|
||||
--secondary: #d7ccc8; /* Light taupe */
|
||||
--secondary-foreground: #3e2723;
|
||||
--muted: #efebe9; /* Very light brown */
|
||||
--muted-foreground: #795548; /* Muted brown */
|
||||
--accent: #bcaaa4; /* Warm taupe */
|
||||
--accent-foreground: #3e2723;
|
||||
--destructive: #d84315; /* Warm red-brown */
|
||||
--destructive-foreground: #faf8f3;
|
||||
--border: #d7ccc8;
|
||||
--input: #efebe9;
|
||||
--ring: #a1887f; /* Warm brown ring */
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
@@ -42,8 +40,8 @@ body {
|
||||
|
||||
/* Custom Selection */
|
||||
::selection {
|
||||
background: #a7f3d0; /* Mint */
|
||||
color: #292524;
|
||||
background: var(--primary); /* Rich brown for better contrast */
|
||||
color: var(--primary-foreground); /* Off-white */
|
||||
}
|
||||
|
||||
/* Smooth Scrolling */
|
||||
@@ -53,35 +51,35 @@ html {
|
||||
|
||||
/* Liquid Glass Effects */
|
||||
.glass-panel {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
background: rgba(250, 248, 243, 0.5);
|
||||
backdrop-filter: blur(12px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(120%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid rgba(215, 204, 200, 0.5);
|
||||
box-shadow: 0 8px 32px rgba(62, 39, 35, 0.08);
|
||||
will-change: backdrop-filter;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
background: rgba(255, 252, 245, 0.8);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid rgba(215, 204, 200, 0.6);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.03),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.02),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.5);
|
||||
0 4px 6px -1px rgba(62, 39, 35, 0.04),
|
||||
0 2px 4px -1px rgba(62, 39, 35, 0.03),
|
||||
inset 0 0 20px rgba(255, 252, 245, 0.5);
|
||||
transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
will-change: transform, box-shadow;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 252, 245, 0.9);
|
||||
box-shadow:
|
||||
0 20px 25px -5px rgba(0, 0, 0, 0.08),
|
||||
0 10px 10px -5px rgba(0, 0, 0, 0.02),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
0 20px 25px -5px rgba(62, 39, 35, 0.1),
|
||||
0 10px 10px -5px rgba(62, 39, 35, 0.04),
|
||||
inset 0 0 20px rgba(255, 252, 245, 0.8);
|
||||
transform: translateY(-4px);
|
||||
border-color: #ffffff;
|
||||
border-color: rgba(215, 204, 200, 0.8);
|
||||
}
|
||||
|
||||
/* Typography & Headings */
|
||||
@@ -91,16 +89,17 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-playfair), Georgia, serif;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 700;
|
||||
color: #292524;
|
||||
color: #3e2723;
|
||||
}
|
||||
|
||||
/* Improve text contrast */
|
||||
/* Improve text contrast - using foreground variable for WCAG AA compliance */
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
color: #44403c;
|
||||
color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep functionality */
|
||||
@@ -111,11 +110,11 @@ div {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d6d3d1;
|
||||
background: #bcaaa4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a29e;
|
||||
background: #a1887f;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
@@ -153,30 +152,40 @@ div {
|
||||
|
||||
/* Markdown Specifics for Blog/Projects */
|
||||
.markdown h1 {
|
||||
@apply text-4xl font-bold mb-6 text-stone-900 tracking-tight;
|
||||
@apply text-4xl font-bold mb-6 tracking-tight;
|
||||
color: #3e2723;
|
||||
}
|
||||
.markdown h2 {
|
||||
@apply text-2xl font-semibold mt-8 mb-4 text-stone-900 tracking-tight;
|
||||
@apply text-2xl font-semibold mt-8 mb-4 tracking-tight;
|
||||
color: #3e2723;
|
||||
}
|
||||
.markdown p {
|
||||
@apply mb-4 leading-relaxed text-stone-700;
|
||||
@apply mb-4 leading-relaxed;
|
||||
color: #4e342e;
|
||||
}
|
||||
.markdown a {
|
||||
@apply text-stone-900 underline decoration-liquid-mint decoration-2 underline-offset-2 hover:text-black transition-colors duration-300;
|
||||
@apply underline decoration-2 underline-offset-2 hover:opacity-80 transition-colors duration-300;
|
||||
color: #5d4037;
|
||||
text-decoration-color: #a1887f;
|
||||
}
|
||||
.markdown ul {
|
||||
@apply list-disc list-inside mb-4 space-y-2 text-stone-700;
|
||||
@apply list-disc list-inside mb-4 space-y-2;
|
||||
color: #4e342e;
|
||||
}
|
||||
.markdown code {
|
||||
@apply bg-stone-100 px-1.5 py-0.5 rounded text-sm text-stone-900 font-mono;
|
||||
@apply px-1.5 py-0.5 rounded text-sm font-mono;
|
||||
background: #efebe9;
|
||||
color: #3e2723;
|
||||
}
|
||||
.markdown pre {
|
||||
@apply bg-stone-900 text-stone-50 p-4 rounded-xl overflow-x-auto mb-6;
|
||||
@apply p-4 rounded-xl overflow-x-auto mb-6;
|
||||
background: #3e2723;
|
||||
color: #faf8f3;
|
||||
}
|
||||
|
||||
/* Admin Dashboard Styles - Organic Modern */
|
||||
/* Admin Dashboard Styles - Warm Brown Theme */
|
||||
.animated-bg {
|
||||
background: #fdfcf8;
|
||||
background: #faf8f3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -186,30 +195,30 @@ div {
|
||||
}
|
||||
|
||||
.admin-glass {
|
||||
background: rgba(253, 252, 248, 0.9);
|
||||
background: rgba(250, 248, 243, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid #e7e5e4;
|
||||
color: #292524;
|
||||
border-bottom: 1px solid #d7ccc8;
|
||||
color: #3e2723;
|
||||
}
|
||||
|
||||
.admin-glass-light {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e7e5e4;
|
||||
color: #292524;
|
||||
background: #fffcf5;
|
||||
border: 1px solid #d7ccc8;
|
||||
color: #3e2723;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 1px 2px rgba(62, 39, 35, 0.05);
|
||||
}
|
||||
|
||||
.admin-glass-light:hover {
|
||||
background: #fdfcf8;
|
||||
border-color: #d6d3d1;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
background: #faf8f3;
|
||||
border-color: #bcaaa4;
|
||||
box-shadow: 0 4px 6px rgba(62, 39, 35, 0.08);
|
||||
}
|
||||
|
||||
.admin-glass-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e7e5e4;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
color: #292524;
|
||||
background: #fffcf5;
|
||||
border: 1px solid #d7ccc8;
|
||||
box-shadow: 0 4px 6px -1px rgba(62, 39, 35, 0.06);
|
||||
color: #3e2723;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user