@jjlmoya/utils-developer 1.2.0

package/package.json

@@ -0,0 +1,64 @@
+{
+    "name": "@jjlmoya/utils-developer",
+    "version": "1.2.0",
+    "type": "module",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts",
+        "./data": "./src/data.ts"
+    },
+    "files": [
+        "src"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+        "check": "astro check",
+        "type-check": "astro check",
+        "test": "vitest run",
+        "preversion": "npm run lint && npm run test",
+        "postversion": "git push && git push --tags",
+        "patch": "npm version patch",
+        "minor": "npm version minor",
+        "major": "npm version major"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,astro}": [
+            "eslint --fix"
+        ]
+    },
+    "dependencies": {
+        "@iconify-json/mdi": "^1.2.3",
+        "@jjlmoya/utils-shared": "1.2.0",
+        "@types/file-saver": "^2.0.7",
+        "astro": "^6.1.2",
+        "astro-icon": "^1.1.0",
+        "file-saver": "^2.0.5",
+        "jszip": "^3.10.1"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.8",
+        "@types/jszip": "^3.4.0",
+        "eslint": "^9.39.4",
+        "eslint-plugin-astro": "^1.6.0",
+        "eslint-plugin-no-comments": "^1.1.10",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.4.0",
+        "postcss-html": "^1.8.1",
+        "schema-dts": "^1.1.2",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-declaration-strict-value": "^1.11.1",
+        "typescript": "^5.4.0",
+        "typescript-eslint": "^8.58.0",
+        "vitest": "^4.1.2"
+    }
+}

package/src/category/i18n/en.ts

