From 3f663c36c3dd136c80821e84c11c2663a672bcd6 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Mon, 31 Aug 2020 08:39:30 +1000
Subject: [PATCH] Provide badge for notion kind of page service

---
 www/pages/index.vue | 59 +++++++++++++++++++++++++++++++--------------
 1 file changed, 41 insertions(+), 18 deletions(-)

diff --git a/www/pages/index.vue b/www/pages/index.vue
index 027456f..80676c4 100644
--- a/www/pages/index.vue
+++ b/www/pages/index.vue
@@ -8,7 +8,7 @@
           </div>
         </b-col>
       </b-row>
-      <b-row>
+      <b-row class="row-space">
         <b-col lg="4" offset-lg="4" class="text-center generate-badge">
           <b-button
             pill
@@ -22,10 +22,8 @@
         </b-col>
       </b-row>
       <b-row v-if="shouldRenderBadgeTextarea()" class="row-space">
-        <b-col lg="2" offset-lg="1">
-          <p class="title">Color Schemes:</p>
-        </b-col>
-        <b-col lg="6" class="text-center">
+        <b-col lg="8" class="text-center" offset-lg="2">
+          <span class="title">Color Schemes:</span>
           <b-button-group>
             <b-button
               variant="light"
@@ -52,7 +50,7 @@
         class="row-space new-badge-info"
         v-if="shouldRenderBadgeTextarea()"
       >
-        <b-col lg="10" offset-lg="1">
+        <b-col lg>
           <p>
             Please copy the markdown script below to your Github readme.md or
             any other markdown file you want to monitor.
@@ -66,13 +64,26 @@
           ></b-form-textarea>
         </b-col>
       </b-row>
+      <b-row
+        class="row-space new-badge-info"
+        v-if="shouldRenderBadgeTextarea()"
+      >
+        <b-col lg>
+          <p>
+            Or simply insert the following embedded image in a <b>Notion</b> kind of page:
+          </p>
+          <code>{{ myEmbeddedImageScript(activeBadgeColor) }}</code>
+        </b-col>
+      </b-row>
       <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
-        <h2 class="display-4">Show your page views in seconds</h2>
+        <h2 class="display-4">Count your page views in seconds</h2>
         <div><img :src="defaultBadge" class="my-badge" /></div>
+        <p></p>
         <p class="lead">
           Badges generates a unique SVG image for a web page, requests gets
           calcaulted and reflected on the value of the Badge. <br />
-          Think about this is simplifed Goolge Analytics on a static page without JS script, isn't this handy?
+          Think about this is simplifed Goolge Analytics on a static page
+          without JS script, isn't this handy?
           <br />
           In the near future, we will allow you to display data from various
           data source like HTTP API and so on.
@@ -86,8 +97,8 @@
             alt="Generic placeholder image"
             height="140"
           />
-          <h2>Just a image</h2>
-          <p>
+          <h2>It's just a image</h2>
+          <p class="text-left">
             No need to make any API calls, no Google analytics required. As long
             as the web page allow you to display a svg image.
           </p>
@@ -100,7 +111,7 @@
             height="140"
           />
           <h2>No setup no cost</h2>
-          <p>
+          <p class="text-left">
             All you need to do is just copy the generated unique markdown script
             to your markdown, and wait for the first person to browse your page.
             <br />Most importantly, it's free.
@@ -114,7 +125,7 @@
             height="140"
           />
           <h2>Data comes realtime</h2>
-          <p>
+          <p class="text-left">
             The page view count data gets calculated in realtime. <br />And it
             will be refreshed on your web page automatically.
           </p>
@@ -124,15 +135,15 @@
         <h2 class="display-4">Examples</h2>
       </div>
       <b-row class="row-space text-center">
-        <b-col>
+        <b-col md>
           <b-link href="https://github.com/wahyd4">Github profile</b-link>
         </b-col>
-        <b-col>
+        <b-col md>
           <b-link href="https://github.com/wahyd4/aria2-ariang-docker"
             >Github repo</b-link
           >
         </b-col>
-        <b-col>
+        <b-col md>
           <b-link
             href="https://hub.docker.com/r/wahyd4/aria2-ui"
             target="_blank"
@@ -140,12 +151,20 @@
             Docker Hub repo</b-link
           >
         </b-col>
+        <b-col md>
+          <b-link
+            href="https://www.notion.so/Badges-toozhao-com-30f214cb68354746869c6eafc623bf72"
+            target="_blank"
+          >
+            Notion</b-link
+          >
+        </b-col>
       </b-row>
       <b-row>
         <b-col>
           <p class="warnning">
-            Note: The page view count data can take up to 3 minutes to be
-            initialised, then it will be refreshed every 30s.
+            Note: The page view count data may take up to 3 minutes to be
+            initialized.
           </p>
         </b-col>
       </b-row>
@@ -192,6 +211,9 @@ export default Vue.extend({
     myBadge: function(color: String): string {
       return `${this.$config.backendURL}/badges/${this.badge.id}/${color}.svg`;
     },
+    myEmbeddedImageScript(color: string): string {
+      return `<img src="${this.myBadge(color)}" />`;
+    },
     createNewBadge() {
       this.$store.commit("loading/updateLoading");
 
@@ -241,10 +263,11 @@ export default Vue.extend({
     font-size: 13px;
   }
 
-  p.title {
+  span.title {
     font-size: 14px;
     font-weight: 600;
     color: #333;
+    margin-right: 20px;
   }
   p.warnning {
     font-size: 13px;