@jjlmoya/utils-developer 1.28.0 → 1.29.0

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/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;
+}

package/src/tool/promoteThisWebsite/promote-this-website.css

@@ -0,0 +1,322 @@
+.promote-tool {
+  --promote-ink: #091426;
+  --promote-muted: #617078;
+  --promote-line: rgba(9, 20, 38, 0.12);
+  --promote-panel: rgba(255, 252, 244, 0.86);
+  --promote-accent: #c45a2f;
+
+  display: grid;
+  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
+  gap: 1rem;
+  width: min(100%, 1320px);
+  min-height: 740px;
+  padding: 1rem;
+  color: var(--promote-ink);
+  background: linear-gradient(135deg, #f4ecdf, #d8e5e3);
+  border: 1px solid var(--promote-line);
+  border-radius: 24px;
+  box-shadow: 0 30px 80px rgba(9, 20, 38, 0.16);
+}
+
+.theme-dark .promote-tool {
+  --promote-ink: #f7ebd7;
+  --promote-muted: #9aabae;
+  --promote-line: rgba(247, 235, 215, 0.15);
+  --promote-panel: rgba(9, 20, 38, 0.86);
+
+  background: linear-gradient(135deg, #0b1526, #19344a);
+}
+
+.promote-sidebar,
+.promote-stage {
+  min-width: 0;
+}
+
+.promote-sidebar {
+  display: grid;
+  align-content: start;
+  gap: 0.85rem;
+  padding: 1.05rem;
+  background: var(--promote-panel);
+  border: 1px solid var(--promote-line);
+  border-radius: 18px;
+  backdrop-filter: blur(18px);
+}
+
+.promote-control-group > label,
+.promote-control-grid > label,
+.promote-fieldset legend,
+.promote-layer {
+  color: var(--promote-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.promote-status {
+  margin: 0;
+  color: var(--promote-muted);
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.promote-control-group,
+.promote-control-grid,
+.promote-fieldset {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.promote-advanced {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.promote-advanced summary {
+  padding: 0.55rem 0;
+  color: var(--promote-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.promote-inline-control {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.4rem;
+}
+
+.promote-control-grid {
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.promote-control-grid > label {
+  letter-spacing: 0;
+}
+
+.promote-tool input[type='url'],
+.promote-tool input[type='text'],
+.promote-custom-select,
+.promote-tool button {
+  min-height: 2.2rem;
+  color: var(--promote-ink);
+  font: inherit;
+  border: 1px solid var(--promote-line);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.45);
+}
+
+.theme-dark .promote-tool input[type='url'],
+.theme-dark .promote-tool input[type='text'],
+.theme-dark .promote-custom-select,
+.theme-dark .promote-tool button {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.promote-tool input[type='url'],
+.promote-tool input[type='text'] {
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+}
+
+.promote-custom-select {
+  position: relative;
+  min-width: 0;
+}
+
+.promote-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  text-align: left;
+}
+
+.promote-select-trigger span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.promote-select-menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(260px, calc(100vw - 2rem));
+  display: grid;
+  padding: 0.25rem;
+  overflow: visible;
+  background: #fffaf0;
+  border: 1px solid var(--promote-accent);
+  border-radius: 10px;
+  box-shadow: 0 14px 28px rgba(4, 11, 24, 0.3);
+}
+
+.promote-select-menu[data-placement='top'] {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+}
+
+.promote-select-menu[hidden] {
+  display: none;
+}
+
+.theme-dark .promote-select-menu {
+  background: #14243b;
+  border-color: #11d6c4;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
+}
+
+.promote-tool .promote-select-option {
+  width: 100%;
+  min-height: 1.95rem;
+  padding: 0.45rem 0.55rem;
+  color: #071226;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  border-radius: 7px;
+  white-space: nowrap;
+}
+
+.theme-dark .promote-tool .promote-select-option {
+  color: #f7ebd7;
+}
+
+.promote-tool .promote-select-option:hover,
+.promote-tool .promote-select-option:focus-visible,
+.promote-tool .promote-select-option[aria-selected='true'] {
+  color: #fffaf0;
+  background: var(--promote-accent);
+}
+
+.promote-tool button {
+  padding: 0.5rem 0.7rem;
+  cursor: pointer;
+}
+
+.promote-tool button:hover,
+.promote-tool button:focus-visible {
+  border-color: var(--promote-accent);
+}
+
+.promote-tool .promote-primary {
+  color: #fffaf0;
+  background: var(--promote-accent);
+  border-color: var(--promote-accent);
+}
+
+.promote-fieldset {
+  margin: 0;
+  padding: 0.7rem;
+  border: 1px solid var(--promote-line);
+  border-radius: 12px;
+}
+
+.promote-fieldset label {
+  display: grid;
+  gap: 0.28rem;
+  color: var(--promote-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.promote-fieldset input[type='file'] {
+  width: 100%;
+  font-size: 0.68rem;
+}
+
+.promote-fieldset label.promote-layer {
+  display: grid;
+  grid-template-columns: 1fr 90px;
+  align-items: center;
+  gap: 0.5rem;
+  letter-spacing: 0;
+}
+
+.promote-layer span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.promote-layer input[type='range'] {
+  accent-color: var(--promote-accent);
+}
+
+.promote-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.promote-stage {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 0.65rem;
+  min-height: 0;
+}
+
+.promote-stage-meta {
+  display: flex;
+  justify-content: space-between;
+  color: var(--promote-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.promote-canvas-wrap {
+  position: relative;
+  display: grid;
+  min-height: 0;
+  place-items: center;
+  padding: clamp(0.5rem, 3vw, 2rem);
+  overflow: hidden;
+  background: rgba(9, 20, 38, 0.15);
+  border: 1px solid var(--promote-line);
+  border-radius: 18px;
+}
+
+.promote-canvas-wrap canvas {
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: min(100%, 1000px);
+  height: auto;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 24px 50px rgba(9, 20, 38, 0.25);
+  cursor: grab;
+  touch-action: none;
+}
+
+.promote-canvas-wrap canvas:active {
+  cursor: grabbing;
+}
+
+@media (max-width: 850px) {
+  .promote-tool {
+    grid-template-columns: 1fr;
+  }
+
+  .promote-sidebar {
+    order: 2;
+  }
+
+  .promote-stage {
+    min-height: 50vh;
+  }
+}

package/src/tool/promoteThisWebsite/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { promoteThisWebsite } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await promoteThisWebsite.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/promoteThisWebsite/storage.ts

@@ -0,0 +1,28 @@
+import type { CompositionState } from './logic';
+
+const STORAGE_KEY = 'promote-this-website-state-v2';
+
+export function readState(): Partial<CompositionState> | null {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) as Partial<CompositionState> : null;
+  } catch {
+    return null;
+  }
+}
+
+export function writeState(state: CompositionState): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    return;
+  }
+}
+
+export function clearState(): void {
+  try {
+    window.localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    return;
+  }
+}