91 lines
2.5 KiB
Svelte
91 lines
2.5 KiB
Svelte
<script>
|
|
import {link} from 'svelte-spa-router'
|
|
import Button from "../Components/Button.svelte";
|
|
|
|
const get = async () =>
|
|
{
|
|
let res = await fetch('https://nhwh2z1zze.execute-api.us-east-1.amazonaws.com/TotalPosts')
|
|
let val = await res.text()
|
|
console.log(val)
|
|
return val
|
|
}
|
|
let query = ""
|
|
</script>
|
|
|
|
<div class="main">
|
|
<div class="spacing">
|
|
<h1 class="heading section spacing">Subooru</h1>
|
|
<div class="section spacing">
|
|
<ul>
|
|
<li><a href="/" use:link>Posts</a></li>
|
|
<li>Comments</li>
|
|
<li>Tags</li>
|
|
<li>Wiki</li>
|
|
<li>Documentation</li>
|
|
</ul>
|
|
</div>
|
|
<form>
|
|
<div class="flex section spacing items-baseline">
|
|
<div class="flex-grow mr-2">
|
|
<input bind:value={query} required type="text" class="w-full text-black shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" placeholder="Image Search">
|
|
</div>
|
|
<Button rounded blue>Search</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{#await get()}
|
|
<div class="spacing">
|
|
...
|
|
</div>
|
|
<div class="spacing">
|
|
Serving ??? posts
|
|
</div>
|
|
{:then num}
|
|
<div class="spacing">
|
|
{#each num.toString() as d}
|
|
<img alt={d} src={`https://shimmie.shishnet.org/ext/home/counters/newcounter/${d}.gif`} />
|
|
{/each}
|
|
</div>
|
|
<div class="spacing">
|
|
Serving {new Intl.NumberFormat().format(num)} posts
|
|
</div>
|
|
{:catch ex}
|
|
<div class="spacing">
|
|
<div class="text-9xl md:h-40 h-20">😢</div>
|
|
</div>
|
|
<div class="spacing">
|
|
Error loading number of posts.
|
|
</div>
|
|
{/await}
|
|
</div>
|
|
|
|
<style>
|
|
.heading
|
|
{
|
|
@apply text-7xl;
|
|
-webkit-text-stroke: 0.02em white;
|
|
}
|
|
:global(.dark) .heading
|
|
{
|
|
-webkit-text-stroke: 0.02em black;
|
|
}
|
|
ul li { @apply ml-1 mr-1 inline; }
|
|
img
|
|
{
|
|
@apply inline-block text-white md:h-40 h-20;
|
|
aspect-ratio: 1/1.66;
|
|
}
|
|
.section .spacing
|
|
{
|
|
@apply lg:mt-4 lg:mb-4 md:mt-2 md:mb-2 mt-0 mb-0;
|
|
}
|
|
.spacing
|
|
{
|
|
@apply lg:mt-6 lg:mb-6 md:mt-4 md:mb-4 mt-2 mb-2;
|
|
}
|
|
.main
|
|
{
|
|
@apply min-h-screen flex flex-col items-center justify-center text-center;
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
</style> |