@raketa-cloud/admin 1.9.7 → 1.10.0

package/dist/application.css

@@ -1694,6 +1694,10 @@ select {
   top: 0.125rem;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-6 {
   top: 1.5rem;
 }
@@ -1755,10 +1759,6 @@ select {
   margin-left: 0.375rem;
 }
 
-.ml-10 {
-  margin-left: 2.5rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -2039,10 +2039,6 @@ select {
   align-items: center;
 }
 
-.justify-start {
-  justify-content: flex-start;
-}
-
 .justify-end {
   justify-content: flex-end;
 }
@@ -2075,6 +2071,10 @@ select {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -3440,6 +3440,14 @@ body {
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .md\:border-l {
+    border-left-width: 1px;
+  }
+
+  .md\:pl-8 {
+    padding-left: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -3455,6 +3463,10 @@ body {
     display: flex;
   }
 
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.9.7",
+  "version": "1.10.0",
   "main": "src/index.js",
   "files": [
     "src/",

package/src/helpers/content_tasks_helper.js

@@ -1,7 +1,7 @@
 const WORKFLOWS_MAP = {
-  lokalise_to_ai_rt_hum: "Lokalise: AI translation (DeepL) & Human review",
+  lokalise_tt_ai_rt_hum: "Lokalise: AI translation (Pro AI) & Human review",
   lokalise_tt_hum: "Lokalise: Human translation",
-  lokalise_tt_ai: "Lokalise: AI translation",
+  lokalise_tt_ai: "Lokalise: AI translation (Pro AI)",
 };
 
 export const workflowsMap = (workflowType) => {

package/src/tests/helpers/content_tasks_helper.test.js

@@ -8,13 +8,15 @@ import {
 describe("content_tasks_helper", () => {
   describe("workflowsMap", () => {
     test("returns correct workflow name for known type", () => {
-      expect(workflowsMap("lokalise_to_ai_rt_hum")).toBe(
-        "Lokalise: AI translation (DeepL) & Human review",
+      expect(workflowsMap("lokalise_tt_ai_rt_hum")).toBe(
+        "Lokalise: AI translation (Pro AI) & Human review",
       );
       expect(workflowsMap("lokalise_tt_hum")).toBe(
         "Lokalise: Human translation",
       );
-      expect(workflowsMap("lokalise_tt_ai")).toBe("Lokalise: AI translation");
+      expect(workflowsMap("lokalise_tt_ai")).toBe(
+        "Lokalise: AI translation (Pro AI)",
+      );
     });
 
     test("returns 'Unknown workflow' for unknown type", () => {

package/src/views/resource_revisions/meta/_form.ejs

@@ -1,5 +1,26 @@
 <% form_for({ resource }, errors, (f) => { %>
-<form action="<%= `/${_context.locale}/${_context.resourceConfig.resourceType}_revisions/${resource.id}/meta` %>" method="POST" class="form">
+<form
+  action="<%= `/${_context.locale}/${_context.resourceConfig.resourceType}_revisions/${resource.id}/meta` %>"
+  method="POST"
+  class="form"
+  hx-on:input="
+    const title = this.querySelector('[name*=\'[title]\']')?.value || '';
+    const desc = this.querySelector('[name*=\'[description]\']')?.value || '';
+    document.querySelectorAll('web-opengraph-google, web-opengraph-linkedin, web-opengraph-x').forEach(el => {
+      el.setAttribute('title', title);
+      el.setAttribute('description', desc);
+    });
+  "
+  hx-on:image-changed="
+    try {
+      const data = typeof event.detail === 'string' ? JSON.parse(event.detail) : (event.detail || {});
+      const imgUrl = data?.image?.urls?.original || data?.urls?.original || '';
+      document.querySelectorAll('web-opengraph-google, web-opengraph-linkedin, web-opengraph-x').forEach(el => {
+        el.setAttribute('image', imgUrl);
+      });
+    } catch(e) {}
+  "
+>
   <%- f.field('resource.settings.meta.title', { required: true, label: "Meta title", hint: "Used for both meta and OpenGraph" }) %>
   <%- f.field('resource.settings.meta.description', { as: "textarea", required: true, label: "Meta description", hint: "Used for both meta and OpenGraph" }) %>
 
@@ -14,3 +35,27 @@
   </div>
 </form>
 <% }) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const hookPicker = () => {
+      const picker = document.querySelector('raketa-image-picker');
+      if (!picker) return;
+      const hiddenInput = picker.hiddenInput || document.querySelector('input[type="hidden"][name="resource[settings][meta][image]"]');
+      if (hiddenInput && !hiddenInput._hooked) {
+        hiddenInput._hooked = true;
+        const originalDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        Object.defineProperty(hiddenInput, 'value', {
+          get() { return originalDescriptor.get.call(hiddenInput); },
+          set(val) {
+            originalDescriptor.set.call(hiddenInput, val);
+            hiddenInput.setAttribute('value', val);
+            hiddenInput.dispatchEvent(new CustomEvent('image-changed', { bubbles: true, detail: val }));
+          }
+        });
+      }
+    };
+    hookPicker();
+    setTimeout(hookPicker, 300);
+  });
+</script>

package/src/views/resource_revisions/meta/edit_form.ejs

@@ -8,9 +8,75 @@
 
   <%- render_partial('../_nav.ejs', { resource, active: 'meta' }) %>
 
-  <div class="grid gap-4 md:grid-cols-3">
+  <%
+    const ogConfig = _context.globalConfig?.openGraphPreviews;
+    const networks = ogConfig?.networks || [];
+    const showSidebar = Array.isArray(networks) && networks.length > 0;
+  %>
+
+  <div class="<%= showSidebar ? 'grid gap-8 lg:grid-cols-2 items-start' : '' %>">
     <div>
       <%- render_partial('_form.ejs') %>
     </div>
+    <% if (showSidebar) { %>
+      <div class="sticky top-4 pb-8 md:border-l md:pl-8" id="meta-previews">
+        <h3 class="heading-2 mb-4 flex gap-1 items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-raketa-primary">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+          </svg>
+
+          Previews
+        </h3>
+
+        <% const pageURL = _context.remoteConfig.resourceUrl(resource, _context.resourceConfig.resourceType, _context.locale); %>
+        <% networks.forEach((network, index) => { %>
+          <% if (network === 'google') { %>
+            <h4 class="heading-3 mb-4">Google Search Result</h4>
+            <web-opengraph-google
+              title="<%= resource.settings?.meta?.title || '' %>"
+              description="<%= resource.settings?.meta?.description || '' %>"
+              url="<%= pageURL %>"
+              image="<%= resource.settings?.meta?.image?.image?.urls?.original || resource.settings?.meta?.image?.urls?.original || '' %>"
+              site-name="<%= ogConfig?.siteName || '' %>"
+              favicon="<%= ogConfig?.faviconURL || '' %>"
+              date="Today"
+            ></web-opengraph-google>
+          <% } else if (network === 'linkedin') { %>
+            <h4 class="heading-3 mb-4">LinkedIn</h4>
+            <web-opengraph-linkedin
+              title="<%= resource.settings?.meta?.title || '' %>"
+              description="<%= resource.settings?.meta?.description || '' %>"
+              url="<%= pageURL %>"
+              image="<%= resource.settings?.meta?.image?.image?.urls?.original || resource.settings?.meta?.image?.urls?.original || '' %>"
+            ></web-opengraph-linkedin>
+          <% } else if (network === 'twitter') { %>
+            <h4 class="heading-3 mb-4">X/Twitter</h4>
+            <web-opengraph-x
+              title="<%= resource.settings?.meta?.title || '' %>"
+              description="<%= resource.settings?.meta?.description || '' %>"
+              url="<%= pageURL %>"
+              image="<%= resource.settings?.meta?.image?.image?.urls?.original || resource.settings?.meta?.image?.urls?.original || '' %>"
+            ></web-opengraph-x>
+          <% } %>
+
+          <% if (index < networks.length - 1) { %>
+            <hr class="my-4" />
+          <% } %>
+        <% }); %>
+      </div>
+    <% } %>
   </div>
 </div>
+
+<% if (showSidebar) { %>
+  <% if (networks.includes('google')) { %>
+    <script src="https://storage.googleapis.com/cdn-raketa-cloud/js/raketa-opengraph-google-webcomponent.umd.js?cache=20260925-2"></script>
+  <% } %>
+  <% if (networks.includes('linkedin')) { %>
+    <script src="https://storage.googleapis.com/cdn-raketa-cloud/js/raketa-opengraph-linkedin-webcomponent.umd.js?cache=20260925-2"></script>
+  <% } %>
+  <% if (networks.includes('twitter')) { %>
+    <script src="https://storage.googleapis.com/cdn-raketa-cloud/js/raketa-opengraph-x-webcomponent.umd.js?cache=20260925-2"></script>
+  <% } %>
+<% } %>

package/src/views/resources/translations/create_form.ejs

@@ -36,8 +36,8 @@
         <select name="resource[workflow][type]" id="workflow">
           <option value="">Default (no workflow)</option>
 
-          <option value="LOKALISE_TO_AI_RT_HUM" <%= resource.workflow?.type === 'LOKALISE_TO_AI_RT_HUM' ? 'selected' : '' %>>
-            <%= content_tasks.workflowsMap("LOKALISE_TO_AI_RT_HUM".toLowerCase()) %>
+          <option value="LOKALISE_TT_AI_RT_HUM" <%= resource.workflow?.type === 'LOKALISE_TT_AI_RT_HUM' ? 'selected' : '' %>>
+            <%= content_tasks.workflowsMap("LOKALISE_TT_AI_RT_HUM".toLowerCase()) %>
           </option>
 
           <option value="LOKALISE_TT_HUM" <%= resource.workflow?.type === 'LOKALISE_TT_HUM' ? 'selected' : '' %>>