{"id":23143770,"url":"https://github.com/digitalinteraction/climatered-client","last_synced_at":"2025-08-17T14:33:51.810Z","repository":{"id":46596065,"uuid":"272715079","full_name":"digitalinteraction/climatered-client","owner":"digitalinteraction","description":"The interface for Climate:Red","archived":false,"fork":false,"pushed_at":"2021-11-23T20:03:26.000Z","size":16615,"stargazers_count":1,"open_issues_count":16,"forks_count":1,"subscribers_count":8,"default_branch":"main","last_synced_at":"2023-03-23T13:00:11.104Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://hub.docker.com/r/openlab/ifrc-vconf-gui/tags","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digitalinteraction.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-16T13:27:01.000Z","updated_at":"2021-11-23T20:03:30.000Z","dependencies_parsed_at":"2022-09-11T12:23:53.376Z","dependency_job_id":null,"html_url":"https://github.com/digitalinteraction/climatered-client","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/digitalinteraction%2Fclimatered-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fclimatered-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fclimatered-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitalinteraction%2Fclimatered-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitalinteraction","download_url":"https://codeload.github.com/digitalinteraction/climatered-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230136092,"owners_count":18178814,"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-12-17T15:14:10.390Z","updated_at":"2024-12-17T15:14:11.189Z","avatar_url":"https://github.com/digitalinteraction.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Climate:Red | GUI\n\n## About\n\nClimate:Red was a international virtual conference run between the [Open Lab at Newcastle University](http://openlab.ncl.ac.uk) and the [IFRC](https://ifrc.org/).\nIt was a 36-hour continuous multi-timezone, multi-lingual conference with official and user-submitted sessions around the subject of Climage Change.\nThis code is open source except where explicitly stated in the [LICENCE](/LICENCE).\n\n**The team:**\n\n- Rob Anderson - Lead Engineer\n- Tom Nappey - Lead Design and Coordinator\n- Tom Feltwell - Chatbot Engineer\n- Simon Bowen - Project Coordinator\n- Andy Garbett - Coffeechat Engineer\n- Gerrad Wilkinson - Coffeechat Engineer\n\nThis repository is the frontend website that powered Climate:Red experience that everyone saw.\nIt is written in JavaScript, Scss and HTML\nand communicates with [the backend](https://github.com/digitalinteraction/climatered-api).\n\nThis is the frontend for [climate.red](https://climate.red) and features the following:\n\n- An atrium for the conference, a homepage with stats and links to get about\n- Session previews before the schedule is live\n- A chronological schedule for the conference with temporal aspects\n- WebRTC-based coffeechat matched based on the conference's topics\n- Real-time interpretation during live events\n\n\u003c!-- toc-head --\u003e\n\n## Table of contents\n\n- [Development](#development)\n  - [Setup](#setup)\n  - [Regular use](#regular-use)\n  - [Irregular use](#irregular-use)\n  - [Code formatting](#code-formatting)\n  - [Scss usage](#scss-usage)\n  - [Temporal aspects](#temporal-aspects)\n- [Deployment](#deployment)\n  - [Static Deployment](#static-deployment)\n- [Useful docs](#useful-docs)\n- [Notes](#notes)\n- [Customize configuration](#customize-configuration)\n\n\u003c!-- toc-tail --\u003e\n\n## Development\n\n### Setup\n\nTo develop on this repo you will need to have [Docker](https://www.docker.com/) and\n[node.js](https://nodejs.org) installed on your dev machine and have an understanding of them.\nThis guide assumes you have the repo checked out and are on macOS, but equivalent commands are available.\n\nYou'll only need to follow this setup once for your dev machine.\n\n```bash\n# Install node.js dependencies\nnpm install\n```\n\n### Regular use\n\nThese are the commands you'll regularly run to develop the API, in no particular order.\n\n```bash\n# Run the webpack dev server\n# -\u003e Runs on port 8080\n# -\u003e Expects the api to be running on port 3000\n# -\u003e Hot-reloads changes on save\nnpm run serve\n```\n\n### Irregular use\n\nThese are commands you might need to run but probably won't, also in no particular order.\n\n```bash\n# Manually build web assets using webpack\nnpm run build\n\n# Manually lint source code\nnpm run lint\n\n# Generate the table-of-contents in this readme\nnpm run readme-toc\n\n# Build the the app and generate a bundle report\n# -\u003e Builds the site into dist/\n# -\u003e Creates dist/report.json for webpack-bundle-analyser\n# -\u003e Runs bundle analyser and opens in a browser\nnpm run report\n\n# Check for missing i18n keys\nnode bin/check-i18n.js\n```\n\n### Code formatting\n\nThis repo uses [Prettier](https://prettier.io/) to automatically format code to a consistent standard.\nIt works using the [yorkie](https://www.npmjs.com/package/yorkie)\nand [lint-staged](https://www.npmjs.com/package/lint-staged) packages to\nautomatically format code whenever it is commited.\nThis means that code that is pushed to the repo is always formatted to a consistent standard\nand you don't spend time worrying about code formatting.\n\nYou can manually run the formatter with `npm run prettier` if you want.\n\nPrettier is slightly configured in [package.json#prettier](/package.json) under `\"prettier\"`\nand can ignores files using [.prettierignore](/.prettierignore).\n\n### Scss usage\n\nAll `scss` components in `.vue` files automatically import the variables from bulma\nand anything that is in [src/scss/common.scss](/src/scss/common.scss)\n\n\u003e [Bulma variables](https://bulma.io/documentation/customize/variables/)\n\nGeneral styles should be added to [App.vue](/src/App.vue)\n\n### Temporal aspects\n\n[clock.js](/src/clock.js) is a vue plugin to tick any registered components regularly\nso they can update internal data when they are related to time or dates.\n\nSee [Countdown.vue](/src/components/Countdown.vue) for a solid example.\nMake sure to always unbind to reset the time when the component is removed\n/ navigated away from.\n\n## Deployment\n\nTo deploy a new version, use the [npm version](https://docs.npmjs.com/cli/version) command.\n\n```bash\nnpm version # minor | major | patch | --help\ngit push --follow-tags\n```\n\nThis command will bump the version in the package.json, commit that change\nand tag that commit with the new version.\nWhen that tag is pushed to git, a GitHub action will automatically\nbuild a docker image at that point in the git history.\n\nThis means that we have semantic versions for every change\nand they can easily be deployed.\n\n### Static Deployment\n\nIt is also possible to bundle up a completely static version of ClimateRed\nwhich embeds all the required API responses and CDN assets.\nThis needs a few extra steps to build and isn't automated.\n\nCreate `.env.static.local` which isn't a normal .env file:\n\n```sh\nexport API_URL=\nexport AUTH_TOKEN=\nexport CDN_REMOTE=\nexport VERSION=\n```\n\n**API_URL**\n\nFill in the values, run a local version of the API which you can\ndo with the `docker-compose.yml` file in this repository.\nFor that set `API_URL` to `http://localhost:3000.\n\n**AUTH_TOKEN**\n\nRun the web app locally with `npm run serve` and log in with a magic link.\nThen in the browser console type `localStorage.token` to get your `AUTH_TOKEN`\n\n**CDN_REMOTE**\n\nGenerate a GitHub personal access token with `repo:read` and form a git URL like:\n\n```\nhttps://USERNAME:PERSONAL_ACCESS_TOKEN@github.com/digitalinteraction/climatered-schedule.git\n```\n\n**VERSION**\n\nSet this to the version you want to build.\n\n\u003e The reason for these variables is that internally it runs **bin/bundle-static-assets**\n\u003e inside of static.Dockerfile which doesn't have any authentication for git or the API.\n\nNext, make sure the latest data from the schedule repo is pushed and being served\nby your local API. This is the data that it will embed into the container and\nwill be static from this point onwards.\n\nNow run **bin/build-static-image.sh** to build and push the new container:\n\n```sh\n./bin/build-static-image.sh\n```\n\n## Useful docs\n\n- [CSS Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)\n- [Bulma docs](https://bulma.io/documentation/)\n- [Bulma variables](https://bulma.io/documentation/customize/variables/)\n- [Vuejs docs](https://vuejs.org/)\n- [Vue router](https://router.vuejs.org/)\n- [Vuex](https://vuex.vuejs.org/)\n- [vue-i18n](https://kazupon.github.io/vue-i18n/guide/formatting.html)\n- [vue-gtag](https://matteo-gabriele.gitbook.io/vue-gtag/)\n- [browser compatability](https://browsersl.ist/?q=%3E+1%25+or+last+2+versions+or+not+dead)\n\n## Notes\n\n- Google's WebRTC examples\n  https://webrtc.github.io/samples/\n- Getting audio data from getUserMedia without braodcastin it\n  https://stackoverflow.com/questions/24874568\n- Queuing up AudioStream objects idea\n  https://stackoverflow.com/questions/28440262\n- MDN boombox introduction\n  https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API\n\nMaybe try https://webaudio.github.io/web-audio-api/#audioworklet\n\n## Customize configuration\n\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalinteraction%2Fclimatered-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitalinteraction%2Fclimatered-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitalinteraction%2Fclimatered-client/lists"}