{"id":15612435,"url":"https://github.com/euberdeveloper/ukraine-banner","last_synced_at":"2026-04-10T07:59:00.171Z","repository":{"id":42637201,"uuid":"469947146","full_name":"euberdeveloper/ukraine-banner","owner":"euberdeveloper","description":"Some banner web components for sites that want to condemn the war","archived":false,"fork":false,"pushed_at":"2022-03-30T02:20:28.000Z","size":137,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T15:13:06.328Z","etag":null,"topics":["svelte","typescript","ukraine","vite","webcomponent"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/euberdeveloper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-15T00:15:20.000Z","updated_at":"2023-04-11T15:46:12.000Z","dependencies_parsed_at":"2022-08-26T14:31:24.785Z","dependency_job_id":null,"html_url":"https://github.com/euberdeveloper/ukraine-banner","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/euberdeveloper/ukraine-banner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euberdeveloper%2Fukraine-banner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euberdeveloper%2Fukraine-banner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euberdeveloper%2Fukraine-banner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euberdeveloper%2Fukraine-banner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/euberdeveloper","download_url":"https://codeload.github.com/euberdeveloper/ukraine-banner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/euberdeveloper%2Fukraine-banner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018119,"owners_count":26086282,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["svelte","typescript","ukraine","vite","webcomponent"],"created_at":"2024-10-03T06:42:56.593Z","updated_at":"2025-10-14T06:42:17.241Z","avatar_url":"https://github.com/euberdeveloper.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ukraine-banner\n\nThis is a **web component** that provides a **simple banner against the war in Ukraine**. \n\n## Usage\n\nOn the [releases](https://github.com/euberdeveloper/ukraine-banner/releases) you can download the file `ukraine-banner.tar.gz`. Inside, there will be a README.md with the js files implementing the webcomponent. The **umd** version is just **6KB**, so very light.\n\nThe **tag name** is `\u003cukraine-ribbon\u003e` and it accepts the following options:\n\n| **Property** | **Required** | **Default**                | **Description**                                                                                                             |\n| ------------ | ------------ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| vertical     | NO           | 'bottom'                   | It says if the ribbon will be on the top or on the bottom. (Possible values: 'top' and 'bottom').                           |\n| horizontal   | NO           | 'right'                    | It says if the ribbon will be on the left or on the right. (Possible values: 'left' and 'right').                           |\n| href         | NO           | undefined                  | It says the url where the user will be redirected after clicking the ribbon. If not specified, the ribbon is not clickable. |\n| title        | NO           | undefined                  | It says the title that will be displayed when the mouse is over the ribbon.                                                 |\n| height       | NO           | '3vw'                      | It says the height of the ribbon.                                                                                           |\n| boxshadow    | NO           | '0 0 8px rgb(0 0 0 / 50%)' | It says the box shadow that the ribbon will have.                                                                           |\n| zindex       | NO           | '999999'                   | It says the z-index of the ribbon                                                                                           |\n\n## Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003c!-- NOTE THAT HERE THE ADDRESS TO THE JS FILE IS RELATIVE AND THAT YOU MAY NEED TO CHANGE THE VERSION IN THE FILE NAME --\u003e\n    \u003cscript src=\"./ukraine-banner.umd.1.0.0.js\"\u003e\u003c/script\u003e\n    \u003ctitle\u003eUkraine Banner Example\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003cukraine-ribbon vertical=\"top\" horizontal=\"left\" href=\"https://www.stopputin.net/\"\u003e\u003c/ukraine-ribbon\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n## Result\n\nThe result will be something like this (you can see the ribbon added in the bottom right corner of the page):\n\n![example_result](./docs/example.jpg)\n\n## How was it made\n\nThis web component was made with **Typescript**, **Svelte** and **Vite**.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuberdeveloper%2Fukraine-banner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feuberdeveloper%2Fukraine-banner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feuberdeveloper%2Fukraine-banner/lists"}