# hoana2007/viewweb architecture

> Architecture diagram of the GitHub repository hoana2007/viewweb, 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/hoana2007/viewweb
- Repository: https://github.com/hoana2007/viewweb

## Overview

A small browser-based web-link directory: it loads links from a Google Apps Script endpoint, then lets visitors browse, search, open, copy, and track links. The tree contains only the HTML, JavaScript, and CSS files; the JavaScript supports the interactions and data flow shown here. The endpoint’s implementation and the HTML/CSS contents were not sampled, so their internal behavior is not inferred.

Main entry points: [`script.js`](https://github.com/hoana2007/viewweb/blob/main/script.js) (Link cards), [`index.html`](https://github.com/hoana2007/viewweb/blob/main/index.html) (Directory page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Directory interface"]
  node_page["Directory page<br/>[index.html]"]
  node_app["Browser app<br/>[script.js]"]
end

subgraph group_data["Link data"]
  node_link_data["Link data<br/>[script.js]"]
  node_filter["Search and filter<br/>[script.js]"]
  node_categories["Category chips<br/>[script.js]"]
  node_cards["Link cards<br/>[script.js]"]
  node_endpoint["Apps Script endpoint"]
end

subgraph group_actions["Visitor actions"]
  node_tracking["Click tracking<br/>[script.js]"]
  node_open_link["Open link<br/>[script.js]"]
  node_copy_link["Copy link<br/>[script.js]"]
  node_toast["Toast message<br/>[script.js]"]
  node_theme["Theme toggle<br/>[script.js]"]
end

node_visitor(("Visitor"))
node_clipboard["Clipboard API"]
node_linked_site["Linked website"]

node_visitor -->|"uses"| node_page
node_app -->|"fetches links"| node_endpoint
node_app -->|"starts loading"| node_link_data
node_link_data -->|"posts clicks"| node_endpoint
node_link_data -->|"renders"| node_categories
node_link_data -->|"renders"| node_cards
node_visitor -->|"enters search"| node_filter
node_visitor -->|"selects category"| node_categories
node_categories -->|"filters"| node_filter
node_filter -->|"reads"| node_link_data
node_filter -->|"renders matches"| node_cards
node_visitor -->|"selects action"| node_cards
node_cards -->|"tracks click"| node_tracking
node_cards -->|"opens"| node_open_link
node_open_link -->|"tracks click"| node_tracking
node_open_link -->|"opens tab"| node_linked_site
node_cards -->|"copies link"| node_copy_link
node_copy_link -->|"writes link"| node_clipboard
node_copy_link -->|"shows confirmation"| node_toast
node_visitor -->|"toggles theme"| node_theme

click node_page "https://github.com/hoana2007/viewweb/blob/main/index.html"
click node_app "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_link_data "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_filter "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_categories "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_cards "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_tracking "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_open_link "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_copy_link "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_toast "https://github.com/hoana2007/viewweb/blob/main/script.js"
click node_theme "https://github.com/hoana2007/viewweb/blob/main/script.js"

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_page,node_app toneBlue
class node_link_data,node_filter,node_categories,node_cards,node_endpoint toneAmber
class node_tracking,node_open_link,node_copy_link,node_toast,node_theme,node_clipboard toneMint
class node_visitor,node_linked_site toneIndigo
```

## Components

### Directory interface

- [Directory page](https://github.com/hoana2007/viewweb/blob/main/index.html): `index.html`
- [Browser app](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`

### Link data

- [Link data](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Search and filter](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Category chips](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Link cards](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- **Apps Script endpoint**

### Visitor actions

- [Click tracking](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Open link](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Copy link](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Toast message](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`
- [Theme toggle](https://github.com/hoana2007/viewweb/blob/main/script.js): `script.js`

### Other components

- **Visitor**
- **Clipboard API**
- **Linked website**

## Connections

- Visitor → Directory page: uses
- Browser app → Apps Script endpoint: fetches links
- Browser app → Link data: starts loading
- Link data → Apps Script endpoint: posts clicks
- Link data → Category chips: renders
- Link data → Link cards: renders
- Visitor → Search and filter: enters search
- Visitor → Category chips: selects category
- Category chips → Search and filter: filters
- Search and filter → Link data: reads
- Search and filter → Link cards: renders matches
- Visitor → Link cards: selects action
- Link cards → Click tracking: tracks click
- Link cards → Open link: opens
- Open link → Click tracking: tracks click
- Open link → Linked website: opens tab
- Link cards → Copy link: copies link
- Copy link → Clipboard API: writes link
- Copy link → Toast message: shows confirmation
- Visitor → Theme toggle: toggles theme