@jjlmoya/utils-developer 1.28.0 → 1.29.1

package/src/tool/promoteThisWebsite/i18n/en.ts

@@ -0,0 +1,111 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PromoteThisWebsiteUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'promote-this-website';
+const title = 'Promote this website';
+const description = 'The internal propaganda desk for jjlmoya.es in Spanish and GameBob.dev internationally. Turn screenshots from your own pages into social images before Bob decides the feed is embarrassing.';
+
+const howTo = [
+  { name: 'Paste one of our screenshots', text: 'Paste a screenshot from a page on jjlmoya.es or GameBob.dev with Ctrl+V. The board has requested evidence from its own empire.' },
+  { name: 'Choose the language house', text: 'Pick jjlmoya.es for Spanish or GameBob.dev for the international page. This is not a marketplace. The cat already owns the premises.' },
+  { name: 'Arrange the public narrative', text: 'Drag the screenshot, title, logo, background and mascot until the composition looks intentional rather than accidentally exported at 2 a.m.' },
+  { name: 'Export before the cat notices', text: 'Download a PNG at the selected dimensions and publish it. Bob will take the credit because that is how management works.' },
+];
+
+const faq = [
+  { question: 'Who is this tool actually for?', answer: 'For promoting the pages on jjlmoya.es in Spanish and GameBob.dev internationally. Everyone else is welcome to look through the window.' },
+  { question: 'Can I paste a screenshot directly into the tool?', answer: 'Yes. Copy a screenshot from one of our pages to the clipboard and press Ctrl+V. It becomes the tool layer, because even the feline board accepts evidence when it arrives in the correct format.' },
+  { question: 'What happens when I paste a production URL?', answer: 'The tool reads the page meta title, chooses the Spanish jjlmoya.es or international GameBob.dev brand, loads the Open Graph image and uses it as the visual evidence until a more specific tool image is available. The slug is finally denied a promotion.' },
+  { question: 'Why are there two brands?', answer: 'jjlmoya.es is the Spanish page and GameBob.dev is the international page. The distinction is important for language and completely ignored by the cats.' },
+  { question: 'Does the tool upload my images?', answer: 'No. Images stay in the browser and the composition is rendered locally. The only thing leaving the page is the PNG you deliberately download, assuming Bob has approved the export.' },
+];
+
+const ui: PromoteThisWebsiteUI = {
+  urlLabel: 'Website URL',
+  urlPlaceholder: 'https://www.example.com/tools/example/',
+  applyUrl: 'Apply',
+  formatLabel: 'Format',
+  panoramic: 'Panoramic · 1536 × 1024',
+  instagram: 'Instagram · 1080 × 1350',
+  square: 'Square · 1080 × 1080',
+  story: 'Story · 1080 × 1920',
+  titleLabel: 'Title',
+  titlePlaceholder: 'A short title for the image',
+  titleSizeLabel: 'Title font size',
+  titleBoxSizeLabel: 'Title box size',
+  titleStyleLabel: 'Title treatment',
+  brandLabel: 'Brand',
+  brandStyleLabel: 'Brand treatment',
+  advancedLabel: 'Advanced composition',
+  assetsLabel: 'Assets',
+  backgroundLabel: 'Background',
+  toolLabel: 'Tool screenshot',
+  logoLabel: 'Logo',
+  mascotLabel: 'Mascot',
+  layersLabel: 'Layers',
+  backgroundLayer: 'Background',
+  toolLayer: 'Tool',
+  logoLayer: 'Logo',
+  mascotLayer: 'Mascot',
+  titleLayer: 'Title',
+  reset: 'Reset',
+  download: 'Download PNG',
+  activeLayer: 'Active layer',
+  canvasHint: 'Drag the layers directly on the canvas. Paste a screenshot with Ctrl+V.',
+  pasted: 'Screenshot pasted as the tool layer.',
+  urlApplied: 'URL applied. Adjust the title and add the screenshot you want to promote.',
+  urlLoading: 'Reading the page title and its official image...',
+  urlFailed: 'Could not read that page. Check the URL or add the assets manually.',
+  fileLoaded: 'Asset loaded.',
+  titlePaper: 'Editorial paper',
+  titleRibbon: 'Folded ribbon',
+  titleInk: 'Ink splash',
+  titlePoster: 'Night poster',
+  titleTicket: 'Ticket stub',
+  titleMarker: 'Material underline',
+  titleSplit: 'Split block',
+  titleCapsule: 'Minimal capsule',
+  titleCorner: 'Editorial corner',
+  titleVertical: 'Vertical accent',
+  brandPlain: 'Plain mark',
+  brandPlaque: 'Ceramic plaque',
+  brandTicket: 'Admit one',
+  brandStamp: 'Rubber stamp',
+  brandNeon: 'Neon sign',
+  brandRibbon: 'Signal ribbon',
+  brandCorner: 'Editorial corner',
+  brandPixel: 'Pixel block',
+  brandHalo: 'Soft halo',
+  brandEditorial: 'Editorial line',
+  defaultTool: 'Paste your tool screenshot',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<PromoteThisWebsiteUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Promote this website without angering the cat',
+  faq,
+  bibliographyTitle: 'Pages from the operation',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'The official propaganda desk for jjlmoya and GameBob', level: 2 },
+    { type: 'paragraph', html: 'This is not a generic social media composer for a person who has just discovered the word branding. It exists to promote the pages published under <strong>jjlmoya.es</strong> in Spanish and <strong>GameBob.dev</strong> internationally, while the cats supervise from somewhere just outside the brief.' },
+    { type: 'stats', columns: 3, items: [{ value: '2', label: 'House brands to glorify', icon: 'mdi:domain' }, { value: '4', label: 'Formats for the propaganda', icon: 'mdi:crop' }, { value: '0', label: 'Meetings requested by Bob', icon: 'mdi:cat' }] },
+    { type: 'title', text: 'The screenshot remains in charge', level: 3 },
+    { type: 'paragraph', html: 'Paste a real screenshot from one of our pages or load a production URL. The tool reads the page title instead of guessing from the slug, loads the official Open Graph image and keeps the visual evidence visible while the supporting cast gets arranged around it.' },
+    { type: 'title', text: 'Two domains one suspiciously small team', level: 3 },
+    { type: 'paragraph', html: '<strong>jjlmoya.es</strong> is the Spanish page. <strong>GameBob.dev</strong> is the international page. The language changes, the propaganda department does not. The human prepares the image. The cats retain editorial authority.' },
+    { type: 'table', headers: ['Layer', 'What it does', 'What the board calls it'], rows: [['Tool', 'Position, scale, frame', 'The evidence'], ['Title', 'Text, size, treatment, color', 'The approved narrative'], ['Brand', 'Spanish or international page', 'The house whose glory is required'], ['Background', 'Open Graph image or upload', 'The respectable context']] },
+    { type: 'tip', title: 'Start with one of our pages', html: 'Paste a production URL from <strong>jjlmoya.es</strong> or <strong>GameBob.dev</strong>. If the page title, brand and Open Graph image do not load, the board will blame the network, then the human, then the cats.' },
+  ],
+};

