Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update validate-h-card #101

Merged
merged 5 commits into from
Sep 30, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

125 changes: 72 additions & 53 deletions templates/validate-h-card.html.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<?php

use BarnabyWalters\Mf2;

$optional_properties = [
Expand Down Expand Up @@ -38,58 +39,76 @@
'anniversary' => 'Anniversary',
];

# default h-card to show properties for
$hCard = null;
?>

<div class="row demo-row">
<div class="span12">

<h1><span class="fui-new"></span> Publishing on the IndieWeb <small>Level 2</small></h1>
<h1><span class="fui-new"></span> Publishing on the IndieWeb <small>Level 2</small></h1>

<h2>1. Mark up your content (Profile, Notes, Articles, etc…) with <a href="http://microformats.org/" target="_blank">microformats2</a></h2>
<h2>1. Mark up your content (Profile, Notes, Articles, etc…) with <a href="https://microformats.org/" target="_blank">microformats2</a></h2>

<p>Other humans can already understand your profile information and the things you post on your site. By adding a few simple class names to your HTML, other people’s software can understand it and use it for things like <a href="https://indieweb.org/reply-context">reply contexts</a>, <a href="https://indieweb.org/comment">cross-site comments</a>, <a href="https://indieweb.org/rsvp">event RSVPs</a>, and more.</p>
<p>Other humans can already understand your profile information and the things you post on your site. By adding a few simple class names to your HTML, other people’s software can understand it and use it for things like <a href="https://indieweb.org/reply-context">reply contexts</a>, <a href="https://indieweb.org/comment">cross-site comments</a>, <a href="https://indieweb.org/rsvp">event RSVPs</a>, and more.</p>

<h3>Check your <b>homepage <a href="http://microformats.org/wiki/h-card" target="_blank">h-card</a></b>:</h3>
<h3>Check your <b>homepage <a href="https://microformats.org/wiki/h-card" target="_blank">h-card</a></b>:</h3>

<form class="row" action="/validate-h-card/" method="get">
<div class="span4">
<input type="text" id="validate-h-card-url" name="url" value="<?= $url ?>" placeholder="http://yoursite.com" class="span4" />
</div>
<div class="span3">
<button type="submit" id="validate-h-card" class="btn btn-large btn-block btn-primary">Validate h-card</button>
<label for="validate-h-card-url">Enter your URL:</label>
<form class="row" action="/validate-h-card/" method="get">
<div class="span4">
<input type="text" id="validate-h-card-url" name="url" value="<?= $url ?? '' ?>" placeholder="https://example.com/" class="span4" required />
</div>
<div class="span3">
<button type="submit" id="validate-h-card" class="btn btn-large btn-block btn-primary">Validate h-card</button>
</div>
</form>

<?php if (isset($error)): ?>
<div class="result alert alert-warning">
<h3> Something Went Wrong! </h3>
<p> When fetching <code><?= $url ?></code>, we got this problem: </p>
<p> <?= $error['message'] ?> </p>
</div>
</form>

<?php if ($error or $showResult): ?>
<div class="result alert <?php if ($error): ?>alert-warning<?php else: ?>alert-success<?php endif ?>">
<?php if ($error): ?>
<h3>Something Went Wrong!</h3>
<p>When fetching <code><?= $url ?></code>, we got this problem:</p>
<p><?= $error['message'] ?></p>
<?php endif; ?>

<?php if ($showResult): ?>
<div class="result alert alert-success">

<?php if ($representativeHCard): $hCard = $representativeHCard; ?>

<h3> Success! </h3>
<p> This representative h-card was found on your site: </p>

<?php elseif (count($allHCards) > 0):
$hCard = $allHCards[0];
$intro_phrase = 'An h-card was found on your site! Consider ';
if (count($allHCards) > 1) {
$intro_phrase = 'Multiple h-cards were found on your site! Consider only having one and ';
}
?>

<h3> Almost there! </h3>
<p> <?=$intro_phrase?> marking it up as the <a href="https://microformats.org/wiki/representative-h-card-authoring">representative h-card</a>. </p>
<p> To identify the h-card that <em>represents</em> the page, you can: </p>
<ul>
<li> Add <code>class=&quot;u-url u-uid&quot;</code> on the h-card’s link to <?=htmlspecialchars($url);?> </li>
<li> <b>Or:</b> add <code>class=&quot;u-url&quot; rel=&quot;me&quot;</code> on the h-card’s link to <?=htmlspecialchars($url);?> </li>
</ul>
<p> Here is the first h-card found: </p>

