Repository navigation
feat: replace the theme and the sample with a titanium fastener catalogue - #4
Merged
Merged
Conversation
…ogue The theme proved the contracts with one product and three pages. It is now a complete site, ported from the React design the owner supplied: a home page with a specification finder, product pages built around a size table, collections, industry pages, case studies, questions, an engineering reference and plain pages, in English, German, French and Spanish. - A product is one page with its sizes on it. `facets` are the columns of the finder and `sizes` its SKUs. Three kinds are new: `case`, `faq`, `tool`. - Every sentence that belongs to the site is a theme option with a value per language in site.json. The theme's language packs hold only its own words. - Fonts are served by the site, with their licences and sources beside them. - No client JavaScript: the finder is the whole table, and the calculators are a page of formulas, constants and tables. - 31 bundles in four languages replace the ball valve sample, with one seeded variant for each SKU a product page lists. The tests render every layout twice, once with everything set and once for a site that has filled in almost nothing, and hold the sample together: links, references, attributes, SKUs and settings, in every language. The smoke run publishes the real sample and follows every header and footer link.
The README's examples were still a ball valve, its setup steps asked for a token that cannot upload the sample's images, and nothing said that the contact pages need the inquiry plugin switched on before the first publish. The design gains a section on what the theme changed in it: a product is one page with its sizes, three new kinds, the site's copy as options per language, and bundled fonts in place of system ones. The plan records how the port was verified, what an independent review found in it, and what is left for the owner, for Mallok and for tooling.
The template this theme was ported from let a buyer narrow the finder by head type, thread, material and length. The port left the finder as the whole table, which is right without a script and slow to read with one. finder.js adds a list for each attribute, one for the sizes and a search box above the table on the home page and in the catalogue, and hides the rows that do not match. It is the theme's first script, on terms that hold for any later one: - The page is whole without it. The form is rendered by the server, hidden, in the page's language; the script fills it and shows it. - It is declared in theme.json with its exact size and loaded only by the two layouts that have the table, and only when the table is there. - It makes no request and stores nothing. The logic is tested under node:vm, the markup inside workerd, and the declaration against the templates and the file. What the script does to a page was checked in a browser by hand.
The template's three calculators were ported as a page of formulas, constants and tables: complete, and not something a reader can put their own numbers into. calculators.js is the second of the two scripts the owner approved, on the terms the first set. A tool page asks for the calculators with `calculators: fasteners` in its front matter, and the sample's reference page does in all four languages. The forms are rendered by the server, hidden, with their labels from the language pack and their numbers in value attributes; the script computes, formats in the page's language and shows them. It is loaded by no other page, makes no request and stores nothing. The page under the forms is what makes the script checkable. A test reads that page and compares it with the script: every constant, the limits of every field, and every cell of every table. The fields are found by a query and not through form.elements: a field named "length" is not what that list returns under the name, which is why the first run in a browser computed nothing. Three tests now hold the names in the forms and in the script together.
Seeing what Nundar is took a dozen steps: local secrets, an administrator, two plugins, an API token with three scopes, a publish and a seed, in that order and before opening the site, because a page opened early stays in the local cache for an hour. Each step is right for a site that will be kept, and together they are a long way round for someone who wants a look. `npm run preview` does all of it against a throwaway database and stays up: the sample catalogue in four languages, the admin, and a login printed in the terminal. Stopping it removes the database. The set-up it needs is the one the end-to-end smoke run already had, so that moved into scripts/lib/local-shop.mjs and both use it: what the preview shows is what the smoke run checks. `preview -- --check` brings the shop up, confirms the pages carry the site's own settings and that the printed login works, and takes it down; CI runs it. The README leads with the command and keeps the manual steps for a site that keeps its data, with the two things that go wrong there said plainly: a missing setup key, and pages cached from before the site was filled.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this is
Phase 1A left the commerce theme with one product, one application note and one collection: enough to prove the contracts with Mallok, not enough to show what a shop on Nundar looks like. This replaces the theme and the whole sample with a complete site — a titanium fastener supplier's catalogue — ported from a React design supplied by the owner.
The shop plugin is not touched.
The five commits
feat: replace the theme and the sample…docs: describe the titanium fastener theme…feat: filter the specification finder in the browserfeat: add the fastener calculators…feat: add a preview command…npm run preview: a filled local shop on a throwaway database, in one commandEach of the two scripts is its own commit so that it can be left out; the pages are whole without them.
What changed in the model
facetsare the columns of the specification finder;sizesmaps each SKU to what distinguishes it.case,faq,tool.applicationis unchanged and the sample serves it at/industries.site.json. The theme's language packs hold only its own vocabulary.How to look at it
About a minute later it prints the shop's address, the admin's, and a login. Nothing is kept: stopping it removes the database.
How it was verified
npm run lint,npm run typecheck,npm run buildnpm run test:projectnpm run test:shopnpm run smoke,npm run smoke:shop,npm run preview -- --checkThe calculators' script is held, by a test, to every constant and every table cell the reference page prints.
Not verified
For the owner to decide
What still waits for Mallok
Prices and availability on the pages and in the finder, and the cart page that the design's quote list becomes. Five smaller behaviours found during the port are written up for the Mallok side; each is handled here inside Mallok's documented contracts, and the design's §15 lists them.