[docs] Host examples on gh-pages #132

closes #132
openwisp · Jun 17, 2022 · d10ff63 · d10ff63
1 parent 4c92812
commit d10ff63
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,4 +19,3 @@ yarn.lock
 
 # Folder
 coverage
-dist
diff --git a/dist/netjsongraph.min.js b/dist/netjsongraph.min.js
diff --git a/examples/index.html b/examples/index.html
diff --git a/index.html b/index.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>netjsongraph.js: basic examples</title>
+    <meta charset="utf-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        background-color: #eceaea;
+        overflow-x: hidden;
+        font-family: "Roboto", sans-serif;
+      }
+
+      header {
+        text-align: center;
+        color: #333;
+        font-size: 21px;
+      }
+
+      main {
+        display: flex;
+        justify-content: space-between;
+        width: 80vw;
+        flex-wrap: wrap;
+        margin: 50px auto;
+      }
+
+      main a {
+        text-decoration: none;
+        color: black;
+        font-size: 17px;
+        transition: all 0.2s ease;
+        text-align: center;
+        font-weight: 300;
+      }
+
+      .cards {
+        background-color: #fff;
+        padding: 12px;
+        margin: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 200px;
+        transition: all 0.2s ease;
+      }
+
+      .cards:hover {
+        transform: scale(1.2);
+        border: 1px solid red;
+      }
+      .cards:hover a {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>NetJSONGraph.js Example Demos</h1>
+    </header>
+    <main>
+      <div class="cards">
+        <a href="./examples/netjsongraph.html" target="_blank">Basic usage</a>
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap.html" target="_blank">Geographic map</a>
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-multipleInterfaces.html" target="_blank"
+          >Multiple interfaces</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-searchElements.html" target="_blank"
+          >Search elements</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-dateParse.html" target="_blank"
+          >Date parse</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-switchRenderMode.html" target="_blank"
+          >Switch render mode</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-switchGraphMode.html" target="_blank"
+          >Switch graph mode</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjson-updateData.html" target="_blank"
+          >Update data realtime</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
+          >Nodes expand or fold</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-indoormap.html" target="_blank"
+          >Indoor map</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-indoormap2.html" target="_blank"
+          >Indoor map 2</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-plugins.html" target="_blank"
+          >Leaflet plugins</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsongraph-graphGL.html" target="_blank"
+          >GraphGL render for big data</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
+          >Set colorful elements</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsongraph-multipleLinks.html" target="_blank"
+          >Multiple links render</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-nodeTiles.html" target="_blank"
+          >JSONDataUpdate using override option</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-appendData.html" target="_blank"
+          >JSONDataUpdate using append option</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-multipleTiles.html" target="_blank"
+          >Multiple tiles render</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-animation.html" target="_blank"
+          >Geographic map animated links</a
+        >
+      </div>
+      <div class="cards">
+        <a href="./examples/netjsonmap-appendData2.html" target="_blank"
+          >Append data using arrays</a
+        >
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = (env, argv) => ({
     historyApiFallback: true,
     inline: true,
     open: true,
-    openPage: "./examples/index.html",
+    openPage: "./index.html",
   },
 
   performance: {