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

@startinblox/component-notifications

v1.0.1

Published

Notifications component for startinblox

Downloads

27

Readme

Solid Notifications

solid-notifications is a component that displays all elements of an inbox, i.e. a notification container.

When the user clicks one of the notifications, a 'navigate' event is triggered with the object of the notification given as the resource parameter.

The component listens to 'read' events. These events details contain a resource. When such an event is triggered, it sets all notifications with that resource as read, and saves these notifications back to the container. To send an event, you can dispatch it like this:

window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))

Usage

In your template, insert the following line where you want to display the component.

<solid-notifications bind-user nested-field="inbox"></solid-notifications>

If you want to use the bind-user attribute, do not forget to use sib-oidc for authentication.

Parameters

| Name | Default | Description | | --------------- | ---------------------- | :----------------------------------------------------------- | | data-src | undefined | URL of the inbox to display. | | nested-field | "" | String added at the end of the data source URL. Useful if you are using bind-user to get the current user URL. | | extra-context | {} | Context to add to let the router know where to navigate after a click on a notification. | | date-format | "DD/MM/YYYY - kk:mm" | Format of the date displayed in the notifications box. For more informations about available formats, look at the moment.js doc. |

Routing

To redirect to specific pages when you click on a notification, you should:

  1. Choose a route to be the default view for a resource type. To do this, add the attribute rdf-type to a solid-route (ex: <solid-route name="project" rdf-type="doap:project"></solid-route>)
  2. Add an extra-context to the sib-conversation component, so it can understands the rdf_type you used before.

For more informations, please see the example at index.html

Template

You can customize the template of a notification based on its object type. To do this, use the solid-notifications-template component, and set the data-rdf-type attribute:

<solid-notifications-template
  data-rdf-type="hd:circle"
>
  <template>
    <!-- your template -->
  </template>
</solid-notifications-template>

For each notification with an object of type hd:circle, this template will be used.

The following variables are available in your template:

  • summary: summary of the notification
  • date: formatted date of the notification
  • object: Proxy of the object of the notification (needs await keyword to access its properties)
  • author: Proxy of the author of the notification (needs await keyword to access its properties)
  • unread: boolean which indicates if the notification is unread/read

For example, your template can look like this:

<solid-notifications-template
  data-rdf-type="hd:circle"
>
  <template>
    <div class="solid-notification__avatar">
      <img src="${await author['account.picture']}">
    </div>
    <div class="solid-notification__content">
      <div class="solid-notification__title">${await author.name} in the circle #${await object.name}</div>
      <p class="solid-notification__summary">${summary}</p>
      <div class="solid-notification__date">${date}</div>
    </div>
  </template>
</solid-notifications-template>

The default notification template is:

<div class="solid-notification__avatar">
  <img src="[author.account.picture]">
</div>
<div class="solid-notification__content">
  <solid-display class="solid-notification__title">[notification.object.name]</solid-display>
  <p class="solid-notification__summary">[notification.summary]</p>
  <div class="solid-notification__date">[notification.date]</div>
</div>

Design

To customize your component, you can set the css variable --solid-notifications-theme anywhere in your stylesheet to the color you want. For example:

:root{
  --solid-notifications-theme: #ffd759;
}

Solid Badge

solid-badge is a component that displays the number of unread notifications in the inbox of the logged in user related to a resource or a container.

As it uses the bind-user, you have to make sure to include a valid sib-auth configuration.

Usage

In your template, insert the following line where you want to display the component.

<solid-badge data-src="http://server/resourceId"></solid-badge>

Parameters

| Name | Default | Description | | ----------- | ----------- | :----------------------------------------------------------- | | data-src | undefined | URL of the resource or container of which you want to get the unread count. | | data-type | '' | Type of the notifications of which you want to get the unread count. | | data-rdf-type | '' | RDF type of the notification object of which you want to get the unread count. | | nested-field | "" | String added at the end of the data source URL. Useful if you are using bind-resource to get the current displayed resource. |

You can combine the data-src, data-type and data-rdf-type attributes to filter a specific kind of notification. For example, this will count the unread notification of the circle-1, for user additions:

<solid-badge data-src="http://server/circle/1" data-type="New User"></solid-badge>

Design

To customize your component, you can set the css variable --solid-badge-theme anywhere in your stylesheet to the color you want. For example:

:root{
  --solid-badge-theme: #ffd759;
}