split url into webUrl and localUrl (like mastodon)stable

20 files changed, 49 insertions, 51 deletions

diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 241ee3c388..e587e8f93d 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div style="overflow: clip;">
 			<img :src="instance.sidebarLogoUrl ?? instance.iconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 			<div :class="$style.bannerName">
-				<b>{{ instance.name ?? host }}</b>
+				<b>{{ instance.name ?? webHost }}</b>
 			</div>
 		</div>
 	</div>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>Sharkey</template>
 				<template #value>{{ version }}</template>
 			</MkKeyValue>
-			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
+			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? webHost })">
 			</div>
 			<FormLink to="/about-sharkey">
 				<template #icon><i class="ti ti-info-circle"></i></template>
@@ -148,7 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { webHost, version } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index dc29ae2f80..9ca6fbef34 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -279,7 +279,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
 import type { Badge } from '@/components/SkBadgeStrip.vue';
 import type { ChartSrc } from '@/components/MkChart.vue';
 import MkChart from '@/components/MkChart.vue';
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 64faf49848..5427350e1a 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #prefix><i class="ti ti-link"></i></template>
 					<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</template>
 					<template #caption>
-						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 						<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 						<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 						<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #prefix><i class="ti ti-link"></i></template>
 					<template #label>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</template>
 					<template #caption>
-						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+						<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 						<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 						<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 						<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
@@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import JSON5 from 'json5';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import FromSlot from '@/components/form/slot.vue';
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 56d037758f..f56c127eb1 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import MkPostForm from '@/components/MkPostForm.vue';
 import MkTimeline from '@/components/MkTimeline.vue';
@@ -238,7 +238,7 @@ const headerActions = computed(() => {
 					console.warn('failed to copy channel URL. channel.value is null.');
 					return;
 				}
-				copyToClipboard(`${url}/channels/${channel.value.id}`);
+				copyToClipboard(`${webUrl}/channels/${channel.value.id}`);
 			},
 		});
 
@@ -255,7 +255,7 @@ const headerActions = computed(() => {
 					navigator.share({
 						title: channel.value.name,
 						text: channel.value.description ?? undefined,
-						url: `${url}/channels/${channel.value.id}`,
+						url: `${webUrl}/channels/${channel.value.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index b72583214b..6e643b5110 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { NormalizedChatMessage } from './room.vue';
@@ -183,7 +183,7 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 			text: i18n.ts.reportAbuse,
 			icon: 'ti ti-exclamation-circle',
 			action: () => {
-				const localUrl = `${url}/chat/messages/${props.message.id}`;
+				const localUrl = `${webUrl}/chat/messages/${props.message.id}`;
 				const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 					user: props.message.fromUser!,
 					initialComment: `${localUrl}\n-----\n`,
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index 87a361c1e2..0417fe5289 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, provide, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import MkNotes from '@/components/MkNotes.vue';
 import { $i } from '@/i.js';
@@ -146,7 +146,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
 			icon: 'ti ti-link',
 			text: i18n.ts.copyUrl,
 			action: () => {
-				copyToClipboard(`${url}/clips/${clip.value!.id}`);
+				copyToClipboard(`${webUrl}/clips/${clip.value!.id}`);
 			},
 		}, {
 			icon: 'ti ti-code',
@@ -164,7 +164,7 @@ const headerActions = computed(() => clip.value && isOwned.value ? [{
 					navigator.share({
 						title: clip.value!.name,
 						text: clip.value!.description ?? '',
-						url: `${url}/clips/${clip.value!.id}`,
+						url: `${webUrl}/clips/${clip.value!.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
index 82badd40b3..189e1848d0 100644
--- a/packages/frontend/src/pages/explore.featured.vue
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div v-else-if="tab === 'polls'">
 		<template v-if="ltlAvailable || gtlAvailable">
 			<MkFoldableSection v-if="ltlAvailable" class="_margin">
-				<template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? host }) }}</template>
+				<template #header><i class="ph-house ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.tsx.pollsOnLocal({ name: instance.name ?? webHost }) }}</template>
 				<MkNotes :pagination="paginationForPollsLocal" :disableAutoLoad="true"/>
 			</MkFoldableSection>
 
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkNotes from '@/components/MkNotes.vue';
 import MkTab from '@/components/MkTab.vue';
 import { i18n } from '@/i18n.js';
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index 77fe21c33f..94701865aa 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -46,7 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<template v-if="tag == null">
 			<MkFoldableSection class="_margin">
-				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.tsx.popularUsersLocal({ name: instance.name ?? host }) }}</template>
+				<template #header><i class="ti ti-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.tsx.popularUsersLocal({ name: instance.name ?? webHost }) }}</template>
 				<MkUserList :pagination="popularUsersLocalF"/>
 			</MkFoldableSection>
 			<MkFoldableSection class="_margin">