<?php else: ?>
<?php if (count($representativeHCards) == 1): $hCard = $representativeHCards[0]; ?>
<h3>Success!</h3>
<p>This representative <code>h-card</code> was found on your site:</p>
<?php elseif (count($representativeHCards) > 1): $hCard = $representativeHCards[0] ?>
<h3>Almost there!</h3>
<p>Multiple representative h-cards were found on your site! Consider only having one. Here’s the first one:</p>
<?php elseif (count($representativeHCards) == 0 and $firstHCard !== null): $hCard = $firstHCard; ?>
<h3>Almost there!</h3>
<p>An h-card was found on your site, but it’s not marked up as the <a href="http://microformats.org/wiki/representative-h-card-parsing">representative h-card</a>!</p>
<p> To identify the h-card that <em>represents</em> the page, you can: </p>
<ul>
<li> Add <code>class=&quot;u-url u-uid&quot;</code> on the h-card's link to <?=htmlspecialchars($url);?> </li>
<li> <b>Or:</b> add <code>class=&quot;u-url&quot; rel=&quot;me&quot;</code> on the h-card's link to <?=htmlspecialchars($url);?> </li>
</ul>
<?php else: $hCard = null; ?>
<h3>No h-cards found</h3>
<p>No h-cards were found on your site! Adding one can be as simple as this:</p>

<pre><code>&lt;a class=&quot;h-card&quot; rel=&quot;me&quot; href=&quot;<?= $url ?>&quot;>Your Name&lt;/a></code></pre>
<h3> No h-cards found </h3>
<p> No h-cards were found on your site! Adding one can be as simple as this: </p>

<pre><code>&lt;a href=&quot;<?= $url ?>&quot; class=&quot;h-card&quot; rel=&quot;me&quot;>Your Name&lt;/a&gt;</code></pre>

<p>But you can also add other properties for a more detailed profile — see <a href="http://microformats.org/wiki/h-card">h-card on the microformats wiki</a> for a full list.</p>
<?php endif ?>
<p> You can also add other properties for a more detailed profile — see <a href="https://microformats.org/wiki/h-card">h-card on the microformats wiki</a> for a full list. </p>

<?php if ($hCard): ?>
<?php endif; ?>

<?php if ($hCard): ?>
<div class="preview-h-card preview-block">
<?php if (Mf2\hasProp($hCard, 'photo')): ?>
<img class="photo-block" src="<?= Mf2\getProp($hCard, 'photo')?>" alt="" />
Expand All @@ -104,22 +123,22 @@
<p class="p-name"><?= Mf2\getProp($hCard, 'name') ?></p>

<p class="property-block-name">URL</p>
<?php if (Mf2\hasProp($hCard, 'url')): ?>
<?php if (Mf2\hasProp($hCard, 'url')): $urls = Mf2\getPlaintextArray($hCard, 'url'); ?>
<ul>
<?php foreach ($hCard['properties']['url'] as $pUrl): ?>
<?php foreach ($urls as $pUrl): ?>
<li><a href="<?= $pUrl ?>"><?= $pUrl ?></a></li>
<?php endforeach ?>
</ul>
<?php else: ?>
<div class="empty-property-block">
<p>Add your URLs! <code class="pull-right">&lt;a rel=&quot;me&quot; class=&quot;u-url&quot;>…&lt;/a></code></p>
<p>Add your URLs! <code class="pull-right">&lt;a rel=&quot;me&quot; class=&quot;u-url&quot;>…&lt;/a&gt;</code></p>
</div>
<?php endif ?>

<?php if (Mf2\hasProp($hCard, 'email')): ?>
<?php if (Mf2\hasProp($hCard, 'email')): $emails = Mf2\getPlaintextArray($hCard, 'email'); ?>
<p class="property-block-name">Email</p>
<ul>
<?php foreach ($hCard['properties']['email'] as $email): ?>
<?php foreach ($emails as $email): ?>
<li><a href="<?= $email ?>"><?= $email ?></a></li>
<?php endforeach ?>
</ul>
Expand All @@ -130,7 +149,7 @@
<p><?= Mf2\getProp($hCard, 'note') ?></p>
<?php else: ?>
<div class="empty-property-block">
<p>Got a brief bio like a Twitter/Instagram bio? Add it to your own h-card as a note property! <code class="pull-right">&lt;p class=&quot;p-note&quot;>…&lt/p></code></p>
<p>Got a brief bio like a Twitter/Instagram bio? Add it to your own h-card as a note property! <code class="pull-right">&lt;p class=&quot;p-note&quot;>…&lt/p&gt;</code></p>
</div>
<?php endif ?>

