microdash/README.md

# 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/".