feat: add mobile-only Web Share API for native app integration

website/client/.tool-versions

@@ -1 +1 @@
-nodejs 22.14.0
+nodejs 22.15.1

website/client/components/Home/TryItResultContent.vue

@@ -2,12 +2,19 @@
 import ace, { type Ace } from 'ace-builds';
 import themeTomorrowUrl from 'ace-builds/src-noconflict/theme-tomorrow?url';
 import themeTomorrowNightUrl from 'ace-builds/src-noconflict/theme-tomorrow_night?url';
-import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Star } from 'lucide-vue-next';
+import { BarChart2, Copy, Download, GitFork, HeartHandshake, PackageSearch, Share, Star } from 'lucide-vue-next';
 import { useData } from 'vitepress';
 import { computed, onMounted, ref, watch } from 'vue';
 import { VAceEditor } from 'vue3-ace-editor';
 import type { PackResult } from '../api/client';
-import { copyToClipboard, downloadResult, formatTimestamp, getEditorOptions } from '../utils/resultViewer';
+import {
+  canShareFiles,
+  copyToClipboard,
+  downloadResult,
+  formatTimestamp,
+  getEditorOptions,
+  shareResult,
+} from '../utils/resultViewer';
 
 ace.config.setModuleUrl('ace/theme/tomorrow', themeTomorrowUrl);
 ace.config.setModuleUrl('ace/theme/tomorrow_night', themeTomorrowNightUrl);
@@ -20,6 +27,8 @@ const props = defineProps<{
 }>();
 
 const copied = ref(false);
+const shared = ref(false);
+const canShare = ref(canShareFiles());
 const { isDark } = useData();
 const editorInstance = ref<Ace.Editor | null>(null);
 
@@ -57,6 +66,19 @@ const handleDownload = (event: Event) => {
   downloadResult(props.result.content, props.result.format, props.result);
 };
 
+const handleShare = async (event: Event) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const success = await shareResult(props.result.content, props.result.format, props.result);
+  if (success) {
+    shared.value = true;
+    setTimeout(() => {
+      shared.value = false;
+    }, 2000);
+  }
+};
+
 const handleEditorMount = (editor: Ace.Editor) => {
   editorInstance.value = editor;
 };
@@ -145,6 +167,16 @@ const supportMessage = computed(() => ({
           <Download :size="16" />
           Download
         </button>
+        <div v-if="canShare" class="mobile-only" style="flex-basis: 100%"></div>
+        <button
+          v-if="canShare"
+          class="action-button mobile-only"
+          @click="handleShare"
+          :class="{ shared }"
+        >
+          <Share :size="16" />
+          {{ shared ? 'Shared!' : 'Open with your app' }}
+        </button>
       </div>
       <div class="editor-container">
         <VAceEditor
@@ -268,6 +300,7 @@ dd {
 
 .output-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   padding: 12px;
   background: var(--vp-c-bg);
@@ -298,6 +331,12 @@ dd {
   border-color: var(--vp-c-brand-1);
 }
 
+.action-button.shared {
+  background: var(--vp-c-brand-1);
+  color: white;
+  border-color: var(--vp-c-brand-1);
+}
+
 .editor-container {
   height: 100%;
   width: 100%;
@@ -344,6 +383,11 @@ dd {
   color: var(--vp-c-brand-1);
 }
 
+/* Hide mobile-only elements on desktop */
+.mobile-only {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .content-wrapper {
     grid-template-columns: 1fr;
@@ -367,5 +411,15 @@ dd {
   .support-message {
     max-width: 100%;
   }
+
+  /* Show mobile-only elements on mobile */
+  .mobile-only {
+    display: inline-flex;
+  }
+
+  .metadata-panel {
+    max-height: 400px;
+    overflow-y: auto;
+  }
 }
 </style>

website/client/components/utils/analytics.ts

@@ -32,6 +32,7 @@ export const AnalyticsAction = {
   // Output events
   COPY_OUTPUT: 'copy_output',
   DOWNLOAD_OUTPUT: 'download_output',
+  SHARE_OUTPUT: 'share_output',
 } as const;
 
 export type AnalyticsCategoryType = (typeof AnalyticsCategory)[keyof typeof AnalyticsCategory];
@@ -117,6 +118,14 @@ export const analyticsUtils = {
       label: format,
     });
   },
+
+  trackShareOutput(format: string): void {
+    trackEvent({
+      category: AnalyticsCategory.OUTPUT,
+      action: AnalyticsAction.SHARE_OUTPUT,
+      label: format,
+    });
+  },
 };
 
 // Type definitions for window.gtag

website/client/components/utils/resultViewer.ts

@@ -57,6 +57,38 @@ export function downloadResult(content: string, format: string, result: PackResu
   document.body.removeChild(a);
 }
 
+/**
+ * Handle sharing with Web Share API as text content
+ */
+export async function shareResult(content: string, format: string, result: PackResult): Promise<boolean> {
+  try {
+    const repoName = formatRepositoryName(result.metadata.repository);
+
+    const shareData = {
+      title: `Repomix Output - ${repoName}`,
+      text: content,
+    };
+
+    if (navigator.share) {
+      await navigator.share(shareData);
+      analyticsUtils.trackShareOutput(format);
+      return true;
+    }
+
+    return false;
+  } catch (err) {
+    console.error('Failed to share:', err);
+    return false;
+  }
+}
+
+/**
+ * Check if Web Share API is supported
+ */
+export function canShareFiles(): boolean {
+  return navigator.share && typeof navigator.share === 'function';
+}
+
 /**
  * Get Ace editor options
  */

website/client/package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
-    "docs:preview": "vitepress preview"
+    "docs:preview": "vitepress preview",
+    "lint": "tsc --noEmit"
   },
   "dependencies": {
     "jszip": "^3.10.1",

website/server/package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "dev": "PORT=8080 tsx watch src/index.ts",
     "build": "tsc",
+    "lint": "tsc --noEmit",
     "start": "node dist/index.js",
     "clean": "rimraf dist",
     "cloud-deploy": "gcloud builds submit --config=cloudbuild.yaml ."

website/server/src/index.ts

@@ -29,7 +29,19 @@ app.use('*', cloudLogger());
 app.use(
   '/*',
   cors({
-    origin: ['http://localhost:5173', 'https://repomix.com', 'https://api.repomix.com', 'https://*.repomix.pages.dev'],
+    origin: (origin) => {
+      const allowedOrigins = ['http://localhost:5173', 'https://repomix.com', 'https://api.repomix.com'];
+
+      if (!origin || allowedOrigins.includes(origin)) {
+        return origin;
+      }
+
+      if (origin.endsWith('.repomix.pages.dev')) {
+        return origin;
+      }
+
+      return null;
+    },
     allowMethods: ['GET', 'POST', 'OPTIONS'],
     allowHeaders: ['Content-Type'],
     maxAge: 86400,