package/src/tool/promoteThisWebsite/i18n/es.ts

@@ -0,0 +1,111 @@
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PromoteThisWebsiteUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'promociona-esta-web';
+const title = 'Promociona esta web';
+const description = 'La mesa de propaganda interna de jjlmoya.es en español y GameBob.dev a nivel internacional. Convierte capturas de tus propias páginas en imágenes para redes antes de que Bob decida que el feed da vergüenza.';
+
+const howTo = [
+  { name: 'Pega una de nuestras capturas', text: 'Pega con Ctrl+V una captura de una página de jjlmoya.es o GameBob.dev. La junta necesita pruebas de su propio imperio.' },
+  { name: 'Elige la casa lingüística', text: 'Escoge jjlmoya.es para español o GameBob.dev para la página internacional. Esto no es un marketplace. La gata ya es dueña del local.' },
+  { name: 'Ordena el relato oficial', text: 'Arrastra la captura, el título, el logo, el fondo y la mascota hasta que la composición parezca intencionada y no exportada accidentalmente a las dos de la mañana.' },
+  { name: 'Descarga antes de que la gata se entere', text: 'Descarga un PNG con las dimensiones elegidas y publícalo. Bob se llevará el mérito porque así funciona la dirección.' },
+];
+
+const faq = [
+  { question: '¿Para quién es realmente esta herramienta?', answer: 'Para promocionar las páginas de jjlmoya.es en español y GameBob.dev a nivel internacional. El resto puede mirar por la ventana.' },
+  { question: '¿Puedo pegar directamente una captura?', answer: 'Sí. Copia una captura de una de nuestras páginas y pulsa Ctrl+V. Se convierte en la capa de la herramienta, porque hasta la junta felina acepta pruebas si llegan en el formato correcto.' },
+  { question: '¿Qué pasa cuando pego una URL de producción?', answer: 'La herramienta lee el título meta de la página, elige la marca española jjlmoya.es o la internacional GameBob.dev, carga la imagen Open Graph y la usa como evidencia visual hasta que haya una imagen más concreta. Al slug se le acaba por fin el ascenso.' },
+  { question: '¿Por qué hay dos marcas?', answer: 'jjlmoya.es es la página en español y GameBob.dev es la página internacional. La diferencia importa para el idioma y a las gatas les da exactamente igual.' },
+  { question: '¿La herramienta sube mis imágenes?', answer: 'No. Las imágenes se quedan en el navegador y la composición se renderiza localmente. Lo único que sale de la página es el PNG que tú descargas deliberadamente, suponiendo que Bob haya aprobado la exportación.' },
+];
+
+const ui: PromoteThisWebsiteUI = {
+  urlLabel: 'URL de la web',
+  urlPlaceholder: 'https://www.example.com/utilidades/ejemplo/',
+  applyUrl: 'Aplicar',
+  formatLabel: 'Formato',
+  panoramic: 'Panorámico · 1536 × 1024',
+  instagram: 'Instagram · 1080 × 1350',
+  square: 'Cuadrado · 1080 × 1080',
+  story: 'Historia · 1080 × 1920',
+  titleLabel: 'Título',
+  titlePlaceholder: 'Un título corto para la imagen',
+  titleSizeLabel: 'Tamaño de fuente del título',
+  titleBoxSizeLabel: 'Tamaño de la caja del título',
+  titleStyleLabel: 'Diseño del título',
+  brandLabel: 'Marca',
+  brandStyleLabel: 'Diseño de la marca',
+  advancedLabel: 'Composición avanzada',
+  assetsLabel: 'Recursos',
+  backgroundLabel: 'Fondo',
+  toolLabel: 'Captura de la herramienta',
+  logoLabel: 'Logo',
+  mascotLabel: 'Mascota',
+  layersLabel: 'Capas',
+  backgroundLayer: 'Fondo',
+  toolLayer: 'Herramienta',
+  logoLayer: 'Logo',
+  mascotLayer: 'Mascota',
+  titleLayer: 'Título',
+  reset: 'Restablecer',
+  download: 'Descargar PNG',
+  activeLayer: 'Capa activa',
+  canvasHint: 'Arrastra las capas directamente sobre el lienzo. Pega una captura con Ctrl+V.',
+  pasted: 'Captura pegada como capa de la herramienta.',
+  urlApplied: 'URL aplicada. Ajusta el título y añade la captura que quieras promocionar.',
+  urlLoading: 'Leyendo el título de la página y su imagen oficial...',
+  urlFailed: 'No se ha podido leer esa página. Comprueba la URL o añade los recursos manualmente.',
+  fileLoaded: 'Recurso cargado.',
+  titlePaper: 'Papel editorial',
+  titleRibbon: 'Cinta doblada',
+  titleInk: 'Mancha de tinta',
+  titlePoster: 'Cartel nocturno',
+  titleTicket: 'Entrada recortada',
+  titleMarker: 'Subrayado material',
+  titleSplit: 'Bloque partido',
+  titleCapsule: 'Cápsula mínima',
+  titleCorner: 'Esquina editorial',
+  titleVertical: 'Acento vertical',
+  brandPlain: 'Marca simple',
+  brandPlaque: 'Placa cerámica',
+  brandTicket: 'Admit one',
+  brandStamp: 'Sello de goma',
+  brandNeon: 'Rótulo de neón',
+  brandRibbon: 'Cinta de señal',
+  brandCorner: 'Esquina editorial',
+  brandPixel: 'Bloque pixel',
+  brandHalo: 'Halo suave',
+  brandEditorial: 'Línea editorial',
+  defaultTool: 'Pega la captura de tu herramienta',
+};
+
+const faqSchema: WithContext<FAQPage> = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) };
+const howToSchema: WithContext<HowTo> = { '@context': 'https://schema.org', '@type': 'HowTo', name: title, description, step: howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })) };
+const appSchema: WithContext<SoftwareApplication> = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'DeveloperApplication', operatingSystem: 'Any', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } };
+
+export const content: ToolLocaleContent<PromoteThisWebsiteUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Promociona esta web sin enfadar a la gata',
+  faq,
+  bibliographyTitle: 'Páginas de la operación',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    { type: 'title', text: 'La mesa oficial de propaganda de jjlmoya y GameBob', level: 2 },
+    { type: 'paragraph', html: 'Esto no es un compositor genérico de imágenes sociales para alguien que acaba de descubrir la palabra branding. Existe para promocionar las páginas publicadas bajo <strong>jjlmoya.es</strong> en español y <strong>GameBob.dev</strong> a nivel internacional, mientras las gatas supervisan desde algún lugar justo fuera del briefing.' },
+    { type: 'stats', columns: 3, items: [{ value: '2', label: 'Marcas de la casa que glorificar', icon: 'mdi:domain' }, { value: '4', label: 'Formatos para la propaganda', icon: 'mdi:crop' }, { value: '0', label: 'Reuniones solicitadas por Bob', icon: 'mdi:cat' }] },
+    { type: 'title', text: 'La captura sigue mandando', level: 3 },
+    { type: 'paragraph', html: 'Pega una captura real de una de nuestras páginas o carga una URL de producción. La herramienta lee el título de la página en vez de inventárselo mirando el slug, carga la imagen Open Graph oficial y mantiene visible la prueba mientras el reparto secundario se coloca alrededor.' },
+    { type: 'title', text: 'Dos dominios y un equipo sospechosamente pequeño', level: 3 },
+    { type: 'paragraph', html: '<strong>jjlmoya.es</strong> es la página en español. <strong>GameBob.dev</strong> es la página internacional. Cambia el idioma, pero no el departamento de propaganda. El humano prepara la imagen. Las gatas conservan la autoridad editorial.' },
+    { type: 'table', headers: ['Capa', 'Qué hace', 'Cómo la llama la junta'], rows: [['Herramienta', 'Posición, escala y marco', 'La evidencia'], ['Título', 'Texto, tamaño, diseño y color', 'El relato aprobado'], ['Marca', 'Página española o internacional', 'La casa cuya gloria toca exigir'], ['Fondo', 'Imagen Open Graph o subida', 'El contexto respetable']] },
+    { type: 'tip', title: 'Empieza por una de nuestras páginas', html: 'Pega una URL de producción de <strong>jjlmoya.es</strong> o <strong>GameBob.dev</strong>. Si no cargan el título, la marca o la imagen Open Graph, la junta culpará a la red, después al humano y finalmente a las gatas.' },
+  ],
+};

