Sémantisation d’autoblog.php

Sensiblement les même type de changement que le pull 41 (sauf que là le CSS est changé aussi du même coup), que je résumerais avec presque le même résumé :

Alors j’ai fait énoooooormément de modifications… La principale est : un code source (HTML5) beau et sémantique. C’est à dire que j’utilise les balises sémantique HTML5, que le code est plus simple, qu’il est correctement indenté (2 espaces à chaque fois, c’est ce que je trouve de plus beau) et valide. Ça m’a pris une nuit et un aprèm’ (la nuit pour index.php, l’aprèm’ pour autoblog.php) de nettoyer ça, assez simple et très satisfaisant :).

Bon après j’ai fait plusieurs autres modifications de genre divers aussi : j’ai supprimé des balises inutiles, des traits d’union par des tirets, fusion des lignes séparées par des
(horrible) en un paragraphe (bien plus joli, organisé, sémantique, etc.), et d’autres choses encore.

Par conséquent j’imagine que peut-être qu’il sera nécessaire de regarder la diff des changements. Mais pour voir le résultat final il y a mon instance : <https://autoblog.galex-713.eu>.

Dans ce deuxième pull request quasiment identique au premier, les deux espaces insécables qui rendait le code inopérant ont été retirés.
This commit is contained in:
Garreau Alexandre 2013-10-14 01:01:44 +02:00
parent 862d349e7b
commit 845b8b4cfb

View file

