@raketa-cloud/admin 0.0.6 → 0.0.8

package/src/handlers/SettingsMetaHandler.js

@@ -0,0 +1,52 @@
+const edit_form = async (ctx) => {
+  const data = await ctx.client.settings.find(ctx.locale);
+  const meta_settings = {
+    ...data.meta,
+    image: data.meta?.image || {},
+  };
+  const errors = {};
+
+  return {
+    assigns: {
+      errors,
+      meta_settings,
+    },
+  };
+};
+
+const update = async (ctx) => {
+  const params = ctx.resourceParams.meta_settings;
+
+  const currentSettings = await ctx.client.settings.find(ctx.locale);
+
+  if (!currentSettings.meta) {
+    currentSettings.meta = {};
+  }
+
+  currentSettings.meta.title = params.title;
+  currentSettings.meta.description = params.description;
+  currentSettings.meta.image = JSON.parse(params.image);
+
+  const { errors } = await ctx.client.settings.update(
+    ctx.locale,
+    currentSettings
+  );
+
+  if (errors) {
+    return {
+      assigns: {
+        setting: { ...params },
+        errors: { setting: ctx.client.settings.formatErrors(errors) },
+      },
+    };
+  }
+
+  return {
+    redirect: `/${ctx.locale}/settings/meta/edit`,
+  };
+};
+
+export default {
+  edit_form,
+  update,
+};

package/src/handlers/TagsHandler.js

@@ -0,0 +1,113 @@
+const index = async (ctx) => {
+  const items = await ctx.client.tags.list(ctx.query, ctx.locale);
+
+  return {
+    assigns: {
+      items,
+    },
+  };
+};
+
+const create_form = (_ctx) => {
+  return {
+    assigns: {
+      tag: {},
+      errors: {},
+      _translations: [],
+    },
+  };
+};
+
+const edit_form = async (ctx) => {
+  const { id } = ctx.router.req.param();
+  const tag = await ctx.client.tags.find(id, ctx.locale);
+
+  return {
+    assigns: {
+      id,
+      tag,
+      errors: {},
+      _translations: [],
+    },
+  };
+};
+
+const create = async (ctx) => {
+  const params = ctx.resourceParams.tag;
+
+  const { errors } = await ctx.client.tags.create(
+    {
+      name: params.name,
+      slug: params.slug,
+    },
+    ctx.locale
+  );
+
+  if (errors) {
+    return {
+      assigns: {
+        tag: params,
+        errors: { tag: ctx.client.tags.formatErrors(errors) },
+        _translations: [],
+      },
+    };
+  }
+
+  return {
+    redirect: `/${ctx.locale}/tags`,
+  };
+};
+
+const update = async (ctx) => {
+  const { id } = ctx.params;
+  const params = ctx.resourceParams.tag;
+
+  const { errors } = await ctx.client.tags.update(
+    id,
+    {
+      name: params.name,
+      slug: params.slug,
+    },
+    ctx.locale
+  );
+
+  if (errors) {
+    return {
+      assigns: {
+        tag: { ...params, id },
+        errors: { tag: ctx.client.tags.formatErrors(errors) },
+        _translations: [],
+      },
+    };
+  }
+
+  return {
+    redirect: `/${ctx.locale}/tags`,
+  };
+};
+
+const destroy = async (ctx) => {
+  const { id } = ctx.params;
+
+  const { errors } = await ctx.client.tags.delete(id, ctx.locale);
+
+  if (errors) {
+    throw `Failed to delete tag #${id}. WTF?`;
+  }
+
+  return {
+    headers: {
+      "HX-redirect": `/${ctx.locale}/tags`,
+    },
+    json: {},
+  };
+};
+
+export default {
+  index,
+  create_form,
+  edit_form,
+  create,
+  update,
+  destroy,
+};

package/src/helpers/FormBuilder.js

@@ -143,10 +143,18 @@ export default class FormBuilder extends HTMLBuilder {
       renderedOpts.push(this.tag("label", `${checkbox} ${o[1]}`));
     }
 
