improve project settings head titles

2026-08-31 03:55:59 +00:00 · 2026-08-02 17:02:33 -07:00
parent 57be502f99
commit e02815e3bc
16 changed files with 68 additions and 9 deletions
@@ -0,0 +1,26 @@
+import {
+	defineMessages,
+	injectProjectPageContext,
+	type MessageDescriptor,
+	useVIntl,
+} from '@modrinth/ui'
+
+const messages = defineMessages({
+	headTitle: {
+		id: 'project.settings.head-title',
+		defaultMessage: '⚙️{section} - {project}',
+	},
+})
+
+export function useProjectSettingsHeadTitle(section: MessageDescriptor) {
+	const { formatMessage } = useVIntl()
+	const { projectV2: project } = injectProjectPageContext()
+
+	useHead({
+		title: () =>
+			`${formatMessage(messages.headTitle, {
+				section: formatMessage(section),
+				project: project.value.title,
+			})}`,
+	})
+}
@@ -3968,6 +3968,9 @@
  "project.settings.general.url.title": {
    "message": "URL"
  },
+  "project.settings.head-title": {
+    "message": "⚙️{section} - {project}"
+  },
  "project.settings.permissions.attention-needed.description.proj-approved": {
    "message": "Please provide proof that you have permission to redistribute all of the following files. Once completed, withheld versions will be automatically published."
  },
@@ -3,5 +3,9 @@
 </template>

 <script setup lang="ts">
+import { commonProjectSettingsMessages } from '@modrinth/ui'
+
 import AnalyticsDashboard from '~/components/analytics-dashboard/index.vue'
+
+useProjectSettingsHeadTitle(commonProjectSettingsMessages.analytics)
 </script>
@@ -42,6 +42,7 @@
 import { TriangleAlertIcon } from '@modrinth/assets'
 import { countText, MIN_DESCRIPTION_CHARS } from '@modrinth/moderation'
 import {
+	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	injectProjectPageContext,
 	MarkdownEditor,
@@ -56,6 +57,8 @@ import { useImageUpload } from '~/composables/image-upload.ts'

 const { projectV2: project, currentMember, patchProject } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.description)
+
 const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({ description: project.value.body }),
 	async ({ description }) => {
@@ -84,6 +84,8 @@ const issueMessages = defineMessages({
 	},
 }) satisfies Record<DisclosureFormIssue, MessageDescriptor>

+useProjectSettingsHeadTitle(messages.title)
+
 const disclosuresQueryKey = computed(
 	() => ['project', 'disclosures', 'v3', project.value.id] as const,
 )
@@ -28,6 +28,7 @@
 import { SettingsIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
+	commonProjectSettingsMessages,
 	EnvironmentMigration,
 	injectProjectPageContext,
 	LoadingIndicator,
@@ -36,6 +37,8 @@ import { isStaff } from '@modrinth/utils'

 const { currentMember, projectV2, projectV3 } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.environment)
+
 const showEnvironmentMigration = computed(() => {
 	return isStaff(currentMember.value?.user)
 })
@@ -291,6 +291,7 @@ import {
 } from '@modrinth/assets'
 import {
 	ButtonStyled,
+	commonProjectSettingsMessages,
 	ConfirmModal,
 	DropArea,
 	FileInput,
@@ -316,15 +317,7 @@ const {
 	deleteGalleryItem: deleteGalleryItemMutation,
 } = injectProjectPageContext()

-const title = `${project.value.title} - Gallery`
-const description = `View ${project.value.gallery?.length ?? 0} images of ${project.value.title} on Modrinth.`
-
-useSeoMeta({
-	title,
-	description,
-	ogTitle: title,
-	ogDescription: description,
-})
+useProjectSettingsHeadTitle(commonProjectSettingsMessages.gallery)

 const modal_edit_item = ref(null)
 const modal_confirm = ref(null)
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	defineMessages,
 	IconSelect,
@@ -17,6 +18,8 @@ const { formatMessage } = useVIntl()

 const { projectV2: project, patchProject } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.general)
+
 const { saved, current, saving, hasChanges, reset, save } = useSavable(
 	() => ({
 		title: project.value.title,
@@ -336,6 +336,7 @@ import {
 	Avatar,
 	ButtonStyled,
 	Combobox,
+	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	ConfirmModal,
 	injectModrinthClient,
@@ -366,6 +367,8 @@ const {
 } = injectProjectPageContext()
 const { labrinth } = injectModrinthClient()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.general)
+
 const flags = useFeatureFlags()

 const tags = useGeneratedState()
@@ -155,6 +155,7 @@
 <script setup lang="ts">
 import {
 	Checkbox,
+	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	DropdownSelect,
 	injectProjectPageContext,
@@ -173,6 +174,8 @@ import { computed } from 'vue'

 const { projectV2: project, currentMember, patchProject } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.license)
+
 function getInitialLicense() {
 	const oldLicenseId = project.value.license.id
 	const trimmedLicenseId = oldLicenseId
@@ -288,6 +288,7 @@ import { SaveIcon, TriangleAlertIcon } from '@modrinth/assets'
 import { commonLinkDomains, isCommonUrl, isDiscordUrl, isLinkShortener } from '@modrinth/moderation'
 import {
 	ButtonStyled,
+	commonProjectSettingsMessages,
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -307,6 +308,8 @@ const {
 const { labrinth } = injectModrinthClient()
 const { addNotification } = injectNotificationManager()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.links)
+
 const issuesUrl = ref(project.value.issues_url)
 const sourceUrl = ref(project.value.source_url)
 const wikiUrl = ref(project.value.wiki_url)
@@ -564,6 +564,7 @@ import {
 	Card,
 	Checkbox,
 	Combobox,
+	commonProjectSettingsMessages,
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
@@ -587,6 +588,8 @@ const {
 	invalidate,
 } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.members)
+
 const isServerProject = computed(() => projectV3.value?.minecraft_server != null)

 const auth = await useAuth()
@@ -20,6 +20,7 @@ import {
 	Combobox,
 	type ComboboxOption,
 	commonMessages,
+	commonProjectSettingsMessages,
 	ConfirmModal,
 	createAttributionGroupTitle,
 	defineMessage,
@@ -56,6 +57,8 @@ const queryClient = useQueryClient()
 const deleteAllGroupsModalRef =
 	useTemplateRef<InstanceType<typeof ConfirmModal>>('deleteAllGroupsModalRef')

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.permissions)
+
 type SortType = 'status' | 'most_files' | 'recently_edited' | 'rejected'

 const searchQuery = ref('')
@@ -172,6 +172,7 @@ import { InfoIcon, RefreshCwIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
 	Combobox,
+	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	defineMessages,
 	injectModrinthClient,
@@ -273,6 +274,8 @@ const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { projectV3, currentMember, patchProjectV3 } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.server)
+
 const javaAddress = ref('')
 const bedrockAddress = ref('')
 const bedrockPort = ref(19132)
@@ -254,6 +254,8 @@ const messages = defineMessages({

 const { projectV2: project, projectV3, patchProject } = injectProjectPageContext()

+useProjectSettingsHeadTitle(messages.tagsTitle)
+
 const formatCategoryName = (categoryName: string) => {
 	return formatCategory(formatMessage, categoryName)
 }
@@ -369,6 +369,8 @@ const {
 	cdnDownloadReason,
 } = injectProjectPageContext()

+useProjectSettingsHeadTitle(commonProjectSettingsMessages.versions)
+
 // Load versions on mount (client-side)
 onMounted(() => {
 	loadVersions()