Add Line Today hybrid listing and additional filters

Fix excessive line wrapping and improve input text styling

(This commit message is AI generated)

pages/tools/freelinetoday.vue

@@ -1,19 +1,54 @@
 <script setup lang="ts">
 const errore = ref(false);
+const textinput = ref("");
 const route = useRoute();
+const router = useRouter();
+const localePath = useLocalePath();
 const article = route.query.article;
 const buildUrl = "/api/news/get/lt/" + article;
 if (!article) {
   errore.value = true;
 }
 const { data, error, pending } = await useFetch(buildUrl);
+const submitTextInput = () => {
+  const regexFilterOutUrl =
+    /https:\/\/today\.line\.me\/tw\/v2\/article\/([^/\s]*)/;
+  const matches = textinput.value.match(regexFilterOutUrl);
+  const articleId = matches ? matches[1] : null;
+  if (articleId) {
+    window.location.href = localePath(
+      `/tools/freelinetoday?article=${articleId}`,
+    );
+  }
+};
 </script>
 <template>
-  <div class="justify-center align-center text-center flex flex-col">
+  <div v-if="errore">
+    <div
+      class="absolute inset-0 flex flex-col justify-center align-center text-center w-full h-screen"
+    >
+      <h1 class="text-4xl mb-4">無法找到該文章</h1>
+      <span>複製你的LINE Today 網址：</span>
+      <div
+        class="flex flex-row gap-2 w-full justify-center align-center text-center"
+      >
+        <input
+          type="text"
+          v-model="textinput"
+          class="rounded-xl text-black"
+        /><button @click="submitTextInput" class="p-2 bg-sky-600 rounded-xl">
+          送出
+        </button>
+      </div>
+    </div>
+    <div class="h-screen"></div>
+  </div>
+  <div class="justify-center align-center text-center flex flex-col p-3">
     <h2 class="text-3xl text-bold">{{ data.title }}</h2>
     <span class="text-lg text-bold"
       >origin: {{ data.origin }} • author: {{ data.author }}</span
     >
     <div class="test-center" v-for="item in data.paragraph">{{ item }}</div>
   </div>
+  <div class="min-h-10 sticky h-full"></div>
 </template>