Add articles RSS feed

Closes #21
andrew--r · May 12, 2020 · 1062cc8 · 1062cc8
1 parent 0ae643a
commit 1062cc8
Show file tree

Hide file tree

Showing 14 changed files with 243 additions and 19 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,5 +1,6 @@
 const markdownIt = require('markdown-it');
 const hljs = require('highlight.js');
+const rss = require('@11ty/eleventy-plugin-rss');
 const htmlMinifier = require('html-minifier');
 const { groupByYear } = require('./src/nunjucks/filters/groupByYear');
 
@@ -63,6 +64,11 @@ module.exports = (config) => {
     return formatter.format(date);
   });
 
+  /**
+   * Plugins
+   */
+  config.addPlugin(rss);
+
   return {
     dir: {
       input: 'src/site',

diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "homepage": "https://forweb.dev",
   "devDependencies": {
     "@11ty/eleventy": "0.10.0",
+    "@11ty/eleventy-plugin-rss": "1.0.7",
     "autoprefixer": "9.3.1",
     "full-icu": "1.3.0",
     "highlight.js": "10.0.1",

diff --git a/src/site/_data/site.json b/src/site/_data/site.json
@@ -2,10 +2,13 @@
   "url": "https://forweb.dev",
   "lang": "ru",
   "title": "For Web",
+  "description": "Годнота для фронтендеров и дизайнеров",
   "author": {
     "name": "Андрей Романов",
     "email": "me@andrew-r.ru",
     "url": "http://andrew-r.ru"
   },
-  "description": "Годнота для фронтендеров и дизайнеров"
+  "feeds": {
+    "articles": "/blog/feed.xml"
+  }
 }
diff --git a/src/site/_includes/components/_index.scss b/src/site/_includes/components/_index.scss
@@ -1,3 +1,4 @@
 @use './footer';
 @use './header';
 @use './logo';
+@use './rss-link';
diff --git a/src/site/_includes/components/publicationDate/index.njk b/src/site/_includes/components/publicationDate/index.njk
diff --git a/src/site/_includes/components/rss-link/_index.scss b/src/site/_includes/components/rss-link/_index.scss
@@ -0,0 +1,28 @@
+@use 'tokens/color';
+
+.rss-link {
+  display: inline-block;
+  width: 0.5em;
+  height: 0.5em;
+  color: color.$rss;
+  vertical-align: top;
+
+  &:hover {
+    color: color.$link-hover;
+  }
+
+  &:focus-visible {
+    background-color: color.$link-hover;
+    color: #fff;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  path {
+    fill: currentColor;
+  }
+}
diff --git a/src/site/_includes/components/rss-link/index.njk b/src/site/_includes/components/rss-link/index.njk
@@ -0,0 +1,7 @@
+{% macro rssLink(href) %}
+  <a class="rss-link unstyled-link" href="{{ href }}">
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path  d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 013.293 3.295A3.303 3.303 0 013.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
+    </svg>
+  </a>
+{% endmacro %}
diff --git a/src/site/_includes/layouts/main.njk b/src/site/_includes/layouts/main.njk
@@ -21,6 +21,12 @@
   <link rel="icon" type="image/png" href="/assets/images/favicon.png">
 
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">
+
+  {% if alternates %}
+    {% for alternate in alternates %}
+      <link rel="alternate" href="{{ alternate.href }}" type="{{ alternate.type }}" />
+    {% endfor %}
+  {% endif %}
 </head>
 <body class="page">
   <div class="page__header">

diff --git a/src/site/_includes/styles/_global.scss b/src/site/_includes/styles/_global.scss
@@ -1,7 +1,9 @@
+@use 'tokens/color';
 @use 'tokens/text';
 
 :root {
   box-sizing: border-box;
+  color: color.$text;
   height: 100%;
   font-family: text.$family-base;
   font-size: text.$size-m;

diff --git a/src/site/_includes/styles/tokens/_color.scss b/src/site/_includes/styles/tokens/_color.scss
@@ -2,6 +2,7 @@ $blue: #005ea5;
 $blue-light: #139ceb;
 $red: #cd192e;
 $purple: #4c2c92;
+$rss: #f60;
 
 $outline: $red;
 
@@ -10,3 +11,5 @@ $link-hover: $red;
 $link-visited: $purple;
 
 $borders: rgba(0, 0, 0, 0.1);
+
+$text: #222;
diff --git a/src/site/blog/feed.njk b/src/site/blog/feed.njk
@@ -0,0 +1,30 @@
+---
+title: Статьи For Web
+permalink: "{{ site.feeds.articles }}"
+eleventyExcludeFromCollections: true
+---
+{% set feedUrl = page.url | absoluteUrl(site.url) %}
+{% set posts = collections.articles %}
+
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+  <title>{{ site.title }}</title>
+  <link href="{{ feedUrl }}" rel="self" />
+  <link href="{{ site.url }}" />
+  <updated>{{ posts | rssLastUpdatedDate }}</updated>
+  <id>{{ feedUrl }}</id>
+  <author>
+    <name>{{ site.author.name }}</name>
+    <email>{{ site.author.email }}</email>
+  </author>
+  {%- for post in posts %}
+  {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(site.url) }}{% endset %}
+  <entry>
+    <title>{{ post.data.title }}</title>
+    <link href="{{ absolutePostUrl }}"/>
+    <updated>{{ post.date | rssDate }}</updated>
+    <id>{{ absolutePostUrl }}</id>
+    <content type="html">{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}</content>
+  </entry>
+  {%- endfor %}
+</feed>
diff --git a/src/site/blog/index.njk b/src/site/blog/index.njk
@@ -2,9 +2,14 @@
 layout: main
 title: Статьи — For Web
 description: Наши статьи и переводы
+alternates:
+  - href: feed.xml
+    type: application/atom+xml
 ---
+{% from "components/rss-link/index.njk" import rssLink %}
+
 <div class="content">
-  <h1>Статьи</h1>
+  <h1>Статьи {{ rssLink(site.feeds.articles) }}</h1>
 
   {% for year, articles in collections.articles | groupByYear %}
     <section class="indicate-visited-links">

diff --git a/src/site/index.njk b/src/site/index.njk
@@ -3,14 +3,18 @@ layout: main
 title: For Web
 description: Годнота для фронтендеров и дизайнеров
 ---
+{% from "components/rss-link/index.njk" import rssLink %}
+
 <div class="content">
   <h1>
     Годнота для фронтендеров
   </h1>
 
   <p class="paragraph--lead">С 2014 года ежедневно публикуем свежие статьи, доклады, инструменты и многое другое в <a href="tg://resolve?domain=forwebdev">Телеграме</a>, <a href="https://vk.com/forwebdev">ВКонтакте</a> и <a href="https://twitter.com/forwebdev">Твитере</a></p>
 
-  <h2><a href="/blog">Наши статьи</a></h2>
+  <h2>
+    <a href="/blog">Наши статьи</a> {{ rssLink(site.feeds.articles) }}
+  </h2>
 
   <ul>
     {% set latestArticles = collections.articles | sort(true, false, 'date') | slice(3) %}