Ченджлог на главной: первое приближение

.eleventy.js

@@ -131,8 +131,10 @@ module.exports = function (config) {
           const currentMonth = months.indexOf(date[1])
           const titledLink = stringParts[1].split('](')
           post['date'] = new Date(Date.parse(`${currentYear}-${currentMonth + 1}-${currentDay}`)).toISOString()
+          post['shortDate'] = `${date[0]} ${date[1]}`
           post['title'] = titledLink[0].replace(/^\[/, '')
           post['url'] = titledLink[1].replace(/\/[^/]+$/, '/')
+          post['authors'] = stringParts[1].split('), ')[1].split(', ')
           const rawArticle = collectionApi.getFilteredByGlob(
             `src${post['url'].replace('https://doka.guide', '')}*.md`,
           )[0]

src/includes/blocks/changelog.njk

@@ -0,0 +1,23 @@
+<div class="changelog">
+  <h2 class="visually-hidden">Новые статьи</h2>
+
+  <ul class="changelog-list">
+    {% for item in changeLog %}
+      <li class="changelog-list__item">
+        <div class="changelog-list__link changelog-item">
+          <time datetime="{{ item.date }}" class="changelog-item__time font-theme--code" data-mobile="{{ item.mobileDate }}">{{ item.shortDate }}</time>
+          <a href="{{ item.url }}" class="changelog-item__title link">{{ item.title | safe }}</a>
+          <div class="changelog-item__author">
+            {% for author in item.authors %}
+              {% if loop.index0 !== 0 %}, {% endif %}<a href="{{ author.url }}" class="changelog-item__author-link font-theme--code link">{{ author.name }}</a>
+            {% endfor %}
+          </div>
+        </div>
+      </li>
+    {% endfor %}
+  </ul>
+  <div class="changelog-footer">
+    <p class="changelog-footer__item">Новые материалы в <a href="https://github.com/doka-guide/content/blob/main/CHANGELOG.md" class="link changelog-footer__link">ченджлоге</a></p>
+    <p class="changelog-footer__item">Станьте автором! Выберите тему в 🔥 <a href="https://github.com/doka-guide/content/milestone/22" class="link changelog-footer__link">Бэклоге</a></p>
+  </div>
+</div>

src/styles/blocks/changelog.css

@@ -0,0 +1,173 @@
+.changelog {
+  padding-block-end: clamp(40px, 4.8%, 80px);
+}
+
+.changelog-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: 1.3;
+}
+
+.changelog-list__item:not(:last-child) {
+  margin-block-end: 20px;
+}
+
+.changelog-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.changelog-item__time,
+.changelog-item__author {
+  display: flex;
+  align-items: baseline;
+  font-size: 28px;
+}
+
+.changelog-item__time::after,
+.changelog-item__author::before {
+  content: '';
+  flex: 1 1 auto;
+  border-block-end: 5px dotted var(--color-text);
+  opacity: 0.3;
+  margin-inline: 18px;
+}
+
+.changelog-item__time {
+  gap: 18px;
+  flex-shrink: 0;
+  inline-size: 30%;
+  font-family: var(--font-family);
+}
+
+.changelog-item__title {
+  margin: 0;
+  font-weight: normal;
+  font-size: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.changelog-item__author {
+  flex-wrap: wrap;
+  flex: 1 0 25%;
+  justify-content: end;
+}
+
+.changelog-item__author-link {
+  font-family: var(--font-family);
+}
+
+.changelog-item__author-link:not(:first-child) {
+  margin-inline-start: 1ch;
+}
+
+.changelog-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-block-start: 45px;
+}
+
+.changelog-footer::before {
+  content: "";
+  flex-basis: 30%;
+}
+
+.changelog-footer__item {
+  margin: 0;
+}
+
+.changelog-footer__item:last-child {
+  flex-grow: 1;
+  text-align: end;
+}
+
+@media (width <= 1024px) {
+  .changelog-item {
+    flex-wrap: wrap;
+  }
+
+  .changelog-item__time {
+    inline-size: 100%;
+    justify-content: end;
+  }
+
+  .changelog-item__time::after {
+    display: none;
+  }
+
+  .changelog-item__title {
+    max-inline-size: 55%;
+    font-size: 18px;
+  }
+
+  .changelog-item__author::before {
+    border-block-end-width: 3px;
+  }
+
+  .changelog-item__time,
+  .changelog-item__author {
+    font-size: 22px;
+  }
+
+  .changelog-footer {
+    flex-direction: column;
+    font-size: 18px;
+  }
+
+  .changelog-footer::before {
+    display: none;
+  }
+
+  .changelog-footer__item:last-child {
+    text-align: start;
+  }
+}
+
+@media (width <= 768px) {
+  .changelog-item {
+    flex-direction: column;
+    justify-content: start;
+  }
+
+  .changelog-item__time {
+    inline-size: fit-content;
+    justify-content: start;
+    text-indent: -9999px;
+    line-height: 0;
+  }
+
+  .changelog-item__time::before {
+    content: attr(data-mobile);
+    display: block;
+    text-indent: 0;
+    line-height: initial;
+  }
+
+  .changelog-item__title {
+    max-inline-size: 90dvw;
+    font-size: 20px;
+  }
+
+  .changelog-item__author {
+    flex: 0 0 auto;
+    justify-content: start;
+  }
+
+  .changelog-item__author::before {
+    display: none;
+  }
+
+  .changelog-item__time,
+  .changelog-item__author {
+    font-size: 20px;
+  }
+
+  .changelog-footer {
+    margin-block-start: 30px;
+    font-size: 17px;
+  }
+}

src/styles/index.css

@@ -88,3 +88,4 @@
 @import url("blocks/subscribe-popup.css");
 @import url("blocks/subscribe-page.css");
 @import url("blocks/baseline.css");
+@import url("blocks/changelog.css");

src/views/index.11tydata.js

@@ -38,6 +38,32 @@ module.exports = {
   documentDescription: 'Документация для разработчиков на понятном языке',
 
   eleventyComputed: {
+    changeLog: async function (data) {
+      const { collections } = data
+      const { posts, peopleById } = collections
+      const peopleIds = Object.keys(peopleById)
+
+      return posts
+        ? posts
+            .filter((p) => typeof p !== 'string')
+            .slice(0, 5)
+            .map((p) => {
+              p['title'] = p['title'].replace(/^`/, '<code>').replace(/`$/, '</code>')
+              p['authors'] = p['authors'].map((a) => {
+                return {
+                  name: a,
+                  url: `/people/${peopleIds.filter((p) => peopleById[p].data.name === a)[0]}`,
+                }
+              })
+              const date = new Date(p['date'])
+              const day = String(date.getDate())
+              const month = String(date.getMonth() + 1)
+              p['mobileDate'] = `${day.length > 1 ? day : `0${month}`}.${month.length > 1 ? month : `0${month}`}`
+              return p
+            })
+        : []
+    },
+
     promoData: async function (data) {
       const { collections } = data
       const { promos } = collections

src/views/index.njk

@@ -29,6 +29,8 @@
       </div>
     </div>
 
+    {% include "blocks/changelog.njk" %}
+
     {% include "articles-gallery.njk" %}
 
     <section class="materials-collection">