Unduh destack - Unduh Kode Sumber destack

destack

Kode Sumber AI

1.0.0

Unduh

DESK? Merangkul desain. Memiliki tumpukan.

Bangun halaman arahan secara visual tepat di proyek reaksi atau selanjutnya. Menyebarkan mereka nol konfigurasi lebih lanjut!

? Contoh: PrettyFunnels.com, getDestack.com

Pengumuman

[13/03/2024] Destack V3 baru saja dirilis di NPM. Pelajari lebih lanjut di Pull/103 dan masalah/104. Perhatikan bahwa halaman yang dibuat dengan V2 harus diciptakan kembali dengan V3 agar berfungsi dengan lancar.

[10/10/2023] Destack V3 ada di Beta. Rilis ini adalah penulisan ulang editor dari awal. Lihat di Destack-Starter-Beta. Lebih banyak di Pull/103 dan masalah/104.

[13/06/2023] Tiga tema lagi telah ditambahkan preline, aliran gigitan dan celah aliran.

[04/02/2023] Versi 2 baru saja dirilis di NPM. Cobalah dengan Destack@2 atau destack@terbaru.

[17/12/2022] Destack V2 sekarang dalam beta. Ini adalah penulisan ulang besar yang datang pembangun halaman kustom baru berdasarkan Craft.js. Lihat di Destack-Starter-Beta. Lebih banyak di Pull/62 dan masalah/22.

[11/10/2022] Destack sekarang mendukung banyak tema. Dua tema baru telah ditambahkan Meraki UI dan Hyper UI.

Apa Desaknya?

Ini adalah alat untuk membangun halaman arahan di dalam proyek React atau Next.js Anda. Destack mencakup beberapa komponen dari tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift .. Ini juga mendukung unggahan gambar dan pengiriman formulir.

Destack membantu Anda berhenti mengkhawatirkan halaman pemasaran sehingga Anda dapat fokus pada proyek Anda.

Tema

Destack sekarang mendukung pemilihan tema.

Seleksi tema	Meraki UI (Komponen)
Hyper UI (komponen)	Tailblocks (komponen)
Preline (Komponen)	Flow Rift (komponen)
Gigitan Aliran (Komponen)

Berkontribusi (tambahkan tema baru)

Ada banyak tema tailwind open source yang dapat didukung oleh destack. Jika Anda ingin membantu menambahkan tema baru, buat topik baru dalam diskusi atau hubungi saya di Twitter.

Fitur

? Blok yang kuat

Ada ratusan blok yang dirancang dengan baik dan sangat fungsional dari tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift .. Mendukung warna tema Tailwind yaitu. Merah, Kuning, Hijau, Biru, Indigo, Ungu & Merah Muda.

? Pembangun yang menyenangkan

Didukung oleh pembangun halaman minimal yang dibuat khusus yang dibuat dengan mempertimbangkan kesederhanaan. Ini mendukung mengubah kelas CSS tailwind dan properti CSS dengan inspektur di browser devtools.

? Kepemilikan data

Destack menyimpan semua aset Anda di GitHub, Bitbucket dll melalui editor. Tidak ada dependensi eksternal untuk dikelola atau dikhawatirkan.

? Dukungan Aset & Formulir

Menyimpan gambar yang diunggah di editor di repositori Anda & menampilkannya saat dibutuhkan pada produksi. Juga mendukung pengiriman formulir HTML dan API di luar kotak.

?? ‍ Pengaturan & Penempatan Mudah

Bekerja proyek yang ada & baru dan next.js proyek. Membutuhkan pengaturan minimal dan tidak ada konfigurasi tambahan untuk menggunakan halaman arahan Anda ke produksi.

Memulai

Dengan proyek berikutnya yang baru:

Fork the Destack-Starter Project
Atau menggunakan proyek ke Vercel:
Atau pratinjau online dengan gitpod:

Dengan proyek Next.js yang ada:

1. Instal Destack di Proyek Next.js Anda

npm i destack

2. Siapkan titik akhir pembangun

Buat pages/api/builder/handle.js dan tambahkan yang berikut:

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

3. Kemudian buat halaman baru

Di halaman Next.js apa pun Anda ingin menyiapkan Destack:

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

Dengan proyek react.js baru:

