[www] added ArticleCard on Home

src/components/ArticleCard.js

@@ -0,0 +1,39 @@
+const React = require('react')
+const dateFormat = require('../lib/date').dateFormat
+
+const Date = ({children}) => (
+	<p className="date">{dateFormat(children)}</p>
+)
+
+const Image = ({data, alt}) => (
+	<picture>
+		<img
+			className="opa"
+			alt={alt}
+			src={data.src}
+			srcSet={data.set.map(({url, density}) => `${url} ${density}x`)}
+		/>
+	</picture>
+)
+
+const ArticleCard = ({article}) => (
+	<article className="ArticleCard">
+		<a className="invisible" href={article.url}>
+			<div className="ArticleCard-image">
+				{!article.preview ? null : (
+					<Image data={article.preview} alt={article.title}/>
+				)}
+			</div>
+
+			<div className="ArticleCard-body">
+				{article.title}
+
+				{!article.date ? null : (
+					<Date>{article.date}</Date>
+				)}
+			</div>
+		</a>
+	</article>
+)
+
+module.exports = ArticleCard

src/components/ArticleCardList.js

@@ -0,0 +1,26 @@
+const React = require('react')
+const Paginator = require('./Paginator')
+const ArticleCard = require('./ArticleCard')
+
+const ArticleCardList = ({articles, nextPage, prevPage}) => (
+	<div className="ArticleCardList">
+		{!prevPage ? null : (
+			<Paginator url={`/articles/${prevPage}`} type="top"/>
+		)}
+
+		<div className="ArticleCardList-body">
+			{articles.map((article, i) => (
+				<ArticleCard
+					key={i}
+					article={article}
+				/>
+			))}
+		</div>
+
+		{!nextPage ? null : (
+			<Paginator url={`/articles/${nextPage}`} type="bottom"/>
+		)}
+	</div>
+)
+
+module.exports = ArticleCardList

src/render/articles.js

@@ -0,0 +1,68 @@
+const React = require('react')
+const Article = require('../core/Article')
+const ArticleCardList = require('../components/ArticleCardList')
+const timestamp = require('../lib/date').timestamp
+const ImageArtifactType = require('../core/ImageArtifactType')
+const {sortBy} = require('../utils/sort')
+
+const sortArticleByDate = sortBy(
+	x => timestamp(new Date(x.date))
+)
+
+async function findArticlesNin(nin, skip, limit, sort) {
+	const query = {
+		_id: {$nin: nin}
+	}
+
+	return Article.find(query, {
+		sort,
+		skip,
+		limit,
+	})
+}
+
+async function createArticleCardList(page, pageSize) {
+	const limit = pageSize
+	const skip = (page - 1) * pageSize
+
+	const pinnedArticles = page === 1
+		? await Article.findPinned()
+		: []
+
+	const total = await Article.total()
+	const totalPages = total / pageSize
+
+	const id = i => i._id
+	const pinnedIds = pinnedArticles.map(id)
+	const articles = await findArticlesNin(pinnedIds, skip, limit, {date: -1})
+
+	const prevPage = page > 1
+		? page - 1
+		: null
+
+	const nextPage = page < totalPages
+		? page + 1
+		: null
+
+	const content = [
+		...pinnedArticles.sort(sortArticleByDate),
+		...articles
+	]
+		.map(x => x.plain())
+		.map(x => ({
+			...x,
+			preview: !x.preview ? null : (
+				x.preview.getPicture(ImageArtifactType.MEDIUM)
+			)
+		}))
+
+	return (
+		<ArticleCardList
+			articles={content}
+			prevPage={prevPage}
+			nextPage={nextPage}
+		/>
+	)
+}
+
+exports.createArticleCardList = createArticleCardList

src/render/home.js

@@ -1,5 +1,5 @@
 const React = require('react')
-const getArticleListComponent = require('../routes/articles').getArticleListComponent
+const {createArticleCardList} = require('../render/articles')
 const {render} = require('../lib/render')
 
 function getMeta(article) {
@@ -8,8 +8,8 @@ function getMeta(article) {
 	}
 }
 
-	const articles = await getArticleListComponent(path, 1, pageSize)
 async function renderHome(path, pageSize) {
+	const articles = await createArticleCardList(path, 1, pageSize)
 
 	const Component = (
 		<div className="content content_wide">

src/style/components/ArticleCard.scss

@@ -0,0 +1,64 @@
+.ArticleCard {
+  display: flex;
+  flex-direction: column;
+
+  margin: .25em;
+
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+
+.ArticleCard-image {
+  border-radius: 2px 2px 0 0;
+
+  width: 100%;
+  height: 15em;
+
+  img {
+    max-width: 30em;
+
+    width: 100%;
+    height: 15em;
+
+    object-fit: cover;
+  }
+}
+
+.ArticleCard-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  height: 5em;
+
+  padding: .25em .5em;
+}
+
+
+//Styling
+
+.ArticleCard .date {
+  color: #ccc;
+  font-size: small;
+}
+
+
+//Animation
+
+.ArticleCard-image {
+  overflow: hidden;
+
+  img{
+    transition: transform 150ms ease-out;
+  }
+}
+
+.ArticleCard {
+  &:hover{
+    img{
+      transform: scale(1.05);
+    }
+  }
+}
+

src/style/components/ArticleCardList.scss

@@ -0,0 +1,5 @@
+.ArticleCardList-body {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}

src/style/style.scss

@@ -22,6 +22,9 @@
 @import "components/page-schedule";
 @import "components/page-collective";
 
+@import "components/ArticleCard";
+@import "components/ArticleCardList";
+
 @import "main";
 @import "body-wrapper";
 @import "page";

src/style/variables.scss

@@ -78,6 +78,19 @@ $short-duration: 0.3s;
   --font-size-h1: 2.0rem;
   --font-size-h2: 1.3rem;
   --font-size-h3: 1.1rem;
+
+  //COLOR
+  --dark-color: $dark-color;
+  --darker-color: $darker-color;
+  --light-color: $light-color;
+  --lighter-color: $lighter-color;
+
+  //MARGINS
+  --small-margin: $small-margin;
+  --half-margin: $half-margin;
+  --single-margin: $single-margin;
+  --double-margin: $double-margin;
+  --post-margin: $post-margin;
 }
 
 @media (max-width: $mobile-width) {