Expand All @@ -146,17 +165,16 @@
}
?>

<p> <a href="http://microformats.org/wiki/h-card#Properties">See the full list of h-card properties</a>. </p>

<p> <a href="https://microformats.org/wiki/h-card#Properties">See the full list of h-card properties</a>. </p>
</div>
<?php endif ?>

<?= $render('silo-hint.html', array('url' => $url)) ?>
<?php endif ?>
</div>
<?php endif ?>

<small>Want to be able to use h-card data in your code? Check out the open-source <a href="http://microformats.org/wiki/parsers">implementations</a>.</small>
<?= $render('silo-hint.html', array('url' => $url)) ?>

</div>
<?php endif; ?>

<small>Want to be able to use h-card data in your code? Check out the open-source <a href="https://microformats.org/wiki/parsers">implementations</a>.</small>

<?php if (empty($composite_view)): ?>
<hr />
Expand All @@ -165,3 +183,4 @@

</div><!--/.span-->
</div>

71 changes: 18 additions & 53 deletions web/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ function datetimeProblem($datetimeStr) {
$app = new Silex\Application();

$app->get('/', function () {
return render('index.html', array('composite_view' => true));
return render('index.html', array('composite_view' => true, 'showResult' => false));
});

$app->get('/validate-rel-me/', function (Http\Request $request) {
Expand Down Expand Up @@ -279,7 +279,9 @@ function datetimeProblem($datetimeStr) {

$app->get('/validate-h-card/', function (Http\Request $request) use($app) {
if (!$request->query->has('url')) {
return render('validate-h-card.html');
return render('validate-h-card.html', [
'showResult' => false,
]);
} else {
$url = IndieWeb\normaliseUrl($request->query->get('url'));

Expand All @@ -300,57 +302,20 @@ function datetimeProblem($datetimeStr) {
return $errorResponse(htmlspecialchars($err->getMessage()));
}

$representativeHCards = array();
$allhCards = $hCards = Mf2\findMicroformatsByType($mfs, 'h-card');

$relMeUrls = empty($mfs['rels']['me']) ? array() : $mfs['rels']['me'];

# check for `url` and `uid` properties matching the page URL
foreach ($hCards as $index => $hCard) {
if (Mf2\hasProp($hCard, 'uid') && Mf2\hasProp($hCard, 'url')
&& Mf2\urlsMatch(Mf2\getPlaintext($hCard, 'uid'), $url)
&& count(array_filter($hCard['properties']['url'], function ($u) use ($url) {
return Mf2\urlsMatch($u, $url);
})) > 0) {
$representativeHCards[] = $hCard;
unset($hCards[$index]);
}
}

# check for `url` property that matches a `rel=me` URL
if ($relMeUrls) {
foreach ($hCards as $index => $hCard) {
if (Mf2\hasProp($hCard, 'url') && count(array_filter($hCard['properties']['url'], function ($u) use ($relMeUrls) {
return in_array(Indieweb\normaliseUrl($u), $relMeUrls);
})) > 0) {
$representativeHCards[] = $hCard;
unset($hCards[$index]);
}
}
}

# check if the page has *one single h-card* and the `url` matches the page URL
if (count($hCards) == 1) {
$hCard = reset($hCards);
if (Mf2\hasProp($hCard, 'url') && count(array_filter($hCard['properties']['url'], function ($u) use ($url) {
return Mf2\urlsMatch($u, $url);
})) > 0) {
$representativeHCards[] = $hCard;
}
}

$firstHCard = null;

if (count($allhCards) > 0) {
$firstHCard = $allhCards[0];
}

return crossOriginResponse(render('validate-h-card.html', array(
'showResult' => true,
'firstHCard' => $firstHCard,
'representativeHCards' => $representativeHCards,
'url' => htmlspecialchars($url)
)));
$allHCards = Mf2\findMicroformatsByType($mfs, 'h-card');
$representativeHCard = Mf2\getRepresentativeHCard($mfs, $url);

return crossOriginResponse(
render(
'validate-h-card.html',
[
'showResult' => true,
'allHCards' => $allHCards,
'representativeHCard' => $representativeHCard,
'url' => htmlspecialchars($url)
]
)
);
}
});

Expand Down