https://github.com/karesztrk/astro-baseline-status

Astro component to display web platform baseline status
https://github.com/karesztrk/astro-baseline-status

astro astro-component baseline status web withastro

Last synced: 4 months ago
JSON representation

Astro component to display web platform baseline status

• Host: GitHub
• URL: https://github.com/karesztrk/astro-baseline-status
• Owner: karesztrk
• Created: 2024-11-10T13:39:11.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2025-01-24T14:42:29.000Z (over 1 year ago)
• Last Synced: 2025-08-09T01:43:42.184Z (10 months ago)
• Topics: astro, astro-component, baseline, status, web, withastro
• Language: Astro
• Homepage:
• Size: 88.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Astro Baseline Status

A widget displaying Baseline status of a web feature based on https://github.com/web-platform-dx/web-features data.

## Icons

![Default browser icons rendered](./docs/default_icons.png "Default browser icons")

![Browser icons can be customized](./docs/custom_icons.png "Custom browser icons")

## How to use

Import the Astro component.

Optionally import your browser images. If omitting, the default images will be used.

```jsx

---

import BaselineStatus from "astro-baseline-status";

import Chrome from "./assets/Chrome.svg";

import Edge from "./assets/Edge.svg";

import Firefox from "./assets/Firefox.svg";

import Safari from "./assets/Safari.svg";

---

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

```

## Styling

Style the widget icons using CSS variables.

```css

/* Browser status icon colors */

--baseline-status-color-unavailable: light-dark(#ea8600, #f09418);

--baseline-status-color-newly: light-dark(#1a73e8, #4185ff);

--baseline-status-color-widely: light-dark(#1e8e3e, #24a446);

--baseline-status-color-no_data: light-dark(#707070, #868686);

/* Baseline status icon colors */

--baseline-status-icon-color-limited: light-dark(#c6c6c6, #565656);

--baseline-status-icon-color-newly: light-dark(#1b6ef3, #4185ff);

--baseline-status-icon-dot-color-newly: light-dark(#a8c7fa, #2d509e);

--baseline-status-icon-color-widely: light-dark(#c4eed0, #125225);

--baseline-status-icon-color-no_data: light-dark(#909090, #666666);

```

## Advantages

- 💅 An Bring your own style

- 📷 An Use your own images