add missing backticks to changelog, add picture loading to features list

Update dependencies

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "globals": {
+    "MOBILIZON_CONNECTOR": "readonly"
+  },
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:ava/recommended",
+    "plugin:@wordpress/eslint-plugin/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "requireConfigFile": false,
+    "sourceType": "module",
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "plugins": [
+    "ava",
+    "jsx"
+  ],
+  "rules": {
+    "import/no-unresolved": [
+      "off"
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "no-console": [
+      "error", {
+        "allow": ["error"]
+      }
+    ],
+    "prettier/prettier": [
+      "off"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "react/jsx-key": [
+      "off"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  }
+}

.github/workflows/codeql.yml

@@ -0,0 +1,96 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '20 7 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        npm install
+        npm run build-prod
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/test.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Upgrade NPM
+        run: npm install -g npm
+      - run: npm ci --ignore-scripts
+      - run: npm run build-prod

.gitignore

@@ -1,3 +1,8 @@
+.idea/
 build/
+coverage/
 node_modules/
 vendor/
+
+.phpunit.cache
+.phpunit.result.cache

.gulp.json

@@ -0,0 +1,5 @@
+{
+  "flags": {
+    "gulpfile": "gulpfile.cjs"
+  }
+}

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm test
+lint-staged

.prettierignore

@@ -0,0 +1,8 @@
+.idea
+build
+coverage
+node_modules
+vendor
+.eslintrc.json
+composer.lock
+LICENSE.md

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,73 @@
+{
+  "intelephense.stubs": [
+    "apache",
+    "bcmath",
+    "bz2",
+    "calendar",
+    "com_dotnet",
+    "Core",
+    "ctype",
+    "curl",
+    "date",
+    "dba",
+    "dom",
+    "enchant",
+    "exif",
+    "FFI",
+    "fileinfo",
+    "filter",
+    "fpm",
+    "ftp",
+    "gd",
+    "gettext",
+    "gmp",
+    "hash",
+    "iconv",
+    "imap",
+    "intl",
+    "json",
+    "ldap",
+    "libxml",
+    "mbstring",
+    "meta",
+    "mysqli",
+    "oci8",
+    "odbc",
+    "openssl",
+    "pcntl",
+    "pcre",
+    "PDO",
+    "pgsql",
+    "Phar",
+    "posix",
+    "pspell",
+    "random",
+    "readline",
+    "Reflection",
+    "session",
+    "shmop",
+    "SimpleXML",
+    "snmp",
+    "soap",
+    "sockets",
+    "sodium",
+    "SPL",
+    "sqlite3",
+    "standard",
+    "superglobals",
+    "sysvmsg",
+    "sysvsem",
+    "sysvshm",
+    "tidy",
+    "tokenizer",
+    "xml",
+    "xmlreader",
+    "xmlrpc",
+    "xmlwriter",
+    "xsl",
+    "Zend OPcache",
+    "zip",
+    "zlib",
+    "wordpress"
+  ]
+}

LICENSE.md

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,20 +1,54 @@
-# Connector Mobilizon
+# Connector for Mobilizon
+
+Connector for Mobilizon allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+More details can be found in the [WordPress Plugin Directory](https://wordpress.org/plugins/connector-mobilizon/).
+
+The current changelog can be found under [source/changelog.txt](source/changelog.txt).
+
+This plugin uses [Mobilizon's GraphQL API](https://docs.joinmobilizon.org/contribute/graphql_api/).
 
 ## Development
 
 ### Setup
+
 1. Make sure `npm` and `composer` are installed.
 2. Run: `npm install`
-3. Run: `php composer.phar install`
+3. Run: `composer install`
 
 ### Development build
+
 1. Build: `npm run build-dev`
+2. Make sure to keep `changelog.txt` up-to-date.
 
 ### Release procedure
-1. Build: `npm run build-prod`
-2. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
-3. Make sure screenshots are up-to-date.
+
+1. Make sure `changelog.txt` is up-to-date.
+2. Create a new section with a new version number.
+3. Copy over the new section into `readme.txt`.
+4. Update `package.json` with the same version number.
+5. Update the `package-lock.json`: `npm i --package-lock-only`
+6. Build: `npm run build-prod`
+7. Make sure screenshots are up-to-date.
+8. Copy the built plugin into `/trunk` of SVN.
+9. Create a new tag of the new version: `svn cp trunk tags/<version>`
+10. Check the version number occurrences in both folders.
+11. Make sure to handle exclamation and question marks in `svn status`.
+12. Commit everything together to the release SVN: `svn ci -m "release version <version>"`
+13. Commit the new version in git with the same message.
+14. Tag the new version: `git tag v<version>`
+15. Push the new tag to the repository: `git push --tags`
+16. Append `-next` to the version number in `package.json`.
+17. Update the `package-lock.json`: `npm i --package-lock-only`
+18. Commit: `git commit -am "prepare next release"`
 
 ### Other commands
+
+- Run ESLint: `npm run eslint`
+- Run JavaScript code coverage with tests: `npm run coverage`
 - Run tests: `npm test`
-- Delete build folder: `gulp clean`
+- Delete build folder: `npm run clean`
+- Update PHP dependencies: `composer update`
+- Check for direct PHP dependency updates: `composer outdated --direct`
+- Format code with prettier: `npm run format`
+- Generate `vendor/autoload.php` file after creating new class: `composer dump-autoload`

assets/icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(3.1904,0,0,3.1904,-120.199,-271.206)">
+        <circle cx="37.675" cy="125.127" r="29.385" style="fill:rgb(71,68,103);"/>
+    </g>
+    <g transform="matrix(1.26548,0,0,2.29215,-58.5821,-124.97)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,0.432821,-0.783962,2.15392,28.3042,-121.978)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,-0.432821,0.783962,2.15392,-144.737,-97.4496)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+</svg>

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

composer.json

@@ -1,5 +1,10 @@
 {
-    "require": {
-        "bartlett/php-compatinfo": "^5.4"
+  "autoload": {
+    "psr-4": {
+      "MobilizonConnector\\": "source/includes/"
     }
+  },
+  "require-dev": {
+    "phpunit/phpunit": "^9.6"
+  }
 }

gulpfile.cjs

@@ -0,0 +1,49 @@
+/* eslint-disable no-undef */
+const { dest, src } = require('gulp')
+
+const replace = require('gulp-replace')
+
+const PACKAGE = require('./package.json')
+
+const FOLDER_BUILD = './build'
+
+function injectMetadata() {
+  return src(
+    [
+      FOLDER_BUILD + '/front/block-events-loader.js',
+      FOLDER_BUILD + '/' + PACKAGE.name + '.php',
+      FOLDER_BUILD + '/includes/Constants.php',
+      FOLDER_BUILD + '/readme.txt',
+    ],
+    { base: './' },
+  )
+    .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
+    .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
+    .pipe(replace('<wordpress-description>', PACKAGE.description))
+    .pipe(replace('<wordpress-donation-link>', PACKAGE.funding.url))
+    .pipe(replace('<wordpress-license>', PACKAGE.license))
+    .pipe(
+      replace(
+        '<wordpress-minimum-version>',
+        PACKAGE.additionalDetails.wordpressMinimumVersion,
+      ),
+    )
+    .pipe(replace('<wordpress-name>', PACKAGE.name))
+    .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
+    .pipe(
+      replace(
+        '<wordpress-php-minimum-version>',
+        PACKAGE.additionalDetails.phpMinimumVersion,
+      ),
+    )
+    .pipe(
+      replace(
+        '<wordpress-tested-up-to-version>',
+        PACKAGE.additionalDetails.wordpressTestedUpToVersion,
+      ),
+    )
+    .pipe(replace('<wordpress-version>', PACKAGE.version))
+    .pipe(dest('.'))
+}
+
+exports.inject = injectMetadata

gulpfile.js

@@ -1,79 +0,0 @@
-const { dest, series, src } = require('gulp');
-
-const del = require('del');
-const replace = require('gulp-replace');
-const webpack = require('webpack-stream');
-
-const PACKAGE = require('./package.json');
-
-const FOLDER_SOURCE = './source'
-const FOLDER_BUILD = './build';
-
-let mode = 'development';
-
-
-function clean(cb) {
-  del(FOLDER_BUILD);
-  cb();
-}
-
-const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader';
-const eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
-
-function bundleFrontend() {
-  return src(FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js')
-    .pipe(webpack({
-      mode,
-      entry: {
-        [eventsLoaderOutputPath]: eventsLoaderInputPath,
-      },
-      output: {
-        filename: '[name].js',
-      },
-    }))
-    .pipe(dest(FOLDER_BUILD));
-  }
-
-function copyBackend() {
-  return src([
-    FOLDER_SOURCE + '/**/*.php',
-    FOLDER_SOURCE + '/**/*.txt'
-  ])
-    .pipe(dest(FOLDER_BUILD));
-}
-
-function injectMetadata() {
-  return src([
-    FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'
-  ], { base: './' })
-    .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
-    .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
-    .pipe(replace('<wordpress-description>', PACKAGE.description))
-    .pipe(replace('<wordpress-license>', PACKAGE.license))
-    .pipe(replace('<wordpress-minimum-version>', PACKAGE.additionalDetails.wordpressMinimumVersion))
-    .pipe(replace('<wordpress-name>', PACKAGE.name))
-    .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
-    .pipe(replace('<wordpress-php-minimum-version>', PACKAGE.additionalDetails.phpMinimumVersion))
-    .pipe(replace('<wordpress-tested-up-to-version>', PACKAGE.additionalDetails.wordpressTestedUpToVersion))
-    .pipe(replace('<wordpress-version>', PACKAGE.version))
-    .pipe(dest('.'));
-}
-
-exports.front = bundleFrontend;
-exports.copy = copyBackend;
-exports.inject = injectMetadata;
-
-const build = series(clean, bundleFrontend, copyBackend, injectMetadata);
-
-const buildDev = series((cb) => { mode = 'development'; cb(); }, build);
-
-const buildProd = series((cb) => { mode = 'production'; cb(); }, build);
-
-
-exports.clean = clean;
-exports.dev = buildDev;
-exports.default = buildDev;
-exports.prod = buildProd;

package.json

@@ -1,46 +1,70 @@
 {
   "name": "connector-mobilizon",
-  "version": "0.1.0",
-  "description": "Display mobilizon events in WordPress.",
+  "version": "1.4.0-next",
+  "description": "Display Mobilizon events in WordPress.",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build-dev": "gulp dev",
-    "build-prod": "ava && gulp prod",
-    "test": "ava"
+    "build-dev": "webpack --mode=development && gulp inject",
+    "build-prod": "rimraf -- build && ava && webpack --mode=production && gulp inject",
+    "clean": "rimraf -- build",
+    "coverage": "c8 --all --reporter=html --reporter=text --include=source/**/*.js ava",
+    "eslint": "npx eslint source/**/*.js",
+    "format": "npx prettier --write .",
+    "prepare": "husky",
+    "test": "ava && ./vendor/bin/phpunit"
   },
   "author": {
     "name": "Daniel Waxweiler",
     "url": "https://www.danielwaxweiler.net/"
   },
+  "funding": {
+    "type": "individual",
+    "url": "https://paypal.me/dwaxweiler"
+  },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "^15.4.0",
-    "graphql-request": "^3.4.0",
-    "luxon": "^1.25.0"
+    "graphql": "16.11.0",
+    "luxon": "3.6.1"
   },
   "devDependencies": {
-    "ava": "^3.15.0",
-    "del": "^6.0.0",
-    "esm": "^3.2.25",
-    "gulp": "^4.0.2",
-    "gulp-replace": "^1.0.0",
-    "jsdom": "^16.4.0",
-    "webpack": "^5.11.1",
-    "webpack-cli": "^4.3.1",
-    "webpack-stream": "^6.1.1"
+    "@babel/core": "7.27.1",
+    "@babel/eslint-parser": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@wordpress/eslint-plugin": "22.10.0",
+    "ava": "6.3.0",
+    "babel-loader": "10.0.0",
+    "c8": "10.1.3",
+    "copy-webpack-plugin": "13.0.0",
+    "eslint": "8.57.1",
+    "eslint-plugin-ava": "14.0.0",
+    "eslint-plugin-jsx": "0.1.0",
+    "eslint-plugin-react": "7.37.5",
+    "esm": "3.2.25",
+    "gulp": "5.0.0",
+    "gulp-replace": "1.1.4",
+    "husky": "9.1.7",
+    "jsdom": "26.1.0",
+    "lint-staged": "15.5.2",
+    "prettier": "3.5.3",
+    "rimraf": "5.0.10",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1"
   },
   "ava": {
     "files": [
       "./source/**/*test.js"
-    ],
-    "require": [
-      "esm"
     ]
   },
   "additionalDetails": {
     "niceName": "Connector for Mobilizon",
-    "phpMinimumVersion": 5.4,
+    "phpMinimumVersion": 7.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": 5.6
+    "wordpressTestedUpToVersion": "6.8"
+  },
+  "lint-staged": {
+    "source/**/*.js": "eslint",
+    "**/*": "prettier --write --ignore-unknown"
   }
 }

phpunit.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.6/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         cacheResultFile=".phpunit.cache/test-results"
+         executionOrder="depends,defects"
+         forceCoversAnnotation="false"
+         beStrictAboutCoversAnnotation="true"
+         beStrictAboutOutputDuringTests="true"
+         beStrictAboutTodoAnnotatedTests="true"
+         convertDeprecationsToExceptions="true"
+         failOnRisky="true"
+         failOnWarning="true"
+         verbose="true">
+    <testsuites>
+        <testsuite name="default">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+
+    <coverage cacheDirectory=".phpunit.cache/code-coverage"
+              processUncoveredFiles="true">
+        <include>
+            <directory suffix=".php">source/includes</directory>
+        </include>
+    </coverage>
+</phpunit>

source/changelog.txt

@@ -0,0 +1,199 @@
+### [Unreleased]
+#### Added
+- Display "Show more events" button below the events list
+- Document basic installation
+- Add settings link to plugin on plugins page
+- Add donation link to plugin on plugins page
+#### Changed
+- Use `wp_remote_get()` instead of cURL functions for downloading the images
+#### Deprecated
+#### Removed
+#### Fixed
+- Show group not found error message in block
+#### Security
+- Escape translated strings to prevent HTML injections
+
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
+
+### [0.11.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.2
+#### Security
+- Set minimum PHP version to oldest stable 8.0
+
+### [0.10.1]
+#### Changed
+- Confirm compatibility with WordPress 6.1
+- Update dependencies
+
+### [0.10.0]
+#### Added
+- Add Gutenberg events list block
+- Show loading indicator during request
+#### Changed
+- Set list style type to none and left padding to zero for all occurences
+- Move shortcut usage description into installation section in `readme.txt`
+- Update dependencies
+
+### [0.9.1] - 2020-05-19
+#### Fixed
+- Fix WordPress compatibility version number
+
+### [0.9.0] - 2020-05-19
+#### Added
+- Improve explanation of group name filter
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.0
+#### Fixed
+- Fix displaying error message for the case the group is not found
+
+### [0.8.0] - 2022-01-09
+#### Added
+- Add support for older browsers using babel
+#### Changed
+- Confirm compatibility with WordPress 5.9
+- Update dependencies
+#### Fixed
+- Use ES modules correctly
+- Trim events' location
+
+### [0.7.0] - 2021-12-23
+#### Added
+- Add specific error message for the case the group is not found
+- Add code formatter prettier
+#### Changed
+- Update dependencies
+- Simplify build process
+#### Fixed
+- Fix Invalid DateTime on event end time being null
+#### Security
+- Set minimum PHP version to oldest stable 7.4
+
+### [0.6.2] - 2021-08-24
+#### Changed
+- Update dependencies
+#### Fixed
+- Fix empty WordPress timezone_string option resulting in Invalid DateTime
+
+### [0.6.1] - 2021-07-13
+#### Changed
+- Confirm compatibility with WordPress 5.8
+- Update dependencies
+
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/connector-mobilizon.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ * Plugin Name:       <wordpress-nice-name>
+ * Author:            <wordpress-author-name>
+ * Author URI:        <wordpress-author-url>
+ * Description:       <wordpress-description>
+ * Version:           <wordpress-version>
+ * Requires at least: <wordpress-minimum-version>
+ * Requires PHP:      <wordpress-php-minimum-version>
+ * License:           <wordpress-license>
+ */
+
+require_once __DIR__ . '/includes/exceptions/GeneralException.php';
+require_once __DIR__ . '/includes/exceptions/GroupNotFoundException.php';
+require_once __DIR__ . '/includes/Constants.php';
+require_once __DIR__ . '/includes/Api.php';
+require_once __DIR__ . '/includes/EventsCache.php';
+require_once __DIR__ . '/includes/Settings.php';
+require_once __DIR__ . '/includes/DateTimeWrapper.php';
+require_once __DIR__ . '/includes/Formatter.php';
+require_once __DIR__ . '/includes/GraphQlClient.php';
+require_once __DIR__ . '/includes/EventsListBlock.php';
+require_once __DIR__ . '/includes/EventsListShortcut.php';
+require_once __DIR__ . '/includes/EventsListWidget.php';
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+final class Mobilizon_Connector {
+
+  private function __construct() {
+    add_action('init', [$this, 'register_api']);
+    add_action('init', [$this, 'register_blocks']);
+    add_action('init', [$this, 'register_settings'], 1); // required for register_blocks
+    add_action('init', [$this, 'register_shortcut']);
+    add_action('widgets_init', [$this, 'register_widget']);
+    register_activation_hook(__FILE__, [$this, 'enable_activation']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_donation_link_to_plugins_page']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_settings_link_to_plugins_page']);
+  }
+
+  public static function init() {
+    // Create singleton instance.
+    static $instance = false;
+    if(!$instance) {
+        $instance = new self();
+    }
+    return $instance;
+  }
+
+  public function add_donation_link_to_plugins_page(array $links) {
+    $url = esc_url('<wordpress-donation-link>');
+    $settings_link = "<a href='$url'>" . esc_html__('Donate', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
+  public function add_settings_link_to_plugins_page(array $links) {
+    $url = esc_url(
+      add_query_arg(
+        'page',
+        'connector-mobilizon-settings',
+        get_admin_url() . 'options-general.php'
+      )
+    );
+    $settings_link = "<a href='$url'>" . esc_html__('Settings', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
+  public function enable_activation() {
+    MobilizonConnector\Settings::setDefaultOptions();
+  }
+
+  private function load_settings_globally_before_script($scriptName) {
+    $settings = array(
+      'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
+      'locale' => str_replace('_', '-', get_locale()),
+      'timeZone' => wp_timezone_string(),
+      'url' => MobilizonConnector\Settings::getUrl()
+    );
+    wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
+  }
+
+  public function register_api() {
+    MobilizonConnector\Api::init();
+  }
+
+  public function register_blocks() {
+    $scriptName = MobilizonConnector\EventsListBlock::initAndReturnScriptName();
+    $this->load_settings_globally_before_script($scriptName);
+  }
+
+  public function register_settings() {
+    MobilizonConnector\Settings::init();
+  }
+
+  public function register_shortcut() {
+    MobilizonConnector\EventsListShortcut::init();
+  }
+
+  public function register_widget() {
+    register_widget('MobilizonConnector\EventsListWidget');
+  }
+}
+
+function mobilizon_connector_run_plugin() {
+  return Mobilizon_Connector::init();
+}
+
+mobilizon_connector_run_plugin();

source/connector-mobilizon/connector-mobilizon.php

@@ -1,42 +0,0 @@
-<?php
-/**
- * Plugin Name: 	    <wordpress-nice-name>
- * Author: 				    <wordpress-author-name>
- * Author URI:		    <wordpress-author-url>
- * Description: 	    <wordpress-description>
- * Version:				    <wordpress-version>
- * Requires at least: <wordpress-minimum-version>
- * Requires PHP:      <wordpress-php-minimum-version>
- * License:           <wordpress-license>
- */
-
-require_once __DIR__ . '/includes/constants.php';
-require_once __DIR__ . '/includes/settings.php';
-require_once __DIR__ . '/includes/events-list-shortcut.php';
-require_once __DIR__ . '/includes/events-list-widget.php';
-
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
-function mobilizon_connector_activate() {
-	MobilizonConnector\Settings::setDefaultOptions();
-}
-register_activation_hook(__FILE__, 'mobilizon_connector_activate');
-
-function mobilizon_connector_initialize() {
-  MobilizonConnector\Settings::init();
-  MobilizonConnector\EventsListShortcut::init();
-}
-add_action('init', 'mobilizon_connector_initialize');
-
-function mobilizon_connector_load_scripts() {
-  wp_enqueue_script(MobilizonConnector\NAME . '-js', plugins_url('front/events-loader.js', __FILE__ ));
-}
-add_action('wp_enqueue_scripts', 'mobilizon_connector_load_scripts');
-
-function mobilizon_connector_register_events_list_widget() {
-  register_widget('MobilizonConnector\EventsListWidget');
-}
-add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -1,42 +0,0 @@
-import test from 'ava';
-import { DateTimeWrapper } from './date-time-wrapper';
-
-test('#getShortDate usual date', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  t.is(d.getShortDate(), '24/12/2020')
-})
-
-test('#get24Time usual time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  t.is(d.get24Time(), '17:45')
-})
-
-test('#equalsDate same date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-24T17:46:01Z')
-  t.true(d.equalsDate(e))
-})
-
-test('#equalsDate different date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-11-25T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different day, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-25T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different month, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-11-24T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different year, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-12-24T17:46:01Z')
-  t.false(d.equalsDate(e))
-})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -1,24 +0,0 @@
-import { DateTime } from 'luxon';
-
-export class DateTimeWrapper {
-
-  constructor(text) {
-    this.dateTime = DateTime.fromISO(text)
-  }
-
-  getShortDate() {
-    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
-  }
-
-  get24Time() {
-    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
-  }
-
-  equalsDate(other) {
-    return this.dateTime &&
-      other.dateTime &&
-      this.dateTime.day === other.dateTime.day &&
-      this.dateTime.month === other.dateTime.month &&
-      this.dateTime.year === other.dateTime.year
-  }
-}

source/connector-mobilizon/front/events-loader.js

@@ -1,62 +0,0 @@
-import { DateTimeWrapper } from './date-time-wrapper';
-import * as GraphqlWrapper from './graphql-wrapper'
-import * as HtmlCreator from './html-creator'
-
-const NAME = '<wordpress-name>';
-
-function displayEvents(data, lists) {
-  for (let list of lists) {
-    const maxEventsCount = list.getAttribute('data-maximum')
-    const events = data.events.elements
-    const eventsCount = Math.min(maxEventsCount, events.length)
-    for (let i = 0; i < eventsCount; i++) {
-      const li = document.createElement('li')
-      
-      const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
-      li.appendChild(a)
-
-      const br = document.createElement('br')
-      li.appendChild(br)
-
-      const beginsOn = new DateTimeWrapper(events[i].beginsOn)
-      const endsOn = new DateTimeWrapper(events[i].endsOn)
-      let dateText = beginsOn.getShortDate()
-      dateText += ' ' + beginsOn.get24Time()
-      dateText += ' - '
-      if (!beginsOn.equalsDate(endsOn)) {
-          dateText += endsOn.getShortDate() + ' '
-      }
-      dateText += endsOn.get24Time()
-      const textnode = document.createTextNode(dateText);
-      li.appendChild(textnode)
-
-      list.appendChild(li)
-    }
-  }
-}
-
-function displayErrorMessage(data, lists) {
-  console.error(data)
-  for (let list of lists) {
-    for (let i = 0; i < list.children.length; i++) {
-      list.children[i].style.display = 'block'
-    }
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list');
-  if (eventLists.length) {
-    // Currently, the URL is the same for all widgets, so just take the first one.
-    const url = eventLists[0].getAttribute('data-url') + '/api';
-
-    let maxEventsCount = 0
-    for (let list of eventLists) {
-      maxEventsCount = Math.max(maxEventsCount, list.getAttribute('data-maximum'))
-    }
-
-    GraphqlWrapper.getEvents({ url, limit: maxEventsCount })
-      .then((data) => displayEvents(data, eventLists))
-      .catch((data) => displayErrorMessage(data, eventLists))
-  }
-})

source/connector-mobilizon/front/graphql-wrapper.js

@@ -1,19 +0,0 @@
-import { request, gql } from 'graphql-request'
-
-export function getEvents({ url, limit }) {  
-  const query = gql`
-  query {
-    events(limit:${limit}) {
-      elements {
-        id,
-        title,
-        url,
-        beginsOn,
-        endsOn
-      },
-      total
-    }
-  }
-  `
-  return request(url, query)
-}

source/connector-mobilizon/front/html-creator-test.js

@@ -1,15 +0,0 @@
-import test from 'ava';
-import { JSDOM } from 'jsdom';
-
-import * as HtmlCreator from './html-creator';
-
-test.beforeEach(() => {
-  global.document = new JSDOM().window.document
-})
-
-test('createAnchorElement() usual parameters', t => {
-  const a = HtmlCreator.createAnchorElement({ text: 'a', url: 'b' })
-  t.is(a.tagName, 'A')
-  t.is(a.innerHTML, 'a')
-	t.is(a.getAttribute('href'), 'b')
-})

source/connector-mobilizon/front/html-creator.js

@@ -1,7 +0,0 @@
-export function createAnchorElement({ text, url }) {
-  const a = document.createElement('a')
-  a.setAttribute('href', url)
-  a.setAttribute('target', '_blank')
-  a.innerHTML = text
-  return a
-}

source/connector-mobilizon/includes/events-list-shortcut.php

@@ -1,36 +0,0 @@
-<?php
-namespace MobilizonConnector;
-
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
-class EventsListShortcut {
-  
-  public static function init() {
-    add_shortcode(NAME . '-events-list', 'MobilizonConnector\EventsListShortcut::inflate');
-  }
-
-  public static function inflate($atts = [], $content = null) {
-    // Normalize attribute keys, lowercase.
-    $atts = array_change_key_case((array) $atts, CASE_LOWER);
- 
-    // Override default attributes with user attributes.
-    $atts_with_overriden_defaults = shortcode_atts(
-      array(
-        'events-count' => DEFAULT_EVENTS_COUNT,
-      ), $atts
-    );
-
-    $classNamePrefix = NAME;
-    $eventsCount = $atts_with_overriden_defaults['events-count'];
-    $url = Settings::getUrl();
-    $textDomain = TEXT_DOMAIN;
-
-    ob_start();
-    require dirname(__DIR__) . '/view/events-list.php';
-    $output = ob_get_clean();
-    return $output;
-  }
-}

source/connector-mobilizon/includes/events-list-widget.php

@@ -1,55 +0,0 @@
-<?php
-namespace MobilizonConnector;
-
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
-class EventsListWidget extends \WP_Widget {
-
-  public function __construct() {
-    parent::__construct(
-      NAME . '-events-list',
-      NICE_NAME . ' ' . esc_html__('Events List', TEXT_DOMAIN),
-      array(
-        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', TEXT_DOMAIN),
-      ),
-    );
-  }
-
-  public function widget($args, $options) {
-    echo $args['before_widget'];
-
-    if (!empty($options['title'])) {
-      echo $args['before_title'].apply_filters('widget_title', $options['title']).$args['after_title'];
-    }
-
-    $classNamePrefix = NAME;
-    $eventsCount = $options['eventsCount'];
-    $url = Settings::getUrl();
-    $textDomain = TEXT_DOMAIN;
-
-    require dirname(__DIR__) . '/view/events-list.php';
-
-    echo $args['after_widget'];
-  }
-
-  public function form($options) {
-    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
-    $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
-    $textDomain = TEXT_DOMAIN;
-    
-    require dirname(__DIR__) . '/view/events-list-widget/form.php';
-  }
-
-  public function update($new_options, $old_options) {
-    if (!current_user_can('edit_theme_options')) {
-      return;
-    }
-    $options = array();
-    $options['title'] = !empty($new_options['title']) ? sanitize_text_field($new_options['title']) : '';
-    $options['eventsCount'] = !empty($new_options['eventsCount']) ? sanitize_text_field($new_options['eventsCount']) : 5;
-    return $options;
-  }
-}

source/connector-mobilizon/readme.txt

@@ -1,30 +0,0 @@
-=== <wordpress-nice-name> ===
-Contributors: dwaxweiler
-Tags: mobilizon, events
-Stable tag: <wordpress-version>
-Requires at least: <wordpress-minimum-version>
-Tested up to: <wordpress-tested-up-to-version>
-Requires PHP: <wordpress-php-minimum-version>
-License: <wordpress-license>
-
-<wordpress-description>
-
-== Description ==
-
-<wordpress-nice-name> allows you to display the upcoming events of one Mobilizon instance.
-[Mobilizon](https://joinmobilizon.org/) is an event listening tool.
-
-You can display the upcoming events using a widget and everywhere else using a shortcut.
-
-Shortcut format with limiting the number of events to show to 3: `[<wordpress-name>-events-list events-count=3]`
-
-== Screenshots ==
-1. Events list
-2. General settings
-3. Widget creation
-4. Shortcut creation
-
-== Changelog ==
-
-= 0.1.0 =
-* initial release

source/connector-mobilizon/view/events-list.php

@@ -1,11 +0,0 @@
-<?php
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-?>
-<ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
-  data-maximum="<?php echo esc_attr($eventsCount); ?>"
-  data-url="<?php echo esc_attr($url); ?>">
-  <li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
-</ul>

source/front/block-events-loader.js

@@ -0,0 +1 @@
+import './blocks/events-list/index.js'

source/front/blocks/events-list/edit.js

@@ -0,0 +1,147 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable @wordpress/i18n-ellipsis */
+import {
+  clearEventsList,
+  displayErrorMessage,
+  displayEvents,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from '../../events-displayer.js'
+import Formatter from '../../formatter.js'
+
+const { InspectorControls, useBlockProps } = wp.blockEditor
+const { Panel, PanelBody } = wp.components
+const { useEffect } = wp.element
+const { __ } = wp.i18n
+
+const NAME = '<wordpress-name>'
+
+export default ({ attributes, setAttributes }) => {
+  let timer
+  const blockProps = useBlockProps({
+    className: NAME + '_events-list',
+  })
+  function reloadEventList(eventsCount, groupName) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(async () => {
+      const container = document.getElementById(blockProps.id)
+      if (container) {
+        hideErrorMessages(container)
+        clearEventsList(container)
+        showLoadingIndicator(container)
+        let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
+        let showMoreUrl = window.MOBILIZON_CONNECTOR.url
+        if (groupName) {
+          showMoreUrl += '/@' + groupName + '/events'
+          url += `&groupName=${groupName}`
+        }
+        container.querySelector('a').href = showMoreUrl
+        await fetch(url)
+          .then(async (response) => {
+            if (!response.ok) {
+              // Reject if no 2xx response.
+              const data = await response.text()
+              return Promise.reject(data)
+            }
+            return response.text()
+          })
+          .then((data) => {
+            const events = JSON.parse(data)
+            displayEvents({
+              events,
+              document,
+              container,
+              maxEventsCount: eventsCount,
+            })
+          })
+          .catch((data) => {
+            const parsedData = JSON.parse(data)
+            displayErrorMessage({ data: parsedData, container })
+          })
+      }
+    }, 500)
+  }
+  useEffect(() => {
+    reloadEventList(attributes.eventsCount, attributes.groupName)
+  }, [])
+  function updateEventsCount(event) {
+    let newValue = Number(event.target.value)
+    if (newValue < 1) {
+      newValue = 1
+    }
+    setAttributes({ eventsCount: newValue })
+    reloadEventList(newValue, attributes.groupName)
+  }
+  function updateGroupName(event) {
+    const newValue = event.target.value
+    setAttributes({ groupName: newValue })
+    reloadEventList(attributes.eventsCount, newValue)
+  }
+  return [
+    <InspectorControls>
+      <Panel>
+        <PanelBody
+          title={Formatter.escapeHTML(
+            __('Events List Settings', '<wordpress-name>'),
+          )}
+        >
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_events-count'}
+          >
+            {Formatter.escapeHTML(
+              __('Number of events to show', '<wordpress-name>'),
+            )}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="number"
+            value={attributes.eventsCount}
+            onChange={updateEventsCount}
+            id={NAME + '_events-count'}
+          />
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_group-name'}
+          >
+            {Formatter.escapeHTML(
+              __('Group name (optional)', '<wordpress-name>'),
+            )}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="text"
+            value={attributes.groupName}
+            onChange={updateGroupName}
+            id={NAME + '_group-name'}
+          />
+        </PanelBody>
+      </Panel>
+    </InspectorControls>,
+    <div {...blockProps}>
+      <div className="general-error" style={{ display: 'none' }}>
+        {Formatter.escapeHTML(
+          __('The events could not be loaded!', '<wordpress-name>'),
+        )}
+      </div>
+      <div className="group-not-found" style={{ display: 'none' }}>
+        {Formatter.escapeHTML(
+          __('The group could not be found!', '<wordpress-name>'),
+        )}
+      </div>
+      <div className="loading-indicator" style={{ display: 'none' }}>
+        {Formatter.escapeHTML(__('Loading...', '<wordpress-name>'))}
+      </div>
+      <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+      <a
+        href=""
+        target="_blank"
+        style={{ display: 'inline-block', 'margin-top': '20px;' }}
+      >
+        {Formatter.escapeHTML(__('Show more events', '<wordpress-name>'))}
+      </a>
+    </div>,
+  ]
+}

source/front/blocks/events-list/index.js

@@ -0,0 +1,7 @@
+import edit from './edit.js'
+
+const { registerBlockType } = wp.blocks
+
+const NAME = '<wordpress-name>'
+
+registerBlockType(NAME + '/events-list', { edit })

source/front/date-time-wrapper-test.js

@@ -0,0 +1,87 @@
+import test from 'ava'
+import DateTimeWrapper from './date-time-wrapper.js'
+
+test('#getShortDate usual date', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with timezone string', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: 'Europe/Rome',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with fixed offset', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: 'UTC+02:00',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with fixed offset without UTC prefix', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: '+02:00',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with empty time zone', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: '' })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#get24Time usual time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.get24Time(), '16:45')
+})
+
+test('#equalsDate same date, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-24T17:46:01Z' })
+  t.true(d.equalsDate(e))
+})
+
+test('#equalsDate different date, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-11-25T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different day, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-25T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different month, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-11-24T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different year, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-12-24T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#getCurrentDatetimeAsString correct format', (t) => {
+  const d = DateTimeWrapper.getCurrentDatetimeAsString()
+  t.is(d[4], '-')
+  t.is(d[7], '-')
+  t.is(d[10], 'T')
+  t.is(d[13], ':')
+  t.is(d[16], ':')
+  t.is(d[19], '.')
+  t.is(d[d.length - 3], ':')
+})
+
+test('#getShortOffsetName usual time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortOffsetName(), 'UTC')
+})

source/front/date-time-wrapper.js

@@ -0,0 +1,42 @@
+import { DateTime } from 'luxon'
+
+export default class DateTimeWrapper {
+  constructor({ locale = 'en-GB', text, timeZone = 'utc' } = {}) {
+    if (!timeZone) {
+      timeZone = 'utc'
+    }
+    if (
+      timeZone.includes(':') &&
+      timeZone.substring(0, 3).toUpperCase() !== 'UTC'
+    ) {
+      timeZone = 'UTC' + timeZone
+    }
+    this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
+  }
+
+  getShortDate() {
+    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
+  }
+
+  getShortOffsetName() {
+    return this.dateTime.offsetNameShort
+  }
+
+  get24Time() {
+    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
+  }
+
+  equalsDate(other) {
+    return (
+      this.dateTime &&
+      other.dateTime &&
+      this.dateTime.day === other.dateTime.day &&
+      this.dateTime.month === other.dateTime.month &&
+      this.dateTime.year === other.dateTime.year
+    )
+  }
+
+  static getCurrentDatetimeAsString() {
+    return DateTime.now().toString()
+  }
+}

source/front/events-displayer-test.js

@@ -0,0 +1,113 @@
+import test from 'ava'
+import { JSDOM } from 'jsdom'
+
+import {
+  displayEvents,
+  displayErrorMessage,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from './events-displayer.js'
+
+test.before(() => {
+  const dom = new JSDOM()
+  global.document = dom.window.document
+  global.window = dom.window
+  window.MOBILIZON_CONNECTOR = {
+    locale: 'en-GB',
+    timeZone: 'utc',
+  }
+})
+
+test.beforeEach((t) => {
+  t.context.container = document.createElement('div')
+
+  const errorMessageGeneral = document.createElement('div')
+  errorMessageGeneral.setAttribute('class', 'general-error')
+  errorMessageGeneral.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(errorMessageGeneral)
+
+  const errorMessageGroupNotFound = document.createElement('div')
+  errorMessageGroupNotFound.setAttribute('class', 'group-not-found')
+  errorMessageGroupNotFound.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(errorMessageGroupNotFound)
+
+  const loadingIndicator = document.createElement('div')
+  loadingIndicator.setAttribute('class', 'loading-indicator')
+  loadingIndicator.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(loadingIndicator)
+
+  const list = document.createElement('ul')
+  t.context.container.appendChild(list)
+})
+
+test('#displayEvents one event', (t) => {
+  const events = [
+    {
+      title: 'a',
+      url: 'b',
+      beginsOn: '2021-04-15T10:30:00Z',
+      endsOn: '2021-04-15T15:30:00Z',
+      physicalAddress: {
+        description: 'c',
+        locality: 'd',
+      },
+    },
+  ]
+  const container = t.context.container
+  displayEvents({ events, document, container, maxEventsCount: 2 })
+  const list = container.querySelector('ul')
+  t.is(list.children[0].childNodes[0].tagName, 'A')
+  t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
+  t.is(list.children[0].childNodes[0].childNodes[0].nodeValue, 'a')
+  t.is(list.children[0].childNodes[1].tagName, 'BR')
+  t.is(list.children[0].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
+  t.is(list.children[0].childNodes[3].tagName, 'BR')
+  t.is(list.children[0].childNodes[4].nodeValue, 'c, d')
+})
+
+test('#displayErrorMessage no list entries shown', (t) => {
+  const container = t.context.container
+  displayErrorMessage({ data: '', container })
+  const list = container.querySelector('ul')
+  t.is(list.children.length, 0)
+})
+
+test('#displayErrorMessage general error message display', (t) => {
+  const container = t.context.container
+  displayErrorMessage({ data: '', container })
+  t.is(container.querySelector('.general-error').style.display, 'block')
+  t.is(container.querySelector('.group-not-found').style.display, 'none')
+  t.is(container.querySelector('.loading-indicator').style.display, 'none')
+})
+
+test('#displayErrorMessage group not found error message display', (t) => {
+  const container = t.context.container
+  const data = {
+    code: 'group_not_found',
+  }
+  displayErrorMessage({ data, container })
+  t.is(container.querySelector('.general-error').style.display, 'none')
+  t.is(container.querySelector('.group-not-found').style.display, 'block')
+  t.is(container.querySelector('.loading-indicator').style.display, 'none')
+})
+
+test('#showLoadingIndicator remove events', (t) => {
+  const container = t.context.container
+  const loadingIndicator = container.querySelector('.loading-indicator')
+  t.is(loadingIndicator.style.display, 'none')
+  showLoadingIndicator(container)
+  t.is(loadingIndicator.style.display, 'block')
+})
+
+test('#hideErrorMessages remove events', (t) => {
+  const container = t.context.container
+  const generalErrorMessage = container.querySelector('.general-error')
+  const groupNotFoundErrorMessage = container.querySelector('.group-not-found')
+  generalErrorMessage.style.display = 'block'
+  groupNotFoundErrorMessage.style.display = 'block'
+  t.is(generalErrorMessage.style.display, 'block')
+  t.is(groupNotFoundErrorMessage.style.display, 'block')
+  hideErrorMessages(container)
+  t.is(generalErrorMessage.style.display, 'none')
+  t.is(groupNotFoundErrorMessage.style.display, 'none')
+})

source/front/events-displayer.js

@@ -0,0 +1,98 @@
+import Formatter from './formatter.js'
+import { createAnchorElement, createImageElement } from './html-creator.js'
+
+export function clearEventsList(container) {
+  const list = container.querySelector('ul')
+  list.replaceChildren()
+}
+
+export function displayEvents({ events, document, container, maxEventsCount }) {
+  hideLoadingIndicator(container)
+
+  const isShortOffsetNameShown =
+    window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
+  const locale = window.MOBILIZON_CONNECTOR.locale
+  const timeZone = window.MOBILIZON_CONNECTOR.timeZone
+
+  const eventsCount = Math.min(maxEventsCount, events.length)
+  const list = container.querySelector('ul')
+  for (let i = 0; i < eventsCount; i++) {
+    const li = document.createElement('li')
+    li.style.lineHeight = '150%'
+    li.style.marginTop = '20px'
+
+    if (events[i].picture) {
+      const img = createImageElement({
+        document,
+        alt: events[i].picture.alt ? events[i].picture.alt : '',
+        src: events[i].picture.base64 ? events[i].picture.base64 : '',
+      })
+      img.style.display = 'block'
+      img.style.maxWidth = '100%'
+      li.appendChild(img)
+    }
+
+    const a = createAnchorElement({
+      document,
+      text: events[i].title,
+      url: events[i].url,
+    })
+    li.appendChild(a)
+
+    const br = document.createElement('br')
+    li.appendChild(br)
+
+    const date = Formatter.formatDate({
+      locale,
+      start: events[i].beginsOn,
+      end: events[i].endsOn,
+      timeZone,
+      isShortOffsetNameShown,
+    })
+    const textnode = document.createTextNode(date)
+    li.appendChild(textnode)
+
+    if (events[i].physicalAddress) {
+      const location = Formatter.formatLocation({
+        description: events[i].physicalAddress.description,
+        locality: events[i].physicalAddress.locality,
+      })
+      if (location) {
+        const brBeforeLocation = document.createElement('br')
+        li.appendChild(brBeforeLocation)
+
+        const textnodeLocation = document.createTextNode(location)
+        li.appendChild(textnodeLocation)
+      }
+    }
+
+    list.appendChild(li)
+  }
+}
+
+export function displayErrorMessage({ data, container }) {
+  hideLoadingIndicator(container)
+  if (Object.hasOwn(data, 'code') && data.code === 'group_not_found') {
+    const message = container.querySelector('.group-not-found')
+    message.style.display = 'block'
+  } else {
+    const message = container.querySelector('.general-error')
+    message.style.display = 'block'
+    console.error(data)
+  }
+}
+
+export function showLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'block'
+}
+
+function hideLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'none'
+}
+
+export function hideErrorMessages(container) {
+  container.querySelector('.group-not-found').style.display = 'none'
+  container.querySelector('.general-error').style.display = 'none'
+}

