destack Download - destack исходный код скачать

destack

AI Исходный код

1.0.0

Скачать

Дестак? Охватите дизайн. Владеть стеком.

Создайте целевые страницы визуально прямо в ваших проектах React или Next.js. Развернуть их ноль дальнейшей конфигурации!

? Примеры: PrettyFunnels.com, getDestack.com

Объявления

[13/03/2024] Destack v3 только что был выпущен на NPM. Узнайте больше на Pull/103 и проблемах/104. Обратите внимание, что страницы, созданные с V2, должны быть воссозданы с помощью V3, чтобы функционировать гладко.

[10/10/2023] Destack V3 находится в бета -версии. Этот релиз является переписыванием редактора с нуля. Проверьте это в Destack-Starter-Beta. Больше в PULL/103 и проблемах/104.

[13/06/2023] были добавлены еще три темы PRIENT, укус потока и распад потока.

[04/02/2023] Версия 2 только что была выпущена на NPM. Попробуйте это с Destack@2 или destack@последний.

[17/12/2022] Destack V2 сейчас в бета -версии. Это крупный переписывание, которое появляется новым пользовательским страницей, основанным на craft.js. Проверьте это в Destack-Starter-Beta. Больше в Pull/62 и проблемах/22.

[10/10/2022] Destack теперь поддерживает несколько тем. Две новые темы были добавлены Meraki UI и Hyper UI.

Что такое Destack?

Это инструмент для строительства целевых страниц в рамках ваших проектов React или Next.js. Destack включает в себя несколько компонентов из хвостовых блоков, пользовательского интерфейса Meraki, Hyper UI, PRELINE, укуса потока и расхода.

Destack помогает вам перестать беспокоиться о маркетинговых страницах, чтобы вы могли сосредоточиться на своем проекте.

Темы

Destack теперь поддерживает выбор темы.

Выбор темы	Meraki UI (компоненты)
Hyper UI (компоненты)	Хвосты (компоненты)
PRILEN (компоненты)	Поток раскол (компоненты)
Укус потока (компоненты)

Внести свой вклад (добавьте новую тему)

Есть много тем, которые могут поддержать Destack. Если вы хотите помочь добавить новую тему, создайте новую тему в дискуссиях или обратиться ко мне в Twitter.

Функции

? Мощные блоки

Существуют сотни хорошо спроектированных и сильно функциональных блоков от хвостовых блоков, пользовательского интерфейса Meraki, Hyper UI, Preline, укуса потока и расхода. Красный, желтый, зеленый, синий, индиго, фиолетовый и розовый.

? Восхитительный строитель

Основанный на специально разработанном минимальном странице-строителе, который был создан с учетом простоты. Он поддерживает изменение классов CSS Tailwind и свойства CSS с инспектором в браузере Devtools.

? Владение данными

Destack хранит все ваши активы на GitHub, Bitbucket и т. Д. Нет никаких внешних зависимостей для управления или беспокоиться.

? Поддержка активов и форм

Сохраняет изображения, загруженные в редакцию в вашем хранилище, и отображает их при необходимости на производстве. Также поддерживает подчинение формы HTML и API из коробки.

‍ Простая настройка и развертывание

Работает существующие и новые проекты React и Next.js. Требуется минимальная настройка и отсутствие дополнительной конфигурации для развертывания ваших целевых страниц для производства.

Начиная

С новым проектом Next.js:

Вилка проекта Destack-Starter
Или развернуть проект в Vercel:
Или просмотреть его онлайн с GitPod:

С существующим проектом Next.js:

1. Установите Destack на ваш проект.

npm i destack

2. Настройка конечной точки строителя

Создайте pages/api/builder/handle.js и добавьте следующее:

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

3. Затем создайте новую страницу

На любой странице Next.js вы хотите настроить Destack:

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

С новым проектом React.js:

Вилка проекта Destack-React-Starter
Или развернуть проект в Vercel:
Или просмотреть его онлайн с GitPod:

С существующим проектом React.js:

1. Установите Destack на свой проект React.js

npm i destack

2. Настройка конечной точки строителя

В package.json :

Замените сценарий «Start» на destack -d "react-scripts start"
Затем замените сценарий «Build» на destack -b "react-scripts build"

3. Затем создайте новую страницу

В любом компоненте React.js вы хотите настроить Destack:

 export { ContentProviderReact as default } from 'destack'

Как это работает

? Destack состоит из двух основных компонентов, первым является компонент React, который показывает редактор или сгенерированную страницу, а второй - это маршрут API Next.js, который сохраняет ваш прогресс в вашем хранилище.

development npm run dev NODE_ENV

Каждое изменение, которое вы вносите, идет на маршрут API, который обновляет файл default.json . Этот файл содержит HTML для вашей целевой страницы, и он помнит, как вы структурируете свою страницу, чтобы вы могли вернуться позже, чтобы обновить ее.

Когда пришло время перейти в production (т.е. сделайте npm run build или развертывание в Vercel), компонент React снова считывает NODE_ENV и статически генерирует HTML -версию страницы, которую вы создаете в редакторе из Destack файла default.json , созданной для вас ранее.

Примечание: вышеуказанное описание для следующего.js. В React.js сценарий destack -b создает маршрут API, аналогичный описанному выше, который обрабатывает изменения шаблона и загрузку файлов при разработке. В производстве сценарий destack -d копирует default.json в public папку и создает статическую версию страницы.

Подробнее об архитектуре проекта здесь.

Как есть и гиды

Добавление формы HTML

Отбросить блок, который содержит форму
Нажмите на настройки формы и перейдите к компонентам
Добавьте форму URL и проверьте async , если не хотите перенаправление
Для обработки async форм вы можете создать маршрут API
- Next.js: Создайте файл в API/OPPIC.JS
- React.js: вам понадобится отдельный сервер Node.js прослушивание /api/submit

Загрузка изображений

Отбросьте блок, который содержит изображение или используйте блок изображения
Нажмите на изображение, чтобы открыть модал загрузки
Выберите изображение, которое вы хотите обновить, и нажмите на него, чтобы добавить его на страницу
Примечание. Изображения загружаются на public/uploaded с их оригинальными именами файлов

Создайте блог

Создайте страницы, связанные с блогом.
Повторно используйте компоненты заголовка и нижний колонтитул. Обратите внимание, что это требует настройки CSS Taillide.

Пример: https://github.com/liveduo/destack-landing

Многостраничная поддержка

Next.js

Создайте новый файл страницы в папке pages в проекте и импорт destack , как описано в #с существующим, на различных страницах.

React.js

Установите библиотеку маршрутизации, такую как react-router-dom или router-tutorial в проекте React.js и импорт destack как описано в #с новым реакциями, на различные маршруты. Для получения дополнительной информации ознакомьтесь с Destack-React-Starter.

Внесение вклад в проект

См. Appling.md

Как этот проект пришел к существованию

Этот проект развивался из-за необходимости быстрого прототипа, сохранять право собственности на сгенерированные страницы и совместимо с без сервера Jam-Stack Frameworks.