Skip to content

feat(callouts): callout Notion-style come admonition Docusaurus#2

Merged
marcofarina merged 2 commits into
mainfrom
feat/callouts-notion-style
May 28, 2026
Merged

feat(callouts): callout Notion-style come admonition Docusaurus#2
marcofarina merged 2 commits into
mainfrom
feat/callouts-notion-style

Conversation

@marcofarina
Copy link
Copy Markdown
Owner

Summary

  • Aggiunge 9 keyword admonition custom (prereq, learn, exercise, definition, history, code, cleancode, nutshell, mindmap) e ristila i 4 default in uso (info → "Informazioni utili", tip, warning → "Attenzione", danger) come callout Notion-style, applicati al preset docs e ai 4 plugin-content-docs (programmatore/artefice/archivista/apprendista).
  • Swizzle eject di theme/Admonition con CALLOUT_REGISTRY (titolo IT + filename PNG per tipo) e 13 icone in static/img/callouts/. Palette OKLCH light/dark in src/css/custom.css con un hue distinto per ciascun callout.
  • Pagina demo a /docs/callouts-demo (frontmatter unlisted: true, non in sidebar) per QA visivo.

Nessun duplicato semantico: :::note resta come fallback minimale (rimosso dal registry, 0 usi nei .mdx esistenti); :::info e :::warning assorbono i corrispettivi callout Notion. Retro-compatibilità completa con tutti i .mdx già scritti.

Test plan

  • npm run start e aprire /docs/callouts-demo per QA visivo dei 13 callout in light e dark mode
  • Verificare le pagine già esistenti che usano admonitions: docs/basi-del-linguaggio/le-variabili.mdx, output.mdx, le-stringhe.mdx, moduli.mdx, input.mdx
  • npm run build per verificare assenza di errori (onBrokenLinks: 'throw') — già verificato localmente
  • Decidere se eliminare docs/callouts-demo.mdx post-merge o spostarla in docs/reference/

Follow-up (fuori scope)

  • @docusaurus/theme-mermaid per il rendering del grafo Mermaid dentro :::mindmap (oggi è solo il contenitore)
  • Variante dark delle PNG, se servirà più contrasto

🤖 Generated with Claude Code

marcofarina and others added 2 commits May 28, 2026 08:34
Aggiunge 9 keyword custom (prereq, learn, exercise, definition, history,
code, cleancode, nutshell, mindmap) e ristila i 4 default in uso
(info -> "Informazioni utili", tip, warning -> "Attenzione" con fiamma,
danger) nel registry. Swizzle eject di theme/Admonition con tabella
interna titolo IT + filename PNG, palette OKLCH light/dark per ciascun
tipo in src/css/custom.css. Icone PNG da mettere in static/img/callouts/
(13 file, vedi registry per i nomi). Pagina demo a /docs/_callouts-demo
per QA visivo, non in sidebar.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- aggiunge le 13 PNG in static/img/callouts/
- rinomina docs/_callouts-demo.mdx -> callouts-demo.mdx
  (Docusaurus esclude i file con prefisso _ dalle route),
  frontmatter `unlisted: true` invece di `sidebar_class_name: hidden`
- titolo callout: ora <h4>, font-size 1.5rem, line-height 1, margin 0;
  specificity boost via `.callout .callout__title` per battere
  `.markdown h4` di Infima (era la causa dei titoli "piccoli")
- body callout: line-height 1.4 (più compatto del default 1.65)
- icone: max 30x30 (era 22), gap header 12px
- palette: swap code<->cleancode, swap info<->tip, warning spostato
  verso arancione (hue 55), code grigio neutro
- demo: blocco codice statico + fence PyRunner live in :::code

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@marcofarina marcofarina merged commit fcebb92 into main May 28, 2026
1 check passed
@marcofarina marcofarina deleted the feat/callouts-notion-style branch May 28, 2026 13:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant