244 lines
7.5 KiB
Markdown
244 lines
7.5 KiB
Markdown
# MakeArmy Static Dash
|
||
|
||
Ultra-fast, no-framework homepage for curating links/tools with a **strict 3-column grid**, **config-driven theming**, and **crisp icon tiles**. Works on any static host.
|
||
|
||
---
|
||
|
||
## Quick start
|
||
|
||
```bash
|
||
# put these files in a folder
|
||
index.html
|
||
styles.css
|
||
app.js
|
||
config.json
|
||
images/ma-icon.png # header logo
|
||
images/favicon.png|ico # favicon(s)
|
||
icons/*.svg|png # item icons
|
||
|
||
# serve locally (choose one)
|
||
python3 -m http.server 8080
|
||
# or
|
||
npx live-server --port=8080
|
||
|
||
Open http://localhost:8080
|
||
|
||
Press / to focus Search. Use Tab to keyboard-navigate tiles (visible focus rings).
|
||
|
||
All content/layout is driven by config.json.
|
||
|
||
File structure
|
||
|
||
/
|
||
├─ index.html # markup shell; content is injected at runtime
|
||
├─ styles.css # styles (theme via CSS variables)
|
||
├─ app.js # reads config.json, builds UI, handles grid logic
|
||
├─ config.json # your data, colors, layout, icons
|
||
├─ images/
|
||
│ ├─ ma-icon.png
|
||
│ └─ favicon.png (or .ico)
|
||
└─ icons/
|
||
├─ db-f.png
|
||
├─ privatebin.svg
|
||
└─ ... (all tile icons)
|
||
|
||
Config guide (config.json)
|
||
|
||
JSON must be valid: double-quoted keys/strings, no comments, no trailing commas.
|
||
|
||
Top level
|
||
Key Type Description Default
|
||
title string Big monospace header and <title> "Home"
|
||
subtitle string Small italic tagline under the title ""
|
||
header
|
||
Key Type Description Default
|
||
logo string (URL/path) Header square logo "/images/ma-icon.png"
|
||
background color Full-bleed header color + <meta name="theme-color"> "#101010"
|
||
searchPlaceholder string Search input placeholder "Start typing to filter"
|
||
showSearch boolean Hide/show search true
|
||
icons
|
||
|
||
Centralizes icon handling; item icons use filenames only and are prefixed by basePath.
|
||
Key Type Description Default
|
||
basePath string Prefix for all item icons (e.g., "/icons/") "" (none)
|
||
fallbackIcon string If an icon 404s, swap to this file; if empty, a built-in SVG fallback is used ""
|
||
defaultScale number Per-item default icon_scale multiplier 1
|
||
boxPercent string Icon box size inside tile (e.g., "85%") "85%"
|
||
preloadTopN number Preload up to N icons for faster first paint 16
|
||
faviconPng string PNG favicon "/images/favicon.png"
|
||
faviconIco string ICO favicon "/images/favicon.ico"
|
||
ogImage string Social preview image header.logo
|
||
typography
|
||
Key Type Description Default
|
||
sectionTitlePx number Section header font size (monospace) 22
|
||
itemLabelPx number Tile label font size (bold sans) 12
|
||
theme
|
||
|
||
Base greys, pastel accents, and hover glow tuning.
|
||
Key Type Description Default
|
||
background color Page background #202020
|
||
panel color Section surface #121212
|
||
tile color Tile surface #202020
|
||
ink color Primary text #f2f2f2
|
||
inkDim color Muted text #a9a9a9
|
||
|
||
theme.accents (used when a section’s accent is 1..4):
|
||
|
||
blue: "#3a85ff", green: "#1fc66e", red: "#ff3f5d", yellow: "#ffdb33"
|
||
|
||
theme.glow (tile hover underglow):
|
||
|
||
corePx (default 3) – thin inner highlight radius
|
||
|
||
blurPx (default 7) – small outer halo (spread)
|
||
|
||
coreAlpha (default 0.95) – inner brightness (0–1)
|
||
|
||
outerAlpha (default 0.64) – outer brightness (0–1)
|
||
|
||
layout
|
||
|
||
Strict, compact 3-across layout using a 6-track grid under the hood.
|
||
Key Type Description Default
|
||
pageMax number Content wrap width (header is full-bleed) 2400
|
||
gapSections number Space between sections (px) 14
|
||
gapItems number Space between tiles (px) 10
|
||
gridCols number Internal grid tracks per section 6
|
||
tileColspan number Default tile span 2
|
||
sectionMin number Min section width (px) 300
|
||
sectionBasis number Preferred section width (px) 320
|
||
sectionMax number Max section width (px) 340
|
||
tileHeight number Fixed tile row height (px) 62
|
||
|
||
Last-row behavior
|
||
|
||
1 leftover → tile spans all tracks (full width)
|
||
|
||
2 leftovers → each spans half width
|
||
|
||
3 or multiples of 3 → normal rows
|
||
|
||
a11y
|
||
|
||
reducedMotion (bool) – advisory; UI also respects OS prefs via prefers-reduced-motion.
|
||
|
||
focusOutline (bool) – advisory; visible focus rings are enabled.
|
||
|
||
sections
|
||
|
||
Array of section cards with a title, accent, and items.
|
||
|
||
Section fields
|
||
Key Type Description
|
||
title string Text in the colored bar
|
||
accent number | string 1..4 uses theme.accents; hex string (e.g., "#8a6cff") for custom
|
||
|
||
Item fields
|
||
Key Type Description
|
||
label string Tile title (white, not underlined)
|
||
href string Destination URL
|
||
note string Optional subtitle (currently hidden in CSS; enable if desired)
|
||
icon string Filename (e.g., "db-f.png") – combined with icons.basePath
|
||
icon_scale number Per-icon scale to offset canvas padding (e.g., 1.15)
|
||
icon_class string Extra CSS class for targeting
|
||
icon_svg string Inline raw SVG string (advanced)
|
||
target string _self or _blank
|
||
check string URL to ping with <img> for “up/down” dot (should return any image; 4.5s timeout)
|
||
Minimal example
|
||
|
||
{
|
||
"title": "MakeArmy",
|
||
"header": { "logo": "/images/ma-icon.png", "background": "#101010", "showSearch": true },
|
||
"icons": { "basePath": "/icons/", "preloadTopN": 16 },
|
||
"theme": { "background": "#202020", "panel": "#121212", "tile": "#202020" },
|
||
"layout": { "pageMax": 2400, "gridCols": 6, "tileColspan": 2, "tileHeight": 62 },
|
||
"sections": [
|
||
{
|
||
"title": "Utilities",
|
||
"accent": 1,
|
||
"items": [
|
||
{ "label": "PrivateBin", "href": "https://paste.example.com", "icon": "privatebin.svg", "target": "_blank" },
|
||
{ "label": "Images", "href": "https://img.example.com", "icon": "picsur.png", "target": "_blank" },
|
||
{ "label": "Docs", "href": "https://docs.example.com", "icon": "docs.svg" }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
|
||
Theming quickies
|
||
|
||
Pastels: nudge theme.accents.* lighter/desaturated.
|
||
|
||
Glow: adjust theme.glow.blurPx (spread) and coreAlpha/outerAlpha (intensity).
|
||
|
||
Density: tweak layout.tileHeight, gapItems, gapSections.
|
||
|
||
Text: bump typography.itemLabelPx or sectionTitlePx.
|
||
|
||
Performance tips
|
||
|
||
Prefer SVG icons; for PNG, export at 2× with transparent background.
|
||
|
||
Keep icons.preloadTopN around 8–24.
|
||
|
||
Cache /icons/ aggressively: Cache-Control: public, max-age=31536000, immutable.
|
||
|
||
Keep app.js as defer (already set in index.html).
|
||
|
||
Deploying
|
||
|
||
Any static host: NGINX, Caddy, Apache, GitHub Pages, Cloudflare Pages, Netlify, S3 + CloudFront.
|
||
|
||
Headers to consider
|
||
|
||
Correct Content-Type for SVG: image/svg+xml.
|
||
|
||
Cache icons long-term; keep config.json lightly cached while iterating.
|
||
|
||
Keyboard & A11y
|
||
|
||
/ focuses search.
|
||
|
||
Tab to navigate; tiles show visible outlines in section accent color.
|
||
|
||
Reduced motion respected via prefers-reduced-motion.
|
||
|
||
Troubleshooting
|
||
|
||
“Failed to load config.json: JSON.parse …”
|
||
|
||
JSON is strict: no comments, no trailing commas, double-quoted keys/strings only.
|
||
|
||
Icons missing
|
||
|
||
Confirm icons.basePath (e.g., "/icons/").
|
||
|
||
Hard reload (Ctrl/Cmd-Shift-R).
|
||
|
||
Try opening https://your.site/icons/foo.png directly.
|
||
|
||
Set icons.fallbackIcon (e.g., "fallback.svg").
|
||
|
||
Rows/columns odd or last row wraps
|
||
|
||
Keep layout.gridCols: 6, tileColspan: 2.
|
||
|
||
Ensure layout numbers are plain numbers (app adds px).
|
||
|
||
Tiles too tall/short
|
||
|
||
Adjust layout.tileHeight and/or typography.itemLabelPx.
|
||
|
||
Status dot always ‘down’
|
||
|
||
check must return an image (some endpoints block image hotlinking). Use a dedicated “status pixel”.
|
||
|
||
Contributing / Maintaining
|
||
|
||
Add/remove items by editing sections[*].items in config.json. Order matters.
|
||
|
||
Move objects inside the sections array to change section order.
|
||
|
||
Set section accent to 1..4 (uses theme palette) or a custom hex (e.g., "#8a6cff").
|
||
|
||
To centralize icons, keep filenames in items and set "icons.basePath": "/icons/".
|