feat(website): add starlight-contextual-menu integration and update dependencies (#264)

- Import and configure starlight-contextual-menu with specific actions
- Update package.json to include starlight-contextual-menu dependency
- Enhance website configuration with new contextual menu feature

Author: jumski

pkgs/website/astro.config.mjs

@@ -6,6 +6,7 @@ import starlightLinksValidator from 'starlight-links-validator';
 import starlightSidebarTopics from 'starlight-sidebar-topics';
 import robotsTxt from 'astro-robots-txt';
 import starlightLlmsTxt from 'starlight-llms-txt';
+import starlightContextualMenu from 'starlight-contextual-menu';
 import { fileURLToPath } from 'url';
 import path from 'path';
 
@@ -149,6 +150,9 @@ export default defineConfig({
             readingTime: true,
           },
         }),
+        starlightContextualMenu({
+          actions: ['copy', 'view', 'chatgpt', 'claude'],
+        }),
         starlightLlmsTxt({
           exclude: [
             'index',

pkgs/website/package.json

@@ -32,6 +32,7 @@
     "react-dom": "^19.1.1",
     "sharp": "^0.32.6",
     "starlight-blog": "^0.24.0",
+    "starlight-contextual-menu": "^0.1.5",
     "starlight-links-validator": "^0.14.3",
     "starlight-llms-txt": "^0.4.1",
     "starlight-sidebar-topics": "^0.6.0",

pkgs/website/src/components/CodeOverlay.astro

@@ -13,7 +13,7 @@
       🔗 Manual step coordination
     </div>
     <button class="reveal-button sl-button-primary" aria-label="Reveal 250+ lines of traditional code">
-      Click to review code ↓
+      Show me the boilerplate code ↓
     </button>
   </div>
 </div>
@@ -55,10 +55,13 @@
     font-weight: 900;
     color: var(--sl-color-text);
     margin-bottom: 1.5rem;
-    text-shadow: 0 4px 20px var(--sl-color-bg),
+    text-shadow: 0 12px 60px var(--sl-color-bg),
+                 0 10px 50px var(--sl-color-bg),
+                 0 8px 40px var(--sl-color-bg),
+                 0 6px 30px var(--sl-color-bg),
+                 0 4px 20px var(--sl-color-bg),
                  0 2px 12px var(--sl-color-bg),
-                 0 1px 6px var(--sl-color-bg),
-                 0 0 40px rgba(0, 123, 110, 0.6);
+                 0 0 80px rgba(0, 123, 110, 1);
   }
 
   .overlay-list {
@@ -67,10 +70,14 @@
     color: var(--sl-color-text);
     margin-bottom: 2rem;
     text-align: left;
-    text-shadow: 0 4px 20px var(--sl-color-bg),
+    font-weight: 600;
+    text-shadow: 0 12px 60px var(--sl-color-bg),
+                 0 10px 50px var(--sl-color-bg),
+                 0 8px 40px var(--sl-color-bg),
+                 0 6px 30px var(--sl-color-bg),
+                 0 4px 20px var(--sl-color-bg),
                  0 2px 12px var(--sl-color-bg),
-                 0 1px 6px var(--sl-color-bg),
-                 0 0 40px rgba(0, 123, 110, 0.6);
+                 0 0 80px rgba(0, 123, 110, 1);
   }
 
   /* Base button styling following Starlight's pattern */
@@ -91,8 +98,8 @@
     text-decoration: none;
 
     /* Glow and animation effects */
-    box-shadow: 0 8px 32px rgba(0, 123, 110, 0.6),
-                0 0 60px rgba(0, 123, 110, 0.4);
+    box-shadow: 0 8px 32px rgba(0, 123, 110, 0.4),
+                0 0 60px rgba(0, 123, 110, 0.25);
     animation: pulse-glow 2s ease-in-out infinite;
     position: relative;
     overflow: hidden;
@@ -105,12 +112,12 @@
 
   @keyframes pulse-glow {
     0%, 100% {
-      box-shadow: 0 8px 32px rgba(0, 123, 110, 0.6),
-                  0 0 60px rgba(0, 123, 110, 0.4);
+      box-shadow: 0 8px 32px rgba(0, 123, 110, 0.4),
+                  0 0 60px rgba(0, 123, 110, 0.25);
     }
     50% {
-      box-shadow: 0 8px 40px rgba(0, 123, 110, 0.8),
-                  0 0 80px rgba(0, 123, 110, 0.6);
+      box-shadow: 0 8px 40px rgba(0, 123, 110, 0.55),
+                  0 0 80px rgba(0, 123, 110, 0.4);
     }
   }
 
@@ -131,8 +138,8 @@
   .reveal-button.sl-button-primary:hover {
     color: var(--sl-color-black);
     transform: scale(1.08);
-    box-shadow: 0 12px 48px rgba(0, 123, 110, 0.7),
-                0 0 80px rgba(0, 123, 110, 0.6);
+    box-shadow: 0 8px 32px rgba(0, 123, 110, 0.4),
+                0 0 60px rgba(0, 123, 110, 0.25);
     animation: none;
   }
 
@@ -218,6 +225,12 @@
       display: none;
     }
 
+    .reveal-button.sl-button-primary {
+      font-size: 0.9rem;
+      padding: 0.8rem 1rem;
+      margin-bottom: 2rem;
+    }
+
     .reset-overlay-button {
       display: none !important;
     }

pkgs/website/src/styles/global.css

@@ -1,3 +1,9 @@
+/* Prevent horizontal overflow */
+html, body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
 /* Dark mode colors. */
 :root {
   --sl-color-accent-low: #002b26;
@@ -249,23 +255,26 @@ svg .secondary {
   position: fixed;
   bottom: 20px;
   right: 20px;
-  background: var(--sl-color-gray-4);
-  color: var(--sl-color-white) !important;
-  padding: 12px 16px;
+  background: var(--sl-color-accent);
+  color: #ffffff !important;
+  padding: 16px 20px;
   border-radius: 25px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   text-decoration: none;
   font-weight: bold;
   font-size: 1rem;
   z-index: 1000;
   transition: transform 0.4s ease, box-shadow 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
 }
 
 /* Force white text in both light and dark modes */
 :root .hire-sticker,
 :root[data-theme='light'] .hire-sticker,
 :root[data-theme='dark'] .hire-sticker {
-  color: var(--sl-color-white) !important;
+  color: #ffffff !important;
 }
 
 .hire-sticker::before {
@@ -278,7 +287,7 @@ svg .secondary {
   transform: translateY(-2px) scale(1.05);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
   text-decoration: none;
-  color: var(--sl-color-white) !important;
+  color: #ffffff !important;
   transition: transform 0.4s ease, box-shadow 0.2s ease;
 }