✂️ QuickSnip

Быстрый и удобный сервис для создания, хранения и шаринга сниппетов кода.

✨ Возможности

Функция	Описание
⚡ Быстрое создание	Создавайте сниппеты в один клик
🎨 Подсветка синтаксиса	100+ языков программирования
🔗 Мгновенный шаринг	Уникальные короткие ссылки
⏰ Автоудаление	Настраиваемое время жизни
🔒 Приватность	Опциональная защита паролем
📱 Адаптивность	Работает на любых устройствах

📦 Установка

Требования

Node.js >= 18.0.0
npm >= 9.0.0 или yarn >= 1.22.0

Клонирование и установка

# Клонируйте репозиторий
git clone https://github.com/username/quicksnip.git

# Перейдите в директорию
cd quicksnip

# Установите зависимости
npm install

Запуск

# Режим разработки
npm run dev

# Сборка для продакшена
npm run build

# Предпросмотр продакшен-сборки
npm run preview

⚙️ Конфигурация

Переменные окружения

Создайте файл .env в корне проекта:

# Основные настройки
NUXT_PUBLIC_APP_URL=http://localhost:3000
NUXT_PUBLIC_APP_NAME=QuickSnip

# База данных
DATABASE_URL=postgresql://user:password@localhost:5432/quicksnip

# Настройки сниппетов
SNIPPET_MAX_SIZE=50000
SNIPPET_DEFAULT_EXPIRY=24h

# API
API_RATE_LIMIT=100
API_SECRET_KEY=your-secret-key

Доступные опции

Переменная	Тип	По умолчанию	Описание
`SNIPPET_MAX_SIZE`	number	50000	Максимальный размер сниппета (символы)
`SNIPPET_DEFAULT_EXPIRY`	string	24h	Время жизни по умолчанию
`API_RATE_LIMIT`	number	100	Лимит запросов в минуту

🚀 Быстрый старт

1. Создайте первый сниппет

// Пример кода для сниппета
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

2. Выберите настройки

Язык: JavaScript
Тема: Dark
Срок жизни: 24 часа

3. Нажмите "Создать"

Вы получите уникальную ссылку:

https://quicksnip.io/s/abc123

📁 Структура проекта

quicksnip/
├── assets/
│   └── css/
│       └── main.css
├── components/
│   ├── Editor/
│   │   ├── CodeEditor.vue
│   │   ├── LanguageSelector.vue
│   │   └── ThemeToggle.vue
│   ├── Snippet/
│   │   ├── SnippetCard.vue
│   │   ├── SnippetView.vue
│   │   └── SnippetShare.vue
│   └── UI/
│       ├── Button.vue
│       ├── Modal.vue
│       └── Toast.vue
├── composables/
│   ├── useSnippet.ts
│   └── useClipboard.ts
├── pages/
│   ├── index.vue
│   ├── create.vue
│   └── s/
│       └── [id].vue
├── server/
│   └── api/
│       └── snippets/
│           ├── index.post.ts
│           └── [id].get.ts
├── content/
│   └── guide.md
├── nuxt.config.ts
└── package.json

💻 Создание сниппета

Через веб-интерфейс

Откройте главную страницу
Вставьте или напишите код
Выберите язык программирования
Настройте параметры
Нажмите "Создать сниппет"

Через API

curl -X POST https://quicksnip.io/api/snippets \
  -H "Content-Type: application/json" \
  -d '{
    "code": "console.log(\"Hello World\")",
    "language": "javascript",
    "expiresIn": "24h"
  }'

Ответ:

{
  "id": "abc123",
  "url": "https://quicksnip.io/s/abc123",
  "expiresAt": "2024-01-16T12:00:00Z"
}

Через CLI

# Установка CLI
npm install -g quicksnip-cli

# Создание сниппета из файла
quicksnip upload ./script.js

# Создание из stdin
cat script.js | quicksnip

🔗 Шаринг

Форматы ссылок

Формат	URL	Описание
Стандартный	`/s/abc123`	Страница просмотра
Raw	`/s/abc123/raw`	Только код
Embed	`/s/abc123/embed`	Для iframe
Download	`/s/abc123/download`	Скачать файл

Встраивание на сайт

<iframe
  src="https://quicksnip.io/s/abc123/embed"
  width="100%"
  height="400"
  frameborder="0"
>
</iframe>

Markdown badge

[![QuickSnip](https://quicksnip.io/badge/abc123)](https://quicksnip.io/s/abc123)

🎨 Темы и кастомизация

Доступные темы

🌙 Dark — тёмная тема (по умолчанию)
☀️ Light — светлая тема
🎨 Dracula — популярная тема
🌊 Ocean — синие оттенки
🌲 Forest — зелёные оттенки

Кастомные настройки

// composables/useEditorConfig.ts
export const useEditorConfig = () => {
  return {
    theme: "dark",
    fontSize: 14,
    tabSize: 2,
    lineNumbers: true,
    wordWrap: true,
  };
};

⌨️ Горячие клавиши

Комбинация	Действие
`Ctrl + Enter`	Создать сниппет
`Ctrl + S`	Сохранить изменения
`Ctrl + C`	Копировать код
`Ctrl + L`	Выбрать язык
`Ctrl + D`	Дублировать строку
`Ctrl + /`	Закомментировать
`Esc`	Закрыть модальное окно

❗ Решение проблем

Сниппет не создаётся

Ошибка: "Snippet creation failed"

Решение:

Проверьте размер кода (максимум 50,000 символов)
Убедитесь что выбран язык
Проверьте подключение к интернету

# Проверка API
curl -I https://quicksnip.io/api/health

Код отображается без подсветки

Причина: Язык не определён автоматически

Решение:

Выберите язык вручную из выпадающего списка или добавьте shebang:

#!/usr/bin/env python3
print("Hello World")

Ссылка не работает

Ошибка: "Snippet not found or expired"

Возможные причины:

⏰ Истёк срок жизни сниппета
🗑️ Сниппет был удалён автором
❌ Неверная ссылка

🤝 Контрибьютинг

Мы рады вашим контрибуциям!

Как внести вклад

Форкните репозиторий
Создайте ветку для фичи

git checkout -b feature/amazing-feature

Закоммитьте изменения

git commit -m "feat: add amazing feature"

Запушьте в форк

git push origin feature/amazing-feature

Откройте Pull Request

Правила коммитов

Используйте Conventional Commits:

feat: — новая функция
fix: — исправление бага
docs: — документация
style: — форматирование
refactor: — рефакторинг

MIT License

Copyright (c) 2024 QuickSnip

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files...

QuickSnip — Делитесь кодом легко! ✂️

Сайт • GitHub • Twitter