CrowdHeritage

Crowdheritage is an open crowdsourcing platform with the aim to mobilise users to execute useful tasks for the enrichment and validation of selected cultural heritage metadata of Europeana. The enrichment is accomplished through the organization of crowdsourcing campaigns where users add annotations. The platform offers the following functionalities:

• Design and implement custom crowdsourcing campaigns
• Annotate cultural heritage content
  • Semantic tagging with annotations derived from thesauri and vocabularies (such as Wikidata)
  • Geo-tagging
  • Color-tagging
• Validate annotations (up-vote, down-vote)
• Publish annotations to Europeana though the Europeana Annotation API
• Display multilingual content
• Gamification system
  • Leaderboard
  • Badges
• Statistics and user validation

Docker Image

🐳 Docker Image

Getting started

Before you start, make sure you have a recent version of NodeJS environment "^16.19.1", with NPM ^8.

From the project folder, execute the following commands:

yarn

This will install all required dependencies, including a local version of Webpack that is going to build and bundle the app. There is no need to install Webpack globally.

To run the app execute the following command:

npm start

This command starts the webpack development server that serves the build bundles. You can now browse the skeleton app at http://localhost:8080. Changes in the code will automatically build and reload the app.

Feature configuration

Most of the configuration will happen in the webpack.config.js file. There, you may configure advanced loader features or add direct SASS or LESS loading support.

Bundling

To build a development bundle (output to /dist) execute:

npm run build

To build an optimized, minified production bundle (output to /dist) execute:

npm run build:prod

To test either the development or production build execute:

npm run server:prod

The production bundle includes all files that are required for deployment.

Resource and bundling configuration

You may want to separate out parts of your code to other files. This can be done by specifying a build resource object inside package.json.

For example, if you wanted to lazy-load the /users path of the skeleton you could define it as follows:

// (package.json)
"aurelia": {
  "build": {
    "resources": [
      {
        "path": "users",
        "bundle": "users",
        "lazy": true
      }
    ]
  }
},

The "path" field can be either a string or an array of strings. The string should be a path, relative to the src or in case of an external resource, as a require path (e.g. aurelia-plugin/some-resource.html). .js, .ts and .html extensions are optional and will be resolved automatically. The bundle setting is recursive, therefore any files required by the specified path will also be contained by the bundle, unless they are also contained by another one (iteration is done from first to last resource).

Resources must also be specified in case Aurelia is supposed to load an external file or an external module that was not defined as a resource by any of the dependencies. Since the syntax is still relatively new, most Aurelia plugins don't define their resources. There might also be reasons not to declare those resources, in case the plugin is to be consumed only partially. If you'd like to use external resources, you should declare them yourself, like so:

// (package.json)
"aurelia": {
  "build": {
    "resources": [
      "aurelia-some-ui-plugin/dropdown",
      "aurelia-some-ui-plugin/checkbox"
    ]
  }
},

You can also combine both features to separate out plugins or resources for lazy-loading:

// (package.json)
"aurelia": {
  "build": {
    "resources": [
      {
        "path": "aurelia-animator-css",
        "bundle": "animator",
        "lazy": true
      },
      {
        "path": [
          // lets say we only use the checkbox from within subpage1
          // we want those to be bundled together in a bundle called: "subpage1"
          "aurelia-some-ui-plugin/checkbox",
          "./items/subpage1"
        ],
        "bundle": "subpage1",
        "lazy": true
      },
      "aurelia-some-ui-plugin/dropdown"
    ]
  }
},

Please see https://github.com/aurelia/webpack-plugin for more information.

Acknowledgments

Parts of code responsible for Webpack configuration were inspired by or copied from @AngularClass' angular2-webpack-starter.