liveduo / destack Goto Github PK

I followed the exact instructions for contributing, but when I drag and drop component the style of it doesn't work properly.

Since the project uses grapes js, is it possible to build React components to add the editor within the project?

Hello,

I would like to know if would it be possible to make a default colour for all the action buttons of grapeJS as well as the components we import.

Good day!
Doesn't start on localhost.

Your environment

• "destack": "0.9.1"
• "next": "^10.2.3"
• node v14.16.0
• OS Windows 10

Steps to reproduce

1. "git clone https://github.com/LiveDuo/destack.git" and cd in "destack"
2. "npm install"
3. "cd lib/destack && npm install"
4. "cd dev/nextjs-project && npm install"
5. "cd ../../"
6. "npm start"

Result

`./pages/index.js:2:2
Module not found: Can't resolve '../../../node_modules/grapesjs/dist/css/grapes.min.css'
1 | if (process.env.NODE_ENV !== 'production') {

2 | require('../../../node_modules/grapesjs/dist/css/grapes.min.css')
| ^
3 | }
4 |
5 | export { getStaticProps } from 'destack/build/server'`

hey,

when i create a page with these destack components, in nextjs then i refresh this page, the components disappear: there is a blank page. However, if i set up the index page with the components, in nextjs, then i will refresh the index page, it will contain all the previous components placed, in the index page.

Let's imagine, i create a page named "souffixe.js" in nextjs. Then i run it in the browser like 'http://localhost:3001/souffixe'. Then i place the destack component like blog, in this page, then i refresh this page, all the components disappear. And i see "souffixe.json", in the files explorer, in the "data" folder.

How could you fix it? Or help me, fix it, please?

Since this project is used as sort of a static site generator, a blog component and editor would be a great feature in the long term. Still thinking how to implement this though.

