docs: add mobile support + seo

This commit is contained in:
venashial
2022-03-30 18:36:13 -07:00
parent 59b3cfee66
commit baef94f14a
13 changed files with 223 additions and 140 deletions

View File

@@ -5,8 +5,9 @@
export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')
export let title = ''
if (!title) title = fileName
export let title = fileName
export let description = 'Learn about Omorphia, the component & style library'
let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
@@ -21,91 +22,86 @@
</script>
<svelte:head>
<title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
<title>{title ? `${title} Omorphia` : 'Omorphia'}</title>
<meta name="description" content={description} />
</svelte:head>
<article>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={editUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={editUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
{#if api}
<div class="extra-info">
{#if api.props.length > 0}
<h2>Properties</h2>
<table class="api-table">
<thead>
{#if api}
<div class="extra-info">
{#if api.props.length > 0}
<h2>Properties</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{#each api.props as prop}
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td><code>{prop.value ?? ''}</code></td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
</thead>
<tbody>
{#each api.props as prop}
<tr>
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td><code>{prop.value ?? ''}</code></td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
{#if api.events.length > 0}
<h2>Events</h2>
<table class="api-table">
<thead>
{/each}
</tbody>
</table>
{/if}
{#if api.events.length > 0}
<h2>Events</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Forwarded</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{#each api.events as event}
<tr>
<th>Name</th>
<th>Forwarded</th>
<th>Description</th>
<td><code>{event.name}</code></td>
<td>{!!event.parent}</td>
<td>{event.description?.replace('null', '') || ''}</td>
</tr>
</thead>
<tbody>
{#each api.events as event}
<tr>
<td><code>{event.name}</code></td>
<td>{!!event.parent}</td>
<td>{event.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
{#if api.slots.length > 0}
<h2>Slots</h2>
<table class="api-table">
<thead>
{/each}
</tbody>
</table>
{/if}
{#if api.slots.length > 0}
<h2>Slots</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Fallback</th>
</tr>
</thead>
<tbody>
{#each api.slots as slot}
<tr>
<th>Name</th>
<th>Fallback</th>
<td><code>{slot.name}</code></td>
<td>{slot.fallback ?? 'None'}</td>
</tr>
</thead>
<tbody>
{#each api.slots as slot}
<tr>
<td><code>{slot.name}</code></td>
<td>{slot.fallback ?? 'None'}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
{/if}
</article>
{/each}
</tbody>
</table>
{/if}
</div>
{/if}
<style lang="postcss">
article {
max-width: 800px;
padding: 5rem 1rem;
}
.edit-link {
display: flex;
align-items: center;