fix: add translation keys for docs and socket nav links

- Add 'docs' and 'socket' to package.links translations
- Add invisible icon to docs link for nav alignment

Author: devdumpling

app/pages/[...package].vue

@@ -740,42 +740,45 @@ defineOgImageComponent('Package', {
                 {{ t('package.links.jsr') }}
               </a>
             </li>
-            <li class="sm:flex-grow">
-              <a
-                :href="`https://socket.dev/npm/package/${pkg.name}/overview/${displayVersion?.version ?? 'latest'}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-              >
-                <span class="i-simple-icons-socket w-4 h-4" aria-hidden="true" />
-                {{ t('package.links.socket') }}
-              </a>
-            </li>
             <li v-if="docsLink">
               <a
                 v-if="docsLink.isExternal"
                 :href="docsLink.href"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="link-subtle font-mono text-sm inline-flex items-center pb-2"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
-                docs
+                <span class="i-carbon-document w-4 h-4" aria-hidden="true" />
+                {{ t('package.links.docs') }}
               </a>
               <NuxtLink
                 v-else
                 :to="docsLink.to"
-                class="link-subtle font-mono text-sm inline-flex items-center pb-2"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
               >
-                docs
+                <span class="i-carbon-document w-4 h-4" aria-hidden="true" />
+                {{ t('package.links.docs') }}
               </NuxtLink>
             </li>
+            <li class="sm:flex-grow">
+              <a
+                :href="`https://socket.dev/npm/package/${pkg.name}/overview/${displayVersion?.version ?? 'latest'}`"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
+              >
+                <span class="i-simple-icons-socket w-4 h-4" aria-hidden="true" />
+                {{ t('package.links.socket') }}
+              </a>
+            </li>
+
             <li v-if="displayVersion">
               <NuxtLink
                 :to="{
                   name: 'code',
                   params: { path: [...pkg.name.split('/'), 'v', displayVersion.version] },
                 }"
-                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 pb-2"
+                class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
                 aria-keyshortcuts="."
               >
                 <span class="i-carbon-code w-4 h-4 sm:invisible" aria-hidden="true" />

i18n/locales/en.json

@@ -90,7 +90,9 @@
       "issues": "issues",
       "forks": "fork | forks",
       "jsr": "jsr",
-      "code": "code"
+      "code": "code",
+      "docs": "docs",
+      "socket": "socket"
     },
     "install": {
       "title": "Install",