The "Stand with Palestine" library/widget is a sticky bottom banner that you can easily integrate into your website to show your support for Palestine. It features the Palestine flag, a statement, "WE STAND WITH PALESTINE," and dynamic statistics, which include information on martyrs, hospital attacks, destroyed homes, and more, sourced from the Palestinian Ministry of Health.
To add the "Stand with Palestine" banner to your website, all you have to do is adding the following script tag to the <head> tag or before the end of the </body> tag on your website:
<script src="https://stand-with-palestine.pages.dev/widget.js"></script>Here's what it looks like (Live Demo):
The "Stand with Palestine" banner is created using SCSS and JavaScript. All styles are converted to CSS, and HTML elements are dynamically created using JavaScript, allowing for seamless integration without the need to modify your website's HTML structure. The library is bundled using Webpack, resulting in a single JavaScript file, which is available at /dist/stand-with-palestine-widget.js
The dynamic statistics displayed in the banner are obtained from a custom-built API that retrieves the latest numbers from the Daily Report on the Effects of the Israeli Aggression in Palestine. As there's no existing API for this purpose, we've built and maintain our own, updating it daily with the most current numbers. This API will be open-sourced soon, allowing for transparency and community contributions.
Here's the Figma of the "Stand with Palestine" designs. You can access this Figma to explore the updated design version, various attempts & iterations of the widget:
We welcome contributions to enhance and improve the "Stand with Palestine" library. If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and ensure that the code is well-documented and tested.
- run the build command
npm run build. - Submit a pull request.