One idea off the top of my head is creating a WYSIWYG md editor, and storing the posts in a directory(let's say ./blog) in markdown format and use nextjs's dynamic routing to show the proper blog post.

I have an abandoned social media project that has an md editor, so we might be able to reuse some of the code.

Hi, this is really a great project. I've played with it today but can't find a way to edit some of the blocks inside. Such as

and table cell. I tried double click but it didn't change to edit mode like . Also I can't find where to set the text in the right panel.
Could anyone give some help? Thanks a lot!

I really love this project. If I have all the necessary skills, I want to contribute.
It's pretty simple for low-code dev like me who doesn't even understand how to modify html/css/js.

Not just a cute project, it has high potential to become open-source carrd, with adding more templates+marketplace, etc.

Is there a potential community in this project?

I've found that after deploying from local, the build page isn't loaded into the editor again. The editor is empty, and anything added will overwrite the previously rendered page, though if redeployed without adding anything to the editor there are no changes to the rendered page.

The code on the page is as described for a next.js project in the README.md:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

And pages/api/builder/handle.js has the code outlined in the README.md:

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

Is this an intended function, or have I configured it wrong?

I am not able to write default.json files in production, deployed using vercal. Because of this, I am not able to edit landing pages I've created using this editor.

The following build error occurs when I click the deploy to Vercel button. Please let me know how I can resolve this. Thanks!

When using grapesjs editor, everytime I drag & drop component, it will turn into images and got error like this

NextJS is under the MIT license, same for TailwindCSS, Grapesjs is under the BSD 3-Clause License but I don't seem to find the license for this particular project, haven't you decided yet ?

Firstly thanks for your efforts in putting this together. Making Tailblocks sites is a breeze.
Just curious what's the correct way to swap the header component svg.
In https://destack-page.vercel.app/, swapping the svg's ViewBox and Path (plain dimensions, no tags) doesn't seem to work across all the vectors I tried, leaving nothing but a solid background.

Hi, thanks for this amazing project. I need to use this project along with GrapesJs export plugin. how can I do that?

First of all, this is an awesome project
I had a hard time manually entering the component html
after see this project i can save a lot time

is there any setting adding another component ui outside ? like i have TailwindUI or TUK
and how to add this to destack library locally ??

Many thanks for hard work

Hey, thanks for your effort to putting this together.
I just tried get static build with the Next js example.
In the index.html it only has some js & css files and the props (NEXT_DATA). It doesn't look like SEO friendly.

Is there any work around to get static build?
Screenshot from the sample project page source

I followeed the exact instructions for contributing, but when I run "npm run dev", I get the following:
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
[0] client/craft/index.tsx (16:4)
[0] 14: const ContentProviderBase: React.FC = ({ data, standaloneServer }) => {
[0] 15: return (
[0] 16:
[0] ^
[0] 17:

Let me know if you guys are able to have +1 collaborator on this project!

My email: [email protected]
My whatsapp: +55 11 91579-9139

:)

Hi, I follow the example of using a custom component. But I also want to use tailwind css in this component. Since destack already imported tailwind css, how can I use it?

import { ContentProvider } from 'destack'
import 'grapesjs/dist/css/grapes.min.css'
import Head from 'next/head'
import Header from "../components/Header"
import Hero from "../components/Hero"
import Footer from "../components/Footer"


export { getStaticProps } from 'destack/build/server'

export default function Home(props) { 
  return (
    <div style={{height: '100%'}}>
      <Head>
        <title>RE Predicts - Renewable Power Predict API Toolkit</title>
        <meta name="description" content="Wind Farm, PV Plant Power Forecast" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Hero />
      <div>API Test Component</div>
      <ContentProvider {...props}/>
      <Footer />
    </div>)
}

export default function Header() {
  return (
    <header className="text-gray-600 body-font">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-10 h-10 text-white p-2 bg-blue-500 rounded-full" viewBox="0 0 24 24">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
          </svg>
          <span className="ml-3 text-xl">Tailblocks</span>
        </a>
        <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
          <a className="mr-5 hover:text-gray-900">First Link</a>
          <a className="mr-5 hover:text-gray-900">Second Link</a>
          <a className="mr-5 hover:text-gray-900">Third Link</a>
          <a className="mr-5 hover:text-gray-900">Fourth Link</a>
        </nav>
        <button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Button
          <svg fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className="w-4 h-4 ml-1" viewBox="0 0 24 24">
            <path d="M5 12h14M12 5l7 7-7 7"></path>
          </svg>
        </button>
      </div>
    </header>
  );
}

Unhandled Runtime Error
TypeError: Path must be a string. Received undefined

Call Stack
assertPath
node_modules\next\dist\compiled\path-browserify\index.js (1:95)
Object.parse
node_modules\next\dist\compiled\path-browserify\index.js (1:4265)
eval
node_modules\destack\build\server\index.js (1886:0)
(app-client)/./node_modules/destack/build/server/index.js
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/app/page.js (105:1)
options.factory
/_next/static/chunks/webpack.js (704:31)
webpack_require
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (359:21)
eval
webpack-internal:///(app-client)/./src/app/page.js (7:78)
(app-client)/./src/app/page.js
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/app/page.js (159:1)
options.factory
/_next/static/chunks/webpack.js (704:31)
webpack_require
file:///C:/Users/ravic/Desktop/Flugid/nextbuilder/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (359:21)
Next.js
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (144:0)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1205:0)
resolveModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1163:0)
eval
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js (1590:0)

