Add Etymology section

pure-english · Dec 18, 2023 · bef0c7e · bef0c7e
1 parent 16a850c
commit bef0c7e
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 2 deletions.
diff --git a/src/components/SearchResult.vue b/src/components/SearchResult.vue
@@ -1,5 +1,52 @@
 <!-- eslint-disable vue/no-unused-vars -->
 <template>
+ <!-- Etymology -->
+ <div class="mb-5" width="350">
+ <v-expansion-panels variant="accordion" width="350">
+ <v-expansion-panel
+ :title="`Etymology of '${searchedWord}'`"
+ width="350"
+ >
+ <v-expansion-panel-text>
+ <v-card>
+ <v-tabs
+ v-model="tab"
+ bg-color="primary"
+ >
+ <!-- <v-tab value="wiktionary">Etymonline</v-tab> -->
+ <v-tab value="etymonline">Etymonline</v-tab>
+ <!-- <v-tab value="OED">OED</v-tab> -->
+ </v-tabs>
+
+ <v-card-text>
+ <v-window v-model="tab">
+ <!-- <v-window-item value="wiktionary">
+ Wiktionary etymology
+ </v-window-item> -->
+
+ <v-window-item value="etymonline">
+ <iframe
+ :src="`https://etymonline.com/word/${searchedWord}`"
+ id="etymologyIFrame"
+ height="500"
+ frameborder="0"
+ referrerpolicy="no-referrer"
+ style="object-fit: contain; max-height: 500px;"
+ >
+ </iframe>
+ </v-window-item>
+
+ <!-- <v-window-item value="OED">
+ OED etymology
+ </v-window-item> -->
+ </v-window>
+ </v-card-text>
+ </v-card>
+ </v-expansion-panel-text>
+ </v-expansion-panel>
+ </v-expansion-panels>
+ </div>
+
  <!-- False friends -->
  <div
  v-if="searchedWord.toLowerCase() in (falseFriends ?? {})"
@@ -369,6 +416,7 @@ const searchedWord = computed(() => {
 const emptyAnglishFuzzyResults: Array<AnglishToEnglishEntry> = [];
 const anglishFuzzyResults: Ref<Array<AnglishToEnglishEntry>> = ref([]);
 const anglishExactResults: Ref<Array<AnglishToEnglishEntry>> = ref([]);
+const tab = ref("etymonline");
 
 async function refreshSearch() {
  anglishFuzzyResults.value = structuredClone(emptyAnglishFuzzyResults);
@@ -464,7 +512,7 @@ async function refreshSearch() {
  }
 }
 
-onMounted(() => {
+onMounted(async () => {
  console.log("Mounted!");
  refreshSearch();
 
@@ -483,6 +531,14 @@ onMounted(() => {
  window.scrollTo(0, document.body.scrollHeight);
  }
  });
+
+ // while (etymologyIFrame.value === null) {
+ // console.log("Waiting for etymology iframe to load…");
+ // await new Promise(resolve => setTimeout(resolve, 300));
+ // }
+ // etymologyIFrame.value.onload = function () {
+ // etymologyIFrame.value?.contentWindow?.scrollBy(0, 444);
+ // };
 });
 
 const route = useRoute();
@@ -541,4 +597,9 @@ h2 {
 div#not-found>p {
  padding-bottom: 16px;
 }
+
+iframe {
+ display: block;
+ width: 100%;
+}
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -56,7 +56,7 @@
 
  <p><sub>This project is still in progress, expect errors.</sub></p>
 
- <p><sub>v1.6.4 (2023-12-17)</sub></p>
+ <p><sub>v1.7.0 (2023-12-18)</sub></p>
  </center>
 </template>