Internationalize homepage, header and footer

src/components/FooterSection.vue

@@ -11,8 +11,8 @@
           </svg>
         </a>
         <address class="margin-bottom-normal">
-          <span class="is-block">Creative Commons</span>
-          <span>PO Box 1866, Mountain View CA 94042</span>
+          <span class="is-block">{{$t('footer.address.title')}}</span>
+          <span>{{$t('footer.address.address')}}</span>
         </address>
         <a href="mailto:info@creativecommons.org" class="mail is-block">
           info@creativecommons.org
@@ -38,32 +38,35 @@
         <nav class="footer-navigation">
           <ul class="menu">
             <li>
-              <a class="menu-item" href="https://creativecommons.org/about/contact/">Contact</a>
+              <a class="menu-item" href="https://creativecommons.org/about/contact/">{{$t('footer.navigation.contact')}}</a>
             </li>
             <li>
-              <a class="menu-item" href="https://creativecommons.org/privacy/">Privacy</a>
+              <a class="menu-item" href="https://creativecommons.org/privacy/">{{$t('footer.navigation.privacy')}}</a>
             </li>
             <li>
-              <a class="menu-item" href="https://creativecommons.org/policies/">Policies</a>
+              <a class="menu-item" href="https://creativecommons.org/policies/">{{$t('footer.navigation.policies')}}</a>
             </li>
             <li>
-              <a class="menu-item" href="https://creativecommons.org/terms/">Terms</a>
+              <a class="menu-item" href="https://creativecommons.org/terms/">{{$t('footer.navigation.terms')}}</a>
             </li>
           </ul>
         </nav>
         <div class="attribution margin-top-bigger">
-          <p class="caption">
-            Except where otherwise
-            <a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">noted</a>,
-            content on this site is licensed under a
-            <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">
-              Creative Commons Attribution 4.0 International license
-            </a>.
+          <i18n path="footer.caption.label" tag="p" class="caption">
+            <template v-slot:noted>
+              <a href="https://creativecommons.org/policies#license" target="_blank" rel="noopener">{{$t('footer.caption.noted')}}</a>
+            </template>
+            <template v-slot:attribution>
+              <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">
+                {{$t('footer.caption.attribution')}}
+              </a>
+            </template>
+            <template v-slot:icons>
               <a href="https://fontawesome.com/" target="_blank" rel="noopener" class="has-text-white">
-                Icons by Font Awesome.
-             </a>
-          </p>
-
+                {{$t('footer.caption.icons')}}
+              </a>
+            </template>
+          </i18n>
           <div class="margin-top-smaller">
             <i class="icon cc-logo margin-right-small is-size-4 is-color-white" />
             <i class="icon cc-by margin-right-small is-size-4 is-color-white" />
@@ -72,11 +75,11 @@
       </div>
       <div class="column">
         <aside class="donate-section">
-          <h5>Our work relies on you!</h5>
-          <p>Help us keep the internet free and open.</p>
+          <h5>{{$t('footer.donate.work')}}</h5>
+          <p>{{$t('footer.donate.help')}}</p>
           <a class="button small donate" href="http://creativecommons.org/donate">
             <i class="icon cc-letterheart margin-right-small is-size-5 padding-top-smaller" />
-            Donate now
+            {{$t('footer.donate.link')}}
           </a>
         </aside>
       </div>

src/components/HeroSection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hero">
     <div class="locale-block"><locale-selector /></div>
-    <h2 class="has-text-centered">{{ $t('hero') }}</h2>
+    <h2 class="has-text-centered">{{ $t('hero.title') }}</h2>
     <form class="hero_search-form margin-top-bigger"
           role="search"
           method="get"
@@ -14,13 +14,15 @@
                 class="hero_search-input input is-large"
                 type="search"
                 name="q"
-                placeholder="I would like to see..."
+                :placeholder="$t('hero.search.placeholder')"
                 autocapitalize="none"
                 id="searchTerm"
                 v-model.lazy="form.searchTerm" />
           </div>
           <div class="control">
-            <button class="button is-primary big" title="Search">Search</button>
+            <button class="button is-primary big" title="Search">
+              {{$t('hero.search.button')}}
+            </button>
           </div>
         </div>
       </div>
