This plan turns the archived CHARM manual — a sprawling, ad-injected static site of several thousand pages — into a clean, mobile-first reference you can actually use with greasy hands in the driveway. It covers what the archive is, every consistency problem found, a proposed reorganization (two options, as requested), the new mobile design, and a phased path to roll the redesign across the whole manual.
The folder is a verbatim scrape of Operation CHARM's manual for this one vehicle. It is a static HTML site — every page is an index.html inside a deeply nested folder — generated from a small set of repeating templates. There is no database, no build system, and no search.
The same vehicle is documented twice, under two top-level sections whose category lists don't match:
Repair includes categories that Parts does not (Power & Ground Distribution, Diagrams, Specifications, Technical Service Bulletins, Application & ID, Diagnostic Trouble Codes). A reader looking at a Radiator must mentally stitch together two separate trees to see its procedure, its part number, and its labor time.
| Template | What it holds | Example |
|---|---|---|
| Section landing | Giant collapsible nested menu (one ~90k-token file) | Parts and Labor home |
| Category / subsystem | Menu of children | Cooling System |
| Component hub | Links to its sub-topics | Radiator |
| Procedure | Numbered steps + WARNING/CAUTION/NOTE + figures | Radiator – Removal |
| Parts Information | Data table: Part, Mfr, OEM #, Price, Notes | Radiator parts |
| Labor Times | Data table: Op, Std hrs, Warranty hrs, Skill, Notes | Radiator labor |
| Images | Diagram with clickable pixel-positioned hotspots | Cooling System images |
Scale (estimate): ~17 shared systems, each with multiple subsystems and dozens of components, every component carrying up to four leaf pages (procedures, parts, labor, images). That puts the archive on the order of 2,000–4,000 individual HTML pages. (Exact count pending — the file-count needs the code sandbox, which is offline this session; it does not affect anything below.)
Findings are grouped and rated HIGH MED LOW. "Auto-fix" items are mechanical and safe to script during the rebuild; none touch the engineering content itself.
| Issue | Severity | Evidence | Fix |
|---|---|---|---|
| Injected promo / ad box on every content page ("LEMON … manuals through 2025") | HIGH | Identical floaty-message block + JS in every page; links point to external sites that resolve to missing-page here | Strip the block and its lemon-* JS. Auto-fix |
| Dead navigation links | HIGH | Breadcrumbs link to /Jeep/ and /Jeep/2012/ (don't exist in a single-vehicle archive); missing-page, .zip and torrent links | Rebuild breadcrumbs from the local tree; drop external/dead links. Auto-fix |
| Multi-level URL-encoding in links + mixed link styles | HIGH | Double/triple encoding (%2520, %252C); some links deep-link with #hash into the mega-menu, others hit a folder index directly | Normalize to clean relative slugs; one consistent link model. Auto-fix |
| Encoded folder names on disk | MED | Directories literally named Parts%20and%20Labor, Engine%2C%20Cooling…, %2F, %28 | Slugify folders (e.g. parts-and-labor). Auto-fix |
| Duplicate / cross-listed components | HIGH | Water Pump & Water Pump Gasket appear under both Cooling System and Engine; "Four Wheel Drive Selector Switch" and "Transfer Case Actuator" each live under 3 paths. The site's own About page admits "multiple pages … may point to the exact same content." | One canonical component page + cross-reference links. Auto-fix (with a review pass) |
| Divergent taxonomies (Repair 25 vs Parts 18) | HIGH | Two different category sets for one vehicle; Repair-only categories never appear in Parts | Unify to one system taxonomy; attach Repair + Parts + Labor under each component (see §3). Auto-fix |
| Redundant / garbled category | MED | "A L L Diagnostic Trouble Codes ( DTC )" (letter-spaced) coexists with a normal "Diagnostic Trouble Codes" | Merge into one "Diagnostic Trouble Codes (DTC)". Auto-fix |
| Uneven nesting depth | MED | Cooling System ▸ Radiator is 4 levels deep; Drive Axles ▸ Axle Shaft Assembly ▸ CV Joint Boot is 6 | Normalize to System ▸ Subsystem ▸ Component ▸ Topic. Auto-fix |
| Non-semantic markup / accessibility | MED | Header cells use <td> not <th>; steps built from 	 tab hacks + indent-N classes; image hotspots are empty pixel-positioned anchors; no alt, no landmarks, missing lang; /style.css absolute path breaks offline | Semantic HTML5, real <ol>/<th>, labeled responsive hotspots, alt text. Auto-fix |
| Mobile usability (the core brief) | HIGH | Tiny monospace; fixed footer overlaps content; ad box reflows the page; breadcrumb overflows the screen; pixel hotspots don't scale; no search | Mobile-first responsive system + search (see §4). Rebuild |
| No shared template / weight | LOW | Every page re-embeds the full header, breadcrumb, and ad inline; fold state in sessionStorage | Single template + generated pages + one search index. Rebuild |
As requested, here are both a cleaned version of the existing structure and a new task-based structure. My recommendation is to ship them together as a hybrid: the task-based layer on top, the cleaned system tree underneath, and a unified component page that ends the Repair-vs-Parts split.
Keep CHARM's engineering categories, but merge the two divergent trees into one, de-duplicate, fix names, and normalize depth.
~17 unified systems · consistent 4-level depth.
Organize around the job you're trying to do. "Repair by System" drops straight into Option A's tree.
Matches how people approach a repair; best on a phone.
The mockup (Liberty-Service-Redesign-Mockup.html) is an interactive prototype of the screens below. Open it in a browser — it's clickable, includes a dark-mode toggle for night/garage use, and pulls in the real Cooling-System diagram and Radiator-removal photos from the archive.
<ol> steps, color-coded WARNING / CAUTION / NOTE callouts, responsive figures, inline cross-reference chips.| Token | Value | Use |
|---|---|---|
| Accent | #d4691a amber | Primary actions, active state, step numbers |
| Ink / secondary | #16202c / #56627a | Body text, metadata |
| Semantic | red / orange / blue | WARNING · CAUTION · NOTE callouts |
| Radius · shadow | 12–16px · soft | Cards, list rows, tiles |
| Type | System sans stack | Replaces the original monospace |
| Theme | Light + Dark | Dark mode for low-light work |
The redesign is template-driven, so the whole archive can be regenerated by script rather than edited by hand. Recommended sequence:
index.html, classify it into one of the 7 templates, and extract clean structured data (component, system path, steps, callouts, tables, image refs, cross-links) into JSON. Output: a single normalized dataset + an inventory report.Companion file: Liberty-Service-Redesign-Mockup.html — open in any browser; best viewed on a phone or in a mobile-sized window. No content was altered in the source archive; both deliverables are new files added alongside it.