{"id":27397010,"url":"https://github.com/whiteshadow1234/profileboard","last_synced_at":"2026-05-21T05:06:16.944Z","repository":{"id":287612511,"uuid":"965269209","full_name":"whiteSHADOW1234/profileBoard","owner":"whiteSHADOW1234","description":"A GitHub Action to automatically compose multiple profile images/SVGs into a single SVG based on a defined layout.","archived":false,"fork":false,"pushed_at":"2025-05-04T12:48:38.000Z","size":1747,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T13:40:45.678Z","etag":null,"topics":["github-actions","github-profile","github-profile-card","profile","profile-readme","svg","svg-images"],"latest_commit_sha":null,"homepage":"https://profile-board-github.vercel.app","language":"JavaScript","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/whiteSHADOW1234.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,"zenodo":null}},"created_at":"2025-04-12T19:31:45.000Z","updated_at":"2025-05-04T12:48:41.000Z","dependencies_parsed_at":"2025-04-14T00:49:24.112Z","dependency_job_id":null,"html_url":"https://github.com/whiteSHADOW1234/profileBoard","commit_stats":null,"previous_names":["whiteshadow1234/profileboard"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/whiteSHADOW1234/profileBoard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FprofileBoard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FprofileBoard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FprofileBoard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FprofileBoard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whiteSHADOW1234","download_url":"https://codeload.github.com/whiteSHADOW1234/profileBoard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whiteSHADOW1234%2FprofileBoard/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263586002,"owners_count":23484494,"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":["github-actions","github-profile","github-profile-card","profile","profile-readme","svg","svg-images"],"created_at":"2025-04-14T00:49:21.062Z","updated_at":"2025-07-04T17:12:06.697Z","avatar_url":"https://github.com/whiteSHADOW1234.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Profile Board GitHub Action 🧩\n\n\n**Tired of juggling multiple Markdown image links for your GitHub stats, trophies, and custom SVGs on your profile README?**\n\nThis GitHub Action automatically composes multiple SVGs and images (from URLs or local files) into a single, sleek SVG based on coordinates you define in a layout file. Keep your profile README clean and your visuals perfectly arranged! ✨\n\n![Screenshot of the Profile Board Website](screenshot.png)\n\u003cimg src=\"https://profile-board-github.vercel.app/merged.svg\"  alt=\"Animated Profile Board\" /\u003e\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/whiteSHADOW1234/profileBoard@main/README.svg\"  alt=\"Animated Profile Board\" /\u003e\n[Rendered link for the generated SVG using this GitHub Action](https://www.svgviewer.dev/s/zuCi5j1p)\n\n## 🤔 Why Use This Action?\n\n*   **🎨 Visual Design First:** Use the companion **[Profile Board Website](https://github.com/whiteSHADOW1234/Profile-Board)** to visually design your layout, then simply copy the generated JSON.\n*   **🖼️ Unified Visuals:** Combine dynamic elements like GitHub stats, top languages, streak stats, trophies, and your own custom SVGs/images into one cohesive image.\n*   **📐 Precise Layout Control:** Define exact X/Y coordinates and dimensions for each element in a simple JSON layout (generated by the website or created manually).\n*   **🧹 Cleaner READMEs:** Replace multiple Markdown image links with just one, making your profile source code much tidier.\n*   **🔄 Automatic Updates:** Run this action on a schedule or on push events (e.g., when local assets change) to keep your composed SVG up-to-date automatically.\n*   **🔗 Flexible Sources:** Fetch images directly from URLs (like Vercel-hosted stats cards) or use SVG/image files directly from your repository.\n*   **🚀 Easy Integration:** Set up quickly within your existing GitHub Actions workflows.\n\n## ✨ Features\n\n*   **Visual Layout Designer:** Design your board visually using the **[Profile Board Website](https://profile-board.vercel.app/)** and export the JSON configuration.\n*   Combines remote images (PNG, JPG, GIF, SVG via URL) and local SVG/image files.\n*   Uses a JSON array to define the layout (source, position, size).\n*   Automatically calculates the bounding box for the final SVG.\n*   Optionally commits the generated SVG back to your repository.\n*   Configurable file matching for local assets.\n\n## 🚀 Usage\n\n1.  **(Recommended) Design Your Layout:**\n    *   Go to the **[Profile Board Website](https://profile-board.vercel.app/)**. \n    *   Visually arrange your desired stats cards, trophies, images, and SVGs.\n    *   Once satisfied, **copy the generated JSON layout data**.\n\n2.  **Set up the GitHub Action:**\n    *   Create a workflow file (e.g., `.github/workflows/profile-board.yml`).\n    *   Paste the following workflow configuration, adapting it as needed.\n\n```yaml\nname: Update Profile Board SVG\n\non:\n  schedule:\n    # Runs every 6 hours - adjust as needed\n    - cron: '0 */6 * * *'\n  workflow_dispatch: # Allow manual triggering\n  push:\n    branches: [ main ]\n    paths:\n      # Trigger if local assets or layout definition change\n      - 'images/**'        # Adjust if your local assets are elsewhere\n      - 'layout.json'      # Trigger if you use a layout file\n\njobs:\n  merge-svg:\n    runs-on: ubuntu-latest\n    permissions:\n      contents: write # Crucial: Allows the action to push the generated SVG\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v4\n\n      - name: Generate Profile Board SVG\n        uses: whiteSHADOW1234/profileBoard@v1 # Use the latest release tag\n        id: merge # Give the step an ID\n        with:\n          # Provide the layout JSON copied from the Profile Board Website:\n\n          # Option 1: Inline JSON (Good for simple layouts or quick tests)\n          # layout: |\n          #   [ { \"id\": \"...\", \"url\": \"...\", ... }, ... ] # Paste your JSON here\n\n          # Option 2: Reference a layout file (Recommended)\n          #   a. Save the copied JSON into a file named 'layout.json' in your repo root.\n          #   b. Use the following input:\n          layout: ${{ toJSON(fromJSON(readFile('layout.json'))) }}\n\n          # --- Other Inputs ---\n          assets: \"images/*.svg,images/*.png\" # Glob patterns for local files (adjust path if needed)\n          token: ${{ secrets.GITHUB_TOKEN }} # Use the default GitHub token\n          # output_path: 'profile-board.svg' # Optional: Specify output file path (if the action supports it, otherwise check default)\n\n      # Important: Commit the generated SVG file\n      - name: Commit generated SVG\n        run: |\n          git config --global user.name 'github-actions[bot]'\n          git config --global user.email 'github-actions[bot]@users.noreply.github.com'\n          # --- IMPORTANT: CHANGE 'output.svg' if your action saves to a different file ---\n          # --- Or use the 'output_path' value if you specified one above ---\n          git add output.svg \n          # Check if there are changes to commit\n          if git diff --staged --quiet; then\n            echo \"No changes to commit.\"\n          else\n            git commit -m \"chore: Update profile board SVG [skip ci]\"\n            git push\n          fi\n        # Only run commit step if the merge step succeeded\n        if: steps.merge.outcome == 'success'\n\n```\n\n# ⚙️ Inputs\n\n| Input         | Description                                                                                                 | Required | Default               |\n| ------------- | ----------------------------------------------------------------------------------------------------------- | -------- | --------------------- |\n| `layout`      | JSON array defining items, their sources (URL or local path), and layout. Can be generated via the website. | `true`   |                       |\n| `assets`      | Comma-separated list of file glob patterns for local assets                                                 | `false`  | `images/*.svg`        |\n| `token`       | GitHub token for committing changes back to the repository                                                  | `true`   | `${{ github.token }}` |\n\n# 📐 Layout JSON Structure\nThe layout input must be a JSON string representing an array of objects. You can generate this structure easily using the [Profile Board Website](https://github.com/whiteSHADOW1234/Profile-Board) or create it manually.\n\nEach object defines an item to be placed on the SVG canvas:\n```\n[\n  {\n    \"id\": \"unique-identifier-1\", // A unique string ID for this item\n    \"url\": \"https://some-url.com/image.png\", // URL for remote images OR path for local files (e.g., \"images/my-icon.svg\")\n    \"type\": \"image\", // \"image\" for remote URLs (png, jpg, gif, svg) or local raster images, \"svg\" for local SVG files to be embedded directly\n    \"x\": 10,         // X-coordinate (top-left corner)\n    \"y\": 20,         // Y-coordinate (top-left corner)\n    \"width\": 300,    // Desired width of the item\n    \"height\": 150    // Desired height of the item\n  },\n  {\n    \"id\": \"local-svg-icon\",\n    \"url\": \"images/LeftCorner.svg\", // Path relative to the repository root\n    \"type\": \"svg\", // Embeds the SVG content directly\n    \"x\": 50,\n    \"y\": 180,\n    \"width\": 100,\n    \"height\": 100\n  }\n  // ... more items\n]\n```\n- `id`: A unique identifier for the element (useful for debugging, could be used for future features).\n- `url`: The source of the image or SVG. Can be an absolute HTTPS URL or a path relative to the repository root (matching the `assets` input).\n- `type`:\n  - `image`: Treats the source as an image. Fetches remote URLs or reads local image files and embeds them using an `\u003cimage\u003e` tag. Handles PNG, JPG, GIF, and even remote SVGs this way.\n  - `svg`: Treats the source as a local SVG file. Reads the file content and embeds it directly into the main SVG structure. This is best for local vector graphics.\n- `x`, `y`: The coordinates for the top-left corner of the item within the final SVG canvas. Negative values are allowed.\n- `width`, `height`: The dimensions the item should have in the final SVG.\n\n# 🤝 Contributing\nContributions are welcome! If you have ideas for improvements or find a bug, please:\n\n1. Fork the repository.\n2. Create a new branch (git checkout -b feature/your-feature-name).\n3. Make your changes.\n4. Commit your changes (git commit -am 'Add some feature').\n5. Push to the branch (git push origin feature/your-feature-name).\n6. Open a Pull Request.\n\nPlease ensure your code follows the existing style and add tests if applicable.\n\n# 📜 License\nThis project is licensed under the MIT License - see the LICENSE file for details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhiteshadow1234%2Fprofileboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhiteshadow1234%2Fprofileboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhiteshadow1234%2Fprofileboard/lists"}