Robot name capitalization inconsistencies on Robot carrousel page

[SuperJappie08]

On the website, there are some inconsistencies in MIRTE 'Type' capitalization in both the button and the alt-text of the image.

Affected

It affects the following pages/elements:

• Lite 🇳🇱
• Basic 🇳🇱
• Pioneer 🇳🇱
• Master 🇳🇱
• Lite 🇬🇧
• Basic 🇬🇧
• Pioneer 🇬🇧
• Master 🇬🇧

Exact discrepencies

The following things are inconsistent:

• The alt-text of the image does not get resolved. (Copied from the deployed website source)

<div style="flex-grow: 1;" class="img-wrap">
    <img src="https://mirte.org/_nuxt/MIRTE_pioneer_transparant.DmXqtoRr.png" alt="MIRTE {{ robot }}">
</div>

• The button does not capitalize the MIRTE Type correctly. (Copied example from deployment)

<a href="/steps?robot=pioneer" class="">
    <button class="btn my-button">Get started with <span class="mirte">MIRTE</span> <b>pioneer</b>!</button>
</a>

Here Pioneer should be capitalized as in most other instances.

Cause

It is related to the MyComponent.
Which capitalizes the text in some instances correctly.

This is the specific section:

mirte-website/components/MyComponent.vue

Lines 28 to 34 in 9a1dde6

	<img :src="image[robot]" alt="MIRTE {{ robot }}">
	</div>
	<div>
	<h5>MIRTE {{ robot.charAt(0).toUpperCase() + robot.slice(1) }}</h5>
	<p style="margin: auto; max-width: 500px; margin-bottom: 50px;" >{{ $t(`robots.${robot}`) }}</p>
	<NuxtLink v-if="robot !== 'master'" :to="{ path: '/steps', query: { robot: robot } }" ><button class="btn my-button">{{ $t("robots.start") }} <span class="mirte">MIRTE</span> <b>{{robot}}</b>!</button></NuxtLink>
	<a v-if="robot === 'master'" href="https://docs.mirte.org/develop/doc/robots/mirte_master/index.html" target="_blank" rel="noopener noreferrer"><button class="btn my-button"><span class="mirte">MIRTE</span> <b>master</b> docs</button></a>

Suggestion

I either make a capitalization function or capitalize once and store this in a variable that is reused in this component.
(I don't have experience with VUE, so I'm not sure what the best solution actually is)

[SuperJappie08]

Additionally effected:

• Configure 🇳🇱 (In the base selection options)
• Configure 🇬🇧 (In the base selection options)

The education start page is also affected, but that one is hardcoded.

• mirte-website/pages/start.vue

  Lines 19 to 26 in 9a1dde6

  	<div class="d-flex flex-column h-100" style="text-align: center;">
  	<div>
  	<h5>MIRTE lite</h5>
  	<p style="margin: auto; max-width: 500px; margin-bottom: 50px;" >{{ $t("robots.lite") }}</p>
  	<NuxtLink :to="{ path: '/steps', query: { robot: 'lite', level: 'primary' } }" ><button class="btn my-button">{{ $t("robots.start") }} <span class="mirte">MIRTE</span> <b>lite</b>!</button></NuxtLink>
  	</div>
  	<img src="@/assets/images/MIRTE_lite_obstacle_sensor_transparant.png" style="width: 50%; margin-left: auto; margin-right: auto;" alt="MIRTE basic">
  	</div>

• mirte-website/pages/start.vue

  Lines 30 to 37 in 9a1dde6

  	<div class="d-flex flex-column h-100" style="text-align: center;">
  	<div>
  	<h5>MIRTE basic</h5>
  	<p style="margin: auto; max-width: 500px; margin-bottom: 50px;" >{{ $t("robots.basic") }}</p>
  	<NuxtLink :to="{ path: '/steps', query: { robot: 'basic', level: 'primary' } }" ><button class="btn my-button">{{ $t("robots.start") }} <span class="mirte">MIRTE</span> <b>basic</b>!</button></NuxtLink>
  	</div>
  	<img src="@/assets/images/MIRTE_basic_transparant.png" style="width: 50%; margin-left: auto; margin-right: auto;" alt="MIRTE pioneer">
  	</div>

• mirte-website/pages/start.vue

  Lines 47 to 54 in 9a1dde6

  	<div class="d-flex flex-column h-100" style="text-align: center;">
  	<div>
  	<h5>MIRTE basic</h5>
  	<p style="margin: auto; max-width: 500px; margin-bottom: 50px;" >{{ $t("robots.basic") }}</p>
  	<NuxtLink :to="{ path: '/steps', query: { robot: 'basic', level: 'secondary' } }" ><button class="btn my-button">{{ $t("robots.start") }} <span class="mirte">MIRTE</span> <b>basic</b>!</button></NuxtLink>
  	</div>
  	<img src="@/assets/images/MIRTE_basic_transparant.png" style="width: 50%; margin-left: auto; margin-right: auto;" alt="MIRTE basic">
  	</div>

• mirte-website/pages/start.vue

  Lines 58 to 65 in 9a1dde6

  	<div class="d-flex flex-column h-100" style="text-align: center;">
  	<div>
  	<h5>MIRTE pioneer</h5>
  	<p style="margin: auto; max-width: 500px; margin-bottom: 50px;" >{{ $t("robots.pioneer") }}</p>
  	<NuxtLink :to="{ path: '/steps', query: { robot: 'pioneer', level: 'secondary' } }" ><button class="btn my-button">{{ $t("robots.start") }} <span class="mirte">MIRTE</span> <b>pioneer</b>!</button></NuxtLink>
  	</div>
  	<img src="@/assets/images/MIRTE_pioneer_transparant.png" style="width: 50%; margin-left: auto; margin-right: auto;" alt="MIRTE pioneer">
  	</div>

EDIT: More links

[SuperJappie08]

This could also be a personal misunderstanding of a style guide.
But I assume that it always should be:

• MIRTE Light
• MIRTE Basic
• MIRTE Pioneer
• MIRTE Master

But maybe I'm wrong.

[mklomp]

This could also be a personal misunderstanding of a style guide. But I assume that it always should be:

• MIRTE Light
• MIRTE Basic
• MIRTE Pioneer
• MIRTE Master

But maybe I'm wrong.

No, you are totally right here. Not sure what the solution should look like. Preferably using an already existing (JS?) capitalization function, since some of these cases are variables (which I think should stay lowercase).