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
1 changed files with 146 additions and 143 deletions
|
|
@ -696,20 +696,20 @@ $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; }
|
||||
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,
|
||||
|
|
@ -724,37 +724,39 @@ $css=' * { margin: 0; padding: 0; }
|
|||
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; }
|
||||
$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">
|
||||
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>
|
||||
|
|
@ -769,68 +771,70 @@ echo '
|
|||
echo '
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<header>
|
||||
<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>';
|
||||
|
||||
if (!empty($config->site_description))
|
||||
echo '<p>'.$config->site_description.'<br><a href="../../">⇐ retour index</a></p>';
|
||||
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 method="get" action="'.escape(LOCAL_URL).'">
|
||||
<input type="search" name="q" value="'.escape($search).'" />
|
||||
<input type="submit" value="'.__('Search').'" />
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
';
|
||||
|
||||
if( $vvb->mustUpdateXsaf()) {
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Update').'</h2>
|
||||
</div>
|
||||
</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>
|
||||
</div>';
|
||||
</article>';
|
||||
}
|
||||
elseif ($vvb->mustUpdate())
|
||||
{
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Update').'</h2>
|
||||
</div>
|
||||
</header>
|
||||
<div class="content" id="update">
|
||||
'.__('Updating database... Please wait.').'
|
||||
</div>
|
||||
</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">
|
||||
<article id="results">
|
||||
<header>
|
||||
<h2>'.__('Search').'</h2>
|
||||
'.$text.'
|
||||
</div>
|
||||
</div>';
|
||||
</header>
|
||||
<article>';
|
||||
|
||||
foreach ($results as $art)
|
||||
{
|
||||
echo '
|
||||
<div class="article result">
|
||||
<article class="result">
|
||||
<header>
|
||||
<h3><a href="./?'.escape($art['uri']).'">'.escape($art['title']).'</a></h3>
|
||||
</header>
|
||||
<p>'.$art['content'].'</p>
|
||||
</div>';
|
||||
</article>';
|
||||
}
|
||||
}
|
||||
elseif (!is_null($article))
|
||||
|
|
@ -838,13 +842,13 @@ elseif (!is_null($article))
|
|||
if (!$article)
|
||||
{
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<article>
|
||||
<header>
|
||||
<h2>'.__('Not Found').'</h2>
|
||||
'.(!empty($uri) ? '<p><tt>'.escape($vvb->getLocalURL($uri)) . '</tt></p>' : '').'
|
||||
'.__('Article not found.').'
|
||||
</div>
|
||||
</div>';
|
||||
</header>
|
||||
</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">
|
||||
<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/>
|
||||
— <a href="./'.basename(ARTICLES_DB_FILE).'">'.__('articles').'</a></p>
|
||||
<p><a href="./?media">'.__('Media export').' <sup> JSON</sup></a></p>
|
||||
</div>';
|
||||
</footer>';
|
||||
|
||||
if( $vvb->mustUpdateXsaf() ) {
|
||||
try {
|
||||
|
|
@ -976,15 +980,14 @@ function display_article($article)
|
|||
{
|
||||
global $vvb, $config;
|
||||
echo '
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<article>
|
||||
<header>
|
||||
<h2><a href="'.$vvb->getLocalURL($article).'">'.escape($article['title']).'</a></h2>
|
||||
'.strftime(__('_date_format'), $article['date']).'
|
||||
</div>
|
||||
</header>
|
||||
<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>';
|
||||
<footer class="source"><p>'.__('Source:').' <a href="'.escape($article['url']).'">'.escape($article['url']).'</a></p></footer>
|
||||
</article>';
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
|
|||
Loading…
Reference in a new issue