@jjlmoya/utils-developer 1.16.0 → 1.18.0

package/src/tool/jwtDecoder/jwt-decoder-parser-and-claims-inspector.css

@@ -0,0 +1,358 @@
+.jwt-root {
+  width: 100%;
+}
+
+.jwt-card {
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgba(14, 165, 233, 0.14), transparent 34%),
+    linear-gradient(315deg, rgba(22, 163, 74, 0.13), transparent 36%),
+    #fff;
+  border: 1px solid rgb(219, 234, 254);
+  border-radius: 1.5rem;
+  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
+}
+
+.theme-dark .jwt-card {
+  background:
+    linear-gradient(135deg, rgba(14, 165, 233, 0.18), transparent 34%),
+    linear-gradient(315deg, rgba(34, 197, 94, 0.15), transparent 36%),
+    rgb(9, 12, 22);
+  border-color: rgb(30, 41, 59);
+  box-shadow: none;
+}
+
+.jwt-input-panel,
+.jwt-json-panel,
+.jwt-claims-panel {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 1rem;
+  backdrop-filter: blur(16px);
+}
+
+.theme-dark .jwt-input-panel,
+.theme-dark .jwt-json-panel,
+.theme-dark .jwt-claims-panel {
+  background: rgba(15, 23, 42, 0.78);
+  border-color: rgba(71, 85, 105, 0.62);
+}
+
+.jwt-input-panel {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+}
+
+.jwt-token-field {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.jwt-label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 750;
+  color: rgb(15, 23, 42);
+}
+
+.theme-dark .jwt-label {
+  color: rgb(226, 232, 240);
+}
+
+.jwt-label-icon,
+.jwt-button-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jwt-label-icon {
+  color: rgb(2, 132, 199);
+}
+
+.jwt-token-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8.5rem;
+  padding: 0.9rem;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  color: rgb(15, 23, 42);
+  resize: vertical;
+  background: rgb(248, 250, 252);
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.85rem;
+}
+
+.jwt-token-input:focus {
+  border-color: rgb(14, 165, 233);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
+}
+
+.theme-dark .jwt-token-input {
+  color: rgb(226, 232, 240);
+  background: rgb(15, 23, 42);
+  border-color: rgb(51, 65, 85);
+}
+
+.jwt-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.jwt-action,
+.jwt-copy {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.3rem;
+  color: rgb(15, 23, 42);
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.7rem;
+}
+
+.jwt-action {
+  padding: 0 0.8rem;
+  font-weight: 750;
+}
+
+.jwt-action-primary {
+  color: #fff;
+  background: rgb(2, 132, 199);
+  border-color: rgb(2, 132, 199);
+}
+
+.theme-dark .jwt-action,
+.theme-dark .jwt-copy {
+  color: rgb(226, 232, 240);
+  background: rgb(15, 23, 42);
+  border-color: rgb(51, 65, 85);
+}
+
+.theme-dark .jwt-action-primary {
+  color: #fff;
+  background: rgb(14, 165, 233);
+  border-color: rgb(14, 165, 233);
+}
+
+.jwt-status {
+  padding: 0.7rem 0.85rem;
+  margin: 0;
+  font-weight: 750;
+  border-radius: 0.8rem;
+}
+
+.jwt-status-waiting {
+  color: rgb(51, 65, 85);
+  background: rgb(241, 245, 249);
+}
+
+.jwt-status-valid {
+  color: rgb(20, 83, 45);
+  background: rgb(220, 252, 231);
+}
+
+.jwt-status-invalid,
+.jwt-status-expired {
+  color: rgb(127, 29, 29);
+  background: rgb(254, 226, 226);
+}
+
+.jwt-status-unsigned {
+  color: rgb(120, 53, 15);
+  background: rgb(254, 243, 199);
+}
+
+.theme-dark .jwt-status-waiting {
+  color: rgb(203, 213, 225);
+  background: rgb(30, 41, 59);
+}
+
+.jwt-privacy {
+  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: rgb(71, 85, 105);
+}
+
+.theme-dark .jwt-privacy {
+  color: rgb(148, 163, 184);
+}
+
+.jwt-output-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.jwt-json-panel {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.jwt-panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.85rem 0.95rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+.jwt-panel-heading h2,
+.jwt-claims-panel h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  color: rgb(15, 23, 42);
+}
+
+.theme-dark .jwt-panel-heading h2,
+.theme-dark .jwt-claims-panel h2 {
+  color: rgb(226, 232, 240);
+}
+
+.jwt-copy {
+  position: relative;
+  width: 2.15rem;
+  height: 2.15rem;
+}
+
+.jwt-copy svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jwt-copy[data-copied]::after {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.3rem);
+  padding: 0.25rem 0.45rem;
+  font-size: 0.72rem;
+  color: #fff;
+  white-space: nowrap;
+  content: attr(data-copied);
+  background: rgb(15, 23, 42);
+  border-radius: 0.45rem;
+}
+
+.jwt-code {
+  min-height: 9rem;
+  max-height: 21rem;
+  padding: 1rem;
+  margin: 0;
+  overflow: auto;
+  font-size: 0.78rem;
+  line-height: 1.55;
+  color: rgb(30, 41, 59);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.jwt-signature-code {
+  color: rgb(7, 89, 133);
+}
+
+.theme-dark .jwt-code {
+  color: rgb(203, 213, 225);
+}
+
+.theme-dark .jwt-signature-code {
+  color: rgb(125, 211, 252);
+}
+
+.jwt-claims-panel {
+  padding: 1rem;
+}
+
+.jwt-claims {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.55rem;
+  margin: 0.85rem 0 0;
+}
+
+.jwt-claims div {
+  display: grid;
+  grid-template-columns: minmax(7rem, 0.55fr) 1fr;
+  gap: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  background: rgba(248, 250, 252, 0.82);
+  border-radius: 0.75rem;
+}
+
+.theme-dark .jwt-claims div {
+  background: rgba(30, 41, 59, 0.78);
+}
+
+.jwt-claims dt {
+  font-size: 0.76rem;
+  font-weight: 800;
+  color: rgb(71, 85, 105);
+}
+
+.jwt-claims dd {
+  min-width: 0;
+  margin: 0;
+  font-size: 0.82rem;
+  color: rgb(15, 23, 42);
+  overflow-wrap: anywhere;
+}
+
+.theme-dark .jwt-claims dt {
+  color: rgb(148, 163, 184);
+}
+
+.theme-dark .jwt-claims dd {
+  color: rgb(226, 232, 240);
+}
+
+@media (min-width: 860px) {
+  .jwt-card {
+    grid-template-columns: minmax(20rem, 0.92fr) minmax(0, 1.08fr);
+    padding: 1.25rem;
+  }
+
+  .jwt-input-panel,
+  .jwt-claims-panel {
+    grid-column: 1;
+  }
+
+  .jwt-output-grid {
+    grid-row: span 2;
+    grid-column: 2;
+  }
+}
+
+@media (min-width: 1180px) {
+  .jwt-output-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .jwt-json-panel-main {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 520px) {
+  .jwt-card {
+    padding: 0.7rem;
+    border-radius: 1rem;
+  }
+
+  .jwt-action {
+    flex: 1 1 100%;
+  }
+
+  .jwt-claims div {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/jwtDecoder/logic.ts

@@ -0,0 +1,96 @@
+export interface DecodedJwt {
+  header: Record<string, unknown>;
+  payload: Record<string, unknown>;
+  signature: string;
+  valid: boolean;
+  unsigned: boolean;
+  expired: boolean;
+  error?: 'invalid-segments' | 'invalid-json';
+}
+
+const textDecoder = new TextDecoder();
+
+function decodeBase64Url(segment: string): string {
+  const normalized = segment.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=');
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+
+  return textDecoder.decode(bytes);
+}
+
+function parseJsonSegment(segment: string): Record<string, unknown> {
+  const decoded = decodeBase64Url(segment);
+  const parsed = JSON.parse(decoded) as unknown;
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error('invalid-json');
+  }
+
+  return parsed as Record<string, unknown>;
+}
+
+function invalidJwt(error: DecodedJwt['error']): DecodedJwt {
+  return {
+    header: {},
+    payload: {},
+    signature: '',
+    valid: false,
+    unsigned: false,
+    expired: false,
+    error,
+  };
+}
+
+function hasValidSegments(parts: string[]): boolean {
+  return parts.length === 3 && Boolean(parts[0]) && Boolean(parts[1]);
+}
+
+function buildDecodedJwt(header: Record<string, unknown>, payload: Record<string, unknown>, signature: string): DecodedJwt {
+  const unsigned = signature.length === 0 || header['alg'] === 'none';
+  const exp = typeof payload['exp'] === 'number' ? payload['exp'] : undefined;
+
+  return {
+    header,
+    payload,
+    signature,
+    valid: true,
+    unsigned,
+    expired: typeof exp === 'number' && exp * 1000 < Date.now(),
+  };
+}
+
+export function decodeJwt(token: string): DecodedJwt {
+  const parts = token.trim().split('.');
+
+  if (!hasValidSegments(parts)) return invalidJwt('invalid-segments');
+
+  try {
+    const header = parseJsonSegment(parts[0]);
+    const payload = parseJsonSegment(parts[1]);
+    return buildDecodedJwt(header, payload, parts[2] ?? '');
+  } catch {
+    return invalidJwt('invalid-json');
+  }
+}
+
+export function formatJson(value: Record<string, unknown>): string {
+  return JSON.stringify(value, null, 2);
+}
+
+export function formatClaimDate(value: unknown): string | null {
+  if (typeof value !== 'number') return null;
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'medium',
+  }).format(new Date(value * 1000));
+}
+
+export function formatClaimValue(value: unknown): string | null {
+  if (value === undefined || value === null || value === '') return null;
+  if (Array.isArray(value)) return value.map(String).join(', ');
+  if (typeof value === 'object') return JSON.stringify(value);
+
+  return String(value);
+}

package/src/tool/jwtDecoder/seo.astro

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

package/src/tool/jwtDecoder/ui.ts

@@ -0,0 +1,38 @@
+export interface JwtDecoderUI extends Record<string, string> {
+  tokenLabel: string;
+  tokenPlaceholder: string;
+  sampleButton: string;
+  clearButton: string;
+  statusWaiting: string;
+  statusValid: string;
+  statusInvalid: string;
+  statusExpired: string;
+  statusUnsigned: string;
+  headerTitle: string;
+  payloadTitle: string;
+  signatureTitle: string;
+  claimsTitle: string;
+  copyHeader: string;
+  copyPayload: string;
+  copySignature: string;
+  copyAll: string;
+  copiedLabel: string;
+  invalidTokenTitle: string;
+  invalidTokenBody: string;
+  invalidSegmentError: string;
+  invalidDecodeError: string;
+  emptyJson: string;
+  signaturePresent: string;
+  signatureMissing: string;
+  algorithmLabel: string;
+  typeLabel: string;
+  issuerLabel: string;
+  subjectLabel: string;
+  audienceLabel: string;
+  issuedAtLabel: string;
+  notBeforeLabel: string;
+  expiresAtLabel: string;
+  claimMissing: string;
+  privacyNote: string;
+  sampleToken: string;
+}

package/src/tool/serpPixelSimulator/bibliography.astro

@@ -1,7 +1,14 @@
 ---
-import { bibliography } from './bibliography';
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { serpPixelSimulator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await serpPixelSimulator.i18n[locale]?.();
 ---
 
-<ul>
-  {bibliography.map((item) => <li><a href={item.url} rel="nofollow noopener" target="_blank">{item.name}</a></li>)}
-</ul>
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/serpPixelSimulator/index.ts

@@ -1,9 +1,5 @@
-import type { ToolDefinition } from '../../types';
-import type { ToolDefinition } from '../../types';
 import { serpPixelSimulator } from './entry';
-
 export * from './entry';
-
 export const SERP_PIXEL_SIMULATOR_TOOL: ToolDefinition = {
   entry: serpPixelSimulator,
   Component: () => import('./component.astro'),

package/src/tool/serpPixelSimulator/seo.astro

@@ -1,12 +1,15 @@
 ---
-import type { SerpPixelSimulatorUI } from './ui';
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { serpPixelSimulator } from './index';
+import type { KnownLocale } from '../../types';
 
 interface Props {
-  ui?: Record<string, unknown>;
+  locale?: KnownLocale;
 }
 
-const { ui } = Astro.props;
-const t = (ui ?? {}) as SerpPixelSimulatorUI;
+const { locale = 'es' } = Astro.props;
+const content = await serpPixelSimulator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-<section class="tool-seo" aria-label={t.previewLabel}></section>
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/visualCssGridFlexboxGenerator/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { visualCssGridFlexboxGenerator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await visualCssGridFlexboxGenerator.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/visualCssGridFlexboxGenerator/bibliography.ts

@@ -0,0 +1,20 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'MDN Web Docs: Basic concepts of flexbox',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox',
+  },
+  {
+    name: 'MDN Web Docs: Basic concepts of grid layout',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout',
+  },
+  {
+    name: 'CSS-Tricks: A Complete Guide to Flexbox',
+    url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/',
+  },
+  {
+    name: 'CSS-Tricks: A Complete Guide to CSS Grid',
+    url: 'https://css-tricks.com/snippets/css/complete-guide-grid/',
+  },
+];

package/src/tool/visualCssGridFlexboxGenerator/canvas.ts

@@ -0,0 +1,103 @@
+import type { LayoutMode, LayoutState } from './logic';
+
+export function getAllItems(canvas: HTMLElement): HTMLElement[] {
+  return Array.from(canvas.querySelectorAll<HTMLElement>('.vcg-item'));
+}
+
+export function getItemSpans(canvas: HTMLElement): Record<string, number> {
+  const spans: Record<string, number> = {};
+  for (const item of getAllItems(canvas)) {
+    const s = Number(item.dataset.span ?? '1');
+    if (s > 1) spans[item.dataset.item ?? ''] = s;
+  }
+  return spans;
+}
+
+export function refreshItemLabels(canvas: HTMLElement, itemPrefix: string) {
+  getAllItems(canvas).forEach((item, index) => {
+    item.dataset.item = String(index + 1);
+    const label = item.querySelector('span');
+    if (label) label.textContent = `${itemPrefix} ${index + 1}`;
+  });
+}
+
+export function makeItem(index: number, itemPrefix: string): HTMLElement {
+  const item = document.createElement('div');
+  const label = document.createElement('span');
+  item.className = 'vcg-item vcg-enter';
+  item.dataset.item = String(index);
+  item.dataset.span = '1';
+  label.textContent = `${itemPrefix} ${index}`;
+  item.append(label);
+  item.addEventListener('animationend', () => item.classList.remove('vcg-enter'));
+  return item;
+}
+
+function paintGridItem(item: HTMLElement, state: LayoutState) {
+  const span = Number(item.dataset.span ?? '1');
+  item.style.minWidth = `${state.itemSize}px`;
+  item.style.minHeight = `${state.itemSize}px`;
+  item.style.gridColumn = span > 1 ? `span ${span}` : '';
+  item.classList.toggle('vcg-spanned', span > 1);
+}
+
+function paintFlexItem(item: HTMLElement, state: LayoutState) {
+  item.style.minWidth = `${state.itemSize}px`;
+  item.style.minHeight = `${state.itemSize}px`;
+  item.style.gridColumn = '';
+  item.classList.remove('vcg-spanned');
+}
+
+export function paintCanvas(canvas: HTMLElement, state: LayoutState) {
+  canvas.style.display = state.mode;
+  canvas.style.gap = `${state.gap}px`;
+  canvas.style.justifyContent = state.justifyContent;
+  canvas.style.alignItems = state.alignItems;
+  canvas.style.width = `${state.width}px`;
+  canvas.style.minHeight = `${state.height}px`;
+
+  if (state.mode === 'grid') {
+    canvas.style.gridTemplateColumns = `repeat(${state.columns}, minmax(0, 1fr))`;
+    canvas.style.flexDirection = '';
+    canvas.style.flexWrap = '';
+    canvas.style.alignContent = '';
+  } else {
+    canvas.style.gridTemplateColumns = '';
+    canvas.style.flexDirection = state.flexDirection;
+    canvas.style.flexWrap = state.flexWrap;
+    canvas.style.alignContent = state.flexWrap !== 'nowrap' ? state.alignContent : '';
+  }
+
+  const painter = state.mode === 'grid' ? paintGridItem : paintFlexItem;
+  getAllItems(canvas).forEach((item) => painter(item, state));
+}
+
+export function toggleVisibility(mode: LayoutMode, wrapValue: string) {
+  document.querySelectorAll<HTMLElement>('.vcg-grid-only').forEach((el) => {
+    el.classList.toggle('vcg-hidden', mode !== 'grid');
+  });
+  document.querySelectorAll<HTMLElement>('.vcg-flex-only').forEach((el) => {
+    el.classList.toggle('vcg-hidden', mode !== 'flex');
+  });
+  const acw = document.getElementById('vcg-align-content-wrap');
+  if (acw && mode === 'flex') {
+    acw.classList.toggle('vcg-hidden', wrapValue === 'nowrap');
+  }
+}
+
+export function setLabelText(id: string, text: string) {
+  const el = document.getElementById(id);
+  if (el) el.textContent = text;
+}
+
+export function updateLabels(state: LayoutState) {
+  setLabelText('vcg-gap-value', `${state.gap}px`);
+  setLabelText('vcg-columns-value', String(state.columns));
+  setLabelText('vcg-width-value', `${state.width}px`);
+  setLabelText('vcg-height-value', `${state.height}px`);
+  setLabelText('vcg-item-size-value', `${state.itemSize}px`);
+}
+
+export function clearPresetActive() {
+  document.querySelectorAll('.vcg-preset-button').forEach((b) => b.classList.remove('vcg-preset-active'));
+}