Posts list pages and post page

This commit is contained in:
Yves Gatesoupe 2020-07-15 23:05:36 +02:00
parent 120def00bc
commit d89fc3516a
28 changed files with 292 additions and 153 deletions

View File

@ -41,28 +41,32 @@ module.exports = function(config) {
// Custom collections
const livePosts = post => post.date <= now && !post.data.draft;
const newsPosts = post => post.data.type === 'news';
const eventPosts = post => post.data.type === 'event';
config.addCollection('posts', collection => {
return [
...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)
...collection.getFilteredByGlob('./src/posts/*.md')
].reverse();
});
config.addCollection('postFeed', collection => {
return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
.reverse()
.slice(0, site.maxPostsPerPage);
config.addCollection('news', collection => {
return [
...collection.getFilteredByGlob('./src/posts/*.md').filter(newsPosts)
].reverse();
});
config.addCollection('events', collection => {
return [
...collection.getFilteredByGlob('./src/posts/*.md').filter(eventPosts)
].reverse();
});
config.addCollection('newsFeed', collection => {
return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
.reverse()
.slice(0, site.maxNewsPerPage);
});
// const teamMembers = member;
config.addCollection('members', collection => {
return [...collection.getFilteredByGlob("./src/members/*.md")];
});
config.addCollection('profiles', collection => {
return [...collection.getFilteredByGlob("./src/members/*.md")]
.slice(0, site.maxProfilePreview);

View File

@ -1,23 +1,23 @@
{
"items": [
{
"text": "Actualité",
"url": "/posts/",
"external": false
},
{
"text": "Comprendre la CAE",
"url": "/comprendre-la-cae",
"url": "/comprendre-la-cae/",
"external": false
},
{
"text": "Nous rejoindre",
"url": "/nous-rejoindre",
"url": "/nous-rejoindre/",
"external": false
},
{
"text": "L'équipe",
"url": "/equipe",
"external": false
},
{
"text": "Actualité",
"url": "/actualite",
"url": "/equipe/",
"external": false
},
{

View File

@ -7,7 +7,7 @@
{% block content %}
<main id="main-content" class="home" tabindex="-1">
{% include "partials/components/intro.njk" %}
{% include "partials/components/news-list.njk" %}
{% include "partials/components/posts-list-home.njk" %}
{% include "partials/components/post-list.njk" %}
{% include "partials/components/presentation.njk" %}
{% include "partials/components/sponsor.njk" %}

View File

@ -1,47 +1,17 @@
{% extends 'layouts/base.njk' %}
{# Intro content #}
{% set introHeading = title %}
{% set introSummary %}
<p class="[ intro__meta ] [ text-500 leading-tight ]">
{% if date %}
<time datetime="{{ date | w3DateFilter }}" class="dt-published">{{ date | dateFilter }}</time>
{% endif %}
<span>— {{ helpers.getReadingTime(content) }} minute read</span>
</p>
{% endset %}
{% block content %}
<main id="main-content" tabindex="-1">
<article class="[ post ] [ h-entry ]">
{% include "partials/components/intro.njk" %}
<div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 {{ 'pad-bottom-900' if not site.enableThirdPartyComments }} text-500 ] [ sf-flow ] [ e-content ]">
<article class="[ post wrapper ]">
<div class="[ post__body ]">
<h1>{{ title }}</h1>
{% if illustration %}
<img class="post-pic" src="{{ illustration }}" alt="illustration de l'article">
{% endif %}
{{ content | safe }}
<a class="return-link" href="/posts">Voir toute l'actualité</a>
</div>
{% if site.enableThirdPartyComments %}
<hr />
<aside class="[ post__body ] [ inner-wrapper ] [ pad-bottom-900 text-500 ]">
{% include "partials/global/third-party-comments.njk" %}
</aside>
{% endif %}
{% if tags %}
<footer class="[ post__footer ] [ pad-top-500 pad-bottom-500 ]">
<div class="inner-wrapper">
<div class="[ nav ] [ box-flex align-center ]">
<h2 class="font-base text-600 weight-mid">Filed under</h2>
<ul class="[ nav__list ] [ box-flex align-center pad-left-400 ] [ p-category ]">
{% for item in tags %}
<li class="nav__item">
<a href="/tags/{{ item }}">{{ item }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</footer>
{% endif %}
</article>
{% include "partials/components/contact-form.njk" %}
</main>
{% endblock %}
{{ content | safe }}

View File

@ -0,0 +1,24 @@
{% extends 'layouts/base.njk' %}
{% set newsListItems = collections.events %}
{% block content %}
<main id="main-content" class="posts" tabindex="-1">
<div class="[ wrapper ]">
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
<ul class="post-filter">
<li>
<a href="/posts">Tout</a>
</li>
<li>
<a href="/posts-news">Actualités</a>
</li>
<li class="active">
<a href="/posts-events">Évènements</a>
</li>
</ul>
</div>
{% include "partials/components//posts-list.njk" %}
{% include "partials/components/contact-form.njk" %}
</main>
{% endblock %}

View File

@ -0,0 +1,24 @@
{% extends 'layouts/base.njk' %}
{% set newsListItems = collections.news %}
{% block content %}
<main id="main-content" class="posts" tabindex="-1">
<div class="[ wrapper ]">
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
<ul class="post-filter">
<li>
<a href="/posts">Tout</a>
</li>
<li class="active">
<a href="/posts-news">Actualités</a>
</li>
<li>
<a href="/posts-events">Évènements</a>
</li>
</ul>
</div>
{% include "partials/components//posts-list.njk" %}
{% include "partials/components/contact-form.njk" %}
</main>
{% endblock %}

View File

@ -0,0 +1,27 @@
{% extends 'layouts/base.njk' %}
{% set newsListItems = collections.posts %}
{% block content %}
<main id="main-content" class="posts" tabindex="-1">
<div class="[ wrapper ]">
<h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
<ul class="post-filter">
<li class="active">
<a href="/posts">Tout</a>
</li>
<li>
<a href="/posts-news">Actualités</a>
</li>
<li>
<a href="/posts-events">Évènements</a>
</li>
</ul>
</div>
<section class="[ news-list wrapper ]">
{% include "partials/components/posts-list.njk" %}
</section>
{% include "partials/components/contact-form.njk" %}
</main>
{% endblock %}

View File

@ -13,8 +13,12 @@
{% set currentAttribute = ' aria-current="page"' %}
{% endif %}
{% if page.url == item.url %}
<li class="nav__item active">
{% else %}
<li class="nav__item">
<a href="{{ item.url | url }}"{{ relAttribute | safe }}{{ currentAttribute | safe }}>{{ item.text }}</a>
{% endif %}
<a href="{{ item.url | url }}" {{ relAttribute | safe }}{{ currentAttribute | safe }}>{{ item.text }}</a>
</li>
{% endfor %}
</ul>

View File

@ -1,25 +0,0 @@
{% if newsListItems.length %}
<section class="[ news-list ]">
<svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
<div class="[ wrapper ]">
<div class="news-list__inner">
<h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
<ol class="[ news-list__items ]" reversed>
{% for item in newsListItems %}
{% if item.date.getTime() <= global.now %}
<li class="news-list__item">
<h3 class="news-list__item-heading">
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
</h3>
<p class="news-list__item-date">
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
</p>
</li>
{% endif %}
{% endfor %}
</ol>
<a href="/" class="news-list__see-all">Voir tout</a>
</div>
</div>
</section>
{% endif %}

View File

@ -0,0 +1,10 @@
<section class="[ news-list ]">
<svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
<div class="[ wrapper ]">
<div class="news-list__inner">
<h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
{% include "partials/components/posts-list.njk" %}
<a href="/posts" class="news-list__see-all">Voir tout</a>
</div>
</div>
</section>

View File

@ -0,0 +1,16 @@
{% if newsListItems.length %}
<ol class="[ news-list__items ]" reversed>
{% for item in newsListItems %}
{% if item.date.getTime() <= global.now %}
<li class="news-list__item {{ item.data.type }}">
<h3 class="news-list__item-heading">
<a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
</h3>
<p class="news-list__item-date">
<time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
</p>
</li>
{% endif %}
{% endfor %}
</ol>
{% endif %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

View File

@ -0,0 +1,8 @@
---
title: 'Actualité & Évènements'
permalink: '/posts-events/index.html'
layout: 'layouts/posts-events.njk'
pageHeading: 'Actualité & Évènements'
---

8
src/pages/posts-news.md Normal file
View File

@ -0,0 +1,8 @@
---
title: 'Actualité & Évènements'
permalink: '/posts-news/index.html'
layout: 'layouts/posts-news.njk'
pageHeading: 'Actualité & Évènements'
---

8
src/pages/posts.md Normal file
View File

@ -0,0 +1,8 @@
---
title: 'Actualité & Évènements'
permalink: '/posts/index.html'
layout: 'layouts/posts.njk'
pageHeading: 'Actualité & Évènements'
---

View File

@ -1,6 +1,7 @@
---
title: A post with code samples
date: '2019-12-18'
type: 'news'
tags:
- demo-content
- code

View File

@ -1,6 +1,7 @@
---
title: A post with figures and video
date: '2019-04-18'
type: 'news'
tags:
- demo-content
- blog

View File

@ -1,6 +1,7 @@
---
title: A scheduled post
date: '2022-06-18'
type: 'news'
tags:
- demo-content
- simple-post

View File

@ -0,0 +1,29 @@
---
title: A simple post
date: '2019-05-18'
type: 'news'
tags:
- demo-content
- simple-post
- blog
---
A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
How about a `<blockquote>`?
> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
A list of stuff:
- Sed posuere consectetur est at lobortis
- Aenean lacinia bibendum nulla sed consectetur
- Sed posuere consectetur est at lobortis
How about an ordered list of stuff:
1. Sed posuere consectetur est at lobortis
2. Aenean lacinia bibendum nulla sed consectetur
3. Sed posuere consectetur est at lobortis
Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.

View File

@ -1,28 +1,10 @@
---
title: A simple post
date: '2019-05-18'
title: A simpler post
date: '2019-05-19'
type: 'news'
tags:
- demo-content
- simple-post
- blog
---
A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
How about a `<blockquote>`?
> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
A list of stuff:
- Sed posuere consectetur est at lobortis
- Aenean lacinia bibendum nulla sed consectetur
- Sed posuere consectetur est at lobortis
How about an ordered list of stuff:
1. Sed posuere consectetur est at lobortis
2. Aenean lacinia bibendum nulla sed consectetur
3. Sed posuere consectetur est at lobortis
Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.

View File

@ -2,6 +2,7 @@
title: Réunion d'information Astrolabe
date: '2020-06-12'
time: '19:00'
type: 'event'
tags:
- évenement
- réunion

View File

@ -0,0 +1,16 @@
---
title: Réunion d'information Astrolabe
date: '2020-06-24'
time: '19:00'
type: 'event'
illustration: '/images/reunion-24-06-2020.jpeg'
layout: 'layouts/post.njk'
---
Vous vous demandez ce qu'est une #SCOP #CAE ? Le statut d'entrepreneur salarié #CESA est-il fait pour vous ?
Venez nous rencontrer lors de notre réunion d'information :
- Date : 24 Juin 19H
- Lieu : Visio-conférence
[Formulaire d'inscription](https://framaforms.org/reunion-dinformation-scop-astrolabe-cae-du-24-juin-a-19h-en-visio-1591805443)

View File

@ -60,5 +60,21 @@ a:visited {
&.highlight {
background-color: var(--color-primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.return-link {
align-self: flex-end;
font-size: 1.125rem;
font-weight: 700;
margin-top: 2rem;
&:visited {
color: inherit;
}
}

View File

@ -29,5 +29,10 @@
text-decoration: none;
}
}
&.active a {
text-decoration: underline;
cursor: default;
}
}
}

View File

@ -1,32 +1,23 @@
.post {
padding-bottom: 8rem;
margin-bottom: 8rem;
&__body {
// --flow-space: #{get-size(800)};
display: flex;
flex-direction: column;
/**
* Generic HTML styles
*/
h1 {
margin-top: 8rem;
margin: 8rem 0 4rem;
}
// h2 + *,
// h3 + * {
// --flow-space: #{get-size(500)};
// }
h2,
h3 {
@include apply-utility('leading', 'tight');
position: relative;
/*display: flex;*/
}
p {
font-size: 1.125rem;
margin-bottom: 1rem;
}
a:not([class]) {
@ -75,6 +66,7 @@
ol:not([class]),
ul:not([class]) {
margin-left: get-size(800);
margin-bottom: 1rem;
li + li {
margin-top: get-size(300);
@ -101,12 +93,6 @@
position: relative;
}
figure img,
pre > code,
.video-player {
// box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
figure img {
position: relative;
z-index: 1;
@ -120,6 +106,11 @@
padding: 0 get-size(500);
}
.post-pic {
align-self: center;
margin-bottom: 3rem;
}
pre > code {
display: block;
background: var(--color-dark);
@ -134,7 +125,6 @@
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
margin-top: 4rem;
.video-player > iframe {
height: 89%;
@ -237,7 +227,7 @@
.process-cae {
max-width: 34.875rem;
margin: 8rem auto 0;
margin: 0 auto;
&.split {
max-width: 100%;

View File

@ -1,23 +1,9 @@
.news-list {
margin-top: 8rem;
margin-bottom: 24rem;
position: relative;
// > svg {
// position: absolute;
// z-index: -1;
// top: -18rem;
// }
.wrapper {
// display: flex;
// flex-direction: column;
position: relative;
}
&__inner {
position: absolute;
top: -9rem;
display: flex;
flex-direction: column;
}
@ -33,7 +19,7 @@
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 1.5rem;
grid-row-gap: 0;
grid-row-gap: 2rem;
}
&__item {
@ -43,6 +29,10 @@
color: var(--color-dark);
border-radius: 1rem;
&.event {
background-color: #97dffc;
}
&-heading {
font-size: 1.125rem;
font-weight: 600;
@ -78,16 +68,16 @@
align-self: flex-end;
margin-top: 3rem;
padding: .875rem 1.5rem;
&,
&:visited {
color: var(--color-dark);
}
&:hover {
background-color: var(--color-primary);
border-radius: 1.5rem;
text-decoration: none;
}
}
}
.home .news-list {
margin-top: 8rem;
margin-bottom: 24rem;
position: relative;
&__inner {
position: absolute;
top: -9rem;
}
}

View File

@ -0,0 +1,28 @@
.posts {
.wrapper:first-child {
display: flex;
flex-direction: column;
}
.post-filter {
align-self: flex-end;
margin-bottom: 2rem;
list-style: none;
display: flex;
li {
display: inline-block;
margin-left: 1.5rem;
a {
font-weight: 600;
text-decoration: none;
}
&.active a {
text-decoration: underline;
cursor: default;
}
}
}
}

View File

@ -68,11 +68,12 @@ img {
@import 'components/intro';
@import 'components/nav';
@import 'components/pagination';
@import 'components/posts';
@import 'components/post';
@import 'components/post-list';
@import 'components/member';
@import 'components/member-list';
@import 'components/news-list';
@import 'components/posts-list';
@import 'components/presentation';
@import 'components/site-head';
@import 'components/site-foot';