source/front/formatter-test.js

@@ -0,0 +1,85 @@
+import test from 'ava'
+import { JSDOM } from 'jsdom'
+
+import Formatter from './formatter.js'
+
+test.beforeEach(() => {
+  const dom = new JSDOM()
+  global.document = dom.window.document
+})
+
+test('#escapeHTML', (t) => {
+  const escaped = Formatter.escapeHTML('<b>a</b>')
+  t.is(escaped, '&lt;b&gt;a&lt;/b&gt;')
+})
+
+test('#formatDate one date', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-15T15:30:00Z',
+  })
+  t.is(date, '15/04/2021 10:30 - 15:30')
+})
+
+test('#formatDate one date with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-15T15:30:00Z',
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
+})
+
+test('#formatDate two dates', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-16T15:30:00Z',
+  })
+  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
+})
+
+test('#formatDate two dates with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-16T15:30:00Z',
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30 (UTC)')
+})
+
+test('#formatDate second date is null', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: null,
+  })
+  t.is(date, '15/04/2021 10:30')
+})
+
+test('#formatDate second date is null with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: null,
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 (UTC)')
+})
+
+test('#formatLocation both parameters', (t) => {
+  const location = Formatter.formatLocation({ description: 'a', locality: 'b' })
+  t.is(location, 'a, b')
+})
+
+test('#formatLocation description only', (t) => {
+  const location = Formatter.formatLocation({ description: 'a' })
+  t.is(location, 'a')
+})
+
+test('#formatLocation description with space only', (t) => {
+  const location = Formatter.formatLocation({ description: ' ' })
+  t.is(location, '')
+})
+
+test('#formatLocation locality only', (t) => {
+  const location = Formatter.formatLocation({ locality: 'a' })
+  t.is(location, 'a')
+})

