← Commit history

Sub-readme card in the main README (icon left, preview right, as a table: align is stripped); wiki-readme: align does not survive

John Lauer ·670ac57e74 ·18d ago ·parent 28debf3
3 files changed +40−1
skills/wiki-readme/SKILL.md+2−1
@@ -64,7 +64,8 @@ It **strips `<style>`, `<script>`, `<details>`/`<summary>`, `<iframe>`, and even `style=` attributes.** Surviving tags: `h1-6, p, a, ul/ol/li, blockquote, pre, code, em, strong, del, ins, sub, sup, kbd, hr, br, img, table/thead/tbody/tr/th/td, span, div, input` (task lists), with `class` on a few and `href/src/alt/width/-height/align`. **Consequence: you cannot build a tabbed / accordion / toolbar+height` (`align` is STRIPPED: verified 2026-10-06, an `<img align="left">` does not float; for an image beside text use a+two-cell `<table>`, see wiki-sub-readme). **Consequence: you cannot build a tabbed / accordion / toolbar "custom HTML layout" in README.md**, inline styles vanish, `<details>` collapse, scripts never run. (Confirmed live: a hand-styled toolbar rendered as plain links.) 
skills/wiki-sub-readme/SKILL.md+31
@@ -38,6 +38,37 @@ and cramming them all into one README makes it a wall. In the main README, one index section:  ```markdown+## Introducing ONE sub-readme in the main README: icon left, a few sentences right++When the main README introduces a single sub-readme (a sub-project, a lab, a tool), do NOT paste a big+screenshot of it. Give it a small card: a small icon on the left, a few sentences of preview and its+links on the right. That is the standard way to introduce a sub-readme (John, 2026-10-06; live on+adom/adom-aiflow-probing, "Tether Lab").++The sanitizer STRIPS `align` (verified 2026-10-06: `<img align="left">` renders with no float), so a+floated image does not work. Use a two-cell HTML table, which survives:++```html+<table>+<tr>+<td width="104"><a href="lab/README.md"><img src="lab/docs/lab-icon.png" width="112" alt="Lab"></a><br><sub>&nbsp;&nbsp;&nbsp;&nbsp;Lab&nbsp;name&nbsp;&nbsp;&nbsp;&nbsp;</sub></td>+<td>Two or three sentences: what it is and why a reader cares. <strong><a href="lab/README.md">Lab name</a></strong> ...<br><br><a href="https://wiki.adom.inc/<owner>/<slug>/render/lab/live.html">Play it live</a> ยท <a href="lab/README.md">How it works</a></td>+</tr>+</table>+```++The traps, each found the hard way:+- **The cell's `width` is ignored** and the image's `max-width: 100%` lets the table squeeze the icon+  column to about 60 px. The non-breaking caption under the icon (`&nbsp;` padding around the name)+  gives the column a real minimum width. Keep it.+- **Give the image a `width` only, never a `height`**: with both, a squeezed cell distorts it.+- **The icon is real**: a square crop of the sub-project's own render or screenshot (about 256 px source,+  rounded corners), not a drawn glyph and not the full screenshot.+- In the MAIN README, relative `src` and `href` resolve (the Overview renderer rewrites them). Inside a+  sub-readme use absolute `/blob/` URLs for images (see wiki-subreadme).+- Verify on the rendered page (signed in when it is private): icon left, text starting to its right,+  icon square.+ ## Feature guides  | guide | what it covers |
skills/wiki-subreadme/SKILL.md+7
@@ -96,6 +96,13 @@ paths do: - [Aug 4 meeting recap](virtual-meeting-04aug2026/README.md) ``` +## Introduce it from the main README with a card, not a screenshot++One sub-readme introduced in the main README gets a small card: a square icon on the left (a crop of the+sub-project's own render), two or three sentences and its links on the right. `align` is stripped, so+build it as a two-cell `<table>`; the exact snippet and its traps are in **wiki-sub-readme**+("Introducing ONE sub-readme in the main README").+ ## Rules of thumb  - **Absolute `/blob/` URLs for every image and asset.** Relative paths break in