{"id":20792628,"url":"https://github.com/mkrl/nodecg-react-layouts","last_synced_at":"2025-05-05T22:03:18.795Z","repository":{"id":42339176,"uuid":"195534493","full_name":"mkrl/nodecg-react-layouts","owner":"mkrl","description":"Basic React stream layouts bundle for NodeCG","archived":false,"fork":false,"pushed_at":"2023-01-04T03:47:35.000Z","size":2320,"stargazers_count":3,"open_issues_count":16,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-06T00:51:00.775Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mkrl.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}},"created_at":"2019-07-06T11:58:40.000Z","updated_at":"2020-07-31T07:10:40.000Z","dependencies_parsed_at":"2023-02-01T19:16:31.522Z","dependency_job_id":null,"html_url":"https://github.com/mkrl/nodecg-react-layouts","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkrl%2Fnodecg-react-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkrl%2Fnodecg-react-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkrl%2Fnodecg-react-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkrl%2Fnodecg-react-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkrl","download_url":"https://codeload.github.com/mkrl/nodecg-react-layouts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225060304,"owners_count":17414814,"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-17T15:53:05.777Z","updated_at":"2024-11-17T15:53:06.377Z","avatar_url":"https://github.com/mkrl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nodecg-react-layouts\n\nThis [NodeCG](http://github.com/nodecg/nodecg) bundle, powered by React, and based on [Flux-like pattern system](https://github.com/mkrl/nodecg-react) for an easy state-to-[replicant](https://nodecg.com/NodeCG.html#Replicant) management.\n\nIt works with NodeCG versions which satisfy this [semver](https://docs.npmjs.com/getting-started/semantic-versioning) range: `^1.1.1`\n\n## What's inside?\n\nThe bundle comes in with \"CG essentials\": nameplates, lower third, toast, layout system and on-screen talent management system. There's more stuff inside!\n\n![Dashboard overview](images/dashboard-main.png)\n\n![On-screen talent overview](images/dashboard-names.png)\n\n![Graphics](images/graphics-base.png)\n\nThe main idea around the bundle is to have a quick and easy \"set up and go\" system you can modify fairly quickly, even in case of emergency. \n\n## Getting started\n\nCopy/clone the repo into your `bundles` folder that is located in the root folder of your NodeCG instance.\n```bash\ncd bundles\ngit clone git@github.com:mkrl/nodecg-react-layouts.git\ncd nodecg-react\n```\nInstall dependencies\n```bash\nyarn\n```\n\nStart up your NodeCG instance. \n\nIn order to generate asset bundle from sources, run `yarn start` at least once, as the repository does not initially come with pre-compiled assets.\n\n## Developing\n\n[Parcel](https://parceljs.org/) is a zero-configuration asset bundler. We use [Babel](https://babeljs.io/) to compile modern JavaScript with React into a single asset file that lives in our `/graphics` folder. \nIn order to get started, run \n```bash\nyarn start\n```\nThis will spin up Parcel watch mode. Open your app through a NodeCG \"graphics\" tab. You can now make desired changes to your source files under `/src` and they will automatically be hot-reloaded in your browser.\n\nThe visual part of the bundle is built with [styled-components](https://www.styled-components.com/).\n\n## Working with pre-built replicants and component state\n\nPlease check out the original [nodecg-react](https://github.com/mkrl/nodecg-react) readme for detailed info on how to work with replicant-to-state management system.\n\n## Building\n\nEven though running in a watch mode does produce working pieces of code, you are going to need a production build after you are done with your development process. Generating optimized and minified graphics is as simple as:\n\n```bash\nyarn build\n```\n\n## Contributing\n\nFeel free to contribute, following this conventional and simple process:\n\n 1. [Fork](https://github.com/mkrl/nodecg-react-layouts/fork)\n 2. Create your feature branch (`git checkout -b new-cool-stuff`) \n 3. Commit (`git commit -am 'Add stuff'`) \n 4. Push to the branch (`git push origin new-cool-stuff`)\n 5. Create a new Pull Request\n\nCode style is maintained by [standard](https://standardjs.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkrl%2Fnodecg-react-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkrl%2Fnodecg-react-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkrl%2Fnodecg-react-layouts/lists"}