landing-gear

v0.3.3

Published

4 years ago

A collection of lit elements that mirror the wickedblocks project (https://blocks.wickedtemplates.com)

0High
0Medium
0Low

vados

Landing Gear

Landing Gear is a set of Lit-powered components that builds on the work done by wickedtemplates to create wickedblocks.

It was originally called "Wicked Landing Gear", but the "Wicked" was removed to avoid confusion as this code is not created or maintained by wickedtemplates.

Getting started

1. Use a smart bundler like Parcel

2. Install `landing-gear` via /YARN

$ yarn add landing-gear

If you use npm then this would be:

$ npm install landing-gear

3. Add HTML that uses one or more component imports

Use HTML like the folloing:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Your Site</title>
    <script type="module" src="../node_modules/landing-gear/dist/lg-alert/index.js"></script>
  </head>
  <body>
    <h1>Your Site</h1>
    <h2>A subtitle for your site</h2>

    <!-- Basic alert, powered by landing-gear -->
    <lg-alert class="alert"
              variant="info"
              title="Basic Alert"
              description="Important alert text that needs to be shown"></lg-alert>

  </body>
</html>

Build your project

Build your project however it should be built depending on which bundler you used. If you used parcel this is as simple as:

$ parcel

Contributing

Adding a new component

To add a new component:

yarn create @vitejs/app new-component --template lit-element-ts
Copy over a Makefile from an existing component
Update the package.json with the project name, and appropriate script tasks and devDependencies to match other projects
Update package.json for use with Vite library mode

Alternatively you can also also copy an existing existing library, and make the appropriate replacements

Viewing an existing component's demo page

To view an existing component's demo page, run the following:

$ COMPONENT=lg-content make serve-component-demo

TODO

Here are some things that should really get done at some point:

[ ] Setup Parcel aliasing to support separate Lit static build from components (single lit import, multiple components, rather than every component having an instance of lit inside)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme