Add Web Share API button for opening with native apps

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);
 
@@ -61,6 +70,19 @@ const handleEditorMount = (editor: Ace.Editor) => {
   editorInstance.value = editor;
 };
 
+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 messages = [
   {
     type: 'sponsor',
@@ -145,6 +167,15 @@ const supportMessage = computed(() => ({
           <Download :size="16" />
           Download
         </button>
+        <button
+          v-if="canShare"
+          class="action-button"
+          @click="handleShare"
+          :class="{ shared }"
+        >
+          <Share :size="16" />
+          {{ shared ? 'Shared!' : 'Open with your app' }}
+        </button>
       </div>
       <div class="editor-container">
         <VAceEditor
@@ -298,6 +329,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%;

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

@@ -70,3 +70,40 @@ export function getEditorOptions(): Partial<Ace.EditorOptions> {
     highlightActiveLine: false,
   };
 }
+
+/**
+ * Handle sharing with Web Share API
+ */
+export async function shareResult(content: string, format: string, result: PackResult): Promise<boolean> {
+  try {
+    const extension = format === 'markdown' ? 'md' : format === 'xml' ? 'xml' : 'txt';
+    const repoName = formatRepositoryName(result.metadata.repository);
+    const fileName = `repomix-output-${repoName}.${extension}`;
+
+    const blob = new Blob([content], { type: 'text/plain' });
+    const file = new File([blob], fileName, { type: 'text/plain' });
+
+    const shareData = {
+      title: `Repomix Output - ${repoName}`,
+      text: `Generated repomix output for ${result.metadata.repository}`,
+      files: [file],
+    };
+
+    if (navigator.canShare?.(shareData)) {
+      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 and can share files
+ */
+export function canShareFiles(): boolean {
+  return navigator.canShare && typeof navigator.canShare === 'function';
+}