so://phie

blob: 02c31be6a660e4e7e094d26b080fad5918d08377 (1627 bytes)[doc][blame][raw]

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