start on timeline implementation
This commit is contained in:
parent
f64792417b
commit
4b593e794e
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -24,8 +24,14 @@ const store = new LocalStorageStore({
|
|||
instanceNameInSearch: ''
|
||||
})
|
||||
|
||||
if (process.browser) {
|
||||
window.store = store
|
||||
store.compute(
|
||||
'isUserLoggedIn',
|
||||
['currentOauthInstance'],
|
||||
currentOauthInstance => !!currentOauthInstance && currentOauthInstance.access_token
|
||||
)
|
||||
|
||||
if (process.browser && process.env.NODE_ENV !== 'production') {
|
||||
window.store = store // for debugging
|
||||
}
|
||||
|
||||
export { store }
|
||||
|
|
@ -1,66 +1,30 @@
|
|||
<:Head>
|
||||
<title>Home</title>
|
||||
<title>Pinafore</title>
|
||||
</:Head>
|
||||
|
||||
<Layout page='home'>
|
||||
<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>
|
||||
{{#if $isUserLoggedIn}}
|
||||
<div><Timeline target='home' /></div>
|
||||
{{else}}
|
||||
<NotLoggedInHome/>
|
||||
{{/if}}
|
||||
</Layout>
|
||||
|
||||
|
||||
<script>
|
||||
import Layout from './_components/Layout.html'
|
||||
import { store } from './_utils/store'
|
||||
import { getHomeTimeline } from './_utils/mastodon'
|
||||
import Layout from './_components/Layout.html'
|
||||
import NotLoggedInHome from './_components/NotLoggedInHome.html'
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue