ultimate-comparisons/ultimate-comparison-BASE

View on GitHub
README.md

Summary

Maintainability
Test Coverage
# Ultimate Comparison Framework ![Checks](https://github.com/ultimate-comparisons/ultimate-comparison-framework/workflows/Checks/badge.svg)

> This is the ultimate comparison framework written in [Angular](https://angular.io/).
> It is released on npm as [ultimate-comparison](https://www.npmjs.com/package/ultimate-comparison).

Scientifically interested? - Read on at our paper [The Ultimate Comparison Framework](http://ceur-ws.org/Vol-2575/paper9.pdf).

## Create your own ultimate comparison

1. Install the **ultimate-comparison** package globally on your system using `npm install --global ultimate-comparison`
2. Create the directory which should contain the comparison and change into it, e. g. with `mkdir MY_COMPARISON && cd MY_COMPARISON`
3. Set up your comparison with `uc setup`
    1. Enter the name of your comparison and press <kbd>Enter</kbd>
    2. Enter the [semantic version](https://semver.org/) of your comparison and press <kbd>Enter</kbd>
    3. Enter a short description of your comparison and press <kbd>Enter</kbd> (not required)
4. Make sure a `node_modules` directory exists as sub directory.
    - If it doesn't exist look at the error message and run `npm install` afterwards
    - The error is most likely a malformed name or version of your comparison
5. Run `uc start` to start the comparison.

### Configuration

The configuration files are located in the `configuration` directory.

`description.md`: It contains the description of your comparison which can be seen by visitors.
It is located underneath the headline of your comparison.
![Description location on page](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/descritpion.png)

`comparison-example.yml`: Example configuration file containing comments on fields to explain their meaning.

`comparison-default.yml`: Default configuration, intended as backup of your local comparison.

`comparison.yml`: The used configuration. Missing values are taken from `comparison-default.yml` and written back into this file.
A `comparison.yml` has following attributes:

- `title`: The title of the comparison. It is the headline of the page.
  ![Title location on page](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/title.png)
- `subtitle`: The subtitle of the comparison. It is next to the headline of the page.
  ![Subtitle location on page](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/subtitle.png)
- `selectTitle`: It is the headline for the search criteria, meaning that the area meant to enter search parameters uses this as headline.
- `tableTitle`: It is the headline for the table, meaning that the area containing the table uses this as headline.
  ![Title of the table on page](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/tabletitle.png)
- `repository`: The link to the repository containing the comparison.
- `header`: The heading of the details page
    - `nameRef`: Heading of details page (field name) (1)
    - `labelRef`: Which label to add to the heading of the details page (field name) (2)
    - `urlRef`: Which url to show next to the heading of the details page (field name) (3)
  ![Details header construction](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/detailsheader.png)
- `body`: The body of the details page
    - `title`: The heading of the used field (1)
    - `bodyRef`: The field to use as content of the body (2)
  ![Details body construction](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/detailsbody.png)
- `citation`: Configures the citation of sources
    - `csl`: The style of the citation as [bibtex](http://www.bibtex.org/) class. Example classes: https://github.com/citation-style-language/styles
    - `bib`: The file containing the used sources in [bibtex](http://www.bibtex.org/) style
- `criteria`: List of fields that all comparison elements use. The attributes for each criteria are:
    - `name`: The display name of the criteria. Type: `string` (1)
    - `search`: Whether a text box should be added to the search form. Allowed values: `true` (1), `false`
    - `table`: Whether it should be included in the comparison table by default. Allowed values: `true` (2), `false`
    - `detail`: Whether it is in the detail page. Allowed values: `true`, `false`
    - `type`: The content type of the field. Allowed values: `url`, `markdown`, `text`, `label`, `rating`, `repository`
    - `andSearch`: Whether the search should be **match all** (`true`) or **match one** (`false`). Allowed values: `true` (3), `false` (3)
    - `values`: All allowed values the field can assume. Values can have the following attributes:
        - `description`: Part of the tooltip for every instance of the value. Type: `string`
        - `class`: CSS-class of the label. Type: `string` (label-only)
        - `backgroundColor`: The background color of the label. Applies only if no class is given. Type: `string` (label-only)
        - `color`: The text color of the label. Applies only if no class is given. Type: `string` (label-only)
        - `minAge`: The minimum age of the last commit to apply this value. Type: `number` (repository-only)
        - `minAgeUnit`: The unit to apply to the minAge attribute. Allowed values: https://momentjs.com/docs/#/durations/as-iso-string/ (repository-only)
        - `maxAge`: The maximum age of the last commit to apply this value. Type: `number` (repository-only)
        - `maxAgeUnit`: The unit to apply to the maxAge attribute. Allowed values: https://momentjs.com/docs/#/durations/as-iso-string/ (repository-only)
    - `placeholder`: Text shown in the search bar if it is empty (4)
    - `rangeSearch`: Changes search to allow searching for number ranges. It allows searching for numbers and ranges of numbers. Only supports integers. (5)
    ![Various elements of criteria on the page](https://cdn.rawgit.com/ultimate-comparisons/ultimate-comparison-BASE/85cc1e93/docs/images/variouselements.png)

### Define comparison elements

For each thing, create a markdown file in `data`.
You can base it on `template.md`.
If one column depends on a repository (repo-attribute in `comparison.yml` true), you have to define a `## Repo` section and add the repository as first list item, eg:

```markdown
## Repo
- https://github.com/ultimate-comparisons/ultimate-comparison-BASE
```

## Update your comparison

To update the ultimate comparison framework that your comparison uses, just run `npm update` in the directory that contains your comparison.
It installs the latest version with the same major version number (ie. `2.x.x`).

## Development hints

When developing on the framework itself, these might be helpful hints:

### Linux

Use node 12.

### Windows

Development on Windows currently does not work.

- `npm install --global --production windows-build-tools`
  - Alternative: - `choco install python2 vcredist2013` (currently does not fully work)
- `node_modules/.bin/gulp default --gulpfile=/c/Users/login/git-repositories/uc/ultimate-comparison-BASE/lib/gulp/gulpfile.js --dir=node_modules/ultimate-comparison`

## License

The code is licensed under [MIT], the content (located at `data`) under [CC0-1.0].

  [CC0-1.0]: https://creativecommons.org/publicdomain/zero/1.0/
  [MIT]: https://opensource.org/licenses/MIT