translate-a-fied a whole mess o' new stuff

michaelchadwick · May 24, 2024 · e92b895 · e92b895
1 parent 897acbd
commit e92b895
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 30 deletions.
diff --git a/app/components/forms/contact-form.hbs b/app/components/forms/contact-form.hbs
@@ -1,5 +1,5 @@
 <div class="contact-form" data-test-contact-form ...attributes>
-  <p>Want to say hello? Have a suggestion for this app? Drop me a line.</p>
+  <p>{{t "sections.contact.description"}}</p>
 
   <form {{on "submit" this.handleSubmit}} data-test-form>
     <div class="item" data-test-name>

diff --git a/app/components/forms/contact-form.js b/app/components/forms/contact-form.js
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { service } from '@ember/service';
 
 class Errors {
   @tracked name = null;
@@ -13,6 +14,7 @@ export default class ContactFormComponent extends Component {
   @tracked email = '';
   @tracked message = '';
   @tracked errors = new Errors();
+  @service intl;
 
   get isNameValid() {
     return this.name.trim().length > 0;
@@ -35,13 +37,19 @@ export default class ContactFormComponent extends Component {
   validateField(fieldName) {
     switch (fieldName) {
       case 'name':
-        this.errors.name = this.isNameValid ? null : 'Name is required.';
+        this.errors.name = this.isNameValid
+          ? null
+          : this.intl.t('errors.required', { description: 'Name' });
         break;
       case 'email':
-        this.errors.email = this.isEmailValid ? null : 'Email is invalid.';
+        this.errors.email = this.isEmailValid
+          ? null
+          : this.intl.t('errors.invalid', { description: 'Email' });
         break;
       case 'message':
-        this.errors.message = this.isMessageValid ? null : 'Message is required.';
+        this.errors.message = this.isMessageValid
+          ? null
+          : this.intl.t('errors.required', { description: 'Message' });
         break;
     }
   }

diff --git a/app/components/messages.hbs b/app/components/messages.hbs
@@ -10,7 +10,7 @@
       {{sanitize message.content}}
     </Message>
   {{else}}
-    No messages yet. Add one below!
+    <p>{{t "general.noneFound" items="messages"}}</p> {{t "sections.messages.addNew"}}
   {{/each}}
 
   <Forms::NewMessageInput @onCreate={{this.addMessage}} />

diff --git a/app/templates/about.hbs b/app/templates/about.hbs
@@ -1,12 +1,2 @@
-<h2>{{t "layout.navAbout"}}</h2>
-<p>
-  <strong>RemEmber Stuff</strong> is a web application I built to learn about EmberJS.
-</p>
-
-<p>
-  It started as a fake chat application, like <a href="https://guides.emberjs.com/v5.8.0/components/introducing-components/">this</a>. However, it's grown into more of a personal homepage incorporating what I've learned about EmberJS in the last month or so. Using my own interests, and applying them through the concepts in the EmberJS documentation, I've grown to understand EmberJS better.
-</p>
-
-<p>
-  The homepage will be updated as I go through each concept and apply it to this site.
-</p>
+<h2>{{t "layout.headAbout"}}</h2>
+{{t "sections.about.description" htmlSafe=true}}
diff --git a/app/templates/contact.hbs b/app/templates/contact.hbs
@@ -1,2 +1,2 @@
-<h2>{{t "layout.headContact" }}</h2>
+<h2>{{t "layout.headContact"}}</h2>
 <Forms::ContactForm />
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,4 +1,4 @@
-<h2>Core Concepts</h2>
+<h2>{{t "sections.index.headerCoreConcepts"}}</h2>
 <details>
   <ul class="checklist">
     <li>Components
@@ -43,7 +43,7 @@
 </ul>
 </details>
 
-<h2>Application Development</h2>
+<h2>{{t "index.headerAppDev"}}</h2>
 <details>
   <ul class="checklist">
     <li>Application Concerns</li>

diff --git a/app/templates/links.hbs b/app/templates/links.hbs
@@ -1,4 +1,4 @@
-<h2>{{t "layout.headLinks" }}</h2>
+<h2>{{t "layout.headLinks"}}</h2>
 {{#if @model}}
   <ul>
     {{#each @model as |link|}}
@@ -10,5 +10,5 @@
     {{/each}}
   </ul>
 {{else}}
-  <p>No links found.</p>
+  <p>{{t "general.noneFound" items="links"}}</p>
 {{/if}}
diff --git a/app/templates/messages.hbs b/app/templates/messages.hbs
@@ -1,2 +1,2 @@
-<h2>{{t "layout.headMessages" }}</h2>
+<h2>{{t "layout.headMessages"}}</h2>
 <Messages />
diff --git a/app/templates/music.hbs b/app/templates/music.hbs
@@ -1,6 +1,5 @@
-<h2>{{t "layout.headMusic" }}</h2>
-<p>The author of this web app is also a musician! Here are 5 random songs
-  they've done.</p>
+<h2>{{t "layout.headMusic"}}</h2>
+<p>{{t "sections.music.description"}}</p>
 {{#if @model}}
   <ul>
     {{#each @model as |song|}}
@@ -16,5 +15,5 @@
     {{/each}}
   </ul>
 {{else}}
-  <p>No songs found.</p>
+  <p>{{t "general.noneFound" items="songs"}}</p>
 {{/if}}
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
@@ -2,15 +2,13 @@ general:
   actions: Actions
   add: Add
   addNew: Add New
-  appDev: Application Development
   author: Author
   back: Back
   cancel: Cancel
   chooseFile: Choose File
   close: Close
   collapse: collapse
   complete: Complete
-  coreConcepts: Core Concepts
   currentlySearchingPrompt: searching...
   date: Date
   dateTime: Date/Time
@@ -57,6 +55,7 @@ general:
   navigation: Navigation
   next: Next
   no: No
+  noneFound: "No {items} found."
   notes: Notes
   notFoundMessage: "Rats! I couldn't find that. Please check your page address, and try again."
   overview: Overview
@@ -103,7 +102,7 @@ layout:
   navLinks: Links
   navMessages: Messages
   navMusic: Music
-  headAbout: About
+  headAbout: About The Site
   headContact: Contact
   headLinks: Related Links
   headMessages: Chat Messages
@@ -123,3 +122,22 @@ errors:
   tooLong: "{description} is too long (maximum is {max} characters)"
   tooShort: "{description} is too short (minimum is {min} characters)"
   url: "{description} must be a valid url"
+sections:
+  index:
+    headerAppDev: Application Development
+    headerCoreConcepts: Core Concepts
+  about:
+    description: "<p><strong>RemEmber Stuff</strong> is a web application I built to learn about EmberJS.</p>
+
+    <p>It started as a fake chat application, like <a href=https://guides.emberjs.com/v5.8.0/components/introducing-components/>this</a>. However, it's grown into more of a personal homepage incorporating what I've learned about EmberJS in the last month or so. Using my own interests, and applying them through the concepts in the EmberJS documentation, I've grown to understand EmberJS better.</p>
+
+    <p>The homepage will be updated as I go through each concept and apply it to this site.</p>"
+  links:
+    noLinksFound: No links found.
+  messages:
+    addNew: Add one below!
+  music:
+    description: The author of this web app is also a musician! Here are 5 random songs they've done.
+    noSongsFound: No songs found.
+  contact:
+    description: Want to say hello? Have a suggestion for this app? Drop me a line.