npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sitenna/site-navigator

v1.2.3

Published

Web component used to embed Sitenna's site navigator map on client websites.

Downloads

842

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

oscar-onyalioscar-onyalibriansextonbriansextonemmetdelaneyemmetdelaney

Keywords

Readme

Sitenna Site Navigator Component

This is a web component built using StencilJS. It is a component that allows to embedded a Sitenna map on your website and display your sites on it. It will also allow people to make enquiries about your sites and send a message through the Sitenna Platform.

Using this component

Script tag

  • Put a script tag similar to this <script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest/sitenna-site-navigator.esm.js'></script> in the head of your index.html
  • Then you can use the element anywhere on your website, for example in your template, JSX, html etc.

Html tag

  • Once the script has been loaded for the component, it can be used as a html tag. For example
<html>
  <head>
    <script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest'></script>
  </head>
  <body>
    <sitenna-site-navigator></sitenna-site-navigator>
  </body>
</html>
  • if you wish to use a fixed version of the component, you can replace @latest with the version number. For example https://unpkg.com/@sitenna/site-navigator@@1.0.0. However it is recommended to use @latest as this will ensure that you are always using the latest version of the component.

Passing properties to the component

  • The component will need to be passed properties in order for it to work properly.

  • The list of properties that can be passed to the component are as follows:

    • api-key: This is the api key that is used to authenticate the user. This is the only required property in order for the component to work.
    • api-endpoint: This is the api endpoint that is used to make the api calls. This is not required and will default to api.sitenna.com. Only change this value if you are instructed to do so.
    • app-url: This is the url of the app that is used to login. This is not required and will default to app.sitenna.com. Only change this value if you are instructed to do so.
    • latitude: This is the latitude of the center of the map. This is not required and will default to 40.7. Change this to center the map on a different location.
    • longitude: This is the longitude of the center of the map. This is not required and will default to -74.5. Change this to center the map on a different location.
    • zoom: This is the zoom level of the map. This is not required and will default to 9. Change this to zoom in or out of the map.
    • max-zoom: This is the maximum zoom level of the map. This is not required and will default to 20. Change this to zoom in or out of the map.
    • min-zoom: This is the minimum zoom level of the map. This is not required and will default to 3. Change this to zoom in or out of the map.

  • An example of how to pass properties to the component is as follows:

<html>
  <head>
    <script type='module' src='https://unpkg.com/@sitenna/site-navigator@latest'></script>
  </head>
  <body>
    <sitenna-site-navigator
      api-key="YOUR_API_KEY"
      api-endpoint="api.sitenna.com"
      app-url="app.sitenna.com"
      latitude="40.7"
      longitude="-74.5"
      zoom="9"
      max-zoom="20"
      min-zoom="3"
    ></sitenna-site-navigator>
  </body>
</html>