@jjlmoya/utils-creative 1.2.0

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@jjlmoya/utils-creative",
+  "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.0.2",
+    "astro": "^6.1.2",
+    "astro-icon": "^1.1.0"
+  },
+  "peerDependencies": {
+    "jszip": "^3.10.1"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "jszip": "^3.10.1",
+    "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,9 @@
+export const content = {
+  slug: 'creativity-leisure',
+  title: 'Creativity and Leisure',
+  description: 'Tools designed to inspire, amuse, and create.',
+  seo: [
+    { type: 'title', text: 'Daily Creative Utilities', level: 2 },
+    { type: 'paragraph', html: 'From excuse generators to craft patterns, our collection of creative tools is designed for entertainment and practical use.' }
+  ]
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,9 @@
+export const content = {
+  slug: 'creatividad-ocio',
+  title: 'Creatividad y Ocio',
+  description: 'Herramientas diseñadas para inspirar, divertir y crear.',
+  seo: [
+    { type: 'title', text: 'Utilerías Creativas para el Día a Día', level: 2 },
+    { type: 'paragraph', html: 'Desde generadores de excusas hasta patrones para manualidades, nuestra colección de herramientas creativas está pensada para el entretenimiento y la utilidad práctica.' }
+  ]
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,9 @@
+export const content = {
+  slug: 'creativite-loisirs',
+  title: 'Créativité et Loisirs',
+  description: 'Des outils conçus pour inspirer, amuser et créer.',
+  seo: [
+    { type: 'title', text: 'Outils Créatifs Quotidiens', level: 2 },
+    { type: 'paragraph', html: 'Des générateurs d\'excuses aux modèles de loisirs créatifs, notre collection d\'outils créatifs est conçue pour le divertissement et l\'usage pratique.' }
+  ]
+};

package/src/category/index.ts

@@ -0,0 +1,34 @@
+import type { CategoryLocaleContent, ToolDefinition } from '../types';
+import { EXCUSE_GENERATOR_TOOL } from '../tool/excuse-generator';
+import { FORTUNE_COOKIE_TOOL } from '../tool/fortune-cookie';
+import { SYNESTHESIA_PAINTER_TOOL } from '../tool/synesthesia-painter';
+import { ZALGO_GENERATOR_TOOL } from '../tool/zalgo-generator';
+import { BEAD_PATTERN_GENERATOR_TOOL } from '../tool/bead-pattern-generator';
+import { DICE_ROLLER_TOOL } from '../tool/dice-roller';
+
+export const CREATIVE_TOOLS: Record<string, ToolDefinition> = {
+  'excuse-generator': EXCUSE_GENERATOR_TOOL,
+  'fortune-cookie': FORTUNE_COOKIE_TOOL,
+  'synesthesia-painter': SYNESTHESIA_PAINTER_TOOL,
+  'zalgo-generator': ZALGO_GENERATOR_TOOL,
+  'bead-pattern-generator': BEAD_PATTERN_GENERATOR_TOOL,
+  'dice-roller': DICE_ROLLER_TOOL,
+};
+
+export const creativeCategory: {
+  id: string;
+  icons: { bg: string; fg: string };
+  i18n: {
+    es: () => Promise<CategoryLocaleContent>;
+    en: () => Promise<CategoryLocaleContent>;
+    fr: () => Promise<CategoryLocaleContent>;
+  };
+} = {
+  id: 'creative',
+  icons: { bg: 'mdi:palette', fg: 'mdi:brush' },
+  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 { creativeCategory } from './index';
+import type { KnownLocale } from '../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await creativeCategory.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,6 @@
+import { creativeCategory as _creativeCategory, CREATIVE_TOOLS } from './category';
+
+export * from './types';
+export { CREATIVE_TOOLS };
+export const CREATIVE_CATEGORY = _creativeCategory;
+export const creativeCategory = _creativeCategory;

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,27 @@
+import { creativeCategory, CREATIVE_TOOLS } from './category';
+export { creativeCategory };
+export const templateCategory = creativeCategory;
+export const ALL_TOOLS = Object.values(CREATIVE_TOOLS);
+
+export * from './tool/excuse-generator';
+export * from './tool/fortune-cookie';
+export * from './tool/synesthesia-painter';
+export * from './tool/zalgo-generator';
+export * from './tool/bead-pattern-generator';
+export * from './tool/dice-roller';
+export { default as creativeCategorySEO } from './category/seo.astro';
+
+export type {
+  KnownLocale,
+  FAQItem,
+  BibliographyEntry,
+  HowToStep,
+  ToolLocaleContent,
+  CategoryLocaleContent,
+  LocaleLoader,
+  LocaleMap,
+  CreativeToolEntry,
+  CreativeCategoryEntry,
+  ToolDefinition,
+} from './types';
+

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>
+