add support for yandex alternative words and synonyms

go.mod

@@ -7,7 +7,7 @@ replace github.com/OwO-Network/gdeeplx => github.com/gi-yt/gdeeplx v0.0.0-202308
 //replace codeberg.org/aryak/libmozhi => /home/arya/projects/mozhi/libmozhi
 
 require (
-	codeberg.org/aryak/libmozhi v0.0.0-20240414131012-697ab3b7bb29
+	codeberg.org/aryak/libmozhi v0.0.0-20240522120450-090c25dcb721
 	github.com/gofiber/fiber/v2 v2.52.4
 	github.com/gofiber/swagger v1.0.0
 	github.com/gofiber/template v1.8.0

public/css/style.css

@@ -262,7 +262,7 @@ button:hover {
   select,
   .nice-select .nice-select-dropdown,
   .nice-select,
-  .nice-select-search{
+  .nice-select-search {
     background-color: #fff;
     color: #2f2f2f;
   }
@@ -284,4 +284,68 @@ button:hover {
   footer {
     border-top: 1px solid #b2b2b2;
   }
+
+  .def_type {
+    color: cyan;
+    text-transform: capitalize;
+  }
+
+  .syn {
+    color: burlywood;
+  }
+
+  .syn_type {
+    color: cyan;
+  }
+
+  .use_in_sentence {
+    color: yellow;
+  }
+}
+
+#definitions_and_translations {
+  display: grid;
+  margin: auto;
+  width: 1100px;
+  gap: 10px;
+  grid-template-areas: "definitions translations";
+}
+
+.def_type {
+  color: #007979;
+  text-transform: capitalize;
+}
+
+.syn {
+  color: #804700;
+}
+
+.syn_type {
+  color: #007979;
+}
+
+.use_in_sentence {
+  color: #009902;
+}
+
+.definitions li:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 1200px) {
+  #definitions_and_translations {
+    display: grid;
+    width: 90vw;
+    grid-template-areas:
+      "translations translations"
+      "definitions definitions";
+  }
+}
+
+div.definitions {
+  grid-area: definitions;
+}
+
+div.translations {
+  grid-area: translations;
 }

views/about.html

@@ -1,4 +1,4 @@
-{{template "header" .}}
+{{ template "header" . }}
 <main>
   <h1>About Mozhi</h1>
   <h2>What is Mozhi?</h2>
@@ -6,10 +6,7 @@
     Mozhi is an alternative frontend for many translation engines such as
     google, yandex, duckduckgo, libretranslate and more!
   </p>
-
+  <h2>Why would I use this over just directly accessing the engine in question</h2>
-  <h2>
-    Why would I use this over just directly accessing the engine in question
-  </h2>
   <p>
     There are many reasons why using an alternative-frontend like mozhi is
     superior to directly accessing the service in question, and the biggest and
@@ -23,4 +20,4 @@
     the engines right in front of you is extremely useful.
   </p>
 </main>
-{{ template "footer" .}}
+{{ template "footer" . }}

views/index.html

@@ -140,6 +140,9 @@
         {{ end }}
       </div>
     </div>
+    {{ if eq .Engine "yandex" }}
+    {{ template "yandex_extras" . }}
+    {{ end }}
   </form>
   <script>
     // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0

views/yandex_extras.html

@@ -0,0 +1,42 @@
+{{ if .Translation.WordChoices }}
+<div id="definitions_and_translations">
+  <div class="translations">
+    {{ if or .Translation.TargetSynonyms .Translation.SourceSynonyms }}
+    <span class="def_type">Synonyms</span>
+    <ul>
+      {{ if .Translation.TargetSynonyms }}
+      <li>
+        <span class="syn_type">{{.Translation.OutputText}}</span>
+        <span class="syn">{{ range $index, $key := .Translation.TargetSynonyms }}{{ if eq $key "" }}{{ else }}{{ if eq $index 0 }}{{ else }}, {{ end }}{{.}}{{ end }}{{ end }}</span>
+      </li>
+      <br>
+      {{ end }}
+      {{ if .Translation.SourceSynonyms }}
+      <li>
+        <span class="syn_type">{{.OriginalText}}</span>
+        <span class="syn">{{ range $index, $key := .Translation.SourceSynonyms }}{{ if eq $key "" }}{{ else }}{{ if eq $index 0 }}{{ else }}, {{ end }}{{.}}{{ end }}{{ end }}</span>
+      </li>
+      <br>
+      {{ end }}
+    </ul>
+    {{ end }}
+  </div>
+  <div class="definitions">
+    {{ range $key := .Translation.WordChoices }}
+    <span class="def_type">{{ $key.Word }}</span>
+    <ol>
+      {{ range $index, $key2 := $key.ExamplesSource }}
+      <li>
+        say or shout “hello”; greet someone.
+        <br>
+        <span class="use_in_sentence">{{ index $key.ExamplesSource $index }}</span>
+        <br>
+        <span class="use_in_sentence">{{ index $key.ExamplesTarget $index }}</span>
+        <br>
+      </li>
+      {{ end }}
+    </ol>
+    {{ end }}
+  </div>
+</div>
+{{ end }}