anthropics · WebWelho · Mar 9, 2026 · Mar 9, 2026 · Mar 9, 2026 · Mar 9, 2026
diff --git a/.github/workflows/deploy-websites.yml b/.github/workflows/deploy-websites.yml
@@ -0,0 +1,335 @@
+name: Deploy Client Websites to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+      - master
+      - 'claude/**'
+    paths:
+      - '*-website/**'
+      - '.github/workflows/deploy-websites.yml'
+
+  # Mahdollistaa manuaalisen ajon
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  pull-requests: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Find all website folders
+        id: find-sites
+        run: |
+          SITES=$(find . -maxdepth 1 -type d -name '*-website' | sed 's|^\./||' | sort)
+          echo "Found sites:"
+          echo "$SITES"
+          echo "sites<<EOF" >> $GITHUB_OUTPUT
+          echo "$SITES" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
+      - name: Build GitHub Pages structure
+        run: |
+          mkdir -p _site
+
+          # Copy each website folder into _site/
+          for dir in $(find . -maxdepth 1 -type d -name '*-website' | sed 's|^\./||'); do
+            echo "Copying $dir..."
+            cp -r "$dir" "_site/$dir"
+          done
+
+          # Generate the portfolio index page
+          cat > _site/index.html << 'INDEXEOF'
+          <!DOCTYPE html>
+          <html lang="fi">
+          <head>
+            <meta charset="UTF-8" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <title>Sivustoportfolio – Esikatselut</title>
+            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet" />
+            <style>
+              *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+              :root {
+                --gold: #C9A84C;
+                --dark: #0F0F0F;
+                --dark-2: #1A1A1A;
+                --dark-3: #242424;
+                --gray: #6B6B6B;
+                --gray-light: #A0A0A0;
+              }
+              body {
+                font-family: 'Inter', sans-serif;
+                background: var(--dark);
+                color: #fff;
+                min-height: 100vh;
+              }
+              header {
+                padding: 3rem 2rem;
+                border-bottom: 1px solid rgba(255,255,255,0.07);
+                background: var(--dark-2);
+              }
+              .header-inner {
+                max-width: 1100px;
+                margin: 0 auto;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                flex-wrap: wrap;
+                gap: 1rem;
+              }
+              .logo-top { font-size: 0.65rem; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; font-weight: 600; }
+              .logo-bottom { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; }
+              .header-desc { color: var(--gray-light); font-size: 0.9rem; }
+              main { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+              h2 {
+                font-family: 'Playfair Display', serif;
+                font-size: 1.8rem;
+                margin-bottom: 0.5rem;
+              }
+              .subtitle { color: var(--gray-light); font-size: 0.9rem; margin-bottom: 2.5rem; }
+              .sites-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+                gap: 1.5rem;
+              }
+              .site-card {
+                background: var(--dark-2);
+                border: 1px solid rgba(255,255,255,0.07);
+                border-radius: 4px;
+                overflow: hidden;
+                transition: border-color 0.3s, transform 0.3s;
+              }
+              .site-card:hover {
+                border-color: rgba(201,168,76,0.4);
+                transform: translateY(-4px);
+              }
+              .site-preview {
+                height: 180px;
+                background: var(--dark-3);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 3rem;
+                position: relative;
+                overflow: hidden;
+              }
+              .site-preview iframe {
+                position: absolute;
+                inset: 0;
+                width: 200%;
+                height: 200%;
+                transform: scale(0.5);
+                transform-origin: top left;
+                border: none;
+                pointer-events: none;
+              }
+              .site-info { padding: 1.25rem; }
+              .site-name {
+                font-weight: 700;
+                font-size: 1rem;
+                margin-bottom: 0.25rem;
+              }
+              .site-path {
+                color: var(--gray);
+                font-size: 0.78rem;
+                font-family: monospace;
+                margin-bottom: 1rem;
+              }
+              .site-actions { display: flex; gap: 0.75rem; }
+              .btn-open {
+                flex: 1;
+                background: var(--gold);
+                color: #0F0F0F;
+                border: none;
+                padding: 0.65rem 1rem;
+                font-weight: 700;
+                font-size: 0.85rem;
+                border-radius: 3px;
+                text-decoration: none;
+                text-align: center;
+                transition: background 0.2s;
+                cursor: pointer;
+              }
+              .btn-open:hover { background: #E8C96B; }
+              .btn-copy {
+                background: var(--dark-3);
+                color: var(--gray-light);
+                border: 1px solid rgba(255,255,255,0.1);
+                padding: 0.65rem 1rem;
+                font-size: 0.85rem;
+                border-radius: 3px;
+                cursor: pointer;
+                transition: border-color 0.2s, color 0.2s;
+                font-family: 'Inter', sans-serif;
+              }
+              .btn-copy:hover { border-color: var(--gold); color: var(--gold); }
+              .btn-copy.copied { color: #4ade80; border-color: #4ade80; }
+              .empty-state {
+                text-align: center;
+                padding: 4rem 2rem;
+                color: var(--gray);
+              }
+              .empty-icon { font-size: 3rem; margin-bottom: 1rem; }
+              footer {
+                text-align: center;
+                padding: 2rem;
+                color: var(--gray);
+                font-size: 0.82rem;
+                border-top: 1px solid rgba(255,255,255,0.06);
+                margin-top: 4rem;
+              }
+            </style>
+          </head>
+          <body>
+            <header>
+              <div class="header-inner">
+                <div>
+                  <div class="logo-top">Portfolio</div>
+                  <div class="logo-bottom">Asiakassivustot</div>
+                </div>
+                <div class="header-desc">Kaikki asiakkaille tehdyt sivustot yhdessä paikassa</div>
+              </div>
+            </header>
+
+            <main>
+              <h2>Sivustoesikatselut</h2>
+              <p class="subtitle">Klikkaa "Avaa esikatselu" ja lähetä linkki suoraan asiakkaalle.</p>
+
+              <div class="sites-grid" id="sitesGrid">
+                <!-- Populated by JS -->
+              </div>
+            </main>
+
+            <footer>Päivitetty automaattisesti GitHub Actionsin kautta</footer>
+
+            <script>
+              const BASE = window.location.origin + window.location.pathname.replace('index.html', '').replace(/\/$/, '');
+
+              // Scan for known sites by fetching directory listing
+              // Sites are injected at build time via the workflow
+              const SITES = __SITES_JSON__;
+
+              const grid = document.getElementById('sitesGrid');
+
+              if (!SITES || SITES.length === 0) {
+                grid.innerHTML = '<div class="empty-state"><div class="empty-icon">📁</div><p>Ei sivustoja vielä. Luo ensimmäinen <code>*-website/</code> kansio!</p></div>';
+              } else {
+                SITES.forEach(site => {
+                  const url = BASE + '/' + site + '/index.html';
+                  const label = site
+                    .replace(/-website$/, '')
+                    .replace(/-/g, ' ')
+                    .replace(/\b\w/g, c => c.toUpperCase());
+
+                  grid.innerHTML += `
+                    <div class="site-card">
+                      <div class="site-preview">🌐</div>
+                      <div class="site-info">
+                        <div class="site-name">${label}</div>
+                        <div class="site-path">${site}/index.html</div>
+                        <div class="site-actions">
+                          <a class="btn-open" href="${url}" target="_blank">Avaa esikatselu →</a>
+                          <button class="btn-copy" onclick="copyLink('${url}', this)">Kopioi linkki</button>
+                        </div>
+                      </div>
+                    </div>`;
+                });
+              }
+
+              function copyLink(url, btn) {
+                navigator.clipboard.writeText(url).then(() => {
+                  btn.textContent = '✓ Kopioitu!';
+                  btn.classList.add('copied');
+                  setTimeout(() => {
+                    btn.textContent = 'Kopioi linkki';
+                    btn.classList.remove('copied');
+                  }, 2000);
+                });
+              }
+            </script>
+          </body>
+          </html>
+          INDEXEOF
+
+          # Inject the sites list into index.html
+          SITES_JSON="["
+          FIRST=true
+          for dir in $(find . -maxdepth 1 -type d -name '*-website' | sed 's|^\./||' | sort); do
+            if [ "$FIRST" = true ]; then FIRST=false; else SITES_JSON+=","; fi
+            SITES_JSON+="\"$dir\""
+          done
+          SITES_JSON+="]"
+
+          sed -i "s|__SITES_JSON__|$SITES_JSON|g" _site/index.html
+          echo "Built _site/ with sites: $SITES_JSON"
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: _site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+  comment-pr:
+    runs-on: ubuntu-latest
+    needs: deploy
+    if: github.event_name == 'push'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Find open PR for this branch
+        id: find-pr
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR=$(gh pr list --head "${{ github.ref_name }}" --json number --jq '.[0].number // empty')
+          echo "pr=$PR" >> $GITHUB_OUTPUT
+
+      - name: Build and post preview comment
+        if: steps.find-pr.outputs.pr != ''
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PAGES_URL: ${{ needs.deploy.outputs.page_url }}
+        run: |
+          PR="${{ steps.find-pr.outputs.pr }}"
+          BASE_URL="${PAGES_URL%/}"
+
+          COMMENT="## 🌐 Sivuston esikatselu\n\n"
+          COMMENT+="| Asiakas | Live-linkki | Kopioi |\n"
+          COMMENT+="|---------|-------------|--------|\n"
+
+          for dir in $(find . -maxdepth 1 -type d -name '*-website' | sed 's|^\./||' | sort); do
+            LABEL=$(echo "$dir" | sed 's/-website$//' | sed 's/-/ /g')
+            URL="$BASE_URL/$dir/"
+            COMMENT+="| **$LABEL** | [Avaa esikatselu →]($URL) | \`$URL\` |\n"
+          done
+
+          COMMENT+="\n---\n📁 [Kaikki sivustot]($BASE_URL) | Päivitetty: $(date '+%d.%m.%Y %H:%M')"
+
+          # Delete old preview comments and post new
+          gh pr comment "$PR" \
+            --body "$(echo -e "$COMMENT")"
diff --git a/lvikruunu-website/.gitignore b/lvikruunu-website/.gitignore
@@ -0,0 +1 @@
+node_modules/