ff matrix: add 'comment' field, work on float/crossref/tables

dev-docs/feature-format-matrix/.gitignore

@@ -5,3 +5,5 @@ qmd-files/**/*.html
 qmd-files/**/*.pdf
 qmd-files/**/*.md
 qmd-files/**/*.mdx
+
+/.quarto/

dev-docs/feature-format-matrix/_quarto.yml

@@ -0,0 +1,2 @@
+project:
+  title: "Feature format matrix"

dev-docs/feature-format-matrix/_tabulator.qmd

@@ -1,7 +1,3 @@
----
-css: dist/css/tabulator.min.css
----
-
 ```{=html}
 <script type="text/javascript" src="dist/js/tabulator.min.js"></script>
 ```

dev-docs/feature-format-matrix/create_table.py

@@ -88,12 +88,15 @@ def table_cell(entry, _feature, _format_name, format_config):
     result = []
     quality = format_config.get("quality", "unknown")
     if quality is not None:
-        # use forbidden sign for -1, yellow circle for 0, and green circle for 1
         qualities = {-1: "🚫", 0: "⚠", 1: "✓", 2: "✓✓"}
-        colors = {-1: "#b05050", 0: "#c09060", 1: "#50b050", 2: "#50b050", "unknown": "inherit", "na": "inherit"}
+        colors = {-1: "bad", 0: "ok", 1: "good", 2: "good", "unknown": "unknown", "na": "na"}
         color = colors[quality]
         quality_icon = qualities.get(quality, "❓")
-        result.append(f"<span style='color: {color}'>{quality_icon}</span>")
+        result.append(f"<span class='{color}'>{quality_icon}</span>")
+    comment = format_config.get("comment", None)
+    if comment is not None:
+        # This is going to be an accessibility problem
+        result.append(f"<span title='{comment}'>&#x1F4AC;</span>")
     return "".join(result)
 
 def compute_trie():

dev-docs/feature-format-matrix/index.css

@@ -0,0 +1,11 @@
+.bad {
+  color: #b05050;
+}
+
+.ok {
+  color: #c09060;
+}
+
+.good {
+  color: #60b050;
+}

dev-docs/feature-format-matrix/index.qmd

@@ -2,6 +2,9 @@
 engine: jupyter
 format: html
 title: Features x Formats
+css:
+  - index.css
+  - dist/css/tabulator.min.css
 ---
 
 <!--
@@ -18,6 +21,14 @@ specifically the `columns` field.
 
 ## Quality summary
 
