Remember microformats? Me neither!
Back when the web was open and we were trying to find ways to interconnect independent things?
Let’s bring them back!
Steps: Simple
Get a domain
Host your own site on it
On the index page, create an h-card
Inside of that h-card an identity markers.
That’s it.
Example
You should replace this stuff with your own. Check out the standard’s documentation
for more details.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <div class="h-card">
<h1 class="p-name">Will Schenk</h1>
<img class="u-photo" src="photo" width="300">
<p>
I work at
<a href="https://happyfuncorp.com" class="p-org">HappyFunCorp</a>
where I am a
<span class="p-job-title">software craftman</span>
</p>
<p>
<ul>
<li><a href="https://willschenk.com" class="u-url u-uid" rel="me">Will Schenk</a></li>
<li><a href="mailto:wschenk@gmail.com" class="u-email" rel="me">wschenk@gmail.com</a></li>
<li><a href="https://twitter.com/@wschenk" rel="me">Twitter</a></li>
<li><a href="https://instagram.com/wschenk" rel="me">Insta</a></li>
<li><a href="https://linkedin.com/in/will-schenk-420266" rel="me">LinkedIn></a></li>
</ul>
</p>
</div>
|
You should obviously replace that information with your own.
Testing
After you deploy, the easiest way to test is to go to https://indiewebify.me/validate-h-card/
So do that.
But lets build a simple tester so we can see how to interact with it.
1
2
3
4
| $ mkdir indieweb
$ cd indieweb
$ npm init
$ yarn add microformat-node node-fetch
|
Then create index.js to pull it down and print it out:
1
2
3
4
5
6
7
8
9
10
| const fetch = require( 'node-fetch' );
const microformat = require('microformat-node');
(async () => {
const page = await fetch( 'https://willschenk.com' )
const text = await page.text()
const info = await microformat.get({html: text})
console.log( JSON.stringify( info ) )
})()
|
And you should see the nicely parsed information! Now what to do with this all!