{"id":13341632,"url":"https://github.com/lloydjatkinson/xkcd-web-component","last_synced_at":"2025-03-11T22:31:20.143Z","repository":{"id":95911044,"uuid":"158618444","full_name":"lloydjatkinson/xkcd-web-component","owner":"lloydjatkinson","description":"A Web Component written with Vue.js that fetches xkcd comics","archived":true,"fork":false,"pushed_at":"2023-04-12T17:23:55.000Z","size":887,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-07T18:05:17.879Z","etag":null,"topics":["vue","vuejs","web-component","web-components","xkcd","xkcd-comics"],"latest_commit_sha":null,"homepage":"","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/lloydjatkinson.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":"2018-11-21T23:37:45.000Z","updated_at":"2023-04-12T17:24:11.000Z","dependencies_parsed_at":"2023-04-27T20:16:13.674Z","dependency_job_id":null,"html_url":"https://github.com/lloydjatkinson/xkcd-web-component","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/lloydjatkinson%2Fxkcd-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydjatkinson%2Fxkcd-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydjatkinson%2Fxkcd-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lloydjatkinson%2Fxkcd-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lloydjatkinson","download_url":"https://codeload.github.com/lloydjatkinson/xkcd-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243125152,"owners_count":20240263,"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":["vue","vuejs","web-component","web-components","xkcd","xkcd-comics"],"created_at":"2024-07-29T19:25:39.356Z","updated_at":"2025-03-11T22:31:20.130Z","avatar_url":"https://github.com/lloydjatkinson.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e **Warning**\n\u003e I no longer wish to work with Vue or maintain any Vue projects I have created due to growing frustration with the DX, the dev tooling situation, and it's community. Therefore this repository is unmaintained and archived.\n\n# xkcd-web-component\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n      \u003cscript src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n      \u003cscript src=\"./xkcd-comic.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cxkcd-comic\u003e\u003c/xkcd-comic\u003e\n        \u003cxkcd-comic number=\"657\"\u003e\u003c/xkcd-comic\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n![](doc/xkcd-screenshot.png)\n\n### What is this?\n\n![](doc/webcomponents.svg)\n![](doc/vue.png)\n\nThis is a demonstration of a Web Component written using the Vue Javascript framework. It fetches xkcd comics - either the latest or the specified number. This is a standard Vue SFC (single-file component) that is then wrapped up in a Web Component by using Vue CLI. Either the Vue SFC or the Web Component can be used.\n\nA Web Component is also an ES6 module and can be imported and used as such.\n\n### What is a Web Component?\n\n\u003e Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.\n\nRead more about Web Components:\n\nhttps://developer.mozilla.org/en-US/docs/Web/Web_Components\n\nhttps://developers.google.com/web/fundamentals/web-components/\n\nhttps://www.webcomponents.org/introduction\n\n### Why Web Components?\n\nWeb Components are *not* an alternative to Javascript frameworks - this one is written with Vue, but it could just as easily be written in plain ES6+. The Web Component standard contains a number of standards - two of which are the Shadow DOM and Custom Elements standards. Web Components encapsulate and contain their own DOM - ensuring compatibility with any other Javascript or CSS on the page.\n\nWeb Components also allow for interoperability between Javascript frameworks - especially ones that closely follow the Web Components standard (such as Vue). This means you can write a Vue Web Component and use it inside an Angular component, for example. You probably wouldn't need to use Web Components if your application is written only in one framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydjatkinson%2Fxkcd-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flloydjatkinson%2Fxkcd-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flloydjatkinson%2Fxkcd-web-component/lists"}