solid-vcard-business-card 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -11
- package/package.json +1 -1
- package/src/business-card.js +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
A lightweight, elegant web component that renders a beautiful business card from a [Solid Pod](https://solidproject.org/) vCard profile. This component automatically fetches and displays profile information stored in your Solid Pod using the vCard vocabulary.
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
@@ -15,7 +15,7 @@ A lightweight, elegant web component that renders a beautiful business card from
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install vcard-business-card
|
|
18
|
+
npm install solid-vcard-business-card
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Quick Start
|
|
@@ -23,13 +23,13 @@ npm install vcard-business-card-solid
|
|
|
23
23
|
### In a JavaScript Module
|
|
24
24
|
|
|
25
25
|
```javascript
|
|
26
|
-
import 'vcard-business-card
|
|
26
|
+
import 'solid-vcard-business-card';
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
Then use the component in your HTML:
|
|
30
30
|
|
|
31
31
|
```html
|
|
32
|
-
<
|
|
32
|
+
<solid-business-card src="https://your-pod.solidcommunity.net/profile/card#me"></solid-business-card>
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### In HTML (with bundler)
|
|
@@ -41,10 +41,10 @@ Then use the component in your HTML:
|
|
|
41
41
|
<title>My Business Card</title>
|
|
42
42
|
</head>
|
|
43
43
|
<body>
|
|
44
|
-
<
|
|
44
|
+
<solid-business-card src="https://your-pod.solidcommunity.net/profile/card#me"></solid-business-card>
|
|
45
45
|
|
|
46
46
|
<script type="module">
|
|
47
|
-
import 'vcard-business-card
|
|
47
|
+
import 'solid-vcard-business-card';
|
|
48
48
|
</script>
|
|
49
49
|
</body>
|
|
50
50
|
</html>
|
|
@@ -56,12 +56,12 @@ Then use the component in your HTML:
|
|
|
56
56
|
```javascript
|
|
57
57
|
import { createApp } from 'vue';
|
|
58
58
|
import App from './App.vue';
|
|
59
|
-
import 'vcard-business-card
|
|
59
|
+
import 'solid-vcard-business-card';
|
|
60
60
|
|
|
61
61
|
const app = createApp(App);
|
|
62
62
|
|
|
63
63
|
// Configure Vue to recognize the custom element
|
|
64
|
-
app.config.compilerOptions.isCustomElement = (tag) => tag === '
|
|
64
|
+
app.config.compilerOptions.isCustomElement = (tag) => tag === 'solid-business-card';
|
|
65
65
|
|
|
66
66
|
app.mount('#app');
|
|
67
67
|
```
|
|
@@ -75,7 +75,7 @@ const profileUrl = ref('https://your-pod.solidcommunity.net/profile/card#me');
|
|
|
75
75
|
</script>
|
|
76
76
|
|
|
77
77
|
<template>
|
|
78
|
-
<
|
|
78
|
+
<solid-business-card :src="profileUrl"></solid-business-card>
|
|
79
79
|
</template>
|
|
80
80
|
```
|
|
81
81
|
|
|
@@ -86,7 +86,7 @@ const profileUrl = ref('https://your-pod.solidcommunity.net/profile/card#me');
|
|
|
86
86
|
import React from 'react';
|
|
87
87
|
import ReactDOM from 'react-dom/client';
|
|
88
88
|
import App from './App';
|
|
89
|
-
import 'vcard-business-card
|
|
89
|
+
import 'solid-vcard-business-card'; // Register the web component
|
|
90
90
|
|
|
91
91
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
92
92
|
root.render(
|
|
@@ -101,7 +101,7 @@ root.render(
|
|
|
101
101
|
|
|
102
102
|
function App() {
|
|
103
103
|
return (
|
|
104
|
-
<
|
|
104
|
+
<solid-business-card
|
|
105
105
|
src="https://your-pod.solidcommunity.net/profile/card#me"
|
|
106
106
|
/>
|
|
107
107
|
);
|
package/package.json
CHANGED
package/src/business-card.js
CHANGED