Adaptarlo a tu producto
Cambiar marca, colores, textos e imagenes sin tocar el nucleo del codigo.
Convertir ApisKit en tu producto es cambiar un conjunto pequeno y bien definido
de cosas. El nucleo (src/core), el enganche con el framework y la logica de
negocio no se tocan.
1. La identidad, con un comando
npm run init-product -- \
--name "Acme" --slug acme --company "Acme Inc" \
--company-url https://acme.com --support-email soporte@acme.com \
--base-url https://app.acme.com
Reescribe src/config/product.ts (la fuente unica), el nombre en
package.json y la URL en .env.example.
Puedes ejecutarlo sin argumentos para que te vaya preguntando, o con
--dry-run para ver que cambiaria sin escribir nada.
Como todo bebe de product.ts, ese comando cambia de golpe el SEO, los correos,
los datos estructurados, la cabecera, el pie y los textos traducidos.
2. Los colores
Estan en src/app/globals.css, como propiedades CSS, definidas para tema claro
y oscuro. Toda la interfaz se pinta con esos tokens: no hay ni un color
escrito a mano en los componentes, y hay un verificador que lo impide.
Cambiar la marca visual es cambiar esos valores. No hay que ir componente por componente.
3. Los textos
Viven en src/locales/es/ y src/locales/en/, un fichero por espacio
(landing, pricing, profile, admin, support...).
Dos reglas:
- Usa los distintivos
{brand},{company},{supportEmail}y{baseUrl}en vez de escribir tu nombre a mano. Se resuelven desdeproduct.ts, asi que cuando cambie algo no se queda un texto viejo por ahi. - Manten espanol e ingles simetricos. Cada clave tiene que existir en los
dos.
npm run verify:i18nlo comprueba y ademas caza unt()que apunte a una clave que ya no existe, que si no saldria la clave cruda en pantalla.
4. Navegacion y categorias de soporte
- Etiquetas del menu:
common.nav.*ycommon.sidebar.*en los ficheros de idioma. - Categorias de soporte: el tipo
SupportCategoryensrc/core/entities/SupportTicket.ts, las respuestas automaticas en la ruta de tickets, y las etiquetascategory.*ensupport.json. Renombra y anade las que encajen con tu producto.
5. Precios y creditos
- Nombres, precios y ventajas de los packs:
pricing.json, en los dos idiomas. - Identificadores de precio de Stripe: conecta tus productos y pon las claves.
- El modelo de "esta accion cuesta N creditos" es generico: ajusta las cantidades y como lo llamas.
6. La documentacion
No se toca aqui. Tu documentacion se escribe desde el panel, en los dos idiomas, y se guarda en la base de datos.
Lo unico que quizas quieras cambiar es la palabra de la direccion. Las paginas
van bajo /documentacion/... en espanol y /en/documentation/... en ingles. Si
tu producto quiere otras palabras, aparecen en cuatro sitios y los cuatro tienen
que coincidir: la reescritura en next.config.js, hrefDeDoc en
src/lib/docs/tree.ts, y las dos vistas previas del panel (DocFields.tsx y
DocsList.tsx).
7. Los textos legales
Los que vienen son ejemplos, no asesoramiento juridico, y cada pagina lo dice con un aviso visible. Tienes una guia entera en la pagina de Guia legal.
8. Las imagenes
Sustituye en public/images/:
logo/, tu logotipo, al que apuntaproduct.ts.og/, las imagenes que se ven al compartir en redes.
Y en la raiz de public/, los favicons y los iconos de aplicacion, mas el
nombre en site.webmanifest.
Los graficos de la portada y de precios son iconos vectoriales, asi que no hay ilustraciones que redibujar.
9. Comprueba
npm run verify:all # la puerta del dia a dia
npm run verify:release # la completa, con pruebas de navegador
npm run build
Lo que no deberias necesitar tocar
src/core/, es decir el dominio y los puertos.
Si adaptar tu producto te obliga a cambiar algo ahi, tratalo como un fallo de la plantilla y arreglalo como tal, no como un parche para tu caso. Es lo que distingue una base que aguanta cinco anos de una que se pudre en seis meses.