67 lines
		
	
	
		
			No EOL
		
	
	
		
			1.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			67 lines
		
	
	
		
			No EOL
		
	
	
		
			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 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>
 | 
						|
</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> |