diff --git a/src/backend/demo/data/template/code.txt b/src/backend/demo/data/template/code.txt
new file mode 100644
index 00000000..3fca627f
--- /dev/null
+++ b/src/backend/demo/data/template/code.txt
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+ Direction
Interministérielle
du numérique
+
+
+
+
+
+
La directrice
+
Réf: 12000001
+
+
+
+
Note
à Monsieur Le Premier Ministre
+
Objet: Generated PDF
+
{{ body }}
+
+
+ Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat
+
+
diff --git a/src/backend/demo/data/template/code_editor.json b/src/backend/demo/data/template/code_editor.json
new file mode 100644
index 00000000..b6fc8f2e
--- /dev/null
+++ b/src/backend/demo/data/template/code_editor.json
@@ -0,0 +1,442 @@
+{
+ "pages": [
+ {
+ "id": "VlXkJzAStsYTLhwJ",
+ "type": "main",
+ "frames": [
+ {
+ "id": "FZ0aEvTxwtxsFeIQ",
+ "component": {
+ "type": "wrapper",
+ "stylable": [
+ "background",
+ "background-color",
+ "background-image",
+ "background-repeat",
+ "background-attachment",
+ "background-position",
+ "background-size"
+ ],
+ "attributes": { "id": "iubr" },
+ "components": [
+ {
+ "name": "Row",
+ "classes": [{ "name": "gjs-row", "private": 1 }],
+ "droppable": ".gjs-cell",
+ "resizable": {
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 0,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "minDim": 1
+ },
+ "attributes": { "id": "ix1a" },
+ "components": [
+ {
+ "name": "Cell",
+ "classes": [{ "name": "gjs-cell", "private": 1 }],
+ "draggable": ".gjs-row",
+ "resizable": {
+ "bc": 0,
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 1,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "step": 0.2,
+ "minDim": 1,
+ "currentUnit": 1
+ },
+ "attributes": { "id": "iqey" },
+ "components": [
+ {
+ "name": "Row",
+ "classes": [{ "name": "gjs-row", "private": 1 }],
+ "droppable": ".gjs-cell",
+ "resizable": {
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 0,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "minDim": 1
+ },
+ "attributes": { "id": "ip2l" },
+ "components": [
+ {
+ "name": "Cell",
+ "classes": [{ "name": "gjs-cell", "private": 1 }],
+ "draggable": ".gjs-row",
+ "resizable": {
+ "bc": 0,
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 1,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "step": 0.2,
+ "minDim": 1,
+ "currentUnit": 1
+ },
+ "attributes": { "id": "i9ps" },
+ "components": [
+ {
+ "type": "image",
+ "resizable": { "ratioDefault": 1 },
+ "attributes": {
+ "id": "ioje",
+ "src": "https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg"
+ }
+ }
+ ]
+ },
+ {
+ "name": "Cell",
+ "classes": [{ "name": "gjs-cell", "private": 1 }],
+ "draggable": ".gjs-row",
+ "resizable": {
+ "bc": 0,
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 1,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "step": 0.2,
+ "minDim": 1,
+ "currentUnit": 1
+ },
+ "attributes": { "id": "ifn8" },
+ "components": [
+ {
+ "type": "text",
+ "attributes": { "id": "i1v9" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "Direction\n"
+ },
+ { "void": true, "tagName": "br" },
+ {
+ "type": "textnode",
+ "content": "Interministérielle\n"
+ },
+ { "void": true, "tagName": "br" },
+ {
+ "type": "textnode",
+ "content": "du numérique"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "custom-name": "header"
+ },
+ {
+ "name": "Row",
+ "classes": [{ "name": "gjs-row", "private": 1 }],
+ "droppable": ".gjs-cell",
+ "resizable": {
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 0,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "minDim": 1
+ },
+ "attributes": { "id": "ipfx3" },
+ "components": [
+ {
+ "name": "Cell",
+ "classes": [{ "name": "gjs-cell", "private": 1 }],
+ "draggable": ".gjs-row",
+ "resizable": {
+ "bc": 0,
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 1,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "step": 0.2,
+ "minDim": 1,
+ "currentUnit": 1
+ },
+ "attributes": { "id": "isc8e" },
+ "components": [
+ {
+ "type": "text",
+ "attributes": { "id": "ix7wo" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "La directrice"
+ }
+ ]
+ },
+ {
+ "type": "text",
+ "attributes": { "id": "ij1wk" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "Réf: 12000001"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "Cell",
+ "classes": [{ "name": "gjs-cell", "private": 1 }],
+ "draggable": ".gjs-row",
+ "resizable": {
+ "bc": 0,
+ "bl": 0,
+ "br": 0,
+ "cl": 0,
+ "cr": 1,
+ "tc": 0,
+ "tl": 0,
+ "tr": 0,
+ "step": 0.2,
+ "minDim": 1,
+ "currentUnit": 1
+ },
+ "attributes": { "id": "iei3g" },
+ "components": [
+ {
+ "type": "text",
+ "attributes": { "id": "iwp89" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "Paris, le 28/09/2023"
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "custom-name": "sub-header"
+ },
+ {
+ "type": "text",
+ "attributes": { "id": "i59gh" },
+ "components": [
+ {
+ "type": "text",
+ "tagName": "b",
+ "components": [
+ { "type": "textnode", "content": "Note" }
+ ]
+ },
+ { "void": true, "tagName": "br" },
+ {
+ "type": "textnode",
+ "content": "à Monsieur Le Premier Ministre"
+ }
+ ],
+ "custom-name": "note"
+ },
+ {
+ "type": "text",
+ "attributes": { "id": "i2egv" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "Objet: Generated PDF"
+ }
+ ],
+ "custom-name": "object"
+ },
+ {
+ "type": "text",
+ "attributes": { "id": "icpsv" },
+ "components": [
+ { "type": "textnode", "content": "{{body}}" },
+ { "void": true, "tagName": "br" }
+ ],
+ "custom-name": "body"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "text",
+ "attributes": { "id": "iqn81" },
+ "components": [
+ {
+ "type": "textnode",
+ "content": "Footer: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+ }
+ ]
+ }
+ ],
+ "custom-name": "Body"
+ }
+ }
+ ]
+ }
+ ],
+ "assets": [
+ {
+ "src": "https://upload.wikimedia.org/wikipedia/fr/7/72/Logo_du_Gouvernement_de_la_R%C3%A9publique_fran%C3%A7aise_%282020%29.svg",
+ "type": "image",
+ "width": 0,
+ "height": 0,
+ "unitDim": "px"
+ }
+ ],
+ "styles": [
+ {
+ "style": {
+ "width": "100%",
+ "display": "table",
+ "padding-top": "10px",
+ "padding-left": "10px",
+ "padding-right": "10px",
+ "padding-bottom": "10px"
+ },
+ "selectors": [{ "name": "gjs-row", "private": 1 }]
+ },
+ {
+ "style": { "width": "100%", "display": "block" },
+ "mediaText": "(max-width: 768px)",
+ "selectors": [{ "name": "gjs-cell", "private": 1 }],
+ "atRuleType": "media"
+ },
+ {
+ "style": { "width": "100%", "display": "block" },
+ "mediaText": "(max-width: 768px)",
+ "selectors": ["gjs-cell30"],
+ "atRuleType": "media"
+ },
+ {
+ "style": { "width": "100%", "display": "block" },
+ "mediaText": "(max-width: 768px)",
+ "selectors": ["gjs-cell70"],
+ "atRuleType": "media"
+ },
+ {
+ "style": { "width": "8%", "height": "75px", "display": "table-cell" },
+ "selectors": [{ "name": "gjs-cell", "private": 1 }]
+ },
+ {
+ "style": { "height": "100%", "padding": "0px 0px 0px 0px" },
+ "selectors": ["#ix1a"]
+ },
+ {
+ "style": {
+ "color": "black",
+ "width": "214px",
+ "height": "128px",
+ "margin": "0px 0px 0px -12px"
+ },
+ "selectors": ["#ioje"]
+ },
+ {
+ "style": {
+ "top": "-5px",
+ "float": "right",
+ "margin": "-13px 0px 0px 0px",
+ "display": "block",
+ "padding": "0px 10px 0px 0px",
+ "position": "relative",
+ "font-size": "19px",
+ "text-align": "right",
+ "font-family": "Arial Black, Gadget, sans-serif",
+ "font-weight": "800",
+ "line-height": "26px",
+ "letter-spacing": "0px"
+ },
+ "selectors": ["#i1v9"]
+ },
+ { "style": { "margin": "60px 0px 0px 0px" }, "selectors": ["#ipfx3"] },
+ {
+ "style": {
+ "padding": "10px 10px 3px 0px",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#ix7wo"]
+ },
+ {
+ "style": {
+ "padding": "0px 10px 10px 0px",
+ "font-size": "12px",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#ij1wk"]
+ },
+ {
+ "style": {
+ "padding": "10px 0px 3px 10px",
+ "font-size": "14px",
+ "text-align": "right",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#iwp89"]
+ },
+ {
+ "style": {
+ "padding": "10px",
+ "font-size": "15px",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#i59gh"]
+ },
+ {
+ "style": {
+ "padding": "29px 10px 10px 10px",
+ "font-size": "20px",
+ "font-family": "Georgia, serif",
+ "font-weight": "900"
+ },
+ "selectors": ["#i2egv"]
+ },
+ {
+ "style": {
+ "padding": "30px 10px 10px 10px",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#icpsv"]
+ },
+ { "style": { "padding": "0px 0px 0px 0px" }, "selectors": ["#ifn8"] },
+ { "style": { "padding": "0px 0px 0px 0px" }, "selectors": ["#ip2l"] },
+ {
+ "style": {
+ "bottom": "0px",
+ "padding": "10px 10px 0px 10px",
+ "position": "fixed",
+ "font-size": "12px",
+ "font-family": "Georgia, serif"
+ },
+ "selectors": ["#iqn81"]
+ },
+ {
+ "style": {
+ "color": "#000000",
+ "border": "0px solid #f6f6f6",
+ "font-size": "15px",
+ "font-family": "\"Mercury SSm A\", \"Mercury SSm B\", Georgia, Times, \"Times New Roman\", \"Microsoft YaHei New\", \"Microsoft Yahei\", 微软雅黑, 宋体, SimSun, STXihei, 华文细黑, serif",
+ "background-color": "#fbfbfb"
+ },
+ "selectors": ["#ilke6"]
+ }
+ ]
+}
diff --git a/src/backend/demo/data/template/css.txt b/src/backend/demo/data/template/css.txt
new file mode 100644
index 00000000..41f2897e
--- /dev/null
+++ b/src/backend/demo/data/template/css.txt
@@ -0,0 +1,95 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+}
+.gjs-row {
+ width: 100%;
+ display: table;
+ padding-top: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-bottom: 10px;
+}
+.gjs-cell {
+ width: 8%;
+ height: 75px;
+ display: table-cell;
+}
+#ix1a {
+ height: 100%;
+ padding: 0px 0px 0px 0px;
+}
+#ioje {
+ color: black;
+ width: 214px;
+ height: 128px;
+ margin: 0px 0px 0px -12px;
+}
+#i1v9 {
+ top: -5px;
+ float: right;
+ margin: -13px 0px 0px 0px;
+ display: block;
+ padding: 0px 10px 0px 0px;
+ position: relative;
+ font-size: 19px;
+ text-align: right;
+ font-family: Arial Black, Gadget, sans-serif;
+ font-weight: 800;
+ line-height: 26px;
+ letter-spacing: 0px;
+}
+#ipfx3 {
+ margin: 60px 0px 0px 0px;
+}
+#ix7wo {
+ padding: 10px 10px 3px 0px;
+ font-family: Georgia, serif;
+}
+#ij1wk {
+ padding: 0px 10px 10px 0px;
+ font-size: 12px;
+ font-family: Georgia, serif;
+}
+#iwp89 {
+ padding: 10px 0px 3px 10px;
+ font-size: 14px;
+ text-align: right;
+ font-family: Georgia, serif;
+}
+#i59gh {
+ padding: 10px;
+ font-size: 15px;
+ font-family: Georgia, serif;
+}
+#i2egv {
+ padding: 29px 10px 10px 10px;
+ font-size: 20px;
+ font-family: Georgia, serif;
+ font-weight: 900;
+}
+#icpsv {
+ padding: 30px 10px 10px 10px;
+ font-family: Georgia, serif;
+}
+#ifn8 {
+ padding: 0px 0px 0px 0px;
+}
+#ip2l {
+ padding: 0px 0px 0px 0px;
+}
+#iqn81 {
+ bottom: 0px;
+ padding: 10px 10px 0px 10px;
+ position: fixed;
+ font-size: 12px;
+ font-family: Georgia, serif;
+}
+@media (max-width: 768px) {
+ .gjs-cell {
+ width: 100%;
+ display: block;
+ }
+}
diff --git a/src/backend/demo/management/commands/create_demo.py b/src/backend/demo/management/commands/create_demo.py
index 0c572ff8..e78b4dcc 100644
--- a/src/backend/demo/management/commands/create_demo.py
+++ b/src/backend/demo/management/commands/create_demo.py
@@ -1,6 +1,7 @@
# ruff: noqa: S311, S106
"""create_demo management command"""
+import json
import logging
import random
import time
@@ -109,105 +110,22 @@ def create_demo(stdout):
queue = BulkQueue(stdout)
with Timeit(stdout, "Creating Template"):
+ with open("demo/data/template/code_editor.json", "r") as file:
+ json_data = json.load(file)
+
+ with open("demo/data/template/code.txt", "r") as text_file:
+ code_data = text_file.read()
+
+ with open("demo/data/template/css.txt", "r") as text_file:
+ css_data = text_file.read()
+
queue.push(
models.Template(
- id="472d0633-20b8-4cb1-998a-1134ade092ba",
title="Demo Template",
description="This is the demo template",
- code="""
-
-
-
-
-
La directrice
-
Réf: 1200001
-
-
Paris, le 28/09/2023
-
-
Note
- à Monsieur le Premier Ministre
-
-
-
-
Objet: Generated PDF
-
{{ body }}
-