@@ -0,0 +1,34 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'web-development',
+  title: 'Web Development',
+  description:
+    'Free web development tools: formatters, CSS calculators, generators and utilities for frontend and backend developers.',
+  seo: [
+    {
+      type: 'summary',
+      title: 'Developer Tools',
+      items: [
+        'Code formatters and validators',
+        'CSS calculators and visual tools',
+        'Configuration and security generators',
+        '100% local and private processing',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Essential Web Development Utilities',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "A collection of tools designed to accelerate web developers' workflows. From JSON validation to CSS specificity calculators, each utility is crafted to solve real day-to-day development problems.",
+    },
+    {
+      type: 'tip',
+      title: 'Privacy guaranteed',
+      html: 'All tools process data locally in your browser. No code, data or files are sent to any external server.',
+    },
+  ],
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,34 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'desarrollo-web',
+  title: 'Desarrollo Web',
+  description:
+    'Herramientas gratuitas de desarrollo web: formateadores, calculadoras CSS, generadores y utilidades para programadores frontend y backend.',
+  seo: [
+    {
+      type: 'summary',
+      title: 'Herramientas para Desarrolladores',
+      items: [
+        'Formateadores y validadores de código',
+        'Calculadoras CSS y de aspectos visuales',
+        'Generadores de configuración y seguridad',
+        'Procesamiento 100% local y privado',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Utilidades Esenciales para el Desarrollo Web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Una colección de herramientas diseñadas para acelerar el flujo de trabajo de desarrolladores web. Desde la validación de JSON hasta calculadoras de especificidad CSS, cada utilidad está pensada para resolver problemas reales en el día a día del desarrollo.',
+    },
+    {
+      type: 'tip',
+      title: 'Privacidad garantizada',
+      html: 'Todas las herramientas procesan los datos localmente en tu navegador. Ningún código, dato ni archivo se envía a ningún servidor externo.',
+    },
+  ],
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,34 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'developpement-web',
+  title: 'Développement Web',
+  description:
+    "Outils gratuits de développement web : formateurs, calculatrices CSS, générateurs et utilitaires pour développeurs frontend et backend.",
+  seo: [
+    {
+      type: 'summary',
+      title: 'Outils pour Développeurs',
+      items: [
+        'Formateurs et validateurs de code',
+        'Calculatrices CSS et outils visuels',
+        'Générateurs de configuration et de sécurité',
+        'Traitement 100% local et privé',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Utilitaires Essentiels pour le Développement Web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Une collection d'outils conçus pour accélérer le flux de travail des développeurs web. De la validation JSON aux calculatrices de spécificité CSS, chaque utilitaire est pensé pour résoudre des problèmes réels au quotidien.",
+    },
+    {
+      type: 'tip',
+      title: 'Confidentialité garantie',
+      html: "Tous les outils traitent les données localement dans votre navigateur. Aucun code, donnée ou fichier n'est envoyé à un serveur externe.",
+    },
+  ],
+};

package/src/category/index.ts

@@ -0,0 +1,31 @@
+import type { DeveloperCategoryEntry } from '../types';
+import { jsonFormatter } from '../tool/jsonFormatter/index';
+import { svgToCss } from '../tool/svgToCss/index';
+import { aspectRatio } from '../tool/aspectRatio/index';
+import { placeholderGenerator } from '../tool/placeholderGenerator/index';
+import { urlEncoderDecoder } from '../tool/urlEncoderDecoder/index';
+import { duplicateCssRemover } from '../tool/duplicateCssRemover/index';
+import { cssToInlineConverter } from '../tool/cssToInlineConverter/index';
+import { cssSpecificityCalculator } from '../tool/cssSpecificityCalculator/index';
+import { cronGenerator } from '../tool/cronGenerator/index';
+import { keycode } from '../tool/keycode/index';
+import { llmCostCalculator } from '../tool/llmCostCalculator/index';
+import { musicalTypography } from '../tool/musicalTypography/index';
+import { mobileMockupGenerator } from '../tool/mobileMockupGenerator/index';
+import { hashGenerator } from '../tool/hashGenerator/index';
+import { promptLibrary } from '../tool/promptLibrary/index';
+import { colorConverter } from '../tool/colorConverter/index';
+import { readabilityCalculator } from '../tool/readabilityCalculator/index';
+import { svgSanitizer } from '../tool/svgSanitizer/index';
+import { utmGenerator } from '../tool/utmGenerator/index';
+import { urlCleaner } from '../tool/urlCleaner/index';
+
+export const developerCategory: DeveloperCategoryEntry = {
+  icon: 'mdi:code-tags',
+  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner],
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};

package/src/category/seo.astro

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

package/src/components/PreviewNavSidebar.astro

@@ -0,0 +1,116 @@
+---
+interface NavItem {
+  id: string;
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface Props {
+  categoryTitle: string;
+  tools?: NavItem[];
+}
+
+const { categoryTitle, tools = [] } = Astro.props;
+---
+
+<nav class="preview-nav-sidebar">
+  <div class="sidebar-header">
+    <h3>{categoryTitle}</h3>
+  </div>
+
+  <ul class="tools-list">
+    {tools.map((tool) => (
+      <li>
+        <a
+          href={tool.href}
+          class:list={['tool-link', { active: tool.isActive }]}
+        >
+          <span class="tool-title">{tool.title}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  .preview-nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-surface, #0f172a);
+  }
+
+  .sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid var(--border-color, #1e293b);
+  }
+
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted, #94a3b8);
+  }
+
+  .tools-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .tools-list li {
+    margin: 0;
+  }
+
+  .tool-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-muted, #94a3b8);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 3px solid transparent;
+    position: relative;
+  }
+
+  .tool-link:hover {
+    color: var(--text-base, #f1f5f9);
+    background: rgba(255, 255, 255, 0.08);
+    padding-left: 1.75rem;
+  }
+
+  .tool-link.active {
+    color: var(--accent, #f43f5e);
+    background: rgba(244, 63, 94, 0.15);
+    border-left-color: var(--accent, #f43f5e);
+    font-weight: 600;
+  }
+
+  .tool-link.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+    background: var(--accent, #f43f5e);
+    border-radius: 0 2px 2px 0;
+  }
+
+  .tool-title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+

package/src/components/PreviewToolbar.astro

@@ -0,0 +1,143 @@
+---
+import type { KnownLocale } from '../types';
+
+interface Props {
+  currentLocale: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+}
+
+const { currentLocale, localeUrls = {} } = Astro.props;
+
+const otherLocales = Object.entries(localeUrls).filter(([l]) => l !== currentLocale) as [
+  KnownLocale,
+  string,
+][];
+---
+
+<nav class="preview-toolbar">
+  {
+    otherLocales.length > 0 && (
+      <div class="locale-group">
+        <span class="locale-current">{currentLocale.toUpperCase()}</span>
+        {otherLocales.map(([locale, url]) => (
+          <a href={url} class="btn-locale">
+            {locale.toUpperCase()}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  <button id="theme-toggle" class="btn-theme" aria-label="Toggle theme" title="Toggle theme">
+    <span class="theme-icon"></span>
+  </button>
+</nav>
+
+<script>
+  function initToolbar() {
+    const btn = document.getElementById('theme-toggle');
+    if (!btn) return;
+
+    const applyTheme = (theme: string) => {
+      document.documentElement.classList.remove('theme-light', 'theme-dark');
+      document.documentElement.classList.add(theme);
+      localStorage.setItem('theme', theme);
+    };
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.classList.contains('theme-dark')
+        ? 'theme-light'
+        : 'theme-dark';
+      applyTheme(next);
+    });
+  }
+
+  initToolbar();
+  document.addEventListener('astro:after-swap', initToolbar);
+</script>
+
+<style>
+  .preview-toolbar {
+    position: fixed;
+    top: 1rem;
+    right: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 1000;
+    background: var(--bg-surface);
+    padding: 0.4rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+    backdrop-filter: blur(12px);
+  }
+
+  .locale-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-right: 0.5rem;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .locale-current {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: var(--text-muted);
+    padding: 0.4rem 0.6rem;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-locale {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    cursor: pointer;
+    padding: 0.4rem 0.7rem;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    font-size: 0.7rem;
+    text-decoration: none;
+    letter-spacing: 0.08em;
+    transition: all 0.2s ease;
+  }
+
+  .btn-locale:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  .btn-theme {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+  }
+
+  .btn-theme:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .theme-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+
+  :global(.theme-light) .theme-icon {
+    background: #f59e0b;
+    box-shadow: 0 0 8px #fbbf24;
+  }
+
+  :global(.theme-dark) .theme-icon {
+    background: #94a3b8;
+    box-shadow: inset -4px -2px 0 #1e293b;
+  }
+</style>
+

package/src/data.ts

@@ -0,0 +1,11 @@
+export { developerCategory } from './category';
+
+export type {
+  KnownLocale,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleMap,
+  DeveloperToolEntry,
+  DeveloperCategoryEntry,
+} from './types';
+

package/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.astro' {
+  const Component: (_props: Record<string, unknown>) => unknown;
+  export default Component;
+}
+

package/src/index.ts

@@ -0,0 +1,78 @@
+export { developerCategory } from './category';
+export { default as developerCategorySEO } from './category/seo.astro';
+
+export type {
+  KnownLocale,
+  FAQItem,
+  BibliographyEntry,
+  HowToStep,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleLoader,
+  LocaleMap,
+  DeveloperToolEntry,
+  DeveloperCategoryEntry,
+  ToolDefinition,
+} from './types';
+
+export { ALL_TOOLS } from './tools';
+
+export { JsonFormatterComponent, JsonFormatterSEO, JsonFormatterBibliography } from './tool/jsonFormatter/index';
+export { JSON_FORMATTER_TOOL } from './tool/jsonFormatter/index';
+
+export { SvgToCssComponent, SvgToCssSEO, SvgToCssBibliography } from './tool/svgToCss/index';
+export { SVG_TO_CSS_TOOL } from './tool/svgToCss/index';
+
+export { AspectRatioComponent, AspectRatioSEO, AspectRatioBibliography } from './tool/aspectRatio/index';
+export { ASPECT_RATIO_TOOL } from './tool/aspectRatio/index';
+
+export { PlaceholderGeneratorComponent, PlaceholderGeneratorSEO, PlaceholderGeneratorBibliography } from './tool/placeholderGenerator/index';
+export { PLACEHOLDER_GENERATOR_TOOL } from './tool/placeholderGenerator/index';
+
+export { UrlEncoderDecoderComponent, UrlEncoderDecoderSEO, UrlEncoderDecoderBibliography } from './tool/urlEncoderDecoder/index';
+export { URL_ENCODER_DECODER_TOOL } from './tool/urlEncoderDecoder/index';
+
+export { DuplicateCssRemoverComponent, DuplicateCssRemoverSEO, DuplicateCssRemoverBibliography } from './tool/duplicateCssRemover/index';
+export { DUPLICATE_CSS_REMOVER_TOOL } from './tool/duplicateCssRemover/index';
+
+export { CssToInlineConverterComponent, CssToInlineConverterSEO, CssToInlineConverterBibliography } from './tool/cssToInlineConverter/index';
+export { CSS_TO_INLINE_CONVERTER_TOOL } from './tool/cssToInlineConverter/index';
+
+export { CssSpecificityCalculatorComponent, CssSpecificityCalculatorSEO, CssSpecificityCalculatorBibliography } from './tool/cssSpecificityCalculator/index';
+export { CSS_SPECIFICITY_CALCULATOR_TOOL } from './tool/cssSpecificityCalculator/index';
+
+export { CronGeneratorComponent, CronGeneratorSEO, CronGeneratorBibliography } from './tool/cronGenerator/index';
+export { CRON_GENERATOR_TOOL } from './tool/cronGenerator/index';
+
+export { KeycodeComponent, KeycodeSEO, KeycodeBibliography } from './tool/keycode/index';
+export { KEYCODE_TOOL } from './tool/keycode/index';
+
+export { LlmCostCalculatorComponent, LlmCostCalculatorSEO, LlmCostCalculatorBibliography } from './tool/llmCostCalculator/index';
+export { LLM_COST_CALCULATOR_TOOL } from './tool/llmCostCalculator/index';
+
+export { MusicalTypographyComponent, MusicalTypographySEO, MusicalTypographyBibliography } from './tool/musicalTypography/index';
+export { MUSICAL_TYPOGRAPHY_TOOL } from './tool/musicalTypography/index';
+
+export { MobileMockupGeneratorComponent, MobileMockupGeneratorSEO, MobileMockupGeneratorBibliography } from './tool/mobileMockupGenerator/index';
+export { MOBILE_MOCKUP_GENERATOR_TOOL } from './tool/mobileMockupGenerator/index';
+
+export { HashGeneratorComponent, HashGeneratorSEO, HashGeneratorBibliography } from './tool/hashGenerator/index';
+export { HASH_GENERATOR_TOOL } from './tool/hashGenerator/index';
+
+export { PromptLibraryComponent, PromptLibrarySEO, PromptLibraryBibliography } from './tool/promptLibrary/index';
+export { PROMPT_LIBRARY_TOOL } from './tool/promptLibrary/index';
+
+export { ColorConverterComponent, ColorConverterSEO, ColorConverterBibliography } from './tool/colorConverter/index';
+export { COLOR_CONVERTER_TOOL } from './tool/colorConverter/index';
+
+export { ReadabilityCalculatorComponent, ReadabilityCalculatorSEO, ReadabilityCalculatorBibliography } from './tool/readabilityCalculator/index';
+export { READABILITY_CALCULATOR_TOOL } from './tool/readabilityCalculator/index';
+
+export { SvgSanitizerComponent, SvgSanitizerSEO, SvgSanitizerBibliography } from './tool/svgSanitizer/index';
+export { SVG_SANITIZER_TOOL } from './tool/svgSanitizer/index';
+
+export { UtmGeneratorComponent, UtmGeneratorSEO, UtmGeneratorBibliography } from './tool/utmGenerator/index';
+export { UTM_GENERATOR_TOOL } from './tool/utmGenerator/index';
+
+export { UrlCleanerComponent, UrlCleanerSEO, UrlCleanerBibliography } from './tool/urlCleaner/index';
+export { URL_CLEANER_TOOL } from './tool/urlCleaner/index';

package/src/layouts/PreviewLayout.astro

@@ -0,0 +1,117 @@
+---
+import "@jjlmoya/utils-shared/theme.css";
+import PreviewToolbar from "../components/PreviewToolbar.astro";
+import type { KnownLocale } from "../types";
+
+interface Props {
+  title: string;
+  currentLocale?: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+  hasSidebar?: boolean;
+}
+
+const { title, currentLocale = "es", localeUrls = {}, hasSidebar = false } = Astro.props;
+---
+
+<!doctype html>
+<html lang={currentLocale}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title} · preview</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
+    <script is:inline>
+      (function () {
+        const saved = localStorage.getItem("theme") || "theme-dark";
+        document.documentElement.classList.add(saved);
+      })();
+    </script>
+    <slot name="head" />
+  </head>
+  <body>
+    <PreviewToolbar currentLocale={currentLocale} localeUrls={localeUrls} />
+    <div class:list={["page-wrapper", { "with-sidebar": hasSidebar }]}>
+      {
+        hasSidebar && (
+          <aside class="sidebar-area">
+            <slot name="sidebar" />
+          </aside>
+        )
+      }
+      <main>
+        <slot />
+      </main>
+    </div>
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --accent: #f43f5e;
+    --primary-base: #9f1239;
+    --cyan: #06b6d4;
+  }
+
+  .theme-dark,
+  .theme-light {
+    --text-main: var(--text-base);
+    --border-color: var(--border-base);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    background-color: var(--bg-page);
+    color: var(--text-base);
+    margin: 0;
+    min-height: 100vh;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+
+  main {
+    padding: 0 2rem;
+  }
+
+  .page-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .page-wrapper.with-sidebar {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    min-height: 100vh;
+  }
+
+  .sidebar-area {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    border-right: 1px solid var(--border-color);
+    background: var(--bg-page);
+  }
+
+  @media (max-width: 768px) {
+    .page-wrapper.with-sidebar {
+      grid-template-columns: 1fr;
+    }
+
+    .sidebar-area {
+      display: none;
+    }
+  }
+</style>
+