diff --git a/.gitmodules b/.gitmodules index 493ca2b..74fd200 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,7 +1,7 @@ -[submodule "grapesjs"] - path = grapesjs - url = lol [submodule "demo"] path = demo url = https://github.com/GrapesJS/grapesjs branch = gh-pages +[submodule "grapesjs"] + path = grapesjs + url = https://github.com/GrapesJS/grapesjs diff --git a/css/main.css b/css/main.css deleted file mode 100644 index f2e9f4a..0000000 --- a/css/main.css +++ /dev/null @@ -1,9 +0,0 @@ -.red { - color: #f24b4b; -} -.gjs-block { - width: auto; - height: auto; - min-height: auto; -} - diff --git a/grapesjs b/grapesjs new file mode 160000 index 0000000..8893dbe --- /dev/null +++ b/grapesjs @@ -0,0 +1 @@ +Subproject commit 8893dbe2e79972e5c34806e71075d2e94a4a9e3e diff --git a/index.html b/index.html index 99deb9f..b95e110 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,1447 @@ - - + + - - - - + + GrapesJS Demo - Free Open Source Website Page Builder + + + + + + + + + + + + + + + + + + + + + + + + + + -
- +
+
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+ +
+ +
+
Build your templates without coding
+
All text blocks could be edited easily with double clicking on it. You can create new text blocks with the command from the left panel
+
Hover me
+
+
+ +
+
+
Flex is the new black
+
With flexbox system you're able to build complex layouts easily and with free responsivity
+
+
+
+
+
Title one
+
Subtitle one
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+
Title two
+
Subtitle two
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+
Title three
+
Subtitle three
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+
Title four
+
Subtitle four
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+
Title five
+
Subtitle five
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+
Title six
+
Subtitle six
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+
+
+
+
+
+ +
+
+
+ +
+
ASSET MANAGER
+
Manage your images with Asset Manager
+
You can create image blocks with the command from the left panel and edit them with double click
+
Image uploading is not allowed in this demo
+
+
+
+
+ +
+
+
Blocks
+
Each element in HTML page could be seen as a block. On the left panel you could find different kind of blocks that you can create, move and style
+ +
+
+
+
Starter
+
Some random list
+
+ Starter feature 1
+
+ Starter feature 2
+
+ Starter feature 3
+
+ Starter feature 4
+
$ 9,90/mo
+
+
+
+
+
Regular
+
Some random list
+
+ Regular feature 1
+
+ Regular feature 2
+
+ Regular feature 3
+
+ Regular feature 4
+
$ 19,90/mo
+
+
+
+
+
Enterprise
+
Some random list
+
+ Enterprise feature 1
+
+ Enterprise feature 2
+
+ Enterprise feature 3
+
+ Enterprise feature 4
+
$ 29,90/mo
+
+
+
+ +
+
+ +
+
+

The team

+
+
+
+ +
+
Adam Smith
+
CEO
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit
+
+
+ f + t + ln +
+
+
+
+ +
+
John Black
+
Software Engineer
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit
+
+
+ f + t + ln +
+
+
+
+ +
+
Jessica White
+
Web Designer
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit
+
+
+ f + t + ln +
+
+
+
+
+ + + + +
+ + + + diff --git a/js/main.js b/js/main.js deleted file mode 100644 index 4e62302..0000000 --- a/js/main.js +++ /dev/null @@ -1,63 +0,0 @@ -import fr from "../grapesjs/src/i18n/locale/fr.js"; -//const projectID = window.location.hash.substr(1); -const projectID = 1; - -if (projectID == '' || isNaN(projectID)) { - alert("L’ID de projet est invalide. Cette application ne va pas fonctionner."); - } else { - const projectEndpoint = `/projects/${projectID}`; - var editor = grapesjs.init({ - container : '#gjs', - //plugins: ['grapesjs-preset-webpage', 'customBlocks', 'customTypes'], - //components: '
Le chargement du projet est en cours. Si ce message ne disparait pas, le chargement a sans doutes échoué…
', - i18n: { - locale: 'fr', // default locale - detectLocale: false, // by default, the editor will detect the language - //localeFallback: 'en', // default fallback - messages: {fr}, - }, - storageManager: { - type: 'remote', - stepsBeforeSave: 1, - autosave: true, - options: { - remote: { - urlLoad: projectEndpoint, - urlStore: projectEndpoint, - fetchOptions: opts => (opts.method === 'POST' ? { method: 'PATCH' } : {}), - onStore: data => ({ id: projectID, data }), - onLoad: result => result.data, - } - } - }, - //blockManager: { - // appendTo: '#blocks', - // blocks: [ - // { - // id: 'section', // id is mandatory - // label: 'Section', // You can use HTML/SVG inside labels - // attributes: { class:'gjs-block-section' }, - // content: `
- //

Ho ! Mais c’est un titre !

- //
Il faut regarder avec le cœur. L’essentiel est invisible pour les yeux. C’est du petit prince ;)
- //
`, - // }, { - // id: 'text', - // label: 'Text', - // content: '
Voici un bloc de texte tout seul :o
', - // }, { - // 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, - // } - // ] - //}, - }); - }