Initial import
This commit is contained in:
commit
dd314435bd
40 changed files with 1175 additions and 0 deletions
244
README.md
Normal file
244
README.md
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
# 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/".
|
||||
Loading…
Add table
Add a link
Reference in a new issue