fix simple layout

next.config.js

@@ -1,5 +1 @@
-module.exports = {
-  webpack: (config, { isServer }) => {
-    return config;
-  },
-};
+module.exports = {};

package.json

@@ -30,6 +30,7 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.4",
     "@types/styled-components": "^5.1.9",
+    "@types/twemoji": "^12.1.1",
     "autoprefixer": "^10.2.5",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^1.12.0",

src/layouts/simpleLayout.tsx

@@ -1,32 +1,15 @@
 import { ILayout } from "../types";
-import { emojify, gString } from "./utils";
+import { Emoji, emojify, gString, Markdown } from "./utils";
 
 export const simpleLayout: ILayout = {
   name: "Simple",
-  properties: [{ name: "Test", type: "text", default: "**Hello** _World_" }],
+  properties: [{ name: "Text", type: "text", default: "**Hello** _World_" }],
   getCSS: () => `
-    .top {
-      width: 100%;
-      display: flex;
-      height: 100vh;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .emoji {
-      font-size: 100px; 
-      margin: 0 80px;
-    }
-
-    .header { 
-      font-size: 100px; 
+    body {
+      font-size: 200px;
     }
   `,
   Component: ({ config }) => (
-    <div className="top">
-      <div className="emoji">${emojify("✨")}</div>
-      <div className="header">${gString(config, "Test")}</div>
-      <div className="emoji">${emojify("✨")}</div>
-    </div>
+    <Markdown className="header">{gString(config, "Text")}</Markdown>
   ),
 };

src/layouts/utils.tsx

@@ -0,0 +1,40 @@
+import twemoji from "twemoji";
+import marked from "marked";
+import { ILayoutConfig } from "../types";
+import React from "react";
+
+export const emojify = (text: string): string =>
+  twemoji.parse(text, {
+    ext: ".svg",
+  });
+
+export const mdToHTML = (text: string): string => marked(text);
+
+export const gString = (
+  layoutConfig: ILayoutConfig,
+  name: string,
+  defaultValue?: string,
+): string => {
+  const value = layoutConfig[name] ?? defaultValue;
+  return Array.isArray(value) ? value.join(", ") : value;
+};
+
+export const Emoji: React.FC<{ children: string; className?: string }> = ({
+  children,
+  ...props
+}) => (
+  <div
+    className={`emoji ${props.className}`}
+    dangerouslySetInnerHTML={{ __html: emojify(children) }}
+  />
+);
+
+export const Markdown: React.FC<{ children: string; className?: string }> = ({
+  children,
+  ...props
+}) => (
+  <div
+    className={`markdown ${props.className}`}
+    dangerouslySetInnerHTML={{ __html: mdToHTML(children) }}
+  />
+);

yarn.lock

@@ -321,6 +321,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/twemoji@^12.1.1":
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/@types/twemoji/-/twemoji-12.1.1.tgz#34c5dcecff438b5be173889a6ee8ad51ba90445f"
+  integrity sha512-dW1B1WHTfrWmEzXb/tp8xsZqQHAyMB9JwLwbBqkIQVzmNUI02R7lJqxUpKFM114ygNZHKA1r74oPugCAiYHt1A==
+
 "@types/yauzl@^2.9.1":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"