{"id":22061697,"url":"https://github.com/floofies/tagcards","last_synced_at":"2025-03-23T17:27:51.683Z","repository":{"id":135350564,"uuid":"420420119","full_name":"Floofies/tagCards","owner":"Floofies","description":"Tiny taggable HTML cards for my portfolio.","archived":false,"fork":false,"pushed_at":"2021-11-27T14:10:01.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-28T23:28:35.771Z","etag":null,"topics":["card","ecard","taggable","tags","web-widgets"],"latest_commit_sha":null,"homepage":"","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/Floofies.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-10-23T13:27:23.000Z","updated_at":"2024-01-18T06:06:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2fb47fa-4b2a-4cf8-bc35-1e70b049a399","html_url":"https://github.com/Floofies/tagCards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Floofies%2FtagCards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Floofies%2FtagCards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Floofies%2FtagCards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Floofies%2FtagCards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Floofies","download_url":"https://codeload.github.com/Floofies/tagCards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245139169,"owners_count":20567117,"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":["card","ecard","taggable","tags","web-widgets"],"created_at":"2024-11-30T18:14:07.003Z","updated_at":"2025-03-23T17:27:51.650Z","avatar_url":"https://github.com/Floofies.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Taggable Cards\n\nI made these tiny taggable \"cards\" to show off my GitHub projects. I was initally using [Unofficial GitHub Cards](https://github.com/lepture/github-cards), but the complexity and network overhead outweighed my simple needs.\n\n## How-To\n\nI made this as quickly as possible. Just import the CSS and JS files into your document. You can create your own taggable cards in two steps: Write one or more stubs which are rendered into full cards during initial document load. The script scans for all stubs in the live document upon loading, replacing them with fully rendered cards.\n\n1. Create an empty parent element (stub) of any type that allows child elements.\n2. Set the `class` attribute to `tagCard` and fill-in the [Data Attributes](#attributes).\n3. The script scans for all elements of class `tagCard`, and then reads data from your stub elements.\n4. The script replaces all stubs with their fully rendered cards.\n\nYou can then save the resultant HTML/CSS for use on a static page, or let the script run clientside every time.\n\n## Attributes\n\nThere are several valid W3C Data Attributes, to be used on valid parent elements only:\nAttribute|Summary\n---|---\n`data-title`|Sets the card's title/heading text.\n`data-description`|Sets the card's description/content text.\n`data-tags`|Sets the card's string tags. *Comma-sepearated strings are required.*\n`data-url`|Links the card to a URL by wrapping the card in an `anchor` element.\n\n## Example\n\nHere is an example of a hand-written stub:\n\n```html\n\u003cdiv class=\"tagCard\"\n\tdata-title=\"artists\"\n\tdata-url=\"https://github.com/Floofies/artists\"\n\tdata-description=\"A collection of JavaScript programs which randomly generate art.\"\n\tdata-tags=\"javascript, canvas, tag4, tags on tags, bags on bags\"\n\u003e\u003c/div\u003e\n```\n\nAfter the script runs, it will have replaced the stub with a tagged card.\n\nHere is an example of such a card:\n\n```html\n\u003cdiv class=\"tagCard\"\u003e\n\t\u003ca href=\"https://github.com/Floofies/artists\"\u003e\n\t\t\u003cdiv class=\"tagCardHeader\"\u003e\n\t\t\t\u003ch3\u003eartists\u003c/h3\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"tagCardDescription\"\u003e\n\t\t\t\u003cp\u003eA collection of JavaScript programs which randomly generate art.\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv class=\"tagCardFooter\"\u003e\n\t\t\t\u003cspan class=\"tagCardTag\"\u003ejavascript\u003c/span\u003e\n\t\t\t\u003cspan class=\"tagCardTag\"\u003ecanvas\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t\u003c/a\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffloofies%2Ftagcards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffloofies%2Ftagcards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffloofies%2Ftagcards/lists"}