@karibsen/eponyme 0.1.0

package/dist/runtime/components/editor/EponymePreviewPanel.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import EPButton from "../ui/EPButton.vue";
+import EPSelect from "../ui/EPSelect.vue";
+import { formatVersionDate, useEponymeHistory } from "../../composables/useEponymeHistory";
+const props = defineProps({
+  name: { type: String, required: true },
+  path: { type: String, required: true },
+  open: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:open"]);
+const { history, load } = useEponymeHistory(() => props.name);
+const selected = ref("draft");
+function newToken() {
+  return globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+const previewToken = ref(newToken());
+const options = computed(() => [
+  { label: "Draft (last saved)", value: "draft" },
+  { label: "Published", value: "published" },
+  ...history.value.map((version) => ({
+    label: `${formatVersionDate(version.createdAt)} \xB7 ${version.action}${version.user ? ` \xB7 ${version.user.username}` : ""}`,
+    value: String(version.id)
+  }))
+]);
+const previewUrl = computed(() => {
+  const url = new URL(props.path, "http://placeholder");
+  url.searchParams.set("__eponyme_preview", props.name);
+  url.searchParams.set("__eponyme_preview_version", selected.value);
+  url.searchParams.set("__eponyme_preview_token", previewToken.value);
+  return `${url.pathname}${url.search}`;
+});
+async function reload() {
+  previewToken.value = newToken();
+  await load();
+  if (selected.value !== "draft" && selected.value !== "published" && !history.value.some((version) => String(version.id) === selected.value))
+    selected.value = "draft";
+}
+watch(selected, () => {
+  previewToken.value = newToken();
+});
+function openInNewTab() {
+  window.open(previewUrl.value, "_blank", "noopener,noreferrer");
+}
+defineExpose({ reload });
+watch(() => props.open, (open) => {
+  if (open) void load();
+});
+watch(() => props.name, () => {
+  selected.value = "draft";
+  previewToken.value = newToken();
+});
+</script>
+
+<template>
+  <aside
+    v-if="open"
+    class="ep:fixed ep:z-100 ep:top-0 ep:right-0 ep:bottom-0 ep:flex ep:w-full ep:flex-col ep:border-l ep:border-border-ep ep:bg-theme-ep ep:shadow-2xl ep:md:w-[45vw] ep:lg:w-[40vw]"
+    aria-label="Preview"
+  >
+    <div class="ep:flex ep:flex-wrap ep:items-center ep:gap-2 ep:border-b ep:border-border-ep ep:p-3">
+      <EPSelect
+        size="sm"
+        class="ep:min-w-0 ep:flex-1"
+        :model-value="selected"
+        :options="options"
+        content-class="ep:z-110"
+        aria-label="Version to preview"
+        @update:model-value="selected = $event"
+      />
+      <EPButton
+        icon="mingcute:refresh-2-line"
+        variant="ghost"
+        aria-label="Reload preview"
+        @click="reload"
+      />
+      <EPButton
+        icon="mingcute:external-link-line"
+        variant="ghost"
+        aria-label="Open preview in a new tab"
+        @click="openInNewTab"
+      />
+      <EPButton
+        icon="mingcute:close-line"
+        variant="ghost"
+        aria-label="Close preview"
+        @click="emit('update:open', false)"
+      />
+    </div>
+    <p class="ep:m-0 ep:px-3 ep:py-2 ep:text-[11px] ep:text-muted-ep">
+      Shows saved content — unsaved edits appear after you save.
+    </p>
+    <iframe
+      :key="previewUrl"
+      :src="previewUrl"
+      title="Entry preview"
+      class="ep:min-h-0 ep:w-full ep:flex-1 ep:border-0 ep:bg-white"
+    />
+  </aside>
+</template>

package/dist/runtime/components/editor/EponymePreviewPanel.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    name: string;
+    /** Public route of the site rendering this entry, from `eponyme.previewPaths`. */
+    path: string;
+    open: boolean;
+};
+declare function reload(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    reload: typeof reload;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeSidebar.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    basePath: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeSidebar.vue

@@ -0,0 +1,244 @@
+<script setup>
+import { navigateTo, useRequestFetch, useRoute, useState } from "#app";
+import { onKeyStroke } from "@vueuse/core";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import EponymeNavigationLink from "./EponymeNavigationLink.vue";
+import EponymeSidebarTree from "./EponymeSidebarTree.vue";
+import { useEponymeConfig } from "../../composables/useEponymeConfig";
+import { getEponymeCollections, getEponymeForms, getEponymeSchemas } from "../../utils/get-eponyme-schemas";
+import { useEponymeAuth } from "../../composables/useEponymeAuth";
+import EPAvatar from "../ui/EPAvatar.vue";
+import EPButton from "../ui/EPButton.vue";
+import EPInputText from "../ui/EPInputText.vue";
+const props = defineProps({
+  basePath: { type: String, required: true }
+});
+const route = useRoute();
+const config = useEponymeConfig();
+const collapsed = useState("eponyme:sidebar-collapsed", () => false);
+const statuses = useState("eponyme:entry-statuses", () => ({}));
+const requestFetch = useRequestFetch();
+const searchInput = ref();
+const searchQuery = ref("");
+const collectionEntries = useState("eponyme:collection-entries", () => ({}));
+const collections = getEponymeCollections(config);
+const forms = getEponymeForms(config);
+const normalizedBasePath = computed(() => props.basePath.replace(/\/$/, ""));
+const navigationElement = ref();
+const navigationScrollTop = useState(`eponyme:sidebar-scroll:${normalizedBasePath.value}`, () => 0);
+const auth = useEponymeAuth();
+async function logout() {
+  await auth.logout();
+  await navigateTo(`${normalizedBasePath.value}/login`);
+}
+async function restoreNavigationScroll() {
+  await nextTick();
+  if (navigationElement.value) navigationElement.value.scrollTop = navigationScrollTop.value;
+}
+onMounted(async () => {
+  await restoreNavigationScroll();
+  const [statusResponse, ...collectionResponses] = await Promise.all([
+    requestFetch("/api/eponyme-statuses"),
+    ...Object.keys(collections).map((name) => requestFetch(`/api/eponyme-collections/${name}`, { query: { version: "draft" } }))
+  ]);
+  statuses.value = { ...statusResponse.statuses };
+  collectionEntries.value = Object.fromEntries(Object.keys(collections).map((name, index) => [name, collectionResponses[index]?.entries ?? []]));
+  for (const [name, entries] of Object.entries(collectionEntries.value)) {
+    for (const entry of entries) statuses.value[`${name}/${entry.slug}`] = entry.status;
+  }
+  await restoreNavigationScroll();
+});
+onBeforeUnmount(() => {
+  if (navigationElement.value) navigationScrollTop.value = navigationElement.value.scrollTop;
+});
+onKeyStroke("k", (event) => {
+  if (!event.metaKey && !event.ctrlKey) return;
+  event.preventDefault();
+  searchInput.value?.$el?.focus();
+});
+const navigation = computed(() => {
+  const items = [];
+  for (const entry of Object.keys(getEponymeSchemas(config))) {
+    const parts = entry.split("/");
+    for (let depth = 0; depth < parts.length - 1; depth++) {
+      const path = parts.slice(0, depth + 1).join("/");
+      if (items.some((item) => item.kind === "folder" && item.path === path)) continue;
+      items.push({ kind: "folder", path });
+    }
+    items.push({ kind: "entry", path: entry });
+  }
+  for (const collection of Object.keys(collections)) {
+    const parts = collection.split("/");
+    for (let depth = 0; depth < parts.length; depth++) {
+      const path = parts.slice(0, depth + 1).join("/");
+      if (items.some((item) => item.kind === "folder" && item.path === path)) continue;
+      items.push({ kind: "folder", path });
+    }
+  }
+  for (const formName of Object.keys(forms)) {
+    const parts = formName.split("/");
+    for (let depth = 0; depth < parts.length - 1; depth++) {
+      const path = parts.slice(0, depth + 1).join("/");
+      if (items.some((item) => item.kind === "folder" && item.path === path)) continue;
+      items.push({ kind: "folder", path });
+    }
+    items.push({ kind: "entry", path: formName });
+  }
+  return items;
+});
+const navigationTree = computed(() => {
+  const root = [];
+  function addPath(pathValue, finalKind, configuredLabel) {
+    const parts = pathValue.split("/");
+    let children = root;
+    for (let index = 0; index < parts.length; index++) {
+      const part = parts[index];
+      const path = parts.slice(0, index + 1).join("/");
+      const kind = index === parts.length - 1 ? finalKind : "folder";
+      let node = children.find((item) => item.path === path);
+      if (!node) {
+        node = { kind, path, label: index === parts.length - 1 && configuredLabel ? configuredLabel : label(part), children: [] };
+        children.push(node);
+      } else if (index === parts.length - 1) {
+        node.kind = finalKind;
+        if (configuredLabel) node.label = configuredLabel;
+      }
+      children = node.children;
+    }
+  }
+  for (const entry of Object.keys(getEponymeSchemas(config))) addPath(entry, "entry");
+  for (const [name, definition] of Object.entries(collections)) {
+    addPath(name, "collection", definition.label);
+    for (const entry of collectionEntries.value[name] ?? []) addPath(`${name}/${entry.slug}`, "entry", entry.title);
+  }
+  for (const [name, definition] of Object.entries(forms)) addPath(name, "form", definition.label);
+  return root;
+});
+const openFolders = useState(`eponyme:open-folders:${normalizedBasePath.value}`, () => navigation.value.filter((item) => item.kind === "folder").map((item) => item.path));
+function label(name) {
+  return name.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function entryPath(name) {
+  return `${normalizedBasePath.value}/${name}`;
+}
+function isRouteInsideFolder(path) {
+  const target = entryPath(path);
+  return route.path === target || route.path.startsWith(`${target}/`);
+}
+watch(() => route.path, () => {
+  const next = new Set(openFolders.value);
+  for (const item of navigation.value) {
+    if (item.kind === "folder" && isRouteInsideFolder(item.path)) next.add(item.path);
+  }
+  openFolders.value = [...next];
+});
+</script>
+
+<template>
+  <aside
+    class="eponyme-sidebar ep:flex ep:max-h-dvh ep:w-full ep:max-w-full ep:shrink-0 ep:flex-col ep:overflow-hidden ep:border-b ep:border-border-ep ep:bg-theme-ep ep:p-4 ep:transition-[width] ep:md:sticky ep:md:top-0 ep:md:h-dvh ep:md:border-r ep:md:border-b-0 ep:md:p-5"
+    :class="{ 'is-collapsed': collapsed }"
+  >
+    <div class="ep:flex ep:shrink-0 ep:items-center ep:justify-between ep:gap-2">
+      <NuxtLink
+        v-if="!collapsed"
+        :to="normalizedBasePath"
+        class="ep:flex ep:min-w-0 ep:items-center ep:gap-2 ep:px-3 ep:text-sm ep:font-bold ep:tracking-tight ep:text-white ep:no-underline"
+      >
+        Eponyme
+      </NuxtLink>
+      <button
+        type="button"
+        class="ep:flex ep:h-8 ep:w-8 ep:shrink-0 ep:cursor-pointer ep:items-center ep:justify-center ep:rounded-lg ep:border-0 ep:bg-transparent ep:text-muted-ep ep:transition ep:hover:bg-selected-ep ep:hover:text-white"
+        :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+        :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+        @click="collapsed = !collapsed"
+      >
+        <Icon
+          :name="collapsed ? 'mingcute:layout-leftbar-open-line' : 'mingcute:layout-leftbar-close-line'"
+          size="18"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+    <nav
+      v-if="!collapsed"
+      ref="navigationElement"
+      class="ep:mt-6 ep:grid ep:min-h-0 ep:min-w-0 ep:flex-1 ep:content-start ep:gap-1 ep:overflow-y-auto ep:overscroll-contain ep:pr-1"
+      aria-label="Content entries"
+    >
+      <div class="ep:relative ep:mb-3">
+        <Icon
+          name="mingcute:search-line"
+          size="17"
+          aria-hidden="true"
+          class="ep:pointer-events-none ep:absolute ep:top-1/2 ep:left-3 ep:-translate-y-1/2 ep:text-muted-ep"
+        />
+        <EPInputText
+          ref="searchInput"
+          v-model="searchQuery"
+          padded
+          size="sm"
+          type="search"
+          placeholder="Search"
+          aria-label="Search content entries"
+        />
+        <kbd class="ep:pointer-events-none ep:absolute ep:top-1/2 ep:right-2.5 ep:-translate-y-1/2 ep:rounded ep:border ep:border-border-ep ep:bg-theme-ep ep:px-1.5 ep:py-0.5 ep:font-sans ep:text-[10px] ep:font-medium ep:text-muted-ep">
+          ⌘ K
+        </kbd>
+      </div>
+      <EponymeNavigationLink
+        :to="normalizedBasePath"
+        label="All entries"
+        :active="route.path === normalizedBasePath"
+      />
+      <EponymeNavigationLink
+        v-if="auth.isOwner.value"
+        :to="`${normalizedBasePath}/users`"
+        label="Users"
+        :active="route.path === `${normalizedBasePath}/users`"
+      />
+      <div
+        class="ep:my-3 ep:px-3 ep:text-[11px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase"
+      >
+        Editables
+      </div>
+      <EponymeSidebarTree
+        :nodes="navigationTree"
+        :base-path="normalizedBasePath"
+        :current-path="route.path"
+        :statuses="statuses"
+        :open-folders="openFolders"
+        :can-edit="auth.canEdit.value"
+        @update:open-folders="openFolders = $event"
+      />
+    </nav>
+    <div
+      v-if="!collapsed && auth.user.value"
+      class="ep:mt-5 ep:flex ep:shrink-0 ep:items-center ep:gap-3 ep:border-t ep:border-border-ep ep:px-2 ep:pt-4"
+    >
+      <EPAvatar
+        size="sm"
+        :fallback="auth.user.value.username"
+      />
+      <div class="ep:min-w-0 ep:flex-1">
+        <p class="ep:m-0 ep:truncate ep:text-xs ep:font-semibold ep:text-white">
+          {{ auth.user.value.username }}
+        </p>
+        <p class="ep:mt-0.5 ep:mb-0 ep:text-[11px] ep:text-muted-ep ep:capitalize">
+          {{ auth.user.value.role }}
+        </p>
+      </div>
+      <EPButton
+        variant="ghost"
+        icon="mingcute:align-arrow-right-line"
+        aria-label="Log out"
+        @click="logout"
+      />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+@media (min-width:768px){.eponyme-sidebar{width:350px}.eponyme-sidebar.is-collapsed{width:76px}}
+</style>

package/dist/runtime/components/editor/EponymeSidebar.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    basePath: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeSidebarTree.d.vue.ts

@@ -0,0 +1,18 @@
+import type { EponymeStatus } from '../../server/services/eponyme-store.js';
+import type { EponymeNavigationNode } from '../../types/eponyme-navigation.js';
+type __VLS_Props = {
+    nodes: EponymeNavigationNode[];
+    basePath: string;
+    currentPath: string;
+    statuses: Record<string, EponymeStatus>;
+    openFolders: string[];
+    canEdit?: boolean;
+    depth?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:openFolders": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:openFolders"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeSidebarTree.vue

@@ -0,0 +1,84 @@
+<script setup>
+import EPAccordion from "../ui/EPAccordion.vue";
+import EponymeNavigationLink from "./EponymeNavigationLink.vue";
+defineOptions({ name: "EponymeSidebarTree" });
+const props = defineProps({
+  nodes: { type: Array, required: true },
+  basePath: { type: String, required: true },
+  currentPath: { type: String, required: true },
+  statuses: { type: Object, required: true },
+  openFolders: { type: Array, required: true },
+  canEdit: { type: Boolean, required: false, default: false },
+  depth: { type: Number, required: false, default: 0 }
+});
+const emit = defineEmits(["update:openFolders"]);
+function entryPath(path) {
+  return `${props.basePath}/${path}`;
+}
+function isOpen(path) {
+  return props.openFolders.includes(path);
+}
+function setOpen(path, open) {
+  const next = new Set(props.openFolders);
+  if (open) next.add(path);
+  else next.delete(path);
+  emit("update:openFolders", [...next]);
+}
+</script>
+
+<template>
+  <div class="ep:grid ep:w-full ep:min-w-0 ep:gap-1">
+    <template
+      v-for="node in nodes"
+      :key="`${node.kind}-${node.path}`"
+    >
+      <EPAccordion
+        v-if="node.kind === 'folder' || node.kind === 'collection'"
+        :value="node.path"
+        :model-value="isOpen(node.path)"
+        @update:model-value="setOpen(node.path, $event)"
+      >
+        <template #header>
+          <EponymeNavigationLink
+            :to="entryPath(node.path)"
+            :label="node.label"
+            :depth="depth"
+            folder
+            :collection="node.kind === 'collection'"
+            :active="currentPath === entryPath(node.path)"
+          />
+        </template>
+        <template
+          v-if="node.kind === 'collection' && canEdit"
+          #action
+        >
+          <NuxtLink
+            :to="{ path: entryPath(node.path), query: { create: '1' } }"
+            class="ep:flex ep:h-7 ep:w-7 ep:items-center ep:justify-center ep:rounded-md ep:text-lg ep:font-medium ep:text-muted-ep ep:no-underline ep:transition ep:hover:bg-theme-ep ep:hover:text-white ep:focus-visible:outline-none ep:focus-visible:ring-2 ep:focus-visible:ring-white/20"
+            :aria-label="`Create in ${node.label}`"
+            title="Create entry"
+            @click.stop
+          >+</NuxtLink>
+        </template>
+        <EponymeSidebarTree
+          :nodes="node.children"
+          :base-path="basePath"
+          :current-path="currentPath"
+          :statuses="statuses"
+          :open-folders="openFolders"
+          :can-edit="canEdit"
+          :depth="depth + 1"
+          @update:open-folders="emit('update:openFolders', $event)"
+        />
+      </EPAccordion>
+      <EponymeNavigationLink
+        v-else
+        :to="entryPath(node.path)"
+        :label="node.label"
+        :depth="depth"
+        :active="currentPath === entryPath(node.path)"
+        :draft="statuses[node.path] === 'draft'"
+      />
+    </template>
+  </div>
+</template>

package/dist/runtime/components/editor/EponymeSidebarTree.vue.d.ts

@@ -0,0 +1,18 @@
+import type { EponymeStatus } from '../../server/services/eponyme-store.js';
+import type { EponymeNavigationNode } from '../../types/eponyme-navigation.js';
+type __VLS_Props = {
+    nodes: EponymeNavigationNode[];
+    basePath: string;
+    currentPath: string;
+    statuses: Record<string, EponymeStatus>;
+    openFolders: string[];
+    canEdit?: boolean;
+    depth?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:openFolders": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:openFolders"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/fields/ArrayField.d.vue.ts

@@ -0,0 +1,19 @@
+import type { ArrayFieldDefinition } from '../../types/index.js';
+import type { ValidationErrors } from '../../utils/validate-eponyme-data.js';
+type __VLS_Props = {
+    fieldName: string;
+    definition: ArrayFieldDefinition;
+    modelValue: unknown;
+    /** Dotted path of this array; items extend it with their index. */
+    path?: string;
+    /** Errors of this subtree, keyed relative to this array (`0.title`, `1`). */
+    errors?: ValidationErrors;
+    disabled?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;