Initial commit

.github/workflows/deploy.yml

@@ -0,0 +1,16 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+  workflow_run:
+    branches: [master]
+    workflows: ["Update data"]
+    types: [completed]
+
+jobs:
+  deploy:
+    uses: EqualStreetNames/equalstreetnames/.github/workflows/reusable-deploy.yml@master
+    secrets: inherit
+    with:
+      country:
+      city:

.github/workflows/update-data.yml

@@ -0,0 +1,25 @@
+name: Update data
+
+on:
+  schedule:
+    - cron: 
+  workflow_dispatch:
+  push:
+    paths:
+      - ".github/workflows/update-data.yml"
+      - "config.php"
+      - "data.csv"
+      - "overpass/*"
+  pull_request:
+    paths:
+      - ".github/workflows/update-data.yml"
+      - "config.php"
+      - "data.csv"
+      - "overpass/*"
+
+jobs:
+  update-data:
+    uses: EqualStreetNames/equalstreetnames/.github/workflows/reusable-update-date.yml@master
+    secrets: inherit
+    with:
+      city:

README.md

@@ -0,0 +1,137 @@
+# EqualStreetNames City Template
+
+If you want to replicate the EqualStreetNames project in your city, here is the how-to !
+
+## Setup
+
+1. Click on the "Use this template" button above
+
+1. Update the *Overpass* queries :
+
+    `overpass/relation-full-json.overpassql` (*example for Brussels, Belgium*)
+
+    ```diff
+    - ( area["admin_level"=""]["wikidata"=""]; )->.a;
+    + ( area["admin_level"="4"]["wikidata"="Q240"]; )->.a;
+    ```
+
+    `overpass/way-full-json.overpassql` (*example for Brussels, Belgium*)
+
+    ```diff
+    - ( area["admin_level"=""]["wikidata"=""]; )->.a;
+    + ( area["admin_level"="4"]["wikidata"="Q240"]; )->.a;
+    ```
+
+1. Find the *OpenStreetMap* relation of your city (example, [Brussels, Belgium](https://www.openstreetmap.org/relation/54094))
+
+1. Update `config.php` configuration file
+
+    1. **REQUIRED:** Add relation identifier (*example for Brussels, Belgium*).
+
+        ```diff
+        - 'relationId' => 0,
+        + 'relationId' => 54094,
+        ```
+
+    1. *Optional:* Choose languages in which you want to extract Wiki informations with `languages` (English `en` by default).
+
+    1. *Optional:* You can exclude ways or relations by adding the ways identifier in `exclude.way` and adding the relations identifier in `exclude.relation`.
+
+    1. *Optional:* You can manually assign a gender to a way or a relation by adding the ways identifier and its gender in `gender.way` and adding the relations identifier and its gender in `gender.relation`. You can also use `data.csv` file to assign gender (and details) to a way or relation (see below).
+
+    1. *Optional:* You can change the Wikidata instances that will be counted as "a person" with `instances`.
+
+1. You can link information to a relation or way using a `data.csv` CSV file (see [Brussels, Belgium CSV file](https://github.com/EqualStreetNames/equalstreetnames-brussels/blob/master/data.csv))
+
+    Structure:
+
+    - `type`: *OpenStreetMap* object type (relation/way)
+    - `id`: *OpenStreetMap* object identifier
+    - `name`: *OpenStreetMap* street name
+    - `gender`: Gender
+    - `person`: Name of the person
+    - `description`: Description of the person
+
+1. Update the HTML files (replace `MyCity` by the name of your city in **all** `index.html` files, add languages, ...).
+
+    (*example for Brussels, Belgium*)
+
+    ```diff
+    - <title>EqualStreetNames.MyCity</title>
+    + <title>EqualStreetNames.Brussels</title>
+
+    - <div id="loader-title">EqualStreetNames.MyCity</div>
+    + <div id="loader-title">EqualStreetNames.Brussels</div>
+
+    - <a class="navbar-brand" href="#">EqualStreetNames.MyCity</a>
+    + <a class="navbar-brand" href="#">EqualStreetNames.Brussels</a>
+    ```
+
+1. Optionally you can change the style using `data-style` attribute, it can be a Mapbox pre-defined style (see [API Reference](https://docs.mapbox.com/mapbox-gl-js/api/#map)) or your custom style (see [Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/)).
+
+    ```diff
+    - <div id="map"></div>;
+    + <div id="map" data-style="mapbox://styles/mapbox/dark-v10"></div>;
+    ```
+
+
+## Integrate your city to the project
+
+1. Let us know you're ready to add a new city to the project by [opening a new issue](https://github.com/EqualStreetNames/equalstreetnames/issues).
+
+1. You have 2 options:
+
+    1. Transfer your repository to the EqualStreetNames organization.
+
+       If you choose to do so, you stay of course "owner" of the repository, we'll create a team for you (and anyone you want) that will have admin rights on your repository.  
+       We'll help you maintain and manage your repository.  
+       We'll also setup an automated data update (once a month) and automated deployment of the website (if you need it). If you want more regular updates, you will need to create an `ACCESS_TOKEN` in your repository secrets with your [GitHub access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).
+
+       For the automated deployment, you will need to create a `MAPBOX_TOKEN` in your repository secrets (see [Mapbox documentation](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)).
+
+    1. Keep the ownership of your repository.
+
+       We'll just link your repository as sub-module in the [`cities` folder](https://github.com/EqualStreetNames/equalstreetnames/tree/master/cities).  
+       You'll have to maintain your repository, update the data, and the sub-module yourself.
+
+## Run your city locally
+
+1. Clone the main repository
+
+    ```cmd
+    git clone https://github.com/EqualStreetNames/equalstreetnames.git
+    ```
+
+1. Copy/Link your repository in the `cities` folder of the main repository (`cities/my-country/my-city`).
+
+1. Run the data update (in the `process` folder of the main repository)
+
+    ```cmd
+    cd process/
+    composer install
+    composer run update-data -- --city=my-country/my-city
+    ```
+
+1. Run the website locally (in the root folder of the main repository)
+
+    1. Add your city in the `"scripts"` section of the `website/package.json` file
+
+        ```diff
+        + "build:my-country:my-city": "node build.js -c my-country/my-city"
+        ```
+
+    1. Create a [Mapbox token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/)
+
+    1. Create a file named `.env` in the `website` directory of the project
+
+    1. Add the following line to the `.env` file: `MAPBOX_TOKEN=[your Mapbox token]` replacing `[your Mapbox token]` with the token you created
+
+    1. Install JavaScript dependencies and run it (in the `website` folder of the main repository)
+
+        ```cmd
+        cd website/
+        npm install
+        npm run build:my-country:my-city -- --serve
+        ```
+
+1. Open <http://localhost:1234/>

config.php

@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    // Relation ID of the OpenstreetMap City
+    'relationId' => 0,
+
+    // Languages in which you want to extract Wiki informations
+    'languages' => ['en'],
+
+    // Exclude datas from beeing extracted. Usefull to exclude streets at the edge of the city for example
+    'exclude' => [
+        'relation' => [],
+        'way' => [
+            /*
+            15221322, // Half Included street
+            */
+        ],
+    ],
+
+    // Manualy assign gender to ways/relations (when there are no wikidata page for example)
+    'gender' => [
+        'relation' => [],
+        'way' => [
+            /*
+            '12121212' => 'F', // Pia Mancini road
+            '13131312' => 'M', // Mister nobody Street
+            */
+        ],
+    ],
+
+    // Array that defines what instances of Wikidata are considered "a person". (you can probably leave this as is)
+    'instances' => [
+        'Q5'        => true,  // human
+        'Q2985549'  => true,  // mononymous person
+        'Q20643955' => true,  // human biblical figure
+
+        'Q8436'     => false, // family
+        'Q101352'   => false, // family name
+        'Q327245'   => false, // team
+        'Q3046146'  => false, // married couple
+        'Q13417114' => false, // noble family
+    ],
+];

html/en/index.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="../../../website/src/sass/style.scss">
+    <link rel="stylesheet" href="../../assets/style.css">
+
+    <title>EqualStreetNames.MyCity</title>
+</head>
+
+<body>
+    <div id="loader-wrapper">
+        <div id="loader-title">EqualStreetNames.MyCity</div>
+        <div id="loader"></div>
+        <div id="loader-status">Loading...</div>
+    </div>
+
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="https://equalstreetnames.org/">EqualStreetNames.MyCity</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" class="btn btn-primary" data-bs-toggle="modal" href="#contact">
+                            <i class="fas fa-envelope"></i>
+                            Contact
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="https://github.com/openknowledgebe/equalstreetnames/">
+                            <i class="fab fa-github"></i>
+                            GitHub
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <div class="form-check form-switch">
+                            <input class="form-check-input" type="checkbox" id="themeSwitch">
+                            <label class="form-check-label" for="themeSwitch"><i class="fas fa-adjust"></i></label>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
+                            aria-haspopup="true" aria-expanded="false">English</a>
+                        <div class="dropdown-menu dropdown-menu-right">
+                            <!-- <a class="dropdown-item" href="../fr/index.html">Français</a> -->
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main class="flex-fill">
+        <div id="map"></div>
+        <div id="chart-overlay" class="d-none d-sm-block">
+            <div id="gender-chart">
+                <table id="gender-chart-legend" class="table table-borderless table-sm">
+                    <tbody>
+                        <tr class="gender-chart-label" data-gender="m">
+                            <td class="text-center"><i class="fas fa-lg fa-mars"></i></td>
+                            <td>Male (cis)</td>
+                            <td class="text-end gender-chart-count"></td>
+                            <td class="text-end gender-chart-pct"></td>
+                        </tr>
+                        <tr class="gender-chart-label" data-gender="f">
+                            <td class="text-center"><i class="fas fa-lg fa-venus"></i></td>
+                            <td>Female (cis)</td>
+                            <td class="text-end gender-chart-count"></td>
+                            <td class="text-end gender-chart-pct"></td>
+                        </tr>
+                        <tr class="gender-chart-label" data-gender="mx">
+                            <td class="text-center"><i class="fas fa-lg fa-transgender-alt"></i></td>
+                            <td>Male (trans)</td>
+                            <td class="text-end gender-chart-count"></td>
+                            <td class="text-end gender-chart-pct"></td>
+                        </tr>
+                        <tr class="gender-chart-label" data-gender="fx">
+                            <td class="text-center"><i class="fas fa-lg fa-transgender-alt"></i></td>
+                            <td>Female (trans)</td>
+                            <td class="text-end gender-chart-count"></td>
+                            <td class="text-end gender-chart-pct"></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <canvas width="250" height="100"></canvas>
+            </div>
+            <div id="count-information" class="small">
+                Out of <span id="count-total"></span> streetnames, <span id="count-person"></span> have been found to be
+                named after a person.
+            </div>
+            <div class="small text-muted mt-2">
+                Last update: <span id="last-update"></span>
+            </div>
+        </div>
+    </main>
+
+    <div id="contact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        <i class="fas fa-envelope"></i>
+                        Contact
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>
+                        Interested in replicating EqualStreetNames in another city?<br>
+                        Interested in hosting workshops or organizing a workshop in your municipality?<br>
+                    </p>
+
+                    <div>
+                        Please contact us via
+                        <ul>
+                            <li>
+                                Open Knowledge Belgium:
+                                <a href="mailto:[email protected]">[email protected]</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="module" src="../../../website/src/script/index.ts"></script>
+</body>
+
+</html>