[www] Article updated, added rendering of article tags

src/components/Article.js

@@ -2,13 +2,31 @@ const React = require('react')
 const getHtml = require('../lib/component').getHtml
 const dateFormat = require('../lib/date').dateFormat
 
-const Head = ({date, children}) => (
+const Tag = ({children}) => (
+	<li className="ArticleTags-Item">
+		{children}
+	</li>
+)
+
+const TagList = ({tags}) => (
+	<ul className="ArticleTags">
+		{tags.map((x, i) => (
+			<Tag key={i}># {x.name}</Tag>
+		))}
+	</ul>
+)
+
+const Head = ({date, tags, children}) => (
 	<header className="Article-Head">
 		<h1>{children}</h1>
 
 		{!date ? null : (
 			<p className="date">{dateFormat(date)}</p>
 		)}
+
+		{!tags.length ? null : (
+			<TagList tags={tags}/>
+		)}
 	</header>
 )
 
@@ -21,14 +39,17 @@ const Share = () => (
 	</div>
 )
 
-const Article = ({children, data, url, title, date, shareable}) => (
+const Article = ({children, article, shareable}) => (
 	<article className="Article">
-		<Head date={date}>
-			{title}
+		<Head
+			date={article.date}
+			tags={article.tags}
+		>
+			{article.title}
 		</Head>
 
 		<div className="Article-Body">
-			{children || getHtml(data)}
+			{children || getHtml(article.post)}
 		</div>
 
 		{!shareable ? null : (

src/core/Article.js

@@ -5,6 +5,10 @@ const {find, findOne, total} = require('../lib/store')
 
 const store = () => Data.getStore(Article)
 
+function make(C) {
+	return x => new C(x)
+}
+
 class Article {
 	static async find(query, options = {}) {
 		const items = await find(store(), query, options)
@@ -41,7 +45,7 @@ class Article {
 		this.date = data.date
 		this.title = data.title
 		this.until = data.until
-		this.tags = data.tags
+		this.tags = (data.tags || []).map(make(Tag))
 		this.content = data.content
 		this.hash = data.hash
 		this.type = data.type
@@ -75,6 +79,12 @@ class Article {
 	}
 }
 
+class Tag {
+	constructor(tag) {
+		this.name = tag;
+	}
+}
+
 const previewFromImage = (imgs = []) => imgs.length
 	? imgs[0]
 	: null

src/render/articles.js

@@ -112,9 +112,7 @@ async function renderArticle(id) {
 	const Component = (
 		<div className="content content_thin">
 			<ArticleComponent
-				title={article.title}
-				date={article.date}
-				data={article.post}
+				article={article}
 				shareable={true}
 			/>
 		</div>

src/style/components/ArticleTags.scss

@@ -0,0 +1,31 @@
+@import "../variables";
+
+.ArticleTags {
+  --article-card-width: 30%;
+  --article-card-margin: var(--single-margin) var(--half-margin);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  list-style: none;
+
+  &-Item {
+    background: #99bde1;
+    padding: 3px 9px;
+
+    font-size: 14px;
+    color: #393939;
+
+    border-radius: 3px;
+  }
+
+  &-Item {
+    margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+
+    }
+  }
+}

src/style/style.scss

@@ -22,6 +22,7 @@
 
 @import "components/ArticleCard";
 @import "components/ArticleCardList";
+@import "components/ArticleTags";
 @import "components/CollectiveImage";
 @import "components/PersonCard";
 @import "components/PersonCardList";