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

@k3tech/backstage-plugin-frontend-addons

v0.1.13

Published

With this plugin will able to filter and extend components capabilities with *Addons* concept.

Downloads

8

Readme

Entity Addons

With this plugin will able to filter and extend components capabilities with Addons concept.

alt text

Getting started

Config plugin

Update <backstage-home>/packages/app/src/components/catalog/EntityPage.tsx:

...
import { EntityAddonsContent } from '@k3tech/backstage-plugin-frontend-addons';
...
const defaultEntityPage = (
  <EntityLayout>
    ...
    <EntityLayout.Route path="/addons" title="Addons">
      <EntityAddonsContent variant="gridItem" />
    </EntityLayout.Route>
    
  </EntityLayout>
);

Config addons template bindings

Update an catalog-info.yaml:

...
metadata:
  annotations:
    backstage.io/template-origin: template:default/my-template-origin-name

Create new template like this:

apiVersion: scaffolder.backstage.io/v1beta3
kind: Template
metadata:
  name: my-template-origin-name-addon
  title: My Addon
  description: My Addon
  annotations:
    backstage.io/addon-of: template:default/my-template-origin-name
spec:
  type: Service
  parameters:
    - title: Component
      required:
        - component_ref
        - domain_name
      properties:
        component_ref:
          title: Component
          type: string
          description: Filter only compatible components
          ui:field: EntityPicker
          ui:options:
            defaultNamespace: z # force to aways bind full entity ref {kind}:{namespace}/{name}
            allowedKinds:
              - Component
            catalogFilter:
              - kind: ['Component']
                'metadata.annotations.backstage.io/template-origin': 'template:default/my-template-origin-name'

        domain_name:
          title: Domain Name
          type: string
          ui:field: ChicInput
          description: |
            <b>{{domain_name | title | replace(r/[ _,]+/, '')}}</b>.cs <br/>
            Implementations/<b>{{domain_name  | title | replace(r/[ _,]+/, '')}}</b>Service.cs <br/>
            I<b>{{domain_name | title | replace(r/[ _,]+/, '')}}</b>Service.cs <br/>

  steps:
    - id: infos
      name: Carregando informações
      action: catalog:fetch
      input:
        entityRef: ${{ parameters.component_ref }}

    # see 
    # https://github.com/kode3tech/k3t-backstage-plugin-scaffolder-backend-module-plus/blob/HEAD/exemples.md#varsplus
    - id: vars
      name: Memo Vars
      action: vars:plus
      input:
        domain_name: ${{ parameters.domain_name }}
        pascal_name: ${{ parameters.domain_name | title | replace(r/[ _,]+/, '') }}
        repoUrl: ${{ steps.infos.output.entity.metadata.annotations["backstage.io/repo-url"] }}
        
    - id: debug:template:fields
      action: debug:log
      name: Debug Template Fields
      input: 
        vars: ${{ steps.vars.output.result }}

    # see
    # https://github.com/kode3tech/k3t-backstage-plugin-scaffolder-backend-module-azure-devops/blob/main/exemples.md#gitcloneazure
    - id: source
      name: 'Fetch Source'
      action: git:clone:azure
      input:
        defaultBranch: main
        repoUrl: ${{ steps.vars.output.result.repoUrl }}

    - id: fetch-template
      name: Fetch Template
      action: fetch:template
      input:
        url: ./skeleton
        targetPath: ./
        replace: true
        values: ${{ steps.vars.output.result }}

    # see
    # https://github.com/kode3tech/k3t-backstage-plugin-scaffolder-backend-module-azure-devops/blob/main/exemples.md#gitcommitazure
    - id: commit
      name: 'Commit and Push changes'
      action: git:commit:azure
      input:
        createBranch: false
        defaultBranch: "feat/domain-${{ steps['vars'].output.result.pascal_name }}"
        commitMessage: "feat: add domain ${{ steps['vars'].output.result.pascal_name }}"
        gitAuthorName: 'Backstage'


  output:
    links:
      - title: Repository
        url: ${{ steps.vars.output.result.repoUrl }}

      - title: Open in catalog
        icon: catalog
        entityRef: ${{ parameters.component_ref }}