FAQ de Create Aptos Dapp

La plantilla está construida de una manera que hay páginas destinadas a ser accedidas solo en modo DEV y páginas que están destinadas a ser accedidas también en modo PROD. Por ejemplo, las páginas “crear colección” y “mis colecciones” solo están destinadas para desarrollo local y solo pueden ser accedidas en modo DEV mientras que la página “mint público” puede ser accedida en modo PROD. import.meta.env es la forma de Vite de saber cuál es el entorno en el que se está ejecutando la dapp - DEV o PROD.

Puede necesitar actualizar la ruta raíz, si desplegaste tu sitio en user-name.github.io/my-repo entonces la ruta raíz debería ser actualizada a my-repo

Tailwind es un framework CSS de utilidad-primero que escanea tus componentes para nombres de clase y genera un archivo CSS estático que contiene los estilos correspondientes en tiempo de construcción.

Este framework hace fácil escribir rápidamente estilos que están co-ubicados con tu marcado de componente sin incurrir en costos de rendimiento en tiempo de ejecución. También te ayuda a mantener un tema consistente a lo largo de tu app que es responsivo al modo claro y oscuro.

Para aprender más sobre Tailwind CSS, por favor refiere a su documentación oficial.

Shadcn es una colección de componentes accesibles que puedes copiar y pegar en tu app a través de su herramienta CLI. Dado que los archivos fuente viven en el código base de tu app, puedes personalizarlos tanto como necesites.

Estos componentes están construidos sobre Radix UI Primitives y están estilizados con Tailwind CSS. Para aprender más sobre shadcn/ui, por favor refiere a su documentación oficial.

El tema para esta plantilla está dividido entre tailwind.config.js e frontend/index.css. La configuración de Tailwind declara todos los colores del tema, estilos de texto, keyframes de animación, radios de borde, etc. El archivo CSS raíz (index.css) declara los valores de color reales para modo claro y oscuro como propiedades CSS personalizadas (variables CSS), el valor de radio base, y aplica cualquier CSS global requerido.

Por ejemplo, si quieres hacer todos los botones y tarjetas más redondos en tu app, puedes aumentar el valor de radio base (--radius) en index.css.

Si quieres agregar un nuevo estilo de texto, puedes definirlo en la función addTextStyles hacia el final de tailwind.config.js.

Y si quieres modificar el color primario de la app, puedes actualizar los valores de color HSL definidos en index.css.

Componentes adicionales pueden ser agregados a través del CLI shadcn-ui. Por ejemplo, si deseas agregar un componente Switch, puedes ejecutar el siguiente comando:

npx shadcn-ui@latest add switch

Este comando creará un archivo switch.tsx en tu directorio frontend/components/ui que contiene un componente switch estilizado. Para una lista completa de componentes shadcn disponibles, por favor refiere a la documentación de componentes shadcn.

Si necesitas agregar un componente que no está incluido en la colección shadcn/ui, eres bienvenido a agregar tus propios componentes bajo frontend/components o dentro del directorio frontend/pages si son específicos para la página en la que estás trabajando.

Si estás creando tus propios componentes personalizados o agregando a la UI de alguna manera, puedes necesitar agregar algunos colores nuevos. Para agregar un nuevo color, primero debes definir los valores de color HSL claros y oscuros en frontend/index.css y luego agregar el nuevo token de color del tema al tema definido en tailwind.config.js.

Para instrucciones más detalladas, por favor refiere a la documentación de shadcn sobre temas.

En un esfuerzo por mantener simplicidad en la plantilla de dapp, solo el modo claro está configurado. Sin embargo, los valores de color están definidos para ambos modos claro y oscuro en el tema. Si deseas agregar modo oscuro a tu app, simplemente tienes que agregar el ThemeProvider y ModeToggle de shadcn a tu app. Una vez agregado, la UI será completamente responsiva tanto al modo claro como oscuro. Para instrucciones detalladas sobre cómo lograr esto, por favor refiere a la documentación de modo oscuro de shadcn.