# suter-partner/summary-box-for-wikipedia-links architecture

> Architecture diagram of the GitHub repository suter-partner/summary-box-for-wikipedia-links, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/suter-partner/summary-box-for-wikipedia-links
- Repository: https://github.com/suter-partner/summary-box-for-wikipedia-links

## Overview

This is a small self-hosted browser script that turns eligible Wikipedia links into interactive article-summary previews. A visitor hovers or taps a link; the script obtains Wikipedia summary data, sanitizes and formats it, then displays and positions a preview. The README also documents configurable display behavior and link-specific overrides. The source excerpt is partial, so the graph omits uncertain wiring such as stylesheet loading details.

Main entry points: [`wikiPrevBox/wikiPreviewBox.js`](https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.js) (Preview script), [`wikiPrevBox/wikiPreviewBox.css`](https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.css) (Preview styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser runtime"]
  node_hostpage["Host page"]
  node_script["Preview script<br/>[wikiPreviewBox.js]"]
  node_preview["Summary preview<br/>[wikiPreviewBox.js]"]
  node_stylesheet["Preview styles<br/>[wikiPreviewBox.css]"]
end

subgraph group_external["Wikipedia service"]
  node_wikiapi["Wikipedia summaries"]
end

node_visitor(("Site visitor"))

node_visitor -->|"hovers or taps"| node_hostpage
node_hostpage -->|"provides links"| node_script
node_script -->|"requests summary"| node_wikiapi
node_wikiapi -->|"returns article data"| node_script
node_script -->|"builds and positions"| node_preview
node_stylesheet -->|"styles"| node_preview

click node_script "https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.js"
click node_preview "https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.js"
click node_stylesheet "https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_hostpage,node_script,node_preview,node_stylesheet toneBlue
class node_wikiapi toneAmber
class node_visitor toneIndigo
```

## Components

### Browser runtime

- **Host page**
- [Preview script](https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.js): `wikiPrevBox/wikiPreviewBox.js`
- [Summary preview](https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.js): `wikiPrevBox/wikiPreviewBox.js`
- [Preview styles](https://github.com/suter-partner/summary-box-for-wikipedia-links/blob/main/wikiPrevBox/wikiPreviewBox.css): `wikiPrevBox/wikiPreviewBox.css`

### Wikipedia service

- **Wikipedia summaries**

### Other components

- **Site visitor**

## Connections

- Site visitor → Host page: hovers or taps
- Host page → Preview script: provides links
- Preview script → Wikipedia summaries: requests summary
- Wikipedia summaries → Preview script: returns article data
- Preview script → Summary preview: builds and positions
- Preview styles → Summary preview: styles