Holy Extensions

Библиотека модулей для расширения функциональности веб-сайтов. История изменений

Быстрый старт для конструкторов сайтов

Просто добавьте эти строки в HTML-код вашего сайта:

<!-- Минимальный пример установки -->
<link rel="stylesheet" href="https://unpkg.com/holy-extensions/dist/assets/holy-extensions.css" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/holy-extensions/dist/holy-extensions.min.js"></script>
<script>
  window.holyxeyModal.set({
    title: 'Мы используем cookie',
    description: 'Продолжая пользоваться сайтом, вы соглашаетесь с Политикой конфиденциальности',
    backgroundColor: '#FFFFFF',
    textColor: '#555555',
    accentColor: '#d83d78',
    fontFamily: 'Arial',
  })
</script>

Установка через NPM

npm install holy-extensions
# или
yarn add holy-extensions
# или
bun add holy-extensions

Модули

CookiesModal

Модуль для отображения уведомления о использовании cookies на сайте. Построен на Vue 3.

Использование

// Как ES модуль
import { holyxeyModal } from 'holy-extensions'

holyxeyModal.set({
  title: 'Мы используем cookie',
  description: 'Продолжая пользоваться сайтом, вы соглашаетесь с Политикой конфиденциальности',
  backgroundColor: '#FFFFFF',
  textColor: '#555555',
  accentColor: '#d83d78',
  fontFamily: 'Jost',
  policyLink: '/policy',
  policyOpenText: 'Открыть документ',
  policyAcceptText: 'Принять',
})

// Или как глобальный объект
window.holyxeyModal.set({
  // конфигурация...
})

Опции

| Параметр | Тип | По умолчанию | Описание | | ---------------- | ------ | ---------------------------------- | ------------------------------------- | | title | string | 'Мы используем cookie' | Заголовок модального окна | | description | string | 'Продолжая пользоваться сайтом...' | Описание в модальном окне | | backgroundColor | string | '#FFFFFF' | Цвет фона | | textColor | string | '#555555' | Цвет текста | | accentColor | string | '#d83d78' | Цвет акцента | | fontFamily | string | 'Jost' | Шрифт | | policyLink | string | '/policy' | Ссылка на политику конфиденциальности | | policyOpenText | string | 'Открыть документ' | Текст кнопки открытия политики | | policyAcceptText | string | 'Принять' | Текст кнопки принятия |

Разработка

# Установка зависимостей
bun install

# Запуск dev сервера
bun dev

# Сборка библиотеки
bun run build

CDN Использование

Библиотека также может быть подключена напрямую через CDN:

<!-- Сначала подключите Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Затем подключите holy-extensions -->
<script src="https://unpkg.com/holy-extensions"></script>

<script>
  window.holyxeyModal.set({
    // конфигурация...
  })
</script>