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

@digital-blueprint/checkin-app

v2.1.4

Published

[GitHub Repository](https://github.com/digital-blueprint/checkin-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/checkin-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/checkin-app/) | [Checkin Bundle](https://github

Downloads

392

Readme

Check-in Application

GitHub Repository | npmjs package | Unpkg CDN | Checkin Bundle | Project documentation

Build and Test

A simple location based contact tracing system. With the possibilities to check in yourself or a guest manually or with an in-build QR-Code scanner.

Prerequisites

Local development

# get the source
git clone [email protected]:digital-blueprint/checkin-app.git
cd checkin-app
git submodule update --init

# install dependencies
npm install

# constantly build dist/bundle.js and run a local web-server on port 8001 
npm run watch

# constantly build dist/bundle.js and run a local web-server on port 8001 using a custom assets directory assets_custom/
npm run watch-custom

# run tests
npm test

Jump tohttps://localhost:8001, so you should get a Single Sign On login page.

To enable building with custom assets, you need to provide your custom assets in the directory assets_custom/checkin-app/assets/. If you want to, you can also change this path in the file rollup.config.js. For more information, please visit the dbp handbook page on custom assets.

Using this app as pre-built package

Install app

If you want to install the dbp check-in app in a new folder check-in-app with a path prefix / you can call:

npx @digital-blueprint/cli install-app check-in check-in-app /

Warning: There may be issues when you run these commands as root user, best use a non-root user, like www-data. To do this you can for example open a shell with runuser -u www-data -- bash.

Afterwards you can point your Apache web-server to check-in-app/public.

Make sure you are allowing .htaccess files in your Apache configuration.

Also make sure to add all of your resources you are using (like your API and Keycloak servers) to the Content-Security-Policy in your check-in-app/public/.htaccess, so the browser allows access to those sites.

You can also use this app directly from the Unpkg CDN for example like this: dbp-check-in/index.html

Note that you will need a Keycloak server along with a client id for the domain you are running this html on.

Update app

If you want to update the dbp check-in app in the current folder you can call:

npx @digital-blueprint/cli update-app check-in

Warning: There may be issues when you run these commands as root user, best use a non-root user, like www-data. To do this you can for example open a shell with runuser -u www-data -- bash.

Activities

This app has the following activities:

  • dbp-check-in-request
  • dbp-check-out-request
  • dbp-guest-check-in
  • dbp-report-risk

You can find the documentation of these activities in the check-in activities documentation.

Adapt app

Functionality

You can add multiple attributes to the <dbp-check-in> tag.

| attribute name | value | Link to description | |----------------|-------| ------------| | provider-root | Boolean | appshell | | lang | String | language-select | | entry-point-url | String | appshell | | keycloak-config | Object | appshell | | base-path | String | appshell | | src | String | appshell | | no-welcome-page | Boolean | appshell | html-overrides | String | common | | themes | Array | theme-switcher | | darkModeThemeOverride | String | theme-switcher | | search-hash-string | String | check-in activities

Mandatory attributes

If you are not using the provider-root attribute to "terminate" all provider attributes you need to manually add these attributes so that the topic will work properly:

<dbp-check-in
    auth
    requested-login-status
    analytics-event
    ...
>
</dbp-check-in>

So a working example would be:

<dbp-check-in
    provider-root
    lang="de"
    entry-point-url="http://your.api"
    search-hash-string="unicheckin"
    html-overrides="global-override"
    src="/path/dbp-check-in.topic.metadata.json"
    base-path="/"
    keycloak-config='{"url": "https://keyclock.url/auth", "realm": "your-realm", "clientId": "your-client-id", "silentCheckSsoRedirectUri": "/path/silent-check-sso.html"}'
><dbp-loading-spinner></dbp-loading-spinner>
</dbp-check-in>

See AppShell Attributes for a list of more attributes.

See Overriding slots in nested web components for information about how to override slots.

Design

For frontend design customizations, such as logo, colors, font, favicon, and more, take a look at the theming documentation.

"dbp-check-in" slots

These are common slots for the app-shell. You can find the documentation of these slots in the app-shell documentation. For the app specific slots take a look at the check-in activities.