Skip to content

Commit

Permalink
Merge pull request #104 from haydn/config-cleanup
Browse files Browse the repository at this point in the history 
Config cleanup
  • Loading branch information
@haydn
haydn authored Apr 24, 2020
2 parents 02aa2c5 + 1894df0 commit 1f355aa
Show file tree
Hide file tree
Showing 6 changed files with 302 additions and 156 deletions.
244 changes: 182 additions & 62 deletions public/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,104 @@
Sketchbook.config = {
initCanvas: doc => {
const style = doc.createElement("style");
style.innerHTML = `
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 16px;
line-height: 1.25;
}
`;
doc.head.appendChild(style);
},
components: [
{ type: "Rectangle" },
{
type: "Heading 1",
render: ({ element, width, height, options: { text } }) => {
element.style = "height: 100%; display: flex; align-items: center;";
element.innerHTML = `<h1 style="margin: 0;">${text}</h1>`;
},
options: [
{
key: "text",
label: "Text",
input: {
type: "String"
}
}
],
init: () => ({
options: {
text: "Lorem ipsum"
}
}),
validate: ({ text }) =>
text.trim().length === 0
? [{ key: "text", message: "Text must be provided" }]
: null,
render: ({ element, width, height, options: { text } }) => {
element.style = "height: 100%; display: flex; align-items: center;";
element.innerHTML = `
<h1 style="margin: 0;">${text}</h1>
`;
}
},
{
type: "Heading 2",
options: [
{
key: "text",
input: "short-string",
label: "Text"
label: "Text",
input: {
type: "String"
}
}
],
validate: options => {
return options.text.trim().length === 0
init: () => ({
options: {
text: "Lorem ipsum"
}
}),
validate: ({ text }) =>
text.trim().length === 0
? [{ key: "text", message: "Text must be provided" }]
: null;
: null,
render: ({ element, width, height, options: { text } }) => {
element.style = "height: 100%; display: flex; align-items: center;";
element.innerHTML = `
<h2 style="margin: 0;">${text}</h2>
`;
}
},
{
type: "Heading 2",
render: ({ element, width, height, options: { text } }) => {
element.style = "height: 100%; display: flex; align-items: center;";
element.innerHTML = `<h2 style="margin: 0;">${text}</h2>`;
},
type: "Horizontal Rule",
init: () => ({
options: {
text: "Lorem ipsum"
}
height: 10
}),
render: ({ element, height }) => {
element.innerHTML = `
<svg width="100%" height="${height ?? 2}" style="display: block;">
<line
x1="0"
x2="100%"
y1="50%"
y2="50%"
stroke="#eee"
stroke-width="2"
/>
</svg>
`;
}
},
{
type: "Paragraph",
options: [
{
key: "text",
input: "short-string",
label: "Text"
label: "Text",
input: {
type: "PlainText"
}
}
],
validate: options => {
return options.text.trim().length === 0
? [{ key: "text", message: "Text must be provided" }]
: null;
}
},
{
type: "Paragraph",
render: ({ element, width, height, options: { text } }) => {
element.innerHTML = `<p style="margin: 0;">${text}</p>`;
},
init: () => ({
width: 400,
options: {
Expand All @@ -69,63 +114,138 @@ Sketchbook.config = {
`.trim()
}
}),
options: [
{
key: "text",
input: "long-string",
label: "Text"
}
],
validate: options => {
return options.text.trim().length === 0
validate: ({ text }) =>
text.trim().length === 0
? [{ key: "text", message: "Text must be provided" }]
: null;
: null,
render: ({ element, width, height, options: { text } }) => {
element.innerHTML = `
<p style="margin: 0;">${text}</p>
`;
}
},
{
type: "Image",
render: ({ element, width, height }) => {
const w = width === undefined || width === null ? 400 : width;
const h = height === undefined || height === null ? 300 : height;
const w = width ?? 400;
const h = height ?? 300;
element.innerHTML = `
<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" fill="#eee" stroke="#ccc" stroke-width="8"/>
<path d="M 0 0 L ${w} ${h} M 0 ${h} L ${w} 0" stroke="#ccc" stroke-width="4"/>
<svg width="${w}" height="${h}" style="display: block;">
<rect
width="${w}"
height="${h}"
fill="#eee"
stroke="#ccc"
stroke-width="8"
/>
<path
d="M 0 0 L ${w} ${h} M 0 ${h} L ${w} 0"
stroke="#ccc"
stroke-width="4"
/>
</svg>
`.trim();
`;
}
},
{
type: "Button",
render: ({ element, width, height, options: { label } }) => {
element.style = "height: 100%;";
element.innerHTML = `<button style="width: 100%; height: 100%;">${label}</button>`;
},
options: [
{
key: "label",
label: "Label",
input: {
type: "String"
}
}
],
init: () => ({
options: {
label: "Button"
}
}),
options: [{ key: "label", label: "Label", input: "short-string" }],
validate: options => {
return options.label.trim().length === 0
validate: ({ label }) =>
label.trim().length === 0
? [{ key: "label", message: "Label must be provided" }]
: null;
: null,
render: ({ element, width, height, options: { label } }) => {
element.style = "height: 100%;";
element.innerHTML = `
<button
style="
background: #eee;
border-radius: 4px;
border: 2px solid #ccc;
font-size: 16px;
height: 100%;
padding: 8px 8px;
width: 100%;
"
>
${label}
</button>
`;
}
},
{
type: "Input",
render: ({ element, width, height, options: { value } }) => {
element.style = "height: 100%;";
element.innerHTML = `<input style="box-sizing: border-box; width: 100%; height: 100%;" value="${value}"/>`;
},
type: "Text Input",
options: [
{
key: "value",
label: "Value",
input: {
type: "String"
}
}
],
init: () => ({
width: 400,
options: {
value: ""
}
}),
options: [{ key: "value", label: "Value", input: "short-string" }]
render: ({ element, width, height, options: { value } }) => {
element.style = "height: 100%;";
element.innerHTML = `
<input
style="
border-radius: 4px;
border: 2px solid #eee;
font-size: 16px;
height: 100%;
padding: 8px 8px;
width: 100%;
"
value="${value}"
/>
`;
}
},
{
type: "Label",
options: [
{
key: "text",
label: "Text",
input: {
type: "String"
}
}
],
init: () => ({
options: {
text: "Lorem ipsum"
}
}),
validate: ({ text }) =>
text.trim().length === 0
? [{ key: "text", message: "Text must be provided" }]
: null,
render: ({ element, width, height, options: { text } }) => {
element.style = "height: 100%; display: flex; align-items: center;";
element.innerHTML = `
<label style="font-weight: bold; margin: 0;">${text}</label>
`;
}
}
]
].sort((a, b) => a.type.localeCompare(b.type))
};
2 changes: 1 addition & 1 deletion scripts/start.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const subprocesses = [
[path.resolve(__dirname, "../cli/index.js"), "start"],
{
env: {
SKETCHBOOK_CONFIG: "build/config.js",
SKETCHBOOK_CONFIG: "public/config.js",
...process.env
}
}
Expand Down
Loading

1 comment on commit 1f355aa

@vercel
Copy link

@vercel vercel bot commented on 1f355aa Apr 24, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.