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
parent
862d349e7b
commit
845b8b4cfb
|
|
@ -8,7 +8,7 @@
|
|||
- Source feed MUST be valid UTF-8
|
||||
- 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';
|
||||
if (!version_compare(phpversion(), '5.3.0', '>='))
|
||||
|
|
@ -121,7 +121,7 @@ function exception_handler($e)
|
|||
exit;
|
||||
}
|
||||
|
||||
$error = "Error happened !\n\n".
|
||||
$error = "Error happened!\n\n".
|
||||
$e->getCode()." - ".$e->getMessage()."\n\nIn: ".
|
||||
$e->getFile() . ":" . $e->getLine()."\n\n";
|
||||
|
||||
|
|
@ -692,163 +692,167 @@ if (!$search && !empty($_SERVER['QUERY_STRING']) && !is_numeric($_SERVER['QUERY_
|
|||
}
|
||||
|
||||
// common CSS
|
||||
$css=' * { margin: 0; padding: 0; }
|
||||
body { font-family:sans-serif; background-color: #efefef; padding: 1%; color: #333; }
|
||||
img { max-width: 100%; height: auto; }
|
||||
a { text-decoration: none; color: #000;font-weight:bold; }
|
||||
.header a { text-decoration: none; color: #000;font-weight:bold; }
|
||||
.header { text-align:center; padding: 30px 3%; max-width:70em;margin:0 auto; }
|
||||
.article .title { margin-bottom: 1em; }
|
||||
.article .title h2 a:hover { color:#403976; }
|
||||
.article h4 { font-weight: normal; font-size: small; color: #666; }
|
||||
.article .source a { color: #666; }
|
||||
.searchForm { float:right; }
|
||||
.searchForm 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; }
|
||||
.pagination b { font-size: 1.2em; color: #333; }
|
||||
.pagination a { color:#000; margin: 0 0.5em; }
|
||||
.pagination a:hover { color:#333; }
|
||||
.footer a { color:#000; }
|
||||
.footer a:hover { color:#333; }
|
||||
.content ul, .content ol { margin-left: 2em; }
|
||||
.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 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 h1 { font-size: 1.5em; }
|
||||
.content h2 { font-size: 1.4em;color:#000; }
|
||||
.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; }
|
||||
$css='* { margin: 0; padding: 0; }
|
||||
body { font-family:sans-serif; background-color: #efefef; padding: 1%; color: #333; }
|
||||
img { max-width: 100%; height: auto; }
|
||||
a { text-decoration: none; color: #000;font-weight:bold; }
|
||||
body > header a { text-decoration: none; color: #000;font-weight:bold; }
|
||||
body > header { text-align:center; padding: 30px 3%; max-width:70em;margin:0 auto; }
|
||||
body > article > header { margin-bottom: 1em; }
|
||||
body > article > header h2 a:hover { color:#403976; }
|
||||
body > article h4 { font-weight: normal; font-size: small; color: #666; }
|
||||
body > article .source a { color: #666; }
|
||||
body > header > form { float:right; }
|
||||
body > header > form input { }
|
||||
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; }
|
||||
body > nav strong { font-size: 1.2em; color: #333; }
|
||||
body > nav a { color:#000; margin: 0 0.5em; }
|
||||
body > nav a:hover { color:#333; }
|
||||
body > footer a { color:#000; }
|
||||
body > footer a:hover { color:#333; }
|
||||
.content ul, .content ol { margin-left: 2em; }
|
||||
.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 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 h1 { font-size: 1.5em; }
|
||||
.content h2 { font-size: 1.4em;color:#000; }
|
||||
.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; }
|
||||
';
|
||||
|
||||
switch($site_type) {
|
||||
case 'microblog':
|
||||
case 'twitter':
|
||||
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
|
||||
.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; }
|
||||
.article .title h2 a { color:#333; text-decoration:none; }
|
||||
.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; }
|
||||
.article .source { font-size: 0.8em; color: #666; }
|
||||
.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;}';
|
||||
$css .= "\n".' /* twitter/microblog style */
|
||||
body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
|
||||
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; }
|
||||
body > article > header h2 a { color:#333; text-decoration:none; }
|
||||
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; }
|
||||
body > article .source { font-size: 0.8em; color: #666; }
|
||||
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;
|
||||
case 'shaarli':
|
||||
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
|
||||
.article .title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
|
||||
.article .title 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; }
|
||||
.article .source { margin-top:1em;font-size: 0.8em; color: #666; }
|
||||
.footer { text-align:center; font-size: small; color:#333; clear: both; }';
|
||||
$css .= "\n".' /* shaarli style */
|
||||
body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px; }
|
||||
body > article > header title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
|
||||
body > article > header h2 a { color:#000; text-decoration:none; }
|
||||
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 > 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;
|
||||
case 'generic':
|
||||
case 'youtube':
|
||||
default:
|
||||
$css .= '.header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px;text-transform:uppercase; }
|
||||
.article .title h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
|
||||
.article .title h2 a { color:#000; text-decoration:none; }
|
||||
.article .source { font-size: 0.8em; color: #666; }
|
||||
.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; }
|
||||
.footer { text-align:center; font-size: small; color:#333; clear: both; }';
|
||||
$css .= "\n".' /* youtube style */
|
||||
body > header h1 a { color: #333;font-size:40pt;text-shadow: #ccc 0px 5px 5px;text-transform:uppercase; }
|
||||
body > article > header h2 { margin: 0; color:#333; text-shadow: 1px 1px 1px #fff; }
|
||||
body > article > header h2 a { color:#000; text-decoration:none; }
|
||||
body > article footer.source { 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; }
|
||||
body > footer { text-align:center; font-size: small; color:#333; clear: both; }';
|
||||
}
|
||||
|
||||
// HTML HEADER
|
||||
echo '
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
echo '<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>'.escape($config->site_title).'</title>
|
||||
<link rel="canonical" href="'.escape($config->site_url).'">
|
||||
<link rel="alternate" type="application/atom+xml" title="'.__('ATOM Feed').'" href="?feed">
|
||||
<style type="text/css" media="screen,projection">
|
||||
'.$css.'
|
||||
'.$css.'
|
||||
</style>';
|
||||
if( $vvb->mustUpdateXsaf()) {
|
||||
echo '<meta http-equiv="Refresh" content="1">';
|
||||
echo ' <meta http-equiv="Refresh" content="1">';
|
||||
}
|
||||
echo '
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1><a href="../../" style="font-size:0.8em;">PROJET AUTOBLOG'. (strlen(HEAD_TITLE) > 0 ? ' ~ '. HEAD_TITLE : '') .'</a></h1>
|
||||
<hr>
|
||||
<h1><a href="./">'.escape($config->site_title).'</a></h1>';
|
||||
|
||||
if (!empty($config->site_description))
|
||||
echo '<p>'.$config->site_description.'<br><a href="../../">⇐ retour index</a></p>';
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><a href="../../" style="font-size:0.8em;">PROJET AUTOBLOG'. (strlen(HEAD_TITLE) > 0 ? ' ~ '. HEAD_TITLE : '') .'</a></h1>
|
||||
<hr />
|
||||
<h1><a href="./">'.escape($config->site_title).'</a></h1>';
|
||||
|
||||
if (!empty($config->site_description))
|
||||
echo '
|
||||
<p>'.$config->site_description.'</p>
|
||||
<p><a href="../../">⇐ retour index</a></p>';
|
||||
|
||||
echo '
|
||||
<form method="get" action="'.escape(LOCAL_URL).'" class="searchForm">
|
||||
<div>
|
||||
<input type="text" name="q" value="'.escape($search).'">
|
||||
<input type="submit" value="'.__('Search').'">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form method="get" action="'.escape(LOCAL_URL).'">
|
||||
<input type="search" name="q" value="'.escape($search).'" />
|
||||
<input type="submit" value="'.__('Search').'" />
|
||||
</form>
|
||||
</header>
|
||||
';
|
||||
|
||||
if( $vvb->mustUpdateXsaf()) {
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h2>'.__('Update').'</h2>
|
||||
</div>
|
||||
<div class="content" id="update">
|
||||
'.__('Import running: '). $vvb->getXsafCounter() . __(' files remaining').'<br>
|
||||
'.__('The page should refresh every second. If not, <a href="javascript:window.location.reload()">refresh manually</a>.').'
|
||||
</div>
|
||||
</div>';
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Update').'</h2>
|
||||
</header>
|
||||
<div class="content" id="update">
|
||||
'.__('Import running: '). $vvb->getXsafCounter() . __(' files remaining').'<br>
|
||||
'.__('The page should refresh every second. If not, <a href="javascript:window.location.reload()">refresh manually</a>.').'
|
||||
</div>
|
||||
</article>';
|
||||
}
|
||||
elseif ($vvb->mustUpdate())
|
||||
{
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h2>'.__('Update').'</h2>
|
||||
</div>
|
||||
<div class="content" id="update">
|
||||
'.__('Updating database... Please wait.').'
|
||||
</div>
|
||||
</div>';
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Update').'</h2>
|
||||
</header>
|
||||
<div class="content" id="update">
|
||||
'.__('Updating database... Please wait.').'
|
||||
</div>
|
||||
</article>';
|
||||
}
|
||||
|
||||
if (!empty($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 '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h2>'.__('Search').'</h2>
|
||||
'.$text.'
|
||||
</div>
|
||||
</div>';
|
||||
<article id="results">
|
||||
<header>
|
||||
<h2>'.__('Search').'</h2>
|
||||
'.$text.'
|
||||
</header>
|
||||
<article>';
|
||||
|
||||
foreach ($results as $art)
|
||||
{
|
||||
echo '
|
||||
<div class="article result">
|
||||
<h3><a href="./?'.escape($art['uri']).'">'.escape($art['title']).'</a></h3>
|
||||
<p>'.$art['content'].'</p>
|
||||
</div>';
|
||||
<article class="result">
|
||||
<header>
|
||||
<h3><a href="./?'.escape($art['uri']).'">'.escape($art['title']).'</a></h3>
|
||||
</header>
|
||||
<p>'.$art['content'].'</p>
|
||||
</article>';
|
||||
}
|
||||
}
|
||||
elseif (!is_null($article))
|
||||
{
|
||||
if (!$article)
|
||||
{
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h2>'.__('Not Found').'</h2>
|
||||
'.(!empty($uri) ? '<p><tt>'.escape($vvb->getLocalURL($uri)) . '</tt></p>' : '').'
|
||||
'.__('Article not found.').'
|
||||
</div>
|
||||
</div>';
|
||||
echo '
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Not Found').'</h2>
|
||||
'.(!empty($uri) ? '<p><tt>'.escape($vvb->getLocalURL($uri)) . '</tt></p>' : '').'
|
||||
'.__('Article not found.').'
|
||||
</header>
|
||||
</article>';
|
||||
}
|
||||
else
|
||||
{
|
||||
display_article($article);
|
||||
display_article($article);
|
||||
}
|
||||
}
|
||||
else
|
||||
|
|
@ -868,31 +872,31 @@ else
|
|||
$max = $vvb->countArticles();
|
||||
if ($max > $config->articles_per_page)
|
||||
{
|
||||
echo '<div class="pagination">';
|
||||
echo "\n".' <nav>'."\n";
|
||||
|
||||
if ($page > 1)
|
||||
echo '<a href="'.$vvb->getLocalURL($page - 1).'">← '.__('Newer').'</a> ';
|
||||
echo ' <a href="'.$vvb->getLocalURL($page - 1).'">← '.__('Newer').'</a>'."\n";
|
||||
|
||||
$last = ceil($max / $config->articles_per_page);
|
||||
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)
|
||||
echo '<a href="'.$vvb->getLocalURL($page + 1).'">'.__('Older').' →</a> ';
|
||||
echo ' <a href="'.$vvb->getLocalURL($page + 1).'">'.__('Older').' →</a>'."\n";
|
||||
|
||||
echo '</div>';
|
||||
echo ' </nav>';
|
||||
}
|
||||
}
|
||||
|
||||
echo '
|
||||
<div class="footer">
|
||||
<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>)
|
||||
- <a href="./'.basename(ARTICLES_DB_FILE).'">'.__('articles').'</a><p/>
|
||||
<p><a href="./?media">'.__('Media export').' <sup> JSON</sup></a></p>
|
||||
</div>';
|
||||
<footer>
|
||||
<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>)
|
||||
— <a href="./'.basename(ARTICLES_DB_FILE).'">'.__('articles').'</a></p>
|
||||
<p><a href="./?media">'.__('Media export').' <sup> JSON</sup></a></p>
|
||||
</footer>';
|
||||
|
||||
if( $vvb->mustUpdateXsaf() ) {
|
||||
try {
|
||||
|
|
@ -910,9 +914,9 @@ if( $vvb->mustUpdateXsaf() ) {
|
|||
catch (VroumVroum_Feed_Exception $e)
|
||||
{
|
||||
echo '
|
||||
<div id="error">
|
||||
'.escape($e->getMessage()).'
|
||||
</div>';
|
||||
<div id="error">
|
||||
'.escape($e->getMessage()).'
|
||||
</div>';
|
||||
$updated = 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -933,34 +937,34 @@ elseif ($vvb->mustUpdate())
|
|||
catch (VroumVroum_Feed_Exception $e)
|
||||
{
|
||||
echo '
|
||||
<div id="error">
|
||||
<div id="error">
|
||||
'.escape($e->getMessage()).'
|
||||
</div>';
|
||||
</div>';
|
||||
$updated = 0;
|
||||
}
|
||||
|
||||
if ($updated > 0)
|
||||
{
|
||||
echo '
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementById("update").innerHTML = "'.__('Update complete!').' <a href=\\"#reload\\" onclick=\\"window.location.reload();\\">'.__('Click here to reload this webpage.').'</a>";
|
||||
};
|
||||
</script>';
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.getElementById("update").innerHTML = "'.__('Update complete!').' <a href=\\"#reload\\" onclick=\\"window.location.reload();\\">'.__('Click here to reload this webpage.').'</a>";
|
||||
};
|
||||
</script>';
|
||||
}
|
||||
else
|
||||
{
|
||||
echo '
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.body.removeChild(document.getElementById("update").parentNode);
|
||||
};
|
||||
</script>';
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
document.body.removeChild(document.getElementById("update").parentNode);
|
||||
};
|
||||
</script>';
|
||||
}
|
||||
}
|
||||
|
||||
echo '
|
||||
</body>
|
||||
</body>
|
||||
</html>';
|
||||
|
||||
|
||||
|
|
@ -976,15 +980,14 @@ function display_article($article)
|
|||
{
|
||||
global $vvb, $config;
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h2><a href="'.$vvb->getLocalURL($article).'">'.escape($article['title']).'</a></h2>
|
||||
'.strftime(__('_date_format'), $article['date']).'
|
||||
</div>
|
||||
<div class="content">'.escape_content($article['content']).'</div>
|
||||
<p class="source">'.__('Source:').' <a href="'.escape($article['url']).'">'.escape($article['url']).'</a></p>
|
||||
<br style="clear: both;" />
|
||||
</div>';
|
||||
<article>
|
||||
<header>
|
||||
<h2><a href="'.$vvb->getLocalURL($article).'">'.escape($article['title']).'</a></h2>
|
||||
'.strftime(__('_date_format'), $article['date']).'
|
||||
</header>
|
||||
<div class="content">'.escape_content($article['content']).'</div>
|
||||
<footer class="source"><p>'.__('Source:').' <a href="'.escape($article['url']).'">'.escape($article['url']).'</a></p></footer>
|
||||
</article>';
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue