{"id":19999702,"url":"https://github.com/novicell/message-bar","last_synced_at":"2025-06-14T18:07:31.876Z","repository":{"id":75672975,"uuid":"247038245","full_name":"Novicell/message-bar","owner":"Novicell","description":null,"archived":false,"fork":false,"pushed_at":"2020-03-23T12:55:09.000Z","size":81,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-01T23:31:47.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/Novicell.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":"2020-03-13T09:50:47.000Z","updated_at":"2020-03-23T12:55:11.000Z","dependencies_parsed_at":"2023-06-07T08:00:33.611Z","dependency_job_id":null,"html_url":"https://github.com/Novicell/message-bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Novicell/message-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fmessage-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fmessage-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fmessage-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fmessage-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novicell","download_url":"https://codeload.github.com/Novicell/message-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fmessage-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259860406,"owners_count":22922987,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-13T05:12:32.008Z","updated_at":"2025-06-14T18:07:31.814Z","avatar_url":"https://github.com/Novicell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/@novicell/message-bar)](https://www.npmjs.com/package/@novicell/message-bar)\n![npm](https://img.shields.io/npm/dw/@novicell/message-bar)\n\n# @Novicell/message-bar\nQuickly drop in a status-bar in the top/bottom of a page if you have an important message to share.\n\n## Demo\nLink to codepen: https://codepen.io/Novicell/pen/ZEGoXqe\n\n## Installation\nThere is multiple ways to install the component, you can either install it as a NPM package, or you can include it directly from a CDN.\n \n### NPM\n ```sh\nnpm install @novicell/message-bar\n ```\n\nThen you can include the package in your main.js or similar depending on your project accordingly\n\n```javascript\nimport '@novicell/message-bar';\n``` \n \n### CDN\n ```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@novicell/message-bar/dist/message-bar.js\"\u003e\u003c/script\u003e\n```\n\nor for a specific version\n\n ```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@novicell/message-bar@0.0.3/dist/message-bar.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\nTo use the application simply drop in the html tag\n\n```html\n\u003cmessage-bar background-color=\"#FF8387\"\n             href=\"https://google.com\"\n             position=\"top\"\n             color=\"#fff\"\n             message=\"Breaking news: We are closed due to unforeseen circumstances\"\u003e\u003c/message-bar\u003e\n```\n\n### Options\n\nThe component has multiple properties that you can use to adjust the look and feel as well as the message of the message bar.\n\n* `position`: - Decides if the bar should sit at the top or the bottom of the page (Default: \"top\")\n* `background-color` - Decides the background color of the bar, can be hex, rgba, etc (Default: \"#FF8387\")\n* `color` - Decides the color of text the bar, can be hex, rgba, etc (Default: \"#FFF\")\n* `message` - Sets the text within the bar (Default: \"This is your message.\")\n* `href` - Sets the link of the button (Default: \"\") (Button wont be shown if no link is provided)\n* `button-text` - Sets the text within the button (Default: \"Read more\")\n* `target` - Decides if the link should open in the current page or a new window etc. (Default: \"_self\")\n* `fixed` - Decides if the bar should be positioned fixed or relative (Default: \"fixed\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fmessage-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnovicell%2Fmessage-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnovicell%2Fmessage-bar/lists"}