katecms 0.0.0-stage → 1.0.0-beta.1

package/src/runtime/assets/styles/_mixins.scss

@@ -0,0 +1,256 @@
+@use 'sass:math';
+@use 'functions' as *;
+@use 'variables' as *;
+
+@mixin placeholder($color: #555555, $opacity: 1) {
+  &::-webkit-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+  &::-moz-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+  &::-ms-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+  &::placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+}
+
+@mixin katecms-theme-light {
+  --katecms-color-accent: #2F6FED;
+  --katecms-color-accent-hover: #1E58D4;
+  --katecms-color-accent-wash: #EAF1FD;
+  --katecms-color-ink: #141A2A;
+  --katecms-color-muted: #6B7280;
+  --katecms-color-bg: #F6F7F8;
+  --katecms-color-surface: #FFFFFF;
+  --katecms-color-border: #E6E8EB;
+  --katecms-color-on-accent: #FFFFFF;
+  --katecms-color-overlay: rgba(20, 26, 42, 0.45);
+  --katecms-color-success: #2A9A66;
+  --katecms-color-success-bg: #E7F6EE;
+  --katecms-color-info: #2A7BBD;
+  --katecms-color-info-bg: #E7F2FA;
+  --katecms-color-warning: #C4851A;
+  --katecms-color-warning-bg: #FBF3E3;
+  --katecms-color-danger: #D64545;
+  --katecms-color-danger-bg: #FDECEC;
+  --katecms-shadow-sm: 0 1px 2px rgba(20, 26, 42, 0.05);
+  --katecms-shadow-md: 0 8px 24px rgba(20, 26, 42, 0.08);
+  color-scheme: light;
+}
+
+@mixin katecms-theme-dark {
+  --katecms-color-accent: #2F6FED;
+  --katecms-color-accent-hover: #1E58D4;
+  --katecms-color-accent-wash: #243456;
+  --katecms-color-ink: #E8EBF3;
+  --katecms-color-muted: #98A2B6;
+  --katecms-color-bg: #10141C;
+  --katecms-color-surface: #1A2030;
+  --katecms-color-border: #313A4E;
+  --katecms-color-on-accent: #FFFFFF;
+  --katecms-color-overlay: rgba(0, 0, 0, 0.64);
+  --katecms-color-success: #4ECA8E;
+  --katecms-color-success-bg: #143226;
+  --katecms-color-info: #79B7E4;
+  --katecms-color-info-bg: #152A3E;
+  --katecms-color-warning: #E6B15A;
+  --katecms-color-warning-bg: #3A2C14;
+  --katecms-color-danger: #F08B8B;
+  --katecms-color-danger-bg: #3C1E1E;
+  --katecms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
+  --katecms-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
+  color-scheme: dark;
+}
+
+@mixin katecms-document {
+  body#katecms-body {
+    @include katecms-theme-light;
+    color-scheme: light dark;
+    --katecms-border-radius: #{math-rem(6)};
+    --katecms-border-radius-inter: #{math-rem(5)};
+    --katecms-sidebar-w: #{math-rem(250)};
+    --katecms-topbar-h: #{math-rem(54)};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    font-family: system-ui, sans-serif;
+    font-size: math-rem(15);
+    font-weight: 400;
+    font-style: normal;
+    font-variant: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-align: start;
+    text-indent: 0;
+    text-transform: none;
+    text-shadow: none;
+    text-rendering: optimizeLegibility;
+    color: $color-ink;
+    background-color: $color-surface;
+    background-image: none;
+    caret-color: $color-ink;
+    accent-color: $color-accent;
+    tab-size: 4;
+    hyphens: none;
+    word-break: normal;
+    overflow-wrap: break-word;
+    direction: ltr;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-height: 100%;
+    overflow: hidden;
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: $color-muted transparent;
+      font-family: inherit;
+    }
+
+    img,
+    svg,
+    video,
+    canvas {
+      max-width: 100%;
+      height: auto;
+    }
+
+    form {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: none;
+      color: inherit;
+      font: inherit;
+      min-width: 0;
+    }
+
+    &.katecms-theme-light {
+      @include katecms-theme-light;
+    }
+
+    &.katecms-theme-dark {
+      @include katecms-theme-dark;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    body#katecms-body:not(.katecms-theme-light):not(.katecms-theme-dark) {
+      @include katecms-theme-dark;
+    }
+  }
+
+  html:has(> body#katecms-body) {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin katecms-auth($root: '.katecms-auth') {
+  body#katecms-body #{$root} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: math-rem(24);
+    background: $color-bg;
+    color: $color-ink;
+
+    &__card {
+      width: 100%;
+      max-width: math-rem(400);
+      padding: math-rem(32);
+      background: $color-surface;
+      border: 1px solid $color-border;
+      border-radius: math-rem(10);
+      box-shadow: $shadow-md;
+    }
+
+    &__logo {
+      display: block;
+      width: math-rem(150);
+      height: auto;
+      margin: 0 auto math-rem(24);
+    }
+
+    &__title {
+      margin: 0 0 math-rem(8);
+      font-size: math-rem(22);
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      color: $color-ink;
+    }
+
+    &__subtitle {
+      margin: 0 0 math-rem(24);
+      font-size: math-rem(14);
+      line-height: 1.5;
+      color: $color-muted;
+    }
+
+    &__form {
+      display: flex;
+      flex-direction: column;
+      gap: math-rem(14);
+    }
+
+    &__actions {
+      margin-top: math-rem(6);
+
+      :deep(.katecms-btn) {
+        width: 100%;
+      }
+    }
+
+    &__error {
+      margin-top: math-rem(16);
+      padding: math-rem(12) math-rem(14);
+      border-radius: $border-radius;
+      background: $color-danger-bg;
+      color: $color-danger;
+      font-size: math-rem(14);
+      line-height: 1.5;
+    }
+
+    &__footer {
+      margin: math-rem(20) 0 0;
+      font-size: math-rem(13);
+      color: $color-muted;
+      text-align: center;
+
+      a {
+        color: $color-accent;
+        font-weight: 600;
+        text-decoration: none;
+
+        &:hover {
+          color: $color-accent-hover;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+
+@mixin katecms-wrapper {
+  body#katecms-body {
+    @content;
+  }
+}

package/src/runtime/assets/styles/_variables.scss

@@ -0,0 +1,35 @@
+// Values are set on body#katecms-body in katecms-document.
+
+// Accent
+$color-accent: var(--katecms-color-accent);
+$color-accent-hover: var(--katecms-color-accent-hover);
+$color-accent-wash: var(--katecms-color-accent-wash);
+
+$color-ink: var(--katecms-color-ink);
+$color-muted: var(--katecms-color-muted);
+$color-bg: var(--katecms-color-bg);
+$color-surface: var(--katecms-color-surface);
+$color-border: var(--katecms-color-border);
+$color-on-accent: var(--katecms-color-on-accent);
+$color-overlay: var(--katecms-color-overlay);
+
+// Status
+$color-success: var(--katecms-color-success);
+$color-success-bg: var(--katecms-color-success-bg);
+$color-info: var(--katecms-color-info);
+$color-info-bg: var(--katecms-color-info-bg);
+$color-warning: var(--katecms-color-warning);
+$color-warning-bg: var(--katecms-color-warning-bg);
+$color-danger: var(--katecms-color-danger);
+$color-danger-bg: var(--katecms-color-danger-bg);
+
+// Shadow
+$shadow-sm: var(--katecms-shadow-sm);
+$shadow-md: var(--katecms-shadow-md);
+
+// Radius
+$border-radius: var(--katecms-border-radius);
+$border-radius-inter: var(--katecms-border-radius-inter);
+
+$sidebar-w: var(--katecms-sidebar-w);
+$topbar-h: var(--katecms-topbar-h);

package/src/runtime/composables/getCollection.ts

@@ -0,0 +1,253 @@
+import { computed, getCurrentInstance } from 'vue'
+import { /* createError, */ useAsyncData, useNuxtApp, useRequestFetch, useRoute } from '#imports'
+import { buildPublicPath, resolveArchivePath } from '@katecms/core'
+import type { AdminEntry, ResolveResponse } from '../utils/collections'
+import { isTruthyQueryParam, parsePublicStatusParam } from '../utils/preview'
+import { MIRAICMS_COLLECTION_HOOK } from './useKateCmsExtensions'
+import type { KateCmsPublicPage } from './useKateCmsExtensions'
+
+const collectionHookTargets = new WeakSet<object>()
+
+function samePublicPath(left: string, right: string): boolean {
+  const normalize = (path: string) => {
+    const withSlash = path.startsWith('/') ? path : `/${path}`
+    return withSlash.length > 1 && withSlash.endsWith('/') ? withSlash.slice(0, -1) : withSlash
+  }
+  return normalize(left) === normalize(right)
+}
+
+function useCurrentPublicPath() {
+  const route = useRoute()
+  return computed(() => {
+    const slugParam = route.params.slug
+    if (Array.isArray(slugParam) && slugParam.length > 0) {
+      return `/${slugParam.map(String).join('/')}`
+    }
+    if (typeof slugParam === 'string' && slugParam) {
+      return `/${slugParam}`
+    }
+    const path = route.path || '/'
+    return path.length > 1 && path.endsWith('/') ? path.slice(0, -1) : path
+  })
+}
+
+// function resolveFetchError(err: unknown): { statusCode: number, statusMessage: string } {
+//   const e = err as {
+//     statusCode?: number
+//     statusMessage?: string
+//     message?: string
+//     data?: { statusCode?: number, statusMessage?: string, message?: string }
+//   } | null
+//
+//   const statusCode = e?.data?.statusCode || e?.statusCode || 404
+//   const statusMessage = e?.data?.statusMessage
+//     || e?.statusMessage
+//     || e?.data?.message
+//     || 'Page not found.'
+//
+//   return { statusCode, statusMessage }
+// }
+
+function statusQueryValue(
+  status: GetCollectionOptions['status'],
+): string | undefined {
+  if (!status) {
+    return undefined
+  }
+  return Array.isArray(status) ? status.join(',') : status
+}
+
+function pageQueryValue(
+  value: unknown,
+  fallback?: number,
+  allowUnlimited = false,
+): number | undefined {
+  if (
+    typeof fallback === 'number'
+    && Number.isInteger(fallback)
+    && (fallback >= 1 || (allowUnlimited && fallback === -1))
+  ) {
+    return fallback
+  }
+  const raw = Array.isArray(value) ? value[0] : value
+  const n = Number(raw)
+  if (allowUnlimited && n === -1) {
+    return -1
+  }
+  if (!Number.isInteger(n) || n < 1) {
+    return undefined
+  }
+  return n
+}
+
+export interface GetCollectionOptions {
+  /** Override the path (default: current route). */
+  path?: string
+  /**
+   * Include drafts when the requester may `collections:read` the matched
+   * collection. Also read from `?preview=1` on the current route.
+   */
+  preview?: boolean
+  /**
+   * Narrow statuses. `draft` is ignored unless preview is granted.
+   * Also read from `?status=` on the current route.
+   */
+  status?: 'published' | 'draft' | Array<'published' | 'draft'>
+  /** Archive listing page. Also read from `?page=` on the current route. */
+  page?: number
+  /**
+   * Archive listing page size. Also read from `?perPage=` on the current route.
+   * Default: the matched collection's `perPage` (10). `-1` returns every entry.
+   */
+  perPage?: number
+}
+
+/**
+ * Resolve the CMS entry or archive for the current (or given) path via
+ * collection `rewrite` / `has_archive`.
+ *
+ * Public pages stay published-only unless `preview` is set (option or
+ * `?preview=1`) and the visitor is signed in with read access.
+ * Collections with `public: false` do not resolve.
+ *
+ * A call for the current route emits `katecms:collection` with the resolved
+ * page. Addons use that hook to apply document head.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const { entry, link } = await getCollection()
+ * const preview = await getCollection({ preview: true, status: 'draft' })
+ * const { isArchive, entries } = await getCollection()
+ * </script>
+ * ```
+ */
+export async function getCollection(options: GetCollectionOptions = {}) {
+  const nuxtApp = useNuxtApp()
+  const caller = getCurrentInstance()
+  const route = useRoute()
+  const currentPath = useCurrentPublicPath()
+  const tracksDocument = options.path == null || samePublicPath(options.path, currentPath.value)
+  const path = computed(() => options.path || currentPath.value)
+  const preview = computed(() => options.preview ?? isTruthyQueryParam(route.query.preview))
+  const status = computed(() =>
+    statusQueryValue(options.status)
+    ?? ((parsePublicStatusParam(route.query.status) ?? []).join(',') || undefined),
+  )
+  const page = computed(() => pageQueryValue(route.query.page, options.page))
+  const perPage = computed(() => pageQueryValue(route.query.perPage, options.perPage, true))
+  const requestFetch = useRequestFetch()
+
+  const { data, pending, error, refresh } = await useAsyncData(
+    `katecms-resolve:${path.value}:${preview.value ? '1' : '0'}:${status.value ?? ''}:${page.value ?? ''}:${perPage.value ?? ''}`,
+    () => requestFetch<ResolveResponse>('/api/_katecms/resolve', {
+      query: {
+        path: path.value,
+        ...(preview.value ? { preview: '1' } : {}),
+        ...(status.value ? { status: status.value } : {}),
+        ...(page.value ? { page: page.value } : {}),
+        ...(perPage.value ? { perPage: perPage.value } : {}),
+      },
+    }),
+    { watch: [path, preview, status, page, perPage] },
+  )
+
+  const resolved = data.value
+  const isArchivePayload = resolved?.kind === 'archive'
+  const isTermPayload = resolved?.kind === 'term'
+  if (error.value || !resolved || (!isArchivePayload && !isTermPayload && resolved.kind !== 'entry')) {
+    // const { statusCode, statusMessage } = resolveFetchError(error.value)
+    // throw createError({ statusCode, statusMessage })
+    return []
+  }
+  if (resolved.kind === 'entry' && !resolved.entry) {
+    return []
+  }
+  if (resolved.kind === 'term' && !resolved.term) {
+    return []
+  }
+
+  const kind = computed(() => data.value?.kind ?? 'entry')
+  const isArchive = computed(() => data.value?.kind === 'archive')
+  const isTerm = computed(() => data.value?.kind === 'term')
+  const entry = computed(() => data.value?.kind === 'entry' ? data.value.entry : null)
+  const term = computed(() => data.value?.kind === 'term' ? data.value.term : null)
+  const termPath = computed(() => data.value?.kind === 'term' ? data.value.path : null)
+  const entries = computed(() => {
+    if (data.value?.kind === 'archive' || data.value?.kind === 'term') {
+      return data.value.entries
+    }
+    return []
+  })
+  const collection = computed(() => {
+    const resolvedPage = data.value
+    if (resolvedPage?.kind === 'entry' || resolvedPage?.kind === 'archive') {
+      return resolvedPage.collection
+    }
+    return null
+  })
+  const isPreview = computed(() => {
+    const resolvedPage = data.value
+    if (resolvedPage?.kind === 'entry' || resolvedPage?.kind === 'archive') {
+      return resolvedPage.preview
+    }
+    return false
+  })
+  const archivePage = computed(() => data.value?.kind === 'archive' ? data.value.page : 1)
+  const archivePerPage = computed(() => data.value?.kind === 'archive' ? data.value.perPage : 0)
+  const total = computed(() => data.value?.kind === 'archive' ? data.value.total : 0)
+  const link = computed(() => {
+    if (data.value?.kind === 'term') {
+      return data.value.path
+    }
+    const meta = collection.value
+    if (!meta) {
+      return null
+    }
+    if (data.value?.kind === 'archive') {
+      return resolveArchivePath(meta, meta.slug)
+    }
+    const resolvedEntry = entry.value
+    if (!resolvedEntry) {
+      return null
+    }
+    return buildPublicPath(meta.rewrite, meta.slug, resolvedEntry.slugPath || resolvedEntry.slug)
+  })
+
+  function permalink(item: AdminEntry): string | null {
+    const meta = collection.value
+    if (!meta || !meta.public) {
+      return null
+    }
+    return buildPublicPath(meta.rewrite, meta.slug, item.slugPath || item.slug)
+  }
+
+  if (tracksDocument && caller && !collectionHookTargets.has(caller)) {
+    collectionHookTargets.add(caller)
+    const page: KateCmsPublicPage = { isArchive, isTerm, entry, term, collection, link }
+    nuxtApp.runWithContext(() => {
+      void nuxtApp.callHook(MIRAICMS_COLLECTION_HOOK, page)
+    })
+  }
+
+  return {
+    kind,
+    isArchive,
+    isTerm,
+    entry,
+    term,
+    termPath,
+    entries,
+    collection,
+    link,
+    permalink,
+    preview: isPreview,
+    page: archivePage,
+    perPage: archivePerPage,
+    total,
+    pending,
+    error,
+    refresh,
+    path,
+  }
+}

package/src/runtime/composables/getOptions.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue'
+import { useAsyncData, useRequestFetch } from '#imports'
+import { optionApi } from '../utils/options'
+import type { OptionPageResponse } from '../utils/options'
+
+export interface GetOptionsOptions {
+  /** Option page slug from CMS config (e.g. `site`). */
+  option: string
+}
+
+/**
+ * Load stored values for an options page.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const { values } = await getOptions({ option: 'site' })
+ * </script>
+ * ```
+ */
+export async function getOptions(options: GetOptionsOptions) {
+  const option = computed(() => options.option)
+  const requestFetch = useRequestFetch()
+
+  const { data, pending, error, refresh } = await useAsyncData(
+    `katecms-options:${option.value}`,
+    () => requestFetch<OptionPageResponse>(optionApi(option.value)),
+    { watch: [option] },
+  )
+
+  const values = computed(() => data.value?.values ?? {})
+  const slug = computed(() => data.value?.page.slug ?? option.value)
+
+  return {
+    slug,
+    values,
+    pending,
+    error,
+    refresh,
+    option,
+  }
+}