so://phie

blob: 262b311cdbf9339c2f24450bbf6a48e1cd7aec36 (1406 bytes)[doc][blame][raw]

 1import { html } from '../std/js/render.js';
 2import { Overview, Category, Message } from './component.js';
 3
 4export const App = async props => {
 5	let body;
 6	try {
 7		const data = await fetchPostData();
 8		if(!data || data.length === 0) {
 9			throw new Error('Response body is empty: 500');
10		}
11		body = html`<div>
12			${Overview(data)}
13			${data.map(Category)}
14		</div>`;
15	}
16	catch(error) {
17		console.error(error);
18		body = Message({
19			message: 'Something went wrong!',
20			description: error.message
21		});
22	}
23	return html`<div>
24		<header class="container-fluid">
25			<div class="row">
26				<div class="container">
27					<h1>git.typable</h1>
28					<p>A place for commonly used code snippets.</p>
29				</div>
30			</div>
31		</header>
32		<main class="container-fluid">
33			<div class="row">
34				<div class="container">${body}</div>
35			</div>
36		</main>
37		<footer class="container-fluid">
38			<div class="row">
39				<div class="container">
40					<span>&copy; typable ${new Date().getFullYear()}</span>
41					<a href="https://www.buymeacoffee.com/typable">Donate</a>
42					<a href="https://typable.dev/imprint">Imprint</a>
43					<a href="https://typable.dev/terms">Terms</a>
44				</div>
45			</div>
46		</footer>
47	</div>`;
48};
49
50async function fetchPostData() {
51	const response = await fetch('/data/post.json');
52	if(response.status !== 200) {
53		throw new Error('Invalid status code: ' + response.status);
54	}
55	return await response.json();