start on timeline implementation

This commit is contained in:
Nolan Lawson 2018-01-08 18:14:21 -08:00
parent f64792417b
commit 4b593e794e
5 changed files with 85 additions and 53 deletions

View File

@ -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>

View File

@ -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>

View File

@ -24,8 +24,14 @@ const store = new LocalStorageStore({
instanceNameInSearch: '' 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 } export { store }

View File

@ -1,66 +1,30 @@
<:Head> <:Head>
<title>Home</title> <title>Pinafore</title>
</:Head> </:Head>
<Layout page='home'> <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> </Layout>
<script> <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 { 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, store: () => store,
components: { components: {
Layout Layout,
Timeline,
NotLoggedInHome
} }
} }
</script> </script>
<style> <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> </style>

View File

@ -8,7 +8,7 @@
<p>Log in to your instance to use Pinafore.</p> <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> <label for="instanceInput">Instance name:</label>
<input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''> <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
<button class="primary" type="submit" id="submitButton">Add instance</button> <button class="primary" type="submit" id="submitButton">Add instance</button>