Merge pull request #405 from valor-software/development

feat(article): added google translate customization (#399)

apps/valor-software-site/src/assets/articles/google-translate-customization-under-nextjs/google-translate-customization-under-nextjs.html

@@ -130,7 +130,7 @@ <h3 id="_the_main_part">The main part</h3>
 <p>The header includes the language switcher component (will be described later)</p>
 </li>
 <li>
-<p>The central part includes four paragraphs regarding Lorem Ipsum explanation</p>
+<p>The central part includes four paragraphs regarding <mark>Lorem Ipsum</mark> explanation</p>
 </li>
 <li>
 <p>The footer contains a button as a link to the source of the content</p>
@@ -342,8 +342,10 @@ <h3 id="_the_languageswitcher_component">The LanguageSwitcher component</h3>
 <div class="sect2">
 <h3 id="_working_principles">Working principles</h3>
 <div class="paragraph">
-<p>It&#8217;s time to gather all the information above and explain how the solution works.
-The start point is placed in <a href="https://github.com/buchslava/nextjs-gtrans-demo/blob/main/src/pages/_document.tsx" target="_blank" rel="noopener">src/pages/_document.tsx</a></p>
+<p>It&#8217;s time to gather all the information above and explain how the solution works.</p>
+</div>
+<div class="paragraph">
+<p><strong>The start point is placed in <a href="https://github.com/buchslava/nextjs-gtrans-demo/blob/main/src/pages/_document.tsx" target="_blank" rel="noopener">src/pages/_document.tsx</a></strong></p>
 </div>
 <div class="listingblock">
 <div class="content">
@@ -412,10 +414,10 @@ <h3 id="_there_are_three_scripts_there">There are three scripts there</h3>
 <p>It&#8217;s important. More information regarding the above you can find <a href="https://nextjs.org/docs/pages/building-your-application/optimizing/scripts" target="_blank" rel="noopener">here</a>. Let me provide you some related theory.</p>
 </div>
 <div class="paragraph">
-<p>beforeInteractive: Load the script before any Next.js code and before any page hydration occurs.</p>
+<p><strong>beforeInteractive: Load the script before any Next.js code and before any page hydration occurs.</strong></p>
 </div>
 <div class="paragraph">
-<p>afterInteractive: (default) Load the script early but after some hydration on the page occurs.</p>
+<p><strong>afterInteractive: (default) Load the script early but after some hydration on the page occurs.</strong></p>
 </div>
 </div>
 <div class="sect2">
@@ -440,23 +442,23 @@ <h3 id="_conclusion">Conclusion</h3>
 <div class="paragraph">
 <p>and switch the language, say, Deutsch. However, the issue is that the standard Google Translate bar is still on top.</p>
 </div>
-<div class="imageblock small-img">
+<div class="imageblock img">
 <div class="content">
 <img src="assets/articles/google-translate-customization-under-nextjs/img1.png" alt="img1">
 </div>
 </div>
 <div class="paragraph">
 <p>We definitely ought to fix it. Let&#8217;s add a couple of the following changes to <a href="https://github.com/buchslava/nextjs-gtrans-demo/blob/main/src/styles/globals.css" target="_blank" rel="noopener">src/styles/globals.css</a></p>
 </div>
-<div class="imageblock small-img">
+<div class="imageblock img">
 <div class="content">
 <img src="assets/articles/google-translate-customization-under-nextjs/img2.png" alt="img2">
 </div>
 </div>
 <div class="paragraph">
 <p>Much better now!</p>
 </div>
-<div class="imageblock small-img">
+<div class="imageblock img">
 <div class="content">
 <img src="assets/articles/google-translate-customization-under-nextjs/img3.png" alt="img3">
 </div>
@@ -532,13 +534,13 @@ <h3 id="_conclusion">Conclusion</h3>
 http-server</code></pre>
 </div>
 </div>
-<div class="imageblock small-img">
+<div class="imageblock img">
 <div class="content">
 <img src="assets/articles/google-translate-customization-under-nextjs/img4.gif" alt="img4">
 </div>
 </div>
 <div class="paragraph">
-<p>The final solution is <a href="https://github.com/buchslava/nextjs-gtrans-demohttps://github.com/buchslava/nextjs-gtrans-demo" target="_blank" rel="noopener">here</a>.</p>
+<p>The final solution is <a href="https://github.com/buchslava/nextjs-gtrans-demo" target="_blank" rel="noopener">here</a>.</p>
 </div>
 </div>
 </div>

apps/valor-software-site/src/assets/articles/google-translate-customization-under-nextjs/google-translate-customization-under-nextjs.json

@@ -7,6 +7,6 @@
 "authorImg": "assets/articles/google-translate-customization-under-nextjs/Slava_Chub.jpg" ,
 "author": "Vyacheslav Chub",
 "position": "Full Stack Software Engineer",
-"date": "Tue Oct 17 2023 10:45:55 GMT+0000 (Coordinated Universal Time)",
+"date": "Mon Oct 23 2023 10:45:55 GMT+0000 (Coordinated Universal Time)",
 "seoDescription": "Multilingual Implementation in NextJS Solution"
 }