@@ -31,30 +33,35 @@
                 class="input"
                 type="search"
                 name="q"
-                placeholder="I would like to see..."
+                :placeholder="$t('hero.search.placeholder')"
                 autocapitalize="none"
                 id="searchTerm"
                 v-model.lazy="form.searchTerm" />
           </div>
           <div class="control">
-            <button class="button is-primary small" title="Search">Search</button>
+            <button class="button is-primary small" title="Search">
+              {{$t('hero.search.button')}}
+            </button>
           </div>
         </div>
       </div>
       <div class="caption has-text-centered margin-top-big">
-        <p>
-          All our content is under Creative Commons licenses.
-          <a href="https://creativecommons.org/share-your-work/licensing-examples/" target="_blank" rel="noopener">Learn more</a>
-          about CC licenses.
-        </p>
+        <i18n path="hero.caption.content" tag="p">
+          <template v-slot:link>
+            <a href="https://creativecommons.org/share-your-work/licensing-examples/" target="_blank" rel="noopener">
+              {{$t('hero.caption.link')}}
+            </a>
+          </template>
+        </i18n>
       </div>
       <home-license-filter />
     </form>
     <div class="help-links is-hidden-mobile">
-      <span class="margin-right-bigger">
-        Go to the
-        <a href="https://oldsearch.creativecommons.org/">old CC Search</a> portal
-      </span>
+      <i18n path="hero.old-cc-search.label" tag="span" class="margin-right-bigger">
+        <template v-slot:link>
+          <a href="https://oldsearch.creativecommons.org/">{{ $t('hero.old-cc-search.link') }}</a>
+        </template>
+      </i18n>
     </div>
   </div>
 </template>

src/components/HomeLicenseFilter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home-license-filter margin-top-xl">
-    <span>I want something I can</span>
+    <span>{{$t('hero.license-filter.label')}}</span>
 
     <template v-for="(licenseType, index) in licenseTypes" >
       <label class="checkbox margin-right-big" :for="licenseType.code" :key="index">

src/components/LocaleSelector.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="locale">
-      Languages available
+      {{$t('hero.locale.label')}}
       <div class="control has-icons-left">
         <div class="select">
           <select v-model="$i18n.locale">
@@ -10,7 +10,7 @@
           </select>
         </div>
         <div class="icon globe is-small is-left">
-            <i class="icon globe">locale</i>
+            <i class="icon globe">{{$t('hero.locale.icon')}}</i>
         </div>
       </div>
     </div>

src/components/NavSection.vue

@@ -30,12 +30,12 @@
         </form>
       </div>
       <div class="navbar-end">
-        <a class="navbar-item" href="/about">About</a>
-        <a class="navbar-item" href="/collections">Collections</a>
-        <a class="navbar-item" href="/search-help">Search Guide</a>
-        <a class="navbar-item" href="/feedback">Feedback</a>
+        <a class="navbar-item" href="/about">{{$t('header.about')}}</a>
+        <a class="navbar-item" href="/collections">{{$t('header.collections')}}</a>
+        <a class="navbar-item" href="/search-help">{{$t('header.search-guide')}}</a>
+        <a class="navbar-item" href="/feedback">{{$t('header.feedback')}}</a>
         <a class="navbar-item" href="https://opensource.creativecommons.org/ccsearch-browser-extension/" target="_blank">
-        Extension
+        {{$t('header.extension')}}
         <i class="icon external-link" />
         </a>
       </div>

src/locales/en.json

