temp

backend-docker/Dockerfile

@@ -1,18 +1,16 @@
 FROM node:20-alpine
 
 # Workdir
-RUN mkdir /usr/local/app
+RUN mkdir /usr/lib/json-server
-RUN chown 33:33 /usr/local/app
+#RUN chown 33:33 /usr/lib/json-server
-WORKDIR /usr/local/app
+WORKDIR /usr/lib/json-server
-
-ADD entrypoint.sh /usr/local/bin
 
 # Install modules
 RUN npm install -g json-server
 
-USER 33
+ADD entrypoint.sh /usr/local/bin
+
+#USER 33
 
-# Cant kill with ctrl+c
-#ENTRYPOINT ["/usr/local/bin/json-server", "db.json"]
 ENTRYPOINT ["entrypoint.sh"]
-CMD ["json-server", "-H", "0.0.0.0", "db.json"]
+CMD ["json-server", "-H", "0.0.0.0", "/usr/lib/json-server/db.json"]

backend-docker/entrypoint.sh

@@ -1,3 +1,9 @@
 #!/bin/sh
+if [ ! -f db.json ] ; then
+	touch db.json
+fi
+if [ ! -s db.json ] ; then
+	echo '{"projects": [ {"id": 1, "data": {"assets": [], "styles": [], "pages": []} } ]}' > db.json
+fi
 
 "$@"

css/main.css

@@ -1,3 +1,9 @@
 .red {
 	color: #f24b4b;
 }
+.gjs-block {
+  width: auto;
+  height: auto;
+  min-height: auto;
+}
+

grapesjs

@@ -1 +1 @@
-Subproject commit f8b66a1d7e28b6c156cb7d6c61d2951872e9675f
+Subproject commit 8893dbe2e79972e5c34806e71075d2e94a4a9e3e

js/main.js

@@ -7,27 +7,57 @@ if (projectID == '' || isNaN(projectID)) {
       } else {
               const projectEndpoint = `/projects/${projectID}`;
               var editor = grapesjs.init({
-                      container : '#gjs',
+                    container : '#gjs',
-                      components: '<div class="red">Le chargement du projet est en cours. Si ce message ne disparait pas, le chargement a sans doutes échoué…</div>',
+				    //plugins: ['grapesjs-preset-webpage', 'customBlocks', 'customTypes'],
+                    //components: '<div class="red">Le chargement du projet est en cours. Si ce message ne disparait pas, le chargement a sans doutes échoué…</div>',
   					i18n: {
   					  locale: 'fr', // default locale
   					  detectLocale: false, // by default, the editor will detect the language
   					  //localeFallback: 'en', // default fallback
   					  messages: {fr},
   					},
-                      storageManager: {
+                    storageManager: {
-                              type: 'remote',
+                      type: 'remote',
-                              stepsBeforeSave: 1,
+                      stepsBeforeSave: 1,
-                              autosave: true,
+                      autosave: true,
-                              options: {
+                      options: {
-                                      remote: {
+                              remote: {
-                                              urlLoad: projectEndpoint,
+                                      urlLoad: projectEndpoint,
-                                              urlStore: projectEndpoint,
+                                      urlStore: projectEndpoint,
-                                              fetchOptions: opts => (opts.method === 'POST' ?  { method: 'PATCH' } : {}),
+                                      fetchOptions: opts => (opts.method === 'POST' ?  { method: 'PATCH' } : {}),
-                                              onStore: data => ({ id: projectID, data }),
+                                      onStore: data => ({ id: projectID, data }),
-                                              onLoad: result => result.data,
+                                      onLoad: result => result.data,
-                                            }
                                     }
                             }
-                    });
+                    },
+				    //blockManager: {
+					//    appendTo: '#blocks',
+					//    blocks: [
+					//      {
+					//        id: 'section', // id is mandatory
+					//        label: '<b>Section</b>', // You can use HTML/SVG inside labels
+					//        attributes: { class:'gjs-block-section' },
+					//        content: `<section>
+					//          <h1>Ho ! Mais c’est un titre !</h1>
+					//          <div>Il faut regarder avec le cœur. L’essentiel est invisible pour les yeux. C’est du petit prince ;)</div>
+					//        </section>`,
+					//      }, {
+					//        id: 'text',
+					//        label: 'Text',
+					//        content: '<div data-gjs-type="text">Voici un bloc de texte tout seul :o</div>',
+					//      }, {
+					//        id: 'image',
+					//        label: 'Image',
+					//        // Select the component once it's dropped
+					//        select: true,
+					//        // You can pass components as a JSON instead of a simple HTML string,
+					//        // in this case we also use a defined component type `image`
+					//        content: { type: 'image' },
+					//        // This triggers `active` event on dropped components and the `image`
+					//        // reacts by opening the AssetManager
+					//        activate: true,
+					//      }
+					//    ]
+					//},
+                });
             }