+| Icon | Meaning |
+|------|---------|
+| [&#x1F6AB;]{.bad}|  A bug |
+| [&#x26A0;]{.ok}|  Needs improvement |
+| [&#x2713;]{.good}|  Good |
+| [&#x2713;&#x2713;]{.good}|  Good, with tests |
+| [&#x1F4AC;]{.unknown} |  A comment |
+
 ```{python}
 #| echo: false
 ok_cells = 0

dev-docs/feature-format-matrix/qmd-files/callout/document.qmd

@@ -3,46 +3,30 @@ title: Callouts
 format:
   docusaurus-md:
     quality: 1
-    format-name: docusaurus
   html: 
     quality: 2
-    format-name: html
   dashboard:
-    is-dashboard: true # this is due to a bug on conditional content; when-format="dashboard" doesn't work
     quality: 0
-    format-name: dashboard
+    comment: "Bug: Callout icons show on a separate line from the title."
   markdown:
-    is-markdown: true
     quality: 0
-    format-name: markdown
+    comment: "Should we be emitting that `<div>`? What output are we even targeting here?"
   gfm:
-    is-gfm: true
     quality: 1
-    format-name: gfm
+    comment: "Custom titles are not supported in GFM yet, we simply output a new heading."
   pdf:
-    is-pdf: true
     quality: 1
-    format-name: pdf
   typst:
-    is-typst: true
     quality: 1
-    format-name: typst
   docx:
-    is-docx: true
     quality: 1
-    format-name: docx
   revealjs:
-    is-revealjs: true
     quality: 2
-    format-name: revealjs
   beamer:
     quality: 1
-    is-beamer: true
-    format-name: beamer
   ipynb:
-    is-ipynb: true
-    format-name: ipynb
     quality: 0
+    comment: "Ipynb callouts are emitted as plain markdown callouts. Is that what we want?"
 _quarto:
   tests:
     html:
@@ -68,23 +52,4 @@ You should note that this is a note.
 
 A callout does not need a title.
 
-:::
-
-## `{{< meta format-name >}}`-specific comments
-
-::: {.content-visible when-meta="is-dashboard"}
-## Bug
-Bug: Callout icons show on a separate line from the title.
-:::
-
-::: {.content-visible when-meta="is-markdown"}
-Should we be emitting that `<div>`? What output are we even targeting here?
-:::
-
-::: {.content-visible when-meta="is-gfm"}
-Custom titles are not supported in GFM yet, we simply output a new heading.
-:::
-
-::: {.content-visible when-meta="is-ipynb"}
-Ipynb callouts are emitted as plain markdown callouts. Is that what we want?
 :::

dev-docs/feature-format-matrix/qmd-files/crossref/float/table/document.qmd

@@ -1,6 +1,68 @@
 ---
+validate-yaml: false
 format: 
-  html: {}
+  html: &tested
+    quality: 2
+  dashboard: *tested
+  markdown: &missing
+    quality: -1
+    comment: Missing implementation
+  pdf: *tested
+  typst:
+    output-ext: typ # for the test below
+    quality: 2
+  docusaurus-md: *tested
+  revealjs: *tested
+  beamer: 
+    output-ext: tex
+    quality: 2
+  ipynb:
+    quality: 1
+    comment: Writing ipynb tests is horrible right now.
+_quarto:
+  tests:
+    html: &dom-tests
+      ensureHtmlElements: 
+        - 
+          - "div#tbl-1.quarto-float figure.quarto-float.quarto-float-tbl table"
+          - "div#tbl-2.quarto-float figure.quarto-float.quarto-float-tbl img"
+          - "div#tbl-1.quarto-float figure.quarto-float.quarto-float-tbl figcaption"
+          - "div#tbl-2.quarto-float figure.quarto-float.quarto-float-tbl figcaption"
+          - "a[href=\"#tbl-1\"].quarto-xref"
+          - "a[href=\"#tbl-2\"].quarto-xref"
+    dashboard: *dom-tests
+    revealjs: # reveal resolves anchors differently, using the section headings instead of the float ids
+        - 
+          - "div#tbl-1.quarto-float figure.quarto-float.quarto-float-tbl table"
+          - "div#tbl-2.quarto-float figure.quarto-float.quarto-float-tbl img"
+          - "div#tbl-1.quarto-float figure.quarto-float.quarto-float-tbl figcaption"
+          - "div#tbl-2.quarto-float figure.quarto-float.quarto-float-tbl figcaption"
+          - "a[href=\"#crossreferenceable-tables\"].quarto-xref"
+          - "a[href=\"#as-images\"].quarto-xref"
+    latex: &latex-tests
+      ensureFileRegexMatches:
+        - 
+          - "\\\\ref\\{tbl-1\\}"
+          - "\\\\ref\\{tbl-2\\}"
+          - "\\\\label\\{tbl-1\\}"
+          - "\\\\label\\{tbl-2\\}"
+          - "\\\\begin\\{longtable\\}"
+          - "\\\\includegraphics.*media.*table\\.jpg"
+    beamer: *latex-tests
+    typst:
+      ensureFileRegexMatches:
+        - 
+          - "\\<tbl-1\\>"
+          - "\\<tbl-2\\>"
+          - "@tbl-1"
+          - "@tbl-2"
+    docusaurus-md:
+      ensureFileRegexMatches:
+        -
+          - "\\<div id=\"tbl-1\"\\>"
+          - "\\<div id=\"tbl-2\"\\>"
+          - "\\| Default \\| Left \\| Right \\| Center \\|" # search for md table header
+          - "\\!\\[\\]\\(.*media.*table\\.jpg\\)"
 ---
 
 ## Crossreferenceable "Table"s
@@ -17,9 +79,11 @@ Tables with a caption and a label can be referenced using the `@ref` syntax, as
 
 Tables can contain arbitrary content instead of an image. This lets you, for example, use an image to represent the table, in case its formatting is too complex for it to be rendered in HTML.
 
+## As images
+
 ::: {#tbl-2}
 
-![](./a-table.png)
+![](/media/table.jpg)
 
 This is the caption for the table rendered as an image.