Skip to content

feat: add vCard (.vcf) export support for DevCard profiles#193

Open
anshika1179 wants to merge 1 commit into
Dev-Card:mainfrom
anshika1179:feature/vcard-export-support
Open

feat: add vCard (.vcf) export support for DevCard profiles#193
anshika1179 wants to merge 1 commit into
Dev-Card:mainfrom
anshika1179:feature/vcard-export-support

Conversation

@anshika1179
Copy link
Copy Markdown

Summary

This PR implements Issue #179, adding full vCard (.vcf) export and instant contact-saving support across DevCard's web and mobile applications. It introduces a type-safe vCard 3.0 generation helper in packages/shared to parse and format profile information (full name, pronouns, title, company, bio as a note, email, phone, avatar picture URL, and social profile links). A premium, glassmorphic "Save Contact" button has been integrated into SvelteKit web profiles using dynamic Blob downloads, and a corresponding React Native component utilizing the core Share API with secure base64/text fallbacks has been added to the mobile app for zero-dependency native contact sharing.

Closes #179


Type of Change

  • Bug fix
  • New feature
  • Refactor (no functional change)
  • UI / Design change
  • Tests only
  • Documentation
  • Infrastructure / DevOps
  • Security

What Changed

closes #179

1. Shared Package (packages/shared)

  • vcard.ts: Implemented type-safe generateVCard and utility functions to dynamically build valid vCard 3.0 records (using correct CRLF line endings, special character escaping, pronoun inclusion, and social link mapping).
  • vcard.test.ts: Added 13 comprehensive unit tests validating single/multi-word names, comma/semicolon/backslash escaping, pronoun formatting, and social link integration.
  • index.ts: Exported the shared vCard generator helper.

2. Web App (apps/web)

  • SaveContactButton.svelte: Created a premium glassmorphic Svelte 5 component utilizing $props and $state that creates an on-the-fly .vcf download using Blob and URL.createObjectURL.
  • +page.svelte: Integrated the "Save Contact" button seamlessly into the public profile view under the bio/headline section.
  • index.ts: Exported the new web button component.

3. Mobile App (apps/mobile)

  • vcard.ts: Added a custom, lightweight Base64 encoder and helper functions specifically for processing vCard data securely without third-party libraries.
  • SaveContactButton.tsx: Created a matching premium dark/glassmorphic action button utilizing the React Native core Share API.
  • DevCardViewScreen.tsx: Mounted the new contact saving button directly next to other profile action options.

4. Project Root

  • README.md: Updated codebase documentation with mapping specifications, platform features, and vCard compliance details.

How to Test

  1. Run Unit Tests:
    Ensure all shared tests pass cleanly:
    pnpm test

@Harxhit Harxhit added the gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. label May 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Add vCard (.vcf) Export for Instant Contact Saving (Web & Mobile)

2 participants