{"id":28569918,"url":"https://github.com/queen-raae/galleon-attributes","last_synced_at":"2026-03-01T01:02:55.869Z","repository":{"id":282424978,"uuid":"948524663","full_name":"queen-raae/galleon-attributes","owner":"queen-raae","description":"Interact with REST APIS using data attributes (made for Webflow)","archived":false,"fork":false,"pushed_at":"2025-04-22T10:57:57.000Z","size":11671,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-15T19:27:03.234Z","etag":null,"topics":["data-attributes","nocode","webflow"],"latest_commit_sha":null,"homepage":"https://galleon.tools","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/queen-raae.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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-03-14T13:44:11.000Z","updated_at":"2025-04-22T10:57:59.000Z","dependencies_parsed_at":"2025-06-10T17:56:39.700Z","dependency_job_id":null,"html_url":"https://github.com/queen-raae/galleon-attributes","commit_stats":null,"previous_names":["queen-raae/galleon-attributes"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/queen-raae/galleon-attributes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queen-raae%2Fgalleon-attributes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queen-raae%2Fgalleon-attributes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queen-raae%2Fgalleon-attributes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queen-raae%2Fgalleon-attributes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/queen-raae","download_url":"https://codeload.github.com/queen-raae/galleon-attributes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/queen-raae%2Fgalleon-attributes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29957128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["data-attributes","nocode","webflow"],"created_at":"2025-06-10T17:39:38.204Z","updated_at":"2026-03-01T01:02:55.785Z","avatar_url":"https://github.com/queen-raae.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Galleon Attributes ⚓\n\nA simple yet powerful tool for Webflow Pirates to create dynamic content using data attributes.\n\n🚧 Galleon Attributes is currently in beta. 🚧\n\n## Ahoy there! Welcome aboard! 🏴‍☠️\n\nGalleon Attributes helps you create dynamic, data-driven websites without sailing into the treacherous waters of complex code. Made for Webflow, but works with any tool that supports data attributes.\n\n## The Treasure This Tool Provides 💎\n\n- **Data Binding**: Easily connect your HTML elements to data sources\n- **Webflow-Friendly**: Designed specifically for Webflow projects\n- **No Heavy Coding Required**: Perfect for the low-code/no-code sailors\n- **Lightweight**: Won't slow down your ship (website)\n\n## Set Sail ⛵ (Quick Start)\n\n### Add the Galleon Script\n\nAdd the following to your Webflow project's `Site Settings \u003e Custom Code \u003e Head Code`:\n\n```html\n\u003cscript\n  async\n  src=\"https://cdn.jsdelivr.net/npm/@raae/galleon-attributes@1/dist/script.js\"\n\u003e\u003c/script\u003e\n```\n\n![Screenshot of adding the script into Site Settings \u003e Custom Code \u003e Head Code](assets/step-0.png)\n\n### Test Galleon Attributes\n\nStart by using our test APIs to get the hang of it.\n\n💡 [Tip] If you use Outseta, jump to the [Test Galleon Attributes with Outseta](#test-galleon-attributes-with-outseta) section.\n\n#### Test API: Queen Raae Info 👑\n\n1. Select a container element to hold the data\n\n   ➕ Add attribute `gl-get` with value `https://galleon.tools/v1/queen`.\\\n   ✨ It will fetch the data from the url and make it available to the element and its children.\n\n   ![Screenshot of adding the attribute called \"gl-get\" with the value of the test API endpoint](assets/step-1.png)\n\n2. Select a _multiline text_ child of the container element\n\n   ➕ Add attribute `gl-bind` with value `name`.\\\n   ✨ It will bind the text content of the element to the `bio` property of the response.\n\n   ![Screenhsot of adding the attribute named \"gl-bind\" with the value \"bio\"](assets/step-2.png)\n\n3. Select an _image_ child of the container element\n\n   ➕ Add attribute `gl-bind-src` with value `avatar.url`.\\\n   ✨ It will bind the `src` attribute of the element to the `avatar.url` property of the response.\n\n   ➕ Add attribute `gl-bind-alt` with value `avatar.alt`.\\\n   ✨ It will bind the `alt` attribute of the element to the `avatar.alt` property of the response.\n\n   ![Screenhsot of adding the attributes named \"gl-bind-src\" and \"gl-bind-alt\"](assets/step-3.png)\n\n4. Select a _link_ child of the container element\n\n   ➕ Add attribute `gl-iterate` with value `socials`.\\\n   ✨ It will iterate over the `socials` property of the response and create a copy of the element for each item.\n\n   ➕ Add attribute `gl-bind-href` with value `url`.\\\n   ✨ It will bind the `href` attribute of the element to the `url` property of the `socials` item response.\n\n   ➕ Add attribute `gl-bind` with value `label`.\\\n   ✨ It will bind set the text content of the element to the `label` property of the `socials` item response.\n\n   ![Screenshot of adding the attributes named \"gl-iterate\", \"gl-bind-href\" and \"gl-bind\"](assets/step-4.png)\n\n5. Publish your changes and see the magic happen!\n\n   ![Screenshot of the final result](assets/step-5.png)\n\n### Test Galleon Attributes with Outseta\n\n#### Prerequisites\n\n- An Outseta account\n- The Outseta script and configuration added to the head of your site\n- Login functionality added to your site using Outseta embeds\n- The Galleon script added to the [head of your site](#add-the-galleon-script)\n\n#### Test API: Outseta User Info 🔑\n\n1. Select a container element to hold the data\n\n   ➕ Add attribute `gl-get` with value `https://galleon.tools/v1/outseta/me`.\\\n   ➕ Add attribute `gl-auth-token` with value `Outseta.getAccessToken(), query:access_token`.\\\n   ✨ It will fetch the data from the url and make it available to the element and its children.\n\n   💡 The test API endpoint `galleon.tools/v1/outseta/me` verifies the access token and creates a personalized greeting and summary of the user's data.\n\n   ![Screenshot of adding the attributes named \"gl-get\" and \"gl-auth-token\"](assets/step-auth-1.png)\n\n2. Select a _text_ child of the container element\n\n   ➕ Add attribute `gl-bind` with value `greeting`.\\\n   ✨ It will bind the text content of the element to the personalized `greeting` property of the response.\n\n   ![Screenshot of adding the attribute named \"gl-bind\" with the value \"greeting\"](assets/step-auth-2.png)\n\n3. Select a _multiline text_ child of the container element\n\n   ➕ Add attribute `gl-bind-html` with value `summary`.\\\n   ✨ It will bind the html content of the element to the personalized `summary` property of the response.\n\n   ![Screenshot of adding the attribute named \"gl-bind-html\" with the value \"summary\"](assets/step-auth-3.png)\n\n4. Publish your changes and see the magic happen!\n\n   ![Screenshot of the final result](assets/step-auth-4.png)\n\n💡 [Tip] Not the most exciting user info, but you can use this approach to fetch data from any API that expects the Outseta access token, such as a custom API from your backend devs. Or use a similar approach to fetch data from any other API that requires authentication, see the [Authorization](#authorization) section for more details.\n\n## Treasure Map (User Guide)\n\nComing...\n\n### The Attributes\n\n| Attribute        | Purpose                                               | Example                                 |\n| ---------------- | ----------------------------------------------------- | --------------------------------------- |\n| `gl-get`         | Fetches JSON data from an endpoint                    | `\u003cdiv gl-get=\"/api/data.json\"\u003e`         |\n| `gl-bind`        | Binds element's text content to a data property       | `\u003ch1 gl-bind=\"title\"\u003eTitle\u003c/h1\u003e`        |\n| `gl-bind-[attr]` | Binds specific attributes to data properties          | `\u003cimg gl-bind-src=\"image.url\"\u003e`         |\n| `gl-bind-html`   | Binds element's inner html content to a data property | `\u003cdiv gl-bind-html=\"content\"\u003e`          |\n| `gl-iterate`     | Iterates through array items                          | `\u003cli gl-iterate=\"items\"\u003e`               |\n| `gl-auth-token`  | Authentication source and key                         | `\u003cdiv gl-auth-token=\"local:userToken\"\u003e` |\n\n#### `gl-bind`, `gl-bind-[attr]` and `gl-iterate`\n\n- **Properties**: Access properties with dot notation, such as `user.profile.name`\n- **Array Indexing**: Access specific items with `property[index]` syntax, such as `socials[0].url`\n\n### Authorization\n\nYou can authenticate API requests using the `gl-auth-token` attribute:\n\n```html\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"local:userToken\"\n\u003e\u003c/div\u003e\n```\n\nThe format is `source:key` where:\n\n- `source` can be `local` (localStorage), `session` (sessionStorage), `query` (URL query parameter), or omitted for global scope\n- `key` is the name of your token variable or function\n\nExamples:\n\n- `gl-auth-token=\"local:userToken\"` - Get token from localStorage with key \"userToken\"\n- `gl-auth-token=\"session:apiKey\"` - Get token from sessionStorage with key \"apiKey\"\n- `gl-auth-token=\"query:token\"` - Get token from URL query parameter with key \"token\"\n- `gl-auth-token=\"authToken\"` - Use a global variable named \"authToken\"\n- `gl-auth-token=\"Outseta.getAccessToken()\"` - Use a global function named \"getAccessToken\" from the \"Outseta\" SDK\n\n\u003e **Important**: When `gl-auth-token` is specified but no valid value is found, the request will be skipped. This helps prevent failed API requests to protected endpoints.\n\n#### Multiple Auth Token Sources\n\nYou can specify multiple auth token sources in a single `gl-auth-token` attribute using comma-separated values. The system will try each source in order and use the first one that has a valid value:\n\n```html\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"query:token, local:authToken, session:apiKey, ThirdParty.getToken()\"\n\u003e\u003c/div\u003e\n```\n\nThis will first check for a URL query parameter named \"token\", then a value in localStorage under the key \"authToken\",\nthen a value in sessionStorage under the key \"apiKey\", and finally a value from a global function named \"getToken\" from the \"ThirdParty\" SDK. The first source to return a truthy value will be used.\n\n#### Global Scope\n\n```javascript\n// Auth value in global scope\nwindow.myAuthToken = \"a-unique-token\";\n\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"myAuthToken\"\n\u003e\u003c/div\u003e;\n```\n\n```javascript\n// Auth function in global scope\nwindow.getMyToken = function () {\n  return \"your-custom-token\";\n};\n\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"getMyToken()\"\n\u003e\u003c/div\u003e;\n```\n\nFor global scope, you can also use nested paths to access properties and methods on objects (or more usually SDKs).\n\n```javascript\n// Nested object with a token property in global scope\nwindow.Auth = {\n  token: \"your-custom-token\",\n};\n\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"Auth.token\"\n\u003e\u003c/div\u003e;\n```\n\n```javascript\n// Nested object with auth method in global scope\nwindow.Auth = {\n  getToken: function () {\n    return \"your-custom-token\";\n  },\n};\n\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"Auth.getToken()\"\n\u003e\u003c/div\u003e;\n```\n\n```javascript\n// With Outseta script and configuration already in place\n\n\u003cdiv\n  gl-get=\"https://example.com/api-with-auth/data\"\n  gl-auth-token=\"Outseta.getAccessToken()\"\n\u003e\u003c/div\u003e\n```\n\n## The Galleon Tools\n\nGalleon Attributes will be a part a larger Galleon fleet, aiming to unlock user data for Webflow Pirates:\n\n- Galleon Gateway: Fetch personalized content from tools like Airtable, Notion, Google Sheets, etc.\n- Galleon ???: Pitch your user data needs!\n\n## Join the Voyage\n\n- 📰 [Subscribe to our Galleon newsletter](https://galleon.tools)\n\n## Captain's Log (License)\n\nMIT © [Queen Raae](https://github.com/queen-raae)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueen-raae%2Fgalleon-attributes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqueen-raae%2Fgalleon-attributes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqueen-raae%2Fgalleon-attributes/lists"}