Rethink share URLs to include location ID

This makes the URLs more resilient to changes and is as close to a permalink as it gets.

Author: bkis

Tekst-Web/i18n/ui/deDE.yml

@@ -204,6 +204,8 @@ browse:
       Klicken Sie hier, um eine URL zur aktuellen Belegstelle mit diesem Belegstellen-Alias
       zu kopieren. Tipp: Suchen Sie nach diesem Belegstellen-Alias in der Schnellsuche,
       um direkt zu dieser Belegstelle zu gelangen.
+    genericPermalinkTip: Klicken Sie hier, um eine URL zur aktuellen Belegstelle zu kopieren.
+    shareLocUrl: Belegstellen-URL teilen
     msgNoNearest: Es gibt keine weiteren Belegstellen mit Inhalten dieser Ressource in dieser Richtung.
   toolbar:
     tipSelectLocation: Belegstelle auswählen

Tekst-Web/i18n/ui/enUS.yml

@@ -200,6 +200,8 @@ browse:
     aliasesTip: |
       Click here to copy a URL to the current location using this location alias.
       Hint: Search for this location alias in the Quick Search to directly jump to this location.
+    genericPermalinkTip: Click here to copy a URL to the current location.
+    shareLocUrl: Share location URL
     msgNoNearest: There are no more locations holding contents of this resource in this direction.
   toolbar:
     tipSelectLocation: Select location

Tekst-Web/package-lock.json

@@ -4,6 +4,7 @@ import env from '@/env';
 import { NFlex } from 'naive-ui';
 
 defineProps<{
+  locationId: string;
   textSlug: string;
   aliases?: string[];
 }>();
@@ -13,16 +14,28 @@ const baseUrl = `${origin}/${env.WEB_PATH_STRIPPED}`.replace(/\/+$/, '');
 
 <template>
   <n-flex align="center" class="my-lg">
+    <template v-if="!!aliases?.length">
+      <copy-to-clipboard-button
+        v-for="alias in aliases"
+        :key="alias"
+        tertiary
+        size="tiny"
+        :text="`${baseUrl}/bookmark/${locationId}/${textSlug}/${alias}`"
+        :title="$t('browse.location.aliasesTip')"
+        show-msg
+      >
+        {{ alias }}
+      </copy-to-clipboard-button>
+    </template>
     <copy-to-clipboard-button
-      v-for="alias in aliases"
-      :key="alias"
+      v-else
       tertiary
       size="tiny"
-      :text="`${baseUrl}/bookmark/${textSlug}/${alias}`"
-      :title="$t('browse.location.aliasesTip')"
+      :text="`${baseUrl}/bookmark/${locationId}/${textSlug}`"
+      :title="$t('browse.location.genericPermalinkTip')"
       show-msg
     >
-      {{ alias }}
+      {{ $t('browse.location.shareLocUrl') }}
     </copy-to-clipboard-button>
   </n-flex>
 </template>

Tekst-Web/src/components/browse/LocationAliasesWidget.vue

@@ -106,10 +106,12 @@ const router = createRouter({
       beforeEnter: async (to) => await _resolveBrowseLocation(to.query),
     },
     {
-      path: '/bookmark/:textSlug/:alias',
+      path: '/bookmark/:locId+',
       name: 'bookmark',
       component: () => null,
-      beforeEnter: async (to) => await _resolveBrowseLocation(to.params),
+      // only the first locId param is used here and expected to be a valid ID,
+      // the others are solely for holding pretty things to please the human eye
+      beforeEnter: async (to) => await _resolveBrowseLocation({ locId: to.params.locId[0] }),
     },
     {
       path: '/search',

Tekst-Web/src/router.ts

@@ -24,10 +24,6 @@ const browse = useBrowseStore();
 const state = useStateStore();
 const resources = useResourcesStore();
 
-const showLocAliases = computed(
-  () => state.pf?.state.showLocationAliases && !!browse.locationPathHead?.aliases?.length
-);
-
 const catHiddenResCount = computed<Record<string, number>>(() =>
   Object.fromEntries(
     browse.resourcesCategorized.map((c) => [
@@ -88,8 +84,9 @@ onMounted(() => {
   </icon-heading>
 
   <location-aliases-widget
-    v-if="showLocAliases"
-    :aliases="browse.locationPathHead?.aliases || undefined"
+    v-if="browse.locationPathHead"
+    :location-id="browse.locationPathHead.id"
+    :aliases="browse.locationPathHead.aliases || undefined"
     :text-slug="state.textSlug"
   />
   <location-metadata-content-tags v-if="!!embeddedMetadata.length" :contents="embeddedMetadata" />