Awesome

Github Flexi Card

Home Assistant card displaying data from Github integration

Overview

The aim of this card is to show all the data provided by github integration. You can specify what kind of data is shown and where. Entity rows are matching the size of other standard entity rows from other native cards (e.g. height of the row, icon/text margins, font sizes, etc).

This code works as both: card and enrity-row

Note: If you plan to use it only as entity row you can consider using the other simpler/smaller code written by benct: github-entity-row

Configuration

Note: Please do not change the original entity IDs otherwise card won't be able to find related entities.

Default configuration

Please see the following file: default-config.ts

Card

+ Entity Properties - applied to all entities

Entity

+ Entity Properties

Entity Properties

Attribute

Attribute names

When you enable Github Integration it creates couple entities for every repo. Each entity for single repo has a common prefix e.g. "sensor.maxwroc_github_flexi_card_". The last part of the entity name is (what I call here) repo attribute e.g. for "sensor.maxwroc_github_flexi_card_pull_requests" entity the attribute name is "pull_requests".

I suggest to enable "Diagnostic" entities for your repo(s) on the devices page.

It is possible to access entity attributes by adding an underscore with the name of the attribute. E.g. if you want to get the tag attribute from *_latest_release entity you can use latest_release_tag as the attribute name in the configuration.

Special repo attributes:

Sort options

KeywordString

KeywordString is a string which can contain special keywords. Keywords are the repo attribute names surrounded by curly brackets. Keywords in the string will be replaced by attribute values.

E.g. "Card version {latest_release_tag}" becomes "Card version v1.5.0"

Converting keyword value

Keywords support simple functions to convert the values

Configuration examples

Card

type: 'custom:github-flexi-card'
title: Github projects
entities:
  - entity: sensor.maxwroc_battery_state_card_latest_release
    secondary_info: 'Released {latest_release_tag}'
    url: "{latest_release_url}" # url taken from attribute
    attributes:
      - name: stars
        url: true # default url to /stargazers
      - name: issues
        url: "https://my.custom.url/path"
      - name: forks
      - name: pull_requests
        url: "{latest_pull_request_url}" # url taken from attribute
  - entity: sensor.hideseek_mod
    url: true # default url - repo homepage
    attributes:
      - views
      - stars
      - forks
  - entity: sensor.urleditorpro
    name: 'Url Editor Pro (v{latest_release_tag})'
    secondary_info: '{latest_pull_request}'
    attributes:
      - views
      - stars
      - issues

Entity

Note: different type has to be used custom:github-entity

type: entities
title: Displayed as entity
show_header_toggle: false
entities:
  - sensor.home_assistant_v2_db
  - type: 'custom:github-entity'
    entity: sensor.battery_state_card
    secondary_info: 'Released {latest_release_tag}'
    url: true
    attribute_urls: true
    attributes:
      - stars
      - issues
      - forks
      - pull_requests
      - watchers
  - sensor.hassio_online
  - sensor.last_boot
  - sensor.processor_use

Card-level entity properties

Card-level entity properties are useful when you want to have same settings for all of the entities.

type: 'custom:github-flexi-card'
title: Card-level entity properties
secondary_info: 'Released {latest_release_tag}'
url: true
attribute_urls: true
attributes:
  - views
  - stars
  - issues
  - watchers
  - forks
  - pull_requests
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.urleditorpro

Labels instead of icons

type: 'custom:github-flexi-card'
title: Labels instead of icons
url: true
attribute_urls: true
attributes:
  - name: views
    label: Views
  - name: stars
    label: Stars
  - name: issues
    label: Issues
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.urleditorpro

Compact view (disabling)

type: 'custom:github-flexi-card'
title: Big icons
url: true
attribute_urls: true
attributes:
  - watchers
  - stars
entities:
  - sensor.battery_state_card
  - entity: sensor.hideseek_mod
    compact_view: false
  - sensor.urleditorpro

Sorting

type: 'custom:github-flexi-card'
title: Sort by starts and forks (asc)
secondary_info: '{latest_release_tag}'
url: true
attribute_urls: true
attributes:
  - watchers
  - stars
  - issues
  - forks
sort:
  - by: stars
  - by: forks
    ascending: true
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.github_flexi_card
  - sensor.urleditorpro
  - entity: sensor.home_assistant_config
    secondary_info: null

How to install?

Install via HACS. Look for the card in Frontend plugins collection.

If you have a YAML mode remember to add resource entry for the js bundle in ui-lovelace.yaml:

resources:
  - url: /hacsfiles/github-flexi-card/github-flexi-card.js
    type: module

Automation

If you want to receive notifications whenever something changes with the repo you can use my automation as an example: https://github.com/maxwroc/homeassistant/blob/master/configuration/packages/github.yaml

Development

Card created based on lovelace-card-boilerplate

npm install
npm run build

For new features create your branch based on vNext and for fixes based on master.

Do you like the card?

Don't "buy me a coffee", just star it on github! It will be enough to let me know that you like it and definitely will give me motivation boost to continue working on it and other cards.

My other HA related repos

battery-state-card | homeassistant-config | lovelace-card-boilerplate