feat: replace synapse code snippet image with live twoslash-verified code block

.github/workflows/synapse-sdk-check.yml

@@ -0,0 +1,117 @@
+name: Synapse SDK version check
+
+on:
+  schedule:
+    - cron: '0 9 */5 * *' # Every 5 days at 9:00 UTC
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  check-synapse-sdk:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'npm'
+
+      - name: Get current synapse-sdk version
+        id: current
+        run: |
+          CURRENT=$(node -p "require('./package.json').dependencies['@filoz/synapse-sdk']")
+          echo "version=$CURRENT" >> "$GITHUB_OUTPUT"
+
+      - name: Check for latest synapse-sdk version
+        id: latest
+        run: |
+          LATEST=$(npm view @filoz/synapse-sdk version)
+          echo "version=$LATEST" >> "$GITHUB_OUTPUT"
+
+      - name: Install dependencies with latest synapse-sdk
+        id: install
+        run: |
+          npm install @filoz/synapse-sdk@latest --save
+          npm install
+
+      - name: Check if version changed
+        id: changed
+        run: |
+          INSTALLED=$(node -p "require('./node_modules/@filoz/synapse-sdk/package.json').version")
+          CURRENT="${{ steps.current.outputs.version }}"
+          if echo "$CURRENT" | grep -q "$INSTALLED"; then
+            echo "changed=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "changed=true" >> "$GITHUB_OUTPUT"
+            echo "installed=$INSTALLED" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Build project
+        if: steps.changed.outputs.changed == 'true'
+        id: build
+        continue-on-error: true
+        run: npm run build
+
+      - name: Create branch and PR on success
+        if: steps.changed.outputs.changed == 'true' && steps.build.outcome == 'success'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          BRANCH="chore/update-synapse-sdk-${{ steps.changed.outputs.installed }}"
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git checkout -b "$BRANCH"
+          git add package.json package-lock.json
+          git commit -m "chore: update @filoz/synapse-sdk to v${{ steps.changed.outputs.installed }}"
+          git push origin "$BRANCH"
+          gh pr create \
+            --title "chore: update @filoz/synapse-sdk to v${{ steps.changed.outputs.installed }}" \
+            --body "$(cat <<'EOF'
+          ## Summary
+          - Automated update of `@filoz/synapse-sdk` from ${{ steps.current.outputs.version }} to v${{ steps.changed.outputs.installed }}
+          - Build passed with the new version (twoslash type-checked the code snippet at build time)
+
+          ## Test plan
+          - [ ] Verify the warm storage service page renders correctly
+          - [ ] Test the copy code snippet button
+
+          > Auto-generated by the Synapse SDK version check workflow
+          EOF
+          )"
+
+      - name: Create issue on build failure
+        if: steps.changed.outputs.changed == 'true' && steps.build.outcome == 'failure'
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # Check for existing open issue
+          EXISTING=$(gh issue list --label "synapse-sdk-update" --state open --json number --jq '.[0].number')
+          if [ -n "$EXISTING" ]; then
+            gh issue comment "$EXISTING" --body "Build still failing with @filoz/synapse-sdk v${{ steps.changed.outputs.installed }} (checked on $(date -u +%Y-%m-%d))"
+          else
+            gh issue create \
+              --title "Build broken with @filoz/synapse-sdk v${{ steps.changed.outputs.installed }}" \
+              --label "synapse-sdk-update,bug" \
+              --body "$(cat <<'EOF'
+          ## Description
+          The automated Synapse SDK version check detected that updating `@filoz/synapse-sdk` from ${{ steps.current.outputs.version }} to v${{ steps.changed.outputs.installed }} causes the build to fail.
+
+          This likely means the SDK has introduced breaking API changes that affect the code snippet on the warm storage service page.
+
+          ## Action required
+          - [ ] Review the [Synapse SDK changelog](https://github.com/FilOzone/synapse-sdk/releases)
+          - [ ] Update `src/app/warm-storage-service/data/synapse-code-snippet.ts` to match the new API
+          - [ ] Update `@filoz/synapse-sdk` in package.json
+          - [ ] Verify the build passes
+
+          > Auto-generated by the Synapse SDK version check workflow
+          EOF
+          )"
+          fi

next.config.ts

@@ -15,6 +15,7 @@ const markdownRule = {
 
 const nextConfig: NextConfig = {
   typedRoutes: true,
+  serverExternalPackages: ['twoslash', '@typescript/vfs'],
   images: {
     qualities: [75, 100],
   },