MEDxxx-Website

The website template for MEDomicsLab apps.

Make your website

Required Node.js 20+.

1. Run it: npm ci, then npm run dev (localhost:5176).
2. Name your app in src/data/site.json: name, version, logos, links, menu and footer. See App settings.
3. Write the seven sections, one JSON file each, in src/data/sections/. See The page.
4. Add your screenshots and logos to assets/, then npm run assets. See Images.
5. Check and build: npm run check, then npm run build, and deploy dist/.

You only edit site.json and sections/:

src/data/
├── site.json   your app: name, links, menu, footer, SEO
├── sections/   the seven sections of the page
└── _shared/    the MEDomicsLab look, interface words and schemas: leave as is

The page

Seven fixed sections, in this order.

Section	File	What it shows
1. Hero	hero.json	Title, buttons, screenshots and partner logos
2. Discover	discover.json	An introduction video beside a short list
3. Paper	paper.json	Your publications in tabs, with their PDFs
4. Features	features.json	Screenshots that change as visitors scroll
5. Steps	steps.json	How your app works, step by step
6. Download	download.json	Installers for each system and troubleshooting
7. Learn	learn.json	Video playlists, install commands and tutorials

Every section has a title, a text and an id (its anchor, such as /#paper). All but the hero accept align, the layout of the title and its text: "split" side by side (default for discover, download and learn) or "center" stacked and centred (default for paper, features and steps). The $schema line at the top of each file links it to its rules, so VS Code and JetBrains IDEs autocomplete the fields and underline typos.

1. Hero

• title: \n starts a new line, *word* sets the italic accent.
• actions: the buttons. See Links and buttons.
• media: the main screenshot, then an optional smaller one floating over it.
• badges: up to four short labels around the screenshots.
• layout: "split" puts the text beside the screenshots, "center" above them.
• scrollExpand: true widens the screenshots while visitors scroll (large screens only).
• partners: a label and the logos, each with name, logo, optional logoDark (for dark mode) and optional href.

2. Discover

• video: a YouTube video (youtube: its id) or playlist (playlist: its id), with a title and a short caption. Use image instead for a still picture.
• items: the list beside it, each with a title, a text and an optional href or to that makes it a link.

3. Paper

papers lists your publications in tab order:

{
  "label": "Software paper",
  "title": "Paper title",
  "reference": "arXiv:0000.00000",
  "authors": "Authors",
  "venue": "Subject or journal",
  "abstract": "Abstract.",
  "blocks": [{ "title": "Datasets", "content": "3" }],
  "actions": [{ "label": "Download PDF", "href": "@paperPdf", "variant": "primary" }],
  "pdf": { "src": "@paperPdf", "name": "paper.pdf" }
}

label is the tab name. blocks are optional facts under the abstract. Leave out pdf to show text only.

4. Features

steps lists the screenshots in order. Each has a title, a text, an image (see Images) and optional links.

5. Steps

• items: each step's title and text. {count} in the section title becomes the number of steps.
• mark: the hand-drawn stroke of a step: loop, wave, line and arrow connect the step to its text; underline, circle and check draw on the word.
• scrollProgress: true walks through the steps while visitors scroll (large screens only).

6. Download

• download: a title, a release label and the installers in items, each with a label, an href, an optional file name and an optional os (windows, mac or linux). The visitor's system is highlighted.
• help: a troubleshooting title and items, each with a title, a text and optional code.

Set the version once in site.json → brand.version: every {version} follows it.

7. Learn

tracks are the columns. Each has a title, a short meta label, a text and one or more of: a video, an install command (code), tutorial items (title, text, href) and an action button.

App settings

To change	Edit
App name, version, logos and browser-tab icon	site.json → brand
URLs used in several places	site.json → links
The announcement above the menu	site.json → banner ("enabled": false hides it)
The menu, its dropdowns and the buttons beside it	site.json → nav
The footer	site.json → footer
Web address, tab titles and search description	site.json → seo

_shared/theme.json (colours, blue paper, fonts) and _shared/ui.json (interface words, 404 page) are the same for every MEDomicsLab site: change them only to change the look.

Writing text, links and buttons

Write	To get
{name}, {version}	site.json → brand.name and brand.version
**bold**, *italic*, `code`	Bold, italic and code
[label](@docsApp)	A link inside a sentence
\n	A new line

A link or button is { "label": "Get started", "href": "@docsApp" }. Write a URL once in site.json → links and use it anywhere as @name, for example @releases/installer-{version}.exe. Use to instead of href for anchors on the page, such as /#download.

Buttons also accept "variant": "primary" (solid), "secondary" (outlined, the default) or "link" (underlined), and an "icon" such as "download" or "github". The icon names are listed in common.schema.json.

Images

1. Put your files in assets/:

   • assets/brand/logo.png (black logo), logo-white.png (white logo) and icon.png (browser tab).
   • Screenshots and partner logos anywhere under assets/images/.

2. Run npm run assets. It writes WebP copies to public/, the favicons and the social image (og.png).

3. Use the new path in your JSON, with the original size:

   {
     "src": "/images/screens/viewer.webp",
     "alt": "What the screenshot shows",
     "width": 1600,
     "height": 1000
   }

Keep screenshots plain: the site adds the blue paper behind them.

Updating the UI

npm run update-ui

It copies the latest UI from the template in package.json → template.repository (code, styles, _shared/, scripts, fonts) and leaves your site.json, sections/ and images alone. Changes come staged: review them, run npm run check, then commit. npm run update-ui -- v1.2.0 pins a tag instead of main. The template cuts tags from Actions → Release (patch, minor or major), or locally with npm version minor -m "chore(release): bump version to %s" and git push --follow-tags. Keep your edits outside the paths listed in template.ui, or they are overwritten.

License

MIT.