Add visible label on newsletter form

Author: ktquez

src/.vuepress/config/languages/en/themeLocaleConfig.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   newsletter: {
     title: 'Subscribe to the newsletter',
+    label: 'Email address',
     description: 'Enter your email address and receive articles, videos, updates and events from the Vue.js community and accessibility.',
     textButton: 'Subscribe'
   },
@@ -46,9 +47,6 @@ module.exports = {
     '/recipes/': sidebar.recipes
   },
   a11y: {
-    newsletter: {
-      placeholder: 'Email for subscription'
-    },
     codeSnippet: {
       copy: {
         text: 'Copy to clipboard',

src/.vuepress/config/languages/pt/themeLocaleConfig.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   newsletter: {
     title: 'Inscreva-se na newsletter',
+    label: 'Endereço de email',
     description: 'Digite seu email e receba artigos, vídeos, atualizações e eventos da comunidade Vue.js e acessibilidade.',
     textButton: 'Cadastrar'
   },
@@ -46,9 +47,6 @@ module.exports = {
     '/pt/receitas/': sidebar.receitas
   },
   a11y: {
-    newsletter: {
-      placeholder: 'Email para inscrição'
-    },
     codeSnippet: {
       copy: {
         text: 'Copiar',

src/.vuepress/theme/components/NewsletterForm.vue

@@ -9,9 +9,9 @@
   >
     <label
       :for="emailLabel"
-      class="flex flex-1"
+      class="flex flex-wrap flex-1"
     >
-      <span class="sr-only">{{ $themeLocaleConfig.a11y.newsletter.placeholder }}</span>
+      <span class="block w-full pb-2 text-base font-bold">{{ $themeLocaleConfig.newsletter.label }}</span>
       <input
         :id="emailLabel"
         ref="emailField"
@@ -21,13 +21,12 @@
         required
         autocomplete="email"
         class="w-full p-4 border border-solid rounded-md outline-none bg-main newsletter-form-input c-border-color hover:border-accent-primary focus:border-accent-primary"
-        :placeholder="$themeLocaleConfig.a11y.newsletter.placeholder"
       >
     </label>
     <slot name="button">
       <button
         type="submit"
-        class="-ml-2 text-black btn btn-accent newsletter-form-btn"
+        class="self-end -ml-2 text-black btn btn-accent newsletter-form-btn"
       >
         {{ $themeLocaleConfig.newsletter.textButton }}
       </button>

src/.vuepress/theme/layouts/Posts.vue

@@ -11,8 +11,11 @@
         class="ml-2"
       />
 
-      <h1 class="pl-3 mt-2 mb-12 text-5xl font-bold leading-10 lg:pl-6">
-        Latest posts <span class="capitalize">{{ isCategory ? `(${$currentCategories.key})` : '' }}</span>
+      <h1
+        class="pl-3 mt-2 mb-8 font-bold leading-10 lg:pl-6"
+        style="font-size: 2.5rem;"
+      >
+        Latest posts <span class="capitalize">{{ isCategory && $currentCategories ? `(${$currentCategories.key})` : '' }}</span>
       </h1>
 
       <ul class="flex flex-wrap justify-between w-full px-3 lg:pr-6 lg:pl-0 lg:ml-6 xl:pr-0">