Feature/welcome and about pages

frontend/build/count-tokens.js

@@ -0,0 +1,47 @@
+const path = require('path');
+const colors = require('colors/safe');
+const fs = require('fs');
+// relative to /frontend
+const assetsDir = 'src/assets';
+
+const questions = JSON.parse(fs.readFileSync(`${assetsDir}/cleaned_translation_questions.json`));
+// * > answers > answer
+const answers = Object.values(questions).flatMap(question => question.answers).map(answers => answers.answer);
+const judgments = JSON.parse(fs.readFileSync(`${assetsDir}/likert_scales_merged.json`));
+// * > main_question
+const judgmentQuestions = Object.values(judgments).map(judgment => judgment.main_question);
+
+function countTokens(line) {
+    if (line === 'unattested') {
+        return 0;
+    }
+
+    // only count tokens with actual characters in them
+    return line.split(' ').filter(t => t.replace(/[^A-Za-z]/g, '').length).length;
+}
+
+function count(items, method) {
+    let result = 0;
+    for (const item of items) {
+        result += method(item);
+    }
+    return result;
+}
+
+writeCount(count(answers, countTokens) + count(judgmentQuestions, countTokens));
+
+
+function writeCount(tokenCount) {
+    const versionFilePath = path.join(__dirname + '/../src/environments/counts.ts');
+    const src = `export const tokenCount = ${tokenCount};`;
+
+    // ensure version module pulls value from package.json
+    fs.writeFile(versionFilePath, src, { flat: 'w' }, function (err) {
+        if (err) {
+            return console.log(colors.red(err));
+        }
+
+        console.log(colors.green(`Token count ${colors.yellow(tokenCount)}`));
+    });
+}
+

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "mima",
   "scripts": {
     "start": "yarn serve",
-    "prebuild": "node ./build/build-pre.js && node ./build/merge-likert-scales.js",
+    "prebuild": "node ./build/build-pre.js && node ./build/merge-likert-scales.js && node ./build/count-tokens.js",
     "build": "ng build --base-href=/static/ --localize",
     "test": "yarn lint && ng test --watch=true",
     "lint": "ng lint",

frontend/src/app/home/home.component.html

@@ -1,74 +1,134 @@
 <h1 class="title" i18n>Home</h1>
+<div class="columns">
+    <div class="column is-8">
+        <h2 class="subtitle" i18n>About the <i>MiMA</i> Project and Database</h2>
+        <div class="content">
+            <p i18n>Welcome to the MiMA database website, which is a product of the Mind your Manner Adverbials!
+                research
+                project
+                run by linguists of Utrecht University (<a i18n-href
+                    href="https://www.uu.nl/en/research/institute-for-language-sciences">ILS, formerly UiL-OTS</a>). The
+                research project is funded by the Dutch Research
+                Council (<a href="https://nwo.nl">NWO</a>).</p>
 
-<h2 class="subtitle" i18n>About the <i>MiMA</i> Project and Database</h2>
-<div class="content">
-    <p i18n>Welcome to the MiMA database website, which is a product of the Mind your Manner Adverbials! research
-        project
-        run by linguists of Utrecht University (<a i18n-href
-            href="https://www.uu.nl/en/research/institute-for-language-sciences">ILS, formerly UiL-OTS</a>). The
-        research project is funded by the Dutch Research
-        Council (<a href="https://nwo.nl">NWO</a>).</p>
+            <p i18n>One of the main aims of the MiMA research project is to describe and analyze the cross-linguistic
+                variation
+                in the (morpho)syntax of manner adverbials. In pursuing this, we are interested in the internal
+                structure of
+                these adverbials (including complex words, phrases and clauses), their external structure (i.e., the way
+                in
+                which they distribute in a larger sentence), and the way in which these two properties of manner
+                adverbials
+                interact with each other. Part of this project consists of the development of a database on manner
+                adverbials.
+                For this, data were collected, compiled and made available in this database.</p>
 
-    <p i18n>One of the main aims of the research project is to map the cross-linguistic variation in the (morpho)syntax
-        of
-        manner adverbials. In pursuing this, we are interested in the internal structure (i.e., the internal make-up of
-        complex words and groups of words) of these adverbials, their external structure (i.e., the way in which they
-        distribute in the larger sentence), and the way in which these two variables interact. Part of building towards
-        this
-        goal consists of collecting the data contained in this database, and compiling and making them available in the
-        database.</p>
+            <p i18n>As one look at the database reveals, there is a lot of variation in the way in which languages form
+                and
+                use manner adverbials. This rich variation is found in closely related languages and varieties of a
+                single
+                language (dialects). This kind of variation has not been studied on a large scale and in detail before.
+                The
+                MiMA project contributes to the study of the (morpho)syntax of manner adverbials and its
+                cross-linguistic
+                variation by systematic collection and study of data from languages/language varieties that exhibit
+                different
+                degrees of relatedness. First of all, it focuses on the Dutch, English, Frisian, German, and Swedish
+                languages,
+                which all belong to the Germanic language family. Secondly, it focuses on dialectal varieties of Dutch.
+            </p>
 
-    <p i18n>As one look at the database reveals, there is a lot of variation in the way in which languages form and use
-        manner adverbials. This rich variation is found between unrelated, but also (closely) related languages/language
-        varieties, and has not been studied on a large scale and in detail before. The MiMA project contributes to the
-        study
-        of the (morpho)syntax of manner adverbials by systematic collection and study of data from languages/language
-        varieties that exhibit different degrees of relatedness: the Dutch dialects are very closely related
-        languages/language varieties, the Germanic languages are less closely related, and the non-Germanic languages
-        are
-        even further removed/unrelated. By studying the differences and similarities in the structure of the manner
-        adverbials, we can relate these to the differences and similarities between the languages/language varieties.
-        The
-        sample of languages/language varieties in our database allows us to do this at different levels of
-        fine-grainedness.
-    </p>
+            <p i18n>By studying the differences and similarities in the structure of the manner adverbials, these can be
+                related
+                to the differences and similarities between the languages and language varieties. The sample of
+                languages/
+                language varieties in our database allows for this to be done on a fine-grained level.</p>
+        </div>
 
-</div>
-<h2 class="subtitle" i18n>Research Group</h2>
-<div class="content">
-    <ul>
-        <li i18n>Prof. dr. <a i18n-href href="https://www.uu.nl/staff/NFMCorver" target="_blank">Norbert Corver</a> (PI)
-        </li>
-        <li i18n><a i18n-href href="https://www.uu.nl/staff/MMassaia" target="_blank">Marta Massaia</a> (PhD student)
-        </li>
-        <li i18n><a i18n-href href="https://www.uu.nl/staff/LTavenier" target="_blank">Lex Cloin-Tavenier</a> (PhD
-            student)</li>
-        <li i18n>Tess Wensink (student assistant)</li>
-    </ul>
-</div>
-<h2 class="subtitle" i18n>About the Database</h2>
-<div class="content">
-    <p i18n>
-        The database contains XXXX tokens of manner adverbials, split across XXXX types. These data primarily stem from
-        our questionnaire research among native speakers. By studying (dialect) reference grammars, and the broader
-        scientific literature, and by consulting native speakers, we first made a selection of languages/language
-        varieties that
-        are interesting for our research purposes (because of differences in word order phenomena, use of pronouns,
-        etc.).
-        Next, we made questionnaires to systematically chart the (im)possible patterns in the morphosyntax of the manner
-        adverbials in these languages. The Dutch dialect data were collected in the Netherlands and Flanders (Belgium),
-        in collaboration with the <a target="_blank" href="https://meertenspanel.meertens.knaw.nl/">Meertens Panel</a>. The results of
-        the questionnaires were glossed (according to the
-        <a target="_blank" href="https://www.eva.mpg.de/lingua/pdf/Glossing-Rules.pdf">Leipzig glossing rules</a>) and provided with
-        (English) translations, and embedded in the database.
-    </p>
-    <p i18n>
-        Further information on the organization of the data in the database can be found on the Instructions page of
-        this website.
-    </p>
-    <p i18n>
-        If you have any suggestions or feedback about the data (base), please mail us at <a
-            href="mailto:mima@uu.nl?subject=MiMA database">mima&#64;uu.nl</a>, using the subject
-        line MiMA database.
-    </p>
-</div>
+        <h2 class="subtitle" i18n>About the Database</h2>
+        <div class="content">
+            <p i18n>
+                The database contains {{tokenCount}} tokens of manner adverbials, split across XXXX types. These data
+                primarily
+                stem from the
+                MiMA questionnaire research among native speakers, which was conducted in the following manner. By
+                studying
+                (dialect)
+                reference grammars and the broader linguistic literature, and by consulting native speakers, we first
+                made a
+                selection
+                of languages/language varieties that proved interesting for our research purposes. Next, we made
+                questionnaires
+                to
+                systematically chart the possible and impossible patterns in the morphosyntax of the manner adverbials
+                in these
+                languages. The Dutch dialect data were collected in the Netherlands and Flanders (Belgium) in
+                collaboration with
+                the <a target="_blank" href="https://meertenspanel.meertens.knaw.nl/">Meertens Panel</a>. The Frisian
+                data were
+                collected in the Netherlands in collaboration with the <a target="_blank"
+                    href="https://www.fryske-akademy.nl/">Fryske Akademy</a>. The rest of the Germanic data (i.e. the
+                English, German, and Swedish data) were collected remotely from native speakers in our professional
+                network. The
+                results of the questionnaires were glossed according to the
+                <a target="_blank" href="https://www.eva.mpg.de/lingua/pdf/Glossing-Rules.pdf">Leipzig glossing
+                    rules</a> and
+                provided with
+                (English) translations, and embedded in the database.
+            </p>
+            <p i18n>
+                Further information on the organization of the data in the database can be found on the <a
+                    [routerLink]="['/manual']" routerLinkActive="is-active">Manual</a> page of
+                this website.
+            </p>
+            <p i18n>
+                If you have any suggestions or feedback about the data (base), please mail us at <a
+                    href="mailto:mima@uu.nl?subject=MiMA database">mima&#64;uu.nl</a>, using the subject
+                line MiMA database.
+            </p>
+
+        </div>
+
+    </div>
+    <div class="column is-4">
+        <h2 class="subtitle" i18n>Research Group</h2>
+        <div class="content">
+            <ul>
+                <li i18n>Prof. dr. <a i18n-href href="https://www.uu.nl/staff/NFMCorver" target="_blank">Norbert
+                        Corver</a> (PI)
+                </li>
+                <li i18n><a i18n-href href="https://www.uu.nl/staff/MMassaia" target="_blank">Marta Massaia</a> (PhD
+                    student)
+                </li>
+                <li i18n><a i18n-href href="https://www.uu.nl/staff/LTavenier" target="_blank">Lex Cloin-Tavenier</a>
+                    (PhD
+                    student)</li>
+                <li i18n>Tess Wensink (Student Assistant)</li>
+                <li i18n>Iris Krips (Student Assistant)</li>
+                <li i18n><a i18n-href href="https://www.uu.nl/staff/SJJSpoel" target="_blank">Sheean Spoel</a> (Database
+                    Developer)</li>
+                <li i18n><a i18n-href href="https://www.uu.nl/staff/MvanStiphout" target="_blank">Mees van Stiphout</a>
+                    (Database Developer)</li>
+            </ul>
+        </div>
+        <h2 i18n class="subtitle">Citing the Database</h2>
+        <div class="content">
+            <p i18n>Please use the following (or equivalent) template when referencing the database:</p>
+            <p class="notification">Corver, N., L. Cloin-Tavenier, M. Massaia, I. Krips, T. Wensink, S. Spoel, M. van
+                Stiphout (2025).
+                <i>MiMA database (Mind your Manner Adverbials!)</i>. Online database, https://mima.uu.nl/, Accessed
+                {{date}}
+            </p>
+            <p i18n>When citing the database, please cite the following publication as well:</p>
+            <a class="hover-underline" href="https://www.mdpi.co/journal/languages/special_issues/59IE785STJ" target="_blank">
+                <p class="notification">
+                    <a>
+                        <fa-icon [icon]="faLink"></fa-icon>
+                    </a>
+                    Corver, N., L. Cloin-Tavenier & M. Massaia (eds.). 2025. Mind your Manner
+                    Adverbials! A special issue of
+                    <i>Languages</i> (ISSN 2226-471X)
+                </p>
+            </a>
+        </div>
+    </div>

frontend/src/app/home/home.component.scss

@@ -0,0 +1,3 @@
+.hover-underline:hover {
+    text-decoration: underline;
+}

frontend/src/app/home/home.component.spec.ts

@@ -1,18 +1,21 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
     let component: HomeComponent;
     let fixture: ComponentFixture<HomeComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ HomeComponent ],
