destack Download - destack Source Code Download

destack

AI-Quellcode

1.0.0

Herunterladen

Destack? Umarmen Sie Design. Besitze den Stapel.

Bauen Sie bei Ihren React- oder Next.js -Projekten visuell auf dem neuesten Stand. Stellen Sie sie null weitere Konfiguration ein!

? Beispiele: Prettyfunnels.com, GetDestack.com

Ankündigungen

[13/03/2024] Destack V3 wurde gerade auf NPM veröffentlicht. Erfahren Sie mehr unter Pull/103 und Issues/104. Beachten Sie, dass mit V2 erstellte Seiten mit V3 nachgebaut werden müssen, um reibungslos zu funktionieren.

[10/10/2023] Destack V3 ist in Beta. Diese Veröffentlichung ist ein Umschreiben des Editors von Grund auf neu. Schauen Sie sich es bei Destack-Starter-Beta an. Mehr bei Pull/103 und Ausgaben/104.

[13/06/2023] Drei weitere Themen wurden Preline, Flussbiss und Flussriss hinzugefügt.

[04/02/2023] Version 2 wurde gerade auf NPM veröffentlicht. Probieren Sie es mit Destack@2 oder Destack@Lasting aus.

[17/12/2022] Destack V2 ist jetzt in Beta. Es ist ein großes Umschreiben, der auf basierend auf Craft.js einen neuen benutzerdefinierten Seitenbauer geliefert hat. Schauen Sie sich es bei Destack-Starter-Beta an. Mehr bei Pull/62 und Ausgaben/22.

[10.10.2022] Destack unterstützt jetzt mehrere Themen. Zwei neue Themen wurden Meraki UI und Hyper UI hinzugefügt.

Was ist Destack?

Es ist ein Werkzeug, um Zielseiten in Ihren React- oder Next.js -Projekten zu erstellen. Destack enthält mehrere Komponenten von Tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite und Flow Rift. Er unterstützt auch Bild -Uploads und Formulareinreichungen.

Destack hilft Ihnen, sich nicht mehr um Marketingseiten zu sorgen, damit Sie sich auf Ihr Projekt konzentrieren können.

Themen

Destack unterstützt jetzt die Themenauswahl.

Themenauswahl	Meraki UI (Komponenten)
Hyper UI (Komponenten)	Tailblocks (Komponenten)
Preline (Komponenten)	Flow Rift (Komponenten)
Flussbiss (Komponenten)

Beitragen (fügen Sie ein neues Thema hinzu)

Es gibt viele Open Source -Tailwind -Themen, die Destack unterstützen kann. Wenn Sie helfen möchten, ein neues Thema hinzuzufügen, erstellen Sie ein neues Thema in Diskussionen oder wenden Sie sich auf Twitter an mich.

Merkmale

? Kraftvolle Blöcke

Es gibt Hunderte von gut gestalteten und stark funktionalen Blöcken von Tailblblocks, Meraki UI, Hyper UI, Preline, Flow Bite und Flow Rift. Unterstützt die Themenfarben des Throwswinds dh dh dh dh dh. Rot, Gelb, Grün, Blau, Indigo, Lila & Pink.

? Delighiger Baumeister

Angetrieben von einem maßgeschneiderten minimalen Seitenbuilder, der unter Berücksichtigung der Einfachheit erstellt wurde. Es unterstützt die Veränderung von CSS -Klassen und CSS -Eigenschaften des Rückenwinds mit dem Inspektor in Browser Devtools.

? Datenbesitz

Destack speichert alle Ihre Vermögenswerte auf Github, Bitbucket usw. über den Herausgeber. Es gibt keine externen Abhängigkeiten, über die man sich verwalten oder Sorgen machen muss.

? Assets & Formuls Support

Speichert die im Editor in Ihrem Repository hochgeladenen Bilder und zeigt sie bei Bedarf bei der Produktion an. Unterstützt auch die Einreichung von HTML und API -Formular außerhalb der Box.

? Einfaches Setup und Bereitstellung

Arbeitet vorhanden und neue reag- und next.js -Projekte. Benötigt ein minimales Setup und keine zusätzliche Konfiguration, um Ihre Zielseiten für die Produktion bereitzustellen.

Erste Schritte

Mit einem neuen Next.js -Projekt:

Geben Sie das Destack-Starter-Projekt auf
Oder ein Projekt für Vercel bereitstellen:
Oder Vorschau IT online mit Gitpod:

Mit einem bestehenden Next.js -Projekt:

1. Installieren Sie Destack bei Ihrem nächsten.js -Projekt

npm i destack

2. Richten Sie den Erbauerendpunkt ein

