so://phie

blob: 044ae6a7de84b02c38f010eaa1c875da01b51bd9 (1589 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	return html`<article data-id="${props.id}">
45		<label>${props.name}</label>
46		${props.syntax ? `<pre>${escape(props.syntax)}</pre>` : ''}
47		<p>${props.description}</p>
48		<code>
49			<pre>${escape(props.import)}</pre>
50			${CopyButton({ value: props.import })}
51		</code>
52		${props.code ? (
53			html`<code>
54				<pre>${escape(props.code.join('\n'))}</pre>
55				${CopyButton({ value: props.code.join('\n') })}
56			</code>`
57		) : ''}
58	</article>`;
59};
60
61export const CopyButton = props => {
62	const copy = () => navigator.clipboard.writeText(props.value);
63	return html`<div class="clipboard ico" title="Copy" onclick=${copy}>link</div>`;