{"id":20768005,"url":"https://github.com/human-connection/human-connection-clock-frontend","last_synced_at":"2025-04-30T11:23:02.840Z","repository":{"id":53557394,"uuid":"149595091","full_name":"Human-Connection/Human-Connection-Clock-Frontend","owner":"Human-Connection","description":"Frontend for Human Connection Clock as a WordPress Plugin","archived":false,"fork":false,"pushed_at":"2021-03-27T20:20:16.000Z","size":5549,"stargazers_count":3,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T15:46:56.701Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Human-Connection.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":"2018-09-20T10:54:54.000Z","updated_at":"2022-11-27T03:56:44.000Z","dependencies_parsed_at":"2022-09-18T06:56:56.290Z","dependency_job_id":null,"html_url":"https://github.com/Human-Connection/Human-Connection-Clock-Frontend","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/Human-Connection%2FHuman-Connection-Clock-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2FHuman-Connection-Clock-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2FHuman-Connection-Clock-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Human-Connection%2FHuman-Connection-Clock-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Human-Connection","download_url":"https://codeload.github.com/Human-Connection/Human-Connection-Clock-Frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251689134,"owners_count":21627848,"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-17T11:34:28.645Z","updated_at":"2025-04-30T11:23:02.808Z","avatar_url":"https://github.com/Human-Connection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Human-Connection-Clock Frontend\n\nThis repository contains the Frontend part of the Human Connection Clock in form of a Wordpress plugin.\n\nThe purpose of the Human Connection Clock Frontend is to display the visual part of the Human Connection Clock, \nhandle user interactions (especially registrations) and provide a basic administration surface for the Human Connection Clock through Wordpress.\n\nThe Human Connection Clock Frontend depends on the [Human Connection Clock API](https://github.com/Human-Connection/Human-Connection-Clock-API),\nwhich acts as the Backend and takes care of storing and processing the data.\n\nTo find out more about the Human Connection Clock and Human Connection - the network behind it - visit https://human-connection.org/en/.\n\n## Tech Stack\n\n* PHP: The Frontend uses mainly [PHP](http://php.net/) as programming language\n* Wordpress: The Frontend is running on [Wordpress](https://wordpress.org/download/) - the most used content management system\n* MySQL: Wordpress requires a [MySQL](https://www.mysql.com) database \n* JavaScript / jQuery: We use [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [jQuery](https://jquery.com/) for the UX, user interactions and animations\n* CSS: We use [CSS](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) to style the Frontend\n* Composer: We use [Composer](https://getcomposer.org/) to manage (PHP) dependencies\n* Webpack: We use [Webpack](https://webpack.js.org/) to transpile and bundle the JavaScript\n\n## Project Structure \u0026 Components\n\n**PROJECT STRUCTURE / DIRECTORIES**\n\n* `coc/`: Main directory for the Human Connection Clock Frontend Wordpress plugin\n* `coc/assets/`: Assets for the Frontend with subdirectories for css, images and js files\n* `coc/classes/`: Contains the PHP classes for the Frontend with the main class ClockOfChange.php \nand core and shortcode classes in the respective subdirectories\n* `coc/config`: Contains the Wordpress options for the plugin\n* `coc/helper`: Contains helper classes\n* `coc/vendor/`: Contains the dependencies (packages) that are managed by composer\n* `coc/coc.php`: Main Wordpress plugin file\n\n**WORDPRESS**\n\nThe Human Connection Clock Frontend is running as a Wordpress plugin. This is why we need a Wordpress system, \nin which we can use the Human Connection Clock Frontend as a plugin.\n\nWhen using the Docker installation, we provide a full Wordpress system with the Docker container.\nOtherwise you need to setup a Wordpress system manually. To setup Wordpress you need to have a webserver with PHP and a MySQL database. \nThen just follow the famous [Wordpress 5-minute installation](https://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Installation).\n\n\n## Installation\n\n**DOCKER INSTALLATION**\n\nThe Human Connection Clock Frontend comes bundled as a Docker Container, which enables you to run a Wordpress system \nwith the Human Connection Clock Frontend plugin preinstalled and preconfigured out of the box.\n\nOf course you need to have a recent version of [Docker](https://www.docker.com/get-started) installed. If you don't have Docker, follow the instructions of the link.\nYou can check the version like this:\n```\n$ docker -v\nDocker version 18.09.1, build 4c52b90\n``` \n\nTo run the Docker installation, follow these steps:\n1. First you need to clone the git repository of the Human Connection Clock Frontend. Head to a directory where you want the git repository to reside\nand open the directory in the console. Then run `git clone https://github.com/Human-Connection/Human-Connection-Clock-Frontend.git` to clone the repository to this directory.\n2. Go to the newly created Human-Connection-Clock-Frontend directory (`cd Human-Connection-Clock-Frontend` in the console)\n3. Run `docker-compose up`. This will build the Docker container on first startup and run it. This can take a while, but after some time the system will be up and running.\n4. Install Wordpress once at [http://localhost:8000](http://localhost:8000)\n4. To activate and configure the Human Connection Clock Wordpress plugin, enter `docker-compose run --rm cli wp-init.sh` in the console. \nThis also creates a sample page with all the available shortcodes.\n\nNow you can use the Human Connection Clock Frontend in Wordpress at [http://localhost:8000](http://localhost:8000)\n\n**LOCAL INSTALLATION \u0026 USAGE**\n\nIf you do not want to use the docker version, you can also install the Human Connection Clock Frontend locally. \nThis requires a [Wordpress system](#project-structure-\u0026-components) for the Human Connection Clock to run in as a plugin.\n\n**Prequesites**\n\nBefore starting the installation you need to make sure you have a recent version of [Composer](https://getcomposer.org/) installed. \nE.g. we have the following versions:\n```\n$ composer --version\nComposer version 1.8.4 2019-02-11 10:52:10\n\nComposer: 1.8.4\nOS: Windows 10\n```\n\n**Installation \u0026 Usage**\n\n1. First you need to clone the git repository of the Human Connection Clock Frontend. Head to a directory where you want the git repository to reside\nand open the directory in the console. Then run `git clone https://github.com/Human-Connection/Human-Connection-Clock-Frontend.git` to clone the repository to this directory.\n2. Go to the newly created Human-Connection-Clock-Frontend directory (`cd Human-Connection-Clock-Frontend` in the console) and run `composer install`.\nNow all the dependencies should install.\n3. Now you need to copy the `coc/` directory into the Wordpress plugins directory `wp-content/plugins/`. \nAlternatively you can symlink the `coc/` directory into the Wordpress plugin directory, see [https://en.wikipedia.org/wiki/Symbolic_link](https://en.wikipedia.org/wiki/Symbolic_link)\n4. Now the Human Connection Clock Frontend should show up in your Wordpress system and you just need to activate it in the Wordpress Admin Backend under Plugins.\n\nNow you can use the Human Connection Clock Frontend in Wordpress.\n\n## Usage\n\n**USAGE IN WORDPRESS ADMIN BACKEND**\n\nWith the installation of the Human Connection Clock Frontend plugin in Wordpress, there will be two additional entries in the Wordpress Admin Backend:\n\n![Human Connection Clock Wordpress Backend](documentation/coc-wordpress-backend.png)\n\n* CoC Options: Settings for the connection to the Human Connection Clock API Server\n* CoC Entries: View \u0026 manage the entries in the Human Connection Clock. Enable/Disable entries here.\n\n**SET COC OPTIONS IN WORDPRESS**\n\nThe Human Connection Clock Frontend needs to be connected to the Human Connection Clock API server in order to display the data, especially the entries.\n\nFirst you need to import the definitions of the advanced custom fields into your Wordpress installation. \nIn the WP Admin backend under `Custom Fields -\u003e Tools` you need to import the field definitions you will find in `coc\\config\\acf-export-2020-02-09.json`.\n\nTo establish a connection, it is necessary to set the base url and a valid API key for the Human Connection Clock API server. \nThis needs to be done under `CoC Options` in the Wordpress admin backend in the respective fields. \nYou also should set the Recaptcha test values there, in order to successfully register entries.\n\nFor example when running the API server locally, this could be the settings:\n```\nYour API Key: secret\nAPI base url: http://coc-api:1337\nRecaptcha v2 Site Key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI\nRecaptcha v2 Secret Key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe\n```\n\nPlease mind that a trailing slash for the API base url is not allowed.\n\nNote: Due to problems with the Advanced Custom Fields Plugin and the Localization Plugin WPML, there is a second\nfallback config under `coc\\config\\custom.php`. Please never commit your config settings with Git, because it will be visible to everybody on GitHub.\nOnly change the settings in the file on the live server.\n\n**MANAGE COC ENTRIES IN WORDPRESS**\n\nAfter setting valid options for the Human Connection Clock API server, we can list and manage all the Human Connection Clock entries \nin the Wordpress admin backend under `CoC Entries`.\n\nHere we will find a list of all the entries that are stored in the Human Connection Clock API server.\n\nIt is also possible to activate and/or disable an entry. When hovering over the status of an entry the links to activate or disable the entry show up.\n\n**DISPLAY Human Connection Clock**\n\nTo display the visual parts of the Human Connection Clock in Wordpress, we ca use [shortcodes](https://codex.wordpress.org/Shortcode).\nThese shortcodes can be integrated into any Wordpress post or page inside any text element with the following syntax:\n\n```\n[shortcode]\n```\n\nThe shortcode needs to be placed inside of the square brackets and is then automatically replaced with the Human Connection Clock visual representation.\n\nTo see which shortcodes are available for the Human Connection Clock Frontend, please refer to the following list.\n\n**WORDPRESS SHORTCUTS**\n\nList of Human Connection Clock Frontend shortcodes for Wordpress:\n\n| Shortcode                     | Description                                                                                                                                |\n| ---                           | ---                                                                                                                                        |\n| `[coc\\shortcodes\\shworld]`    | Display the animated Human Connection Clock with the turning world animation and the counter                                                      |\n| `[coc\\shortcodes\\shsignup]`   | Display the signup button\u003cbr/\u003e-Requires the coc\\shortcodes\\shsign shortcode                                                                |\n| `[coc\\shortcodes\\shsign]`     | Display the signup modal with the form, which opens when clicking on the signup button\u003cbr/\u003e-Requires the coc\\shortcodes\\shsignup shortcode |\n| `[coc\\shortcodes\\shuserwall]` | Display the Human Connection Clock user wall with the entries                                                                                     |\n| `[coc\\shortcodes\\shcountries]` | Display the Human Connection Clock countries ranking         \n| `[coc\\shortcodes\\shlanguageselector]` | *Deprecated*: Display the language selector for the Human Connection Clock         \n\n**RUN WEBPACK BUILD PROCESS**\nIn this project we use webpack to bundle and transpile JavaScript. This essentially means that we use a newer JavaScript syntax (ES6+),\nbut compile this version to make it also possible for older browsers to run the Human Connection Clock (essentially IE9+).\n\nOnce you have installed the npm modules with `npm install`, you can run the webpack build process with command `npm run build`.\nIf you do not want to enter this command after every change, you can run `npm run watch`. This watch and automatically trigger the\nbuild process, once a JavaScript file has been changed.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n```\n       _____\n    _.'_____`._\n  .'.-'  12 `-.`.\n /,' 11      1 `.\\\n// 10           2 \\\\\n;;                 ::\n|| 9  ---O-----  3 ||\n::                 ;;\n\\ 8            4  //\n \\`. 7       5 ,'/\n '.`-. __6__ .-'.'\n   ((-._____.-))\n   _))       ((_\n  '--'  COC  '--'\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuman-connection%2Fhuman-connection-clock-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuman-connection%2Fhuman-connection-clock-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuman-connection%2Fhuman-connection-clock-frontend/lists"}