@commonpub/layer 0.5.7 → 0.6.0

package/pages/[type]/[slug]/index.vue

@@ -1,303 +1,34 @@
 <script setup lang="ts">
-import type { BlockTuple } from '@commonpub/editor';
-import type { Serialized, ContentDetail, ContentListItem, PaginatedResponse } from '@commonpub/server';
+/**
+ * Legacy content route — redirects to /u/{username}/{type}/{slug}.
+ * Kept for backwards compatibility with existing links and bookmarks.
+ */
+import type { Serialized, ContentDetail } from '@commonpub/server';
 
 const route = useRoute();
 const contentType = computed(() => route.params.type as string);
 const slug = computed(() => route.params.slug as string);
 
-// Pass cookies so SSR can resolve auth (needed to view own drafts)
 const reqHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
-const { data: content, pending: contentPending } = useLazyFetch<Serialized<ContentDetail>>(() => `/api/content/${slug.value}`, { headers: reqHeaders });
+const { data: content } = await useFetch<Serialized<ContentDetail>>(() => `/api/content/${slug.value}`, { headers: reqHeaders });
 
-// Explainer view uses its own topbar + full-height layout — disable the default layout
-// to avoid double-topbar and layout conflicts. Must also reset when navigating away
-// from an explainer (same page component is reused for all content types).
-watch(() => content.value?.type, (type) => {
-  if (type === 'explainer') {
-    setPageLayout('default');
-  } else if (type) {
-    setPageLayout('default');
-  }
-}, { immediate: true });
-
-useSeoMeta({
-  title: () => content.value?.title ? `${content.value.title} — ${useSiteName()}` : useSiteName(),
-  description: () => content.value?.seoDescription || content.value?.description || '',
-  ogImage: () => content.value?.coverImageUrl || '/og-default.png',
-  ogTitle: () => content.value?.title || useSiteName(),
-  ogDescription: () => content.value?.seoDescription || content.value?.description || '',
-});
-
-const { user } = useAuth();
-const isOwner = computed(() => user.value?.id === content.value?.author?.id);
-
-// Estimate reading time (~200 words per minute)
-const readTime = computed(() => {
-  if (!content.value?.content) return undefined;
-  const blocks = content.value.content as BlockTuple[];
-  let words = 0;
-  for (const [type, data] of blocks) {
-    // Extract text from any string field in the block data
-    for (const val of Object.values(data)) {
-      if (typeof val === 'string' && val.trim()) {
-        // Strip HTML tags before counting
-        const text = val.replace(/<[^>]*>/g, '').trim();
-        if (text) words += text.split(/\s+/).length;
-      }
-    }
-  }
-  const minutes = Math.max(1, Math.round(words / 200));
-  return `${minutes} min read`;
-});
-
-// Enrich content with computed readTime
-const enrichedContent = computed(() => {
-  if (!content.value) return null;
-  return { ...content.value, readTime: readTime.value };
-});
-
-// Content type used for conditional view component rendering in template
-
-// Related content
-const { data: related } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
-  query: { status: 'published', type: contentType.value, limit: 3, sort: 'recent' },
-});
-
-// Track view
-onMounted(() => {
-  if (content.value?.id) {
-    $fetch(`/api/content/${content.value.id}/view`, { method: 'POST' }).catch(() => {});
-  }
-});
+// Redirect to new user-scoped URL if we can resolve the author
+if (content.value?.author?.username) {
+  await navigateTo(`/u/${content.value.author.username}/${content.value.type}/${content.value.slug}`, { redirectCode: 301, replace: true });
+}
 </script>
 
 <template>
-  <div v-if="contentPending" class="cpub-loading" aria-live="polite">Loading content...</div>
-  <div v-else-if="enrichedContent">
-    <!-- Edit button overlay -->
-    <div v-if="isOwner && enrichedContent.type !== 'explainer'" class="cpub-view-edit-bar">
-      <NuxtLink :to="`/${enrichedContent.type}/${enrichedContent.slug}/edit`" class="cpub-edit-btn" aria-label="Edit">
-        <i class="fa-solid fa-pen"></i> Edit
-      </NuxtLink>
-    </div>
-
-    <!-- Specialized view by content type -->
-    <ViewsProjectView v-if="contentType === 'project'" :content="(enrichedContent as any)" />
-    <ViewsArticleView v-else-if="contentType === 'article'" :content="(enrichedContent as any)" />
-    <ViewsBlogView v-else-if="contentType === 'blog'" :content="(enrichedContent as any)" />
-    <ViewsExplainerView v-else-if="contentType === 'explainer'" :content="(enrichedContent as any)" />
-
-    <!-- Fallback: generic view for unknown types -->
-    <article v-else class="cpub-view">
-      <div class="cpub-cover" v-if="enrichedContent.coverImageUrl">
-        <img :src="enrichedContent.coverImageUrl" :alt="enrichedContent.title" />
-      </div>
-      <div class="cpub-cover cpub-cover-placeholder" v-else>
-        <span class="cpub-cover-label">{{ contentType }}</span>
-      </div>
-
-      <div class="cpub-view-container">
-        <header class="cpub-view-header">
-          <ContentTypeBadge :type="enrichedContent.type" />
-          <h1 class="cpub-view-title">{{ enrichedContent.title }}</h1>
-          <p class="cpub-view-subtitle" v-if="enrichedContent.subtitle || enrichedContent.description">
-            {{ enrichedContent.subtitle || enrichedContent.description }}
-          </p>
-          <AuthorRow
-            :author="enrichedContent.author"
-            :date="enrichedContent.publishedAt || enrichedContent.createdAt"
-            :read-time="readTime"
-          />
-          <EngagementBar
-            :target-type="enrichedContent.type"
-            :target-id="enrichedContent.id"
-            :like-count="enrichedContent.likeCount ?? 0"
-            :comment-count="enrichedContent.commentCount ?? 0"
-          />
-        </header>
-
-        <div class="cpub-view-body">
-          <template v-if="enrichedContent.content && Array.isArray(enrichedContent.content) && (enrichedContent.content as unknown[]).length > 0">
-            <BlocksBlockContentRenderer :blocks="(enrichedContent.content as [string, Record<string, unknown>][])" />
-          </template>
-          <p v-else class="cpub-view-empty">No content body yet.</p>
-        </div>
-
-        <div class="cpub-view-tags" v-if="enrichedContent.tags?.length">
-          <span class="cpub-view-tag" v-for="tag in enrichedContent.tags" :key="tag.id || tag.name">{{ tag.name || tag }}</span>
-        </div>
-
-        <AuthorCard :author="enrichedContent.author" />
-        <CommentSection :target-type="enrichedContent.type" :target-id="enrichedContent.id" />
-      </div>
-    </article>
-
-    <!-- Related content (shown for all types) -->
-    <section class="cpub-view-related" v-if="related?.items?.length">
-      <div class="cpub-view-related-inner">
-        <h2 class="cpub-view-related-title">Related {{ contentType }}s</h2>
-        <div class="cpub-view-related-grid">
-          <ContentCard
-            v-for="item in related.items.filter((i: Record<string, unknown>) => i.id !== enrichedContent?.id).slice(0, 3)"
-            :key="item.id"
-            :item="item"
-          />
-        </div>
-      </div>
-    </section>
-  </div>
-  <div v-else class="cpub-not-found">
+  <div v-if="!content" class="cpub-not-found">
     <h1>Content not found</h1>
     <p>The requested content could not be found.</p>
   </div>
 </template>
 
 <style scoped>