@@ -69,7 +69,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref, useTemplateRef, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config';
+import { webHost } from '@@/js/config';
 import MkUserList from '@/components/MkUserList.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkTab from '@/components/MkTab.vue';
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index b17faca2a9..90152a9571 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, onDeactivated, onUnmounted, ref, watch, shallowRef, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
 import { Interpreter, Parser, values } from '@syuilo/aiscript';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { AsUiComponent, AsUiRoot } from '@/aiscript/ui.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -127,7 +127,7 @@ function share(ev: MouseEvent) {
 function copyLink() {
 	if (!flash.value) return;
 
-	copyToClipboard(`${url}/play/${flash.value.id}`);
+	copyToClipboard(`${webUrl}/play/${flash.value.id}`);
 }
 
 function shareWithNavigator() {
@@ -136,7 +136,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: flash.value.title,
 		text: flash.value.summary,
-		url: `${url}/play/${flash.value.id}`,
+		url: `${webUrl}/play/${flash.value.id}`,
 	});
 }
 
@@ -144,7 +144,7 @@ function shareWithNote() {
 	if (!flash.value) return;
 
 	os.post({
-		initialText: `${flash.value.title}\n${url}/play/${flash.value.id}`,
+		initialText: `${flash.value.title}\n${webUrl}/play/${flash.value.id}`,
 		instant: true,
 	});
 }
@@ -206,7 +206,7 @@ async function run() {
 			root.value = _root.value;
 		}),
 		THIS_ID: values.STR(flash.value.id),
