├── number-abbreviate.d.ts ├── src ├── app │ ├── globals.css │ ├── favicon.ico │ ├── api │ │ ├── gaza-status │ │ │ └── route.ts │ │ └── retrieve-profile-pic │ │ │ └── route.ts │ ├── layout.tsx │ └── page.tsx └── types │ └── index.ts ├── public ├── bg.webp ├── user.jpg ├── social-card.png └── spinner.svg ├── prettier.config.js ├── postcss.config.js ├── wrangler.jsonc ├── .eslintrc.json ├── .gitignore ├── next.config.js ├── tailwind.config.ts ├── tsconfig.json ├── .github ├── dependabot.yml └── workflows │ └── codeql.yml ├── package.json └── README.md /number-abbreviate.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'number-abbreviate'; 2 | -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /public/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechForPalestine/profile-pic-maker/HEAD/public/bg.webp -------------------------------------------------------------------------------- /public/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechForPalestine/profile-pic-maker/HEAD/public/user.jpg -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechForPalestine/profile-pic-maker/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | semi: true, 4 | endOfLine: 'lf', 5 | }; 6 | -------------------------------------------------------------------------------- /public/social-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TechForPalestine/profile-pic-maker/HEAD/public/social-card.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | export enum SocialPlatform { 2 | Twitter = 'twitter', 3 | Github = 'github', 4 | Gitlab = 'gitlab', 5 | Bluesky = 'bluesky', 6 | } 7 | -------------------------------------------------------------------------------- /wrangler.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "name": "palestine-pfp", 3 | "compatibility_date": "2024-09-23", 4 | "compatibility_flags": ["nodejs_compat"], 5 | "pages_build_output_dir": ".vercel/output/static" 6 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "next/core-web-vitals", 4 | "eslint:recommended", 5 | "plugin:@typescript-eslint/recommended", 6 | "plugin:prettier/recommended" 7 | ], 8 | "parser": "@typescript-eslint/parser", 9 | "plugins": ["@typescript-eslint", "prettier"], 10 | "root": true 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | hostname: '*.twimg.com', 7 | }, 8 | { 9 | hostname: 'avatars.githubusercontent.com', 10 | }, 11 | { 12 | hostname: 'secure.gravatar.com', 13 | }, 14 | { 15 | hostname: 'gitlab.com', 16 | }, 17 | { 18 | hostname: 'cdn.bsky.app', 19 | pathname: '/img/avatar/plain/**', 20 | }, 21 | ], 22 | }, 23 | }; 24 | 25 | module.exports = nextConfig; 26 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from 'tailwindcss'; 2 | 3 | const config: Config = { 4 | content: [ 5 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 7 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 13 | 'gradient-conic': 14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": [ 26 | "next-env.d.ts", 27 | "**/*.ts", 28 | "**/*.tsx", 29 | ".next/types/**/*.ts", 30 | "prettier.config.js" 31 | ], 32 | "exclude": ["node_modules"] 33 | } 34 | -------------------------------------------------------------------------------- /src/app/api/gaza-status/route.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | import { NextResponse } from 'next/server'; 3 | import abbreviate from 'number-abbreviate'; 4 | 5 | export const runtime = 'edge'; 6 | export async function GET() { 7 | const res = await fetch( 8 | 'https://data.techforpalestine.org/api/v3/summary.json', 9 | { next: { revalidate: 3600 } }, 10 | ); 11 | if (!res.ok) { 12 | throw new Error('Failed to fetch data'); 13 | } 14 | const { gaza, west_bank } = await res.json(); 15 | const moreRecentUpdate = 16 | dayjs(gaza.last_update) > dayjs(west_bank.last_update) 17 | ? dayjs(gaza.last_update) 18 | : dayjs(west_bank.last_update); 19 | 20 | const daysOfWarCrimes = moreRecentUpdate.diff('2023-10-07', 'day'); 21 | 22 | return NextResponse.json( 23 | { 24 | summary: `${abbreviate(gaza.killed.total + west_bank.killed.total)} killed in ${daysOfWarCrimes} days`, 25 | }, 26 | { status: 200 }, 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next'; 2 | import { Inter } from 'next/font/google'; 3 | 4 | import './globals.css'; 5 | 6 | const inter = Inter({ subsets: ['latin'] }); 7 | 8 | export const metadata: Metadata = { 9 | title: 'Palestine Profile Pic Maker 🇵🇸', 10 | description: 11 | 'Frame your profile with the colors of Palestine. Let your profile picture speak volumes for peace and justice. #IStandWithPalestine', 12 | metadataBase: new URL('https://ppm.techforpalestine.org'), 13 | openGraph: { 14 | title: 'Palestine Profile Pic Maker 🇵🇸', 15 | description: 'Create your Palestine profile picture to show your support', 16 | siteName: 'Palestine Profile Pic Maker 🇵🇸', 17 | images: '/social-card.png', 18 | }, 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: { 24 | children: React.ReactNode; 25 | }) { 26 | return ( 27 | 28 | {children} 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for more information: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | # https://containers.dev/guide/dependabot 6 | 7 | version: 2 8 | updates: 9 | # GitHub Actions updates 10 | - package-ecosystem: github-actions 11 | directory: "/" 12 | schedule: 13 | interval: weekly 14 | open-pull-requests-limit: 10 15 | groups: 16 | all-actions: 17 | patterns: 18 | - "*" 19 | 20 | # NPM updates 21 | - package-ecosystem: npm 22 | directory: "/" 23 | schedule: 24 | interval: weekly 25 | open-pull-requests-limit: 20 26 | groups: 27 | prod-patch-minor: 28 | update-types: ["patch", "minor"] 29 | dependency-type: "production" 30 | dev-patch-minor: 31 | update-types: ["patch", "minor"] 32 | dependency-type: "development" 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "palestine-pfp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "eslint .", 10 | "format": "prettier --write --list-different ." 11 | }, 12 | "dependencies": { 13 | "browser-image-compression": "^2.0.2", 14 | "child_process": "^1.0.2", 15 | "dayjs": "^1.11.19", 16 | "downloadjs": "^1.4.7", 17 | "html-to-image": "^1.11.13", 18 | "html2canvas": "^1.4.1", 19 | "next": "14.2.32", 20 | "number-abbreviate": "^2.0.0", 21 | "react": "^18", 22 | "react-dom": "^18", 23 | "react-icons": "^5.5.0", 24 | "sharp": "^0.34.5" 25 | }, 26 | "devDependencies": { 27 | "@types/downloadjs": "^1.4.6", 28 | "@types/node": "^24", 29 | "@types/react": "^18", 30 | "@types/react-dom": "^18", 31 | "@typescript-eslint/eslint-plugin": "^6.21.0", 32 | "@typescript-eslint/parser": "^6.21.0", 33 | "autoprefixer": "^10.4.22", 34 | "eslint": "^8", 35 | "eslint-config-next": "14.0.1", 36 | "eslint-config-prettier": "^10.1.8", 37 | "eslint-plugin-prettier": "^5.5.4", 38 | "postcss": "^8", 39 | "prettier": "^3.7.4", 40 | "tailwindcss": "^3.3.0", 41 | "typescript": "^5" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Ceasefire Now](https://badge.techforpalestine.org/default)](https://techforpalestine.org/learn-more) 2 | 3 | # Palestine Profile Pic Maker 4 | 5 | ## Overview 6 | 7 | This is a simple browser-only web app that allows users to upload their profile picture and adds the Palestine border to show support for the Palestinian cause. The app provides an easy way for individuals to express solidarity and raise awareness. 8 | 9 | ## How to Use 10 | 11 | 1. Visit the [Palestine Profile Pic Maker](https://ppm.techforpalestine.org/). 12 | 2. Click on the "Upload" button to select your profile picture. 13 | 3. Wait for the app to process the image and apply the Palestine border. 14 | 4. Once processed, click on the "Download" button to save your modified profile picture. 15 | 16 | ## Contribution 17 | 18 | Feel free to contribute to the project by submitting issues or pull requests. Your contributions are highly appreciated. 19 | 20 | ## Development 21 | 22 | If you want to run the app locally, follow these steps: 23 | 24 | 1. Clone the repository: `git clone https://github.com/TechForPalestine/palestine-pfp-maker.git` 25 | 2. Open the project directory: `cd palestine-pfp-maker` 26 | 3. Install dependencies: `npm ci` 27 | 4. Run the project: `npm run dev` 28 | 29 | ## License 30 | 31 | This project is open source and available under the [MIT License](LICENSE). 32 | 33 | ## Disclaimer 34 | 35 | This app is created for the purpose of expressing support for the Palestinian cause. Please use it responsibly and respect the rights and privacy of others. 36 | -------------------------------------------------------------------------------- /src/app/api/retrieve-profile-pic/route.ts: -------------------------------------------------------------------------------- 1 | import { SocialPlatform } from '@/types'; 2 | import { NextResponse, type NextRequest } from 'next/server'; 3 | 4 | export const runtime = 'edge'; 5 | export async function GET(request: NextRequest) { 6 | const searchParams = request.nextUrl.searchParams; 7 | const username = searchParams.get('username'); 8 | const platform = searchParams.get('platform') as SocialPlatform; 9 | 10 | let profilePicUrl = '/user.jpg'; 11 | 12 | if ( 13 | !username || 14 | !platform || 15 | !Object.values(SocialPlatform).includes(platform) 16 | ) { 17 | // just return back default image for now - not handling this kind of error yet 18 | return NextResponse.json({ profilePicUrl }, { status: 200 }); 19 | } 20 | 21 | switch (platform) { 22 | case SocialPlatform.Twitter: 23 | profilePicUrl = await fetchTwitterProfilePic(username); 24 | break; 25 | case SocialPlatform.Github: 26 | profilePicUrl = await fetchGithubProfilePic(username); 27 | break; 28 | case SocialPlatform.Gitlab: 29 | profilePicUrl = await fetchGitlabProfilePic(username); 30 | break; 31 | case SocialPlatform.Bluesky: 32 | profilePicUrl = await fetchBlueskyProfilePic(username); 33 | break; 34 | } 35 | 36 | if (profilePicUrl === null) { 37 | return NextResponse.json({}, { status: 404 }); 38 | } 39 | 40 | return NextResponse.json({ profilePicUrl }, { status: 200 }); 41 | } 42 | 43 | const fetchTwitterProfilePic = async (username: string) => { 44 | const endpoint = `https://api.fxtwitter.com/${username}`; 45 | const response = await fetch(endpoint).then((res) => 46 | res.ok ? res.json() : null, 47 | ); 48 | 49 | if (response === null) { 50 | return null; 51 | } 52 | const smallImageUrl = response.user.avatar_url; 53 | 54 | return smallImageUrl.replace('_normal', '_400x400'); 55 | }; 56 | 57 | const fetchGithubProfilePic = async (username: string) => { 58 | const endpoint = `https://api.github.com/users/${username}`; 59 | const response = await fetch(endpoint).then((res) => 60 | res.ok ? res.json() : null, 61 | ); 62 | 63 | if (response === null) { 64 | return null; 65 | } 66 | return response.avatar_url; 67 | }; 68 | 69 | const fetchGitlabProfilePic = async (username: string) => { 70 | const endpoint = `https://gitlab.com/api/v4/users?username=${username}`; 71 | const response = await fetch(endpoint).then((res) => 72 | res.ok ? res.json() : null, 73 | ); 74 | 75 | if (response === null) { 76 | return null; 77 | } 78 | return response[0].avatar_url; 79 | }; 80 | 81 | const fetchBlueskyProfilePic = async (username: string) => { 82 | const endpoint = `https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${username}`; 83 | const response = await fetch(endpoint).then((res) => 84 | res.ok ? res.json() : null, 85 | ); 86 | 87 | if (response === null) { 88 | return null; 89 | } 90 | return response.avatar; 91 | }; 92 | -------------------------------------------------------------------------------- /public/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 40 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 60 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 70 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL Advanced" 13 | 14 | on: 15 | push: 16 | branches: [ "main" ] 17 | pull_request: 18 | branches: [ "main" ] 19 | schedule: 20 | - cron: '33 15 * * 2' 21 | 22 | jobs: 23 | analyze: 24 | name: Analyze (${{ matrix.language }}) 25 | # Runner size impacts CodeQL analysis time. To learn more, please see: 26 | # - https://gh.io/recommended-hardware-resources-for-running-codeql 27 | # - https://gh.io/supported-runners-and-hardware-resources 28 | # - https://gh.io/using-larger-runners (GitHub.com only) 29 | # Consider using larger runners or machines with greater resources for possible analysis time improvements. 30 | runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }} 31 | permissions: 32 | # required for all workflows 33 | security-events: write 34 | 35 | # required to fetch internal or private CodeQL packs 36 | packages: read 37 | 38 | # only required for workflows in private repositories 39 | actions: read 40 | contents: read 41 | 42 | strategy: 43 | fail-fast: false 44 | matrix: 45 | include: 46 | - language: javascript-typescript 47 | build-mode: none 48 | # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift' 49 | # Use `c-cpp` to analyze code written in C, C++ or both 50 | # Use 'java-kotlin' to analyze code written in Java, Kotlin or both 51 | # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both 52 | # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis, 53 | # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning. 54 | # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how 55 | # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages 56 | steps: 57 | - name: Checkout repository 58 | uses: actions/checkout@v6 59 | 60 | # Add any setup steps before running the `github/codeql-action/init` action. 61 | # This includes steps like installing compilers or runtimes (`actions/setup-node` 62 | # or others). This is typically only required for manual builds. 63 | # - name: Setup runtime (example) 64 | # uses: actions/setup-example@v1 65 | 66 | # Initializes the CodeQL tools for scanning. 67 | - name: Initialize CodeQL 68 | uses: github/codeql-action/init@v4 69 | with: 70 | languages: ${{ matrix.language }} 71 | build-mode: ${{ matrix.build-mode }} 72 | # If you wish to specify custom queries, you can do so here or in a config file. 73 | # By default, queries listed here will override any specified in a config file. 74 | # Prefix the list here with "+" to use these queries and those in the config file. 75 | 76 | # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 77 | # queries: security-extended,security-and-quality 78 | 79 | # If the analyze step fails for one of the languages you are analyzing with 80 | # "We were unable to automatically build your code", modify the matrix above 81 | # to set the build mode to "manual" for that language. Then modify this step 82 | # to build your code. 83 | # ℹ️ Command-line programs to run using the OS shell. 84 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 85 | - name: Run manual build steps 86 | if: matrix.build-mode == 'manual' 87 | shell: bash 88 | run: | 89 | echo 'If you are using a "manual" build mode for one or more of the' \ 90 | 'languages you are analyzing, replace this with the commands to build' \ 91 | 'your code, for example:' 92 | echo ' make bootstrap' 93 | echo ' make release' 94 | exit 1 95 | 96 | - name: Perform CodeQL Analysis 97 | uses: github/codeql-action/analyze@v4 98 | with: 99 | category: "/language:${{matrix.language}}" 100 | -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { SocialPlatform } from '@/types'; 3 | import download from 'downloadjs'; 4 | import { toPng } from 'html-to-image'; 5 | import Image from 'next/image'; 6 | import { useEffect, useRef, useState } from 'react'; 7 | import { 8 | FaArrowRotateLeft, 9 | FaDownload, 10 | FaGithub, 11 | FaGitlab, 12 | FaXTwitter, 13 | FaBluesky, 14 | } from 'react-icons/fa6'; 15 | 16 | export default function Home() { 17 | const ref = useRef(null); 18 | const [userImageUrl, setUserImageUrl] = useState(); 19 | const [unsuportedBrowser, setUnsupportedBrowser] = useState(false); 20 | const [loader, setLoader] = useState(false); 21 | const [gazaStatusSummary, setGazaStatusSummary] = useState(); 22 | const [filePostfix, setFilePostfix] = useState< 23 | SocialPlatform | 'user-upload' 24 | >(); 25 | 26 | useEffect(() => { 27 | const isInstagramBrowser = /Instagram/i.test(navigator.userAgent); 28 | const isFacebookBrowser = /FBAN|FBAV/i.test(navigator.userAgent); 29 | 30 | if (isInstagramBrowser || isFacebookBrowser) { 31 | setUnsupportedBrowser(true); 32 | } 33 | }, [unsuportedBrowser]); 34 | 35 | useEffect(() => { 36 | fetch('/api/gaza-status') 37 | .then((res) => res.json()) 38 | .then((data) => setGazaStatusSummary(data.summary)); 39 | }, [gazaStatusSummary]); 40 | 41 | const handleImageUpload = (e: React.ChangeEvent) => { 42 | const file: File | undefined = e.target.files?.[0]; 43 | const reader = new FileReader(); 44 | 45 | if (file) { 46 | reader.onload = async (event: ProgressEvent) => { 47 | setFilePostfix('user-upload'); 48 | setUserImageUrl(event.target?.result as string); 49 | }; 50 | 51 | reader.readAsDataURL(file); 52 | } else { 53 | // Handle the case when no file is selected (optional) 54 | console.error('No file selected.'); 55 | } 56 | }; 57 | 58 | const handleUploadButtonClick = () => { 59 | document.getElementById('fileInput')?.click(); 60 | }; 61 | 62 | const handleRetrieveProfilePicture = async (platform: SocialPlatform) => { 63 | const userProvidedUsername = prompt(`Enter your ${platform} username:`); 64 | 65 | if (userProvidedUsername) { 66 | setFilePostfix(platform); 67 | try { 68 | setLoader(true); 69 | const response = await fetch( 70 | `/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}`, 71 | ).then((res) => (res.ok ? res.json() : null)); 72 | setLoader(false); 73 | if (response === null) { 74 | alert( 75 | 'Error fetching your profile picture. Please make sure that you entered a correct username.', 76 | ); 77 | return; 78 | } 79 | setUserImageUrl(response.profilePicUrl); 80 | } catch (error) { 81 | console.error('Error fetching profile picture:', error); 82 | } 83 | } 84 | }; 85 | 86 | const generateImage = async () => { 87 | try { 88 | return await toPng(ref.current as HTMLElement); 89 | } catch (error) { 90 | console.log('Error generating image', error); 91 | } 92 | }; 93 | 94 | const handleDownload = async () => { 95 | // TODO: Fix if possible. This is a hack to ensure that image generated is as expected. Without repeating generateImage(), at times, the image wont be generated correctly. 96 | await generateImage(); 97 | await generateImage(); 98 | await generateImage(); 99 | const generatedImageUrl = await generateImage(); 100 | if (generatedImageUrl) { 101 | download(generatedImageUrl, `profile-pic-${filePostfix}.png`); 102 | } 103 | }; 104 | 105 | const startOver = async () => { 106 | setUserImageUrl(undefined); 107 | }; 108 | 109 | return ( 110 |
111 |
112 | {unsuportedBrowser && ( 113 |
114 |

⚠️ Unsupported Browser Detected

115 |

Please open on regular browsers like Chrome or Safari.

116 |
117 | )} 118 | {gazaStatusSummary && ( 119 | 124 | 😥 {gazaStatusSummary} → 125 | 126 | )} 127 |

Show Solidarity 🇵🇸

128 |

129 | Let's unite in our profile pictures to spotlight the cause. ✊ 130 |

131 |

132 | Watch the{' '} 133 | 138 | step-by-step guide 139 | {' '} 140 | 👀 141 |

142 |
143 |
144 |
149 | {/* eslint-disable-next-line */} 150 | border 160 | {loader ? ( 161 | spinner-animation 176 | ) : ( 177 | profile-image 192 | )} 193 |
194 |
195 |
196 |
197 | {userImageUrl ? ( 198 | <> 199 |

200 | Download the image, then use it as your new profile picture. 201 |

202 | 209 | 216 | 217 | ) : ( 218 | <> 219 | 226 | 232 | 240 | 248 | 256 | 264 | 265 | )} 266 |
267 |
268 |

269 | Note: This app runs purely on your browser end. No images nor data 270 | will be saved by the app. 271 |

272 |

273 | Have any feedback?{' '} 274 | 279 | Let me know! 280 | 281 |

282 |

283 | For any bugs, please report them to our{' '} 284 | 289 | {' '} 290 | GitHub repository. 291 | 292 |

293 |
294 |
295 |
296 | ); 297 | } 298 | --------------------------------------------------------------------------------