From 6b7b034d3066cf09a4c5d1b18a99e699d97e27ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D1=83=D1=80=20=D0=90=D0=B1=D0=B0=D0=B9?= =?UTF-8?q?=D0=B4=D1=83=D0=BB=D0=B8=D0=BD?= Date: Fri, 21 Nov 2025 09:52:58 +0300 Subject: [PATCH] Added Open Graph Generator --- index.html | 25 ++++++- og-preview-generator.html | 143 ++++++++++++++++++++++++++++++++++++++ public/og-image.svg | 27 +++++++ 3 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 og-preview-generator.html create mode 100644 public/og-image.svg diff --git a/index.html b/index.html index 90a49dd..1f9d95d 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,31 @@ - + - Code Formatter + + + Code Formatter - Форматирование JSON и SQL + + + + + + + + + + + + + + + + + + + diff --git a/og-preview-generator.html b/og-preview-generator.html new file mode 100644 index 0000000..60aa8c1 --- /dev/null +++ b/og-preview-generator.html @@ -0,0 +1,143 @@ + + + + + + OG Image Generator + + + +
+
+
{
+
}
+
+

Code Formatter

+
Форматирование JSON и SQL
+
✓ Валидация ✓ Подсветка ✓ Минификация
+
formatter.abaidulin.ru
+
+
+ +
+

Инструкция по созданию og-image.png:

+
    +
  1. Откройте эту страницу в браузере
    2. +
  2. Сделайте скриншот области выше (1200x630px)
    3. +
  3. Или используйте инструменты разработчика: +
      +
    • Откройте DevTools (F12)
      • +
    • Введите в консоль команды ниже
      • +
    +
    4. +
  4. Сохраните как og-image.png
    5. +
  5. Поместите в папку /Users/at/python/claude-example/formatter/public/
    6. +
+ +

Автоматическая генерация через консоль браузера:

+ 
const element = document.getElementById('ogImage');
+html2canvas(element).then(canvas => {
+    const link = document.createElement('a');
+    link.download = 'og-image.png';
+    link.href = canvas.toDataURL();
+    link.click();
+});
+// Примечание: требуется библиотека html2canvas
+
+
+ + + + diff --git a/public/og-image.svg b/public/og-image.svg new file mode 100644 index 0000000..20410f0 --- /dev/null +++ b/public/og-image.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + { + } + + + Code Formatter + + + Форматирование JSON и SQL + + + ✓ Валидация ✓ Подсветка синтаксиса ✓ Минификация + + + formatter.abaidulin.ru +