@ -8,7 +8,7 @@
- Source feed MUST be valid UTF-8 - Source feed MUST be valid UTF-8
- Source feed MUST contain article body - Source feed MUST contain article body
This program is public domain. COPY COPY COPY ! This program is public domain. COPY COPY COPY!
*/ */
$vvbversion = '0.3.0'; $vvbversion = '0.3.0';
if (!version_compare(phpversion(), '5.3.0', '>=')) if (!version_compare(phpversion(), '5.3.0', '>='))
@ -121,7 +121,7 @@ function exception_handler($e)
exit; exit;
} }
$error = "Error happened !\n\n". $error = "Error happened!\n\n".
$e->getCode()." - ".$e->getMessage()."\n\nIn: ". $e->getCode()." - ".$e->getMessage()."\n\nIn: ".
$e->getFile() . ":" . $e->getLine()."\n\n"; $e->getFile() . ":" . $e->getLine()."\n\n";
@ -692,163 +692,167 @@ if (!$search && !empty($_SERVER['QUERY_STRING']) && !is_numeric($_SERVER['QUERY_
} }
// common CSS // common CSS
$css=' * { margin: 0; padding: 0; } $css='* { margin: 0; padding: 0; }
body { font-family:sans-serif; background-color: #efefef; padding: 1%; color: #333; } body { font-family:sans-serif; background-color: #efefef; padding: 1%; color: #333; }
img { max-width: 100%; height: auto; } img { max-width: 100%; height: auto; }
a { text-decoration: none; color: #000;font-weight:bold; } a { text-decoration: none; color: #000;font-weight:bold; }
.header a { text-decoration: none; color: #000;font-weight:bold; } body > header a { text-decoration: none; color: #000;font-weight:bold; }
.header { text-align:center; padding: 30px 3%; max-width:70em;margin:0 auto; } body > header { text-align:center; padding: 30px 3%; max-width:70em;margin:0 auto; }
.article .title { margin-bottom: 1em; } body > article > header { margin-bottom: 1em; }
.article .title h2 a:hover { color:#403976; } body > article > header h2 a:hover { color:#403976; }
.article h4 { font-weight: normal; font-size: small; color: #666; } body > article h4 { font-weight: normal; font-size: small; color: #666; }
.article .source a { color: #666; } body > article .source a { color: #666; }
.searchForm { float:right; } body > header > form { float:right; }
.searchForm input { } body > header > form input { }
.pagination { background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; } body > nav { background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; }
.pagination b { font-size: 1.2em; color: #333; } body > nav strong { font-size: 1.2em; color: #333; }
.pagination a { color:#000; margin: 0 0.5em; } body > nav a { color:#000; margin: 0 0.5em; }
.pagination a:hover { color:#333; } body > nav a:hover { color:#333; }
.footer a { color:#000; } body > footer a { color:#000; }
.footer a:hover { color:#333; } body > footer a:hover { color:#333; }
.content ul, .content ol { margin-left: 2em; } .content ul, .content ol { margin-left: 2em; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content ul, .content ol, .content p, .content object, .content div, .content blockquote, .content ul, .content ol, .content p, .content object, .content div, .content blockquote,
.content dl, .content pre { margin-bottom: 0.8em; } .content dl, .content pre { margin-bottom: 0.8em; }
.content pre, .content blockquote { background: #ddd; border: 1px solid #999; padding: 0.2em; max-width: 100%; overflow: auto; } .content pre, .content blockquote { background: #ddd; border: 1px solid #999; padding: 0.2em; max-width: 100%; overflow: auto; }
.content h1 { font-size: 1.5em; } .content h1 { font-size: 1.5em; }
.content h2 { font-size: 1.4em;color:#000; } .content h2 { font-size: 1.4em;color:#000; }
.result h3 a { color: darkblue; text-decoration: none; text-shadow: 1px 1px 1px #fff; } .result h3 a { color: darkblue; text-decoration: none; text-shadow: 1px 1px 1px #fff; }
#error { position: fixed; top: 0; left: 0; right: 0; padding: 1%; background: #fff; border-bottom: 2px solid red; color: darkred; } #error { position: fixed; top: 0; left: 0; right: 0; padding: 1%; background: #fff; border-bottom: 2px solid red; color: darkred; }
'; ';
switch($site_type) { switch($site_type) {
case 'microblog': case 'microblog':
case 'twitter': case 'twitter':
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; } $css .= "\n".' /* twitter/microblog style */
.article .title h2 { width: 10em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 0.7em;margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; } body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
.article .title h2 a { color:#333; text-decoration:none; } body > article > header h2 { width: 10em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 0.7em;margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
.article { background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:0 auto;box-shadow:0px 5px 7px #aaa; } body > article > header h2 a { color:#333; text-decoration:none; }
.article .source { font-size: 0.8em; color: #666; } body > article { background-color:white;padding: 12px 10px 33px;border:1px solid #aaa;max-width:70em;margin:0 auto;box-shadow:0px 5px 7px #aaa; }
.footer { margin-top:1em;text-align:center; font-size: small; color:#333; clear: both; } body > article .source { font-size: 0.8em; color: #666; }
.content {font-size:0.9em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}'; body > footer { margin-top:1em;text-align:center; font-size: small; color:#333; clear: both; }
.content {font-size:0.9em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}';
break; break;
case 'shaarli': case 'shaarli':
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; } $css .= "\n".' /* shaarli style */
.article .title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; } body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
.article .title h2 a { color:#000; text-decoration:none; } body > article > header title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
.article { background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; } body > article > header h2 a { color:#000; text-decoration:none; }
.article .source { margin-top:1em;font-size: 0.8em; color: #666; } body > article { background-color:white;padding: 12px 10px 33px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; }
.footer { text-align:center; font-size: small; color:#333; clear: both; }'; body > article footer.source { margin-top:1em;font-size: 0.8em; color: #666; }
body > footer { text-align:center; font-size: small; color:#333; clear: both; }';
break; break;
case 'generic': case 'generic':
case 'youtube': case 'youtube':
default: default:
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px;text-transform:uppercase; } $css .= "\n".' /* youtube style */
.article .title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; } body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px;text-transform:uppercase; }
.article .title h2 a { color:#000; text-decoration:none; } body > article > header h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
.article .source { font-size: 0.8em; color: #666; } body > article > header h2 a { color:#000; text-decoration:none; }
.article { background-color:white;padding: 12px 10px 12px 10px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; } body > article footer.source { font-size: 0.8em; color: #666; }
.footer { text-align:center; font-size: small; color:#333; clear: both; }'; body > article { background-color:white;padding: 12px 10px 33px;border:1px solid #aaa;max-width:70em;margin:1em auto;box-shadow:0px 5px 7px #aaa; }
body > footer { text-align:center; font-size: small; color:#333; clear: both; }';
} }
// HTML HEADER // HTML HEADER
echo ' echo '<!DOCTYPE html>
<!DOCTYPE html> <html lang="fr" dir="ltr">
<html lang="en" dir="ltr"> <head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>'.escape($config->site_title).'</title> <title>'.escape($config->site_title).'</title>
<link rel="canonical" href="'.escape($config->site_url).'"> <link rel="canonical" href="'.escape($config->site_url).'">
<link rel="alternate" type="application/atom+xml" title="'.__('ATOM Feed').'" href="?feed"> <link rel="alternate" type="application/atom+xml" title="'.__('ATOM Feed').'" href="?feed">
<style type="text/css" media="screen,projection"> <style type="text/css" media="screen,projection">
'.$css.' '.$css.'
</style>'; </style>';
if( $vvb->mustUpdateXsaf()) { if( $vvb->mustUpdateXsaf()) {
echo '<meta http-equiv="Refresh" content="1">'; echo ' <meta http-equiv="Refresh" content="1">';
} }
echo ' echo '
</head> </head>
<body> <body>
<div class="header"> <header>
<h1><a href="../../" style="font-size:0.8em;">PROJET AUTOBLOG'. (strlen(HEAD_TITLE) > 0 ? ' ~ '. HEAD_TITLE : '') .'</a></h1> <h1><a href="../../" style="font-size:0.8em;">PROJET AUTOBLOG'. (strlen(HEAD_TITLE) > 0 ? ' ~ '. HEAD_TITLE : '') .'</a></h1>
<hr> <hr />
<h1><a href="./">'.escape($config->site_title).'</a></h1>'; <h1><a href="./">'.escape($config->site_title).'</a></h1>';
if (!empty($config->site_description)) if (!empty($config->site_description))
echo '<p>'.$config->site_description.'<br><a href="../../">&lArr; retour index</a></p>'; echo '
<p>'.$config->site_description.'</p>
<p><a href="../../">&lArr; retour index</a></p>';
echo ' echo '
<form method="get" action="'.escape(LOCAL_URL).'" class="searchForm"> <form method="get" action="'.escape(LOCAL_URL).'">
<div> <input type="search" name="q" value="'.escape($search).'" />
<input type="text" name="q" value="'.escape($search).'"> <input type="submit" value="'.__('Search').'" />
<input type="submit" value="'.__('Search').'"> </form>
</div> </header>
</form>
</div>
'; ';
if( $vvb->mustUpdateXsaf()) { if( $vvb->mustUpdateXsaf()) {
echo ' echo '
<div class="article"> <article>
<div class="title"> <header>
<h2>'.__('Update').'</h2> <h2>'.__('Update').'</h2>
</div> </header>
<div class="content" id="update"> <div class="content" id="update">
'.__('Import running: '). $vvb->getXsafCounter() . __(' files remaining').'<br> '.__('Import running: '). $vvb->getXsafCounter() . __(' files remaining').'<br>
'.__('The page should refresh every second. If not, <a href="javascript:window.location.reload()">refresh manually</a>.').' '.__('The page should refresh every second. If not, <a href="javascript:window.location.reload()">refresh manually</a>.').'
</div> </div>
</div>'; </article>';
} }
elseif ($vvb->mustUpdate()) elseif ($vvb->mustUpdate())
{ {
echo ' echo '
<div class="article"> <article>
<div class="title"> <header>
<h2>'.__('Update').'</h2> <h2>'.__('Update').'</h2>
</div> </header>
<div class="content" id="update"> <div class="content" id="update">
'.__('Updating database... Please wait.').' '.__('Updating database... Please wait.').'
</div> </div>
</div>'; </article>';
} }
if (!empty($search)) if (!empty($search))
{ {
$results = $vvb->searchArticles($search); $results = $vvb->searchArticles($search);
$text = sprintf(__('<b>%d</b> results for <i>%s</i>'), count($results), escape($search)); $text = sprintf(__('<strong>%d</strong> results for <em>%s</em>'), count($results), escape($search));
echo ' echo '
<div class="article"> <article id="results">
<div class="title"> <header>
<h2>'.__('Search').'</h2> <h2>'.__('Search').'</h2>
'.$text.' '.$text.'
</div> </header>
</div>'; <article>';
foreach ($results as $art) foreach ($results as $art)
{ {
echo ' echo '
<div class="article result"> <article class="result">
<h3><a href="./?'.escape($art['uri']).'">'.escape($art['title']).'</a></h3> <header>
<p>'.$art['content'].'</p> <h3><a href="./?'.escape($art['uri']).'">'.escape($art['title']).'</a></h3>
</div>'; </header>
<p>'.$art['content'].'</p>
</article>';
} }
} }
elseif (!is_null($article)) elseif (!is_null($article))
{ {
if (!$article) if (!$article)
{ {
echo ' echo '
<div class="article"> <article>
<div class="title"> <header>
<h2>'.__('Not Found').'</h2> <h2>'.__('Not Found').'</h2>
'.(!empty($uri) ? '<p><tt>'.escape($vvb->getLocalURL($uri)) . '</tt></p>' : '').' '.(!empty($uri) ? '<p><tt>'.escape($vvb->getLocalURL($uri)) . '</tt></p>' : '').'
'.__('Article not found.').' '.__('Article not found.').'
</div> </header>
</div>'; </article>';
} }
else else
{ {
display_article($article); display_article($article);
} }
} }
else else
@ -868,31 +872,31 @@ else
$max = $vvb->countArticles(); $max = $vvb->countArticles();
if ($max > $config->articles_per_page) if ($max > $config->articles_per_page)
{ {
echo '<div class="pagination">'; echo "\n".' <nav>'."\n";
if ($page > 1) if ($page > 1)
echo '<a href="'.$vvb->getLocalURL($page - 1).'">&larr; '.__('Newer').'</a> '; echo ' <a href="'.$vvb->getLocalURL($page - 1).'">&larr; '.__('Newer').'</a>'."\n";
$last = ceil($max / $config->articles_per_page); $last = ceil($max / $config->articles_per_page);
for ($i = 1; $i <= $last; $i++) for ($i = 1; $i <= $last; $i++)
{ {
echo '<a href="'.$vvb->getLocalURL($i).'">'.($i == $page ? '<b>'.$i.'</b>' : $i).'</a> '; echo ' <a href="'.$vvb->getLocalURL($i).'">'.($i == $page ? '<strong>'.$i.'</strong>' : $i).'</a>'."\n";
} }
if ($page < $last) if ($page < $last)
echo '<a href="'.$vvb->getLocalURL($page + 1).'">'.__('Older').' &rarr;</a> '; echo ' <a href="'.$vvb->getLocalURL($page + 1).'">'.__('Older').' &rarr;</a>'."\n";
echo '</div>'; echo ' </nav>';
} }
} }
echo ' echo '
<div class="footer"> <footer>
<p>Propulsé par <a href="https://github.com/mitsukarenai/Projet-Autoblog">Projet Autoblog '.$vvbversion.'</a> - <a href="?feed">'.__('ATOM Feed').'</a></p> <p>Propulsé par <a href="https://github.com/mitsukarenai/Projet-Autoblog">Projet Autoblog '.$vvbversion.'</a> - <a href="?feed">'.__('ATOM Feed').'</a></p>
<p>'.__('Download:').' <a href="./'.basename(CONFIG_FILE).'">'.__('configuration').'</a> (<a href="?opml">OPML</a>) <p>'.__('Download:').' <a href="./'.basename(CONFIG_FILE).'">'.__('configuration').'</a> (<a href="?opml">OPML</a>)
- <a href="./'.basename(ARTICLES_DB_FILE).'">'.__('articles').'</a><p/> <a href="./'.basename(ARTICLES_DB_FILE).'">'.__('articles').'</a></p>
<p><a href="./?media">'.__('Media export').' <sup> JSON</sup></a></p> <p><a href="./?media">'.__('Media export').' <sup> JSON</sup></a></p>
</div>'; </footer>';
if( $vvb->mustUpdateXsaf() ) { if( $vvb->mustUpdateXsaf() ) {
try { try {
@ -910,9 +914,9 @@ if( $vvb->mustUpdateXsaf() ) {
catch (VroumVroum_Feed_Exception $e) catch (VroumVroum_Feed_Exception $e)
{ {
echo ' echo '
<div id="error"> <div id="error">
'.escape($e->getMessage()).' '.escape($e->getMessage()).'
</div>'; </div>';
$updated = 0; $updated = 0;
} }
} }
@ -933,34 +937,34 @@ elseif ($vvb->mustUpdate())
catch (VroumVroum_Feed_Exception $e) catch (VroumVroum_Feed_Exception $e)
{ {
echo ' echo '
<div id="error"> <div id="error">
'.escape($e->getMessage()).' '.escape($e->getMessage()).'
</div>'; </div>';
$updated = 0; $updated = 0;
} }
if ($updated > 0) if ($updated > 0)
{ {
echo ' echo '
<script type="text/javascript"> <script type="text/javascript">
window.onload = function () { window.onload = function () {
document.getElementById("update").innerHTML = "'.__('Update complete!').' <a href=\\"#reload\\" onclick=\\"window.location.reload();\\">'.__('Click here to reload this webpage.').'</a>"; document.getElementById("update").innerHTML = "'.__('Update complete!').' <a href=\\"#reload\\" onclick=\\"window.location.reload();\\">'.__('Click here to reload this webpage.').'</a>";
}; };
</script>'; </script>';
} }
else else
{ {
echo ' echo '
<script type="text/javascript"> <script type="text/javascript">
window.onload = function () { window.onload = function () {
document.body.removeChild(document.getElementById("update").parentNode); document.body.removeChild(document.getElementById("update").parentNode);
}; };
</script>'; </script>';
} }
} }
echo ' echo '
</body> </body>
</html>'; </html>';
@ -976,15 +980,14 @@ function display_article($article)
{ {
global $vvb, $config; global $vvb, $config;
echo ' echo '
<div class="article"> <article>
<div class="title"> <header>
<h2><a href="'.$vvb->getLocalURL($article).'">'.escape($article['title']).'</a></h2> <h2><a href="'.$vvb->getLocalURL($article).'">'.escape($article['title']).'</a></h2>
'.strftime(__('_date_format'), $article['date']).' '.strftime(__('_date_format'), $article['date']).'
</div> </header>
<div class="content">'.escape_content($article['content']).'</div> <div class="content">'.escape_content($article['content']).'</div>
<p class="source">'.__('Source:').' <a href="'.escape($article['url']).'">'.escape($article['url']).'</a></p> <footer class="source"><p>'.__('Source:').' <a href="'.escape($article['url']).'">'.escape($article['url']).'</a></p></footer>
<br style="clear: both;" /> </article>';
</div>';
} }
?> ?>