package/src/tool/promoteThisWebsite/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { promoteThisWebsite } from './entry';
+
+export * from './entry';
+
+export const PROMOTE_THIS_WEBSITE_TOOL: ToolDefinition = {
+  entry: promoteThisWebsite,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/promoteThisWebsite/logic.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest';
+import { brandFromUrl, containRect, defaultState, firstNonEmpty } from './logic';
+
+describe('promote this website logic', () => {
+  it('keeps an uploaded image inside the tool frame', () => {
+    expect(containRect(1600, 900, { x: 100, y: 50, width: 700, height: 500 })).toEqual({
+      x: 100,
+      y: 103.125,
+      width: 700,
+      height: 393.75,
+    });
+  });
+
+  it('detects the site brand from a production URL', () => {
+    expect(brandFromUrl('https://gamebob.dev/tools/')).toBe('GameBob.dev');
+    expect(brandFromUrl('https://jjlmoya.es/utilidades/test/')).toBe('jjlmoya.es');
+  });
+
+  it('uses the first available page metadata title instead of a URL slug', () => {
+    expect(firstNonEmpty(['', 'Real Page Title', 'slug-title'], '')).toBe('Real Page Title');
+    expect(firstNonEmpty(['', ''], '')).toBe('');
+  });
+
+  it('starts without inventing a tool title', () => {
+    expect(defaultState().title).toBe('');
+    expect(defaultState().titleFontSize).toBe(1);
+  });
+
+});

package/src/tool/promoteThisWebsite/logic.ts

@@ -0,0 +1,108 @@
+export type FormatId = 'panoramic' | 'instagram' | 'square' | 'story';
+export type LayerKey = 'background' | 'tool' | 'brand' | 'mascot' | 'title';
+export type TitleStyle = 'paper' | 'ribbon' | 'ink' | 'poster' | 'ticket' | 'marker' | 'split' | 'capsule' | 'corner' | 'vertical';
+export type BrandStyle = 'plain' | 'plaque' | 'ticket' | 'stamp' | 'neon' | 'ribbon' | 'corner' | 'pixel' | 'halo' | 'editorial';
+export const LAYOUT_REVISION = 2;
+
+export interface FormatPreset {
+  width: number;
+  height: number;
+}
+
+export interface LayerPosition {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface CompositionState {
+  layoutRevision: number;
+  format: FormatId;
+  sourceUrl: string;
+  title: string;
+  titleFontSize: number;
+  titleStyle: TitleStyle;
+  brandStyle: BrandStyle;
+  brand: 'jjlmoya.es' | 'GameBob.dev';
+  active: LayerKey;
+  visible: Record<LayerKey, boolean>;
+  scale: Record<LayerKey, number>;
+  positions: Record<LayerKey, LayerPosition>;
+  colors: {
+    fill: string;
+    text: string;
+    accent: string;
+    frame: string;
+  };
+}
+
+export const FORMAT_PRESETS: Record<FormatId, FormatPreset> = {
+  panoramic: { width: 1536, height: 1024 },
+  instagram: { width: 1080, height: 1350 },
+  square: { width: 1080, height: 1080 },
+  story: { width: 1080, height: 1920 },
+};
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function containRect(imageWidth: number, imageHeight: number, box: LayerPosition): LayerPosition {
+  const ratio = Math.min(box.width / imageWidth, box.height / imageHeight);
+  const width = imageWidth * ratio;
+  const height = imageHeight * ratio;
+  return { x: box.x + (box.width - width) / 2, y: box.y + (box.height - height) / 2, width, height };
+}
+
+export function getFormat(format: FormatId): FormatPreset {
+  return FORMAT_PRESETS[format];
+}
+
+export function brandFromUrl(value: string): 'jjlmoya.es' | 'GameBob.dev' {
+  try {
+    const hostname = new URL(value).hostname.toLowerCase();
+    return hostname.includes('gamebob') ? 'GameBob.dev' : 'jjlmoya.es';
+  } catch {
+    return value.toLowerCase().includes('gamebob') ? 'GameBob.dev' : 'jjlmoya.es';
+  }
+}
+
+export function firstNonEmpty(values: string[], fallback = ''): string {
+  return values.map((value) => value.trim()).find(Boolean) || fallback;
+}
+
+export function defaultPositions(format: FormatId): Record<LayerKey, LayerPosition> {
+  const { width, height } = getFormat(format);
+  const panelWidth = width * 0.7;
+  const panelHeight = height * 0.54;
+  return {
+    background: { x: 0, y: 0, width, height },
+    tool: { x: width * 0.2, y: height * 0.2, width: panelWidth, height: panelHeight },
+    brand: { x: width * 0.62, y: height * 0.86, width: width * 0.30, height: height * 0.07 },
+    mascot: { x: width * 0.84, y: height * 0.75, width: width * 0.13, height: width * 0.13 },
+    title: { x: width * 0.28, y: height * 0.08, width: width * 0.44, height: height * 0.12 },
+  };
+}
+
+export function defaultState(format: FormatId = 'panoramic'): CompositionState {
+  return {
+    layoutRevision: LAYOUT_REVISION,
+    format,
+    sourceUrl: '',
+    title: '',
+    titleFontSize: 1,
+    titleStyle: 'paper',
+    brandStyle: 'plain',
+    brand: 'jjlmoya.es',
+    active: 'tool',
+    visible: { background: true, tool: true, brand: true, mascot: true, title: true },
+    scale: { background: 1, tool: 1, brand: 1, mascot: 1, title: 1 },
+    positions: defaultPositions(format),
+    colors: { fill: '#f7ebd7', text: '#08182b', accent: '#c45a2f', frame: '#f7ebd7' },
+  };
+}
+
+export function inside(point: { x: number; y: number }, position: LayerPosition): boolean {
+  return point.x >= position.x && point.x <= position.x + position.width && point.y >= position.y && point.y <= position.y + position.height;
+}