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

upptime-example

v1.13.3

Published

This repository uses GitHub Actions as an uptime monitor to track the status of Koj websites.

Downloads

7

Readme

Upptime

Upptime is the open-source uptime monitor and status page, powered entirely by GitHub Actions and Issues.

Static Site CI Graphs CI Response Time CI Summary CI Uptime CI

Live status: 🟨 Partial outage

⭐ How it works

  • GitHub Actions is used as an uptime monitor
    • Every 5 minutes, a workflow visits your website to make sure it's up
    • Response time is recorded every 6 hours and committed to git
    • Graphs of response time are generated every day
  • GitHub Issues are used for incident reports
    • An issue is opened if an endpoint is down
    • People from your team are assigned to the issue
    • Incidents reports are posted as issue comments
    • Issues are locked so non-members cannot comment on them
    • Issues are closed automatically when your site comes back up
  • GitHub Pages are used for the status website
    • A simple, beautiful, and accessible PWA is generated
    • Built with Svelte and Sapper
    • Fetches data from this repository using the GitHub API

Screenshot of status website

📈 Status

This section is updated automatically when the status of any site changes.

| URL | Status | History | Response Time | Uptime | | --- | ------ | ------- | ------------- | ------ | | Google | 🟩 Up | google.yml | 102ms | 100.00% | Wikipedia | 🟩 Up | wikipedia.yml | 121ms | 100.00% | Internet Archive | 🟩 Up | internet-archive.yml | 561ms | 100.00% | Hacker News | 🟩 Up | hacker-news.yml | 425ms | 100.00% | Broken Site | 🟥 Down | broken-site.yml | 0ms | 0.00% | Secret Site | 🟩 Up | secret-site.yml | 35ms | 100.00%

👩‍💻 Getting started

  1. Create a new repository using this template
  2. Update the .statusrc.yml file with your configuration
  3. Enable publishing the gh-pages branch for your status website and add a GH_PAT

Concepts

Issues as incidents

When the GitHub Actions workflow detects that one of your URLs is down, it automatically opens a GitHub issue (example issue #15). You can add incident reports to this issue by adding comments. When your site comes back up, the issue will be closed automatically as well.

Commits for response time

Four times per day, another workflow runs and records the response time of your websites. This data is commited to GitHub, so it's available in the commit history of each file (example commit history). Then, the GitHub API is used to graph the response time history of each endpoint and to track when a site went down.

Configuration

The .statusrc.yml file is used as the central configuration for Upptime, with this syntax:

owner: koj-co # GitHub username
repo: upptime # GitHub repository name
user-agent: koj-co
sites: # List of endpoints to track
  - name: Google
    url: https://www.google.com
assignees: # Users to assign downtime issues (optional)
  - AnandChowdhary
status-website: # Status website (optional)
  cname: upptime.js.org # Custom domain CNAME
  name: Upptime # Status website title

Repository

A GitHub repository is used as the "source of truth" for your uptime logs, and the static site uses the GitHub API and fetches data from this repository.

After you've created a new repository using this template (see Creating a repository from a template), specify the username and repository name in the configuration:

owner: koj-co
repo: upptime

Endpoints

You can track as many websites as you like. Add the names and URLs of your endpoints in the sites key:

sites:
  - name: Google
    url: https://www.google.com
  - name: DuckDuckGo
    url: https://duckduckgo.com

To make POST requests (or any other HTTP verb), you can add the method key:

sites:
  - name: POST to Google
    url: https://www.google.com
    method: POST
  - name: DELETE Example
    url: https://example.com
    method: DELETE

If you don't want to show a URL publicly, you can use repository secrets (see Creating and storing encrypted secrets). Instead of the plain text URL, add the name of the secret prefixed with a $ character:

- name: Secret Site
  url: $SECRET_SITE

In the above example, a secret named SECRET_SITE (without the $) is stored in the repository. Note that you'll also have to add this secret as an environment variable in each workflow file in .github/workflows:

# Example: .github/workflows/graphs.yml
# ...
- name: Run script
  run: npm run graphs
  env:
    SECRET_SITE: ${{ secrets.SECRET_SITE }} # Add your repository secret

User agent

Requests made to the GitHub API must include a valid User-Agent header (see User Agent required). It is recommended to use your GitHub username here:

user-agent: your-github-username

Assignees

You can add members of your team to be assigned to every downtime issue:

assignees:
  - AnandChowdhary
  - CarloBadini

If you want particular users to be assigned per-site, you can add assignees under each entry in sites:

sites:
  - name: Google
    url: https://www.google.com
    assignees:
      - AnandChowdhary

Branding

A static website with PWA is also generated, and you can customize the logo and name in the navbar:

status-website:
  name: Upptime
  logoUrl: https://example.com/image.jpg

If you want to add a custom domain, you can add the cname key:

status-website:
  name: Upptime
  logoUrl: https://example.com/image.jpg
  cname: upptime.js.org # Custom CNAME

Intro text

Optionally, you can add some introductory text to the website. You can use Markdown:

status-website:
  introTitle: "**Upptime** is the open-source uptime monitor and status page, powered entirely by GitHub."
  introMessage: This is a sample status page which uses **real-time** data from our [Github repository](https://github.com/koj-co/upptime). No server required — just GitHub Actions, Issues, and Pages.

Site deployment

Because GitHub Pages does not support the default GITHUB_TOKEN available to workflows, you'll have to set a secret GH_PAT with a Personal Access Token. For more info, see: https://github.com/maxheld83/ghpages#secrets.

Internationalization

Though our status page is in English, you can use any language with Upptime by supplying the required strings. The list of all required strings is available in site/i18n.yml, and you can add them under the i18n key in the configuration file:

i18n:
  activeIncidents: Incidentes activos
  allSystemsOperational: Todos los sistemas están operativos
  # ...

📄 License