Téléchargement destack - Téléchargement du code source destack

destack

Code Source AI

1.0.0

Télécharger

Destack? Embrasser le design. Possédez la pile.

Construisez les pages de destination visuellement dans vos projets React ou Next.js. Déployez-les à zéro configuration supplémentaire!

? Exemples: jolifunnels.com, getDestack.com

Annonces

[13/03/2024] Destack V3 vient d'être publié sur NPM. En savoir plus sur Pull / 103 et Issues / 104. Notez que les pages créées avec V2 doivent être recréées avec V3 pour fonctionner en douceur.

[10/10/2023] Destack V3 est en version bêta. Cette version est une réécriture de l'éditeur de Scratch. Vérifiez-le chez Destack-Starter-Beta. Plus à Pull / 103 et Issues / 104.

[13/06/2023] Trois autres thèmes ont été ajoutés la préline, la morsure d'écoulement et le rift d'écoulement.

[04/02/2023] La version 2 vient d'être publiée sur NPM. Essayez-le avec Destack @ 2 ou destack @ dernier.

[17/12/2022] Destack V2 est maintenant en version bêta. Il s'agit d'une réécriture majeure qui vient de nouveau constructeur de pages personnalisés basé sur Craft.js. Vérifiez-le chez Destack-Starter-Beta. Plus à Pull / 62 et Issues / 22.

[11/10/2022] Destack prend désormais en charge plusieurs thèmes. Deux nouveaux thèmes ont été ajoutés Meraki UI et Hyper UI.

Qu'est-ce que Destack?

C'est un outil pour construire des pages de destination dans vos projets React ou Next.js. Destack comprend plusieurs composants des blocs de queue, Meraki UI, Hyper UI, préline, morsure de débit et rift de flux. Il prend également en charge les téléchargements d'image et les soumissions de formulaires.

Destack vous aide à arrêter de vous soucier des pages de marketing afin que vous puissiez vous concentrer sur votre projet.

Thèmes

Destack prend maintenant en charge la sélection de thème.

Sélection de thème	Meraki UI (Composants)
Hyper ui (composants)	Blocs de queue (composants)
Préline (composants)	Flow Rift (composants)
Morsure d'écoulement (composants)

Contribuer (ajouter un nouveau thème)

Il existe de nombreux thèmes de vent arrière open source que Destack peut soutenir. Si vous souhaitez aider à ajouter un nouveau thème, créer un nouveau sujet dans les discussions ou contacter-moi sur Twitter.

Caractéristiques

? Blocs puissants

Il y a des centaines de blocs bien conçus et fortement fonctionnels des blocs de queue, Meraki UI, hyper UI, préline, morsure de flux et rift de flux. Prend en charge les couleurs du thème de Tailwind, c'est-à-dire. Rouge, jaune, vert, bleu, indigo, violet et rose.

? Délicieux constructeur

Propulsé par un constructeur de page minimal sur mesure qui a été créé avec simplicité à l'esprit. Il prend en charge la modification des classes CSS du vent arrière et des propriétés CSS avec l'inspecteur dans le navigateur Devtools.

? Propriété des données

Destack stocke tous vos actifs sur GitHub, Bitbucket, etc. via l'éditeur. Il n'y a pas de dépendances externes à gérer ou à s'inquiéter.

? Prise en charge des actifs et des formulaires

Store les images téléchargées dans l'éditeur dans votre référentiel et les affiche en cas de besoin en production. Prend également en charge la soumission de formulaire HTML et API hors de la boîte.

?? ‍ Configuration et déploiement faciles

Fonctionne les projets existants et nouveaux React et Next.js. Nécessite une configuration minimale et aucune configuration supplémentaire pour déployer vos pages de destination en production.

Commencer

Avec un nouveau projet Next.js:

Fourk le projet destack-starter
Ou déployez un projet à Vercel:
Ou prévisualisez-le en ligne avec Gitpod:

Avec un projet Next.js existant:

1. Installez Destack sur votre projet Next.js

npm i destack

2. Configuration du point final du constructeur

Créez pages/api/builder/handle.js et ajoutez ce qui suit:

 export { handleEditor as default , config } from 'destack/build/server'

3. Créez ensuite une nouvelle page