Erstellen Sie pages/api/builder/handle.js und fügen Sie Folgendes hinzu:

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

3. Erstellen Sie dann eine neue Seite

Auf jeder Seite Next.js möchten Sie Destack einrichten:

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

Mit einem neuen React.js -Projekt:

Geben Sie das Destack-React-Starter-Projekt auf
Oder ein Projekt für Vercel bereitstellen:
Oder Vorschau IT online mit Gitpod:

Mit einem vorhandenen React.js -Projekt:

1. Installieren Sie Destack an Ihrem React.js -Projekt

npm i destack

2. Richten Sie den Erbauerendpunkt ein

In package.json :

Ersetzen Sie das Skript "Start" durch destack -d "react-scripts start"
Ersetzen Sie dann das "Build" -Skript durch destack -b "react-scripts build"

3. Erstellen Sie dann eine neue Seite

In jeder React.js -Komponente möchten Sie Destack einrichten:

 export { ContentProviderReact as default } from 'destack'

Wie es funktioniert

? Destack besteht aus zwei Hauptkomponenten. Die erste ist eine React -Komponente, die den Editor oder die generierte Seite anzeigt, und die zweite ist eine nächste API -Route, die Ihren Fortschritt in Ihrem Repository speichert.

? ‍ Wenn Sie das Projekt in development ausführen (dh mit npm run dev ), versteht die React -Komponente es aus der Umgebungsvariablen NODE_ENV und zeigt Ihnen den Editor, auf dem Sie Ihre Zielseite visuell erstellen können.

Jede Änderung, die Sie vornehmen, geht an die API -Route, die eine Standarddatei default.json aktualisiert. Diese Datei enthält die HTML für Ihre Zielseite und erinnert sich, wie Sie Ihre Seite strukturieren, damit Sie später zurückkehren können, um sie zu aktualisieren.

Wann ist Zeit für production (dh npm run build oder Bereitstellung in Vercel). Die React -Komponente liest NODE_ENV erneut und generiert die HTML -Version der Seite, die Sie im Editor aus dem früheren default.json -Dateidestack für Sie erstellt haben.

Hinweis: Die obige Beschreibung ist für Next.js. In React.js erstellt das destack -b -Skript eine API -Route, die der oben beschriebenen ähnelt, die Vorlagenänderungen und Datei -Uploads in der Entwicklung übernimmt. In der Produktion kopiert das destack -d -Skript default.json in den public Ordner und erstellt eine statische Version der Seite.

Mehr über die Architektur des Projekts hier.

Wie zu und Führer

Hinzufügen eines HTML -Formulars

Lassen Sie einen Block fallen, der eine Form enthält
Klicken Sie auf die Einstellungen für die Komponenten auf das Formular und untersuchen Sie die Komponenteneinstellungen
Fügen Sie Formular URL hinzu und überprüfen Sie async wenn Sie keine Umleitung wünschen
Um eine async Formulare zu bewältigen, können Sie eine API -Route erstellen
- Weiter.js: Erstellen Sie eine Datei in API/subjekt.js
- React.js: Sie benötigen einen separaten node.js server, der auf /api/submit hört

Bilder hochladen

Lassen Sie einen Block fallen, der ein Bild enthält, oder verwenden Sie Bildblock
Klicken Sie auf ein Bild, um das Upload -Modal zu öffnen
Wählen Sie das Bild aus, das Sie aktualisieren möchten, und klicken Sie darauf, um es zur Seite hinzuzufügen
Hinweis: Die Bilder werden mit ihren ursprünglichen Dateinamen auf public/uploaded

Erstellen Sie einen Blog

Erstellen Sie die blogbezogenen Seiten.
Verwenden Sie die Header- und Fußzeilenkomponenten wieder. Beachten Sie, dass dies das Einrichten von Rückenwind -CSS erfordert.

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

Mehrseitige Unterstützung

Weiter.js

Erstellen Sie eine neue SEAL-Datei im pages des nächsten.js-Projekts und importieren Sie destack , wie in #With-Anisting-NextJS-Project in verschiedene Seiten beschrieben.

React.js

Installieren Sie eine Routing-Bibliothek wie react-router-dom oder router-tutorial im Projekt React.js und importieren Sie destack , wie in #--new-reactjs-project auf verschiedene Routen beschrieben. Weitere Informationen finden Sie in Destack-React-Starter.

Beitrag zum Projekt

Siehe Beitrag.md

Wie dieses Projekt zur Existenz kam

Dieses Projekt entwickelte sich aus der Notwendigkeit, schnell zu prototypisieren, die Eigentum an den generierten Seiten beizubehalten und mit serverlosen Jam-Stack-Frameworks kompatibel zu sein.