1.0.7 • Published 1 year ago

@essential-component-toolbox/my-external-links v1.0.7

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

my-external-links

Description

Web component for displaying social media icons which navigate a user to the link attached to them.

Links


Usage

To import into an HTML file:

<script type="module">
    import '@essential-component-toolbox/my-external-links/src/my-external-links.js';
</script>

To import into an existing JS module / web component:

import '@essential-component-toolbox/my-external-links/src/my-external-links.js';

HAX Component Instructions

DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:

  • Look good via DDD, HAX design system
  • Simple, easy to read code via Lit
  • Great workflow via OpenWC tooling + Vercel for sharing demos
  • Simplify contribution to the HAX ecosystem
  • Publish and distribute via npmjs.com

Install dependencies

  • npm install - installs dependencies so you can work

Commands

  • npm start - runs your web component for development, reloading on file changes
  • npm run build - builds your web component and outputs it in your dist directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
  • npm run release - this will build your code, update the version, and publish it to npm for others to use

Working with your web component

  • edit /src/my-external-links.js
  • edit your 'demo' by modifying ./index.html
  • add dependencies using npm install --save @whatever/repo or editing ./package.json directly
  • if you must reference additional non-JS files, ensure you use the new URL('./my-file.jpg', import.meta.url).href syntax so that it builds correctly
  • if you add additional .js files / web components then place them under /src/
  • to improve HAX wiring edit file in /lib/my-external-links.haxProperties.json

Recommended setup

  • Load VS code in 1 window to project root
  • Browser open
  • Right click -> Inspect and open the Console to see error output

Recommended Integrated Development Environment (IDE)

Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin


Credits

Component created by Zach Dodson under the name Essential Component Toolbox.

A brighter future dreamed and developed by the Penn State HAXTheWeb initative.

Never. Stop. Innovating.

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.1

1 year ago