It seems destack does not work, or the example needs updating, for how to use with the new app router, now the recommended default when starting a new next app.

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

   ,-[/home/tony/hof/mods/tmp/myapp/app/example/page.tsx:1:1]
 1 | 'use client';
 2 | 
 3 | import 'destack/build/browser/index.css'
 4 | export { getStaticProps } from 'destack/build/server'
   :          ^^^^^^^^^^^^^^
 5 | export { ContentProvider as default } from 'destack'
   `----

File path:
  ./app/example/page.tsx

Can I use this for a dynamic website? if I have to pull data from API how can I integrate it wth destack?

I'm thinking what are your thoughts on using this project as a page editor not just for the code owner, but also to admins in the platform. Do you think this is something that can be archived?

More information on why I asked the question... I'm thinking that since the app needs to be built again to save the changes I'm not sure if this is something that can be done or that can be implemented, like have a way for an admin to log in to the frontend and just by login in, having the ability to modify the site, save it and log out and have it ready in production with the updated changes.

Note: I really like this project and the things you've created with it! I'll review it in more depth to see how I can possibly contribute to it 😸

The name says it all, are there any thoughts to port the project to Vue (or Astro, etc.)?

Also, are there any strong points for keeping Next (and SSR) for this type of project?

I've followed the video and installed this package and build a nice little website but when i build and start the app the website is just white

I see the json file under data and my html is in there but its not loading any idea what i did wrong?

steps:
first i typed in term: npm i destack

second: made a new path: pages/api/builder and added a file called handle.js and added export { handleData as default, config } from 'destack/build/server'

third i added import 'grapesjs/dist/css/grapes.min.css' export { getStaticProps } from 'destack/build/server' export { ContentProvider as default } from 'destack' to my index.js

then i just designed my website ran npm run build then ran npm run start

Currently, Tailwindcss is loaded from a cdn.
This is not very ideal (slower TTFB, external dependencies, slower performance)

Building Tailwindcss locally with a custom config will give greater customizability to the user.

This issue exists to track the feature.

I'm not seeing the input fields, forms etc in the UI - looks like it's in your source code...

How to use grapejs plugins in destack? Looking for adding "custom code" grapejs plugin

I've been playing around with destack and was hoping it would be possible to add support for multiple pages. Currently it appears that all instances of the editor relate back to the same content limiting the use cases to a single landing page per nextjs project.

Great work so far and thanks in advance :)

Ps Happy to help out with any testing once this has been implemented 👍

Hey there,

Amazing project, thanks for all the great work!

Just wanted to ask how to submit the form? I am running the destack starter repo locally.

I have

• added a component with a form
• made a file pages/api/submit.js
• selected the form and changed the component settings to:
  • Method: POST
  • Action: /api/submit
  • Async: ON (checked)
• selected the Button and set it to SUBMIT.

Hi guys,

I want to show you my features for grapesjs:
https://gjs.market/authors/devfuture-development

Hello,
Upon request I am opening a new issue to explain that on a fresh clone there are some discrepancies with how the UI looks. I explained it to @LiveDuo here: #75

Where could the issue be?

Followed install instructions except used 'npx create-next-app@latest'.
Dragging a component from the picker to a page places an image of the component instead of the component.
Please advise. Thx.

Craft.js is another page-builder framework like Grapes.js (which destack currently uses)

However, Grapes.js isn't the best fit for this project.

1. TypeScript support

Fully typing Destack isn't possible yet because Grapes.js doesn't have any (working) TypeScript support yet. There has been a community effort before, but it seems to be abandoned for now.

Craft.js has TypeScript definitions embedded in it.

2. Grapes.js wasn't made to be used with react, unlike Craft.js.

Craft.js was made to be used with react, which means maintaining the project will be easier for the future.

3. Craft.js already has a system to store the component state.

The basic example includes a feature to copy the (compressed) state to clipboard. This will make it easier to do what destack does now ( parsing the default.json, etc ).

Here's a quick guide: link

This issue exists for discussion on the topic, and for tracking the feature.

Hi! I'm trying to add a color picker to destack. I made a couple of changes to text.tsx on a fork, I essentially added colors to props, and then I thought of creating an analogous to ButtionDialog.tsx, TextColorPickerDialog.tsx . Do you think this is the right approach? The reason I ask is because I know destack is pulling colors from the themes directly, e.g. bg-indigo-600.

Hello,
I tried the project on Firefox (Ubuntu 21.04) and it seems like some CSS doesn't load when importing a module.
The dev console doesn't show any issue or error message except the favicon that 404.

Nextjs version: 13.4.19
destack version: 2.1.2
issue:
when I build the project and start it, the page can't show the page that i create in the dev environment.

Apologies in advance for complete beginner React related questions:

You guys just so happen to have done exactly what I was hoping to do: build a grapes.js instance that uses tailwind blocks. Problem is I'm looking to integrate this into a Django backend, and thus don't really want to use Next, I'd rather create the API endpoints that grapes needs in python, and save the grapes state to the existing database.

Would it be possible to separate the grapes.js build in this project from Next entirely and just build the grapes.js bundle alone?

Title.

For now, Javascript might be feasible, but as the project grows, Typescript will certainly help reduce bugs. I am willing to type the whole project (for fun) If you mind..

Btw, I was the one on reddit that commented this

Hey,

All the times, I do npm run dev, all I get is a blank builder page, after having build a page with the components. While, I see in the default.json the generated code and these updates.

Is there anything, i forget in the setup, like a env file or anything?

Hi, this is a really cool project. I was wondering if there are plans to allow custom components to be added into the builder?

Hello, since we are trying to become a better shuffle.dev, I was thinking of a couple ideas. One of them (among importing markup from cdn servers to enable truly custom code to enter) was to have a live HTML Editor for the markup. A smal JS editor on the side could also be a possibility

Bug appears after commit 37c0403

Steps to reproduce:

• Add block

  

• Edit text

  

• Switch to Preview mode - change does not appear

  

Hello,

Is it possible to use the (craft) Editor and the full-preview of the components as a standalone components where i can pass the JSON?

Thank you!

Hi,
I have created a new page (blog.js) and setup destack. But i don't see any sections which has been added in the page after I reload the page.
And my source code still have "data/blog.json" file. But I don't know why it's not showing up on the "blog" page.

So I think the cause of this error in the loadTemplate function. Please check!

P/S: Run the project in development npm run dev

Environment

• "destack": "1.0.3"
• "next": "13.0.2"
• "grapesjs": "0.20.1"
• "react": "18.2.0"
• node v16.13.2
• OS Windows 11

Hello! @dannyyys and I am facing some issues here and would like to get some thoughts on this.

Subject of the issue

1. Destack web-ui does not show up when deployed via vercel. It shows on localhost.
2. Destack web-ui does not have 'view code' button on localhost.

Your environment

• "destack": "^0.8.1"
• "next": "latest",
• node v12.20.1

click here for full repo

• pages/destack.js
• pages/api/builder/handle.js

Steps to reproduce

• initialize as per installing the plugin
• deploy to vercel
• visit /destack and see the blank page

Expected behaviour

1. wild-bakes.com/destack should look like localhost:3000/destack
2. /destack page should have 'view code' button

Actual behaviour

1. wild-bakes.com/destack shows empty while localhost:3000/destack shows proper components
2. /destack page does not have 'view code' button

I was testing how to use the builder on the page other than index.js
So I created a page, let's say test.js, pasted this code onto it:

import 'grapesjs/dist/css/grapes.min.css'
export { getStaticProps } from 'destack/build/server'
export { ContentProvider as default } from 'destack'

Then I run npm run dev and open http://localhost:3000/test. The builder works, but doesn't save anything. So on refreshing or builing I get a blank page.

Hi Team,

This plugin is not working for the latest next.js

Hi everyone
I have an error, and I don't know what should I do or where should I search for that.
can anybody help me.
`Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'querySelector')

Call Stack
r.getBody
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:584083)
eval
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:284460)
Array.forEach

r.toggleSelectComponent
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283903)
r.stopSelectComponent
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283695)
r.stop
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:292852)
runDefault
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:623075)
eval
node_modules\destack\build\browser\grapes.min-02b325bd.js (4:626321)`