{"id":16233431,"url":"https://github.com/samelhusseini/pxt-holidays","last_synced_at":"2025-03-19T14:31:33.709Z","repository":{"id":125702151,"uuid":"111029423","full_name":"samelhusseini/pxt-holidays","owner":"samelhusseini","description":"A Holiday Card sample target embedding PXT inside a React web app","archived":false,"fork":false,"pushed_at":"2018-12-12T00:45:20.000Z","size":35325,"stargazers_count":41,"open_issues_count":4,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T19:21:08.091Z","etag":null,"topics":["integrated","makecode","pxt","react","sample"],"latest_commit_sha":null,"homepage":"https://samelhusseini.github.io/pxt-holidays/controller.html","language":"TypeScript","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/samelhusseini.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-16T22:29:18.000Z","updated_at":"2024-10-10T20:08:10.000Z","dependencies_parsed_at":"2023-08-01T13:00:26.917Z","dependency_job_id":null,"html_url":"https://github.com/samelhusseini/pxt-holidays","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/samelhusseini%2Fpxt-holidays","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samelhusseini%2Fpxt-holidays/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samelhusseini%2Fpxt-holidays/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samelhusseini%2Fpxt-holidays/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samelhusseini","download_url":"https://codeload.github.com/samelhusseini/pxt-holidays/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243997127,"owners_count":20380981,"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":["integrated","makecode","pxt","react","sample"],"created_at":"2024-10-10T13:12:39.506Z","updated_at":"2025-03-19T14:31:33.703Z","avatar_url":"https://github.com/samelhusseini.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A \"Holiday Card\" target for a Microsoft MakeCode Editor\n\nThis repo contains a \"Holiday card\" target built with Microsoft MakeCode (PXT). The editor is hosted on the GitHub pages at https://samelhusseini.github.io/pxt-holidays/controller.html\n\nThe repo serves as a demonstration to anyone trying to integrate PXT into their own application without using the PXT frontend.\n\nUsing the \"editor controller\" mode of PXT, you can embed PXT inside an iframe in your application and send and receive messages query project state and control PXT using a pre-defined protocol. \nThe protocol for communicating with PXT in that mode is defined here: \nhttps://github.com/Microsoft/pxt/blob/master/pxteditor/editorcontroller.ts\n\nThis repo also contains a separate site built with React.js that demonstrates how to communicate with PXT. The site is built under /site. You would mostly likely not use this if you're trying to integrate PXT into your application.\n\nIf you'd like to start your own editor, create a copy of this repo and fix all the TODOs.\n- [ ] Setup local server (see below)\n- [ ] [Follow these instructions](site/README.md) to build and test the React site.\n- [ ] Update metadata in ``pxtarget.json``. Change the id, title, name, etc... to your taste.\n- [ ] Update the JavaScript runtime in ``sim/simulator.ts``. If needed add additional JS library under ``sim/public/**``\nand edit ``sim/public/simulator.html`` with additional ``script`` tags.\n- [ ] Update the APIs in ``sim/api.ts`` to use your runtime.\n- [ ] Test your editor in the local server\n- [ ] run ``pgk staticpkg --gh --bump`` to upload a static version to GitHub pages.\n\n## Running locally\n\nThese instructions allow to run locally to modify this target.\n\n## Setup\n\nThe following commands are a 1-time setup after synching the repo on your machine.\n- install node.js\n- install the PXT command line\n```\nnpm install -g pxt\n```\n- install the node dependencies\n```\nnpm install\n```\n\n## Running the local server\n\nOnce you're done, simply run this command to open a local web server:\n```\npxt serve\n```\n\nNormally, you would test your page from http://localhost:3232/index.html but since the editor is in \"controller\" mode, we would instead test it from a page were it's embedded in an iframe, use http://localhost:3232/controller.html instead.\n\n[Follow these instructions](site/README.md) to build and test the React site.\n\nAfter making a change in the source, refresh the page in the browser.\n\n## Updating the tools\n\nIf you would like to pick up the latest PXT build, simply run\n```\npxt update\n```\n\nMore instructions at https://github.com/Microsoft/pxt#running-a-target-from-localhost\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamelhusseini%2Fpxt-holidays","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamelhusseini%2Fpxt-holidays","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamelhusseini%2Fpxt-holidays/lists"}