solid-vcard-business-card 1.0.1 → 1.0.3

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.
Files changed (3) hide show
  1. package/README.md +11 -11
  2. package/package.json +1 -1
  3. package/src/business-card.js +26 -13
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
  ![License](https://img.shields.io/badge/license-MIT-blue.svg)
6
- ![npm](https://img.shields.io/npm/v/vcard-business-card-solid)
6
+ ![npm](https://img.shields.io/npm/v/solid-vcard-business-card)
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-solid
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-solid';
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
- <vcard-business-card src="https://your-pod.solidcommunity.net/profile/card#me"></vcard-business-card>
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
- <vcard-business-card src="https://your-pod.solidcommunity.net/profile/card#me"></vcard-business-card>
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-solid';
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-solid';
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 === 'vcard-business-card';
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
- <vcard-business-card :src="profileUrl"></vcard-business-card>
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-solid'; // Register the web component
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
- <vcard-business-card
104
+ <solid-business-card
105
105
  src="https://your-pod.solidcommunity.net/profile/card#me"
106
106
  />
107
107
  );
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Native Web component that renders a Solid vCard profile",
4
4
  "author": "Jelle Fauconnier",
5
5
  "type": "module",
6
- "version": "1.0.1",
6
+ "version": "1.0.3",
7
7
  "main": "index.js",
8
8
  "types": "index.d.ts",
9
9
  "exports": {
package/src/business-card.js CHANGED
@@ -9,6 +9,7 @@ import { VCARD } from "@inrupt/vocab-common-rdf";
9
9
  export class SolidBusinessCard extends HTMLElement {
10
10
  constructor() {
11
11
  super();
12
+ this.attachShadow({ mode: 'open' });
12
13
  this._profile = null;
13
14
  }
14
15
 
@@ -51,7 +52,7 @@ export class SolidBusinessCard extends HTMLElement {
51
52
  }
52
53
 
53
54
  animateGradient() {
54
- const nameElement = this.querySelector('.business-card__name');
55
+ const nameElement = this.shadowRoot.querySelector('.business-card__name');
55
56
  if (!nameElement) return;
56
57
 
57
58
  let position = -200;
@@ -123,8 +124,11 @@ export class SolidBusinessCard extends HTMLElement {
123
124
 
124
125
 
125
126
  renderLoading() {
126
- this.innerHTML = `
127
+ this.shadowRoot.innerHTML = `
127
128
  <style>
129
+ :host {
130
+ display: inline-block;
131
+ }
128
132
  .business-card {
129
133
  font-family: 'Georgia', 'Times New Roman', serif;
130
134
  background:
@@ -138,7 +142,8 @@ export class SolidBusinessCard extends HTMLElement {
138
142
  inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.8);
139
143
  padding: 2rem;
140
144
  width: 21.875rem;
141
- height: 12.5rem;
145
+ min-height: 12.5rem;
146
+ box-sizing: border-box;
142
147
  display: flex;
143
148
  align-items: center;
144
149
  justify-content: center;
@@ -163,8 +168,11 @@ export class SolidBusinessCard extends HTMLElement {
163
168
 
164
169
  const {name, email, birthday, photoUrl} = this._profile;
165
170
 
166
- this.innerHTML = `
171
+ this.shadowRoot.innerHTML = `
167
172
  <style>
173
+ :host {
174
+ display: inline-block;
175
+ }
168
176
  .business-card {
169
177
  font-family: 'Georgia', 'Times New Roman', serif;
170
178
  background:
@@ -179,7 +187,8 @@ export class SolidBusinessCard extends HTMLElement {
179
187
  inset 0 0.0625rem 0.125rem rgba(255, 255, 255, 0.8);
180
188
  padding: 2.5rem;
181
189
  width: 21.875rem;
182
- height: 12.5rem;
190
+ min-height: 12.5rem;
191
+ box-sizing: border-box;
183
192
  position: relative;
184
193
  overflow: hidden;
185
194
  transition: all 0.3s ease;
@@ -215,6 +224,7 @@ export class SolidBusinessCard extends HTMLElement {
215
224
  flex-direction: column;
216
225
  height: 100%;
217
226
  justify-content: space-between;
227
+ padding-right: 6rem;
218
228
  }
219
229
 
220
230
  .business-card__header {
@@ -268,8 +278,8 @@ export class SolidBusinessCard extends HTMLElement {
268
278
 
269
279
  .business-card__picture {
270
280
  position: absolute;
271
- top: 1.5rem;
272
- right: 1.5rem;
281
+ top: 2.5rem;
282
+ right: 2.5rem;
273
283
  width: 5rem;
274
284
  height: 5rem;
275
285
  border-radius: 50%;
@@ -317,16 +327,15 @@ export class SolidBusinessCard extends HTMLElement {
317
327
  }
318
328
  </style>
319
329
  <div class="business-card">
330
+ <div class="business-card__picture">
331
+ <img src="${photoUrl}" alt="Profile picture">
332
+ </div>
320
333
  <div class="business-card__content">
321
334
  <div class="business-card__header">
322
335
  <h3 class="business-card__name">${name}</h3>
323
336
  <div class="business-card__divider"></div>
324
337
  </div>
325
338
 
326
- <div class="business-card__picture">
327
- <img src="${photoUrl}" alt="Profile picture">
328
- </div>
329
-
330
339
  <div class="business-card__footer">
331
340
  ${email ? `
332
341
  <div>
@@ -347,8 +356,11 @@ export class SolidBusinessCard extends HTMLElement {
347
356
  }
348
357
 
349
358
  renderError(error) {
350
- this.innerHTML = `
359
+ this.shadowRoot.innerHTML = `
351
360
  <style>
361
+ :host {
362
+ display: inline-block;
363
+ }
352
364
  .business-card {
353
365
  font-family: 'Georgia', 'Times New Roman', serif;
354
366
  background:
@@ -361,7 +373,8 @@ export class SolidBusinessCard extends HTMLElement {
361
373
  0 0.25rem 1rem rgba(0, 0, 0, 0.08);
362
374
  padding: 2rem;
363
375
  width: 21.875rem;
364
- height: 12.5rem;
376
+ min-height: 12.5rem;
377
+ box-sizing: border-box;
365
378
  display: flex;
366
379
  flex-direction: column;
367
380
  align-items: center;