so://phie

blob: eddae31c20e3d05c04147769373e4803201b2d53 (1617 bytes)[doc][blame][raw]

 1import { html, escape } from './util.js';
 2
 3export const Overview = props => {
 4	return html`<div>
 5		<h3>Overview</h3>
 6		<ul class="overview">
 7			${props.map(category => {
 8				return html`<li>
 9					<p>${category.name}</p>
10					<ul>
11						${category.posts.map(post => {
12							const goto = () => {
13								const target = document.querySelector(`[data-id="${post.id}"]`);
14								if(target) {
15									window.scrollTo({ top: target.offsetTop - 20, behavior: 'smooth' });
16								}
17							};
18							return html`<li>
19								<a onclick=${goto}>${post.name}</a>
20							</li>`;
21						})}
22					</ul>
23				</li>`;
24			})}
25		</ul>
26	</div>`;
27};
28
29export const Category = props => {
30	return html`<div>
31		<h2>${props.name}</h2>
32		${props.posts.map(Post)}
33	</div>`;
34};
35
36export const Post = props => {
37	const url = 'https://git.typable.dev/std' + props.url;
38	return html`<article data-id="${props.id}">
39		<label>${props.name}</label>
40		${props.syntax ? `<pre>${escape(props.syntax)}</pre>` : ''}
41		<p>${props.description}</p>
42		<code>
43			<pre>${escape(url)}</pre>
44			${CopyButton({ value: url })}
45		</code>
46		${props.code ? (
47			html`<code>
48				<pre>${escape(props.code.join('\n'))}</pre>
49				${CopyButton({ value: props.code.join('\n') })}
50			</code>`
51		) : ''}
52	</article>`;
53};
54
55export const CopyButton = props => {
56	const copy = () => navigator.clipboard.writeText(props.value);
57	return html`<div class="clipboard ico" title="Copy" onclick=${copy}>link</div>`;
58};
59
60export const Message = props => {
61	return html`<div class="message">
62		<h3>${props.message}</h3>
63		${props.description ? `<p>${props.description}</p>` : ''}
64	</div>`;