@@ -1,3 +1,54 @@
 {
-    "hero": "Search for content to reuse"
+    "hero": {
+        "title": "Search for content to reuse",
+        "search": {
+            "placeholder": "I would like to see...",
+            "button": "Search"
+        },
+        "caption": {
+            "content": "All our content is under Creative Commons licenses. {link} about CC licenses.",
+            "link": "Learn more"
+        },
+        "license-filter": {
+            "label": "I want something I can"
+        },
+        "old-cc-search": {
+            "label": "Go to the {link} portal",
+            "link": "old CC Search"
+        },
+        "locale": {
+            "label": "Languages available",
+            "icon": "locale"
+        }
+    },
+    "header": {
+        "about": "About",
+        "collections": "Collections",
+        "search-guide": "Search Guide",
+        "feedback": "Feedback",
+        "extension": "Extension"
+    },
+    "footer": {
+        "address": {
+            "title": "Creative Commons",
+            "address": "PO Box 1866, Mountain View CA 94042"
+        },
+        "navigation": {
+            "contact": "Contact",
+            "privacy": "Privacy",
+            "policies": "Policies",
+            "terms": "Terms"
+        },
+        "caption": {
+            "label": "Except where otherwise {noted}, content on this site is licensed under a {attribution}. {icons}",
+            "noted": "noted",
+            "attribution": "Creative Commons Attribution 4.0 International license",
+            "icons": "Icons by Font Awesome."
+        },
+        "donate": {
+            "work": "Our work relies on you!",
+            "help": "Help us keep the internet free and open.",
+            "link": "Donate now"
+        }
+    }
 }

src/locales/fr.json

@@ -1,3 +1,54 @@
 {
-    "hero": "Rechercher du contenu à réutiliser"
+    "hero": {
+        "title": "Rechercher du contenu à réutiliser",
+        "search": {
+            "placeholder": "J'aimerais voir...",
+            "button": "Chercher"
+        },
+        "caption": {
+            "content": "Tout notre contenu est sous licence Creative Commons. {link} sur les licences CC.",
+            "link": "Apprendre encore plus"
+        },
+        "license-filter": {
+            "label": "Je veux quelque chose que je peux"
+        },
+        "old-cc-search": {
+            "label": "Accédez au {link} portail",
+            "link": "ancienne recherche CC"
+        },
+        "locale": {
+            "label": "Langues disponibles",
+            "icon": "lieu"
+        }
+    },
+    "header": {
+        "about": "À propos de",
+        "collections": "Les collections",
+        "search-guide": "Guide de recherche",
+        "feedback": "Retour d'information",
+        "extension": "Extension"
+    },
+    "footer": {
+        "address": {
+            "title": "Creative Commons",
+            "address": "PO Box 1866, Mountain View CA 94042"
+        },
+        "navigation": {
+            "contact": "Contact",
+            "privacy": "Intimité",
+            "policies": "Stratégies",
+            "terms": "Termes"
+        },
+        "caption": {
+            "label": "Sauf indication contraire {noted}, le contenu de ce site est autorisé sous une {attribution}. {icons}",
+            "noted": "noté",
+            "attribution": "Licence internationale Creative Commons Attribution 4.0",
+            "icons": "Icônes par Font Awesome."
+        },
+        "donate": {
+            "work": "Notre travail compte sur vous!",
+            "help": "Aidez-nous à garder Internet gratuit et ouvert.",
+            "link": "Faire un don maintenant"
+        }
+    }
 }

test/unit/specs/components/home-license-filter.spec.js

@@ -1,9 +1,11 @@
 import HomeLicenseFilter from '@/components/HomeLicenseFilter';
 import render from '../../test-utils/render';
+import i18n from '../../test-utils/i18n';
 
 describe('HomeLicenseFilter', () => {
   let options = {};
   let dispatchMock = null;
+  const $t = key => i18n.messages[key];
   beforeEach(() => {
     dispatchMock = jest.fn();
     options = {
@@ -19,6 +21,7 @@ describe('HomeLicenseFilter', () => {
             },
           },
         },
+        $t,
       },
     };
   });

test/unit/specs/components/nav-section.spec.js

@@ -1,6 +1,7 @@
 import NavSection from '@/components/NavSection';
 import { SET_QUERY } from '@/store/mutation-types';
 import render from '../../test-utils/render';
+import i18n from '../../test-utils/i18n';
 
 describe('NavSection', () => {
   it('should render correct contents', () => {
@@ -9,6 +10,7 @@ describe('NavSection', () => {
   });
 
   it('commits a mutation when the form is submitted', () => {
+    const $t = key => i18n.messages[key];
     const storeMock = {
       dispatch: jest.fn(),
       commit: jest.fn(),
@@ -25,6 +27,7 @@ describe('NavSection', () => {
       },
       mocks: {
         $store: storeMock,
+        $t,
       },
     };
     const wrapper = render(NavSection, opts);