stupid twitter button working

;

@@ -0,0 +1,39 @@
+<social>
+  <raw content={this.tweetHtml}>
+  </raw>
+<script>
+
+import './raw.tag';
+import { default as _ } from 'lodash';
+import { default as jquery } from 'jquery';
+var self = this;
+
+self.tweetHtml = "";
+
+self._id = "";
+
+updateButton(_id) {
+  if (_id == undefined) {
+    _id = self.opts.postid;
+  }
+  if (_id != self._id) {
+
+    self.tweetHtml = `<a class="twitter-share-button" data-show-count="false" href="https://primop.me/${_id}" ref="tweet">Tweet</a>`;
+    self._id = _id;
+    self.update();
+  }
+}
+
+window.twttr.ready((twttr) => {
+  console.log("initial load");
+  self.updateButton(self.opts.postid);
+});
+
+self.on("updated", () => {
+  if (window.twttr.widgets !== undefined) {
+    window.twttr.widgets.load();
+  }
+});
+
+</script>
+</social>

package.json

@@ -35,11 +35,13 @@
     "font-awesome": "^4.7.0",
     "immutable": "^3.8.1",
     "jquery": "^3.2.1",
+    "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "querystring": "^0.2.0",
     "rollup-plugin-json": "^2.1.1",
     "showdown": "^1.6.4",
     "spectre.css": "^0.2.14",
+    "twitter-widgets": "^1.0.0",
     "whatwg-fetch": "^2.0.2"
   }
 }

src/scripts/app.tag

@@ -76,10 +76,18 @@ this.menuActive = false;
 
 this.route.base('#!')
 
+function PostUpdated() {
+  riot.observable(this);
+  this.on("postupdated", () => { console.log("caught event"); });
+}
+
+var postObserver = new PostUpdated();
+
 this.state = {
   "_id" : false,
   "projects" : Z.empty,
-  "loaded" : false
+  "loaded" : false,
+  "postupdate" : postObserver
 };
 
 this.active = lens.actives({
@@ -90,7 +98,6 @@ this.active = lens.actives({
 });
 
 var self = this;
-
 toggleMenu(ev) {
   ev.preventDefault();
   self.update({"menuActive" : !self.menuActive});
@@ -120,7 +127,9 @@ var links = activate("links");
 
 function posts(_id) {
   console.log(self.state);
+  if (self.state._id != _id) {
     self.state._id = _id;
+  }
   activate("posts")();
   self.update();
 }

src/scripts/post.tag

@@ -15,6 +15,8 @@
       <div
         class={this.loading ? "invisible" : ""}
       >
+        <social ref="social" postid={this.opts.state._id}>
+        </social>
         <h4 class="post-title">{ this.title }</h4>
         <p class="post-content centered text-break">
           <raw content="{ this.converter.makeHtml(this.content) }"></raw>
@@ -36,6 +38,7 @@
 <script>
 
 import './raw.tag';
+import './social.tag';
 import 'whatwg-fetch';
 import { default as R } from 'ramda';
 import { default as showdown } from 'showdown';
@@ -72,7 +75,6 @@ prev(ev) {
     return;
   }
   self.prevloading = " loader-branded";
-  self.update({"swipe" : !self.swipe});
   self.prevPost(self._id, "fadeIn");
 }
 
@@ -86,7 +88,6 @@ next(ev) {
   if (!self.end) {
     self.update();
   }
-  self.update({"swipe" : !self.swipe});
   self.nextPost(self._id, "fadeIn");
 }
 
@@ -119,11 +120,10 @@ updatePost(postcontent) {
   self.swipe = !self.swipe;
   self.loading = false;
   self.one("updated", self.toTop);
-  self.update();
-
   self.prevloading = "";
   self.nextloading = "";
   self.route(`/posts/${self._id}`);
+
   self.one("updated", self.toTop);
   self.update();
 }

src/scripts/social.tag

@@ -0,0 +1,40 @@
+<social>
+  <raw ref="button" content={this.tweetHtml}>
+  </raw>
+<script>
+
+import './raw.tag';
+import { default as _ } from 'lodash';
+import { default as jquery } from 'jquery';
+var self = this;
+
+self.tweetHtml = "";
+
+self._id = "";
+
+updateButton(_id) {
+  if (_id == undefined) {
+    _id = self.opts.postid;
+  }
+  if (_id != self._id) {
+
+    self.tweetHtml = `<a style="display:none;" class="twitter-share-button" data-show-count="false" href="https://primop.me/${_id}" ref="tweet">Tweet ${_id}</a>`;
+    self._id = _id;
+    self.update();
+  }
+}
+
+window.twttr.ready((twttr) => {
+  console.log("initial load");
+  self.updateButton(self.opts.postid);
+});
+
+self.on("updated", () => {
+  if (window.twttr.widgets !== undefined) {
+
+    window.twttr.widgets.load();
+  }
+});
+
+</script>
+</social>

src/templates/index.html

@@ -15,6 +15,24 @@
     <footer class="footer">
     </footer>
 
+  <script>
+  window.twttr = (function(d, s, id) {
+    var js, fjs = d.getElementsByTagName(s)[0],
+      t = window.twttr || {};
+    if (d.getElementById(id)) return t;
+    js = d.createElement(s);
+    js.id = id;
+    js.src = "https://platform.twitter.com/widgets.js";
+    fjs.parentNode.insertBefore(js, fjs);
+
+    t._e = [];
+    t.ready = function(f) {
+      t._e.push(f);
+    };
+
+    return t;
+  }(document, "script", "twitter-wjs"));
+  </script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="/scripts/riotblog.min.js"></script>
   </body>

yarn.lock

@@ -746,6 +746,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash@^4.17.4:
+  version "4.17.4"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+
 lru-cache@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
@@ -1451,6 +1455,10 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
 
+twitter-widgets@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/twitter-widgets/-/twitter-widgets-1.0.0.tgz#67245998b399a9c72d82561d87ccdcd2ca7cbda1"
+
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"