source/front/formatter.js

@@ -0,0 +1,51 @@
+import DateTimeWrapper from './date-time-wrapper.js'
+
+export default class Formatter {
+  static escapeHTML(input) {
+    const div = document.createElement('div')
+    div.appendChild(document.createTextNode(input))
+    return div.innerHTML
+  }
+
+  static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
+    const startDateTime = new DateTimeWrapper({
+      locale,
+      text: start,
+      timeZone,
+    })
+    let dateText = startDateTime.getShortDate()
+    dateText += ' ' + startDateTime.get24Time()
+    if (!end && isShortOffsetNameShown) {
+      dateText += ' (' + startDateTime.getShortOffsetName() + ')'
+    }
+
+    if (end) {
+      const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
+      if (!startDateTime.equalsDate(endDateTime)) {
+        dateText += ' - '
+        dateText += endDateTime.getShortDate() + ' '
+      } else {
+        dateText += ' - '
+      }
+      dateText += endDateTime.get24Time()
+      if (isShortOffsetNameShown) {
+        dateText += ' (' + endDateTime.getShortOffsetName() + ')'
+      }
+    }
+    return dateText
+  }
+
+  static formatLocation({ description, locality }) {
+    let location = ''
+    if (description && description.trim()) {
+      location += description.trim()
+    }
+    if (location && locality) {
+      location += ', '
+    }
+    if (locality) {
+      location += locality
+    }
+    return location
+  }
+}