-.cpub-view-edit-bar {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--space-2) var(--space-6);
-  border-bottom: var(--border-width-default) solid var(--border2);
-}
-
-.cpub-edit-btn {
-  padding: var(--space-1) var(--space-3);
-  border: var(--border-width-default) solid var(--border);
-  font-size: var(--text-xs);
-  color: var(--text);
-  text-decoration: none;
-}
-
-.cpub-edit-btn:hover {
-  background: var(--surface2);
-}
-
-.cpub-view {
-  max-width: 100%;
-}
-
-.cpub-cover {
-  width: 100%;
-  height: 300px;
-  position: relative;
-  overflow: hidden;
-  border-bottom: var(--border-width-default) solid var(--border);
-}
-
-.cpub-cover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.cpub-cover-placeholder {
-  background: var(--surface2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-image:
-    linear-gradient(var(--border2) 1px, transparent 1px),
-    linear-gradient(90deg, var(--border2) 1px, transparent 1px);
-  background-size: 40px 40px;
-}
-
-.cpub-cover-label {
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-widest);
-  color: var(--text-faint);
-  background: var(--surface);
-  padding: var(--space-2) var(--space-4);
-  border: var(--border-width-default) solid var(--border);
-}
-
-.cpub-view-container {
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  padding: var(--space-8) var(--space-6);
-}
-
-.cpub-view-header {
-  margin-bottom: var(--space-6);
-}
-
-.cpub-view-title {
-  font-size: var(--text-2xl);
-  font-weight: var(--font-weight-bold);
-  margin-top: var(--space-3);
-  margin-bottom: var(--space-2);
-  line-height: var(--leading-tight);
-}
-
-.cpub-view-subtitle {
-  font-size: var(--text-md);
-  color: var(--text-dim);
-  margin-bottom: var(--space-4);
-  line-height: var(--leading-relaxed);
-}
-
-.cpub-view-body {
-  margin-bottom: var(--space-8);
-}
-
-.cpub-view-empty {
-  color: var(--text-faint);
-  font-style: italic;
-  padding: var(--space-10) 0;
-  text-align: center;
-}
-
-.cpub-view-tags {
-  display: flex;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-  margin-bottom: var(--space-8);
-}
-
-.cpub-view-tag {
-  padding: var(--space-1) var(--space-3);
-  background: var(--surface2);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: var(--font-weight-medium);
-  color: var(--text-dim);
-  text-transform: lowercase;
-}
-
-.cpub-view-related {
-  border-top: var(--border-width-default) solid var(--border2);
-}
-
-.cpub-view-related-inner {
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  padding: var(--space-8) var(--space-6);
-}
-
-.cpub-view-related-title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--space-5);
-  text-transform: capitalize;
-}
-
-.cpub-view-related-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-4);
-}
-
 .cpub-not-found {
   text-align: center;
   padding: var(--space-16) 0;
   color: var(--text-dim);
 }
