Document embedding search, article list, and tag list independently (AI)
New README subsection under "Embedding in an existing page" explaining that #list-view/#article-view (the only required pair, also where search results render), #search-form/#search-input, #tag-filters, and #year-filters are all independent mount points that can be placed anywhere in a custom layout rather than stacked the way the demo does -- includes a #year-filters example, which wasn't documented anywhere before despite still being fully supported by renderFilterNavigation(). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AXSVPS3UmmASiiprPfcnUd
This commit is contained in:
1 parent
22f17a748b
commit
a0f1ed67d9
1 file changed
+41
-9
@@ -276,15 +276,7 @@ The site-level CSS files (`reset.css`, `header.css`, `layout.css`) are optional
|
||||
<div id="article-view" hidden></div>
|
||||
```
|
||||
|
||||
Place these wherever you want the CMS to appear. The router toggles `hidden` between them on navigation.
|
||||
|
||||
Optionally add a search form anywhere in the page:
|
||||
|
||||
```html
|
||||
<form id="search-form" role="search">
|
||||
<input type="search" id="search-input" placeholder="Search articles…" autocomplete="off">
|
||||
</form>
|
||||
```
|
||||
Place these wherever you want the CMS to appear. The router toggles `hidden` between them on navigation. A search box and tag/year filter lists are optional and can go anywhere else in the page — see "Search, article list, and tag list as independent pieces" below.
|
||||
|
||||
### 3. Script — before `</body>`
|
||||
|
||||
@@ -301,6 +293,46 @@ Optionally add a search form anywhere in the page:
|
||||
> ```
|
||||
> All internal fetches (articles, templates, marked.js) resolve relative to the module files via `import.meta.url` and work automatically — only the HTML tags need a path pointing at the right place.
|
||||
|
||||
### Search, article list, and tag list as independent pieces
|
||||
|
||||
The mount points above don't have to sit next to each other, or even all be present — each is a
|
||||
plain element the router looks up by `id`, wherever it happens to be in your page. This lets you
|
||||
scatter search, the article list, and the tag list across a custom layout (search box in the site
|
||||
header, tag list in a sidebar, articles in the main column) instead of stacking them the way the
|
||||
demo does.
|
||||
|
||||
- **Article list + single article — `#list-view` / `#article-view`.** These two are the only
|
||||
required pair; the router toggles `hidden` between them and always needs both present somewhere
|
||||
on the page. This pair is also where **search results** render — there's no separate results
|
||||
container, so any page using the search box below still needs `#list-view` on it somewhere to
|
||||
actually show what was searched for.
|
||||
- **Search box — `#search-form` / `#search-input`.** Fully optional and independent; place it
|
||||
anywhere (e.g. a site-wide header, not necessarily near the list). Submitting it navigates to
|
||||
`#search/query`; matches render into `#list-view`.
|
||||
```html
|
||||
<form id="search-form" role="search">
|
||||
<input type="search" id="search-input" placeholder="Search articles…" autocomplete="off">
|
||||
</form>
|
||||
```
|
||||
- **Tag list — `#tag-filters`.** Optional; put a container (a `<nav>` works well) anywhere, e.g. a
|
||||
sidebar. It's automatically filled in with one link per tag in use (alphabetical, with an
|
||||
article count) every time a list view renders — no manual updates needed. Clicking a tag
|
||||
navigates to `#tag/tag-id`, rendering the filtered list into `#list-view`.
|
||||
```html
|
||||
<nav id="tag-filters" aria-label="Filter by tag"></nav>
|
||||
```
|
||||
- **Year list — `#year-filters`** (optional, not used by this repo's own demo but supported the
|
||||
same way): a container that gets filled in with one link per year 2026 down to 2009 that has at
|
||||
least one article, linking to `#category/year-YYYY`. Can appear alongside `#tag-filters` or on
|
||||
its own.
|
||||
```html
|
||||
<nav id="year-filters" aria-label="Filter by year"></nav>
|
||||
```
|
||||
|
||||
Both filter lists are populated by the same function on every list render, so whichever of
|
||||
`#tag-filters`/`#year-filters` is present just gets filled in — omit either one (or both) and
|
||||
nothing breaks, the article list and search still work standalone.
|
||||
|
||||
### Minimal example
|
||||
|
||||
```html
|
||||
|
||||
Reference in new issue
Block a user