@hywax/cms 0.0.2 → 0.0.3

package/.nuxt/cms/index.ts

@@ -1 +1,2 @@
-export { default as buttonClear } from './button-clear'
+export { default as buttonClear } from './button-clear'
+export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/uplora-image.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    "lqip": "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    "picture": "aspect-3/2 col-[1] row-[1]",
+    "img": "w-full h-full block object-cover"
+  }
+}

package/cli/commands/make/component.mjs

@@ -0,0 +1,75 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import process from 'node:process'
+import { defineCommand } from 'citty'
+import { consola } from 'consola'
+import { resolve } from 'pathe'
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+import templates from '../../templates.mjs'
+import { appendFile, sortFile } from '../../utils.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'component',
+    description: 'Создать новый компонент',
+  },
+  args: {
+    name: {
+      type: 'positional',
+      required: true,
+      description: 'Имя компонента',
+    },
+    prose: {
+      type: 'boolean',
+      description: 'Создать компонент для контента',
+    },
+    template: {
+      type: 'string',
+      description: 'Сгенерировать только шаблон',
+    },
+  },
+  async setup({ args }) {
+    const name = args.name
+    if (!name) {
+      consola.error('`name` argument is missing!')
+      process.exit(1)
+    }
+
+    const path = resolve('.')
+
+    for (const template of Object.keys(templates)) {
+      if (args.template && template !== args.template) {
+        continue
+      }
+
+      const { filename, contents } = templates[template](args)
+      if (!contents) {
+        continue
+      }
+
+      const filePath = resolve(path, filename)
+
+      if (existsSync(filePath)) {
+        consola.error(`🚨 ${filePath} уже существует!`)
+        continue
+      }
+
+      await fsp.writeFile(filePath, `${contents.trim()}\n`)
+
+      consola.success(`🪄 ${filePath} создан!`)
+    }
+
+    if (args.template) {
+      return
+    }
+
+    const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}index.ts`)
+    await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
+    await sortFile(themePath)
+
+    if (!args.prose) {
+      const typesPath = resolve(path, 'src/runtime/types/index.ts')
+      await appendFile(typesPath, `export * from '../components/${splitByCase(name).map((p) => upperFirst(p)).join('')}.vue'`)
+      await sortFile(typesPath)
+    }
+  },
+})

package/cli/commands/make/index.mjs

@@ -0,0 +1,12 @@
+import { defineCommand } from 'citty'
+import component from './component.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'make',
+    description: 'Команды для создания новых сущностей Hywax CMS',
+  },
+  subCommands: {
+    component,
+  },
+})

package/cli/index.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+import { defineCommand, runMain } from 'citty'
+import make from './commands/make/index.mjs'
+
+const main = defineCommand({
+  meta: {
+    name: 'cms',
+    description: 'Hywax CMS CLI',
+  },
+  subCommands: {
+    make,
+  },
+})
+
+runMain(main)

package/cli/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@hywax/cms-cli",
+  "type": "module",
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "dependencies": {
+    "citty": "^0.1.6",
+    "consola": "^3.4.2",
+    "pathe": "^2.0.3",
+    "scule": "^1.3.0"
+  }
+}

package/cli/templates.mjs

@@ -0,0 +1,101 @@
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+
+function component({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
+  const path = 'cms'
+
+  return {
+    filename: `src/runtime/components/${prose ? 'prose/' : ''}${upperName}.vue`,
+    contents: `
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '${prose ? '../../types' : '../types'}'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${kebabName}'
+import { computed, useAppConfig } from '#imports'
+import { Primitive } from 'reka-ui'
+import { tv } from '${prose ? '../../utils/tv' : '../utils/tv'}'
+
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}>
+
+export interface ${upperName}Props {
+  as?: any
+  class?: any
+  ui?: ${upperName}['slots']
+}
+
+export interface ${upperName}Emits {
+  // 'update:modelValue': [string]
+}
+
+export interface ${upperName}Slots {
+  default?: () => any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<${upperName}Props>()
+const emit = defineEmits<${upperName}Emits>()
+defineSlots<${upperName}Slots>()
+
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.cms?.${camelName} || {}) })())
+</script>
+`,
+  }
+}
+
+function test({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+
+  return {
+    filename: `test/runtime/components/${upperName}.spec.ts`,
+    contents: prose
+      ? undefined
+      : `
+import type { ${upperName}Props, ${upperName}Slots } from '../../../src/runtime/components/${upperName}.vue'
+import { describe, it, expect } from 'vitest'
+import ${upperName} from '../../../src/runtime/components/${upperName}.vue'
+import ComponentRender from '../../component-render'
+
+describe('${upperName}', () => {
+  it.each([
+    // Props
+    ['с алиасом', { props: { as: 'section' } }],
+    ['с class', { props: { class: '' } }],
+    ['с ui', { props: { ui: {} } }],
+    // Slots
+    ['с дефолтным слотом', { slots: { default: () => 'Default slot' } }]
+  ])('рендерит %s корректно', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ${upperName})
+    expect(html).toMatchSnapshot()
+  })
+})
+`,
+  }
+}
+
+function theme({ name, prose }) {
+  const kebabName = kebabCase(name)
+
+  return {
+    filename: `src/theme/${prose ? 'prose/' : ''}${kebabName}.ts`,
+    contents: `
+export default {
+  slots: {
+    root: '',
+  },
+}
+`,
+  }
+}
+
+export default { component, test, theme }

package/cli/utils.mjs

@@ -0,0 +1,31 @@
+import { promises as fsp } from 'node:fs'
+
+export async function sortFile(path) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  const lines = file.trim().split('\n').sort()
+
+  await fsp.writeFile(path, `${lines.join('\n')}\n`)
+}
+
+export async function appendFile(path, contents) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  if (!file.includes(contents)) {
+    await fsp.writeFile(path, `${file.trim()}\n${contents}\n`)
+  }
+}
+
+export function normalizeLocale(locale) {
+  if (!locale) {
+    return ''
+  }
+
+  if (locale.includes('_')) {
+    return locale.split('_')
+      .map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
+      .join('-')
+  }
+
+  return locale.toLowerCase()
+}

package/dist/module.d.mts

@@ -1,6 +1,16 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export * from '../dist/runtime/types/index.js';
 
+declare module '@nuxt/schema' {
+    interface ConfigSchema {
+        public?: {
+            cms: {
+                fluxorUrl: string;
+            };
+        };
+    }
+}
+
 interface ModuleOptions {
     /**
      * Name of the module
@@ -12,6 +22,11 @@ interface ModuleOptions {
      * @defaultValue 'C'
      */
     prefix?: string;
+    /**
+     * Fluxor URL
+     * @defaultValue 'https://fluxor.uplora.ru'
+     */
+    fluxorUrl?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -1,10 +1,10 @@
-import { addTypeTemplate, addTemplate, defineNuxtModule, hasNuxtModule, installModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { addTypeTemplate, addTemplate, defineNuxtModule, hasNuxtModule, installModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 import 'node:url';
 import { kebabCase } from 'scule';
 
 const name = "@hywax/cms";
-const version = "0.0.2";
+const version = "0.0.3";
 
 const buttonClear = {
   slots: {
@@ -12,9 +12,19 @@ const buttonClear = {
   }
 };
 
+const uploraImage$1 = {
+  slots: {
+    root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    lqip: "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    picture: "aspect-3/2 col-[1] row-[1]",
+    img: "w-full h-full block object-cover"
+  }
+};
+
 const theme = {
   __proto__: null,
-  buttonClear: buttonClear
+  buttonClear: buttonClear,
+  uploraImage: uploraImage$1
 };
 
 const uploraImage = {
@@ -125,9 +135,13 @@ const module = defineNuxtModule({
   },
   defaults: {
     name: "cms",
-    prefix: "C"
+    prefix: "C",
+    fluxorUrl: "https://fluxor.uplora.ru"
   },
   async setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.cms = defu(nuxt.options.runtimeConfig.public.cms || {}, {
+      fluxorUrl: options.fluxorUrl
+    });
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
       icons
     });
@@ -177,6 +191,7 @@ const module = defineNuxtModule({
     });
     addImportsDir(resolve("./runtime/composables"));
     addTemplates(options);
+    addPlugin(resolve("./runtime/plugins/api.ts"));
   }
 });
 

package/dist/runtime/components/ButtonClear.vue

@@ -13,8 +13,7 @@
 
 <script>
 import theme from "#build/cms/button-clear";
-import { useAppConfig } from "#imports";
-import { computed } from "vue";
+import { computed, useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
 </script>
 

package/dist/runtime/components/UploraImage.vue

@@ -0,0 +1,108 @@
+<template>
+  <figure :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div
+      v-if="lqip"
+      :class="ui.lqip({ class: props.ui?.lqip })"
+      :style="{
+  backgroundImage: `url(${lqip})`
+}"
+    />
+    <picture :class="ui.picture({ class: props.ui?.picture })">
+      <template v-if="sources.length">
+        <source
+          v-for="(source, key) in sources"
+          :key="key"
+          :srcset="source.srcset"
+          :type="source.type"
+        >
+      </template>
+
+      <img
+        ref="imageRef"
+        v-bind="imageAttrs"
+        :src="image.img"
+        :srcset="image?.srcset"
+        :alt="alt"
+        :loading="loading"
+        :class="ui.img({ class: props.ui?.img })"
+      >
+    </picture>
+  </figure>
+</template>
+
+<script>
+import theme from "#build/cms/uplora-image";
+import { computed, onMounted, useAppConfig, useHead, useNuxtApp, useTemplateRef } from "#imports";
+import { buildUploraImage } from "../utils";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  id: { type: String, required: true },
+  alt: { type: String, required: true },
+  formats: { type: Array, required: false },
+  sizes: { type: Array, required: false },
+  lqip: { type: String, required: false },
+  loading: { type: String, required: false, default: "lazy" },
+  preload: { type: [Boolean, Object], required: false },
+  nonce: { type: String, required: false },
+  imgAttrs: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["load", "error"]);
+const nuxtApp = useNuxtApp();
+const initialLoad = nuxtApp.isHydrating;
+const image = computed(() => buildUploraImage({
+  id: props.id,
+  formats: props.formats,
+  sizes: props.sizes
+}));
+const sources = computed(() => {
+  if (image.value.sources.length > 1) {
+    return image.value.sources.slice(1);
+  }
+  return [];
+});
+if (import.meta.server && props.preload) {
+  useHead({ link: () => {
+    if (!image.value.img) {
+      return [];
+    }
+    const link = {
+      rel: "preload",
+      as: "image",
+      imagesrcset: image.value.srcset,
+      nonce: props.nonce,
+      ...typeof props.preload !== "boolean" && props.preload?.fetchPriority ? { fetchpriority: props.preload.fetchPriority } : {}
+    };
+    return [link];
+  } });
+}
+const imageRef = useTemplateRef("imageRef");
+const imageAttrs = computed(() => ({
+  ...props.imgAttrs || {},
+  ...import.meta.server ? { onerror: "this.setAttribute('data-error', 1)" } : {}
+}));
+onMounted(() => {
+  if (!imageRef.value) {
+    return;
+  }
+  if (imageRef.value.complete && initialLoad) {
+    if (imageRef.value.getAttribute("data-error")) {
+      emit("error", new Event("error"));
+    } else {
+      emit("load", new Event("load"));
+    }
+  }
+  imageRef.value.onload = (event) => {
+    emit("load", event);
+  };
+  imageRef.value.onerror = (event) => {
+    emit("error", event);
+  };
+});
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.uploraImage || {} })());
+</script>

package/dist/runtime/components/UploraImage.vue.d.ts

@@ -0,0 +1,34 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ImgHTMLAttributes } from 'vue';
+import type { ComponentConfig, ImageFormat, ImageSize } from '../types';
+import theme from '#build/cms/uplora-image';
+export type UploraImage = ComponentConfig<typeof theme, AppConfig, 'uploraImage'>;
+export interface UploraImageProps {
+    id: string;
+    alt: string;
+    formats?: ImageFormat[];
+    sizes?: ImageSize[];
+    lqip?: string;
+    loading?: 'lazy' | 'eager';
+    preload?: boolean | {
+        fetchPriority: 'auto' | 'high' | 'low';
+    };
+    nonce?: string;
+    imgAttrs?: ImgHTMLAttributes;
+    class?: any;
+    ui?: UploraImage['slots'];
+}
+export interface UploraImageEmits {
+    load: [Event];
+    error: [string | Event];
+}
+declare const _default: import("vue").DefineComponent<UploraImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (args_0: string | Event) => any;
+    load: (args_0: Event) => any;
+}, string, import("vue").PublicProps, Readonly<UploraImageProps> & Readonly<{
+    onError?: ((args_0: string | Event) => any) | undefined;
+    onLoad?: ((args_0: Event) => any) | undefined;
+}>, {
+    loading: "lazy" | "eager";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/prose/UploraImage.vue

@@ -6,8 +6,7 @@
 
 <script>
 import theme from "#build/cms/prose/uplora-image";
-import { useAppConfig } from "#imports";
-import { computed } from "vue";
+import { computed, useAppConfig } from "#imports";
 import { tv } from "../../utils/tv";
 </script>
 

package/dist/runtime/composables/useApi.d.ts

@@ -0,0 +1,14 @@
+import type { AvailableRouterMethod, NitroFetchRequest } from 'nitropack';
+import type { AsyncData, FetchResult, UseFetchOptions } from 'nuxt/app';
+import type { DefaultAsyncDataValue } from 'nuxt/app/defaults';
+import type { FetchError } from 'ofetch';
+import type { Ref } from 'vue';
+type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? keyof T extends K[number] ? T : K[number] extends never ? T : Pick<T, K[number]> : T;
+type KeysOf<T> = Array<T extends T ? (keyof T extends string ? keyof T : never) : never>;
+/**
+ * На данный момент нет возможности использовать `useFetch` со своим $fetch,
+ * поэтому приходится использовать костыль.
+ * https://github.com/nuxt/nuxt/issues/14736
+ */
+export declare function useApi<ResT = void, ErrorT = FetchError, ReqT extends NitroFetchRequest = NitroFetchRequest, Method extends AvailableRouterMethod<ReqT> = ResT extends void ? 'get' extends AvailableRouterMethod<ReqT> ? 'get' : AvailableRouterMethod<ReqT> : AvailableRouterMethod<ReqT>, _ResT = ResT extends void ? FetchResult<ReqT, Method> : ResT, DataT = _ResT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = DefaultAsyncDataValue>(request: Ref<ReqT> | ReqT | (() => ReqT), opts?: UseFetchOptions<_ResT, DataT, PickKeys, DefaultT, ReqT, Method>): AsyncData<PickFrom<DataT, PickKeys> | DefaultT, ErrorT | DefaultAsyncDataValue>;
+export {};

package/dist/runtime/composables/useApi.js

@@ -0,0 +1,16 @@
+import { useFetch, useNuxtApp } from "#imports";
+import { defu } from "defu";
+export function useApi(request, opts) {
+  const $api = useNuxtApp().$api;
+  return useFetch(
+    request,
+    defu(
+      {
+        $fetch: $api
+      },
+      {
+        ...opts
+      }
+    )
+  );
+}

package/dist/runtime/composables/useSeoStats.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { SEO } from '../types';
+interface SEOStats {
+    progress: number;
+    color: 'error' | 'warning' | 'success';
+}
+interface UseSEOStatsReturn {
+    title: ComputedRef<SEOStats>;
+    description: ComputedRef<SEOStats>;
+}
+export declare function useSEOStats(options: MaybeRefOrGetter<SEO>): UseSEOStatsReturn;
+export {};

package/dist/runtime/composables/useSeoStats.js

@@ -0,0 +1,44 @@
+import { computed, toValue } from "#imports";
+function computeScore(length, recommendedLength, maxLength) {
+  if (length === 0) {
+    return 0;
+  }
+  if (length < recommendedLength) {
+    return length / recommendedLength * 100;
+  }
+  if (length > maxLength) {
+    return Math.max(0, 100 - (length - maxLength) / maxLength * 100);
+  }
+  return 100;
+}
+function computeColor(score) {
+  if (score < 30) {
+    return "error";
+  }
+  if (score < 70) {
+    return "warning";
+  }
+  return "success";
+}
+export function useSEOStats(options) {
+  const title = computed(() => {
+    const value = toValue(options);
+    const score = computeScore(value.title.length, 45, 60);
+    return {
+      progress: Math.round(score),
+      color: computeColor(score)
+    };
+  });
+  const description = computed(() => {
+    const value = toValue(options);
+    const score = computeScore(value.description.length, 130, 160);
+    return {
+      progress: Math.round(score),
+      color: computeColor(score)
+    };
+  });
+  return {
+    title,
+    description
+  };
+}

package/dist/runtime/plugins/api.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("#app").Plugin<{
+    api: import("nitropack/types").$Fetch<unknown, import("nitropack/types").NitroFetchRequest>;
+}> & import("#app").ObjectPlugin<{
+    api: import("nitropack/types").$Fetch<unknown, import("nitropack/types").NitroFetchRequest>;
+}>;
+export default _default;

package/dist/runtime/plugins/api.js

@@ -0,0 +1,26 @@
+import { defineNuxtPlugin, navigateTo, useAppConfig, useToast } from "#imports";
+export default defineNuxtPlugin({
+  name: "cms-api",
+  async setup() {
+    const toast = useToast();
+    const appConfig = useAppConfig();
+    const api = $fetch.create({
+      async onResponseError({ response }) {
+        toast.add({
+          title: "\u041E\u0448\u0438\u0431\u043A\u0430",
+          description: response._data.message ?? "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A",
+          color: "error",
+          icon: appConfig.ui.icons.close
+        });
+        if (response.status === 401) {
+          await navigateTo({ name: "index" });
+        }
+      }
+    });
+    return {
+      provide: {
+        api
+      }
+    };
+  }
+});

package/dist/runtime/types/image.d.ts

@@ -0,0 +1,48 @@
+import type { ImageExtension, ImageMimeType } from '@uplora/formats';
+export type ImageFormat = ImageExtension;
+/**
+ * Размер изображения
+ */
+export interface ImageSize {
+    /**
+     * Ширина
+     *
+     * @example 1024
+     */
+    width?: number;
+    /**
+     * Высота
+     *
+     * @example 1024
+     */
+    height?: number;
+    /**
+     * Описание размера
+     *
+     * @example 2x, 512px
+     */
+    descriptor: string;
+}
+/**
+ * Источник изображения
+ */
+export interface ImageSource {
+    /**
+     * Image URL
+     *
+     * @example https://uplora.ru/fgu1yd2ncj05iogcooz31u55
+     */
+    img: string;
+    /**
+     * Image srcset
+     *
+     * @example https://uplora.ru/fgu1yd2ncj05iogcooz31u55/-/format/jpg 1x, https://uplora.ru/fgu1yd2ncj05iogcooz31u55/-/format/jpg 2x
+     */
+    srcset?: string;
+    /**
+     * Image mime type
+     *
+     * @example image/jpeg
+     */
+    type?: ImageMimeType;
+}

package/dist/runtime/types/index.d.ts

@@ -1,2 +1,5 @@
 export * from '../components/ButtonClear.vue';
+export * from '../components/UploraImage.vue';
+export * from './image';
+export * from './seo';
 export * from './utils';

package/dist/runtime/types/index.js

@@ -1,2 +1,5 @@
 export * from "../components/ButtonClear.vue";
+export * from "../components/UploraImage.vue";
+export * from "./image.js";
+export * from "./seo.js";
 export * from "./utils.js";

package/dist/runtime/types/seo.d.ts

@@ -0,0 +1,4 @@
+export interface SEO {
+    title: string;
+    description: string;
+}

package/dist/runtime/utils/image.d.ts

@@ -0,0 +1,30 @@
+import type { Filters } from '@uplora/serializer';
+import type { ImageFormat, ImageSize, ImageSource } from '../types';
+/**
+ * Создает функцию для получения URL изображения из Uplora
+ */
+export declare function createUploraImageResolver(): (id: string, filters?: Filters) => string;
+export interface BuildUploraImageOptions {
+    id: string;
+    formats?: ImageFormat[];
+    sizes?: ImageSize[];
+}
+export interface BuildUploraImageReturn {
+    img: string;
+    original: string;
+    sources: ImageSource[];
+    srcset?: string;
+}
+/**
+ * Создает URL изображения из Uplora
+ */
+export declare function buildUploraImage(options: BuildUploraImageOptions): BuildUploraImageReturn;
+export interface GenerateImageSizesOptions {
+    width: number;
+    minWidth?: number;
+    step?: number;
+}
+/**
+ * Генерирует размеры изображения
+ */
+export declare function generateImageSizes(options: GenerateImageSizesOptions): ImageSize[];

package/dist/runtime/utils/image.js

@@ -0,0 +1,81 @@
+import { useRuntimeConfig } from "#imports";
+import { imagesExtensionsToMimeTypes } from "@uplora/formats";
+import { serialize } from "@uplora/serializer";
+export function createUploraImageResolver() {
+  const runtimeConfig = useRuntimeConfig();
+  const { fluxorUrl } = runtimeConfig.public.cms;
+  return (id, filters) => {
+    const serializeFilters = filters ? serialize(filters) : "";
+    return `${fluxorUrl}/${id}${serializeFilters ? `/${serializeFilters}` : ""}`;
+  };
+}
+export function buildUploraImage(options) {
+  const resolver = createUploraImageResolver();
+  const original = resolver(options.id);
+  const sizes = options.sizes ?? [{ descriptor: "1x" }];
+  const sources = [];
+  function makeSrcset(format) {
+    if (sizes && sizes.length > 1) {
+      return sizes.map((size) => `${resolver(options.id, { resize: { width: size.width, height: size.height }, format })} ${size.descriptor}`).join(", ");
+    }
+    return null;
+  }
+  if (options.formats) {
+    for (const format of options.formats) {
+      const srcset = makeSrcset(format);
+      sources.push({
+        img: resolver(options.id, {
+          resize: {
+            width: sizes[0]?.width,
+            height: sizes[0]?.height
+          },
+          format
+        }),
+        ...srcset ? { srcset } : {},
+        type: imagesExtensionsToMimeTypes[format]
+      });
+    }
+  } else {
+    const srcset = makeSrcset();
+    sources.push({
+      img: resolver(options.id, {
+        resize: {
+          width: sizes[0]?.width,
+          height: sizes[0]?.height
+        }
+      }),
+      ...srcset ? { srcset } : {}
+    });
+  }
+  return {
+    img: original,
+    original,
+    ...sources.length > 0 ? {
+      img: sources[0]?.img,
+      srcset: sources[0]?.srcset
+    } : {},
+    sources
+  };
+}
+export function generateImageSizes(options) {
+  const { width, minWidth = 640, step = 0.7 } = options;
+  const sizes = [];
+  let currentWidth = width;
+  while (true) {
+    const normalizedWidth = Math.round(currentWidth);
+    sizes.push({
+      width: normalizedWidth,
+      descriptor: `${Math.round(normalizedWidth * step)}w`
+    });
+    currentWidth *= step;
+    if (currentWidth < minWidth) {
+      const normalizedWidth2 = Math.round(currentWidth);
+      sizes.push({
+        width: normalizedWidth2,
+        descriptor: `${Math.round(normalizedWidth2 * step)}w`
+      });
+      break;
+    }
+  }
+  return sizes;
+}

package/dist/runtime/utils/index.d.ts

@@ -1 +1 @@
-export {};
+export * from './image';

package/dist/runtime/utils/index.js

@@ -0,0 +1 @@
+export * from "./image.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hywax/cms",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "repository": {
     "type": "git",
@@ -44,10 +44,14 @@
       ]
     }
   },
+  "bin": {
+    "cms": "./cli/index.mjs"
+  },
   "style": "./dist/runtime/index.css",
   "files": [
     ".nuxt/cms",
     ".nuxt/cms.css",
+    "cli",
     "dist"
   ],
   "dependencies": {
@@ -56,6 +60,8 @@
     "@nuxt/ui-pro": "^3.1.3",
     "@nuxtjs/mdc": "^0.17.0",
     "@unpress/mdc-prosemirror": "0.1.12-beta.2",
+    "@uplora/formats": "^0.1.0",
+    "@uplora/serializer": "^0.1.3",
     "@vueuse/nuxt": "^13.4.0",
     "defu": "^6.1.4",
     "nuxt-auth-utils": "^0.5.20",
@@ -82,6 +88,9 @@
     "vitest": "^3.2.3",
     "vue-tsc": "^2.2.10"
   },
+  "resolutions": {
+    "@hywax/cms": "workspace:*"
+  },
   "lint-staged": {
     "*.ts": "pnpm run lint"
   },