tools: a Tech Tools section, starting with codes on label stock

A place for the small utilities a technician reaches for at a bench. The
plugin owns no API and no tables: every tool runs entirely in the browser,
so an air-gapped site gets them for free and a bad network cannot break
them. Adding the next tool is a view, a route, and one entry in tools.js.

First tool is a barcode/QR generator. Content is typed text, a URL, or a
CSV (content,label,copies - quoted fields and an optional header both
handled), so a batch of a few hundred is one paste. Label stock is
adjustable in inches with five presets, and the code renders to an SVG
data URI rather than a PNG: a bitmap gets downscaled to label size and
smears the module edges a scanner reads, where SVG rasterizes at the
printer's resolution with hard edges.

It also carries the dot-grid rule that is easy to get wrong by eye. A
thermal head cannot render a fraction of a dot, so a code sized off the
grid gets uneven modules; pick a DPI and the page says what the current
size lands on and what to use instead. The quiet zone is blank label
rather than white baked into the code, so it can be tuned - and it applies
to CODE128 too, which needs clear space at each end and was letting bars
run into the caption.

Tech Tools is the first bundled plugin that owns no schema, which two
guards did not model: it belongs in the universal installer profile, and
upgrade-all reports it 'no-migrations' where every plugin was assumed to
report 'ok'. The migration test now asserts that status explicitly for
schema-less plugins, so a table-owning plugin whose chain went missing
still fails.
This commit is contained in:
cproudlock
2026-08-12 11:43:48 -04:00
parent 4d807ccb4b
commit f66763e6df
11 changed files with 1011 additions and 4 deletions

View File

@@ -0,0 +1,67 @@
// The Tech Tools catalog.
//
// This is the ONLY place a tool has to be declared. Adding one is: write the
// view, add a route in routes.js, add an entry here. The index page groups by
// category and searches over name + description + keywords.
//
// Fields:
// id - stable slug, also the key the index uses
// name - card title
// description - one line, says what it does, not how
// category - group heading on the index
// route - path to open
// standalone - true when the route lives OUTSIDE AppLayout (print pages),
// so the index opens it as a normal link rather than a
// router-link and the user keeps this tab
// keywords - extra search terms someone might type instead of the name
export const TOOLS = [
{
id: 'code-generator',
name: 'Barcode / QR Generator',
description: 'Make QR or CODE128 labels from typed text, a URL, or a CSV, sized for your label stock.',
category: 'labels',
route: '/tools/codes',
standalone: true,
keywords: ['qr', 'barcode', 'code128', 'label', 'zebra', 'sticker', 'csv', 'print'],
},
]
export const CATEGORY_LABELS = {
labels: 'Labels & Printing',
convert: 'Conversion',
network: 'Network',
}
export function categoryLabel(category) {
return CATEGORY_LABELS[category] || category
}
// Tools matching a search string, or all of them when the box is empty.
export function searchTools(query) {
const needle = (query || '').trim().toLowerCase()
if (!needle) return TOOLS
return TOOLS.filter(tool => {
const haystack = [tool.name, tool.description, ...(tool.keywords || [])]
.join(' ')
.toLowerCase()
return haystack.includes(needle)
})
}
// Tools grouped for the index, categories in CATEGORY_LABELS order so the
// page does not reshuffle as tools are added.
export function groupTools(query) {
const matched = searchTools(query)
const order = Object.keys(CATEGORY_LABELS)
const seen = [...new Set(matched.map(tool => tool.category))]
seen.sort((a, b) => {
const ai = order.indexOf(a)
const bi = order.indexOf(b)
return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
})
return seen.map(category => ({
category,
label: categoryLabel(category),
tools: matched.filter(tool => tool.category === category),
}))
}