Git Product home page Git Product logo

statusbase-nuxt's Introduction


Logo

StatusBase

Uptime monitoring tool & beautiful status pages

Powered by Nuxt Content v2!
Free • Open Source • Notification

View Demo · Report Bug · Request Feature

statusbase.vercel.app

Inspiration

I saw a lot of Status Page Software-as-a-Service (SAAS) out there lately, but I want to create one that allow users to freely host it themselves, and configure it to their hearts content.

On top of that, I find that this a golden opportunity to play with Nuxt Content v2 😆

🚀 Features

  • 🤩 Free
  • 📖 Open-Source
  • 🚀 Host it on platforms
  • 📝 Write incident report in Markdown
  • 0️⃣ Zero dependency on other service
  • 🔔 Email notifications when site is down

🔨 Built With

Setup instructions

Warning This project is still under development

  1. Fork the repository
  2. Update cron frequency on .github/workflows/health-check.yaml
  3. Create [name].yaml on /content/urls (eg: doc.yaml)
  4. Copy the template below to your yaml file created in step 2
url: "https://docs.zernonia.com"
title: "Doc"
description: "Documentation website for zernonia"
# IMPORTANT! url must be first line
# you can add any extra field here
  1. Set up on any platform you ant
  2. Celebrate! 🎉

How it works?

This project uses GitHub actions to wake up every hour and run a shell script (health-check.sh). This script runs curl on every .yaml file in your /content/urls directory and appends the result of that run to a log file and commits it to the repository.

All thanks to Nuxt Content v2, we easily fetch the log data, as well as documented incidents report easily and display it on the website.

However, there's a downside with using GitHub Actions as CRON, which is the scheduled delayed. Other than that, the current Nuxt Content v2 doesn't support remote git sources yet, so we have to rebuild the apps every 30 minutes (depending on the frequeny you set in .github/workflows/health-check.yaml), which is not ideal.

➕ Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📜 License

Distributed under the MIT License. See LICENSE for more information.

📧 Contact

Zernonia - @zernonia - [email protected]

Also, if you like my work, please buy me a coffee ☕😳

Logo

statusbase-nuxt's People

Contributors

zernonia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

statusbase-nuxt's Issues

UI: use padding instead of margin for Uptime section

This way, we always have one selected when we hover, this is a much better UX and this will keep the spacing working.

Screenshot.2022-05-30.at.15.01.02.mp4

By hacking in the devtools around it and adding:

[data-v-tippy] {
    padding: 0.3em;
    cursor: pointer;
}

It looks like this:

Screenshot.2022-05-30.at.15.04.22.mp4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.