Sur n'importe quelle page suivante.js, vous souhaitez configurer Destack:

 export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

Avec un nouveau projet React.js:

Fourk le projet de destack-react-starter
Ou déployez un projet à Vercel:
Ou prévisualisez-le en ligne avec Gitpod:

Avec un projet react.js existant:

1. Installez Destack sur votre projet React.js

npm i destack

2. Configuration du point final du constructeur

Dans package.json :

Remplacez le script "start" par destack -d "react-scripts start"
Ensuite, remplacez le script "build" par destack -b "react-scripts build"

3. Créez ensuite une nouvelle page

Dans n'importe quel composant react.js, vous souhaitez configurer Destack:

 export { ContentProviderReact as default } from 'destack'

Comment ça marche

? Destack est composé de deux composants principaux, le premier est un composant React qui affiche l'éditeur ou la page générée et la seconde est une route API suivante qui sauve vos progrès vers votre référentiel.

? ‍ Lorsque vous exécutez le projet en development (c'est-à-dire avec npm run dev ), le composant React le comprend à partir de la variable d'environnement NODE_ENV et vous montre l'éditeur où vous pouvez créer votre page de destination visuellement.

Chaque modification que vous apportez passe à la route API qui met à jour un fichier default.json . Ce fichier contient le HTML pour votre page de destination et il se souvient de la façon dont vous structurez votre page afin que vous puissiez revenir plus tard pour la mettre à jour.

Quand est le temps d'aller en production (c'est-à-dire npm run build ou de déployer sur Vercel), le composant React lit à nouveau NODE_ENV et génère statiquement la version HTML de la page que vous construisez dans l'éditeur à partir du fichier default.json Destack créé pour vous plus tôt.

Remarque: la description ci-dessus est pour next.js. Dans React.js, le script destack -b crée une route API similaire à celle décrite ci-dessus qui gère les modifications du modèle et les téléchargements de fichiers en développement. En production, le script destack -d copie default.json au dossier public et construit une version statique de la page.

En savoir plus sur l'architecture du projet ici.

Comment et guides

Ajout d'un formulaire HTML

Déposez un bloc qui contient un formulaire
Cliquez sur les paramètres du formulaire et de la direction des composants
Ajouter une URL du formulaire et vérifier async si je ne veux pas de redirection
Pour gérer un formulaire async , vous pouvez créer une route API
- Next.js: créez un fichier dans API / SOUMING.js
- React.js: vous aurez besoin d'un serveur Node.js séparé à l'écoute sur /api/submit

Téléchargement des images

Déposez un bloc contenant une image ou utilisez un bloc d'image
Cliquez sur une image pour ouvrir le modal de téléchargement
Sélectionnez l'image que vous souhaitez mettre à jour et cliquez dessus pour l'ajouter à la page
Remarque: les images sont téléchargées sur public/uploaded avec leurs noms de fichiers d'origine

Créer un blog

Créez les pages liées au blog.
Réutilisez les composants d'en-tête et de pied de page. Notez que cela nécessite la configuration de CSS à vent arrière.

Exemple: https://github.com/liveduo/destack-landing

Support de plusieurs pages

Next.js

Créez un nouveau fichier de page dans le dossier pages du projet suivant.js et importez destack comme décrit dans # avec-an-existant-nextjs-project sur différentes pages.

React.js

Installez une bibliothèque de routage telle que react-router-dom ou router-tutorial dans le projet React.js et importez destack comme décrit dans # With-A-New-ReactJS-Project sur divers itinéraires. Pour plus d'informations, consultez Destack-React-Starter.

Contribuant au projet

Voir contribution.md

Comment ce projet est arrivé à l'existence

Ce projet a évolué à partir de la nécessité de prototyper rapidement, de maintenir la propriété des pages générées et d'être compatible avec des frameworks Jam-Stack sans serveur.

Next.js? ➕ CSS du vent arrière? = ??

Veuillez aller montrer à ces projets un peu d'amour (️).

N'oubliez pas de vérifier les blocs de queue, Meraki UI, Hyper UI, la préline, la morsure de débit et le rift de flux., Sans leurs composants d'origine ouverte incroyables, rien de tout cela n'aurait été possible.