static rendering prototype

eduardoluizgs · May 19, 2017 · c3d763b · c3d763b
1 parent 1eb1336
commit c3d763b
Show file tree

Hide file tree

Showing 13 changed files with 3,960 additions and 113 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+  extends: 'airbnb-base',
+  plugins: ['react'],
+
+  env: { browser: true },
+  globals: { ga: true },
+
+  rules: { 'react/jsx-uses-vars': 'error' },
+
+  parserOptions: {
+    ecmaFeatures: { jsx: true },
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -0,0 +1,5 @@
+rules:
+  class-name-format:
+    - 0
+  force-pseudo-nesting:
+    -0
diff --git a/fonts/NotoColorEmoji.ttf b/fonts/NotoColorEmoji.ttf
diff --git a/fonts/NotoEmoji-Regular.ttf b/fonts/NotoEmoji-Regular.ttf
diff --git a/index.html b/index.html
@@ -2,23 +2,67 @@
 <html>
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- <link rel="stylesheet" href="./style.css"> -->
     <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 
     <title>Knowledge Map Renderer</title>
   </head>
-  <body style="background-color: #212121">
+  <body>
     <style>
+      @font-face {
+        font-family: NotoEmoji;
+        src: url('./fonts/NotoEmoji-Regular.ttf');
+      }
+
+      @font-face {
+        font-family: NotoColorEmoji;
+        src: url('./fonts/NotoColorEmoji.ttf');
+      }
+
       body {
-        background-color: #212121;
+        background-color: #424242;
         margin: 0;
         overflow: hidden;
       }
+
+      svg {
+        width: 100%;
+        height: auto;
+        max-height: 100vh;
+      }
+
+      .node foreignObject {
+        text-align: center;
+      }
+
+      .node foreignObject > p {
+        background: #f5f5f5;
+        display: inline-block;
+        padding: 15px;
+        margin: 0 auto;
+        border-radius: 10px;
+
+        font-family: 'Raleway', 'NotoColorEmoji', sans-serif !important;
+        font-size: 22px;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+      }
+
+      .connection {
+        stroke: #9e9e9e;
+        fill: transparent;
+        stroke-width: 3px;
+        stroke-dasharray: 10px 4px;
+      }
     </style>
-    <svg></svg>
 
-    <script src="https://d3js.org/d3.v4.min.js"></script>
-    <script src="./script.js"></script>
+    <!-- -917, -528, 821, 795-->
+    <svg viewBox="-967 -578 1937 1476">
+      <g id="connections"></g>
+      <g id="nodes"></g>
+    </svg>
+
+    <script src="./render.js"></script>
   </body>
-</html>
+</html>
diff --git a/books.json → maps/books.json b/books.json → maps/books.json