Fork the Destack-React-Starter Project
Atau menggunakan proyek ke Vercel:
Atau pratinjau online dengan gitpod:

Dengan proyek react.js yang ada:

1. Instal Destack pada proyek React.js Anda

npm i destack

2. Siapkan titik akhir pembangun

Di package.json :

Ganti skrip "Mulai" dengan destack -d "react-scripts start"
Kemudian, ganti skrip "build" dengan destack -b "react-scripts build"

3. Kemudian buat halaman baru

Dalam komponen react.js apa pun Anda ingin menyiapkan destack:

 export { ContentProviderReact as default } from 'destack'

Cara kerjanya

? Destack terdiri dari dua komponen utama, yang pertama adalah komponen bereaksi yang menunjukkan editor atau halaman yang dihasilkan dan yang kedua adalah rute API berikutnya.js yang menghemat kemajuan Anda ke repositori Anda.

? ‍ Saat Anda menjalankan proyek dalam development (mis. Dengan npm run dev ) Komponen React memahaminya dari variabel lingkungan NODE_ENV dan menunjukkan kepada Anda editor tempat Anda dapat membuat halaman arahan Anda secara visual.

Setiap perubahan yang Anda lakukan pergi ke rute API yang memperbarui file default.json . File itu berisi HTML untuk halaman arahan Anda dan mengingat bagaimana Anda menyusun halaman Anda sehingga Anda dapat kembali lagi nanti untuk memperbaruinya.

Kapan waktu untuk masuk production (yaitu. Do npm run build atau Deploy to Vercel) Komponen React membaca NODE_ENV lagi dan secara statis menghasilkan versi HTML dari halaman yang Anda bangun di editor dari default.json File Destack yang dibuat untuk Anda sebelumnya.

Catatan: Deskripsi di atas adalah untuk Next.js. Di React.js, skrip destack -b membuat rute API yang mirip dengan yang dijelaskan di atas yang menangani perubahan template dan mengunggah file dalam pengembangan. Dalam produksi destack -d Script menyalin default.json ke folder public dan membangun versi statis halaman.

Lebih lanjut tentang arsitektur proyek di sini.

Bagaimana cara & pemandu

Menambahkan formulir HTML

Jatuhkan blok yang berisi formulir
Klik pada pengaturan Form & Head to Components
Tambahkan URL Formulir & Periksa async jika tidak ingin pengalihan
Untuk menangani formulir async , Anda dapat membuat rute API
- Next.js: Buat file di API/Submit.js
- React.js: Anda akan memerlukan server Node.js yang terpisah. Mendengarkan /api/submit

Mengunggah gambar

Jatuhkan blok yang berisi gambar atau gunakan blok gambar
Klik pada gambar untuk membuka modal Unggah
Pilih gambar yang ingin Anda perbarui dan klik untuk menambahkannya ke halaman
Catatan: Gambar diunggah ke public/uploaded dengan nama file asli mereka

Buat blog

Buat halaman terkait blog.
Gunakan kembali komponen header dan footer. Perhatikan bahwa ini membutuhkan pengaturan CSS Tailwind.

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

Dukungan multi-halaman

Next.js

Buat file halaman baru di folder pages dari proyek berikutnya.js dan impor destack seperti yang dijelaskan dalam #with-an-existing-nextjs-project ke berbagai halaman.

React.js

Instal perpustakaan perutean seperti react-router-dom atau router-tutorial dalam proyek react.js dan impor destack seperti yang dijelaskan dalam #with-a-new-reactjs-proyek ke berbagai rute. Untuk info lebih lanjut, periksa destack-react-starter.

Berkontribusi pada proyek

Lihat Contributing.md

Bagaimana proyek ini muncul

Proyek ini berevolusi dari kebutuhan untuk prototipe dengan cepat, mempertahankan kepemilikan dari halaman yang dihasilkan dan kompatibel dengan kerangka kerja selai tanpa server.

Next.js? ➕ Tailwind CSS? = ??

Silakan pergi dan tunjukkan proyek -proyek ini beberapa cinta (️).

Jangan lupa untuk memeriksa tailblocks, Meraki UI, Hyper UI, Preline, Flow Bite and Flow Rift., Tanpa komponen bersumber terbuka mereka yang luar biasa, semua ini tidak mungkin terjadi.