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

@seatgeek/backstage-plugin-awards

v2.0.1

Published

This plugin offers a management system for awards that can be created and given to recipients in your Backstage deployment, and then displayed onto their Entity profile pages.

Downloads

297

Readme

@seatgeek/backstage-plugin-awards

This plugin offers a management system for awards that can be created and given to recipients in your Backstage deployment, and then displayed onto their Entity profile pages.

npm latest version

The plugin offers a set of Page Components and an Information card to achieve this. It also requires the installation of its dependency @seatgeek/backstage-plugin-awards-backend.

Both the backend and the frontend rely on Backstage authentication in order to enforce ownership of awards. Please follow the documentation to enable authentication before attempting to use this plugin!

Installation

Install the package

Install the @seatgeek/backstage-plugin-awards package in your frontend app package:

# From your Backstage root directory
yarn add --cwd packages/app @seatgeek/backstage-plugin-awards

Add routes for the plugin management pages

Open the file packages/app/src/App.tsx in your Backstage deployment and add the following lines:

// other imports
import { AwardsPage } from '@seatgeek/backstage-plugin-awards';

// Add the routes for the plugin pages before the <FlatRoutes> block is closed.
<FlatRoutes>
  // Many routes
  <Route path="/awards" element={<AwardsPage />} />
</FlatRoutes>;

// Rest of the file

Add the Entity Info Card for Awards

Inside the file packages/app/src/components/catalog/EntityPage.tsx file in your Backstage deployment, add the following items:

import { UserAwardsCard } from '@seatgeek/backstage-plugin-awards';

// Look for the const userPage and add the card to the Grid
const userPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        <Grid item xs={12} md={6}>
          <EntityUserProfileCard variant="gridItem" />
        </Grid>
        <Grid item xs={12} md={6}>
          <EntityOwnershipCard
            variant="gridItem"
            entityFilterKind={OWNERSHIP_KINDS}
          />
        </Grid>
        {/* Add this here - BEGIN */}
        <Grid item xs={12} md={6}>
          <UserAwardsCard />
        </Grid>
        {/* Add this here - END */}
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);

Add a sidebar entry (recommended)

In the file packages/app/src/components/Root/Root.tsx in your Backstage deployment, add the following code:

// Many imports
import EmojiEventsIcon from '@material-ui/icons/EmojiEvents';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <NewAnnouncementBanner max={3} />
    <Sidebar>
      <SidebarLogo />
      <SidebarSearch />
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create" />
        <SidebarItem icon={DoneAllIcon} to="soundcheck" text="Soundcheck" />
        <SidebarItem icon={AnnouncementIcon} to="/announcements" text="Announcements" />
        {/* End global nav */}
        {/* Add this here - BEGIN */}
        <SidebarItem icon={EmojiEventsIcon} to="awards" text="Awards" />
        <SidebarDivider />
        {/* Add this here - END */}
        {/* Other imports... */}

Developing this plugin

Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running yarn start in the root directory, and then navigating to /awards.

You can also serve the plugin in isolation by running yarn start in the plugin directory. This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. It is only meant for local development, and the setup for it can be found inside the /dev directory.