destack
1.0.0
Construa páginas de destino visualmente corretas em seus projetos React ou Next.js. Implante -os zero mais configuração!
? Exemplos: prettyfunnels.com, getDestack.com
[13/03/2024] O Destack V3 acaba de ser lançado no NPM. Saiba mais em Pull/103 e problemas/104. Observe que as páginas criadas com V2 precisam ser recriadas com V3 para funcionar sem problemas.
[10/10/2023] Destack V3 está na versão beta. Esta versão é uma reescrita do editor do zero. Confira no Destack-Starter-beta. Mais em Pull/103 e Issues/104.
[13/06/2023] Mais três temas foram adicionados prelinhatmos, picada de fluxo e fenda de fluxo.
[04/02/2023] A versão 2 acaba de ser lançada no NPM. Experimente com o Destack@2 ou Destack@mais recente.
[17/12/2022] Destack V2 está agora na versão beta. É uma grande reescrita que vem um novo construtor de páginas personalizado baseado no Craft.js. Confira no Destack-Starter-beta. Mais em Pull/62 e Issues/22.
[11/10/2022] O Destack agora suporta vários temas. Dois novos temas foram adicionados Meraki UI e Hyper UI.
É uma ferramenta para criar páginas de destino dentro de seus projetos React ou Next.JS. O Destack inclui vários componentes de blocos de cauda, interface do usuário meraki, interface do usuário hiper, prelinhatura, picada de fluxo e fenda de fluxo. Também suporta uploads de imagens e envios de formulários.
O Destack ajuda a parar de se preocupar com as páginas de marketing para que você possa se concentrar no seu projeto.
Destack agora suporta a seleção de temas.
| Seleção de temas | UI meraki (componentes) |
| Hyper UI (componentes) | Bloco de cauda (componentes) |
| Prelinheiro (componentes) | Flow Rift (componentes) |
| Picada de fluxo (componentes) |
Existem muitos temas de Tailwind de código aberto que o Destack pode suportar. Se você quiser ajudar a adicionar um novo tema, crie um novo tópico em discussões ou me alcance no Twitter.
Existem centenas de blocos bem projetados e fortemente funcionais de blocos de cauda, interface do usuário meraki, UI hiper, prelinhatura, picada de fluxo e fenda de fluxo. Suporta as cores do tema do Tailwind, ou seja. Vermelho, amarelo, verde, azul, índigo, roxo e rosa.
Alimentado por um construtor mínimo de páginas personalizado que foi criado com simplicidade em mente. Ele suporta a alteração de classes CSS e propriedades CSS com o inspetor no navegador Devtools.
O Destack armazena todos os seus ativos no Github, Bitbucket etc. através do editor. Não há dependências externas para gerenciar ou se preocupar.
Armazena as imagens enviadas no editor em seu repositório e as exibe quando necessário na produção. Também suporta o envio do formulário HTML e API pronta para uso.
Trabalha os projetos existentes e novos e Next.js. Requer configuração mínima e nenhuma configuração extra para implantar suas páginas de destino na produção.
Fork the Destack-Starter Project
Ou implantar um projeto para a vercel:
Ou visualize -o online com Gitpod:
npm i destack Crie pages/api/builder/handle.js e adicione o seguinte:
export { handleEditor as default , config } from 'destack/build/server' Em qualquer página Next.js que você deseja configurar o Destack:
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'Fork the Destack-React-Starter Project
Ou implantar um projeto para a vercel:
Ou visualize -o online com Gitpod:
npm i destack Em package.json :
destack -d "react-scripts start"destack -b "react-scripts build" Em qualquer componente react.js que você deseja configurar o Destack:
export { ContentProviderReact as default } from 'destack'? O Destack é composto por dois componentes principais, o primeiro é um componente React que mostra o editor ou a página gerada e a segunda é uma rota da API Next.js que salva seu progresso para o seu repositório.
? Quando você executa o projeto em development (ou seja, com npm run dev ), o componente React o entende da variável de ambiente NODE_ENV e mostra o editor onde você pode criar sua página de destino visualmente.
Toda alteração que você faz vai para a rota da API que atualiza um arquivo default.json . Esse arquivo contém o HTML para sua página de destino e lembra -se de como você estrutura sua página para poder voltar mais tarde para atualizá -la.
Quando é hora de ir em production (ou seja, npm run build ou implante no vercel) O componente React lê NODE_ENV novamente e gera estaticamente a versão HTML da página que você cria no editor do Destack de Arquivo default.json criado para você anteriormente.
NOTA: A descrição acima é para Next.js. No React.js, o script
destack -bcria uma rota de API semelhante à descrita acima que lida com alterações de modelo e uploads de arquivo no desenvolvimento. Na produção, o Scriptdestack -dcopiadefault.jsonpara a pastapublice cria uma versão estática da página.
Mais sobre a arquitetura do projeto aqui.
async se não quiser um redirecionamentoasync , você pode criar uma rota da API/api/submitpublic/uploaded com seus nomes de arquivos originaisExemplo: https://github.com/liveduo/destack-landing
Crie um novo arquivo de página na pasta pages do projeto Next.js e importe destack , conforme descrito em #com um projeto-NEXTJS-NEXTJS para várias páginas.
Instale uma biblioteca de roteamento, como react-router-dom ou router-tutorial no projeto React.js e importar destack conforme descrito em #com um projeto-projeto com várias rotas. Para mais informações, consulte o Destack-React-Starter.
Consulte Contribuindo.md
Este projeto evoluiu da necessidade de protótipo rapidamente, manter a propriedade das páginas geradas e ser compatível com estruturas de pilha de jam sem servidor.
Next.js? ➕ Tailwind CSS? = ??
Por favor, vá e mostre a esses projetos algum amor (️).
Não se esqueça de conferir os obstáculos, a interface do usuário meraki, a hiper UI, o preléuto, a picada de fluxo e a fenda de fluxo., Sem seus incríveis componentes de código aberto, nada disso seria possível.
Feito com colaboradores-img.
