@jjlmoya/utils-social 1.1.0

package/src/tool/socialImageResizer/component.astro

@@ -0,0 +1,498 @@
+---
+import type { KnownLocale } from '../../types';
+import type { SocialImageResizerUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SocialImageResizerUI;
+
+const presets = [
+  { id: 'ig-square',   name: 'Instagram Square',    size: '1080×1080', width: 1080, height: 1080, iconKey: 'instagram' },
+  { id: 'ig-portrait', name: 'Instagram Portrait',  size: '1080×1350', width: 1080, height: 1350, iconKey: 'instagram' },
+  { id: 'ig-story',    name: 'Stories / TikTok',    size: '1080×1920', width: 1080, height: 1920, iconKey: 'phone' },
+  { id: 'yt-thumb',    name: 'YouTube Thumb',        size: '1280×720',  width: 1280, height: 720,  iconKey: 'youtube' },
+  { id: 'yt-banner',   name: 'YouTube Banner',       size: '2560×1440', width: 2560, height: 1440, iconKey: 'youtube' },
+  { id: 'x-post',      name: 'X / Twitter Post',     size: '1200×675',  width: 1200, height: 675,  iconKey: 'twitter' },
+  { id: 'x-header',    name: 'X / Twitter Header',   size: '1500×500',  width: 1500, height: 500,  iconKey: 'header' },
+  { id: 'li-header',   name: 'LinkedIn Cover',        size: '1584×396',  width: 1584, height: 396,  iconKey: 'linkedin' },
+];
+
+const icons: Record<string, string> = {
+  responsive: `<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/></svg>`,
+  instagram:  `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/></svg>`,
+  phone:      `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17 1H7C5.9 1 5 1.9 5 3v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zm-5 2c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/></svg>`,
+  youtube:    `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z"/></svg>`,
+  twitter:    `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.263 5.637zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
+  header:     `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M2 5v4h20V5H2zm0 6v8h20v-8H2z"/></svg>`,
+  linkedin:   `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>`,
+  upload:     `<svg viewBox="0 0 24 24" fill="currentColor" width="40" height="40"><path d="M14 13v4h-4v-4H7l5-5 5 5h-3zm5 6H5v2h14v-2zM5 3h14v8h-2V5H7v6H5V3z"/></svg>`,
+  zoomOut:    `<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7V9z"/></svg>`,
+  zoomIn:     `<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM10 9H9v2H7v1h2v2h1v-2h2V11h-2V9z"/></svg>`,
+  refresh:    `<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>`,
+  download:   `<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7 7-7z"/></svg>`,
+};
+---
+
+<div class="sri-container">
+  <aside class="sri-sidebar">
+    <div class="sri-sidebar-section">
+      <h3 class="sri-sidebar-title">
+        <span set:html={icons.responsive} />
+        {t.sidebarTitle}
+      </h3>
+      <div class="sri-preset-grid">
+        {presets.map((p, index) => (
+          <button
+            class={`sri-preset-btn${index === 0 ? ' active' : ''}`}
+            data-preset={JSON.stringify({ id: p.id, name: p.name, width: p.width, height: p.height, platform: p.iconKey })}
+            id={`sri-btn-${p.id}`}
+          >
+            <div class="sri-preset-icon">
+              <span set:html={icons[p.iconKey]} />
+            </div>
+            <div class="sri-preset-info">
+              <span class="sri-preset-name">{p.name}</span>
+              <span class="sri-preset-size">{p.size}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  </aside>
+
+  <main class="sri-main">
+    <div class="sri-upload-zone" id="sri-dropzone">
+      <div class="sri-upload-icon">
+        <span set:html={icons.upload} />
+      </div>
+      <div class="sri-upload-text">
+        <h2>{t.uploadTitle}</h2>
+        <p>{t.uploadSubtitle}</p>
+      </div>
+      <input type="file" id="sri-file-input" accept="image/*" hidden />
+    </div>
+
+    <div class="sri-editor-view" id="sri-editor-view">
+      <div class="sri-canvas-container" id="sri-canvas-container">
+        <canvas id="sri-canvas"></canvas>
+      </div>
+
+      <div class="sri-editor-actions">
+        <div class="sri-zoom-control">
+          <span set:html={icons.zoomOut} />
+          <input type="range" id="sri-zoom-range" min="10" max="300" value="100" />
+          <span set:html={icons.zoomIn} />
+        </div>
+
+        <div class="sri-btn-group">
+          <button class="sri-action-btn" id="sri-reset-btn">
+            <span set:html={icons.refresh} />
+            {t.btnReset}
+          </button>
+          <button class="sri-action-btn sri-primary" id="sri-download-btn">
+            <span set:html={icons.download} />
+            {t.btnDownload}
+          </button>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script>
+  import { SocialResizer } from './logic';
+
+  let resizer: SocialResizer | null = null;
+  let dropzoneEl: HTMLElement | null = null;
+  let editorViewEl: HTMLElement | null = null;
+
+  async function handleFile(file: File) {
+    if (!file.type.startsWith('image/') || !resizer || !dropzoneEl) return;
+    await resizer.loadImage(file);
+    dropzoneEl.style.display = 'none';
+    editorViewEl?.classList.add('active');
+  }
+
+  function setupDropzone(dropzone: HTMLElement, fileInput: HTMLInputElement) {
+    dropzone.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', async (e: Event) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) await handleFile(file);
+    });
+    dropzone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      dropzone.classList.add('sri-hover');
+    });
+    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('sri-hover'));
+    dropzone.addEventListener('drop', async (e: DragEvent) => {
+      e.preventDefault();
+      const file = e.dataTransfer?.files[0];
+      if (file) await handleFile(file);
+    });
+  }
+
+  function setupPresets(presetBtns: NodeListOf<Element>, zoomRange: HTMLInputElement | null) {
+    presetBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const preset = JSON.parse(btn.getAttribute('data-preset')!);
+        presetBtns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        resizer?.setPreset(preset);
+        if (zoomRange) zoomRange.value = '100';
+      });
+    });
+  }
+
+  function setupControls(zoomRange: HTMLInputElement | null, resetBtn: HTMLElement | null, downloadBtn: HTMLElement | null) {
+    zoomRange?.addEventListener('input', () => {
+      resizer?.setScale(parseInt(zoomRange.value) / 100);
+    });
+    resetBtn?.addEventListener('click', () => {
+      const activeBtn = document.querySelector('.sri-preset-btn.active');
+      if (activeBtn) {
+        resizer?.setPreset(JSON.parse(activeBtn.getAttribute('data-preset')!));
+        if (zoomRange) zoomRange.value = '100';
+      }
+    });
+    downloadBtn?.addEventListener('click', () => resizer?.download());
+  }
+
+  function init() {
+    const dropzone = document.getElementById('sri-dropzone');
+    const fileInput = document.getElementById('sri-file-input') as HTMLInputElement | null;
+    if (!dropzone || !fileInput) return;
+    dropzoneEl = dropzone;
+    editorViewEl = document.getElementById('sri-editor-view');
+    const presetBtns = document.querySelectorAll('.sri-preset-btn');
+    const zoomRange = document.getElementById('sri-zoom-range') as HTMLInputElement | null;
+    resizer = new SocialResizer('sri-canvas');
+    resizer.zoomRangeEl = zoomRange;
+    setupDropzone(dropzone, fileInput);
+    setupPresets(presetBtns, zoomRange);
+    setupControls(zoomRange, document.getElementById('sri-reset-btn'), document.getElementById('sri-download-btn'));
+    resizer.setPreset(JSON.parse(presetBtns[0].getAttribute('data-preset')!));
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .sri-container {
+    --bg: #fff;
+    --bg-sidebar: #f8fafc;
+    --bg-main: #fff;
+    --bg-upload: #f8fafc;
+    --bg-upload-icon: #fff;
+    --bg-canvas: #f1f5f9;
+    --bg-btn: #fff;
+    --bg-btn-hover: #f8fafc;
+    --bg-zoom: #fff;
+    --bg-preset-icon: #f1f5f9;
+    --bg-preset-hover: #f5f3ff;
+    --border: #e2e8f0;
+    --text: #1e293b;
+    --text-sidebar-title: #64748b;
+    --text-upload-sub: #64748b;
+    --text-zoom: #64748b;
+    --text-action: #475569;
+    --text-preset-name: #1e293b;
+    --text-preset-size: #64748b;
+
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: var(--bg);
+    border-radius: 32px;
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    overflow: hidden;
+    color: var(--text);
+    border: 1px solid var(--border);
+    min-height: 700px;
+  }
+
+  .sri-sidebar {
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    overflow-y: auto;
+  }
+
+  .sri-sidebar-title {
+    font-size: 0.85rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-sidebar-title);
+    margin-bottom: 1.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sri-preset-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .sri-preset-btn {
+    width: 100%;
+    padding: 1rem;
+    background: var(--bg-btn);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+  }
+
+  .sri-preset-btn:hover {
+    border-color: #8b5cf6;
+    background: var(--bg-preset-hover);
+    transform: translateX(4px);
+  }
+
+  .sri-preset-btn.active {
+    background: #8b5cf6;
+    border-color: #7c3aed;
+    color: #fff;
+    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
+  }
+
+  .sri-preset-icon {
+    width: 40px;
+    height: 40px;
+    background: var(--bg-preset-icon);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-sidebar-title);
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+  }
+
+  .sri-preset-btn.active .sri-preset-icon {
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+  }
+
+  .sri-preset-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sri-preset-name {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--text-preset-name);
+  }
+
+  .sri-preset-size {
+    font-size: 0.75rem;
+    color: var(--text-preset-size);
+  }
+
+  .sri-main {
+    background: var(--bg-main);
+    padding: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    position: relative;
+  }
+
+  .sri-upload-zone {
+    flex: 1;
+    border: 3px dashed var(--border);
+    border-radius: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: var(--bg-upload);
+    min-height: 400px;
+  }
+
+  .sri-upload-zone:hover,
+  .sri-upload-zone.sri-hover {
+    border-color: #8b5cf6;
+    background: var(--bg-preset-hover);
+  }
+
+  .sri-upload-icon {
+    width: 80px;
+    height: 80px;
+    background: var(--bg-upload-icon);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #8b5cf6;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
+  }
+
+  .sri-upload-text {
+    text-align: center;
+  }
+
+  .sri-upload-text h2 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin-bottom: 0.5rem;
+  }
+
+  .sri-upload-text p {
+    color: var(--text-upload-sub);
+    font-size: 0.95rem;
+  }
+
+  .sri-editor-view {
+    display: none;
+    flex-direction: column;
+    gap: 2rem;
+    height: 100%;
+  }
+
+  .sri-editor-view.active {
+    display: flex;
+  }
+
+  .sri-canvas-container {
+    flex: 1;
+    background: var(--bg-canvas);
+    border-radius: 24px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 400px;
+    border: 1px solid var(--border);
+  }
+
+  .sri-canvas-container canvas {
+    max-width: 100%;
+    max-height: 100%;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+  }
+
+  .sri-editor-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+  }
+
+  .sri-btn-group {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .sri-action-btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 12px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--border);
+    background: var(--bg-btn);
+    color: var(--text-action);
+    font-size: 0.9rem;
+  }
+
+  .sri-action-btn:hover {
+    background: var(--bg-btn-hover);
+    border-color: var(--border);
+  }
+
+  .sri-action-btn.sri-primary {
+    background: #8b5cf6;
+    border-color: #7c3aed;
+    color: #fff;
+  }
+
+  .sri-action-btn.sri-primary:hover {
+    background: #7c3aed;
+    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
+  }
+
+  .sri-zoom-control {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    background: var(--bg-zoom);
+    padding: 0.5rem 1rem;
+    border-radius: 100px;
+    border: 1px solid var(--border);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    color: var(--text-zoom);
+  }
+
+  .sri-zoom-control input[type='range'] {
+    width: 150px;
+    accent-color: #8b5cf6;
+  }
+
+  :global(.theme-dark) .sri-container {
+    --bg: #1e1e21;
+    --bg-sidebar: #161618;
+    --bg-main: #1e1e21;
+    --bg-upload: #161618;
+    --bg-upload-icon: #1e1e21;
+    --bg-canvas: #111113;
+    --bg-btn: #1e1e21;
+    --bg-btn-hover: #2d2d30;
+    --bg-zoom: #1e1e21;
+    --bg-preset-icon: #161618;
+    --bg-preset-hover: #232326;
+    --border: #2d2d30;
+    --text: #f1f5f9;
+    --text-sidebar-title: #94a3b8;
+    --text-upload-sub: #94a3b8;
+    --text-zoom: #94a3b8;
+    --text-action: #f1f5f9;
+    --text-preset-name: #f1f5f9;
+    --text-preset-size: #94a3b8;
+  }
+
+  @media (max-width: 900px) {
+    .sri-container {
+      grid-template-columns: 1fr;
+    }
+
+    .sri-sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .sri-editor-actions {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: stretch;
+    }
+
+    .sri-btn-group {
+      justify-content: center;
+    }
+  }
+</style>