mirror of
https://github.com/Brandon-Rozek/website.git
synced 2025-10-09 22:41:13 +00:00
Removing raw HTML
This commit is contained in:
parent
e06d45e053
commit
572d587b8e
33 changed files with 373 additions and 386 deletions
|
|
@ -23,11 +23,11 @@ Microformats is semantic HTML used to convey metadata. Using an userscript, I ca
|
|||
|
||||
[H-card](http://microformats.org/wiki/h-card) is a type of microformat that serves as a contact card for people and organizations.
|
||||
|
||||
[vCard](https://en.wikipedia.org/wiki/VCard) is the standard for electronic business cards. They’re most likely used in your phone to store contacts.
|
||||
[vCard](https://en.wikipedia.org/wiki/VCard) is the standard for electronic business cards. They're most likely used in your phone to store contacts.
|
||||
|
||||
Userscript is essentially JavaScript that runs in the [Greasemonkey](http://www.greasespot.net/) extension.
|
||||
|
||||
### What I’ll need
|
||||
### What I'll need
|
||||
|
||||
* Microformat parser
|
||||
* Way to find the representative h-card
|
||||
|
|
@ -40,7 +40,7 @@ To keep everything in small [reusable components](https://en.wikipedia.org/wiki/
|
|||
|
||||
Next, I need to find the representative h-card of the page. Following the [instructions](http://microformats.org/wiki/representative-h-card-parsing) on the microformats wiki, I wrote the following code.
|
||||
|
||||
<pre><code class="language-javascript">
|
||||
```javascript
|
||||
/*
|
||||
representative-h-card - v0.1.0
|
||||
Copyright (c) 2015 Brandon Rozek
|
||||
|
|
@ -60,7 +60,7 @@ var representativeHCard = function(hCards, url) {
|
|||
hCard.items = [hCards.items[0]];
|
||||
return hCard
|
||||
} else {
|
||||
for (var i = 0; i < hCards.items.length; i++) {
|
||||
for (var i = 0; i < hCards.items.length; i++) {
|
||||
if (urlsMatchURL(hCards.items[i], url) && (uidsMatchURL(hCards.items[i], url) || relMeMatchURL(hCards, url))) {
|
||||
hCard = hCards;
|
||||
hCard.items = [hCards.items[i]];
|
||||
|
|
@ -75,7 +75,7 @@ var representativeHCard = function(hCards, url) {
|
|||
var urlsMatchURL = function(hCard, url) {
|
||||
var urls = hCard.properties.url;
|
||||
if (typeof(urls) == "object") {
|
||||
for (var i = 0; i < urls.length; i++) {
|
||||
for (var i = 0; i < urls.length; i++) {
|
||||
if (new URL(urls[i]).toString() == new URL(url).toString()) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@ var urlsMatchURL = function(hCard, url) {
|
|||
var uidsMatchURL = function(hCard, url) {
|
||||
var uids = hCard.properties.uid;
|
||||
if (typeof(uids) == "object") {
|
||||
for (var i = 0; i < uids.length; i++) {
|
||||
for (var i = 0; i < uids.length; i++) {
|
||||
if (new URL(uids[i]).toString() == new URL(url).toString()) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -97,7 +97,7 @@ var uidsMatchURL = function(hCard, url) {
|
|||
var relMeMatchURL = function(microformats, url) {
|
||||
var me = microformats.rels.me;
|
||||
if (typeof(me) == "object") {
|
||||
for (var i = 0; i < me.length; i++) {
|
||||
for (var i = 0; i < me.length; i++) {
|
||||
if (new URL(me[i]).toString() == new URL(url).toString()) {
|
||||
return true;
|
||||
}
|
||||
|
|
@ -105,9 +105,9 @@ var relMeMatchURL = function(microformats, url) {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
</code></pre>
|
||||
```
|
||||
|
||||
Next up, is making the vCard. For this, I had to look at the [vCard 4.0 specification](https://tools.ietf.org/html/rfc6350) to figure out what the property names and values are. Then I browsed around different <a href="http://indieweb.thatmustbe.us/" rel="nofollow">sites</a> (takes you to a random [Indieweb](https://indiewebcamp.com/) site) to figure out which properties are the most common.
|
||||
Next up, is making the vCard. For this, I had to look at the [vCard 4.0 specification](https://tools.ietf.org/html/rfc6350) to figure out what the property names and values are. Then I browsed around different [sites](http://indieweb.thatmustbe.us/) (takes you to a random [Indieweb](https://indiewebcamp.com/) site) to figure out which properties are the most common.
|
||||
|
||||
The properties I ended up adding to the vCard.
|
||||
|
||||
|
|
@ -123,7 +123,7 @@ The properties I ended up adding to the vCard.
|
|||
|
||||
As I was browsing around, I noticed that a few people would have empty values for certain properties on their h-card. To avoid having this show up on the vCard, I added a filter that takes out empty strings.
|
||||
|
||||
<pre><code class="language-javascript">
|
||||
```javascript
|
||||
/*
|
||||
vCard-from-h-card - v0.1.0
|
||||
Copyright (c) 2015 Brandon Rozek
|
||||
|
|
@ -180,7 +180,7 @@ var makeVCard = function(hCard) {
|
|||
//Add IMPP (Instant Messaging and Presence Protocol)
|
||||
if (typeof(impp) == "object") {
|
||||
impp.removeEmptyStrings();
|
||||
for (var i = 0; i < impp.length; i++) {
|
||||
for (var i = 0; i < impp.length; i++) {
|
||||
vCard += "IMPP;PREF=" + (i + 1) + ": " + impp[i] + "n";
|
||||
}
|
||||
}
|
||||
|
|
@ -189,7 +189,7 @@ var makeVCard = function(hCard) {
|
|||
var email = hCard.items[0].properties.email;
|
||||
if (typeof(email) == "object") {
|
||||
email.removeEmptyStrings();
|
||||
for (var i = 0; i < email.length; i++) {
|
||||
for (var i = 0; i < email.length; i++) {
|
||||
try {
|
||||
vCard += "EMAIL: " + new URL(email[i]).pathname + "n";
|
||||
} catch (e) {
|
||||
|
|
@ -238,10 +238,9 @@ var makeVCard = function(hCard) {
|
|||
Array.prototype.removeEmptyStrings = function() {
|
||||
return this.filter(function(i) { return i !== "" })
|
||||
}
|
||||
```
|
||||
|
||||
</code></pre>
|
||||
|
||||
Now for the final part, making the userscript. Inspired by [Ryan Barret](https://snarfed.org/) and his userscript [Let’s Talk,](https://github.com/snarfed/misc/blob/master/userscripts/lets_talk.user.js) this userscript brings all of the above modules together. First it grabs the microformats from the page using microformat-shiv.
|
||||
Now for the final part, making the userscript. Inspired by [Ryan Barret](https://snarfed.org/) and his userscript [Let's Talk,](https://github.com/snarfed/misc/blob/master/userscripts/lets_talk.user.js) this userscript brings all of the above modules together. First it grabs the microformats from the page using microformat-shiv.
|
||||
|
||||
For some reason, when I tried filtering it by ‘h-card’ it froze my computer. So I wrote my own little filter instead.
|
||||
|
||||
|
|
@ -249,7 +248,7 @@ After I grab the representative h-card from the page using the little module I w
|
|||
|
||||
The link is actually a [data uri](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs) that has all of the information of the vCard encoded in it. Depending on your browser, once you click the link you might have to hit CTRL-S to save.
|
||||
|
||||
<pre><code class="language-javascript">
|
||||
```javascript
|
||||
/*
|
||||
show-vCard - v0.1.0
|
||||
Copyright (c) 2015 Brandon Rozek
|
||||
|
|
@ -257,8 +256,8 @@ The link is actually a [data uri](https://developer.mozilla.org/en-US/docs/Web/H
|
|||
*/
|
||||
var filterMicroformats = function(items, filter) {
|
||||
var newItems = [];
|
||||
for (var i = 0; i < items.items.length; i++) {
|
||||
for (var k = 0; k < items.items[i].type.length; k++) {
|
||||
for (var i = 0; i < items.items.length; i++) {
|
||||
for (var k = 0; k < items.items[i].type.length; k++) {
|
||||
if (filter.indexOf(items.items[i].type[k]) != -1) {
|
||||
newItems.push(items.items[i]);
|
||||
}
|
||||
|
|
@ -306,16 +305,16 @@ var render = function() {
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
render();
|
||||
});
|
||||
</code></pre>
|
||||
```
|
||||
|
||||
Sadly, I have no way of controlling the file name when you save it so you’ll have to manually rename it to something more meaningful than a random string of characters. Also remember to add the extension ‘.vcf’ for it to be recognized by some devices.
|
||||
Sadly, I have no way of controlling the file name when you save it so you'll have to manually rename it to something more meaningful than a random string of characters. Also remember to add the extension ‘.vcf’ for it to be recognized by some devices.
|
||||
|
||||
### Conclusion
|
||||
|
||||
Fire up your favorite userscript handling tool and add the [script](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87) in! Of course, since it’s pure JavaScript, you can also add it to your own site to serve the same purpose.
|
||||
Fire up your favorite userscript handling tool and add the [script](https://gist.github.com/brandonrozek/e0153b2733e947fa9c87) in! Of course, since it's pure JavaScript, you can also add it to your own site to serve the same purpose.
|
||||
|
||||
I ran into a small problem loading a contact onto my Android 5.0.2 phone. Apparently, they don’t support vCard 4.0 yet so I had to go into the file and change the line that says “VERSION 4.0” to “VERSION 3.0” which then allowed me to import the file into my contacts.
|
||||
I ran into a small problem loading a contact onto my Android 5.0.2 phone. Apparently, they don't support vCard 4.0 yet so I had to go into the file and change the line that says “VERSION 4.0” to “VERSION 3.0” which then allowed me to import the file into my contacts.
|
||||
|
||||
As with all the code I write, feel free to comment/criticize. I love hearing feedback so if you spot anything, [contact me](mailto:brozek@brandonrozek.com) 🙂
|
||||
|
||||
Also posted on [IndieNews](http://news.indiewebcamp.com/en){.u-syndication}
|
||||
Also posted on [IndieNews](http://news.indiewebcamp.com/en){.u-syndication}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue