{"id":10217212,"url":"https://github.com/haxtheweb/webcomponents","last_synced_at":"2025-05-15T01:07:37.926Z","repository":{"id":37952326,"uuid":"150275195","full_name":"haxtheweb/webcomponents","owner":"haxtheweb","description":"Monorepo of webcomponents and associated microservice apis","archived":false,"fork":false,"pushed_at":"2025-05-12T19:58:43.000Z","size":312209,"stargazers_count":257,"open_issues_count":1,"forks_count":93,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-05-12T20:49:49.092Z","etag":null,"topics":["hax","haxcms","htmlelement","javascript","litelement","monorepo","polymer","webcomponents","yarn"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/org/haxtheweb","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haxtheweb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-25T14:05:04.000Z","updated_at":"2025-05-12T19:58:46.000Z","dependencies_parsed_at":"2023-09-22T02:21:21.074Z","dependency_job_id":"7ff30477-e96b-4b51-9348-857041ed893e","html_url":"https://github.com/haxtheweb/webcomponents","commit_stats":{"total_commits":6671,"total_committers":34,"mean_commits":196.2058823529412,"dds":0.3638135212112127,"last_synced_commit":"b4b4540e86210b50db2132aa8d46fddc08205765"},"previous_names":["elmsln/lrnwebcomponents"],"tags_count":221,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxtheweb%2Fwebcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxtheweb%2Fwebcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxtheweb%2Fwebcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haxtheweb%2Fwebcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haxtheweb","download_url":"https://codeload.github.com/haxtheweb/webcomponents/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253823352,"owners_count":21969844,"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":["hax","haxcms","htmlelement","javascript","litelement","monorepo","polymer","webcomponents","yarn"],"created_at":"2024-05-24T06:46:31.803Z","updated_at":"2025-05-15T01:07:37.901Z","avatar_url":"https://github.com/haxtheweb.png","language":"JavaScript","readme":"[![License: Apache 2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n[![Lit](https://img.shields.io/badge/-Lit-324fff?style=flat\u0026logo=data:image/svg%2bxml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMTYwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTYwIDgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0wLTgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0tNDAtNDB2ODBsNDAtNDB6bTQwLTQwdjgwbC00MC00MHptLTQwIDEyMHY4MGwtNDAtNDB6bS00MC00MHY4MGw0MC00MHoiLz48L3N2Zz4%3D)](https://lit.dev/)\n[![#HAXTheWeb](https://img.shields.io/badge/-HAXTheWeb-999999FF?style=flat\u0026logo=data:image/svg%2bxml;base64,PHN2ZyBpZD0iZmVhMTExZTAtMjEwZC00Y2QwLWJhMWQtZGZmOTQyODc0Njg1IiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4NC40IDEzNS45NyI+PGRlZnM+PHN0eWxlPi5lMWJjMjAyNS0xODAwLTRkYzItODc4NS1jNDZlZDEwM2Y0OTJ7ZmlsbDojMjMxZjIwO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iZTFiYzIwMjUtMTgwMC00ZGMyLTg3ODUtYzQ2ZWQxMDNmNDkyIiBkPSJNNzguMDcsODMuNDVWNTVIODYuMnY4LjEzaDE2LjI2djQuMDdoNC4wN1Y4My40NUg5OC40VjY3LjE5SDg2LjJWODMuNDVaIi8+PHBvbHlnb24gcG9pbnRzPSIxNTMuMTMgNjMuNyAxNTMuMTMgNTEuMzkgMTQwLjU0IDUxLjM5IDE0MC41NCAzOS4wOSAxMjcuOTUgMzkuMDkgMTI3Ljk1IDI2Ljc5IDEwMi43OCAyNi43OSAxMDIuNzggMzkuMDkgMTE1LjM2IDM5LjA5IDExNS4zNiA1MS4zOSAxMjcuOTUgNTEuMzkgMTI3Ljk1IDYzLjcgMTQwLjU0IDYzLjcgMTQwLjU0IDc2IDEyNy4zNiA3NiAxMjcuMzYgODguMyAxMTQuNzggODguMyAxMTQuNzggMTAwLjYxIDEwMi4xOSAxMDAuNjEgMTAyLjE5IDExMi45MSAxMjcuMzYgMTEyLjkxIDEyNy4zNiAxMDAuNjEgMTM5Ljk1IDEwMC42MSAxMzkuOTUgODguMyAxNTIuNTQgODguMyAxNTIuNTQgNzYgMTY1LjcyIDc2IDE2NS43MiA2My43IDE1My4xMyA2My43Ii8+PHBvbHlnb24gcG9pbnRzPSIzMy4xMyA2My43IDMzLjEzIDUxLjM5IDQ1LjcyIDUxLjM5IDQ1LjcyIDM5LjA5IDU4LjMxIDM5LjA5IDU4LjMxIDI2Ljc5IDgzLjQ4IDI2Ljc5IDgzLjQ4IDM5LjA5IDcwLjg5IDM5LjA5IDcwLjg5IDUxLjM5IDU4LjMxIDUxLjM5IDU4LjMxIDYzLjcgNDUuNzIgNjMuNyA0NS43MiA3NiA1OC44OSA3NiA1OC44OSA4OC4zIDcxLjQ4IDg4LjMgNzEuNDggMTAwLjYxIDg0LjA3IDEwMC42MSA4NC4wNyAxMTIuOTEgNTguODkgMTEyLjkxIDU4Ljg5IDEwMC42MSA0Ni4zMSAxMDAuNjEgNDYuMzEgODguMyAzMy43MiA4OC4zIDMzLjcyIDc2IDIwLjU0IDc2IDIwLjU0IDYzLjcgMzMuMTMgNjMuNyIvPjwvc3ZnPg==)](https://haxtheweb.org/)\n[![Published on npm](https://img.shields.io/npm/v/@haxtheweb/h-a-x?style=flat)](https://www.npmjs.com/search?q=%haxtheweb)\n[![build](https://github.com/haxtheweb/webcomponents/workflows/build/badge.svg?branch=master)](https://github.com/haxtheweb/webcomponents/actions?query=branch%3Amaster)\n[![X](https://img.shields.io/twitter/follow/haxtheweb.svg?style=social\u0026label=Follow)](https://twitter.com/intent/follow?screen_name=haxtheweb)\n\n# webcomponents\nMonorepo of all web components built as part of the HAX ecosystem, many working stand-alone.\n\n# HAX\nThe authoring experience of HAX and the ability to make fast, static file backed websites rapidly.\nGet all the details you want on [HAX docs](https://haxtheweb.org/)!\nHAX seeks to be the smallest possible back-end CMS to make HAX work and be able to build websites with it. Leveraging JSON Outline Schema, HAX is able to author multiple pages, which it then writes onto the file system. This way a slim server layer is just for basic authentication, knowing how to save files, and placing them in version control.\n\nWatch and Learn more about HAX here:\n- Try Hax: https://hax.cloud\n- HAXCellence https://haxtheweb.org/what-is-hax\n- Youtube channel - https://www.youtube.com/@haxtheweb\n\n# Issues / Support / Community\n- Discord Channel - https://bit.ly/hax-discord\n- Unified issue queue - https://github.com/haxtheweb/issues/issues\n- Using Merlin directly in any HAX spaces and type \"Issue\" to jump start a report!\n\n# Related links and tech\n- [HAXcms (NodeJS)](https://github.com/haxtheweb/haxcms-nodejs)\n- [HAXcms (PHP)](https://github.com/haxtheweb/haxcms-php)\n- [Storybook docs](https://open-apis.hax.cloud/)\n- [HAX [dot] PSU](https://hax.psu.edu)\n- [HAX doc site](https://haxtheweb.org/)\n- [HAX + 11ty](https://github.com/haxtheweb/hax11ty)\n\n# Welcome to the haxtheweb project!\nWeb components that can work in just about anything, are very small (Vanila or Lit based) and have full on authoring solutions if you dig deeper; Enjoy!\n\n## Quick start\n\n*Notice: You will need to use [Node](https://nodejs.org/en/) version 6.0 or higher. Verify that you have yarn enabled — if not [install yarn globally](https://yarnpkg.com/lang/en/docs/install/). These web components are written in [ES6](http://es6-features.org/) and build routines compile to es5 to encompass legacy browsers.*\n\n### Quick Install\n```bash\ncurl -fsSL https://raw.githubusercontent.com/haxtheweb/webcomponents/master/scripts/haxthewebme.sh -o haxthewebme.sh \u0026\u0026 sh haxthewebme.sh\n```\n\n### Manual Install (as a core dev, forks preferrable)\n\n```bash\ngit clone https://github.com/haxtheweb/webcomponents.git\ncd webcomponents\nnpm install --global @haxtheweb/create\nyarn global add lerna\nyarn global add web-component-analyzer\nyarn install\n```\n\n### Syncing Your Fork\n```\ngit remote add upstream https://github.com/haxtheweb/webcomponents.git\ngit fetch upstream\ngit pull\n```\n\n## Windows\n\n[Git bash](https://git-scm.com/) should already be installed on your Windows machine and can be found by searching through your computer's applications or by right-clicking anywhere inside of the File Explorer.\n[Cygwin command line](https://www.cygwin.com/) is lightly tested, but slower than a true Bash environment.\n\n### Windows Install\n\nTo properly configure git endlines for Windows, run this configuration\n```bash\ngit config --global core.autocrlf true\n```\n\n```bash\ngit clone https://github.com/haxtheweb/webcomponents.git\ncd webcomponents\nnpm install --global @haxtheweb/create\nyarn global add lerna\nyarn global add web-component-analyzer\nyarn install\n```\n\n\n## To work on any element in our repo\n```bash\ncd elements/ELEMENTNAME\nyarn start\n```\nEdit files in `lib/`, `src/`, `locales/` and `demo/` in order to modify the element to contribute back to us via PR.\n## Scripts\n\n- `hax webcomponent my-element --y`\n    - Run HAX CLI to create a new web component\n- `yarn test`\n    -  Run tests on ALL webcomponents.\n- `yarn run build`\n    -  Run build on ALL webcomponents.\n- `yarn run storybook`\n    - Run storybook\n- `yarn run build-storybook`\n    - Build storybook for deployment\n- `lerna publish`\n    - Publish ALL webcomponents' elements to npmjs.com\n\n- `lerna run build --no-bail`\n    - Run `build` command in all projects in the repo, don't bail if there's an issue\n\n## Web Component development\n\nBecause this is a monorepo, each web component will need to be independently built in order to actively work on and preview the changes. Every web component has its own Gulp file and Yarn/NPM script.\n\nWhile still running `yarn start` in one terminal window (which runs the local server), you will need to open another terminal window, drill into the directory of the web component you'd like to work on, and execute the `yarn run dev` command. This command will use gulp tasks to watch the files within that web component directory and will automatically re-run the build command and refresh the browser when you make changes to the web component.\n\n### Working on elements (new-element)\nRun `hax webcomponent` to make a new element. Go to the new element following the directions generated at the end of the element's creation. To work on the new-element run `yarn start` from it's directory. If you are pulling in another element to use, run `yarn add projectname --save` or edit the `package.json` file local to the element you are working on. **ALWAYS INSTALL FROM THE REPO ROOT, NOT THE ELEMENT YOU ARE WORKING ON**\n\n### Example development on a web component\n\n```bash\ncd /Sites/webcomponents\nyarn start\n\n# SHIFT + CTRL + T to open a new tab in Terminal\n\ncd elements your-card  # or any other web component\nyarn run dev\n```\n\nMake a change to the web component and save. The gulpfile will handle transpiling the element down to ES5 and will bring in the HTML and Sass into the template in the web component.\n\n## Test\n\nTo test all webcomponents, run `yarn test` from the root of the repo. If you only want to test the web component you're working on:\n\n```bash\ncd elements/your-card\nyarn test\n```\n\nAlso, if your tests are failing and you want access to a live browser to investigate why, the following flag will keep the browser open.\n\n```bash\nyarn test -- -p\n```\n\nThen open the URL that will be printed in the terminal. It looks something like this: `http://localhost:8081/components/@@haxtheweb/haxtheweb/generated-index.html?cli_browser_id=0`.\n\n## Storybook\n\nWe've added [Storybook](https://storybook.js.org/) to webcomponents as a way to preview our web components as they are being developed. We'll also use Storybook to export a static site that will be the demo site for webcomponents.\n\nTo run storybook\n\n```bash\nyarn run storybook\n```\n\nThis will start a web server on port 9001. Navigate in your browser to `http://localhost:9001` to see Storybook in action. Storybook will watch for file changes and reload the browser automatically for you. This is a little slow at the moment, but we'll look into speeding this up.\n\nTo export the storybook static site\n\n```bash\nyarn run build-storybook\n```\n\nThis places a build of the storybook site in the .storybook_out directory.\n\n### Known Issues with Storybook\n\nFor any web component that has a third-party dependency you will need to update the `/.storybook/webpack.config.js` file. You will need to create an alias for your depedency.\n\nFor example:\n\n```js\n\"../../whatwg-fetch/fetch.js\": path.join( // this is the third-party dependency in the webcomponents\n  __dirname,\n  \"../node_modules/whatwg-fetch/fetch.js\" // this is where it lives in node_modules\n)\n```\n\n## Tech Stack\n\n**Client:** JavaScript, LitElement, Lit(https://lit.dev/)\n\n**Server:** Node.js\n\n## Contributing\n\nContributions are always welcome!\n\n## Active contributors\n\n- [@btopro](https://www.github.com/btopro)\n\n## Additional contributions\nPast contributors, student and larger community, can be found here: https://github.com/haxtheweb/webcomponents/graphs/contributors\n\n![HAX Traveler: World Changer](https://raw.githubusercontent.com/haxtheweb/art/refs/heads/main/haxtheweb/hax-traveler-world-changer.jpg)\n","funding_links":[],"categories":["JavaScript","Real World"],"sub_categories":["Component Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxtheweb%2Fwebcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaxtheweb%2Fwebcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaxtheweb%2Fwebcomponents/lists"}