@raketa-cloud/admin 0.0.14 → 0.0.15

package/src/views/articles/show.ejs

@@ -0,0 +1,281 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <div class="flex items-center gap-4">
+      <h1 class="heading-1"><%= article.title %></h1>
+      <div class="flex flex-wrap items-center gap-1">
+        <% Object.keys(_context.locales).forEach(key => { %>
+        <% const { name, _code, flag} = _context.locales[key] %>
+        <% if (key === _context.locale) { %>
+        <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+        <% } else if (article.translations[key]) { %>
+        <a href="<%= `/${key}/articles/${article.translations[key].id}` %>">
+          <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="size-6 rounded-full border dark:border-neutral-700" />
+        </a>
+        <% } else { %>
+        <a href="<%= `/${_context.locale}/articles/${article.id}/translations/new?target_locale=${key}` %>">
+          <img title="<%= name %>" src="<%= flag %>" alt="<%= name %>" class="<%= [" transition-all ease-in-out duration-300 size-6 rounded-full border hover:opacity-100 dark:border-neutral-700", key === _context.locale ? "opacity-100" : "opacity-10"].join(" ") %>" />
+        </a>
+        <% } %>
+        <% }); %>
+      </div>
+    </div>
+
+    <div class="actions-toolbar">
+      <form method="POST" action="<%= `/${_context.locale}/articles/${article.id}/article_revisions` %>" class="inline-block">
+        <button type="submit" class="btn-primary">
+          Start revision
+        </button>
+      </form>
+
+      <a href="<%= `/${_context.locale}/articles/${article.id}/urls/new` %>" class="btn-text has-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+        </svg>
+
+        Change URL
+      </a>
+
+      <form action="<%= `/${_context.locale}/articles/${article.id}/clones` %>" method="post" class="inline-block">
+        <button type="submit" class="btn-text has-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
+          </svg>
+
+          Clone article
+        </button>
+      </form>
+
+      <a href="<%= `/${_context.locale}/articles/${article.id}/deletes/new` %>" class="btn-danger has-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+        </svg>
+
+        Delete article
+      </a>
+    </div>
+  </div>
+
+  <% if (revisions.length) { %>
+  <div class="pb-8">
+    <h4 class="pb-4 heading-3 flex items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
+        <path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" />
+        <path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
+      </svg>
+
+      Open revisions
+    </h4>
+
+    <table class="data-grid alt">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Editor</th>
+          <th>Last change</th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <% revisions.forEach((revision, idx)=> { %>
+        <tr class="border-b border-mono-25">
+          <td class="py-4 pl-2 w-full">
+            <div class="flex gap-1 items-center">
+              <% if (revision.meta && revision.meta.locked) { %>
+              <div title="<%= revision.meta.lockMessage %>">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                  <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <% } %>
+
+              <a href="/remote-login?redirect_to=/admin/article-revisions/<%= revision.id %>/builder" target="_blank" class="btn-text has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                <%= revision.title %>
+              </a>
+            </div>
+          </td>
+
+          <td class="whitespace-nowrap">
+            <div class="body-3 text-raketa-foreground/50">
+              <div class="flex items-center gap-1" title="Yana Dimitrova">
+                <img src="<%= revision.meta.operatorMeta.avatar %>" class="size-4 rounded-full">
+                <%= revision.meta.operatorMeta.name %>
+              </div>
+            </div>
+          </td>
+
+          <td class="whitespace-nowrap">
+            <div class="body-3 text-raketa-foreground/50">
+              <div class="flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+
+                <%= (new Date(revision.insertedAt)).toLocaleString() %>
+              </div>
+            </div>
+          </td>
+
+          <td class="whitespace-nowrap">
+            <div class="actions-toolbar justify-end">
+              <a href="/remote-login?redirect_to=/admin/article-revisions/<%= revision.id %>/builder" target="_blank" class="btn-text has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+                </svg>
+                Edit content
+              </a>
+
+              <a href="<%= `/${_context.locale}/article_revisions/${revision.id}/publishes/new` %>" class="btn-text has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+                </svg>
+
+                Publish
+              </a>
+
+              <details class="unstyled-details">
+                <summary class="cursor-pointer">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                  </svg>
+                </summary>
+
+                <div class="absolute border bg-raketa-background p-4 right-4 z-20 mt-2 flex flex-col gap-4 shadow-md rounded dark:border-neutral-500">
+                  <a href="<%= `/${_context.locale}/article_revisions/${revision.id}/general/edit` %>" class="btn-text has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z" />
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                    </svg>
+
+                    Edit settings
+                  </a>
+
+                  <a href="/remote-login?redirect_to=/admin/article-revisions/<%= revision.id %>/preview" target="_blank" class="btn-text has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                      <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>
+
+                    Preview
+                  </a>
+
+                  <% if (revision.meta && revision.meta.locked) { %>
+                  <form action="<%= `/${_context.locale}/article_revisions/${revision.id}/unlocks` %>" method="post" class="inline-flex gap-2 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-4">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                    </svg>
+                    <%- f.submit('Unlock', { class: 'btn-text' }) %>
+                  </form>
+                  <% } else { %>
+                  <a href="<%= `/${_context.locale}/article_revisions/${revision.id}/locks/new` %>" class="btn-text has-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
+                    </svg>
+                    Lock
+                  </a>
+                  <% } %>
+
+                  <button hx-delete="<%= `/${_context.locale}/article_revisions/${revision.id}` %>" hx-confirm="Are you sure?" type="button" class="btn-danger has-icon <%= revision.meta && revision.meta.locked ? 'cursor-not-allowed text-gray-400 pointer-events-none' : '' %>">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                    </svg>
+
+                    Delete
+                  </button>
+                </div>
+              </details>
+            </div>
+          </td>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+
+  <div>
+    <h4 class="pb-4 heading-3 items-center gap-2 flex">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-raketa-primary">
+        <path d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375Z" />
+        <path fill-rule="evenodd" d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087Zm6.163 3.75A.75.75 0 0 1 10 12h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+      </svg>
+
+      History of changes
+    </h4>
+
+    <table class="data-grid">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Date of change</th>
+          <th>Published by</th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <% const maxVersion = Math.max(...changes.map((ch) => ch.version)); %>
+        <% changes.forEach((change, idx)=> { %>
+        <tr class="border-b border-mono-25">
+          <td class="py-4 pl-2">
+            <div class="flex items-center gap-2">
+              <%= [change.title, change.description].filter(Boolean).join(": ") %>
+
+              <% if (change.source === "revert") { %>
+              <img src="/static/_assets/revert.svg" alt="Revert version" class="size-4">
+              <% } %>
+            </div>
+          </td>
+
+          <td class="whitespace-nowrap">
+            <div class="body-3 text-raketa-foreground/50">
+              <div class="flex items-center gap-1">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 text-raketa-foreground">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+
+                <%= (new Date(change.insertedAt)).toLocaleString() %>
+              </div>
+            </div>
+          </td>
+
+          <td class="whitespace-nowrap">
+            <div class="body-3 text-raketa-foreground/50">
+              <div class="flex items-center gap-1" title="Yana Dimitrova">
+                <img src="<%= change.operatorMeta.avatar %>" class="size-4 rounded-full">
+                <%= change.operatorMeta.name %>
+              </div>
+            </div>
+          </td>
+
+          <td>
+            <div class="actions-toolbar justify-end">
+              <% if (maxVersion !== change.version) { %>
+              <form method="POST" action="<%= `/${_context.locale}/articles/${article.id}/article_changes/reverts` %>" class="inline-block">
+                <input type="hidden" name="version" value=<%= change.version %>>
+                <button type="submit" class="btn-text has-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                  </svg>
+
+                  Revert
+                </button>
+              </form>
+              <% } %>
+
+              <a href="#" class="btn-text has-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                  <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>
+
+                Preview
+              </a>
+            </div>
+          </td>
+        </tr>
+        <% }); %>
+      </tbody>
+    </table>
+  </div>
+</div>

package/src/views/articles/translations/_form.ejs

@@ -0,0 +1,77 @@
+<% form_for({ translation }, errors, (f) => { %>
+<form action="<%= `/${_context.locale}/articles/${article.id}/translations` %>" method="post" class="form">
+  <input type="hidden" name="target_locale" value="<%= targetLocale %>" />
+
+  <%- f.field('translation.title', { required: true }) %>
+  <%- f.field('translation.slug', { label: "URL", required: true }) %>
+  <%- f.field('translation.publish_at', { required: true, type: 'datetime-local' }) %>
+  <%- f.field('translation.visibility', { as: 'select', required: true, options: visibilityOptions }) %>
+
+  <%- f.field('translation.username', { required: true }) %>
+  <%- f.field('translation.password', { required: true }) %>
+
+  <%- f.field('translation.layout', { as: 'select', required: true, options: [
+      ["default", "Default"],
+      ["landing", "Landing page"],
+      ["headless", "Headless"],
+    ] }) %>
+
+  <%- f.field('translation.meta_title', { required: true }) %>
+  <%- f.field('translation.meta_description', { as: "textarea", required: true }) %>
+
+  <raketa-image-picker name="translation[meta_image]" value="<%= JSON.stringify(translation.meta_image) %>"></raketa-image-picker>
+
+  <h6>Original tags:</h6>
+  <div><%= blueprint_tags.map((tag) => tag.name).join(", ")%></div>
+
+  <%- f.field('translation.tags', { as: 'checkbox_group', required: true, options: tags.map(tag => [tag.id, tag.name])}) %>
+
+  <div class="form-actions">
+    <div class="btn-toolbar">
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+
+      <a href="<%= `/${_context.locale}/articles/${article.id}` %>" class="btn-secondary">Cancel</a>
+    </div>
+  </div>
+</form>
+<% }) %>
+
+<div>
+  <div class="help">
+    <div class="flex items-center gap-1 mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+      </svg>
+
+      <h3 class="heading-3">Contextual help</h3>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+  </div>
+</div>
+
+<script>
+  function onVisibilityChange(event) {
+    const newValue = event.target.value;
+
+    if (newValue === "protected") {
+      document.getElementById("f_username").parentElement.style.display = "block";
+      document.getElementById("f_username").required = true;
+      document.getElementById("f_password").parentElement.style.display = "block";
+      document.getElementById("f_password").required = true;
+    } else {
+      document.getElementById("f_username").parentElement.style.display = "none";
+      document.getElementById("f_username").required = false;
+      document.getElementById("f_password").parentElement.style.display = "none";
+      document.getElementById("f_password").required = false;
+    }
+  }
+
+  onVisibilityChange({
+    target: {
+      value: '<%= article.visibility %>'
+    }
+  })
+
+  document.getElementById("f_visibility").addEventListener("change", onVisibilityChange)
+</script>

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

@@ -0,0 +1,11 @@
+<div class="w-full">
+  <div class="flex items-center justify-between mt-6 mb-4">
+    <div class="flex items-center gap-2">
+      <h1 class="heading-1">Create page translation</h1>
+    </div>
+  </div>
+</div>
+
+<div class="grid gap-4 md:grid-cols-3">
+  <%- include('_form.ejs') %>
+</div>

package/src/views/articles/urls/create_form.ejs

@@ -0,0 +1,31 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Change URL</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <% form_for({ change }, errors, (f) => { %>
+    <form action="<%= `/${_context.locale}/articles/${change.id}/urls` %>" method="post" class="form">
+      <%- f.field('change.slug', { label: "URL", required: true }) %>
+      <%- f.field('change.redirect', { as: "checkbox", value: "1", label: "Create 301 redirect for the old URL" }) %>
+
+      <%- f.submit('Save record', { class: 'btn-primary' }) %>
+      <a href="<%=`/${_context.locale}/articles/${change.id}`%>" class="btn-secondary">Back</a>
+    </form>
+    <% }) %>
+
+    <div>
+      <div class="help">
+        <div class="flex items-center gap-1 mb-2">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+          </svg>
+
+          <h3 class="heading-3">Contextual help</h3>
+        </div>
+
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore nostrum fugit sint sunt distinctio ut cum, corrupti ad error, quo labore minima. Reprehenderit quasi maxime repudiandae voluptatum commodi saepe molestiae?</p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/views/page_revisions/locks/create_form.ejs

@@ -1,6 +1,6 @@
 <div class="page-wrapper">
   <div class="page-title">
-    <h1 class="heading-1">Change URL</h1>
+    <h1 class="heading-1">Lock revision</h1>
   </div>
 
   <div class="grid gap-4 md:grid-cols-3">

package/test/factory.js

@@ -33,6 +33,27 @@ const PAGE = {
   categories: [],
 };
 
+const ARTICLE = {
+  id: "2",
+  slug: "page-revision",
+  publishAt: "2024-08-30T19:05:00Z",
+  title: "Page Revision",
+  widgets: [],
+  settings: {
+    meta: {
+      title: "Open graph",
+      description: "Open graph???",
+      image: {},
+    },
+  },
+  visibility: "public",
+  originalId: null,
+  insertedAt: "2024-08-30T19:05:00Z",
+  tags: [],
+  pageType: {},
+  categories: [],
+};
+
 const PAGE_CHANGE = {
   version: "1",
   title: "A cool page change",
@@ -46,6 +67,19 @@ const PAGE_CHANGE = {
   insertedAt: "2024-08-30T19:05:00Z",
 };
 
+const ARTICLE_CHANGE = {
+  version: "1",
+  title: "A cool article change",
+  operator: "some-operator-id",
+  operatorMeta: {
+    id: "some-operator-id",
+    email: "john@example.com",
+    name: "John DOe",
+  },
+  description: "A cool article change description",
+  insertedAt: "2024-08-30T19:05:00Z",
+};
+
 const Tag = {
   id: "42",
   slug: "tag",
@@ -66,6 +100,9 @@ const FIXTURES = {
   page: { ...PAGE },
   page_revision: { ...PAGE, meta: { ...REVISION_META }, originalId: "1" },
   page_change: { ...PAGE_CHANGE },
+  article: { ...ARTICLE },
+  article_revision: { ...ARTICLE, meta: { ...REVISION_META }, originalId: "1" },
+  article_change: { ...ARTICLE_CHANGE },
   settings: { value: {} },
   tag: Tag,
   pagination: {