{"id":20857198,"url":"https://github.com/walkingriver/compass-stencil","last_synced_at":"2026-04-29T05:35:07.004Z","repository":{"id":150468930,"uuid":"112370330","full_name":"walkingriver/compass-stencil","owner":"walkingriver","description":"A simple CSS/HTML compass, implemented as a pure web component, using @StencilJS.","archived":false,"fork":false,"pushed_at":"2017-11-30T04:56:40.000Z","size":163,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T07:13:28.802Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/walkingriver.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":"2017-11-28T18:03:11.000Z","updated_at":"2021-06-17T10:57:53.000Z","dependencies_parsed_at":"2023-07-28T13:15:48.808Z","dependency_job_id":null,"html_url":"https://github.com/walkingriver/compass-stencil","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/walkingriver%2Fcompass-stencil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkingriver%2Fcompass-stencil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkingriver%2Fcompass-stencil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/walkingriver%2Fcompass-stencil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/walkingriver","download_url":"https://codeload.github.com/walkingriver/compass-stencil/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230060,"owners_count":20257640,"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":[],"created_at":"2024-11-18T04:36:51.558Z","updated_at":"2025-12-26T05:54:15.590Z","avatar_url":"https://github.com/walkingriver.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compass Stencil\n\nThis is a web component that displays a compass, implemented entirely with StencilJS.\n\n## Getting Started\n\nTo start a new project using Stencil, clone this repo to a new directory:\n\n```bash\ngit clone https://github.com/walkingriver/compass-stencil.git\ncd compass-stencil\ngit remote rm origin\n```\n\nand run:\n\n```bash\nnpm install\nnpm start\n```\n\nTo view the build, start an HTTP server inside of the `/www` directory.\n\nTo watch for file changes during development, run:\n\n```bash\nnpm run dev\n```\n\nTo build the app for production, run:\n\n```bash\nnpm run build\n```\n\nTo run the unit tests once, run:\n\n```\nnpm test\n```\n\nTo run the unit tests and watch for file changes during development, run:\n\n```\nnpm run test.watch\n```\n\n## Using in your own web page\n\nAfter building the component and including it in your web page's index.html file, you can use the `\u003cwr-compass\u003e` tag. There are two attributes. The first is `bearing`, which is the number of degrees from north that the compass should point. You can also provide a compass `heading`, which is the direction the browser is currently facing. \n\nThe idea is that this component can be used on a mobile device through the Ionic Framework. Set the bearing attribute, and then set up the geolocation capabilities of the phone to track the phone's heading. Pass that every second or two into the `\u003cwr-compass\u003e`, and the on-screen compass should track the object pointed to by the `bearing` attribute. That's the theory, anyway.\n\n## About Stencil\n\nStencil is a compiler for building fast web apps using Web Components.\n\nStencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.\n\nStencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.\n\nStencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).\n\n### Acknowledgements\n\nThis compass was originally created by Rafael Lima. You can see the original CSS and HTML here. http://cssdeck.com/labs/a7kowq1s/ I simply modified it to be a StencilJS-based web component. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalkingriver%2Fcompass-stencil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwalkingriver%2Fcompass-stencil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwalkingriver%2Fcompass-stencil/lists"}