start on timeline implementation

routes/_components/NotLoggedInHome.html

@@ -0,0 +1,33 @@
+<div class="banner">
+  <svg alt="Pinafore logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z"/></svg>
+  <h1>Pinafore</h1>
+</div>
+<p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
+
+<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
+
+<p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+<style>
+  .banner {
+    display: flex;
+    align-items: center;
+  }
+  svg {
+    width: 70px;
+    height: 70px;
+    fill: royalblue;
+    display: inline-block;
+  }
+  h1 {
+    color: royalblue;
+    display: inline-block;
+    font-size: 3em;
+    margin: auto 15px;
+  }
+
+  @media (max-width: 767px) {
+    h1 {
+      font-size: 2.7em;
+    }
+  }
+</style>

routes/_components/Timeline.html

@@ -0,0 +1,29 @@
+<ul>
+  {{#each statuses as status}}
+  <div>{{JSON.stringify(status, null, '  ')}}</div>
+  {{/each}}
+</ul>
+<script>
+  import { store } from '../_utils/store'
+  import { getHomeTimeline } from '../_utils/mastodon'
+
+  export default {
+    oncreate: function () {
+      if (process.browser) {
+        (async () => {
+          let instanceData = this.store.get('currentOauthInstance')
+          if (!instanceData) {
+            return
+          }
+          let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
+          this.set({'statuses': response})
+        })()
+      }
+    },
+    data: () => ({
+      target: 'home',
+      statuses: []
+    }),
+    store: () => store
+  }
+</script>

routes/_utils/store.js

@@ -24,8 +24,14 @@ const store = new LocalStorageStore({
   instanceNameInSearch: ''
 })
 
-if (process.browser) {
+store.compute(
-  window.store = store
+  'isUserLoggedIn',
+  ['currentOauthInstance'],
+  currentOauthInstance => !!currentOauthInstance && currentOauthInstance.access_token
+)
+
+if (process.browser && process.env.NODE_ENV !== 'production') {
+  window.store = store // for debugging
 }
 
 export { store }

routes/index.html

@@ -1,66 +1,30 @@
 <:Head>
-	<title>Home</title>
+	<title>Pinafore</title>
 </:Head>
 
 <Layout page='home'>
-  <div class="banner">
+  {{#if $isUserLoggedIn}}
-    <svg alt="Pinafore logo" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M92.12 59.93H59.87V8.23C70.4 14.9 87.34 30 92.12 59.93zM31 26.9A122.4 122.4 0 0 1 9.39 60.35H31zM37.76 99h24.48a30.67 30.67 0 0 0 30.67-30.67H50.52V6.27a5.27 5.27 0 0 0-10.52 0v62.06H7.09A30.67 30.67 0 0 0 37.76 99z"/></svg>
+  <div><Timeline target='home' /></div>
-	  <h1>Pinafore</h1>
+  {{else}}
-  </div>
+  <NotLoggedInHome/>
-  <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
+  {{/if}}
-
-	<p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
-
-  <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </Layout>
 
+
 <script>
-	import Layout from './_components/Layout.html'
+  import Layout from './_components/Layout.html'
-  import { store } from './_utils/store'
+  import NotLoggedInHome from './_components/NotLoggedInHome.html'
-  import { getHomeTimeline } from './_utils/mastodon'
+  import Timeline from './_components/Timeline.html'
+  import { store } from './_utils/store.js'
 
 	export default {
-	  oncreate: function () {
-      if (process.browser) {
-        (async () => {
-          let instanceData = this.store.get('currentOauthInstance')
-          if (!instanceData) {
-            return
-          }
-          let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
-          console.log(response)
-        })()
-      }
-    },
 		store: () => store,
 		components: {
-			Layout
+		  Layout,
+			Timeline,
+			NotLoggedInHome
 		}
 	}
 </script>
 <style>
-  .banner {
-    display: flex;
-    align-items: center;
-  }
-  svg {
-    width: 70px;
-    height: 70px;
-    fill: royalblue;
-    display: inline-block;
-  }
-  h1 {
-    color: royalblue;
-    display: inline-block;
-    font-size: 3em;
-    margin: auto 15px;
-  }
-
-  @media (max-width: 767px) {
-    h1 {
-      font-size: 2.7em;
-    }
-  }
-
-
 </style>

routes/settings/add-instance.html

@@ -8,7 +8,7 @@
 
     <p>Log in to your instance to use Pinafore.</p>
 
-    <form on:submit='handleSubmit(event)'>
+    <form on:submit='onSubmit(event)'>
       <label for="instanceInput">Instance name:</label>
       <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
       <button class="primary" type="submit" id="submitButton">Add instance</button>