vCard Business Card for Solid

A lightweight, elegant web component that renders a beautiful business card from a Solid Pod vCard profile. This component automatically fetches and displays profile information stored in your Solid Pod using the vCard vocabulary.

!License
!npm

Features

- 🎨 Elegant Design - Premium business card styling with animated golden gradients
- 🔒 Solid Pod Integration - Fetches profile data directly from Solid Pods
- 📇 vCard Standard - Uses the standard vCard vocabulary

Installation

``bash
npm install solid-vcard-business-card
`

Quick Start

$3

`javascript
import 'solid-vcard-business-card';
`

Then use the component in your HTML:

`html

`

$3

`html











`

$3

main.js or main.ts:
`javascript
import { createApp } from 'vue';
import App from './App.vue';
import 'solid-vcard-business-card';

const app = createApp(App);

// Configure Vue to recognize the custom element
app.config.compilerOptions.isCustomElement = (tag) => tag === 'solid-business-card';

app.mount('#app');
`

Component:
`vue



`

$3

index.js or main.tsx:
`javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'solid-vcard-business-card'; // Register the web component

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(



);
`

App.jsx:
`jsx

function App() {
return (
src="https://your-pod.solidcommunity.net/profile/card#me"
/>
);
}

export default App;
`

Profile Requirements

Your Solid Pod profile must use the vCard vocabulary with the following fields:

$3

- Full Name (vcard:fn) - Your full name

$3

- Email (vcard:hasEmail) - Your email address
- Birthday (vcard:bday) - Your date of birth
- Photo (vcard:hasPhoto) - URL to your profile picture

$3

`turtle
PREFIX vcard:
PREFIX rdfa:

a vcard:Individual;
vcard:hasEmail ;
vcard:fn "Example User";
vcard:bday "17-03-2001";
vcard:hasPhoto .

`

Note: Ensure your profile has public read permissions so the component can fetch it.

Browser Support

This component uses native Web Components (Custom Elements) and is supported in:
- Chrome/Edge 67+
- Firefox 63+
- Safari 10.1+
- Opera 54+

Error Handling

The component displays user-friendly error messages if:
- The profile URL is invalid or unreachable
- The profile doesn't contain vCard data
- Network issues occur

Privacy & Security

- The component only reads public profile data
- No authentication is required
- No data is stored or transmitted to third parties
- All communication is direct between the browser and the Solid Pod

Dependencies

- @inrupt/solid-client - Solid Pod data operations
- @inrupt/vocab-common-rdf` - RDF vocabularies including vCard

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Links

- Solid Project
- vCard Ontology

Changelog

See CHANGELOG.md for version history.

---

Made with ❤️ for the Solid community