-    return this.tag("div", renderedOpts.join(""), {
-      ...rest,
-      class: ["checkbox-group", rest.class].filter(Boolean).join(" "),
-    });
+    return this.tag(
+      "div",
+      renderedOpts.length
+        ? renderedOpts.join("")
+        : this.tag("div", "No items available.", {
+            class: "italic opacity-50",
+          }),
+      {
+        ...rest,
+        class: ["checkbox-group", rest.class].filter(Boolean).join(" "),
+      }
+    );
   }
 
   checkbox(name, opts = {}) {

package/src/index.js

@@ -5,3 +5,36 @@ export { default as routeMember } from "./routeMember";
 export { default as routeNestedMember } from "./routeNestedMember";
 export { default as setGlobalContext } from "./setGlobalContext";
 export { default as setGlobalConfig } from "./setGlobalConfig";
+
+export { default as Redirects } from "./cloud/Redirects";
+export { default as RedirectsHandler } from "./handlers/RedirectsHandler";
+export { default as Tags } from "./cloud/Tags";
+export { default as TagsHandler } from "./handlers/TagsHandler";
+export { default as Settings } from "./cloud/Settings";
+export { default as SettingsGeneralHandler } from "./handlers/SettingsGeneralHandler";
+export { default as SettingsLayoutHandler } from "./handlers/SettingsLayoutHandler";
+export { default as SettingsMetaHandler } from "./handlers/SettingsMetaHandler";
+export { default as ChangePageURL } from "./cloud/ChangePageURL";
+export { default as ClonePage } from "./cloud/ClonesPage";
+export { default as DeletePage } from "./cloud/DeletePage";
+export { default as PageChanges } from "./cloud/PageChanges";
+export { default as PageRevisions } from "./cloud/PageRevisions";
+export { default as PageTranslations } from "./cloud/PageTranslations";
+export { default as Pages } from "./cloud/Pages";
+export { default as RevertPageRevision } from "./cloud/RevertPageRevision";
+export { default as PageCloneHandler } from "./handlers/PageCloneHandler";
+export { default as PageDeleteHandler } from "./handlers/PageDeleteHandler";
+export { default as PageRevisionsCodesHandler } from "./handlers/PageRevisionsCodesHandler";
+export { default as PageRevisionsGeneralHandler } from "./handlers/PageRevisionsGeneralHandler";
+export { default as PageRevisionsHandler } from "./handlers/PageRevisionsHandler";
+export { default as PageRevisionsLockHandler } from "./handlers/PageRevisionsLockHandler";
+export { default as PageRevisionsMetaHandler } from "./handlers/PageRevisionsMetaHandler";
+export { default as PageRevisionsTagsHandler } from "./handlers/PageRevisionsTagsHandler";
+export { default as PageRevisionsUnlockHandler } from "./handlers/PageRevisionsUnlockHandler";
+export { default as PageRevisionsVisualsHandler } from "./handlers/PageRevisionsVisualsHandler";
+export { default as PageRevisionsWidgetsHandler } from "./handlers/PageRevisionsWidgetsHandler";
+export { default as PageTranslationsHandler } from "./handlers/PageTranslationsHandler";
+export { default as PageURLsHandler } from "./handlers/PageURLsHandler";
+export { default as PagesHandler } from "./handlers/PagesHandler";
+export { default as PublishPageRevisionHandler } from "./handlers/PublishPageRevisionHandler";
+export { default as RevertPageRevisionHandler } from "./handlers/RevertPageRevisionHandler";

package/src/setupAuthentication.js

@@ -1,3 +1,6 @@
+import { fileURLToPath } from "url";
+// const __filename = fileURLToPath(import.meta.url);
+
 import nodePath from "node:path";
 import ejs from "ejs";
 import { deleteCookie, getCookie, setCookie } from "hono/cookie";

package/src/styles/application.css

@@ -5,11 +5,28 @@
 :root {
   --background: 255, 255, 255;
   --foreground: 0, 0, 0;
-  --primary: 110, 110, 178;
+
+  /* --primary: 110, 110, 178; */
   /* --primary: 0, 0, 0; */
-  --primary-light: 157, 157, 210;
-  --primary-dark: 88, 88, 142;
+  /* --primary: 15, 82, 186; */
+  /* --primary: 0, 67, 206; */
+  --primary: 91, 95, 198;
+
+  /* --primary-dark: 88, 88, 142; */
   /* --primary-dark: 0, 0, 0; */
+  --primary-dark: var(--primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground: 255, 255, 255;
+    --background: 21, 21, 21;
+    --primary: 130, 133, 212;
+  }
+}
+
+body {
+  @apply text-raketa-foreground bg-raketa-background;
 }
 
 @layer components {
@@ -23,7 +40,11 @@
   }
 
   .help {
-    @apply bg-[#f0f0f8] body-2 p-4 rounded sticky top-6;
+    @apply bg-orange-50 body-2 p-4 rounded sticky top-6 dark:bg-raketa-primary/20;
+
+    .heading-3 {
+      @apply text-raketa-foreground;
+    }
   }
 
   /* Typography */
@@ -86,7 +107,7 @@
   }
 
   .btn-danger {
-    @apply text-red-600 hover:text-raketa-foreground;
+    @apply text-red-600 hover:text-raketa-foreground dark:text-red-700;
   }
 
   .btn-toolbar {
@@ -113,7 +134,7 @@
     input,
     select,
     textarea {
-      @apply border border-neutral-300 rounded px-3 py-2 w-full shadow-inner;
+      @apply border border-neutral-300 rounded px-3 py-2 w-full shadow-inner dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-raketa-primary dark:focus:ring-raketa-primary;
     }
 
     textarea {
@@ -127,7 +148,7 @@
     }
 
     .checkbox-group {
-      @apply max-h-[200px] overflow-y-auto py-1 px-2 mt-1 rounded shadow-inner border border-neutral-300;
+      @apply max-h-[200px] overflow-y-auto py-1 px-2 mt-1 rounded shadow-inner border border-neutral-300 bg-raketa-background dark:border-neutral-700;
     }
 
     .checkbox-group label {
@@ -165,17 +186,17 @@
 
     th,
     td {
-      @apply p-3 border-b border-neutral-200 transition-all duration-100 ease-in-out;
+      @apply p-3 leading-none border-b border-neutral-200 transition-all duration-100 ease-in-out dark:border-neutral-700;
     }
 
     th {
-      @apply bg-neutral-100 text-raketa-foreground;
+      @apply border-b border-b-black/25 text-raketa-foreground dark:border-b-white/40;
     }
 
     tbody {
       tr:hover {
         td {
-          @apply border-neutral-300 bg-neutral-50 text-raketa-foreground;
+          @apply border-neutral-300 bg-neutral-50 text-raketa-foreground dark:bg-neutral-800 dark:border-neutral-600;
         }
       }
     }
@@ -215,18 +236,12 @@
     }
 
     &.alt {
-      @apply bg-[#F0F0F8];
-
       th {
-        @apply bg-[#c6c6e5];
+        @apply bg-raketa-primary/15;
       }
 
-      tbody {
-        tr:hover {
-          td {
-            @apply border-neutral-300 bg-neutral-50 text-raketa-foreground;
-          }
-        }
+      td {
+        @apply bg-raketa-primary/5;
       }
     }
   }
@@ -248,6 +263,23 @@
     }
   }
 
+  /* Basic Layout */
+  .page-wrapper {
+    @apply w-full px-4;
+  }
+
+  .search-sidebar {
+    @apply p-4 w-[400px] bg-slate-50 border-l min-h-screen dark:bg-neutral-800/70 dark:border-neutral-700;
+  }
+
+  .page-title {
+    @apply flex items-center justify-between my-6;
+  }
+
+  .actions-toolbar {
+    @apply flex items-center gap-4;
+  }
+
   /* Hacks */
   .unstyled-details {
     @apply appearance-none;
@@ -263,6 +295,10 @@
     }
   }
 
+  .unstyled-details summary {
+    list-style: none;
+  }
+
   .unstyled-details summary::-webkit-details-marker {
     display: none;
   }

package/src/views/layouts/application.ejs

@@ -20,7 +20,7 @@
   <%- include('header.ejs') %>
 
   <div id="sidebar" class="flex h-[calc(100vh-56px)] overflow-y-auto relative group">
-    <div class="flex w-16 group-[.expanded]:w-60 h-[calc(100vh-56px)] flex-col sticky left-0 top-0 transition-all duration-150 ease-in-out justify-between group/sidebar bg-[#f0f0f8]">
+    <div class="flex w-16 group-[.expanded]:w-60 h-[calc(100vh-56px)] flex-col sticky left-0 top-0 transition-all duration-150 ease-in-out justify-between group/sidebar bg-raketa-primary/5 dark:bg-raketa-primary/15">
       <button id="expand" type="button" class="absolute z-20 flex items-center justify-center rotate-180 transition-all ease-in-out duration-300 group-[.expanded]:rotate-0 rounded-full bottom-12 size-8 -right-4 bg-raketa-primary text-white">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
           <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
@@ -29,7 +29,7 @@
 
       <div class="my-4">
         <div class="group/item">
-          <a href="<%= `/${_context.locale}/pages` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}/pages` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
             </svg>
@@ -40,7 +40,7 @@
         </div>
 
         <div class="group/item">
-          <a href="<%= `/${_context.locale}/articles` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}/articles` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
             </svg>
@@ -51,7 +51,7 @@
         </div>
 
         <div class="group/item">
-          <a href="<%= `/${_context.locale}/events` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}/events` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
             </svg>
@@ -62,7 +62,7 @@
         </div>
 
         <div class="group/item">
-          <a href="<%= `/${_context.locale}/redirects` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}/redirects` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
             </svg>
@@ -73,7 +73,7 @@
         </div>
 
         <div class="group/item">
-          <a href="<%= `/${_context.locale}/tags` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+          <a href="<%= `/${_context.locale}/tags` %>" class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
               <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
@@ -86,7 +86,7 @@
 
         <div class="group/item">
           <details class="unstyled-details">
-            <summary class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary-dark cursor-pointer transition-all duration-300 ease-in-out">
+            <summary class="relative flex items-center gap-3 px-5 py-4 text-raketa-primary cursor-pointer transition-all duration-300 ease-in-out">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
@@ -99,7 +99,7 @@
               </svg>
             </summary>
 
-            <div class="pl-12 py-4 bg-white/50 group-[.expanded]:block hidden">
+            <div class="pl-12 py-4 bg-raketa-background/50 group-[.expanded]:block hidden">
               <a href="<%= `/${_context.locale}/settings/general/edit` %>" class="block py-2 body-2 text-raketa-foreground/50 hover:text-raketa-foreground transition-all ease-in-out duration-300">General</a>
               <a href="<%= `/${_context.locale}/settings/meta/edit` %>" class="block py-2 body-2 text-raketa-foreground/50 hover:text-raketa-foreground transition-all ease-in-out duration-300">Meta and OpenGraph</a>
               <a href="<%= `/${_context.locale}/settings/layout/edit` %>" class="block py-2 body-2 text-raketa-foreground/50 hover:text-raketa-foreground transition-all ease-in-out duration-300">Layout and Navigation</a>
@@ -109,7 +109,7 @@
       </div>
 
       <div class="group/item">
-        <a href="/logout" class="relative flex items-center gap-3 px-5 py-4 border-t border-gray-300 text-raketa-primary-dark hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white">
+        <a href="/logout" class="relative flex items-center gap-3 px-5 py-4 border-t border-neutral-300 text-raketa-primary hover:bg-raketa-primary hover:text-white group-[.is-active]/item:bg-raketa-primary group-[.is-active]/item:text-white dark:border-neutral-700">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6 opacity-100 group-[.expanded]:opacity-50">
             <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
             <path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
@@ -120,28 +120,27 @@
       </div>
     </div>
 
-    <div class="w-full px-6">
-      <%- body %>
-    </div>
+    <%- body %>
   </div>
-</body>
 
-</html>
 
-<script>
-  const toggleEl = document.getElementById('expand');
-  const sidebarEl = document.getElementById('sidebar');
-
-  const initToggle = () => {
-    const savedState = localStorage.getItem('sidebar') || 'off';
-    sidebarEl.classList.toggle('expanded', savedState === 'on');
-  };
-
-  const handleToggle = () => {
-    sidebarEl.classList.toggle('expanded');
-    localStorage.setItem("sidebar", sidebarEl.classList.contains('expanded') ? 'on' : 'off');
-  };
-
-  initToggle();
-  toggleEl.addEventListener('click', handleToggle);
-</script>
+  <script>
+    const toggleEl = document.getElementById('expand');
+    const sidebarEl = document.getElementById('sidebar');
+
+    const initToggle = () => {
+      const savedState = localStorage.getItem('sidebar') || 'off';
+      sidebarEl.classList.toggle('expanded', savedState === 'on');
+    };
+
+    const handleToggle = () => {
+      sidebarEl.classList.toggle('expanded');
+      localStorage.setItem("sidebar", sidebarEl.classList.contains('expanded') ? 'on' : 'off');
+    };
+
+    initToggle();
+    toggleEl.addEventListener('click', handleToggle);
+  </script>
+</body>
+
+</html>

package/src/views/layouts/header.ejs

@@ -1,7 +1,7 @@
-<header class="sticky top-0 z-10 flex items-center bg-white border-b border-mono-25">
+<header class="sticky top-0 z-10 flex items-center bg-raketa-background border-b border-mono-25 dark:border-neutral-700">
   <div class="flex items-center justify-center flex-none size-14">
-    <a href="<%= `/${_context.locale}/` %>">
-      <img src="/static/_assets/logo.svg" alt="Raketa" />
+    <a href="<%= `/${_context.locale}/pages` %>">
+      <img src="/static/_assets/logo.svg" alt="Raketa" class="dark:invert" />
     </a>
   </div>
 
@@ -15,19 +15,18 @@
     <div class="flex items-center gap-4">
       <div class="relative flex items-center gap-1 group body-2">
         <img src="<%= _context.locales[_context.locale].flag %>" alt="<%= _context.locales[_context.locale].name %>" class="size-4 rounded-full" />
-        <div><%= _context.locales[_context.locale].name %></div>
 
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="<%= (!locals._translations || locals._translations.length > 0) ? "currentColor" : "transparent" %>" class="size-5">
           <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
         </svg>
 
         <div class="absolute right-0 hidden pt-1 w-48 top-full group-hover:block">
-          <div class="bg-white border rounded border-mono-purple-25 shadow-lg">
+          <div class="bg-raketa-background border rounded border-mono-purple-25 shadow-lg dark:border-neutral-700">
             <% if (locals._translations) { %>
             <% locals._translations.forEach(translation => { %>
             <% const { name, _code, flag} = _context.locales[translation.locale] %>
 
-            <a href="<%= translation.path %>" class="flex items-center gap-2 p-2 hover:bg-mono-purple-25">
+            <a href="<%= translation.path %>" class="flex items-center gap-2 p-2 hover:bg-mono-purple-25 dark:hover:bg-neutral-700">
               <img src="<%= flag %>" alt="<%= name %>" class="size-4 rounded-full" />
               <div><%= name %></div>
             </a>
@@ -35,7 +34,7 @@
             <% } else { %>
             <% Object.keys(_context.locales).forEach(locale => { %>
             <% const { name, _code, flag} = _context.locales[locale] %>
-            <a href="<%= `/${locale}${_context.path.slice(_context.locale.length + 1)}` %>" class="flex items-center gap-2 p-2 hover:bg-mono-purple-25">
+            <a href="<%= `/${locale}${_context.path.slice(_context.locale.length + 1)}` %>" class="flex items-center gap-2 p-2 hover:bg-mono-purple-25 dark:hover:bg-neutral-700">
               <img src="<%= flag %>" alt="<%= name %>" class="size-4 rounded-full" />
               <div><%= name %></div>
             </a>

package/src/views/page_deletes/create_form.ejs

@@ -0,0 +1,55 @@
+<div class="page-wrapper">
+  <div class="page-title">
+    <h1 class="heading-1">Delete a page</h1>
+  </div>
+
+  <div class="grid gap-4 md:grid-cols-3">
+    <div>
+      <% form_for({ deleteAction }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/pages/${deleteAction.id}/page_deletes` %>" method="POST" class="form">
+        <%- f.field('deleteAction.redirect', { as: 'select', required: true,options: [['301', 'Redirect to another page'], ['404', 'Return 404'],['410', 'Return 410']] }) %>
+        <%- f.field('deleteAction.destination', {label: 'Destination URL', required: true}) %>
+
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Proceed', { class: 'btn-primary' }) %>
+            <a href="<%=`/${_context.locale}/pages/${deleteAction.id}`%>" class="btn-secondary">Back</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 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">
+            <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>
+
+<script>
+  function onDestinationChange(event) {
+    const newValue = event.target.value;
+    const requiresRedirect = newValue === "301"
+
+    document.getElementById("f_destination").parentElement.style.display = requiresRedirect ? "block" : "none";
+    document.getElementById("f_destination").required = requiresRedirect;
+  }
+
+  onDestinationChange({
+    target: {
+      value: '<%= deleteAction.redirect %>'
+    }
+  })
+
+  document.getElementById("f_redirect").addEventListener("change", onDestinationChange)
+</script>

package/src/views/page_lock/create_form.ejs

@@ -0,0 +1,35 @@
+<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">
+    <div>
+      <% form_for({ lock_settings }, errors, (f) => { %>
+      <form action="<%= `/${_context.locale}/page_revisions/${lock_settings.revision.id}/page_lock` %>" method="POST" class="form">
+        <%- f.field('lock_settings.message', { as: 'textarea', label: 'Lock Message', required: true }) %>
+        <div class="form-actions">
+          <div class="btn-toolbar">
+            <%- f.submit('Lock revision', { class: 'btn-primary' }) %>
+            <a href="<%= `/${_context.locale}/pages/${lock_settings.revision.originalId}` %>" class="btn-secondary">Cancel</a>
+          </div>
+        </div>
+      </form>
+      <% }) %>
+    </div>
+
+    <div>
+      <div class="help">
+        <div class="mb-2 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">
+            <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>Locking a revision will prevent further changes to this version of the page. This action cannot be undone. Please provide a reason for locking this revision.</p>
+      </div>
+    </div>
+  </div>
+</div>