-
-@media (max-width: 768px) {
-  .cpub-view-related-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>

package/pages/[type]/index.vue

@@ -4,6 +4,7 @@ import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/
 const route = useRoute();
 const contentType = computed(() => route.params.type as string);
 const siteName = useSiteName();
+const { user } = useAuth();
 
 useSeoMeta({
   title: () => `${contentType.value} — ${siteName}`,
@@ -31,7 +32,7 @@ const { data } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>(
         <select v-model="sortBy" class="cpub-listing-sort" aria-label="Sort by">
           <option v-for="opt in sortOptions" :key="opt" :value="opt">{{ opt }}</option>
         </select>
-        <NuxtLink :to="`/${contentType}/new/edit`" class="cpub-listing-create">
+        <NuxtLink :to="user?.username ? `/u/${user.username}/${contentType}/new/edit` : `/auth/login?redirect=/${contentType}/new/edit`" class="cpub-listing-create">
           + New {{ contentType }}
         </NuxtLink>
       </div>

package/pages/admin/content.vue

@@ -52,7 +52,7 @@ async function toggleFeatured(id: string, current: boolean): Promise<void> {
         <tbody>
           <tr v-for="item in data.items" :key="item.id">
             <td>
-              <NuxtLink :to="`/${item.type}/${item.slug}`" class="cpub-admin-link">{{ item.title }}</NuxtLink>
+              <NuxtLink :to="`/u/${item.author?.username}/${item.type}/${item.slug}`" class="cpub-admin-link">{{ item.title }}</NuxtLink>
             </td>
             <td><ContentTypeBadge :type="item.type" /></td>
             <td class="cpub-admin-author">{{ item.author?.displayName || item.author?.username || 'Unknown' }}</td>

package/pages/contests/[slug]/index.vue

@@ -289,7 +289,7 @@ async function submitEntry(): Promise<void> {
                   <span v-if="entry.rank" class="cpub-entry-rank" :class="`cpub-rank-${entry.rank}`">#{{ entry.rank }}</span>
                 </div>
                 <div class="cpub-entry-body">
-                  <NuxtLink :to="`/${entry.contentType}/${entry.contentSlug}`" class="cpub-entry-title">{{ entry.contentTitle || `Entry #${i + 1}` }}</NuxtLink>
+                  <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-entry-title">{{ entry.contentTitle || `Entry #${i + 1}` }}</NuxtLink>
                   <div class="cpub-entry-author">
                     <div class="cpub-entry-av">
                       <img v-if="entry.authorAvatarUrl" :src="entry.authorAvatarUrl" :alt="entry.authorName || entry.authorUsername" class="cpub-entry-av-img" />

package/pages/contests/[slug]/judge.vue

@@ -20,6 +20,7 @@ const entryList = computed(() => {
     contentType: entry.contentType,
     contentTitle: entry.contentTitle,
     authorName: entry.authorName,
+    authorUsername: entry.authorUsername,
     score: entry.score ?? null,
     rank: entry.rank ?? null,
   }));
@@ -82,7 +83,7 @@ async function submitScore(entryId: string): Promise<void> {
         <div class="cpub-judge-entry-info">
           <div class="cpub-judge-entry-title">{{ entry.contentTitle }}</div>
           <div class="cpub-judge-entry-author">by {{ entry.authorName }}</div>
-          <NuxtLink :to="`/${entry.contentType}/${entry.contentSlug}`" class="cpub-judge-entry-link" target="_blank">
+          <NuxtLink :to="`/u/${entry.authorUsername}/${entry.contentType}/${entry.contentSlug}`" class="cpub-judge-entry-link" target="_blank">
             <i class="fa-solid fa-arrow-up-right-from-square"></i> View entry
           </NuxtLink>
         </div>

package/pages/create.vue

@@ -5,6 +5,7 @@ useSeoMeta({ title: `Create — ${useSiteName()}` });
 definePageMeta({ middleware: 'auth' });
 
 const { isTypeEnabled } = useContentTypes();
+const { user } = useAuth();
 const route = useRoute();
 const hubParam = computed(() => (route.query.hub as string) || '');
 
@@ -63,7 +64,7 @@ const types = computed(() => allTypes.filter(t => isTypeEnabled(t.type as Conten
       <NuxtLink
         v-for="t in types"
         :key="t.type"
-        :to="`/${t.type}/new/edit${hubParam ? `?hub=${hubParam}` : ''}`"
+        :to="`/u/${user?.username}/${t.type}/new/edit${hubParam ? `?hub=${hubParam}` : ''}`"
         class="cpub-create-card"
       >
         <div class="cpub-create-card-icon" :style="{ color: t.color, background: t.bg, borderColor: t.border }">

package/pages/dashboard.vue

@@ -202,7 +202,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
         <h2 class="cpub-dash-section-title">Drafts</h2>
         <div class="cpub-dash-list">
           <div v-for="item in drafts" :key="item.id" class="cpub-dash-row">
-            <NuxtLink :to="`/${item.type}/${item.slug}/edit`" class="cpub-dash-row-title">
+            <NuxtLink :to="`/u/${user?.username}/${item.type}/${item.slug}/edit`" class="cpub-dash-row-title">
               {{ item.title }}
             </NuxtLink>
             <span class="cpub-dash-row-meta">
@@ -210,7 +210,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
               <time>{{ new Date(item.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}</time>
             </span>
             <div class="cpub-dash-row-actions">
-              <NuxtLink :to="`/${item.type}/${item.slug}/edit`" class="cpub-dash-action-btn" aria-label="Edit" title="Edit">
+              <NuxtLink :to="`/u/${user?.username}/${item.type}/${item.slug}/edit`" class="cpub-dash-action-btn" aria-label="Edit" title="Edit">
                 <i class="fa-solid fa-pen"></i> Edit
               </NuxtLink>
               <button class="cpub-dash-action-btn cpub-dash-action-btn--danger" aria-label="Delete" title="Delete" :disabled="actionLoading === item.id" @click="deleteItem(item.id, item.title)">
@@ -226,7 +226,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
         <h2 class="cpub-dash-section-title">Published</h2>
         <div class="cpub-dash-list">
           <div v-for="item in published" :key="item.id" class="cpub-dash-row">
-            <NuxtLink :to="`/${item.type}/${item.slug}`" class="cpub-dash-row-title">
+            <NuxtLink :to="`/u/${user?.username}/${item.type}/${item.slug}`" class="cpub-dash-row-title">
               {{ item.title }}
             </NuxtLink>
             <span class="cpub-dash-row-meta">
@@ -235,7 +235,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
               <span><i class="fa-regular fa-heart"></i> {{ item.likeCount ?? 0 }}</span>
             </span>
             <div class="cpub-dash-row-actions">
-              <NuxtLink :to="`/${item.type}/${item.slug}/edit`" class="cpub-dash-action-btn" aria-label="Edit" title="Edit">
+              <NuxtLink :to="`/u/${user?.username}/${item.type}/${item.slug}/edit`" class="cpub-dash-action-btn" aria-label="Edit" title="Edit">
                 <i class="fa-solid fa-pen"></i> Edit
               </NuxtLink>
               <button class="cpub-dash-action-btn cpub-dash-action-btn--warn" aria-label="Unpublish" title="Unpublish" :disabled="actionLoading === item.id" @click="unpublishItem(item.id)">
@@ -256,7 +256,7 @@ async function deleteItem(id: string, title: string): Promise<void> {
       <div class="cpub-dash-list">
         <div v-for="bm in bookmarkData?.items ?? []" :key="bm.id" class="cpub-dash-row">
           <template v-if="bm.content">
-            <NuxtLink :to="bm.isFederated ? `/mirror/${bm.targetId}` : `/${bm.content.type}/${bm.content.slug}`" class="cpub-dash-row-title">
+            <NuxtLink :to="bm.isFederated ? `/mirror/${bm.targetId}` : `/u/${bm.content.author?.username}/${bm.content.type}/${bm.content.slug}`" class="cpub-dash-row-title">
               {{ bm.content.title }}
             </NuxtLink>
             <span class="cpub-dash-row-meta">

package/pages/federated-hubs/[id]/index.vue

@@ -207,7 +207,7 @@ const mirrorStatus = computed(() => hub.value?.followStatus ?? 'pending');
 
 const remoteFollowRef = ref<{ show: () => void } | null>(null);
 const hubFollowing = ref(false);
-const hubFollowStatus = ref('');
+const hubFollowStatus = computed(() => hub.value?.followStatus ?? '');
 
 /** Follow the hub — if logged in, call API directly; otherwise show the remote follow modal */
 async function handleJoinHub(): Promise<void> {
@@ -219,8 +219,7 @@ async function handleJoinHub(): Promise<void> {
         method: 'POST',
         body: { federatedHubId: hub.value.id },
       });
-      hubFollowStatus.value = result.status;
-      toast.success(result.status === 'accepted' ? 'Now following this hub' : 'Follow request sent');
+      toast.success(result.status === 'accepted' ? 'Now following this hub' : 'Follow request sent — it may take a moment to be accepted');
       await refreshHub();
     } catch (err: unknown) {
       const msg = err instanceof Error ? err.message : 'Failed to follow hub';
@@ -299,9 +298,12 @@ async function handlePostVote(postId: string): Promise<void> {
           <span v-if="mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-mirrored">
             <i class="fa-solid fa-globe"></i> Mirrored
           </span>
-          <button v-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing" @click="handleJoinHub">
-            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : 'Join from your instance' }}
+          <button v-if="hub?.actorUri && mirrorStatus !== 'accepted'" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing || hubFollowStatus === 'pending'" @click="handleJoinHub">
+            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : hubFollowStatus === 'pending' ? 'Follow pending...' : 'Join from your instance' }}
           </button>
+          <span v-else-if="hub?.actorUri && mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-joined">
+            <i class="fa-solid fa-check"></i> Joined
+          </span>
           <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
             <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit original
           </a>

package/pages/hubs/[slug]/index.vue

@@ -72,6 +72,7 @@ const postsVM = computed<HubPostViewModel[]>(() => {
         title: (p.sharedContent as Record<string, unknown>).title as string,
         description: ((p.sharedContent as Record<string, unknown>).description as string | null) ?? null,
         coverImageUrl: ((p.sharedContent as Record<string, unknown>).coverImageUrl as string | null) ?? null,
+        authorUsername: ((p.sharedContent as Record<string, unknown>).authorUsername as string | undefined) ?? undefined,
       },
     } : {}),
   }));

package/pages/index.vue

@@ -227,7 +227,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
           </div>
           <div class="cpub-featured-body">
             <h2 class="cpub-featured-title">
-              <NuxtLink :to="`/${featured.items[0].type}/${featured.items[0].slug}`">
+              <NuxtLink :to="`/u/${featured.items[0].author?.username}/${featured.items[0].type}/${featured.items[0].slug}`">
                 {{ featured.items[0].title }}
               </NuxtLink>
             </h2>

package/pages/learn/[slug]/[lessonSlug]/edit.vue

@@ -222,7 +222,7 @@ const videoEmbedUrl = computed(() => {
           <span class="linked-content-title">{{ lesson.title }}</span>
         </div>
         <div class="linked-content-actions">
-          <NuxtLink :to="`/${lesson.type}/${lessonData?.linkedContent?.slug || ''}/edit`" class="cpub-btn cpub-btn-sm">
+          <NuxtLink :to="`/u/${(lessonData?.linkedContent as any)?.author?.username ?? ''}/${lesson.type}/${lessonData?.linkedContent?.slug || ''}/edit`" class="cpub-btn cpub-btn-sm">
             <i class="fa-solid fa-pen"></i> Edit Content
           </NuxtLink>
           <button class="cpub-btn cpub-btn-sm" style="color: var(--red); border-color: var(--red-border);" @click="unlinkContent">

package/pages/learn/[slug]/[lessonSlug]/index.vue

@@ -226,7 +226,7 @@ const isOwner = computed(() => user.value?.id === path.value?.author?.id);
 
         <!-- View original link for linked content -->
         <div v-if="lessonData?.linkedContent" class="lesson-linked-source">
-          <NuxtLink :to="`/${lessonData.linkedContent.type}/${lessonData.linkedContent.slug}`" class="lesson-linked-source-link">
+          <NuxtLink :to="`/u/${(lessonData.linkedContent as any).author?.username ?? ''}/${lessonData.linkedContent.type}/${lessonData.linkedContent.slug}`" class="lesson-linked-source-link">
             <i class="fa-solid fa-arrow-up-right-from-square"></i> View original {{ lessonData.linkedContent.type }}
           </NuxtLink>
         </div>