Add preview feature for social media sharing

[Copilot]

🎨 Add Social Media Preview with Open Graph Metadata

This PR implements Open Graph and Twitter Card metadata for share links, making them more friendly and less intimidating when shared on social media platforms.

📸 Preview

✨ Features

• Dynamic Open Graph meta tags based on share content
• Twitter Card support for better Twitter sharing
• Displays share name, description, and file count
• Uses app logo as preview image
• Supports both regular shares (/s/[alias]) and reverse shares (/r/[alias])
• Graceful fallback when metadata fetch fails
• Server-side rendering for optimal social media crawler support
• Dynamic base URL construction from request headers - No environment variable configuration needed
• Full internationalization support - Metadata available in all 15 supported languages

🔧 Changes

Backend (Server)

• Added GET /shares/alias/:alias/metadata endpoint for lightweight share metadata
• Added GET /reverse-shares/alias/:alias/metadata endpoint for reverse share metadata
• Added service methods to fetch metadata without authentication
• Added repository method to find shares by alias

Frontend (Web)

• Updated /s/[alias]/layout.tsx with dynamic generateMetadata function
• Updated /r/[alias]/layout.tsx with dynamic generateMetadata function
• Added translation keys for metadata descriptions in all 15 supported languages:
  • 🇸🇦 Arabic (ar-SA)
  • 🇩🇪 German (de-DE)
  • 🇺🇸 English (en-US)
  • 🇪🇸 Spanish (es-ES)
  • 🇫🇷 French (fr-FR)
  • 🇮🇳 Hindi (hi-IN)
  • 🇮🇹 Italian (it-IT)
  • 🇯🇵 Japanese (ja-JP)
  • 🇰🇷 Korean (ko-KR)
  • 🇳🇱 Dutch (nl-NL)
  • 🇵🇱 Polish (pl-PL)
  • 🇧🇷 Portuguese (pt-BR)
  • 🇷🇺 Russian (ru-RU)
  • 🇹🇷 Turkish (tr-TR)
  • 🇨🇳 Chinese (zh-CN)
• Base URL dynamically constructed from request headers (x-forwarded-proto, x-forwarded-host, host) similar to email link generation

Generated Meta Tags Example

For a share with 5 files named "Project Files - December 2024":

<meta property="og:title" content="Project Files - December 2024" />
<meta property="og:description" content="5 files shared" />
<meta property="og:url" content="https://palmr.example.com/s/myshare" />
<meta property="og:site_name" content="Palmr" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://palmr.example.com/logo.png" />
<meta name="twitter:card" content="summary_large_image" />

📝 Configuration

Only the API base URL is needed in your .env file:

# API base URL for server-side metadata fetching  
API_BASE_URL=http://localhost:3333

No additional configuration required! The base URL for Open Graph metadata is automatically constructed from incoming request headers, ensuring it works correctly across all environments (localhost, staging, production) without manual configuration.

🧪 Testing

Test your share links on social media platforms using:

• Twitter Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector
• OpenGraph.xyz

🔒 Privacy & Security

• Metadata endpoints are public but only return basic information (name, description, file count)
• Password-protected shares don't expose passwords in metadata
• File contents and detailed information are never exposed
• Expired/inactive shares are properly indicated

📦 Files Changed

Server:

• apps/server/src/modules/share/controller.ts
• apps/server/src/modules/share/service.ts
• apps/server/src/modules/share/repository.ts
• apps/server/src/modules/share/routes.ts
• apps/server/src/modules/reverse-share/controller.ts
• apps/server/src/modules/reverse-share/service.ts
• apps/server/src/modules/reverse-share/routes.ts

Web:

• apps/web/src/app/(shares)/s/[alias]/layout.tsx
• apps/web/src/app/(shares)/r/[alias]/layout.tsx
• apps/web/messages/*.json (all 15 language files)

✅ Validation

• TypeScript type checking passes
• ESLint validation passes
• Code formatted with Prettier
• Server builds successfully
• Web app validates successfully
• Works across all environments without manual URL configuration
• All JSON translation files are valid
• Translations available in all 15 supported languages

---

Resolves the feature request for social media preview when sharing links on platforms like Twitter, Facebook, LinkedIn, WhatsApp, etc.

Fixes #242

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature] Add preview when sharing on social media platforms</issue_title>
<issue_description>It think a preview when sharing a link on social media would make it more friendly and less intimidating to click on. The preview could include the app name, the app description, the app logo or the number of file shared (if not protected).

For exemple: https://www.opengraph.xyz/url/https%3A%2F%2Fgithub.com</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #242

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[danielalves96]

@copilot we cant add an env var called NEXT_PUBLIC_BASE_URL, we have to get from current browser. like some email do.

[Copilot]

@copilot we cant add an env var called NEXT_PUBLIC_BASE_URL, we have to get from current browser. like some email do.

Fixed in commit b7c8e9a. The base URL is now dynamically constructed from request headers (x-forwarded-proto, x-forwarded-host, host) using Next.js headers() function, similar to how the auth provider callbacks work. No environment variable needed.

[danielalves96]

@copilot add translations for all languages

[Copilot]

@copilot add translations for all languages

Added in commit 0c5f1e2. Translations now available in all 15 supported languages (Arabic, German, English, Spanish, French, Hindi, Italian, Japanese, Korean, Dutch, Polish, Portuguese, Russian, Turkish, Chinese).

[danielalves96]

@copilot if the s/[shareAlias] has an image and its public, this image turns the og:image? or just the app logo?

[Copilot]

@copilot if the s/[shareAlias] has an image and its public, this image turns the og:image? or just the app logo?

Currently, it only uses the app logo. The metadata endpoint returns basic info (name, description, file count) but doesn't include file images. To use a share's image as og:image, we'd need to:

1. Add image info to the metadata endpoint
2. Check if share has public images
3. Use first image as og:image, fallback to app logo

Would you like me to implement this enhancement?