destack
1.0.0
Construya páginas de destino visualmente justo en sus proyectos React o Next.js. ¡Implemente la configuración de cero cero!
? Ejemplos: PrettyFunnels.com, getDestack.com
[13/03/2024] Destack V3 acaba de ser lanzado en NPM. Obtenga más información en Pull/103 y problemas/104. Tenga en cuenta que las páginas creadas con V2 deben recrearse con V3 para funcionar sin problemas.
[10/10/2023] Destack V3 está en beta. Este lanzamiento es una reescritura del editor desde cero. Compruébalo en Destack-Starter-Beta. Más en Pull/103 y problemas/104.
[13/06/2023] Se han agregado tres temas más Preline, mordida de flujo y grieta de flujo.
[02/04/2023] La versión 2 acaba de ser lanzada en NPM. Pruébelo con Destack@2 o Destack@lo último.
[17/12/2022] Destack V2 ahora está en beta. Es una reescritura importante que viene un nuevo constructor de páginas personalizado basado en Craft.js. Compruébalo en Destack-Starter-Beta. Más en Pull/62 y problemas/22.
[10/11/2022] Destack ahora admite múltiples temas. Se han agregado dos temas nuevos Meraki UI e Hyper Ui.
Es una herramienta para construir páginas de destino dentro de sus proyectos React o Next.js. Destack incluye múltiples componentes de consumo de cola, interfaz de usuario de Meraki, hiper ui, preline, mordedura de flujo y grieta de flujo. También admite cargas de imágenes y envíos de formularios.
Destack lo ayuda a dejar de preocuparse por las páginas de marketing para que pueda concentrarse en su proyecto.
Destack ahora admite la selección de temas.
| Selección de temas | Meraki UI (componentes) |
| Hyper UI (componentes) | Blocks (componentes) |
| Preline (componentes) | Rift de flujo (componentes) |
| Mordedura de flujo (componentes) |
Hay muchos temas de viento de cola de código abierto que Destack puede soportar. Si desea ayudar a agregar un nuevo tema, cree un nuevo tema en las discusiones o comuníquese conmigo en Twitter.
Hay cientos de bloques bien diseñados y fuertemente funcionales de bloques de cola, interfaz de usuario de Meraki, hiper ui, preline, mordida de flujo y grieta de flujo. Admite los colores del tema del viento de cola, es decir. Rojo, amarillo, verde, azul, índigo, morado y rosa.
Impulsado por un constructor de páginas mínimo personalizado que se creó con la simplicidad en mente. Admite la alteración de las clases CSS de viento de cola y las propiedades CSS con el inspector en el navegador DevTools.
Destack almacena todos sus activos en GitHub, Bitbucket, etc. a través del editor. No hay dependencias externas para administrar o preocuparse.
Almacena las imágenes cargadas en el editor en su repositorio y las muestra cuando sea necesario en la producción. También es compatible con HTML y la sumisión del formulario API fuera de la caja.
Funciona los proyectos existentes y new React y Next.js. Requiere una configuración mínima y no hay configuración adicional para implementar sus páginas de destino en la producción.
Bifurca el proyecto Destack-Starter
O implementar un proyecto a Vercel:
O previsualizarlo en línea con GitPod:
npm i destack Cree pages/api/builder/handle.js y agregue lo siguiente:
export { handleEditor as default , config } from 'destack/build/server' En cualquier página Next.js, desea configurar Destack:
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'Bifurca el proyecto Destack-React-Starter
O implementar un proyecto a Vercel:
O previsualizarlo en línea con GitPod:
npm i destack En package.json :
destack -d "react-scripts start"destack -b "react-scripts build" En cualquier componente react.js, desea configurar Destack:
export { ContentProviderReact as default } from 'destack'? Destack está compuesto por dos componentes principales, el primero es un componente React que muestra el editor o la página generada y la segunda es una ruta API Next.js que guarda su progreso a su repositorio.
NODE_ENV Cuando ejecuta el proyecto en development (es decir, con npm run dev .
Cada cambio que realice va a la ruta API que actualiza un archivo default.json . Ese archivo contiene el HTML para su página de destino y recuerda cómo estructura su página para que pueda volver más tarde para actualizarlo.
¿Cuándo es el momento de ir en production (es decir, Do npm run build o Deplegue en VERCEL)? El componente React lee NODE_ENV nuevamente y genera estáticamente la versión HTML de la página que crea en el editor desde el archivo default.json . Json Destack creado para usted anteriormente.
Nota: La descripción anterior es para Next.js. En React.js, el script
destack -bcrea una ruta API similar a la descrita anteriormente que maneja los cambios de plantilla y las cargas de archivos en el desarrollo. En la producción, el scriptdestack -dcopiadefault.jsona la carpetapublicy construye una versión estática de la página.
Más sobre la arquitectura del proyecto aquí.
async si no quiere una redirecciónasync , puede crear una ruta API/api/submitpublic/uploaded con sus nombres de archivo originalesEjemplo: https://github.com/liveduo/destack-landing
Cree un nuevo archivo de página en la carpeta pages del proyecto Next.js e importe destack como se describe en #With-An-Existing-NextJS-Project a varias páginas.
Instale una biblioteca de enrutamiento como react-router-dom o router-tutorial en el proyecto React.js e importe destack como se describe en #con un nuevo proyecto de reactjs a varias rutas. Para obtener más información, consulte Destack-React-Starter.
Ver contribuyente.md
Este proyecto evolucionó a partir de la necesidad de prototipos rápidamente, mantiene la propiedad de las páginas generadas y es compatible con los marcos de jam-stack sin servidor.
Next.js? ➕ Tailwind CSS? = ??
Vaya y muestre estos proyectos un poco de amor (️).
No olvides visitar Tailbloks, Meraki UI, Hyper Ui, Preline, Flow Bite y Flow Rift., Sin sus increíbles componentes de origen abierto, nada de esto hubiera sido posible.
Hecho con contribuyentes-IMG.
