Comments (4)
Hi @vnphanquang, thanks for the quick reply.
It's not encoding the contents of the file /vcard.vcf
but instead encoding the literal string of /vcard.vcf
.
The examples I've seen are using a URL (e.g., https://example.org/
) and that works fine, or as intended, passing a URL as the string of data to encode.
I would, however, like to encode the contents of the file at /vcard.vcf
, which is just a text file—similar to this:
BEGIN:VCARD
VERSION:3.0
REV:2024-04-08T00:00:00Z
PROFILE:VCARD
SOURCE:http://personaldomain.com/vcard.vcf
CLASS:public
FN:Alex Suprun
ORG:Company Name
LOGO;TYPE=PNG:http://workdomain.com/logo.png
ADR;TYPE=WORK;TYPE=PREF:Company Name;Ste 100;7900 4th St N;St. Petersburg;FL;33702;USA
URL;TYPE=WORK;TYPE=PREF:https://workdomain.com/
TEL;TYPE=WORK;TYPE=VOICE:+1 (727) 555-0000
EMAIL;TYPE=INTERNET;TYPE=WORK;TYPE=PREF:[email protected]
TITLE:Avatar
ROLE:Member
N:Suprun;Alex;;;
NICKNAME:Spuns
PHOTO;TYPE=PNG;VALUE=URI:http://personaldomain.com/photo.jpg
ADR;TYPE=HOME:;;1234 Main St N;St. Petersburg;FL;33701;USA
TEL;TYPE=CELL;TYPE=VOICE;TYPE=PREF:+1 (727) 222-4444
TEL;TYPE=OTHER;TYPE=VOICE:+1 (727) 321-9876
EMAIL;TYPE=INTERNET;TYPE=HOME:[email protected]
EMAIL;TYPE=INTERNET;TYPE=OTHER:[email protected]
URL;TYPE=HOME:https://personaldomain.com/
URL;TYPE=OTHER:https://otherdomain.com/
TZ:-0500
X-SOCIALPROFILE;TYPE=Facebook:alexsuprun
X-SOCIALPROFILE;TYPE=Twitter:alexsuprun
X-SOCIALPROFILE;TYPE=LinkedIn:alexsuprun
X-SOCIALPROFILE;TYPE=Instagram:alexsuprun
X-SOCIALPROFILE;TYPE=YouTube:alexsuprun
X-SOCIALPROFILE;TYPE=TikTok:alexsuprun
CATEGORIES:avatar,persona,mockup
NOTE:I'm Alex Suprun, a connoisseur of the subtle art of connection. I weave the mundane into the magical with ease, turning pet whispers into the talk of the town. My knack for reading a room's vibe rivals ancient oracles, and my adventures often involve epic quests for legendary late-night snacks.
END:VCARD
I hope that examples my scenario better.
from svelte-put.
Hi @vnphanquang, Thanks again for the quick reply. What you provided was very helpful and informative. Also, thank you for building out the two examples; they helped me understand what was being said.
from svelte-put.
Hello @extensionteamhq. A couple of things:
If I use the relative path /vcard.vcf the result is search "/vcard.vcf".
Data is encoded as is, and I believe that is how it should be with any QR. @svelte-put/qr
cannot assume any external context, i.e it cannot automatically prepend the current origin, if any, to your relative path, if that is what you mean.
If I use a full path, https://example.com/vcard.vcf, the result is a link to https://example.com/.
Can you provide a reproduction for this? Here is a REPL using https://example.com/
as the data for enconding.
from svelte-put.
Hello @extensionteamhq, thanks for the clarification. Just so we are on the same page, you want to encode the content of your vcard.vcf
file in the QR code yes?
As I've mentioned, whatever passed to the data
option is the QR-encoded data; @svelte-put
does not automatically fetch the file for you. In other words, if you want to encode the file content, you need to pass that content as the data
option. There are multiple ways to do this:
- if your file is completely static, just import using Vite '?raw' syntax (assume you are using Svelte with Vite).
- if your file is dynamic or has to live in the
/static
directory, do a fetch and pass the response text as data.
I've put together an example here showing both of the methods above. Please take a look and let me know if that's what you are looking for.
Important
The content of your vcard.vcf
is quite a lot in size. Notice, in the given example, I had to change the error correction level to either S
or M
to be able to fit the data in the generated QR. You can check out the QR capacity and play around more using this demo site.
from svelte-put.
Related Issues (20)
- Focus & Modal HOT 5
- @svelte-put/lockscroll: show error when use:lockscroll opn svelte:document HOT 1
- movables do not behave as expected on mobile / with touch input HOT 2
- Change clickoutside node type to Element or Node to allow usage on SVG elements
- toc page mentions anchor config in passing but not explicitly HOT 2
- shortcut: get keyboard event / actual target
- Ignoring Hotkeys not working HOT 2
- Missing exports condition HOT 6
- Modal.svelte contains svelte a11y warning HOT 3
- Generated table of contents does not reflect on header order if it is a number HOT 8
- scrollock not working on ipadOs 17.2 same for ios HOT 2
- Movable - Cannot limit delta for only 1 axis. HOT 1
- Revamp Docs Site HOT 1
- [QR] margin will shift logo HOT 1
- Add qr error correction option HOT 1
- XY was created with unknown prop 'topmost' HOT 1
- Migration to Svelte 5
- License missing HOT 1
- Consider Publishing to JSR
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-put.