snow-flow 3.4.39 → 3.5.1

package/website/README.md

@@ -60,7 +60,46 @@ Then open `http://localhost:8000` in your browser.
 
 ## Deployment
 
-The website is static HTML/CSS/JS and can be deployed to any static hosting service:
+### 🚀 Production (Google Cloud Run)
+
+**Live Website:** https://snow-flow-website-[hash]-ew.a.run.app
+
+**Automated CI/CD Pipeline:**
+- **Trigger:** Push to `main` branch on GitHub
+- **Build:** Google Cloud Build creates Docker image
+- **Deploy:** Automatically deploys to Cloud Run
+- **Monitor:** Health checks and logging enabled
+
+### Docker Deployment
+
+```bash
+# Build the Docker image
+docker build -t snow-flow-website .
+
+# Run locally
+docker run -p 8080:80 snow-flow-website
+
+# Test health check
+curl http://localhost:8080/health
+```
+
+### Cloud Run Manual Deploy
+
+```bash
+# Set project
+gcloud config set project YOUR_PROJECT_ID
+
+# Deploy directly from source
+gcloud run deploy snow-flow-website \
+  --source . \
+  --region europe-west1 \
+  --allow-unauthenticated
+
+# Or use Cloud Build
+gcloud builds submit --config cloudbuild.yaml .
+```
+
+### Static Hosting Options
 
 ### GitHub Pages
 1. Push to GitHub repository

package/website/cloudbuild.yaml

@@ -0,0 +1,69 @@
+# Snow-Flow Website - Google Cloud Build Configuration
+steps:
+  # Build the Docker image
+  - name: 'gcr.io/cloud-builders/docker'
+    args: [
+      'build',
+      '-t', 'gcr.io/$PROJECT_ID/snow-flow-website:$COMMIT_SHA',
+      '-t', 'gcr.io/$PROJECT_ID/snow-flow-website:latest',
+      '--cache-from', 'gcr.io/$PROJECT_ID/snow-flow-website:latest',
+      '.'
+    ]
+    dir: 'website'
+
+  # Push the Docker image to Container Registry
+  - name: 'gcr.io/cloud-builders/docker'
+    args: ['push', 'gcr.io/$PROJECT_ID/snow-flow-website:$COMMIT_SHA']
+
+  - name: 'gcr.io/cloud-builders/docker'
+    args: ['push', 'gcr.io/$PROJECT_ID/snow-flow-website:latest']
+
+  # Deploy to Cloud Run
+  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
+    entrypoint: gcloud
+    args: [
+      'run', 'deploy', 'snow-flow-website',
+      '--image', 'gcr.io/$PROJECT_ID/snow-flow-website:$COMMIT_SHA',
+      '--region', 'europe-west1',
+      '--platform', 'managed',
+      '--allow-unauthenticated',
+      '--port', '80',
+      '--memory', '512Mi',
+      '--cpu', '1',
+      '--concurrency', '80',
+      '--max-instances', '10',
+      '--min-instances', '1',
+      '--set-env-vars', 'NODE_ENV=production',
+      '--timeout', '300'
+    ]
+
+  # Get the service URL
+  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
+    entrypoint: gcloud
+    args: [
+      'run', 'services', 'describe', 'snow-flow-website',
+      '--region', 'europe-west1',
+      '--format', 'value(status.url)'
+    ]
+
+# Build options
+options:
+  logging: CLOUD_LOGGING_ONLY
+  machineType: 'E2_HIGHCPU_8'
+  diskSizeGb: 100
+
+# Substitutions for environment-specific values
+substitutions:
+  _REGION: 'europe-west1'
+  _SERVICE_NAME: 'snow-flow-website'
+
+# Images to be pushed to Container Registry
+images:
+  - 'gcr.io/$PROJECT_ID/snow-flow-website:$COMMIT_SHA'
+  - 'gcr.io/$PROJECT_ID/snow-flow-website:latest'
+
+# Build timeout
+timeout: '1200s'
+
+# Tags for organization
+tags: ['snow-flow', 'website', 'production']

package/website/css/style.css

@@ -442,9 +442,38 @@ a.link-animated:hover::after {
 
 /* Removed gradient overlays - clean black background */
 
+/* Hero Noise Effect - Subtle Film Grain */
+.hero::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.025; /* Very subtle: 2.5% opacity */
+  z-index: 1;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='heroNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23heroNoise)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+  animation: noiseShift 8s steps(10) infinite;
+}
+
+@keyframes noiseShift {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-5%, -5%); }
+  20% { transform: translate(-10%, 5%); }
+  30% { transform: translate(5%, -10%); }
+  40% { transform: translate(-5%, 15%); }
+  50% { transform: translate(-10%, 5%); }
+  60% { transform: translate(15%, 0); }
+  70% { transform: translate(0, 10%); }
+  80% { transform: translate(-15%, 0); }
+  90% { transform: translate(10%, 5%); }
+}
+
 .hero-content {
   position: relative;
-  z-index: 1;
+  z-index: 2; /* Above the noise overlay */
   text-align: center;
   padding: var(--space-8);
 }
@@ -718,6 +747,7 @@ a.link-animated:hover::after {
   padding: var(--space-6);
   overflow-x: auto;
   position: relative;
+  white-space: pre-line; /* Preserve line breaks */
 }
 
 .code-block::before {
@@ -741,6 +771,7 @@ code {
   font-size: var(--font-sm);
   color: var(--gray-300);
   line-height: var(--leading-relaxed);
+  white-space: pre-line; /* Preserve line breaks */
 }
 
 /* =========================================
@@ -991,6 +1022,93 @@ code {
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 }
 
+/* =========================================
+   15.5. DOCUMENTATION TABS
+   ========================================= */
+.tabs-container {
+  margin-bottom: var(--space-8);
+}
+
+.tabs-nav {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+}
+
+.tab-btn {
+  padding: var(--space-3) var(--space-6);
+  border: none;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-weight: 500;
+  transition: all var(--duration-200) var(--ease-out);
+  position: relative;
+}
+
+.tab-btn:not(.active) {
+  background: var(--gray-200);
+  color: var(--black);
+}
+
+.tab-btn:not(.active):hover {
+  background: var(--gray-300);
+  transform: translateY(-2px);
+}
+
+.tab-btn.active {
+  background: var(--black);
+  color: var(--white);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}
+
+.tab-content {
+  display: none;
+  animation: fadeInUp var(--duration-300) var(--ease-out);
+}
+
+.tab-content.active {
+  display: block;
+}
+
+.tool-category {
+  background: var(--gray-50);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--gray-200);
+  transition: all var(--duration-200) var(--ease-out);
+}
+
+.tool-category:hover {
+  border-color: var(--gray-400);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.alert {
+  background: var(--yellow-100);
+  border: 1px solid var(--yellow-400);
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-6);
+}
+
+.issue {
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  border: 1px solid var(--red-300);
+  border-radius: var(--radius-md);
+  background: var(--red-50);
+}
+
+.step {
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  border-left: 4px solid var(--black);
+  background: var(--gray-50);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
 /* =========================================
    16. PRINT STYLES
    ========================================= */