Fix tags on release and website modals

.github/workflows/release-interact.yml

@@ -133,8 +133,10 @@ jobs:
           git config user.name "github-actions[bot]"
           git add .
           git commit -m "chore: bump @wix/interact to ${{ steps.get_version.outputs.version }}"
-          git tag "interact@${{ steps.get_version.outputs.version }}"
-          git push --follow-tags origin ${{ steps.release_branch.outputs.name }}
+          TAG="interact@${{ steps.get_version.outputs.version }}"
+          git tag -a "$TAG" -m "chore: release @wix/interact ${{ steps.get_version.outputs.version }}"
+          git push origin ${{ steps.release_branch.outputs.name }}
+          git push origin "$TAG"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/release-motion-presets.yml

@@ -94,8 +94,10 @@ jobs:
           git config user.name "github-actions[bot]"
           git add .
           git commit -m "chore: bump @wix/motion-presets to ${{ steps.get_version.outputs.version }}"
-          git tag "motion-presets@${{ steps.get_version.outputs.version }}"
-          git push --follow-tags origin release
+          TAG="motion-presets@${{ steps.get_version.outputs.version }}"
+          git tag -a "$TAG" -m "chore: release @wix/motion-presets ${{ steps.get_version.outputs.version }}"
+          git push origin release
+          git push origin "$TAG"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/release-motion.yml

@@ -115,8 +115,10 @@ jobs:
           git config user.name "github-actions[bot]"
           git add .
           git commit -m "chore: bump @wix/motion to ${{ steps.get_version.outputs.version }}"
-          git tag "motion@${{ steps.get_version.outputs.version }}"
-          git push --follow-tags origin ${{ steps.release_branch.outputs.name }}
+          TAG="motion@${{ steps.get_version.outputs.version }}"
+          git tag -a "$TAG" -m "chore: release @wix/motion ${{ steps.get_version.outputs.version }}"
+          git push origin ${{ steps.release_branch.outputs.name }}
+          git push origin "$TAG"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/sync-release-tags.yml

@@ -0,0 +1,66 @@
+name: Sync Release Tags on Master
+
+# Release PRs are squash-merged, so tags created on the release branch do not
+# land on master. Re-point (or create) package tags on the merge commit.
+on:
+  push:
+    branches: [master]
+
+permissions:
+  contents: write
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  sync-tags:
+    if: "contains(github.event.head_commit.message, 'chore: bump @wix/')"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create or update package tags on master
+        run: |
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+
+          create_or_update_tag() {
+            local tag_prefix="$1"
+            local pkg_path="$2"
+            local version tag remote_sha head_sha
+
+            version=$(node -p "require('./${pkg_path}/package.json').version")
+            tag="${tag_prefix}@${version}"
+            head_sha=$(git rev-parse HEAD)
+
+            if git ls-remote --tags origin "refs/tags/${tag}" | grep -q .; then
+              remote_sha=$(git ls-remote --tags origin "refs/tags/${tag}" | awk '{print $1}')
+              if [ "$remote_sha" = "$head_sha" ]; then
+                echo "Tag ${tag} already on master HEAD, skipping"
+                return
+              fi
+              echo "Moving tag ${tag} to master HEAD"
+              git tag -fa "${tag}" -m "chore: release @wix/${tag_prefix} ${version}"
+              git push origin "refs/tags/${tag}" --force
+            else
+              echo "Creating tag ${tag} on master"
+              git tag -a "${tag}" -m "chore: release @wix/${tag_prefix} ${version}"
+              git push origin "${tag}"
+            fi
+          }
+
+          changed_files=$(git diff-tree --no-commit-id --name-only -r HEAD)
+
+          if echo "$changed_files" | grep -q '^packages/interact/package.json$'; then
+            create_or_update_tag interact packages/interact
+          fi
+          if echo "$changed_files" | grep -q '^packages/motion/package.json$'; then
+            create_or_update_tag motion packages/motion
+          fi
+          if echo "$changed_files" | grep -q '^packages/motion-presets/package.json$'; then
+            create_or_update_tag motion-presets packages/motion-presets
+          fi

apps/website/assets/js/modal.js

@@ -10,6 +10,7 @@ let cmEditor = null;
 let cmWrapper = null;
 let originalSource = '';
 let htmlSource = '';
+let htmlPath = '';
 let isCodeMode = false;
 
 const CLOSE_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>`;
@@ -172,6 +173,42 @@ function resetCode() {
   htmlSource = originalSource;
 }
 
+function getExampleBaseHref(path) {
+  return new URL('./', new URL(path, location.href)).href;
+}
+
+function withBaseHref(html, baseHref) {
+  if (/<base\s/i.test(html)) return html;
+  if (/<head[^>]*>/i.test(html)) {
+    return html.replace(/<head[^>]*>/i, `$&\n    <base href="${baseHref}">`);
+  }
+  return `<base href="${baseHref}">\n${html}`;
+}
+
+function attachIframeEscapeListener() {
+  iframe.addEventListener('load', function onLoad() {
+    try {
+      iframe.contentDocument.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') closeModal();
+      });
+    } catch {
+      /* cross-origin */
+    }
+    iframe.removeEventListener('load', onLoad);
+  });
+}
+
+function loadPreviewFromSource() {
+  if (htmlSource === originalSource) {
+    iframe.removeAttribute('srcdoc');
+    iframe.src = htmlPath + `?_=${Date.now()}`;
+  } else {
+    iframe.removeAttribute('src');
+    iframe.srcdoc = withBaseHref(htmlSource, getExampleBaseHref(htmlPath));
+  }
+  attachIframeEscapeListener();
+}
+
 function toggleCodeMode() {
   isCodeMode = !isCodeMode;
 
@@ -190,8 +227,7 @@ function toggleCodeMode() {
   } else {
     closeSearch();
     htmlSource = cmEditor.getValue();
-    iframe.removeAttribute('src');
-    iframe.srcdoc = htmlSource;
+    loadPreviewFromSource();
     previewPanel.classList.remove('hidden');
     codePanel.classList.remove('visible');
     codeBtn.classList.remove('active');
@@ -277,7 +313,7 @@ function searchPrev() {
   highlightCurrent();
 }
 
-export function openModal(title, htmlPath) {
+export function openModal(title, htmlPathArg) {
   if (!overlay) buildModalDOM();
 
   isCodeMode = false;
@@ -286,22 +322,13 @@ export function openModal(title, htmlPath) {
   codeBtn.classList.remove('active');
 
   titleEl.textContent = title;
+  htmlPath = htmlPathArg;
   iframe.src = htmlPath + `?_=${Date.now()}`;
   iframe.removeAttribute('srcdoc');
 
-  // Listen for Escape inside the modal iframe (it captures focus on click)
-  iframe.addEventListener('load', function onLoad() {
-    try {
-      iframe.contentDocument.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') closeModal();
-      });
-    } catch {
-      /* cross-origin */
-    }
-    iframe.removeEventListener('load', onLoad);
-  });
+  attachIframeEscapeListener();
 
-  fetch(htmlPath)
+  fetch(htmlPathArg)
     .then((r) => r.text())
     .then((text) => {
       originalSource = text;
@@ -331,6 +358,7 @@ export function closeModal() {
     iframe.removeAttribute('srcdoc');
     originalSource = '';
     htmlSource = '';
+    htmlPath = '';
     isCodeMode = false;
     previewPanel.classList.remove('hidden');
     codePanel.classList.remove('visible');