source/front/html-creator-test.js

@@ -0,0 +1,16 @@
+import test from 'ava'
+import { JSDOM } from 'jsdom'
+
+import { createAnchorElement } from './html-creator.js'
+
+test.beforeEach(() => {
+  const dom = new JSDOM()
+  global.document = dom.window.document
+})
+
+test('#createAnchorElement usual parameters', (t) => {
+  const a = createAnchorElement({ document, text: 'a', url: 'b' })
+  t.is(a.tagName, 'A')
+  t.is(a.innerHTML, 'a')
+  t.is(a.getAttribute('href'), 'b')
+})

source/front/html-creator.js

@@ -0,0 +1,14 @@
+export function createAnchorElement({ document, text, url }) {
+  const a = document.createElement('a')
+  a.setAttribute('href', url)
+  a.setAttribute('target', '_blank')
+  a.innerHTML = text
+  return a
+}
+
+export function createImageElement({ document, alt, src }) {
+  const img = document.createElement('img')
+  img.setAttribute('alt', alt)
+  img.setAttribute('src', src)
+  return img
+}

source/includes/Api.php

@@ -0,0 +1,53 @@
+<?php
+namespace MobilizonConnector;
+
+class Api {
+  public static function init() {
+    add_action('rest_api_init', 'MobilizonConnector\Api::init_api');
+  }
+
+  public static function init_api() {
+    register_rest_route(
+      NAME . '/v1',
+      '/events',
+      [
+        'methods' => 'GET',
+        'callback' => 'MobilizonConnector\Api::get_events',
+        'args' => [
+          'eventsCount' => [
+            'required' => true,
+            'validate_callback' => function($param, $request, $key) {
+              return is_numeric($param) && $param > 0;
+            }
+          ],
+          'groupName' => [
+            'validate_callback' => function($param, $request, $key) {
+              return !is_numeric($param);
+            }
+          ]
+        ],
+        'permission_callback' => '__return_true',
+      ]
+      );
+  }
+
+  public static function get_events($request) {
+    $eventsCount = $request['eventsCount'];
+    $groupName = isset($request['groupName']) ? $request['groupName'] : '';
+
+    $url = Settings::getUrl();
+
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+      return $events;
+    } catch (GeneralException $e) {
+      return new \WP_Error('events_not_loading', 'The events could not be loaded!', array('status' => 500));
+    } catch (GroupNotFoundException $e) {
+      return new \WP_Error('group_not_found', sprintf('The group "%s" could not be found!', $groupName), array('status' => 404));
+    }
+  }
+}

