From 240f337f7b52d60fffe0dcb9507fd17d7c13f960 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 26 Dec 2023 15:46:36 +0900
Subject: [PATCH] =?UTF-8?q?(change)=20=E3=80=8C=E5=95=8F=E9=A1=8C=E3=82=92?=
 =?UTF-8?q?=E5=A0=B1=E5=91=8A=E3=81=99=E3=82=8B=E3=80=8D=E3=83=AA=E3=83=B3?=
 =?UTF-8?q?=E3=82=AF=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/misc/get-issue-url.ts | 28 ++++++++++++++++++----------
 error.vue                       | 17 +++++++++++++++--
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/assets/js/misc/get-issue-url.ts b/assets/js/misc/get-issue-url.ts
index a7d7b47c..a08daa49 100644
--- a/assets/js/misc/get-issue-url.ts
+++ b/assets/js/misc/get-issue-url.ts
@@ -3,10 +3,13 @@ import { withQuery } from 'ufo';
 export async function getGhIssueUrl(options: {
     lang: string;
     repoUrl: string;
+    additionalInfo?: Record<string, string>;
 }) {
     // Issue Templateのプレフィル
-    let environment = `* Model and OS of the device(s):
-* Browser:`;
+    let environmentArr: string[] = [
+        '* Model and OS of the device(s):',
+        '* Browser:',
+    ];
     let template = '02_visitor-bug-report-en.yml';
 
     if (options.lang === 'ja') {
@@ -38,33 +41,38 @@ export async function getGhIssueUrl(options: {
             }
 
             const browserData = uaData.fullVersionList.find((item: any) => item.brand.toLowerCase() !== 'not_a brand');
-            
-            const env = [
+
+            environmentArr = [
                 `* Model and OS of the device(s): ${uaData.platform} ${osVersion}`,
                 `* Browser: ${browserData.brand} ${browserData.version}`,
                 `* Viewport Size: ${window.innerWidth}x${window.innerHeight}`,
                 `* (UA Detected Using getHighEntropyValues)`,
-                (options.lang === 'ja') ? '* 【自動入力済】追記は不要です' : '* [Auto-filled] No need to write additional information.',
             ];
-            environment = env.join('\n');
         } else {
             const UAParser = (await import('ua-parser-js')).default;
             const ua = new UAParser();
             const uaRes = ua.getResult();
-            const env = [
+            
+            environmentArr = [
                 `* Model and OS of the device(s): ${uaRes.os.name} v${uaRes.os.version}`,
                 `* Browser: ${uaRes.browser.name} (${uaRes.engine.name}) v${uaRes.browser.version}`,
                 `* Viewport Size: ${window.innerWidth}x${window.innerHeight}`,
                 `* Raw User Agent: ${uaRes.ua}`,
-                (options.lang === 'ja') ? '* 【自動入力済】追記は不要です' : '* [Auto-filled] No need to write additional information.',
             ];
-            environment = env.join('\n');
+        }
+        if (options.additionalInfo) {
+            environmentArr.push(...Object.entries(options.additionalInfo).map((v) => `* ${v[0]}: ${v[1]}`));
+        }
+        environmentArr.push((options.lang === 'ja') ? '* 【自動入力済】追記は不要です' : '* [Auto-filled] No need to write additional information.');
+    } else {
+        if (options.additionalInfo) {
+            environmentArr.push(...Object.entries(options.additionalInfo).map((v) => `* ${v[0]}: ${v[1]}`));
         }
     }
 
     return withQuery(`${options.repoUrl}/issues/new`, {
         template,
-        environment,
+        environment: environmentArr.join('\n'),
         labels: 'maybe non-developer,bug?',
     });
     
diff --git a/error.vue b/error.vue
index 525df846..ce7529f4 100644
--- a/error.vue
+++ b/error.vue
@@ -8,14 +8,23 @@
         ></MkAnimBg>
         <GNav @toggleNav="isNavOpen = !isNavOpen" :is-open="isNavOpen" />
         <div :class="$style.errorContainer" class="relative z-10 flex items-center justify-center">
-            <div class="max-w-xl w-full p-6 mx-6 bg-white/70 dark:bg-white/20 shadow-black/10 shadow-xl rounded-xl">
+            <div class="max-w-xl w-full p-6 mx-6 bg-white/60 dark:bg-white/15 shadow-black/10 shadow-xl rounded-xl">
                 <img src="https://xn--931a.moe/assets/error.jpg" class="w-32 h-32 rounded-xl mx-auto mb-6" />
                 <div v-if="error">
                     <h1 class="text-center font-bold text-2xl mb-4">{{ error?.statusCode === 404 ? $t('_error.notFound') : $t('_error.generalError') }}</h1>
                     <p class="text-center mb-4">{{ error?.statusCode === 404 ? $t('_error.notFoundDesc') : $t('_error.generalErrorDesc') }}</p>
                     <div class="max-w-lg w-full mx-auto grid grid-cols-1 sm:grid-cols-2 gap-4">
                         <button class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70" @click="handleError">{{ $t('_error.goToTop') }}</button>
-                        <GNuxtLink class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70" target="_blank" :to="issueReportLink">{{ $t('_error.reportProblem') }}</GNuxtLink>
+                        <GNuxtLink
+                            class="block rounded-full text-center px-4 py-2 border-2 hover:opacity-70"
+                            :class="!issueReportLink && 'opacity-70'"
+                            target="_blank"
+                            :to="issueReportLink ?? ''"
+                        >{{ $t('_error.reportProblem') }}<div class="inline-block text-sm ml-1">
+                                <div v-if="!issueReportLink" class="bi animate-spin border-2 border-accent-500 rounded-full border-t-transparent"></div>
+                                <ExtIco v-else />
+                            </div>
+                        </GNuxtLink>
                     </div>
                 </div>
                 <div v-else class="mx-auto py-5">
@@ -30,6 +39,7 @@
 import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables';
 import NProgress from 'nprogress';
 import { getGhIssueUrl } from './assets/js/misc/get-issue-url';
+import ExtIco from 'bi/box-arrow-up-right.svg';
 
 const error = useError();
 const colorMode = useColorMode();
@@ -64,6 +74,9 @@ const cnHead = (locale.value === 'cn') ? [
 const { data: issueReportLink } = await useAsyncData(`issueReportLink_${locale.value}`, () => getGhIssueUrl({
     lang: locale.value,
     repoUrl: runtimeConfig.public.repositoryUrl,
+    additionalInfo: {
+        'Raw Error': (typeof error.value === 'string') ? error.value : JSON.stringify(error.value),
+    },
 }), {
     server: false,
 });