# jony99jrn/toolsbyjrn architecture

> Architecture diagram of the GitHub repository jony99jrn/toolsbyjrn, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jony99jrn/toolsbyjrn
- Repository: https://github.com/jony99jrn/toolsbyjrn

## Overview

Tools By JRN is a static directory for student tools, not the tools’ implementation. On page load, individual tool scripts register metadata in a shared list; the app uses that list to create searchable, category-filtered cards linking to each tool’s external site. The app also handles theme persistence and navigation interactions. README documents responsive, accessible presentation and reduced-motion support; source excerpts confirm search, filtering, theme toggle, and mobile menu behavior. External tool destinations are directory links, not verified service internals.

Main entry points: [`index.html`](https://github.com/jony99jrn/toolsbyjrn/blob/main/index.html) (Page structure), [`js/app.js`](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/app.js) (Search and filters), [`js/icons.js`](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/icons.js) (Tool icons), [`js/tools/merge-pdf.js`](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/merge-pdf.js) (Merge PDF listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_catalog["Tool catalog"]
  node_icons["Tool icons<br/>[icons.js]"]
  node_merge["Merge PDF listing<br/>[merge-pdf.js]"]
  node_cover["DIU cover listing<br/>[diu-cover-page.js]"]
  node_labcover["Lab cover listing"]
  node_imagepdf["Image PDF listing<br/>[image2pdf.js]"]
end

subgraph group_experience["Directory experience"]
  node_app["Search and filters<br/>[app.js]"]
  node_theme["Theme and menu<br/>[app.js]"]
end

subgraph group_presentation["Page presentation"]
  node_markup["Page structure<br/>[index.html]"]
  node_styles["Responsive styles<br/>[styles.css]"]
end

node_visitor(("Visitor"))
node_merge_service["Merge PDF service"]
node_cover_service["DIU cover service"]
node_labcover_service["Lab cover service"]
node_imagepdf_service["Image PDF service"]

node_visitor -->|"opens page"| node_markup
node_markup -->|"loads before listings"| node_icons
node_markup -->|"loads script"| node_merge
node_markup -->|"loads script"| node_cover
node_markup -.->|"loads script"| node_labcover
node_markup -.->|"loads script"| node_imagepdf
node_markup -->|"loads last"| node_app
node_merge -->|"uses icon"| node_icons
node_cover -->|"uses icon"| node_icons
node_labcover -.->|"uses icon"| node_icons
node_imagepdf -.->|"uses icon"| node_icons
node_merge -->|"registers listing"| node_app
node_cover -->|"registers listing"| node_app
node_labcover -->|"registers listing"| node_app
node_imagepdf -->|"registers listing"| node_app
node_app -->|"renders cards"| node_markup
node_visitor -->|"searches and filters"| node_app
node_app -->|"handles interactions"| node_theme
node_markup -->|"styled by"| node_styles
node_visitor -->|"opens external tool"| node_merge_service
node_visitor -->|"opens external tool"| node_cover_service
node_visitor -->|"opens external tool"| node_labcover_service
node_visitor -->|"opens external tool"| node_imagepdf_service

click node_markup "https://github.com/jony99jrn/toolsbyjrn/blob/main/index.html"
click node_styles "https://github.com/jony99jrn/toolsbyjrn/blob/main/css/styles.css"
click node_icons "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/icons.js"
click node_merge "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/merge-pdf.js"
click node_cover "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/diu-cover-page.js"
click node_labcover "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/diu-lab-cover-page.js"
click node_imagepdf "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/image2pdf.js"
click node_app "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/app.js"
click node_theme "https://github.com/jony99jrn/toolsbyjrn/blob/main/js/app.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_icons,node_merge,node_cover,node_labcover,node_imagepdf toneBlue
class node_app,node_theme toneAmber
class node_markup,node_styles toneMint
class node_visitor,node_merge_service,node_cover_service,node_labcover_service,node_imagepdf_service toneIndigo
```

## Components

### Tool catalog

- [Tool icons](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/icons.js): `js/icons.js`
- [Merge PDF listing](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/merge-pdf.js): `js/tools/merge-pdf.js`
- [DIU cover listing](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/diu-cover-page.js): `js/tools/diu-cover-page.js`
- [Lab cover listing](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/diu-lab-cover-page.js): `js/tools/diu-lab-cover-page.js`
- [Image PDF listing](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/tools/image2pdf.js): `js/tools/image2pdf.js`

### Directory experience

- [Search and filters](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/app.js): `js/app.js`
- [Theme and menu](https://github.com/jony99jrn/toolsbyjrn/blob/main/js/app.js): `js/app.js`

### Page presentation

- [Page structure](https://github.com/jony99jrn/toolsbyjrn/blob/main/index.html): `index.html`
- [Responsive styles](https://github.com/jony99jrn/toolsbyjrn/blob/main/css/styles.css): `css/styles.css`

### Other components

- **Visitor**
- **Merge PDF service**
- **DIU cover service**
- **Lab cover service**
- **Image PDF service**

## Connections

- Visitor → Page structure: opens page (evidence: `README.md`)
- Page structure → Tool icons: loads before listings (evidence: `README.md`)
- Page structure → Merge PDF listing: loads script (evidence: `README.md`)
- Page structure → DIU cover listing: loads script (evidence: `README.md`)
- Page structure → Lab cover listing: loads script
- Page structure → Image PDF listing: loads script
- Page structure → Search and filters: loads last (evidence: `README.md`)
- Merge PDF listing → Tool icons: uses icon (evidence: `js/tools/merge-pdf.js`)
- DIU cover listing → Tool icons: uses icon (evidence: `js/tools/diu-cover-page.js`)
- Lab cover listing → Tool icons: uses icon
- Image PDF listing → Tool icons: uses icon
- Merge PDF listing → Search and filters: registers listing (evidence: `js/tools/merge-pdf.js`)
- DIU cover listing → Search and filters: registers listing (evidence: `js/tools/diu-cover-page.js`)
- Lab cover listing → Search and filters: registers listing (evidence: `js/tools/diu-lab-cover-page.js`)
- Image PDF listing → Search and filters: registers listing (evidence: `js/tools/image2pdf.js`)
- Search and filters → Page structure: renders cards (evidence: `js/app.js`)
- Visitor → Search and filters: searches and filters (evidence: `js/app.js`)
- Search and filters → Theme and menu: handles interactions (evidence: `js/app.js`)
- Page structure → Responsive styles: styled by (evidence: `README.md`)
- Visitor → Merge PDF service: opens external tool
- Visitor → DIU cover service: opens external tool
- Visitor → Lab cover service: opens external tool
- Visitor → Image PDF service: opens external tool