forked from cybrespace/pinafore
67 lines
1.7 KiB
HTML
67 lines
1.7 KiB
HTML
<:Head>
|
|
<title>Home</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 performance 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>
|
|
</Layout>
|
|
|
|
<script>
|
|
import Layout from './_components/Layout.html'
|
|
import { databasePromise } from './_utils/database'
|
|
import { getHomeTimeline } from './_utils/mastodon'
|
|
|
|
export default {
|
|
oncreate: function () {
|
|
if (process.browser) {
|
|
(async () => {
|
|
let db = await databasePromise
|
|
let instanceData = await db.get('instance')
|
|
if (!instanceData) {
|
|
return
|
|
}
|
|
let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
|
|
console.log(response)
|
|
|
|
})()
|
|
}
|
|
},
|
|
components: {
|
|
Layout
|
|
}
|
|
}
|
|
</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> |