Fix missing pagination on TTT

build/page-writer.js

@@ -90,7 +90,7 @@ function pageJSON (post) {
     titlecard: post.titlecard,
     tags: post.meta.tags,
     author: post.meta.author,
-    siblings: post.sibling,
+    siblings: post.siblings,
   };
 }
 

js/$tweets.jsx

@@ -6,6 +6,10 @@ import map from 'lodash/map';
 import { format } from 'date-fns';
 import Sync from 'svg/sync-alt.svg';
 import Link from 'svg/link.svg';
+import AngleLeft from 'svg/angle-left.svg';
+import AngleRight from 'svg/angle-right.svg';
+import AngleDoubleLeft from 'svg/angle-double-left.svg';
+import AngleDoubleRight from 'svg/angle-double-right.svg';
 
 // const If = ({t,children}) => (!!t && <Fragment>{children}</Fragment>)
 
@@ -24,21 +28,42 @@ const Post = ({ post }) => (
   </article>
 );
 
+const Pagination = ({ post }) => (
+  <div class="pager">
+    <div class="prev" >{post.siblings && post.siblings.prev  && <a href={'/tweets/#id=' + post.siblings.prev.replace('/tweets/', '')} class="btn btn-primary left"><span class="svg-icon"><AngleLeft /></span> Back</a>}</div>
+    <div class="first">{post.siblings && post.siblings.first && <a href={'/tweets/#id=' + post.siblings.first.replace('/tweets/', '')} class="btn btn-primary left"><span class="svg-icon"><AngleDoubleLeft /></span> Newest</a>}</div>
+    <div class="last" >{post.siblings && post.siblings.last  && <a href={'/tweets/#id=' + post.siblings.last.replace('/tweets/', '')} class="btn btn-primary right">Oldest <span class="svg-icon"><AngleDoubleRight /></span></a>}</div>
+    <div class="next" >{post.siblings && post.siblings.next  && <a href={'/tweets/#id=' + post.siblings.next.replace('/tweets/', '')} class="btn btn-primary right">Next <span class="svg-icon"><AngleRight /></span></a>}</div>
+  </div>
+);
+
 class App extends Component {
 
   constructor (props) {
     super(props);
 
-    const index = this.props.index;
     const hash = window.location.hash.slice(1);
-    this.state = {
+    const index = this.props.index;
-      hash,
+    if (index) {
-      loading: false,
+      this.state = {
-      posts: Object.fromEntries(index.posts.map((post) => [ post.id, post ])),
+        hash,
-      tags: index.tags,
+        loading: false,
-      authors: index.authors,
+        posts: Object.fromEntries(index.posts.map((post) => [ post.id, post ])),
-      latest: index.latest,
+        tags: index.tags,
-    };
+        authors: index.authors,
+        latest: index.latest,
+      };
+    } else {
+      this.state = {
+        hash,
+        loading: true,
+        posts: {},
+        tags: {},
+        authors: [],
+        latest: null,
+      };
+      this.loadContent().catch(console.error); // eslint-disable-line no-console
+    }
 
     this.loading = new Map();
 
@@ -47,6 +72,17 @@ class App extends Component {
     this.ensurePost = this.ensurePost.bind(this);
   }
 
+  async loadContent () {
+    const index = await fetch('/tweets/index.json').then((res) => res.json());
+    this.setState({
+      loading: false,
+      posts: Object.fromEntries(index.posts.map((post) => [ post.id, post ])),
+      tags: index.tags,
+      authors: index.authors,
+      latest: index.latest,
+    });
+  }
+
   componentDidMount () {
     window.addEventListener('hashchange', this.onChange);
   }
@@ -94,7 +130,14 @@ class App extends Component {
 
   render () {
     const [ target, value ] = this.parseHash();
-    const posts = this.hashedPosts(target, value);
+    let posts = [ this.state.latest ];
+    let paginate = true;
+    if (target === 'id' && this.state.posts[value]) {
+      posts = [ this.state.posts[value] ];
+    } else if (target) {
+      posts = this.hashedPosts(target, value);
+      paginate = false;
+    }
 
     if (this.state.loading) {
       return <div class="loading"><Sync /></div>;
@@ -112,6 +155,7 @@ class App extends Component {
         {map(posts, (post, i) =>
           <Post post={post} key={i} />,
         )}
+        {paginate && <Pagination post={posts[0]} />}
       </Fragment>
     );
   }
@@ -119,13 +163,14 @@ class App extends Component {
 
 
 async function run () {
-  const index = await fetch('/tweets/index.json').then((res) => res.json());
-
-
   const target = document.querySelector('.post-index section');
-  while (target.firstChild) {
+
-    target.removeChild(target.firstChild);
+  let index = null;
+  if (window.location.hash.length <= 1) {
+    index = await fetch('/tweets/index.json').then((res) => res.json());
   }
+
+  while (target.firstChild) target.removeChild(target.firstChild);
   render(<App index={index} />, target);
 }
 

public/tweets/index.html

@@ -35,8 +35,8 @@ description: "A collection of the best twitter threads on transgender and gender
   {{#content "body"}}
 
     <div class="post-index">
-      <section>
       {{#with posts.latest}}
+      <section>
         <article>
           <div class="post-head">
             <div class="post-tags">
@@ -46,13 +46,13 @@ description: "A collection of the best twitter threads on transgender and gender
             <a href="{{this.url}}" class="post-link" title="{{date this.date 'MMMM do, yyyy'}}">{{icon 'link'}} Permalink</a>
           </div>
           <div class="post-content">{{{this.content}}}</div>
-          <div class="pager">
-            <div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}} Back</a>{{/if}}</div>
-            <div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}} Newest</a>{{/if}}</div>
-            <div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right">Oldest {{icon 'angle-double-right'}}</a>{{/if}}</div>
-            <div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right">Next {{icon 'angle-right'}}</a>{{/if}}</div>
-          </div>
         </article>
+        <div class="pager">
+          <div class="prev">{{#if siblings.prev}}<a href="{{siblings.prev}}" class="btn btn-primary left">{{icon 'angle-left'}} Back</a>{{/if}}</div>
+          <div class="first">{{#if siblings.first}}<a href="{{siblings.first}}" class="btn btn-primary left">{{icon 'angle-double-left'}} Newest</a>{{/if}}</div>
+          <div class="last">{{#if siblings.last}}<a href="{{siblings.last}}" class="btn btn-primary right">Oldest {{icon 'angle-double-right'}}</a>{{/if}}</div>
+          <div class="next">{{#if siblings.next}}<a href="{{siblings.next}}" class="btn btn-primary right">Next {{icon 'angle-right'}}</a>{{/if}}</div>
+        </div>
       {{/with}}
       </section>