From 84588b143de8a7c2077d2f350b7c90d63433c30f Mon Sep 17 00:00:00 2001
From: Alex Garel <alex@garel.org>
Date: Thu, 11 Jul 2024 19:35:52 +0200
Subject: [PATCH] docs: better web component reference

---
 .github/workflows/generate-doc.yml |  4 +-
 docs/users/ref-web-components.md   | 90 +++++++++++++++++++++++++++++-
 frontend/README.md                 |  2 +-
 mkdocs.yml                         |  2 +-
 4 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/generate-doc.yml b/.github/workflows/generate-doc.yml
index 9e5bb671..16c27f9c 100644
--- a/.github/workflows/generate-doc.yml
+++ b/.github/workflows/generate-doc.yml
@@ -49,8 +49,8 @@ jobs:
         if: steps.wait-build-front-image.outputs.conclusion == 'timed_out'
         run: echo Timeout && false # fail if build time out
 
-      # Getting web-components docs: extract json and add html to expose them
-      - name: Getting web-components docs from frontend image
+      # Getting web-components docs: extract json to expose them
+      - name: Getting web-components json from frontend image
         run: |
           # download docker image corresponding to the tag
           image_name=ghcr.io/${{ github.repository }}/search_front_image:${{ env.TAG_NAME }}
diff --git a/docs/users/ref-web-components.md b/docs/users/ref-web-components.md
index bf17bac1..52de2df2 100644
--- a/docs/users/ref-web-components.md
+++ b/docs/users/ref-web-components.md
@@ -1,3 +1,89 @@
-# Reference for Search-a-licious Web components
+# Reference for Search-a-licious Web Components
 
-**IMPORTANT:** do not edit this file, it is replaced by web-components.html at documentation generation time.
\ No newline at end of file
+This page documents [web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+provided by Search-a-licious
+to quickly build your interfaces.
+
+## Main components
+
+### searchalicious-bar
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-bar"></api-viewer>
+
+### searchalicious-results
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-results"></api-viewer>
+
+### searchalicious-pages
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-pages">
+
+### searchalicious-facets
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-sort">
+
+### searchalicious-chart
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-chart">
+
+### searchalicious-sort
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-sort">
+
+### searchalicious-sort-field
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-field">
+
+### searchalicious-sort-script
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-script">
+
+### searchalicious-button
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-button">
+
+### searchalicious-count
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-count">
+
+
+## Internal components
+
+### searchalicious-facet-terms
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-facet-terms">
+
+### searchalicious-suggestion-entry
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-suggestion-entry">
+
+### searchalicious-checkbox
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-checkbox">
+
+### searchalicious-radio
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-radio">
+
+### searchalicious-toggle
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-toggle">
+
+### searchalicious-secondary-button
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-secondary-button">
+
+### searchalicious-button-transparent
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-button-transparent">
+
+### searchalicious-icon-cross
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-icon-cross">
+
+### searchalicious-suggestion-entry
+
+<api-viewer src="./dist/custom-elements.json" only="searchalicious-suggestion-entry">
+
+
+<!-- api-viewer element library -->
+<script type="module" src="https://jspm.dev/api-viewer-element"></script>
diff --git a/frontend/README.md b/frontend/README.md
index 2549938e..8e7e8dbe 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -62,7 +62,7 @@ This enables supporting multiple searches in the same page
 * **searchalicious-facet-terms** renders the facet for terms (list of entries, with number of docs).
   * it must be in a `searchalicious-facets`
   * the user can select facets to filter the search
-* **searchalicious-checkbox** is a component that displays a list of suggestions
+* **searchalicious-suggestion-entry** is a component that displays a list of suggestions
   * it must be in a `searchalicious-facet`
   * it will influence the search adding terms to the search
 * **searchalicious-checkbox** is a simple checkbox
diff --git a/mkdocs.yml b/mkdocs.yml
index 305b2c3a..8de756cf 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -37,4 +37,4 @@ plugins:
   - exclude:
       glob:
         - reports/
-        - "*_TODO.md"
+        - "*_TODO.md"
\ No newline at end of file