tell the homies about npmx

Author: fatfingers23

app/pages/profile/[handle]/index.vue

@@ -53,6 +53,7 @@ async function updateProfile() {
     displayName: displayNameInput.value,
     description: descriptionInput.value || undefined,
     website: websiteInput.value || undefined,
+    recordExists: true,
   }
 
   try {
@@ -77,6 +78,20 @@ async function updateProfile() {
 
 const { data: likes, status } = useProfileLikes(handle)
 
+const showInviteSection = computed(() => {
+  return (
+    profile.value.recordExists === false &&
+    status.value === 'success' &&
+    !likes.value?.records?.length &&
+    user.value?.handle !== handle.value
+  )
+})
+
+const inviteUrl = computed(() => {
+  const text = $t('profile.invite.compose_text', { handle: handle.value })
+  return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`
+})
+
 useSeoMeta({
   title: () => $t('profile.seo_title', { handle: handle.value }),
   description: () => $t('profile.seo_description', { handle: handle.value }),
@@ -182,6 +197,19 @@ defineOgImageComponent('Default', {
       <div v-else-if="likes?.records" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <PackageLikeCard v-for="like in likes.records" :packageUrl="like.value.subjectRef" />
       </div>
+
+      <!-- Invite section: shown when user does not have npmx profile or any like lexicons -->
+      <div
+        v-if="showInviteSection"
+        class="flex flex-col items-start gap-4 p-6 bg-bg-subtle border border-border rounded-lg"
+      >
+        <p class="text-fg-muted">
+          {{ $t('profile.invite.message') }}
+        </p>
+        <LinkBase variant="button-secondary" classicon="i-simple-icons:bluesky" :to="inviteUrl">
+          {{ $t('profile.invite.share_button') }}
+        </LinkBase>
+      </div>
     </section>
   </main>
 </template>

i18n/locales/en.json

@@ -160,7 +160,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a fast, modern browser for the npm registry.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",

i18n/schema.json

@@ -486,6 +486,21 @@
         },
         "not_found_message": {
           "type": "string"
+        },
+        "invite": {
+          "type": "object",
+          "properties": {
+            "message": {
+              "type": "string"
+            },
+            "share_button": {
+              "type": "string"
+            },
+            "compose_text": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false

lunaria/files/en-GB.json

@@ -159,7 +159,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a fast, modern browser for the npm registry.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",

lunaria/files/en-US.json

@@ -159,7 +159,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a fast, modern browser for the npm registry.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",