Install elements into your site

The catalog holds display elements — homepage sections and page blocks that

are not part of the original JPROT library. Every one is a plain, self-contained

JavaScript component that your site loads the moment you drop it into the right

folder.

The one command

From your site folder (where jprot.config.js lives), run:

Copyjprot add <ComponentName>

For example:

Copyjprot add SplitHero

What happens:

1. jprot asks the catalog for the component named SplitHero.
2. It downloads the self-contained component file.
3. It puts it in theme/components/SplitHero.js.
4. Done — the next page refresh picks it up automatically. No build step.

Copy✔ Installed SplitHero → theme/components/SplitHero.js

Then use it like any built-in component

As a homepage section — add an entry to the sections: list in

jprot.config.js:

Copysections: [
  { component: 'SplitHero', title: 'SplitHero' },
]

Or inside any page, on its own line:

Copy:::SplitHero title="Ship faster" subtitle="A reusable block for every campaign." image="https://picsum.photos/seed/a/520/380"

Each element's catalog page shows the exact props it accepts and a live example

you can copy.

Where does jprot find the catalog?

The catalog URL comes from one of these places, in order:

Priority	Source	Example
1	--from <url> flag	jprot add SplitHero --from https://YOUR-ACCOUNT.github.io/JPROT-catalog
2	catalogUrl key in your jprot.config.js	catalogUrl: 'https://YOUR-ACCOUNT.github.io/JPROT-catalog',
3	built-in default	set by your JPROT distribution

Setting catalogUrl once means jprot add <Name> just works from then on.

Browsing and searching

• Search without installing: jprot search lists everything; jprot search hero filters by any word.
• Preview first: every element has its own live-preview page here in the catalog.

Removing an element

An element is just a file — delete it and it's gone:

Copyrm theme/components/SplitHero.js

For catalog authors

Every element is a single JavaScript module exporting a render function. The

catalog rebuilds itself from the files in src/components/ (see

scripts/generate.mjs in this repo) — add a file with a @category, @tags,

@usage, and @props header and re-run npm run build.

Browse all 65 elements