add list of recent articles to the main page

This commit is contained in:
E. S. 2024-11-03 22:26:03 +03:00
parent 5f39b99fa4
commit 5aa6381de7
7 changed files with 86 additions and 12 deletions

View File

@ -4,6 +4,12 @@ class MainHandler extends request_handler {
function GET_index() { function GET_index() {
global $config; global $config;
$posts_lang = PostLanguage::English;
$posts = posts::getList(0, 3,
include_hidden: is_admin(),
filter_by_lang: $posts_lang);
add_meta([ add_meta([
'og:type' => 'website', 'og:type' => 'website',
'$url' => 'https://'.$config['domain'].'/', '$url' => 'https://'.$config['domain'].'/',
@ -14,7 +20,10 @@ class MainHandler extends request_handler {
set_title('$site_title'); set_title('$site_title');
set_skin_opts(['is_index' => true]); set_skin_opts(['is_index' => true]);
render('main/index', render('main/index',
posts: $posts,
posts_lang: $posts_lang,
versions: $config['book_versions']); versions: $config['book_versions']);
} }

View File

@ -419,7 +419,7 @@ body.wide .blog-post {
font-size: $fs; font-size: $fs;
//line-height: 140%; //line-height: 140%;
&:hover { &:not(.no-block):hover {
text-decoration: none; text-decoration: none;
background-color: $hover-hl; background-color: $hover-hl;
@include radius(3px); @include radius(3px);
@ -438,6 +438,31 @@ body.wide .blog-post {
} }
} }
} }
.blog-list-expand {
display: block;
@include no-underline();
padding: 10px 8px;
font-size: $fs;
background-color: $hover-hl;
text-align: center;
@include radius(3px);
margin-top: 10px;
> svg {
position: relative;
top: 4px;
margin-left: -6px;
margin-right: -4px;
margin-top: -5px;
color: $dark-fg;
}
&:hover {
text-decoration: none;
background-color: $hover-hl-darker;
@include radius(3px);
}
}
.blog-list-title { .blog-list-title {
font-size: $fs + 2px; font-size: $fs + 2px;

View File

@ -0,0 +1,12 @@
.page.is-index {
margin-bottom: -10px;
.blog-list {
margin-top: 15px;
border-top: 1px $border-color solid;
padding: 18px 0 0;
}
.blog-list-wrap {
padding-bottom: 2px;
}
}

View File

@ -4,6 +4,7 @@
@import "./app/blog"; @import "./app/blog";
@import "./app/form"; @import "./app/form";
@import "./app/pages"; @import "./app/pages";
@import "./app/index";
@import "./app/files"; @import "./app/files";
@import "./hljs/github.scss"; @import "./hljs/github.scss";
@import "./app/widgets"; @import "./app/widgets";

View File

@ -260,8 +260,8 @@ class posts {
if (!$include_hidden) if (!$include_hidden)
$sql .= " WHERE visible=1"; $sql .= " WHERE visible=1";
$sql .= " ORDER BY `date` DESC"; $sql .= " ORDER BY `date` DESC";
if ($offset != 0 && $count != -1) if ($offset != 0 || $count != -1)
$sql .= "LIMIT $offset, $count"; $sql .= " LIMIT $offset, $count";
$q = $db->query($sql); $q = $db->query($sql);
$posts = []; $posts = [];
while ($row = $db->fetch($q)) { while ($row = $db->fetch($q)) {

View File

@ -9,9 +9,10 @@ use Post;
use PostLanguage; use PostLanguage;
use function is_admin; use function is_admin;
function index($ctx, array $versions) { function index($ctx, array $versions, array $posts, PostLanguage $posts_lang) {
return <<<HTML return <<<HTML
<div class="page"><div class="blog-post-text"> <div class="page is-index">
<div class="blog-post-text">
<div class="clearfix index-book"> <div class="clearfix index-book">
<div class="index-book-image-wrap"> <div class="index-book-image-wrap">
<a class="index-book-image" id="index-book-image" href="https://files.4in1.ws/Images/4in1-cover-en.png" target="_blank" data-link-template="https://files.4in1.ws/Images/4in1-cover-{lang}.png"></a> <a class="index-book-image" id="index-book-image" href="https://files.4in1.ws/Images/4in1-cover-en.png" target="_blank" data-link-template="https://files.4in1.ws/Images/4in1-cover-{lang}.png"></a>
@ -35,7 +36,19 @@ function index($ctx, array $versions) {
English translation by Eline Cat<br> English translation by Eline Cat<br>
</div> </div>
</div> </div>
</div></div> </div>
<div class="blog-list">
<div class="blog-list-title">{$ctx->lang('recent_articles')}</div>
<div class="blog-list-wrap">
{$ctx->for_each($posts,
fn($post, $i) => $ctx->articles_post_row($i, $post, $posts_lang, true))}
<a href="/articles/" class="blog-list-expand">
{$ctx->lang('view_all_articles')}
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.47 4.217a.75.75 0 0 0 0 1.06L12.185 10 7.469 14.72a.75.75 0 1 0 1.062 1.06l5.245-5.25a.75.75 0 0 0 0-1.061L8.531 4.218a.75.75 0 0 0-1.061-.001z" fill="currentColor"/></svg>
</a>
</div>
</div>
</div>
HTML; HTML;
} }
@ -74,7 +87,11 @@ return <<<HTML
HTML; HTML;
} }
function articles_post_row($ctx, int $index, Post $post, PostLanguage $selected_lang): string { function articles_post_row($ctx,
int $index,
Post $post,
PostLanguage $selected_lang,
bool $no_block = false): string {
$year = $post->getYear(); $year = $post->getYear();
$date = $post->getDate(); $date = $post->getDate();
$url = $post->getUrl($selected_lang); $url = $post->getUrl($selected_lang);
@ -82,14 +99,22 @@ $url = $post->getUrl($selected_lang);
$pt = $post->getText($selected_lang); $pt = $post->getText($selected_lang);
$title = $pt->title; $title = $pt->title;
$class = ['blog-list-item', 'clearfix'];
if (!$post->visible)
$class[] = 'is-hidden';
if ($no_block)
$class[] = 'no-block';
$class = 'class="'.implode(' ', $class).'"';
$buf = $no_block ? '<div '.$class.'>' : '<a href="'.$url.'" '.$class.'>';
$buf .= '<div class="blog-list-item-date">'.$date.'</div>';
$buf .= '<div class="blog-list-item-title">'.($no_block ? '<a href="'.$url.'">' : '').$title.($no_block ? '</a>' : '').'</div>';
$buf .= $no_block ? '</div>' : '</a>';
return <<<HTML return <<<HTML
{$ctx->if_true($ctx->year > $year, {$ctx->if_true($ctx->year > $year,
fn() => $ctx->articles_index_year_line($year, $index === 0, $selected_lang->value))} fn() => $ctx->articles_index_year_line($year, $index === 0, $selected_lang->value))}
{$buf}
<a href="{$url}" class="blog-list-item clearfix{$ctx->if_not($post->visible, ' is-hidden')}">
<div class="blog-list-item-date">{$date}</div>
<div class="blog-list-item-title">{$title}</div>
</a>
HTML; HTML;
} }

View File

@ -6,6 +6,8 @@ index: Index
posts: Posts posts: Posts
all_posts: All posts all_posts: All posts
articles: Articles articles: Articles
recent_articles: Recent articles
view_all_articles: View all
unknown_error: Unknown error unknown_error: Unknown error
error: Error error: Error
write: Write write: Write