From dcc69f1700fb11f7dee8a8ca24cd9b6e496a0b56 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 20 Feb 2024 20:57:17 +0100
Subject: [PATCH] wip #6693 @7

---
 .gitignore                                    |  2 +
 resources/grapes/app.sass                     | 12 ++++
 resources/grapes/blocks/intro/_intro.sass     |  2 +
 resources/grapes/blocks/intro/block.js        | 57 +++++++++++++++++++
 .../test.blade.php => intro/intro.blade.php}  |  0
 .../blocks/{test/test.css => intro/intro.js}  |  0
 resources/grapes/blocks/standard/block.js     | 11 ++++
 resources/grapes/blocks/test/block.js         | 13 -----
 resources/grapes/blocks/test/test.js          |  0
 9 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 resources/grapes/app.sass
 create mode 100644 resources/grapes/blocks/intro/_intro.sass
 create mode 100644 resources/grapes/blocks/intro/block.js
 rename resources/grapes/blocks/{test/test.blade.php => intro/intro.blade.php} (100%)
 rename resources/grapes/blocks/{test/test.css => intro/intro.js} (100%)
 create mode 100644 resources/grapes/blocks/standard/block.js
 delete mode 100644 resources/grapes/blocks/test/block.js
 delete mode 100644 resources/grapes/blocks/test/test.js

diff --git a/.gitignore b/.gitignore
index 7fe978f..9d54191 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ yarn-error.log
 /.fleet
 /.idea
 /.vscode
+/resources/grapes/app.css
+/resources/grapes/app.css.map
diff --git a/resources/grapes/app.sass b/resources/grapes/app.sass
new file mode 100644
index 0000000..889eae1
--- /dev/null
+++ b/resources/grapes/app.sass
@@ -0,0 +1,12 @@
+@import 'https://use.typekit.net/ekh4xhm.css'
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+
+body
+    font-family: Inter, sans-serif
+
+h1, h2, h3, h4, h5, h6
+    font-family: "fields", serif
+    font-weight: 600
+
+@import "blocks/intro/_intro"
+
diff --git a/resources/grapes/blocks/intro/_intro.sass b/resources/grapes/blocks/intro/_intro.sass
new file mode 100644
index 0000000..4be9298
--- /dev/null
+++ b/resources/grapes/blocks/intro/_intro.sass
@@ -0,0 +1,2 @@
+section[data-type="intro"]
+    background: #ff0000
diff --git a/resources/grapes/blocks/intro/block.js b/resources/grapes/blocks/intro/block.js
new file mode 100644
index 0000000..af72c09
--- /dev/null
+++ b/resources/grapes/blocks/intro/block.js
@@ -0,0 +1,57 @@
+blocks.push({
+    category: 'Fluidbook digital learning',
+    order: 0,
+    id: 'intro',
+    label: 'Intro',
+    media: `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-multiple-1" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" /><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" /><path d="M14 14v-8l-2 2" /></svg>`,
+    content: {type: 'intro'},
+});
+
+components.push(['intro', {
+    model: {
+        defaults: {
+            tagName: "section",
+            attributes: {'data-type': "intro"},
+            components:
+                '<h1 data-gjs-editable="true" data-gjs-name="Title" data-gjs-draggable="false" data-gjs-stylable="false" class="heading">Insert title here</h1>' +
+                '<p data-gjs-editable="true" data-gjs-name="Text" data-gjs-draggable="false" data-gjs-stylable="false" class="paragraph">Lorem ipsum</p>' +
+                '<img data-gjs-editable="true" data-gjs-name="Image" data-gjs-stylable="false" data-gjs-draggable="false" src="">',
+            stylable: ['background-color'],
+        }
+    },
+
+}]);
+
+// components.push(['intro-h1', {
+//     model: {
+//         defaults: {
+//             name: 'Heading 1',
+//             editable:true,
+//             draggable: false,
+//             droppable: false,
+//         }
+//     }
+// }]);
+//
+// components.push(['intro-paragraph', {
+//     model: {
+//         defaults: {
+//             name: 'Text',
+//             editable:true,
+//             draggable: false,
+//             droppable: false,
+//         }
+//     }
+// }]);
+//
+// components.push(['intro-image', {
+//     type:'image',
+//     model: {
+//         defaults: {
+//             name: 'Image',
+//             editable:true,
+//             draggable: false,
+//             droppable: false,
+//         }
+//     }
+// }]);
diff --git a/resources/grapes/blocks/test/test.blade.php b/resources/grapes/blocks/intro/intro.blade.php
similarity index 100%
rename from resources/grapes/blocks/test/test.blade.php
rename to resources/grapes/blocks/intro/intro.blade.php
diff --git a/resources/grapes/blocks/test/test.css b/resources/grapes/blocks/intro/intro.js
similarity index 100%
rename from resources/grapes/blocks/test/test.css
rename to resources/grapes/blocks/intro/intro.js
diff --git a/resources/grapes/blocks/standard/block.js b/resources/grapes/blocks/standard/block.js
new file mode 100644
index 0000000..173cc1f
--- /dev/null
+++ b/resources/grapes/blocks/standard/block.js
@@ -0,0 +1,11 @@
+blocks.push({
+    category: 'Fluidbook digital learning',
+    order: 2,
+    id: 'standard',
+    label: 'Bloc standard',
+    media: `<i class="ti ti-layout-rows"></i>`, // Use `image` component
+    content: {type: 'image'}, // The component `image` is activatable (shows the Asset Manager).
+    // We want to activate it once dropped in the canvas.
+    activate: true, // select: true, // Default with `activate: true`
+});
+
diff --git a/resources/grapes/blocks/test/block.js b/resources/grapes/blocks/test/block.js
deleted file mode 100644
index 1699467..0000000
--- a/resources/grapes/blocks/test/block.js
+++ /dev/null
@@ -1,13 +0,0 @@
-blocks.push({
-    id: 'image',
-    label: 'Image',
-    media: `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
-    <path d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" />
-    </svg>`,
-    // Use `image` component
-    content: { type: 'image' },
-    // The component `image` is activatable (shows the Asset Manager).
-    // We want to activate it once dropped in the canvas.
-    activate: true,
-    // select: true, // Default with `activate: true`
-});
diff --git a/resources/grapes/blocks/test/test.js b/resources/grapes/blocks/test/test.js
deleted file mode 100644
index e69de29..0000000
-- 
2.39.5