{"id":13406369,"url":"https://github.com/hejny/Ukraine","last_synced_at":"2025-03-14T10:33:13.824Z","repository":{"id":43489275,"uuid":"463901803","full_name":"hejny/Ukraine","owner":"hejny","description":"Help Ukraine - add ribbon with Ukraine flag into the website you manage, show the anti-war message to Russian users, or block them from your service.","archived":false,"fork":false,"pushed_at":"2024-10-16T23:26:22.000Z","size":58720,"stargazers_count":52,"open_issues_count":17,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-18T23:47:24.394Z","etag":null,"topics":["library","typescript","ukraine","ukraine-invasion","ukrainewar","war"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hejny.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-26T16:11:30.000Z","updated_at":"2024-10-16T23:26:24.000Z","dependencies_parsed_at":"2023-02-12T10:30:58.582Z","dependency_job_id":"bb37a371-51f9-4d50-9517-84ba75425b42","html_url":"https://github.com/hejny/Ukraine","commit_stats":null,"previous_names":[],"tags_count":92,"template":false,"template_full_name":"hejny/spacetrim","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hejny%2FUkraine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hejny%2FUkraine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hejny%2FUkraine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hejny%2FUkraine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hejny","download_url":"https://codeload.github.com/hejny/Ukraine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221458381,"owners_count":16825301,"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":["library","typescript","ukraine","ukraine-invasion","ukrainewar","war"],"created_at":"2024-07-30T19:02:28.333Z","updated_at":"2025-03-14T10:33:13.814Z","avatar_url":"https://github.com/hejny.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# 🟦 Stop war on Ukraine 🟨\n\nHelp Ukraine - add **ribbon with Ukraine flag** into the website you manage, show the **anti-war message to Russian users**, or **block them from your service**.\n\n\n\n\u003c!--Wallpaper--\u003e\n\u003c!--⚠️WARNING: This section was generated by https://github.com/hejny/batch-project-editor/blob/main/src//workflows/315-ai-generated-wallpaper/4-aiGeneratedWallpaperUseInReadme.ts so every manual change will be overwritten.--\u003e\n[![Wallpaper of 🟦 Stop war on Ukraine 🟨](assets/ai/wallpaper/gallery/4d04f973-4bf7-4a8f-8b5a-05d0f9ca3c6e-0_0.png)](https://www.midjourney.com/app/jobs/4d04f973-4bf7-4a8f-8b5a-05d0f9ca3c6e)\n\u003c!--/Wallpaper--\u003e\n\nA lot of companies did this in their custom way but this library is supereasy option to do for everyone.\n\n### 🎗️ Add ribbon with Ukraine flag on your website\n\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save({\n        ribbon: 'TOP_LEFT',\n        hasShadow: true,\n        countries: [],\n    });\n\u003c/script\u003e\n```\n\n![image](https://user-images.githubusercontent.com/23721952/157456259-c16c644d-4565-4018-b213-4d4918a05450.png)\n\n\n\n_Or use other method of installation see below._\n\n### ❎ I want to show banner for Russian users\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save({\n        isCancelable: true,\n    });\n\u003c/script\u003e\n```\n\n_Or use other method of installation see below._\n\n### 🛑 I want to block website for Russian users\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save({\n        isCancelable: false,\n    });\n\u003c/script\u003e\n```\n\n![image](https://user-images.githubusercontent.com/23721952/157457857-05cc513e-b58c-4417-998b-bec93330d372.png)\n\n\n_Or use other method of installation see below._\n\n### 🩸 I want to show banner for Russian users but not include cruel graphic and blood\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save({\n        isBloodIncluded: false,\n        isGraphicIncluded: false,\n    });\n\u003c/script\u003e\n```\n\n![image](https://user-images.githubusercontent.com/23721952/157458121-4718b34c-3efd-41fd-8f58-d06e5c5aed68.png)\n\n\n_Or use other method of installation see below._\n\n### 🎗️🎗️🎗️🎗️ I want to have ribbon in multiple corners\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save({\n        ribbon: 'TOP_LEFT',\n        hasShadow: true,\n        countries: [],\n    });\n    Ukraine.save({\n        ribbon: 'TOP_RIGHT',\n        hasShadow: false,\n        countries: [],\n    });\n    Ukraine.save({\n        ribbon: 'BOTTOM_LEFT',\n        hasShadow: true,\n        countries: [],\n    });\n    Ukraine.save({\n        ribbon: 'BOTTOM_RIGHT',\n        hasShadow: false,\n        countries: [],\n    });\n\u003c/script\u003e\n```\n\n_Or use other method of installation see below._\n\n\n## 📲 How to include on your page?\n\nThere are several ways how to add this to your page:\n\n### 📔 Via HTML script tag\n\n\u003c!-- TODO: Auto update of version v0.13.0 --\u003e\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save();\n\u003c/script\u003e\n```\n\n_Note: Normally you would include **async** and **defer** keywords in the script element. But in this situation we do not want to defer this miniscript._\n\n### 📗 Wordpress\n\nInstall [Simple Custom CSS and JS](https://cs.wordpress.org/plugins/custom-css-js/) WordPress plugin and add the following code as the `Custom HTML`:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/save-ukraine@0.18.0/dist/umd/main.js\" integrity=\"sha384-Xn1RAG80M8PZlBQh3r8fUvHY7c8RtuplSnqXOkdJyCxqRsToRwJ1m2FP7vyJo7u/\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    Ukraine.save();\n\u003c/script\u003e\n```\n\n\u003c!--\nTODO: Maybe make custom WordPress plugin:\n      @see https://developer.wordpress.org/plugins/wordpress-org/\n--\u003e\n\n### 📘 Import into the bundle\n\nFirst, you need to install [save-ukraine package from NPM](https://www.npmjs.com/package/save-ukraine):\n\n```bash\nnpm i save-ukraine\n```\n\nAnd then use:\n\n```typescript\nimport Ukraine from 'save-ukraine';\n\nUkraine.save();\n```\n\n_Note: This library is written in TypeScript so [options](./src/options.ts) are fully typed._\n\n### ⚛️ React\n\nFirst, you need to install [save-ukraine package from NPM](https://www.npmjs.com/package/save-ukraine):\n\n```bash\nnpm i save-ukraine\n```\n\nAnd then use:\n\n```typescript\nimport Ukraine from 'save-ukraine';\n\nReactDOM.render(\n    \u003c\u003e\n        \u003cdiv\n            ref={(element) =\u003e {\n                if (!element) {\n                    return;\n                }\n                Ukraine.save({ element, ...props });\n            }}\n        /\u003e\n        {/*...Here will be rest of your app...*/}\n    \u003c/\u003e,\n    document.getElementById('root'),\n);\n```\n\nOr you can make full component:\n\n```typescript\n// SaveUkraine.tsx\n\nimport * as React from 'react';\nimport Ukraine, { IUkraineOptions } from 'save-ukraine';\n\nexport function SaveUkraine(props: Partial\u003cOmit\u003cIUkraineOptions, 'element'\u003e\u003e) {\n    return (\n        \u003cdiv\n            ref={(element) =\u003e {\n                if (!element) {\n                    return;\n                }\n                Ukraine.save({ element, ...props });\n            }}\n        /\u003e\n    );\n}\n```\n\nAnd use it:\n\n```typescript\nimport { SaveUkraine } from './SaveUkraine';\n\nReactDOM.render(\n    \u003c\u003e\n        \u003cSaveUkraine isCancelable={true} /\u003e\n        {/*...Here will be rest of your app...*/}\n    \u003c/\u003e,\n    document.getElementById('root'),\n);\n```\n\n\u003c!--\nNote: Feel free to add more methods of importing\n--\u003e\n\n\n## 🛠🧩 Other customization\n\nYou can customize what will be shown.\nHere are all the [options](./src/options.ts). If you have some idea feel free to contribute via pull request.\n\n```javascript\nUkraine.save({\n    text: 'Stop the war with \u003cb\u003eUkraine\u003c/b\u003e',\n    countries: [/* Russia and Belarus */ 'ru', 'by'],\n    moreInfoUrl: `https://github.com/hejny/Ukraine`,\n    ribbon: 'TOP_LEFT',\n    isInConsole: true,\n    isBloodIncluded: true,\n    isGraphicIncluded: true,\n    isCancelable: true,\n});\n```\n\n## 👨🏽‍💻 Security\n\nWhen you import anything _(not only this script)_ on your page, please do not trust the publisher. Verify the code and **include only the specific version** not the wildcard of every future version.\n\n\n\n## ✉️ Motivation\n\n**As a libertarian and programmer,** I would never think that I would someday work on a piece of software that would go against free access to any service from any corner of the world.\n\nBut unfortunately, the situation has changed.\n\nUkraine was attacked by Russia and a lot of innocent children, women and men are now dying in Kyiv and other Ukrainian cities at the hands of one cruel dictator.\n\n**This can not be tolerated in 21. century in Europe.**\n\nWe can not just close our eyes and just provide all services and benefits to the Russian economy which can keep killing innocent people.\n\n**If you are managing some website, please stop it for Russia** until the war will be over and putin overthrown.\n\n---\n\nI don't want to punish the Russian people as a whole. As a citizen of Prague, I have few Russian friends and this definitely won't change. I believe most Russians do not support the politics of their state and especially this cruel war. But unfortunately, economic pressure is now one of the less bad solutions. And every ruble paid on taxes for the current Russian government means more money for killing innocent people.\n\n---\n\nI have created a simple way how to do it.\n\nFor the users **from other places, nothing happens or 🟦 you can optionally place the ribbon with Ukraine flag 🟨**. The script is tiny to load and insignificant. If the visitor is from **Russia or Belarus** _(detected by system language)_ this **message will appear**:\n\n\n\u003c!--Badges--\u003e\n\u003c!--⚠️WARNING: This section was generated by https://github.com/hejny/batch-project-editor/blob/main/src/workflows/800-badges/badges.ts so every manual change will be overwritten.--\u003e\n\u003c!--\n[![License of ✂️ Space trim](https://img.shields.io/github/license/hejny/Ukraine.svg?style=flat)](https://github.com/hejny/Ukraine/blob/main/LICENSE)\n[![NPM Version of ✂️ Space trim](https://badge.fury.io/js/Ukraine.svg)](https://www.npmjs.com/package/Ukraine)\n[![Quality of package ✂️ Space trim](https://packagequality.com/shield/Ukraine.svg)](https://packagequality.com/#?package=Ukraine)\n[![lint](https://github.com/hejny/Ukraine/actions/workflows/lint.yml/badge.svg)](https://github.com/hejny/Ukraine/actions/workflows/lint.yml)\n[![test](https://github.com/hejny/Ukraine/actions/workflows/test.yml/badge.svg)](https://github.com/hejny/Ukraine/actions/workflows/test.yml)\n[![Known Vulnerabilities](https://snyk.io/test/github/hejny/Ukraine/badge.svg)](https://snyk.io/test/github/hejny/Ukraine)\n[![Issues](https://img.shields.io/github/issues/hejny/Ukraine.svg?style=flat)](https://github.com/hejny/Ukraine/issues)\n--\u003e\n\u003c!--/Badges--\u003e\n\n## 📛 Make 3D printed bagge\n\n\n[![276990939_10221763639026308_8401530540848276183_n](https://user-images.githubusercontent.com/23721952/159365141-520da10f-0ff4-4941-84cc-22cdab7d7588.jpg)https://www.thingiverse.com/thing:5326034](https://www.thingiverse.com/thing:5326034)\n\n\n## ⁉️ FAQ\n\nFew most common things aggregated from your questions:\n\n---\n\n\u003e How do you detect whether the user is or isn't from Russia.\n\nWe are capturing `navigator.language` from the browser. [Full implementation is here](https://github.com/hejny/Ukraine/blob/main/src/getUserLanguage.ts).\n\n---\n\n\u003e How do you block the page?\n\nI am putting a fixed full-screen div with a big z-index + restricting overflow and pointer-events for the rest of the page.\n\n---\n\n\u003e This restriction can be easily avoided!\n\nYes and no. For litter more skilled user on the desktop, it can be. For most of the users not.\nThey can also switch their language but my goal is not to be bulletproof 100% blocking. But just to show this important message for Russian citizens.\n\n---\n\n\u003e This will also restrict Russian-speaking people from Ukraine?\n\nUnfortunately, probably yes. Please do not place this for some essential services for Ukrainian people which can help them survive the war, like news, instructions, maps, ...\nThere is no way how to perfectly detect who the user is and **there will be always false positives and false negatives**.\n\nBut if you have some better solution for this issue, [please share with me](https://github.com/hejny/Ukraine/issues/13).\n\n---\n\n\u003e It makes no sense to block western information from Russian people!\n\n**Definitely!** If you are maintaining news and telling truth about the war / putin, please do not block it for the Russian people.\nThis tool should be used as part of economic and social sanctions to Russia but made from the bottom. So, if you have some professional tool, some war/politics unrelated topic, unrelated blog, e-shop, crypto tool... you can use it as your personal economic sanctions.\n\nNot to punish Russian people but to increase the efficiency of economic sanctions and help to get rid of the current Kremlin regime.\n\n---\n\n\u003e Can I change this and that?\n\n**Definitely!** Please make a [pull request](https://github.com/hejny/Ukraine/pulls).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhejny%2FUkraine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhejny%2FUkraine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhejny%2FUkraine/lists"}