-      imports: [ HttpClientTestingModule ]
-    })
-    .compileComponents();
-  }));
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                HomeComponent,
+                RouterTestingModule,
+                HttpClientTestingModule]
+        })
+            .compileComponents();
+    }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(HomeComponent);

frontend/src/app/home/home.component.ts

@@ -1,12 +1,31 @@
+import { formatNumber } from '@angular/common';
 import { Component } from '@angular/core';
-import { BackendService } from './../services/backend.service';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { tokenCount } from '../../environments/counts';
 
 @Component({
     selector: 'mima-home',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.scss']
+    styleUrls: ['./home.component.scss'],
+    imports: [FontAwesomeModule, RouterLink, RouterLinkActive],
+    standalone: true
 })
 export class HomeComponent {
-    constructor(private backend: BackendService) { }
+    date: string;
+    tokenCount = formatNumber(tokenCount, $localize`en-GB`);
+    faLink = faLink;
+
+    constructor() {
+        const now = new Date();
+        this.date = now.toLocaleString(
+            $localize`en-GB`,
+            {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+            });
+    }
 
 }

frontend/src/app/services/filter.worker.ts

@@ -4,6 +4,7 @@ import 'zone.js';
 import { DoBootstrap, enableProdMode, NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import '@angular/localize/init';
 
 import { environment } from '../../environments/environment';
 

frontend/src/assets/manual/en-GB/attestation.md

@@ -1 +1,3 @@
-Information about attestation.
+In the MiMA-database, you can search for both attested and unattested patterns of manner adverbial constructions. The unattested patterns refer to those manner adverbial constructions that are not available in a certain variety and/or for certain speakers. 
+
+Importantly, if a manner adverbial construction is labeled as ‘unattested’ in the database, it does not mean that it is an impossible/unacceptable/ungrammatical pattern, necessarily. In fact, there could be variation among different individuals belonging to the same linguistic community and speaking the same language (variety), to the extent that one construction is not available to all speakers, but is to some. The ‘unattested’ label is used in the current database to signal that the construction in question has been judged as ungrammatical by our informants. Therefore, when searching the database, make sure to double-check whether a pattern is (un)attested across the board.