62 lines
1.7 KiB
Text
62 lines
1.7 KiB
Text
|
package catalog
|
||
|
|
|
||
|
|
templ CatalogPage(page Page) {
|
||
|
|
<main class="catalog-page">
|
||
|
|
<nav class="catalog-nav" aria-label="Catalog navigation">
|
||
|
|
<a href="./index.html" class="catalog-home-link">Catalog</a>
|
||
|
|
<div class="catalog-nav-links">
|
||
|
|
for _, navPage := range Pages() {
|
||
|
|
<a
|
||
|
|
href={ "./" + navPage.Slug + ".html" }
|
||
|
|
class={ catalogNavLinkClass(navPage.Slug == page.Slug) }
|
||
|
|
>
|
||
|
|
{ navPage.Title }
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<header class="catalog-page-header">
|
||
|
|
<p class="catalog-eyebrow">Design System</p>
|
||
|
|
<h1>{ page.Title }</h1>
|
||
|
|
<p>{ page.Description }</p>
|
||
|
|
</header>
|
||
|
|
<div class="catalog-example-list">
|
||
|
|
for _, example := range page.Examples {
|
||
|
|
<section class="catalog-example">
|
||
|
|
<div class="catalog-example-copy">
|
||
|
|
<h2>{ example.Title }</h2>
|
||
|
|
if example.Description != "" {
|
||
|
|
<p>{ example.Description }</p>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
<div class="catalog-example-preview">
|
||
|
|
@example.Preview
|
||
|
|
</div>
|
||
|
|
if example.Snippet != "" {
|
||
|
|
<pre class="catalog-example-snippet"><code>{ example.Snippet }</code></pre>
|
||
|
|
}
|
||
|
|
</section>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ CatalogIndex(pages []Page) {
|
||
|
|
<main class="catalog-page">
|
||
|
|
<header class="catalog-page-header">
|
||
|
|
<p class="catalog-eyebrow">Design System</p>
|
||
|
|
<h1>Component Catalog</h1>
|
||
|
|
<p>Static documentation generated from the same templ primitives used by the Go application.</p>
|
||
|
|
</header>
|
||
|
|
<div class="catalog-page-list">
|
||
|
|
for _, page := range pages {
|
||
|
|
<a href={ "./" + page.Slug + ".html" } class="catalog-page-link-card">
|
||
|
|
<h2>{ page.Title }</h2>
|
||
|
|
<p>{ page.Description }</p>
|
||
|
|
<p class="catalog-page-link">/{ page.Slug }.html</p>
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
}
|