{"id":23328914,"url":"https://github.com/itsawa/site-notifications","last_synced_at":"2026-02-16T17:34:06.947Z","repository":{"id":268133682,"uuid":"903431384","full_name":"ITSawa/site-notifications","owner":"ITSawa","description":"A lightweight and customizable JavaScript library for displaying stylish, dynamic notifications with various types and transition effects.","archived":false,"fork":false,"pushed_at":"2024-12-14T15:34:21.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T10:37:04.461Z","etag":null,"topics":["lib","library","logger","logging","notification","notifications","site","webapp","website"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ITSawa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-14T15:31:55.000Z","updated_at":"2024-12-14T15:38:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"29ace6b0-a819-4413-a24d-6bf1e48d8561","html_url":"https://github.com/ITSawa/site-notifications","commit_stats":null,"previous_names":["itsawa/site-notifications"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ITSawa/site-notifications","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fsite-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fsite-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fsite-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fsite-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ITSawa","download_url":"https://codeload.github.com/ITSawa/site-notifications/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ITSawa%2Fsite-notifications/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29513993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lib","library","logger","logging","notification","notifications","site","webapp","website"],"created_at":"2024-12-20T21:29:27.550Z","updated_at":"2026-02-16T17:34:06.942Z","avatar_url":"https://github.com/ITSawa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# site-notifications\n\n`site-notifications` is a simple and stylish library for displaying notifications on a webpage. It allows you to create notifications with various types and styles, which can be passed as a `type` when creating a notification. The library uses standard CSS and provides easy-to-use methods for working with notifications.\n\n## Installation\n\nTo get started, simply include the library in your project. You can add the following code to your HTML file or import it into your JavaScript project:\n\nhtml\n\n\u003cscript src=\"path/to/site-notifications.js\"\u003e\u003c/script\u003e\n\nOr, if you're using npm with a bundler like Webpack or Parcel:\n\nbash\n\nnpm install site-notifications\nUsage\nOnce the library is included, you can start creating notifications using the spawnNotification function. This function requires a message, a notification type, and optionally, a duration for the notification.\n\nExample:\njavascript\n\n// Creating a success notification\nspawnNotification(\"Success message\", \"success\");\n\n// Creating an error notification\nspawnNotification(\"Error occurred during request\", \"error\");\n\n// Creating a warning notification\nspawnNotification(\"Warning about form submission\", \"warning\");\n\n// Creating an informational message\nspawnNotification(\"Information about status\", \"info\");\n\n// Creating a dark message with a timeout\nspawnNotification(\"Dark message\", \"dark\", 10000);\nNotification Types\nThe library supports the following notification types, which define the appearance and color scheme of the notifications:\n\nsuccess: Success message (green)\nerror: Error message (red)\nwarning: Warning message (yellow)\ninfo: Informational message (blue)\ndark: Dark theme notification\nClosing Notifications\nYou can manually close notifications using the closeNotification method:\n\njavascript\n\n// Close the notification by its ID\ncloseNotification(\"notification-message-1\");\nClosing Notifications After a Set Time\nFor automatic notification closure after a specified time, use the closeAfterTime method:\n\njavascript\n\ncloseAfterTime(\"notification-message-1\", 10000); // Closes after 10 seconds\nCustomizing Styles\nThe library provides a simple way to customize the styles of the notifications. Here are the default styles:\n\ncss\n\n.notifications-container {\nposition: fixed;\nbottom: 0px;\nleft: 0px;\npadding: 40px 10px;\nz-index: 99999;\npointer-events: none;\ndisplay: flex;\nflex-direction: column;\nalign-items: flex-start;\ntransition: height 0.5s ease-in-out;\nmax-height: 100vh;\noverflow-y: hidden;\n}\n\n.notification-message {\nbackground-color: hsla(0, 0%, 100%, 0.6);\nborder-left: 5px solid rgb(255, 255, 255);\nbackdrop-filter: blur(10px);\npadding: 10px 12px;\nborder-radius: 5px;\nmargin-bottom: 10px;\nbox-shadow: 0px 0px 10px rgba(90, 90, 90, 0.2);\ndisplay: flex;\nalign-items: center;\nwidth: fit-content;\nopacity: 0;\ntransform: translateX(-100%);\ntransition: all 0.8s ease-in-out;\n}\n\n.notification-message.appear {\nopacity: 1;\ntransform: translateX(0);\n}\n\n.notification-message:hover {\ncursor: pointer;\ntransform: scale(1.02);\n}\n\n.notification-message.close {\nopacity: 0;\ntransform: translateX(-100%);\npointer-events: none;\ntransition: all 0.2s ease-in-out;\n}\n\n.notification-message.onremove {\nmax-height: 0;\npadding: 0;\nmargin-bottom: 0;\noverflow: hidden;\n}\n\n.notification-message.success {\nborder-left: 5px solid rgb(5, 153, 109);\nbackground-color: rgba(119, 204, 178, 0.6);\n}\n\n.notification-message.error {\nborder-left: 5px solid rgb(196, 21, 21);\nbackground-color: rgb(255, 128, 128, 0.6);\n}\n\n.notification-message.warning {\nborder-left: 5px solid rgb(224, 155, 25);\nbackground-color: rgb(255, 255, 128, 0.6);\n}\n\n.notification-message.info {\nborder-left: 5px solid rgb(16, 79, 197);\nbackground-color: rgba(128, 172, 255, 0.6);\n}\n\n.notification-message.dark {\nborder-left: 5px solid rgb(39, 39, 39);\nbackground-color: hsla(0, 0%, 0%, 0.6);\n}\n\n.notification-message.dark .notification-message\\_\\_close {\ncolor: rgb(255, 255, 255);\n}\n\n.notification-message.dark .notification-message\\_\\_close:hover {\ncolor: rgb(102, 102, 102);\n}\n\n.notification-message.dark .notification-message\\_\\_text {\ncolor: rgb(255, 255, 255);\n}\n\n.notification-message\\_\\_close {\nborder: none;\nbackground-color: transparent;\nfont-size: 1.8rem;\nbox-shadow: none;\nmargin-left: 5px;\ntransition: all 0.2s ease-in-out;\npointer-events: all;\n}\n\n.notification-message\\_\\_close:hover {\ncursor: pointer;\ncolor: rgb(236, 236, 236);\n}\n\n.notification-message\\_\\_text {\nmargin: 0;\npadding: 0;\nfont-size: 1.2rem;\n}\nFeel free to modify the CSS or pass different types when creating notifications to match your site's design.\n\nContributing\nContributions are welcome! If you'd like to improve the library or fix any bugs, please feel free to fork the repository, create a branch, and submit a pull request.\n\nLicense\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Fsite-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsawa%2Fsite-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsawa%2Fsite-notifications/lists"}