-		THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
+		THIS_URL: values.STR(`${webUrl}/play/${flash.value.id}`),
 	}, {
 		in: aiScriptReadline,
 		out: (value) => {
@@ -241,7 +241,7 @@ async function run() {
 function reportAbuse() {
 	if (!flash.value) return;
 
-	const pageUrl = `${url}/play/${flash.value.id}`;
+	const pageUrl = `${webUrl}/play/${flash.value.id}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: flash.value.user,
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 7c754f0b03..16cfd250a1 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -109,20 +109,20 @@ function fetchPost() {
 }
 
 function copyLink() {
-	copyToClipboard(`${url}/gallery/${post.value.id}`);
+	copyToClipboard(`${webUrl}/gallery/${post.value.id}`);
 }
 
 function share() {
 	navigator.share({
 		title: post.value.title,
 		text: post.value.description,
-		url: `${url}/gallery/${post.value.id}`,
+		url: `${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
 function shareWithNote() {
 	os.post({
-		initialText: `${post.value.title} ${url}/gallery/${post.value.id}`,
+		initialText: `${post.value.title} ${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
@@ -156,7 +156,7 @@ function edit() {
 function reportAbuse() {
 	if (!post.value) return;
 
-	const pageUrl = `${url}/gallery/${post.value.id}`;
+	const pageUrl = `${webUrl}/gallery/${post.value.id}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: post.value.user,
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 85befbb18b..a3119a4de8 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -151,7 +151,7 @@ function fetchNote() {
 				message: i18n.ts.thisContentsAreMarkedAsSigninRequiredByAuthor,
 				openOnRemote: {
 					type: 'lookup',
-					url: `${config.url}/notes/${props.noteId}`,
+					url: `${config.webUrl}/notes/${props.noteId}`,
 				},
 			});
 		}
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 7368e0329a..f67fd591cf 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -63,7 +63,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, provide, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
-import { url } from '@@/js/config.js';
 import XBlocks from './page-editor.blocks.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/MkSelect.vue';
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index f4d0f25734..50a828aef9 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -188,14 +188,14 @@ function share(ev: MouseEvent) {
 function copyLink() {
 	if (!page.value) return;
 
-	copyToClipboard(`${url}/@${page.value.user.username}/pages/${page.value.name}`);
+	copyToClipboard(`${webUrl}/@${page.value.user.username}/pages/${page.value.name}`);
 }
 
 function shareWithNote() {
 	if (!page.value) return;
 
 	os.post({
-		initialText: `${page.value.title || page.value.name}\n${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		initialText: `${page.value.title || page.value.name}\n${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 		instant: true,
 	});
 }
@@ -206,7 +206,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: page.value.title ?? page.value.name,
 		text: page.value.summary ?? undefined,
-		url: `${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		url: `${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 	});
 }
 
@@ -248,7 +248,7 @@ function pin(pin) {
 function reportAbuse() {
 	if (!page.value) return;
 
-	const pageUrl = `${url}/@${props.username}/pages/${props.pageName}`;
+	const pageUrl = `${webUrl}/@${props.username}/pages/${props.pageName}`;
 
 	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
 		user: page.value.user,
diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue
index 1c1adaf687..d5ffecf2b4 100644
--- a/packages/frontend/src/pages/reversi/game.board.vue
+++ b/packages/frontend/src/pages/reversi/game.board.vue
@@ -146,7 +146,7 @@ import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shal
 import * as Misskey from 'misskey-js';
 import * as Reversi from 'misskey-reversi';
 import { useInterval } from '@@/js/use-interval.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -443,7 +443,7 @@ function autoplay() {
 
 function share() {
 	os.post({
-		initialText: `#MisskeyReversi\n${url}/reversi/g/${game.value.id}`,
+		initialText: `#MisskeyReversi\n${webUrl}/reversi/g/${game.value.id}`,
 		instant: true,
 	});
 }
diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue
index a447572cc0..fa40fee70d 100644
--- a/packages/frontend/src/pages/reversi/game.vue
+++ b/packages/frontend/src/pages/reversi/game.vue
@@ -20,7 +20,7 @@ import { useStream } from '@/stream.js';
 import { ensureSignin } from '@/i.js';
 import { useRouter } from '@/router.js';
 import * as os from '@/os.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@@/js/use-interval.js';
 
@@ -45,7 +45,7 @@ function start(_game: Misskey.entities.ReversiGameDetailed) {
 
 	if (shareWhenStart.value) {
 		misskeyApi('notes/create', {
-			text: `${i18n.ts._reversi.iStartedAGame}\n${url}/reversi/g/${props.gameId}`,
+			text: `${i18n.ts._reversi.iStartedAGame}\n${webUrl}/reversi/g/${props.gameId}`,
 			visibility: 'home',
 		});
 	}
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index 85183637f4..2fd72df6d5 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -127,7 +127,7 @@ import { computed, ref, shallowRef, toRef } from 'vue';
 import type * as Misskey from 'misskey-js';
 import type { Paging } from '@/components/MkPagination.vue';
 import { $i } from '@/i.js';
-import { host as localHost } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import * as os from '@/os.js';
@@ -207,7 +207,7 @@ type SearchParams = {
 };
 
 const fixHostIfLocal = (target: string | null | undefined) => {
-	if (!target || target === localHost) return '.';
+	if (!target || target === webHost) return '.';
 	return target;
 };
 
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
index 5bb125e67c..2b147a1d5f 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -106,7 +106,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { hostname, port } from '@@/js/config';
+import { localHostname, port } from '@@/js/config';
 import { useTemplateRef, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -162,7 +162,7 @@ function downloadBackupCodes() {
 		const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
 		const dummya = window.document.createElement('a');
 		dummya.href = URL.createObjectURL(txtBlob);
-		dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
+		dummya.download = `${$i.username}@${localHostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
 		dummya.click();
 	}
 }
diff --git a/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
index c77870f9d3..7a0f2ceb41 100644
--- a/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
+++ b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
-import { host as hostRaw } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import { toUnicode } from 'punycode.js';
 import MkTextarea from '@/components/MkTextarea.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -36,7 +36,7 @@ const domainArray = computed(() => {
 		.filter(el => el);
 });
 const changed = ref(false);
-const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
+const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(localHost) + '" />`';
 
 async function save() {
 	// checks for a full line without whitespace.
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 585d96bd08..4facc6edce 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -79,7 +79,7 @@ import { v4 as uuid } from 'uuid';
 import JSON5 from 'json5';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { Theme } from '@/theme.js';
 import MkButton from '@/components/MkButton.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
@@ -190,7 +190,7 @@ async function saveAs() {
 
 	theme.value.id = uuid();
 	theme.value.name = name;
-	theme.value.author = `@${$i.username}@${toUnicode(host)}`;
+	theme.value.author = `@${$i.username}@${toUnicode(localHost)}`;
 	if (description.value) theme.value.desc = description.value;
 	await addTheme(theme.value);
 	applyTheme(theme.value);
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 4d9c0bb742..f84f11dcab 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
-					<template #suffix>@{{ host }}</template>
+					<template #suffix>@{{ localHost }}</template>
 				</MkInput>
 				<MkInput v-model="password" type="password" data-cy-admin-password>
 					<template #label>{{ i18n.ts.password }}</template>
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { localHost, version } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';