source/includes/Constants.php

@@ -1,12 +1,6 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 const DEFAULT_EVENTS_COUNT = 5;
 const NAME = '<wordpress-name>';
 const NICE_NAME = '<wordpress-nice-name>';
-const TEXT_DOMAIN = '<wordpress-name>';

source/includes/DateTimeWrapper.php

@@ -0,0 +1,34 @@
+<?php
+namespace MobilizonConnector;
+
+final class DateTimeWrapper {
+  private $dateTime;
+  private $locale;
+  private $timeZone;
+
+  public function __construct(string $text, string $locale = 'en-GB', string $timeZone = 'utc') {
+    if (!$locale) {
+      $locale = 'en-GB';
+    }
+    if (!$timeZone) {
+      $timeZone = 'utc';
+    }
+    $this->dateTime = new \DateTime($text);
+    $this->locale = $locale;
+    $this->timeZone = new \DateTimeZone($timeZone);
+  }
+
+  public function get24Time(): string {
+    $formatter = \IntlDateFormatter::create($this->locale, \IntlDateFormatter::NONE, \IntlDateFormatter::SHORT, $this->timeZone);
+    return $formatter->format($this->dateTime);
+  }
+
+  public function getShortDate(): string {
+    $formatter = \IntlDateFormatter::create($this->locale, \IntlDateFormatter::SHORT, \IntlDateFormatter::NONE, $this->timeZone);
+    return $formatter->format($this->dateTime);
+  }
+
+  public function getTimeZoneName(): string {
+    return $this->timeZone->getName();
+  }
+}

source/includes/EventsCache.php

@@ -0,0 +1,19 @@
+<?php
+namespace MobilizonConnector;
+
+final class EventsCache {
+
+  private static $MAX_AGE_IN_S = 120;
+
+  public static function set(array $parameters, mixed $data): void {
+    // md5 is used as key must be 172 characters or fewer in length.
+    $key = md5(json_encode($parameters));
+    set_transient($key, $data, self::$MAX_AGE_IN_S);
+  }
+
+  public static function get(array $parameters): mixed {
+    $key = md5(json_encode($parameters));
+    $data = get_transient($key);
+    return $data;
+  }
+}

source/includes/EventsListBlock.php

@@ -0,0 +1,67 @@
+<?php
+namespace MobilizonConnector;
+
+class EventsListBlock {
+
+  public static function initAndReturnScriptName(): string {
+    $scriptName = NAME . '-block-starter';
+    wp_register_script($scriptName, plugins_url(NAME . '/front/block-events-loader.js'), [
+        'wp-block-editor',
+        'wp-blocks',
+        'wp-components',
+        'wp-i18n'
+      ], '<wordpress-version>', array('in_footer' => true));
+    register_block_type(NAME . '/events-list', [
+      'api_version' => 2,
+      'title' => esc_html__('Events List', 'connector-mobilizon'),
+      'description' =>  esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+      'category' => 'widgets',
+      'icon' => 'list-view',
+      'supports' => [
+        'html' => false
+      ],
+      'attributes' => [
+        'eventsCount' => [
+          'type' => 'number',
+          'default' => 3,
+        ],
+        'groupName' => [
+          'type' => 'string',
+        ],
+      ],
+      'editor_script' => $scriptName,
+      'render_callback' => 'MobilizonConnector\EventsListBlock::render',
+    ]);
+    return $scriptName;
+  }
+
+  public static function render($block_attributes, $content) {
+    $url = Settings::getUrl();
+    $eventsCount = $block_attributes['eventsCount'];
+    $groupName = isset($block_attributes['groupName']) ? $block_attributes['groupName'] : '';
+    $classNamePrefix = NAME;
+
+    ob_start();
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
+
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
+    $output = ob_get_clean();
+    return $output;
+  }
+}

source/includes/EventsListShortcut.php

@@ -0,0 +1,50 @@
+<?php
+namespace MobilizonConnector;
+
+class EventsListShortcut {
+  
+  public static function init() {
+    add_shortcode(NAME . '-events-list', 'MobilizonConnector\EventsListShortcut::inflate');
+  }
+
+  public static function inflate($atts = [], $content = null) {
+    // Normalize attribute keys, lowercase.
+    $atts = array_change_key_case((array) $atts, CASE_LOWER);
+ 
+    // Override default attributes with user attributes.
+    $atts_with_overriden_defaults = shortcode_atts(
+      array(
+        'events-count' => DEFAULT_EVENTS_COUNT,
+        'group-name' => '',
+      ), $atts
+    );
+
+    $url = Settings::getUrl();
+    $eventsCount = $atts_with_overriden_defaults['events-count'];
+    $groupName = $atts_with_overriden_defaults['group-name'];
+    $classNamePrefix = NAME;
+
+    ob_start();
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
+
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
+    $output = ob_get_clean();
+    return $output;
+  }
+}

source/includes/EventsListWidget.php

