{"id":26224907,"url":"https://github.com/link-/collage","last_synced_at":"2026-03-16T22:01:31.520Z","repository":{"id":280699759,"uuid":"942871102","full_name":"Link-/collage","owner":"Link-","description":"Simple in browser GitHub profile pictures collage generator","archived":false,"fork":false,"pushed_at":"2025-03-04T20:28:29.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T21:24:27.013Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Link-.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":"2025-03-04T20:11:10.000Z","updated_at":"2025-03-04T20:28:32.000Z","dependencies_parsed_at":"2025-03-04T21:24:33.108Z","dependency_job_id":null,"html_url":"https://github.com/Link-/collage","commit_stats":null,"previous_names":["link-/collage"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link-%2Fcollage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link-%2Fcollage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link-%2Fcollage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link-%2Fcollage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Link-","download_url":"https://codeload.github.com/Link-/collage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243270601,"owners_count":20264292,"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":"2025-03-12T18:28:40.842Z","updated_at":"2025-12-28T02:21:27.098Z","avatar_url":"https://github.com/Link-.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GitHub Profile Collage Generator\n\nA modern web app that creates a collage of GitHub profile pictures based on a list of usernames.\n\n\u003e [!TIP]\n\u003e Visit the [GitHub Profile Collage Generator](https://link-.github.io/collage/)\n\n\u003ca href=\"https://link-.github.io/collage/\"\u003e\u003cimg src=\"img/demo.png\" alt=\"screenshot demo of the collage web app\" width=\"70%\" /\u003e\u003c/a\u003e\n\n## Features\n\n- Enter multiple GitHub usernames\n- Automatically fetches profile pictures\n- Generates a customized collage based on the number of profiles\n- Download the collage as a PNG image with transparent background\n- Fully client-side (no server required)\n- Modern UI built with Tailwind CSS\n\n## How to Use\n\n1. Visit the [GitHub Profile Collage Generator](https://link-.github.io/collage)\n2. Enter GitHub usernames, one per line\n3. Click \"Generate Collage\"\n4. Once the collage is created, click \"Download Collage\" to save it as a PNG\n\n## Technical Details\n\n- Pure HTML/JavaScript solution with Tailwind CSS for styling\n- Uses GitHub's profile picture API (.png URL extension)\n- Responsive design that works on mobile and desktop\n- Canvas API for image manipulation and collage creation\n- Tailwind CSS via CDN for modern, utility-first styling\n\n## Demo Examples\n\nThe tool creates clean circular avatars on a transparent background that can be used in documentation, presentations, or team pages:\n\n```\n# Example usage:\noctocat\ndefunkt\nmojombo\nwycats\nezmobius\n```\n\n## CORS Issues and Solutions\n\nThis application uses two methods to avoid CORS restrictions:\n\n1. **GitHub API Method (Default)**: Uses the GitHub API to fetch user data including avatar URLs which are CORS-friendly.\n2. **CORS Proxy Method (Fallback)**: Uses public CORS proxies to fetch images when the API method fails.\n\nIn local development, CORS issues are common. Here are ways to handle them:\n\n- Use the deployed version on GitHub Pages (recommended for end users)\n- Install a CORS browser extension like \"CORS Unblock\" for testing\n- Run Chrome with web security disabled (NOT recommended for regular browsing):\n\n  ```\n  # Windows\n  chrome.exe --disable-web-security --user-data-dir=\"%TEMP%\\chrome_dev_session\"\n  \n  # macOS\n  open -a \"Google Chrome\" --args --disable-web-security --user-data-dir=\"/tmp/chrome_dev\"\n  \n  # Linux\n  google-chrome --disable-web-security --user-data-dir=\"/tmp/chrome_dev\"\n  ```\n\nNote: Some public CORS proxies have rate limits. For production use, consider deploying your own proxy.\n\n## Local Development\n\n### Method 1: Direct File Opening\n\nSimply open `index.html` in your browser. However, browsers will likely block image loading due to CORS policies.\n\n### Method 2: Using a Local Web Server\n\nFor the best experience, run the project with a simple web server:\n\n#### Using Python\n\nIf you have Python installed:\n\n```bash\n# Python 3\ncd /path/to/collage\npython -m http.server 8000\n\n# Python 2\ncd /path/to/collage\npython -m SimpleHTTPServer 8000\n```\n\nThen visit \u003chttp://localhost:8000\u003e in your browser.\n\n#### Using Node.js\n\nThere are several ways to run a server with Node.js without requiring global installations:\n\n##### Using npx with http-server\n\nIf you have npm installed (comes with Node.js), you can use npx to run http-server without a global installation:\n\n```bash\ncd /path/to/collage\nnpx http-server -p 8000\n```\n\n#### Using VS Code\n\nIf you use Visual Studio Code, you can use the \"Live Server\" extension:\n\n1. Install the \"Live Server\" extension\n2. Right-click on `index.html` and select \"Open with Live Server\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink-%2Fcollage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flink-%2Fcollage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink-%2Fcollage/lists"}