4 files changed, 126 insertions, 2 deletions

diff --git a/src/build/index.mjs b/src/build/index.mjs
index c7e1cf7..74a7113 100644
--- a/src/build/index.mjs
+++ b/src/build/index.mjs
@@ -12,6 +12,28 @@ import listArticles from './list-articles.mjs';
 import getRSS from './rss.mjs';
 import toml from '@ltd/j-toml';
 
+function getArticleYear(article) {
+  if(article.metaData.pubDate.getFullYear) {
+    return article.metaData.pubDate.getFullYear();
+  } else if(article.metaData.pubDate.getUTCFullYear) {
+    return article.metaData.pubDate.getUTCFullYear();
+  }
+
+  return 0;
+}
+function getArticleDate(article) {
+  if(article.metaData.pubDate.getDate) {
+    return article.metaData.pubDate.getFullYear() * 100 + article.metaData.pubDate.getDate();
+  } else if(article.metaData.pubDate.getUTCDate) {
+    return article.metaData.pubDate.getUTCFullYear() * 100 + article.metaData.pubDate.getDate();
+  }
+
+  return 0;
+}
+function cmpArticles(a, b) {
+  return getArticleDate(b) - getArticleDate(a);
+}
+
 const loadMD = (listFile, suffix) => {
   const listContent = [];
   for (const file of listFile) {
@@ -41,6 +63,7 @@ const loadMD = (listFile, suffix) => {
     const readMore = h('a', 'Lire plus...');
 
     readMore.properties.href = `${suffix}/${file.slice(0, -3)}`;
+    const pubYear = getArticleYear({metaData});
 
     listContent.push({
       name: file.slice(0, -3),
@@ -49,8 +72,10 @@ const loadMD = (listFile, suffix) => {
       introDesc: hastToString(intro),
       imageUrl: logo.properties.src,
       metaData,
+      pubYear,
       title,
       domTitle,
+      url: baseUrl + domTitle,
     });
   }
 
@@ -61,6 +86,7 @@ const leftPanelTmpl = fs.readFileSync('src/templates/left.tmpl', 'utf8');
 const headerTmpl = fs.readFileSync('src/templates/header.tmpl', 'utf8');
 const articleTmpl = fs.readFileSync('src/templates/article.tmpl', 'utf8');
 const indexTmpl = fs.readFileSync('src/templates/index.tmpl', 'utf8');
+const tagTmpl = fs.readFileSync('src/templates/tag.tmpl', 'utf8');
 const baseUrl = 'https://ache.one/';
 
 const partials = {
@@ -72,21 +98,54 @@ const svg = loadSVG();
 
 const articles = loadMD(listArticles, 'articles');
 
+const tagsArticle = new Map();
+
 for (const article of articles) {
   const context = {
     svg,
     title: `${article.title} - ache`,
-    canonical: baseUrl + article.domTitle,
+    canonical: article.url,
     content: article.content,
     domTitle: article.domTitle,
+    metaData: article.metaData,
   };
   const output = mustache.render(articleTmpl, context, partials);
 
   console.log(`Create : ${article.title}`);
   fs.writeFileSync(`articles/${article.name}.html`, output);
+
+  for (const tag of article.metaData.tags) {
+    if (tagsArticle.has(tag)) {
+      tagsArticle.get(tag).push(article);
+    } else {
+      tagsArticle.set(tag, [article]);
+    }
+  }
+}
+
+try {
+  fs.mkdirSync('tag');
+} catch {
+  fs.rmSync('tag', {force: true, recursive: true});
+  fs.mkdirSync('tag');
+}
+
+for (const [tag, articles] of tagsArticle.entries()) {
+  console.log(`Create tag page : ${tag}.xml`);
+  articles.sort(cmpArticles);
+
+  const context = {
+    svg,
+    title: `ache - Tag: ${tag}`,
+    tag,
+    articles,
+  };
+
+  const output = mustache.render(tagTmpl, context, partials);
+  fs.writeFileSync(`tag/${tag}.html`, output);
 }
 
-console.log('Create : rss.xml');
+console.log('Create RSS Flux: rss.xml');
 const xmlFeed = getRSS(articles, baseUrl);
 fs.writeFileSync('rss.xml', xmlFeed);
 
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 53c131f..0dd4889 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -214,3 +214,43 @@ code {
   border-radius: 8px;
   padding: 0 5px;
 }
+
+.articleList {
+    list-style-type: none;
+    font-size: 1.2em;
+    font-family: palatino, Times, serif;
+    text-indent: -65px;
+
+    position: relative;
+    top: -3px;
+    left: -60px;
+
+    .pubYear {
+      color: #777;
+      margin: 0 10px;
+    }
+}
+
+.tags {
+  display: flex;
+  gap: 10px;
+  flex-flow: row-reverse;
+  font-size: 0.8em;
+
+  .tag {
+    background-color: #E0D0C9;
+    color: #553;
+    padding: 0px 8px;
+    border-radius: 3px;
+  }
+}
+.inline-tag {
+  position: relative;
+  top: -3px;
+  font-size: 0.7em;
+  background-color: #E0D0C9;
+  color: #553;
+  padding: 3px 8px;
+  border-radius: 3px;
+  margin: 0 5px;
+}
diff --git a/src/templates/article.tmpl b/src/templates/article.tmpl
index d67f34a..6d6528d 100644
--- a/src/templates/article.tmpl
+++ b/src/templates/article.tmpl
@@ -5,6 +5,7 @@
     <div class="decal_panel">
       <div class="marge"></div>
       <article class="post" id="{{domTitle}}_article">
+        <div class="tags">{{# metaData.tags }}<a href="/tag/{{{ . }}}" class="tag">{{{ . }}}</a>{{/ metaData.tags }}</div>
         {{{ content }}}
       </article>
       <div class="sidenotes"></div>
diff --git a/src/templates/tag.tmpl b/src/templates/tag.tmpl
new file mode 100644
index 0000000..e489c01
--- /dev/null
+++ b/src/templates/tag.tmpl
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="fr">
+  {{>header }}
+  <body>
+    <div class="decal_panel">
+      <div class="marge"></div>
+      <article class="post" id="{{domTitle}}_article">
+        <h1><a class="anchor" href="{{ canonical }}">Tag: {{ tag }}</a></h1>
+        <br>
+        <ul class="articleList">
+        {{# articles}}
+        <li><a href="{{ url }}"><span class="pubYear">{{ pubYear }}</span>{{ title }}</a>  
+          {{# metaData.tags }}
+            <a href="/tag/{{{ . }}}" class="inline-tag">{{{ . }}}</a>
+          {{/ metaData.tags }}
+        </li>
+        {{/ articles}}
+        </ul>
+      </article>
+      <div class="sidenotes"></div>
+    </div>
+    {{> leftPanel }}
+  </body>
+</html>