From f4a616e2de1cc95dc1c6d44f7d17d98f19f2ecc7 Mon Sep 17 00:00:00 2001
From: Misha Vyrtsev <reeywhaar@gmail.com>
Date: Sat, 26 Jan 2019 01:43:57 +0300
Subject: [PATCH] add widgets to demo page (#263)

* add widgets to demo page

* fix border color in dark mode

* demo page adjusting

* fix indentation
---
 web/index.ejs | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/web/index.ejs b/web/index.ejs
index 7afb2026..8aeff6de 100644
--- a/web/index.ejs
+++ b/web/index.ejs
@@ -24,6 +24,15 @@
     .document_theme_dark a {
       color: #5e5eff;
     }
+
+    .widget {
+      margin-top: 1rem;
+    }
+
+    .widget__comments-frame {
+      border: 1px dashed #aaa;
+      min-width: 35rem;
+    }
   </style>
 
   <script>
@@ -46,11 +55,18 @@
   <div class="container">
     <h1>Demo page</h1>
     <p>To install widgets on your website, follow the <a href="https://github.com/umputun/remark#setup-on-your-website">instructions</a>.</p>
-    <p>See also</p>
-    <ul>
-      <li><a href="/web/last-comments.html">Last comments widget</a></li>
-      <li><a href="/web/counter.html">Counter widget</a></li>
-    </ul>
+    <div class="widgets">
+      <div class="widget widgets__widget ">
+        <a class="widget__link" href="/web/last-comments.html">Last comments widget page</a><br/>
+        <iframe class="widget__frame widget__comments-frame" src="/web/last-comments.html" frameborder="0"></iframe>
+      </div>
+      <div class="widget widgets__widget">
+        <a class="widget__link" href="/web/counter.html">Counter widget page</a><br/>
+        <div class="widget__frame widget__counter-frame">
+          Comments count: <span class="remark42__counter"></span>
+        </div>
+      </div>
+    </div>
     <p><Button onclick="toggleTheme()">Toggle theme</Button></p>
     <div id="remark42"></div>
   </div>
@@ -67,6 +83,13 @@
       s.type = 'text/javascript';
       (d.head || d.body).appendChild(s);
     })();
+
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = '/web/counter.js';
+      s.type = 'text/javascript';
+      (d.head || d.body).appendChild(s);
+    })();
   </script>
   <noscript>
     Please enable JavaScript to view the comments powered by Remark.