@@ -0,0 +1,69 @@
+<?php
+namespace MobilizonConnector;
+
+class EventsListWidget extends \WP_Widget {
+
+  public function __construct() {
+    parent::__construct(
+      NAME . '-events-list',
+      NICE_NAME . ' ' . esc_html__('Events List', 'connector-mobilizon'),
+      array(
+        'description' => esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+      ),
+    );
+  }
+
+  public function widget($args, $options) {
+    echo $args['before_widget'];
+
+    if (!empty($options['title'])) {
+      echo $args['before_title'].apply_filters('widget_title', $options['title']).$args['after_title'];
+    }
+
+    $url = Settings::getUrl();
+    $eventsCount = $options['eventsCount'];
+    $groupName = isset($options['groupName']) ? $options['groupName'] : '';
+    $classNamePrefix = NAME;
+
+    try {
+      $showMoreUrl = Settings::getUrl();
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
+  
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
+
+    echo $args['after_widget'];
+  }
+
+  public function form($options) {
+    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', 'connector-mobilizon');
+    $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
+    $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
+    
+    require dirname(__DIR__) . '/view/events-list-widget/form.php';
+  }
+
+  public function update($new_options, $old_options) {
+    if (!current_user_can('edit_theme_options')) {
+      return;
+    }
+    $options = array();
+    $options['title'] = !empty($new_options['title']) ? sanitize_text_field($new_options['title']) : '';
+    $options['eventsCount'] = !empty($new_options['eventsCount']) ? sanitize_text_field($new_options['eventsCount']) : 5;
+    $options['groupName'] = !empty($new_options['groupName']) ? sanitize_text_field($new_options['groupName']) : '';
+    return $options;
+  }
+}

source/includes/Formatter.php

@@ -0,0 +1,42 @@
+<?php
+namespace MobilizonConnector;
+
+final class Formatter
+{
+  public static function format_date(string $locale, string $timeZone, string $start, ?string $end, bool $isShortOffsetNameShown): string {
+    $startDateTime = new DateTimeWrapper($start, $locale, $timeZone);
+    $dateText = $startDateTime->getShortDate();
+    $dateText .= ' ' . $startDateTime->get24Time();
+    if (!$end && $isShortOffsetNameShown) {
+      $dateText .= ' (' . $startDateTime->getTimeZoneName() . ')';
+    }
+    if ($end) {
+      $endDateTime = new DateTimeWrapper($end, $locale, $timeZone);
+      if ($startDateTime->getShortDate() != $endDateTime->getShortDate()) {
+        $dateText .= ' - ';
+        $dateText .= $endDateTime->getShortDate() . ' ';
+      } else {
+        $dateText .= ' - ';
+      }
+      $dateText .= $endDateTime->get24Time();
+      if ($isShortOffsetNameShown) {
+        $dateText .= ' (' . $endDateTime->getTimeZoneName() . ')';
+      }
+    }
+    return $dateText;
+  }
+
+  public static function format_location(string $description, ?string $locality): string {
+    $location = '';
+    if ($description && trim($description)) {
+      $location .= trim($description);
+    }
+    if ($location && $locality) {
+      $location .= ', ';
+    }
+    if ($locality) {
+      $location .= $locality;
+    }
+    return $location;
+  }
+}

source/includes/GraphQlClient.php

@@ -0,0 +1,152 @@
+<?php
+namespace MobilizonConnector;
+
+final class GraphQlClient {
+
+  public static function query(string $endpoint, string $query, array $variables = [], ?string $token = null): array
+  {
+    $headers = ['Content-Type: application/json'];
+    if ($token !== null) {
+        $headers[] = "Authorization: bearer $token";
+    }
+
+    $context = stream_context_create([
+        'http' => [
+            'method' => 'POST',
+            'header' => $headers,
+            'content' => json_encode(['query' => $query, 'variables' => $variables]),
+        ]
+      ]);
+    $data = @file_get_contents($endpoint, false, $context);
+
+    if ($data === false) {
+      $error = error_get_last();
+      throw new \ErrorException($error['message'], $error['type']);
+    }
+
+    return json_decode($data, true);
+  }
+
+  public static function get_upcoming_events(string $url, int $limit): array {
+    $query = <<<'GRAPHQL'
+      query ($limit: Int) {
+        events(limit: $limit) {
+          elements {
+            id,
+            title,
+            url,
+            beginsOn,
+            endsOn,
+            physicalAddress {
+              description,
+              locality
+            },
+            picture {
+              alt,
+              contentType,
+              url
+            }
+          },
+          total
+        }
+      }
+      GRAPHQL;
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['events']['elements'];
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
+    EventsCache::set(['url' => $url, 'query' => $query, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  public static function get_upcoming_events_by_group_name(string $url, int $limit, string $groupName): array {
+    $query = <<<'GRAPHQL'
+      query ($afterDatetime: DateTime, $groupName: String!, $limit: Int) {
+        group(preferredUsername: $groupName) {
+          organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
+            elements {
+              id,
+              title,
+              url,
+              beginsOn,
+              endsOn,
+              physicalAddress {
+                description,
+                locality
+              },
+              picture {
+                alt,
+                contentType,
+                url
+              }
+            },
+            total
+          }
+        }
+      }
+      GRAPHQL;
+
+    $afterDatetime = date(\DateTime::ISO8601);
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['group']['organizedEvents']['elements'];
+    
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
+    EventsCache::set(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  private static function checkData($data) {
+    if (isset($data['errors'])) {
+      if (count($data['errors']) > 0 &&
+          isset($data['errors'][0]['code']) &&
+          $data['errors'][0]['code'] === 'group_not_found') {
+        throw new GroupNotFoundException(serialize($data['errors'][0]));
+      } else {
+        throw new GeneralException(serialize($data['errors']));
+      }
+    }
+  }
+
+  private static function download_image($url) {
+    $response = wp_remote_get($url);
+    $image_data = $response['body'];
+    return $image_data;
+  }
+}

source/includes/Settings.php

@@ -1,17 +1,15 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class Settings {
 
   private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
+  private static $DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN = false;
   private static $PAGE_NAME = 'wordpress_mobilizon';
   private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
+  private static $OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_is_short_offset_name_shown';
   private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
+  private static $SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_field_is_short_offset_name_shown';
   private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
   private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
 
@@ -21,6 +19,10 @@ class Settings {
   }
 
   public static function init_settings() {
+    register_setting(
+      self::$OPTIONS_GROUP_NAME,
+      self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+    );
     register_setting(
       self::$OPTIONS_GROUP_NAME,
       self::$OPTION_NAME_URL,
@@ -29,14 +31,14 @@ class Settings {
 
     add_settings_section(
       self::$SETTINGS_SECTION_NAME,
-      __('General Settings', TEXT_DOMAIN),
+      esc_html__('General Settings', 'connector-mobilizon'),
       '',
       self::$PAGE_NAME
     );
 
     add_settings_field(
       self::$SETTING_FIELD_NAME_URL,
-      __('URL', TEXT_DOMAIN),
+      esc_html__('URL', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_url',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -44,10 +46,24 @@ class Settings {
         'label_for' => self::$SETTING_FIELD_NAME_URL
       )
     );
+    add_settings_field(
+      self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
+      esc_html__('Display named offset', 'connector-mobilizon'),
+      'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
+      self::$PAGE_NAME,
+      self::$SETTINGS_SECTION_NAME,
+      array(
+        'label_for' => self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+      )
+    );
+  }
+
+  public static function output_field_is_short_offset_name_shown($args) {
+    $isShortOffsetNameShown = self::isShortOffsetNameShown();
+    require dirname(__DIR__) . '/view/settings/is-short-offset-name-shown-field.php';
   }
 
   public static function output_field_url($args) {
-    $textDomain = TEXT_DOMAIN;
     $url = self::getUrl();
     require dirname(__DIR__) . '/view/settings/url-field.php';
   }
@@ -58,7 +74,7 @@ class Settings {
       add_settings_error(
         self::$OPTION_NAME_URL,
         'wordpress_mobilizon_field_url_error',
-        __('The URL is invalid.', TEXT_DOMAIN),
+        esc_html__('The URL is invalid.', 'connector-mobilizon'),
         'error'
       );
     }
@@ -70,7 +86,7 @@ class Settings {
 
   public static function register_settings_page() {
     add_options_page(
-      NICE_NAME . ' ' . __('Settings', TEXT_DOMAIN),
+      NICE_NAME . ' ' . esc_html__('Settings', 'connector-mobilizon'),
       NICE_NAME,
       'manage_options',
       NAME . '-settings',
@@ -85,15 +101,21 @@ class Settings {
     require dirname(__DIR__) . '/view/settings/page.php';
   }
 
+  public static function isShortOffsetNameShown() {
+    return get_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+  }
+
   public static function getUrl() {
     return get_option(self::$OPTION_NAME_URL);
   }
 
   public static function setDefaultOptions() {
+    add_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN, self::$DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN);
     add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
   }
 
   public static function deleteAllOptions() {
+    delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
     delete_option(self::$OPTION_NAME_URL);
   }
 

source/includes/exceptions/GeneralException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GeneralException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/includes/exceptions/GroupNotFoundException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GroupNotFoundException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/readme.txt

@@ -0,0 +1,236 @@
+# <wordpress-nice-name>
+Contributors: dwaxweiler
+Donate link: <wordpress-donation-link>
+Tags: mobilizon, events
+Stable tag: <wordpress-version>
+Requires at least: <wordpress-minimum-version>
+Tested up to: <wordpress-tested-up-to-version>
+Requires PHP: <wordpress-php-minimum-version>
+License: <wordpress-license>
+
+<wordpress-description>
+
+## Description
+
+<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+Features
+- Display events as Gutenberg block, as widget and as shortcut
+- Display events' picture, if available, title with link, date, and location, if available
+- Cache requests' responses for 2 minutes in the database
+- Configure number of events to show per block, per widget and per shortcut
+- Optionally filter events by a specific public group per block, per widget and per shortcut
+- Set the URL of the Mobilizon instance in the settings
+- Toggle adding named offset in brackets after the time in the settings
+
+This plugin requests the events via Mobilizon's GraphQL API.
+
+The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
+
+## Installation
+
+Install this plugin on the "Add Plugin" page in the administrator backend of your WordPress website by searching for it by its name or by uploading its archive by clicking on "Upload Plugin".
+In both cases, you then need to click the corresponding "Install now" button.
+
+After the installation, you can adapt the URL of the Mobilizon instance whose events you want to list on the plugin's settings' page.
+
+### Shortcut usage
+
+Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
+
+Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]`
+You have to use their username, e.g. `@nosliensvivants`, and append the name of their instance if they use a different one, e.g. `@yaam_berlin@mobilize.berlin`.
+
+## Screenshots
+1. Events list
+2. General settings
+3. Widget creation
+4. Shortcut creation
+5. Gutenberg block in editor
+
+## Changelog
+
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
+
+### [0.11.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.2
+#### Security
+- Set minimum PHP version to oldest stable 8.0
+
+### [0.10.1]
+#### Changed
+- Confirm compatibility with WordPress 6.1
+- Update dependencies
+
+### [0.10.0]
+#### Added
+- Add Gutenberg events list block
+- Show loading indicator during request
+#### Changed
+- Set list style type to none and left padding to zero for all occurences
+- Move shortcut usage description into installation section in `readme.txt`
+- Update dependencies
+
+### [0.9.1] - 2020-05-19
+#### Fixed
+- Fix WordPress compatibility version number
+
+### [0.9.0] - 2020-05-19
+#### Added
+- Improve explanation of group name filter
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.0
+#### Fixed
+- Fix displaying error message for the case the group is not found
+
+### [0.8.0] - 2022-01-09
+#### Added
+- Add support for older browsers using babel
+#### Changed
+- Confirm compatibility with WordPress 5.9
+- Update dependencies
+#### Fixed
+- Use ES modules correctly
+- Trim events' location
+
+### [0.7.0] - 2021-12-23
+#### Added
+- Add specific error message for the case the group is not found
+- Add code formatter prettier
+#### Changed
+- Update dependencies
+- Simplify build process
+#### Fixed
+- Fix Invalid DateTime on event end time being null
+#### Security
+- Set minimum PHP version to oldest stable 7.4
+
+### [0.6.2] - 2021-08-24
+#### Changed
+- Update dependencies
+#### Fixed
+- Fix empty WordPress timezone_string option resulting in Invalid DateTime
+
+### [0.6.1] - 2021-07-13
+#### Changed
+- Confirm compatibility with WordPress 5.8
+- Update dependencies
+
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/uninstall.php

@@ -1,6 +1,6 @@
 <?php
-require_once __DIR__ . '/includes/constants.php';
-require_once __DIR__ . '/includes/settings.php';
+require_once __DIR__ . '/includes/Constants.php';
+require_once __DIR__ . '/includes/Settings.php';
 
 // If uninstall.php is not called by WordPress, exit.
 if (!defined('WP_UNINSTALL_PLUGIN')) {

source/view/events-list-group-not-found.php

@@ -0,0 +1,14 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php
+  /* translators: %s is replaced with the name of the group. */
+  echo esc_html(sprintf(__('The group "%s" could not be found!', 'connector-mobilizon'), $groupName));
+  ?>
+</div>

source/view/events-list-not-loaded.php

@@ -0,0 +1,11 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?>
+</div>

source/view/events-list-widget/form.php

@@ -1,14 +1,20 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;
 }
 ?>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title', $textDomain); ?>:</label> 
+  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title', 'connector-mobilizon'); ?>:</label>
   <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
 </p>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_attr_e('Number of events to show', $textDomain); ?>:</label>
+  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_html_e('Number of events to show', 'connector-mobilizon'); ?>:</label>
   <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>" name="<?php echo esc_attr($this->get_field_name('eventsCount')); ?>" type="number" value="<?php echo esc_attr($eventsCount); ?>" min="1">
 </p>
+<p>
+  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_html_e('Group name (optional)', 'connector-mobilizon'); ?>:</label>
+  <input class="widefat" id="<?php echo esc_attr($this->get_field_id('groupName')); ?>" name="<?php echo esc_attr($this->get_field_name('groupName')); ?>" type="text" value="<?php echo esc_attr($groupName); ?>">
+</p>

source/view/events-list.php

@@ -0,0 +1,29 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <ul style="list-style-type: none; padding-left: 0;">
+    <?php foreach ($events as $event) { ?>
+    <li style="line-height: 150%; margin-top: 20px;">
+      <?php if (isset($event['picture'])) { ?>
+      <img alt="<?php echo esc_attr($event['picture']['alt']); ?>" src="<?php echo esc_attr($event['picture']['base64']); ?>" style="display: block; max-width: 100%;">
+      <?php } ?>
+      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html($event['title']); ?></a>
+      <br>
+      <?php echo esc_html(Formatter::format_date($locale, $timeZone, $event['beginsOn'], $event['endsOn'], $isShortOffsetNameShown)); ?>
+      <?php if (isset($event['physicalAddress'])) { ?>
+      <br>
+      <?php echo esc_html(Formatter::format_location($event['physicalAddress']['description'], $event['physicalAddress']['locality'])) ?>
+      <?php } ?>
+    </li>
+    <?php } ?>
+  </ul>
+  <a href="<?php echo esc_attr($showMoreUrl); ?>" class="button" style="display:inline-block; margin-top: 20px;">
+    <?php esc_html_e('Show more events', 'connector-mobilizon'); ?>
+  </a>
+</div>

source/view/settings/is-short-offset-name-shown-field.php

@@ -0,0 +1,15 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<input id="<?php echo esc_attr($args['label_for']); ?>"
+  name="<?php echo esc_attr(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN); ?>"
+  type="checkbox"
+  <?php echo $isShortOffsetNameShown == true ? 'checked' : ''; ?>>
+<p class="description">
+  <?php esc_html_e('The time zone of this WordPress installation is used. Whether the current offset should be displayed in brackets after the time, e.g. 10:00 (UTC)', 'connector-mobilizon'); ?>
+</p>

source/view/settings/page.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;

source/view/settings/url-field.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;
@@ -10,5 +12,5 @@ if (!defined('ABSPATH')) {
   type="url"
   value="<?php echo esc_attr($url); ?>">
 <p class="description">
-  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', $textDomain); ?>
+  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', 'connector-mobilizon'); ?>
 </p>

tests/DateTimeWrapperTest.php

@@ -0,0 +1,47 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\DateTimeWrapper;
+use PHPUnit\Framework\TestCase;
+
+final class DateTimeWrapperTest extends TestCase {
+  public function testCanGet24TimeForUsualTime(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('16:45', $d->get24Time());
+  }
+
+  public function testCanGetShortDateForUsualDate(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithLocaleWithUnderscore(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('24/12/2020', $d->getShortDate(), 'en_GB');
+  }
+
+  public function testCanGetShortDateForUsualDateWithTimezoneString(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', 'Europe/Rome');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithNamedOffset(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', 'UTC');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithOffset(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', '+02:00');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithEmptyTimezone(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', '');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortOffsetNameForUsualTime(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('UTC', $d->getTimeZoneName());
+  }
+}

tests/FormatterTest.php

@@ -0,0 +1,56 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\Formatter;
+use PHPUnit\Framework\TestCase;
+
+final class FormatterTest extends PHPUnit\Framework\TestCase
+{
+  public function testCanDateFormatOneDate(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatOneDateWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', true));
+  }
+
+  public function testCanDateFormatOneDateWithTimeZoneOffset(): void {
+    $this->assertSame('15/04/2021 11:30 - 16:30', Formatter::format_date('en-GB', '+01:00', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatTwoDates(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatTwoDatesWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z', true));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNull(): void {
+    $this->assertSame('15/04/2021 10:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', null, false));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNullWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', null, true));
+  }
+
+  public function testCanLocationFormatBothParameters(): void {
+    $this->assertSame('a, b', Formatter::format_location('a', 'b'));
+  }
+
+  public function testLocationFormatDescriptionOnly(): void {
+    $this->assertSame('a', Formatter::format_location('a', ''));
+  }
+
+  public function testLocationFormatDescriptionOnlyWithNull(): void {
+    $this->assertSame('a', Formatter::format_location('a', null));
+  }
+
+  public function testLocationFormatDescriptionWithSpaceOnly(): void {
+    $this->assertSame('', Formatter::format_location(' ', ''));
+  }
+
+  public function testLocationFormatLocalityOnly(): void {
+    $this->assertSame('a', Formatter::format_location('', 'a'));
+  }
+}

webpack.config.cjs

@@ -0,0 +1,46 @@
+/* eslint-disable no-undef */
+const path = require('path')
+
+const CopyPlugin = require('copy-webpack-plugin')
+
+const FOLDER_SOURCE = './source'
+
+module.exports = {
+  entry: {
+    'block-events-loader': FOLDER_SOURCE + '/front/block-events-loader.js',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'build/front'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { targets: 'defaults' }]],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          context: FOLDER_SOURCE,
+          from: '**/*.php',
+          to: '../',
+        },
+        {
+          context: FOLDER_SOURCE,
+          from: '**/*.txt',
+          to: '../',
+        },
+      ],
+    }),
+  ],
+}