Skip to content

Latest commit

 

History

History
72 lines (52 loc) · 1.52 KB

install.md

File metadata and controls

72 lines (52 loc) · 1.52 KB

back

🚀 Install the Puzzle Shell

You can integrate the Puzzle Shell as ESM or as a bundled version. We suggest to use the ESM version if possible.

JavaScript Modules (ESM)

You can install this package with NPM:

npm i @puzzleitc/puzzle-shell

Or Yarn:

yarn add @puzzleitc/puzzle-shell

Or PNPM:

pnpm add @puzzleitc/puzzle-shell

Then, with a bundler like Vite, you can import the package in your main JavaScript file to include all components:

import "@puzzleitc/puzzle-shell";

Or you can import specific components (only once):

import "@puzzleitc/puzzle-shell/components/Topbar.js";

Either way the components are then ready to use in your markup:

<pzsh-topbar></pzsh-topbar>

Bundled Version

Alternatively you can use a pre-bundled version of the Puzzle Shell that includes Lit as a carefree package. You can even reference the package from a NPM CDN (or self-serve it) and include it as follows:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@puzzleitc/puzzle-shell@latest/dist/bundle.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@puzzleitc/puzzle-shell@latest/dist/bundle.js"
    ></script>
  </head>

  <body>
    <pzsh-container>
      <pzsh-topbar></pzsh-topbar>
      <main></main>
      <pzsh-footer></pzsh-footer>
    </pzsh-container>
  </body>
</html>